From 918dd899955e32b1cd0da04dbf54d83322a4943e Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Wed, 14 Oct 2026 10:30:32 +0200
Subject: [PATCH 1/3] feat(applications): standalone application shell with its
 own menu

- an application opened at /apps/tables/app/{id} gets its own navigation:
  its menu items replace the Tables navigation
- a menu item opens its view, table or page with widgets inside the
  application, at /application/{id}/menu/{technicalName}
- opened on its own, the application starts on its first page
- inside Tables, a menu item page shows a breadcrumb back to the
  application and a link to open it on its own
- the content area only takes focus after a first interaction, so no
  focus ring is drawn around it on load

Signed-off-by: Remko <remko@conduction.nl>
Assisted-by: ClaudeCode:claude-opus-5-5
---
 cypress/component/menuItems.cy.js             |  23 ++
 playwright/e2e/application.spec.ts            |  51 ++++
 src/App.vue                                   |  70 ++++--
 .../sections/ApplicationNavigation.vue        | 151 ++++++++++++
 src/pages/Context.vue                         | 233 +++++++++++++++++-
 src/router.js                                 |   5 +
 src/shared/components/MenuItemIcon.vue        |  44 ++++
 src/shared/utils/menuItems.js                 |  26 ++
 8 files changed, 573 insertions(+), 30 deletions(-)
 create mode 100644 playwright/e2e/application.spec.ts
 create mode 100644 src/modules/navigation/sections/ApplicationNavigation.vue
 create mode 100644 src/shared/components/MenuItemIcon.vue

diff --git a/cypress/component/menuItems.cy.js b/cypress/component/menuItems.cy.js
index ad68aa1952..7c3ba5f8b7 100644
--- a/cypress/component/menuItems.cy.js
+++ b/cypress/component/menuItems.cy.js
@@ -10,6 +10,8 @@ import {
 	indentItem,
 	isValidMenuLink,
 	menuItemErrors,
+	menuItemRoute,
+	menuTree,
 	moveItem,
 	outdentItem,
 	parentOfPosition,
@@ -115,4 +117,25 @@ describe('menu items', () => {
 		expect(dragItemOver(items, 0, 1)).to.equal(null, 'a block cannot be dropped on its own child')
 		expect(dragItemOver(items, 2, 2)).to.equal(null)
 	})
+
+	it('routes a view or table entry inside the app and leaves a link outside it', () => {
+		expect(menuItemRoute({ targetType: 'view', technicalName: 'home' }, 7)).to.equal('/application/7/menu/home')
+		expect(menuItemRoute({ targetType: 'table', technicalName: 'cases' }, 7)).to.equal('/application/7/menu/cases')
+		expect(menuItemRoute({ targetType: 'url', technicalName: 'docs' }, 7)).to.equal(null)
+	})
+
+	it('builds the stored menu into a tree in menu order', () => {
+		const stored = [
+			{ id: 3, order: 30, parentId: null, label: 'Docs' },
+			{ id: 2, order: 20, parentId: 1, label: 'Open cases' },
+			{ id: 1, order: 10, parentId: null, label: 'Cases' },
+		]
+
+		const tree = menuTree(stored)
+
+		expect(tree.map(branch => branch.item.label)).to.deep.equal(['Cases', 'Docs'])
+		expect(tree[0].children.map(child => child.label)).to.deep.equal(['Open cases'])
+		expect(tree[1].children).to.deep.equal([])
+		expect(menuTree(undefined)).to.deep.equal([])
+	})
 })
diff --git a/playwright/e2e/application.spec.ts b/playwright/e2e/application.spec.ts
new file mode 100644
index 0000000000..61e565ff88
--- /dev/null
+++ b/playwright/e2e/application.spec.ts
@@ -0,0 +1,51 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { Page } from '@playwright/test'
+import { test, expect } from '../support/fixtures'
+import { ocsRequest, type TestUser } from '../support/api'
+
+/**
+ * Creates a grid view and an application whose menu opens it, through the API.
+ *
+ * @param page the page of the test user
+ * @param user the test user
+ * @param name name of the application
+ * @param pageTitle title of the grid view, and label of its menu item
+ */
+async function createApplicationWithGridPage(page: Page, user: TestUser, name: string, pageTitle: string) {
+	const viewResponse = await ocsRequest(page.request, user, {
+		method: 'POST',
+		url: '/ocs/v2.php/apps/tables/api/2/views?format=json',
+		data: { title: pageTitle },
+	})
+	const view = (await viewResponse.json()).ocs.data
+	const contextResponse = await ocsRequest(page.request, user, {
+		method: 'POST',
+		url: '/ocs/v2.php/apps/tables/api/2/contexts?format=json',
+		data: {
+			name,
+			iconName: 'star',
+			menuItems: [{ label: pageTitle, targetType: 'view', targetId: view.id }],
+		},
+	})
+	return (await contextResponse.json()).ocs.data
+}
+
+test.describe('Applications', () => {
+	test('An application opened on its own shows its menu and its first page', async ({ userPage: { page, user } }) => {
+		const context = await createApplicationWithGridPage(page, user, 'standalone application', 'Front page')
+
+		await page.goto(`/index.php/apps/tables/app/${context.id}`)
+
+		await expect(page.locator('[data-cy="application-nav-header"]')).toContainText('standalone application')
+		await expect(page.locator('[data-cy="application-nav-item"]').filter({ hasText: 'Front page' })).toBeVisible()
+		await expect(page).toHaveURL(/\/menu\/front_page$/)
+		await expect(page.locator('[data-cy="gridViewHeading"]')).toContainText('Front page')
+		await expect(page.locator('[data-cy="navigationCreateTableIcon"]')).toHaveCount(0)
+		// Nothing focused the content area before the person touched the page, so no focus ring is drawn around it
+		expect(await page.evaluate(() => document.activeElement?.id ?? '')).not.toBe('app-content-vue')
+	})
+})
diff --git a/src/App.vue b/src/App.vue
index d294ae6c2c..39c01dd331 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,8 @@
 -->
 <template>
 	<NcContent app-name="tables">
-		<Navigation v-if="!isPublicShare" />
+		<ApplicationNavigation v-if="!isPublicShare && isStandaloneApplication" />
+		<Navigation v-else-if="!isPublicShare" />
 		<NcAppContent>
 			<div v-if="isLoadingSomething" class="icon-loading" />
 
@@ -18,6 +19,7 @@
 <script>
 import { NcContent, NcAppContent } from '@nextcloud/vue'
 import Navigation from './modules/navigation/sections/Navigation.vue'
+import ApplicationNavigation from './modules/navigation/sections/ApplicationNavigation.vue'
 import PublicTableView from './pages/PublicTableView.vue'
 import { mapState, mapActions } from 'pinia'
 import Sidebar from './modules/sidebar/sections/Sidebar.vue'
@@ -26,6 +28,10 @@ import { loadState } from '@nextcloud/initial-state'
 import { useTablesStore } from './store/store.js'
 import { generateUrl } from '@nextcloud/router'
 
+// A page that focuses its content before the person has touched it shows the browser's focus
+// ring around the whole content area. Focus moves only after a first pointer or keyboard event.
+const FIRST_INTERACTION_EVENTS = ['pointerdown', 'keydown']
+
 export default {
 	name: 'App',
 	components: {
@@ -34,6 +40,7 @@ export default {
 		NcContent,
 		NcAppContent,
 		Navigation,
+		ApplicationNavigation,
 	},
 	props: {
 		tableId: {
@@ -46,6 +53,8 @@ export default {
 			loading: false,
 			defaultPageTitle: false,
 			shareToken: loadState('tables', 'shareToken', false),
+			standaloneContextId: loadState('tables', 'contextId', null),
+			userHasInteracted: false,
 		}
 	},
 	computed: {
@@ -53,6 +62,9 @@ export default {
 		isPublicShare() {
 			return !!this.shareToken
 		},
+		isStandaloneApplication() {
+			return this.standaloneContextId !== null
+		},
 	},
 	watch: {
 		'$route'(to) {
@@ -60,6 +72,9 @@ export default {
 		},
 	},
 	async created() {
+		for (const type of FIRST_INTERACTION_EVENTS) {
+			document.addEventListener(type, this.onFirstInteraction, { capture: true })
+		}
 		const store = useTablesStore()
 		if (!this.isPublicShare) {
 			await Promise.all([
@@ -73,27 +88,40 @@ export default {
 			store.setLoading({ key: 'viewsShared', value: false })
 			store.setLoading({ key: 'contexts', value: false })
 		}
-		this.routing(this.$route)
+		this.routing(this.$route, true)
 	},
 	mounted() {
 		this.$nextTick(() => this.observeAppContent())
 	},
+	beforeUnmount() {
+		this.removeFirstInteractionListeners()
+	},
 	methods: {
+		onFirstInteraction() {
+			this.userHasInteracted = true
+			this.removeFirstInteractionListeners()
+		},
+		removeFirstInteractionListeners() {
+			for (const type of FIRST_INTERACTION_EVENTS) {
+				document.removeEventListener(type, this.onFirstInteraction, { capture: true })
+			}
+		},
 		...mapActions(useTablesStore, ['loadTablesFromBE', 'getAllContexts', 'loadViewsSharedWithMeFromBE', 'loadTemplatesFromBE', 'setActiveRowId', 'setActiveTableId', 'setActiveViewId', 'setActiveContextId']),
-		routing(currentRoute) {
+		/**
+		 * @param {object} currentRoute the route to apply
+		 * @param {boolean} initial true for the first route on page load. Routes that follow without the
+		 *   user having touched the page (the redirects of the standalone shell) do not take focus either:
+		 *   a programmatic focus before any interaction draws the focus ring around the content area
+		 */
+		routing(currentRoute, initial = false) {
 			const url = generateUrl('/apps/tables/')
 
-			try {
-				if (loadState('tables', 'contextId', undefined)) {
-					// prepare route, when Context is opened from navigation bar
-					const contextId = loadState('tables', 'contextId', undefined)
-					const originalUrl = window.location.href
-					this.$router.replace('/application/' + contextId).catch(() => { })
-					// reverts turning /apps/tables/app/28 into /apps/tables/app/28#/application/28
-					history.replaceState({}, undefined, originalUrl)
-				}
-			} catch (e) {
-				// contextId is not always set, it is fine.
+			// An application opened on its own starts at its root; later route changes inside it must stay
+			if (this.standaloneContextId !== null && currentRoute.path === '/') {
+				const originalUrl = window.location.href
+				this.$router.replace('/application/' + this.standaloneContextId).catch(() => { })
+				// Reverts turning /apps/tables/app/28 into /apps/tables/app/28#/application/28
+				history.replaceState({}, undefined, originalUrl)
 			}
 
 			if (currentRoute.name === 'tableRow' || currentRoute.name === 'viewRow') {
@@ -133,13 +161,15 @@ export default {
 				}
 
 				// move the focus away from nav bar (import for app-internal switch)
-				const appContent = document.getElementById('app-content-vue')
-				const oldTabIndex = appContent.tabIndex
-				if (oldTabIndex === -1) {
-					appContent.tabIndex = 0
+				if (!initial && this.userHasInteracted) {
+					const appContent = document.getElementById('app-content-vue')
+					const oldTabIndex = appContent.tabIndex
+					if (oldTabIndex === -1) {
+						appContent.tabIndex = 0
+					}
+					appContent.focus()
+					appContent.tabIndex = oldTabIndex
 				}
-				appContent.focus()
-				appContent.tabIndex = oldTabIndex
 			}
 		},
 		switchActiveMenuEntry(targetElement) {
diff --git a/src/modules/navigation/sections/ApplicationNavigation.vue b/src/modules/navigation/sections/ApplicationNavigation.vue
new file mode 100644
index 0000000000..d683cec2fa
--- /dev/null
+++ b/src/modules/navigation/sections/ApplicationNavigation.vue
@@ -0,0 +1,151 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<NcAppNavigation :aria-label="context ? context.name : t('tables', 'Application')">
+		<template #list>
+			<NcLoadingIcon v-if="!context" :size="32" />
+			<template v-else>
+				<div class="application-navigation__header" data-cy="application-nav-header">
+					<ApplicationIcon :icon-name="context.iconName" :size="32" />
+					<div class="application-navigation__title">
+						<strong>{{ context.name }}</strong>
+						<span v-if="context.description" class="application-navigation__description">{{ context.description }}</span>
+					</div>
+				</div>
+				<NcAppNavigationItem v-for="branch in menuTree"
+					:key="branch.item.id"
+					:name="branch.item.label"
+					:to="branch.item.targetType === 'url' ? undefined : menuItemRoute(branch.item, context.id)"
+					:href="branch.item.targetType === 'url' ? branch.item.url : undefined"
+					:target="branch.item.targetType === 'url' ? '_blank' : undefined"
+					:class="{ active: isActive(branch.item) }"
+					:allow-collapse="branch.children.length > 0"
+					:open="branch.children.some(child => isActive(child))"
+					data-cy="application-nav-item">
+					<template #icon>
+						<MenuItemIcon :item="branch.item" />
+					</template>
+					<template v-if="branch.children.length > 0">
+						<NcAppNavigationItem v-for="child in branch.children"
+							:key="child.id"
+							:name="child.label"
+							:to="child.targetType === 'url' ? undefined : menuItemRoute(child, context.id)"
+							:href="child.targetType === 'url' ? child.url : undefined"
+							:target="child.targetType === 'url' ? '_blank' : undefined"
+							:class="{ active: isActive(child) }"
+							data-cy="application-nav-item">
+							<template #icon>
+								<MenuItemIcon :item="child" />
+							</template>
+						</NcAppNavigationItem>
+					</template>
+				</NcAppNavigationItem>
+				<NcAppNavigationItem v-if="hasResources"
+					:name="t('tables', 'Overview')"
+					:to="'/application/' + context.id"
+					:class="{ active: !$route.params.itemName }"
+					data-cy="application-nav-overview">
+					<template #icon>
+						<ViewGridOutline :size="20" />
+					</template>
+				</NcAppNavigationItem>
+			</template>
+		</template>
+		<template #footer>
+			<div v-if="context && ownsContext(context)" class="application-navigation__footer">
+				<NcButton variant="tertiary" :href="configurationUrl" data-cy="application-nav-configure">
+					<template #icon>
+						<CogOutline :size="20" />
+					</template>
+					{{ t('tables', 'Configure in Tables') }}
+				</NcButton>
+			</div>
+		</template>
+	</NcAppNavigation>
+</template>
+
+<script>
+import { NcAppNavigation, NcAppNavigationItem, NcButton, NcLoadingIcon } from '@nextcloud/vue'
+import CogOutline from 'vue-material-design-icons/CogOutline.vue'
+import ViewGridOutline from 'vue-material-design-icons/ViewGridOutline.vue'
+import { generateUrl } from '@nextcloud/router'
+import { mapState } from 'pinia'
+import ApplicationIcon from '../../../shared/components/ApplicationIcon.vue'
+import MenuItemIcon from '../../../shared/components/MenuItemIcon.vue'
+import permissionsMixin from '../../../shared/components/ncTable/mixins/permissionsMixin.js'
+import { menuItemRoute, menuTree } from '../../../shared/utils/menuItems.js'
+import { useTablesStore } from '../../../store/store.js'
+
+/**
+ * The navigation of an application opened on its own: its menu items are the entries.
+ */
+export default {
+	name: 'ApplicationNavigation',
+	components: {
+		NcAppNavigation,
+		NcAppNavigationItem,
+		NcButton,
+		NcLoadingIcon,
+		CogOutline,
+		ViewGridOutline,
+		ApplicationIcon,
+		MenuItemIcon,
+	},
+	mixins: [permissionsMixin],
+	computed: {
+		...mapState(useTablesStore, ['activeContext']),
+		context() {
+			return this.activeContext
+		},
+		menuItems() {
+			return [...(this.context?.menuItems ?? [])].sort((a, b) => a.order - b.order)
+		},
+		menuTree() {
+			return menuTree(this.menuItems)
+		},
+		hasResources() {
+			return Object.keys(this.context?.nodes ?? {}).length > 0
+		},
+		configurationUrl() {
+			return generateUrl('/apps/tables/') + '#/application/' + this.context.id
+		},
+	},
+	methods: {
+		menuItemRoute,
+		isActive(item) {
+			return item.targetType !== 'url' && this.$route.params.itemName === item.technicalName
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.application-navigation {
+	&__header {
+		display: flex;
+		align-items: center;
+		gap: calc(3 * var(--default-grid-baseline));
+		padding: calc(3 * var(--default-grid-baseline)) calc(4 * var(--default-grid-baseline));
+	}
+
+	&__title {
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+	}
+
+	&__description {
+		color: var(--color-text-maxcontrast);
+		font-size: 0.9em;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	&__footer {
+		padding: calc(2 * var(--default-grid-baseline));
+	}
+}
+</style>
diff --git a/src/pages/Context.vue b/src/pages/Context.vue
index 420961d6e7..34c615c0d9 100644
--- a/src/pages/Context.vue
+++ b/src/pages/Context.vue
@@ -6,8 +6,53 @@
 	<div class="row main-context-view">
 		<div v-if="loading" class="icon-loading" />
 
-		<div v-else-if="activeContext">
-			<div class="content context">
+		<div v-else-if="activeContext" :class="{ 'context--standalone': isStandalone }">
+			<div v-if="selectedMenuItem && !isStandalone" class="context__breadcrumb" data-cy="context-breadcrumb">
+				<NcButton variant="tertiary" :to="'/application/' + activeContext.id" data-cy="context-menu-overview">
+					<template #icon>
+						<ChevronLeft :size="20" />
+					</template>
+					{{ activeContext.name }}
+				</NcButton>
+				<span class="context__breadcrumb-separator" aria-hidden="true">/</span>
+				<span class="context__breadcrumb-current">{{ selectedMenuItem.label }}</span>
+				<NcButton variant="secondary"
+					:href="applicationUrl"
+					target="_blank"
+					rel="noopener"
+					class="context__breadcrumb-open"
+					data-cy="context-open-application">
+					<template #icon>
+						<OpenInNew :size="20" />
+					</template>
+					{{ t('tables', 'Open application') }}
+				</NcButton>
+			</div>
+
+			<div v-if="selectedMenuItem" class="context__menu-target" data-cy="context-menu-target">
+				<NcLoadingIcon v-if="menuTargetLoading" :size="32" class="context__loading" />
+				<NcEmptyContent v-else-if="!menuResource"
+					:name="t('tables', 'This menu item points at nothing')"
+					:description="t('tables', 'The view or table it opened no longer exists, or you have no access to it.')" />
+				<GridView v-else-if="menuResource.isView && menuResource.type === 'grid'"
+					:view="currentMenuView"
+					:can-edit="canManageElement(menuResource)" />
+				<div v-else-if="menuResource.isView" class="resource">
+					<CustomView v-model:view-setting="menuViewSetting" :view="menuResource" :columns="getColumns(true, menuResource.id)"
+						:rows="getRows(true, menuResource.id)" @create-column="createColumn(true, menuResource)"
+						@import="openImportModal(menuResource, true)" @download-csv="downloadCSV(menuResource, true)"
+						@download-filtered-csv="rows => downloadFilteredCSV(rows, menuResource, true)" />
+				</div>
+				<div v-else class="resource">
+					<TableWrapper v-model:view-setting="menuViewSetting" :table="menuResource" :columns="getColumns(false, menuResource.id)"
+						:rows="getRows(false, menuResource.id)" @create-column="createColumn(false, menuResource)"
+						@import-scheme="openImportSchemeModal(menuResource)"
+						@import="openImportModal(menuResource, false)" @download-csv="downloadCSV(menuResource, false)"
+						@download-filtered-csv="rows => downloadFilteredCSV(rows, menuResource, false)" />
+				</div>
+			</div>
+
+			<div v-if="!selectedMenuItem && !isStandalone" class="content context">
 				<div class="row first-row">
 					<h1 class="context__title" data-cy="context-title">
 						<NcIconSvgWrapper :svg="icon" :size="32" style="display: inline-block;" />&nbsp; {{
@@ -19,7 +64,7 @@
 				</div>
 			</div>
 
-			<div class="resources">
+			<div v-if="!selectedMenuItem" class="resources">
 				<div v-for="resource in contextResources" :key="resource.key">
 					<div v-if="!resource.isView" class="resource">
 						<TableWrapper v-model:view-setting="resourceViewSettings[resource.key]" :table="resource" :columns="columns[resource.key]"
@@ -47,7 +92,14 @@
 <script>
 import MainModals from '../modules/modals/Modals.vue'
 import { mapState, mapActions, storeToRefs } from 'pinia'
-import { NcIconSvgWrapper } from '@nextcloud/vue'
+import { NcButton, NcEmptyContent, NcIconSvgWrapper, NcLoadingIcon } from '@nextcloud/vue'
+import { loadState } from '@nextcloud/initial-state'
+import { generateUrl } from '@nextcloud/router'
+import ChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
+import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
+import GridView from '../modules/grid/GridView.vue'
+import permissionsMixin from '../shared/components/ncTable/mixins/permissionsMixin.js'
+import { menuItemRoute } from '../shared/utils/menuItems.js'
 import TableWrapper from '../modules/main/sections/TableWrapper.vue'
 import CustomView from '../modules/main/sections/View.vue'
 import { emit } from '@nextcloud/event-bus'
@@ -63,13 +115,19 @@ import { showError } from '@nextcloud/dialogs'
 export default {
 	components: {
 		MainModals,
+		NcButton,
+		NcEmptyContent,
 		NcIconSvgWrapper,
+		NcLoadingIcon,
+		ChevronLeft,
+		OpenInNew,
+		GridView,
 		ErrorMessage,
 		TableWrapper,
 		CustomView,
 	},
 
-	mixins: [exportTableMixin, svgHelper],
+	mixins: [exportTableMixin, svgHelper, permissionsMixin],
 	setup() {
 		const store = useDataStore()
 		const { getColumns, getRows } = storeToRefs(store)
@@ -86,11 +144,50 @@ export default {
 			errorMessage: null,
 			loadedSignature: null,
 			isReloading: false,
+			menuResource: null,
+			menuViewSetting: {},
+			menuTargetLoading: false,
+			standaloneContextId: loadState('tables', 'contextId', null),
+			openedFirstPage: false,
 		}
 	},
 
 	computed: {
 		...mapState(useTablesStore, ['tables', 'contexts', 'activeContextId', 'views', 'activeContext']),
+		menuItems() {
+			return [...(this.activeContext?.menuItems ?? [])].sort((a, b) => a.order - b.order)
+		},
+		/**
+		 * Whether the application was opened on its own, at /apps/tables/app/{id}, with its own menu.
+		 *
+		 * @return {boolean}
+		 */
+		isStandalone() {
+			return this.standaloneContextId !== null
+		},
+		applicationUrl() {
+			return window.location.origin + generateUrl('/apps/tables/app/' + this.activeContext?.id)
+		},
+		selectedMenuItem() {
+			const technicalName = this.$route.params.itemName
+			if (!technicalName) {
+				return null
+			}
+			return this.menuItems.find(item => item.technicalName === technicalName) ?? null
+		},
+		/**
+		 * The menu target is loaded once; a view the store has since updated, after a save of its
+		 * grid for instance, must show its current state without a reload.
+		 *
+		 * @return {object|null}
+		 */
+		currentMenuView() {
+			if (!this.menuResource?.isView) {
+				return this.menuResource
+			}
+			const stored = this.views.find(view => view.id === this.menuResource.id)
+			return stored ? { ...this.menuResource, ...stored, isView: true } : this.menuResource
+		},
 		rows() {
 			const rows = {}
 			if (this.context && this.context.nodes) {
@@ -127,7 +224,16 @@ export default {
 	},
 
 	watch: {
-
+		selectedMenuItem: {
+			immediate: true,
+			handler() {
+				this.loadMenuTarget()
+				this.openFirstPageWhenStandalone()
+			},
+		},
+		menuItems() {
+			this.openFirstPageWhenStandalone()
+		},
 		activeContext: {
 			handler() {
 				if (this.errorMessage) {
@@ -151,15 +257,73 @@ export default {
 	},
 
 	async mounted() {
-		emit('toggle-navigation', {
-			open: false,
-		})
+		// An application opened on its own shows its menu in the navigation, which must stay open
+		if (!this.isStandalone) {
+			emit('toggle-navigation', {
+				open: false,
+			})
+		}
 		await this.reload()
 	},
 
 	methods: {
 		...mapActions(useTablesStore, ['loadContext', 'validateExportAccess', 'loadContextTable', 'loadContextView']),
 		...mapActions(useDataStore, ['loadColumnsFromBE', 'loadRowsFromBE', 'loadRelationsFromBE']),
+		/**
+		 * An application opened on its own starts on its first page, not on the resource overview.
+		 * Only once: the overview stays reachable from the menu afterwards.
+		 */
+		openFirstPageWhenStandalone() {
+			if (!this.isStandalone || this.openedFirstPage || this.$route.params.itemName || this.menuItems.length === 0) {
+				return
+			}
+			const first = this.menuItems.find(item => item.targetType !== 'url')
+			if (first) {
+				this.openedFirstPage = true
+				this.$router.replace(menuItemRoute(first, this.activeContext.id)).catch(err => err)
+			}
+		},
+		/**
+		 * Loads the view or table the selected menu item opens.
+		 */
+		async loadMenuTarget() {
+			const item = this.selectedMenuItem
+			this.menuResource = null
+			if (!item || item.targetType === 'url') {
+				return
+			}
+			this.menuTargetLoading = true
+			try {
+				if (item.targetType === 'view') {
+					await this.loadContextView({ id: item.targetId })
+					const view = this.views.find(view => view.id === item.targetId)
+					if (view) {
+						if (view.type !== 'grid') {
+							await this.loadColumnsFromBE({ view })
+							await this.loadRowsFromBE({ viewId: view.id, tableId: view.tableId })
+							await this.loadRelationsFromBE({ viewId: view.id })
+						}
+						this.menuViewSetting = this.createViewSetting(view)
+						this.menuResource = { ...view, isView: true, key: 'view-' + view.id }
+					}
+				} else {
+					await this.loadContextTable({ id: item.targetId })
+					const table = this.tables.find(table => table.id === item.targetId)
+					if (table) {
+						await this.loadColumnsFromBE({ view: null, tableId: table.id })
+						await this.loadRowsFromBE({ viewId: null, tableId: table.id })
+						await this.loadRelationsFromBE({ tableId: table.id })
+						this.menuViewSetting = this.createViewSetting(table)
+						this.menuResource = { ...table, isView: false, key: String(table.id) }
+					}
+				}
+			} catch (error) {
+				console.error('The menu target could not be loaded', error)
+				this.menuResource = null
+			} finally {
+				this.menuTargetLoading = false
+			}
+		},
 		contextSignature() {
 			const ctx = this.activeContext
 			return ctx ? `${ctx.id}:${Object.keys(ctx.nodes || {}).sort().join(',')}` : null
@@ -229,7 +393,8 @@ export default {
 								} else if (nodeType === NODE_TYPE_VIEW) {
 									await this.loadContextView({ id: node.node_id })
 									const view = this.views.find(view => view.id === node.node_id)
-									if (view) {
+									// A grid view has no rows; it is a page, reached through the menu
+									if (view && view.type !== 'grid') {
 										await this.loadColumnsFromBE({
 											view,
 										})
@@ -343,6 +508,45 @@ export default {
 		display: inline-flex;
 	}
 
+	&__breadcrumb {
+		position: sticky;
+		top: 0;
+		z-index: 15;
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: calc(2 * var(--default-grid-baseline));
+		padding-block: calc(2 * var(--default-grid-baseline));
+		padding-inline: calc(var(--default-clickable-area) + 4 * var(--default-grid-baseline)) calc(4 * var(--default-grid-baseline));
+		border-bottom: 1px solid var(--color-border);
+		background-color: var(--color-main-background);
+	}
+
+	&__breadcrumb-separator {
+		color: var(--color-text-maxcontrast);
+	}
+
+	&__breadcrumb-current {
+		font-weight: bold;
+	}
+
+	&__breadcrumb-open {
+		margin-inline-start: auto;
+	}
+
+	&__loading {
+		margin: calc(4 * var(--default-grid-baseline)) auto;
+	}
+
+	&__menu-target {
+		width: 100%;
+		padding-block: calc(2 * var(--default-grid-baseline));
+
+		.resource {
+			overflow-x: auto;
+		}
+	}
+
 	&__description {
 		margin: calc(3 * var(--default-grid-baseline, 4px));
 		max-width: 790px;
@@ -371,6 +575,15 @@ export default {
 	}
 }
 
+.context--standalone {
+	width: 100%;
+
+	// Leave room for the navigation toggle that floats over the top left corner of the content
+	.context__menu-target {
+		padding-inline-start: var(--default-clickable-area);
+	}
+}
+
 :deep(h1) {
 	font-size: unset;
 	font-size: revert;
diff --git a/src/router.js b/src/router.js
index 9138e4d903..9989a7b006 100644
--- a/src/router.js
+++ b/src/router.js
@@ -23,6 +23,11 @@ export default createRouter({
 			component: Context,
 			name: 'context',
 		},
+		{
+			path: '/application/:contextId/menu/:itemName',
+			component: Context,
+			name: 'contextMenuItem',
+		},
 		{
 			path: '/application/:contextId/row/:rowId',
 			component: Context,
diff --git a/src/shared/components/MenuItemIcon.vue b/src/shared/components/MenuItemIcon.vue
new file mode 100644
index 0000000000..11252ce2da
--- /dev/null
+++ b/src/shared/components/MenuItemIcon.vue
@@ -0,0 +1,44 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<AlertCircleOutline v-if="item.broken" :size="size" :title="t('tables', 'The view or table this entry opened no longer exists')" />
+	<ApplicationIcon v-else-if="item.icon" :icon-name="item.icon" :size="size" />
+	<OpenInNew v-else-if="item.targetType === 'url'" :size="size" />
+	<TableIcon v-else-if="item.targetType === 'table'" :size="size" />
+	<ViewDashboardOutline v-else :size="size" />
+</template>
+
+<script>
+import AlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
+import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
+import TableIcon from 'vue-material-design-icons/Table.vue'
+import ViewDashboardOutline from 'vue-material-design-icons/ViewDashboardOutline.vue'
+import ApplicationIcon from './ApplicationIcon.vue'
+
+/**
+ * The icon of a menu entry: a warning when its target is gone, else the icon chosen for it,
+ * else one for what it opens.
+ */
+export default {
+	name: 'MenuItemIcon',
+	components: {
+		AlertCircleOutline,
+		ApplicationIcon,
+		OpenInNew,
+		TableIcon,
+		ViewDashboardOutline,
+	},
+	props: {
+		item: {
+			type: Object,
+			required: true,
+		},
+		size: {
+			type: Number,
+			default: 20,
+		},
+	},
+}
+</script>
diff --git a/src/shared/utils/menuItems.js b/src/shared/utils/menuItems.js
index 58d0b88dae..2817542ac4 100644
--- a/src/shared/utils/menuItems.js
+++ b/src/shared/utils/menuItems.js
@@ -298,3 +298,29 @@ export function dragItemOver(items, draggedIndex, overIndex) {
 	rest.splice(insertAt, 0, ...placed)
 	return { items: rest, draggedIndex: rest.indexOf(placed[0]) }
 }
+
+/**
+ * Where a menu item leads inside the app, or null for an external link.
+ *
+ * @param {object} item a menu item
+ * @param {number|string} contextId the application the item belongs to
+ * @return {string|null}
+ */
+export function menuItemRoute(item, contextId) {
+	if (item.targetType === 'url') {
+		return null
+	}
+	return '/application/' + contextId + '/menu/' + item.technicalName
+}
+
+/**
+ * The menu as a tree: top-level items with their children, in menu order.
+ *
+ * @param {Array} menuItems stored items with id, order and parentId
+ * @return {Array<{item: object, children: Array<object>}>}
+ */
+export function menuTree(menuItems) {
+	const sorted = [...(menuItems ?? [])].sort((a, b) => a.order - b.order)
+	const roots = sorted.filter(item => item.parentId == null)
+	return roots.map(item => ({ item, children: sorted.filter(child => child.parentId === item.id) }))
+}

From e6102635f6137f12a42d1992e65ab71584a8a36c Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Wed, 14 Oct 2026 13:43:45 +0200
Subject: [PATCH 2/3] fix(applications): go back to the overview from the
 breadcrumb

NcButton only renders a link for 'to' when it finds the router through its own copy of vue-router (5.x), which the app (4.x) does not provide, so the button did nothing. It navigates through the app's router instead.

Signed-off-by: Remko <remko@conduction.nl>
Assisted-by: ClaudeCode:claude-opus-5-5
---
 src/pages/Context.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/pages/Context.vue b/src/pages/Context.vue
index 34c615c0d9..a92d01b812 100644
--- a/src/pages/Context.vue
+++ b/src/pages/Context.vue
@@ -8,7 +8,7 @@
 
 		<div v-else-if="activeContext" :class="{ 'context--standalone': isStandalone }">
 			<div v-if="selectedMenuItem && !isStandalone" class="context__breadcrumb" data-cy="context-breadcrumb">
-				<NcButton variant="tertiary" :to="'/application/' + activeContext.id" data-cy="context-menu-overview">
+				<NcButton variant="tertiary" data-cy="context-menu-overview" @click="openRoute('/application/' + activeContext.id)">
 					<template #icon>
 						<ChevronLeft :size="20" />
 					</template>
@@ -269,6 +269,15 @@ export default {
 	methods: {
 		...mapActions(useTablesStore, ['loadContext', 'validateExportAccess', 'loadContextTable', 'loadContextView']),
 		...mapActions(useDataStore, ['loadColumnsFromBE', 'loadRowsFromBE', 'loadRelationsFromBE']),
+		/**
+		 * Navigates inside the app. NcButton cannot take a route itself: @nextcloud/vue brings its own
+		 * vue-router, whose router key the app's router does not provide, so its "to" renders a plain button.
+		 *
+		 * @param {string} route the route to open
+		 */
+		openRoute(route) {
+			this.$router.push(route).catch(err => err)
+		},
 		/**
 		 * An application opened on its own starts on its first page, not on the resource overview.
 		 * Only once: the overview stays reachable from the menu afterwards.

From 74adf247caca556be2473e24a1f81149f708b40f Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Wed, 14 Oct 2026 15:29:53 +0200
Subject: [PATCH 3/3] fix(applications): load only what the shown page needs

A menu page ignores a load that a newer menu choice overtook, and the tables and views of the overview only load when the overview is shown, so an application opened on its own no longer loads every resource before jumping to its first page. Grid views no longer make the Overview entry appear, an overview without tables or views says so, and the dead target bindings on the navigation entries are gone.

Signed-off-by: Remko <remko@conduction.nl>
Assisted-by: ClaudeCode:claude-opus-5-5
---
 .../sections/ApplicationNavigation.vue        |  14 +-
 src/pages/Context.vue                         | 214 ++++++++++++------
 2 files changed, 150 insertions(+), 78 deletions(-)

diff --git a/src/modules/navigation/sections/ApplicationNavigation.vue b/src/modules/navigation/sections/ApplicationNavigation.vue
index d683cec2fa..bd7a75c5f4 100644
--- a/src/modules/navigation/sections/ApplicationNavigation.vue
+++ b/src/modules/navigation/sections/ApplicationNavigation.vue
@@ -19,7 +19,6 @@
 					:name="branch.item.label"
 					:to="branch.item.targetType === 'url' ? undefined : menuItemRoute(branch.item, context.id)"
 					:href="branch.item.targetType === 'url' ? branch.item.url : undefined"
-					:target="branch.item.targetType === 'url' ? '_blank' : undefined"
 					:class="{ active: isActive(branch.item) }"
 					:allow-collapse="branch.children.length > 0"
 					:open="branch.children.some(child => isActive(child))"
@@ -33,7 +32,6 @@
 							:name="child.label"
 							:to="child.targetType === 'url' ? undefined : menuItemRoute(child, context.id)"
 							:href="child.targetType === 'url' ? child.url : undefined"
-							:target="child.targetType === 'url' ? '_blank' : undefined"
 							:class="{ active: isActive(child) }"
 							data-cy="application-nav-item">
 							<template #icon>
@@ -76,6 +74,7 @@ import ApplicationIcon from '../../../shared/components/ApplicationIcon.vue'
 import MenuItemIcon from '../../../shared/components/MenuItemIcon.vue'
 import permissionsMixin from '../../../shared/components/ncTable/mixins/permissionsMixin.js'
 import { menuItemRoute, menuTree } from '../../../shared/utils/menuItems.js'
+import { NODE_TYPE_TABLE } from '../../../shared/constants.ts'
 import { useTablesStore } from '../../../store/store.js'
 
 /**
@@ -95,7 +94,7 @@ export default {
 	},
 	mixins: [permissionsMixin],
 	computed: {
-		...mapState(useTablesStore, ['activeContext']),
+		...mapState(useTablesStore, ['activeContext', 'views']),
 		context() {
 			return this.activeContext
 		},
@@ -105,8 +104,15 @@ export default {
 		menuTree() {
 			return menuTree(this.menuItems)
 		},
+		/**
+		 * Whether the overview has a table or view to show. A grid view is a page of its own, reached
+		 * through the menu, so it does not count.
+		 *
+		 * @return {boolean}
+		 */
 		hasResources() {
-			return Object.keys(this.context?.nodes ?? {}).length > 0
+			return Object.values(this.context?.nodes ?? {}).some(node => parseInt(node.node_type) === NODE_TYPE_TABLE
+				|| this.views.find(view => view.id === node.node_id)?.type !== 'grid')
 		},
 		configurationUrl() {
 			return generateUrl('/apps/tables/') + '#/application/' + this.context.id
diff --git a/src/pages/Context.vue b/src/pages/Context.vue
index a92d01b812..d35b62599a 100644
--- a/src/pages/Context.vue
+++ b/src/pages/Context.vue
@@ -64,6 +64,10 @@
 				</div>
 			</div>
 
+			<NcEmptyContent v-if="!selectedMenuItem && isStandalone && resourcesLoaded && contextResources.length === 0"
+				:name="t('tables', 'No tables or views')"
+				:description="t('tables', 'This application shows no tables or views here. Its pages are in the menu.')"
+				data-cy="context-no-resources" />
 			<div v-if="!selectedMenuItem" class="resources">
 				<div v-for="resource in contextResources" :key="resource.key">
 					<div v-if="!resource.isView" class="resource">
@@ -149,6 +153,8 @@ export default {
 			menuTargetLoading: false,
 			standaloneContextId: loadState('tables', 'contextId', null),
 			openedFirstPage: false,
+			// Whether the tables and views of the overview are loaded; a menu page does not need them
+			resourcesLoaded: false,
 		}
 	},
 
@@ -168,6 +174,25 @@ export default {
 		applicationUrl() {
 			return window.location.origin + generateUrl('/apps/tables/app/' + this.activeContext?.id)
 		},
+		/**
+		 * The page an application opened on its own is about to open: its first entry that is not a link.
+		 *
+		 * @return {object|null}
+		 */
+		firstStandalonePage() {
+			if (!this.isStandalone || this.openedFirstPage) {
+				return null
+			}
+			return this.menuItems.find(item => item.targetType !== 'url') ?? null
+		},
+		/**
+		 * Whether the overview with the tables and views is shown, rather than a menu page.
+		 *
+		 * @return {boolean}
+		 */
+		showsOverview() {
+			return !this.$route.params.itemName && this.firstStandalonePage === null
+		},
 		selectedMenuItem() {
 			const technicalName = this.$route.params.itemName
 			if (!technicalName) {
@@ -229,6 +254,7 @@ export default {
 			handler() {
 				this.loadMenuTarget()
 				this.openFirstPageWhenStandalone()
+				this.loadResourcesWhenShown()
 			},
 		},
 		menuItems() {
@@ -283,10 +309,10 @@ export default {
 		 * Only once: the overview stays reachable from the menu afterwards.
 		 */
 		openFirstPageWhenStandalone() {
-			if (!this.isStandalone || this.openedFirstPage || this.$route.params.itemName || this.menuItems.length === 0) {
+			if (this.$route.params.itemName) {
 				return
 			}
-			const first = this.menuItems.find(item => item.targetType !== 'url')
+			const first = this.firstStandalonePage
 			if (first) {
 				this.openedFirstPage = true
 				this.$router.replace(menuItemRoute(first, this.activeContext.id)).catch(err => err)
@@ -296,9 +322,14 @@ export default {
 		 * Loads the view or table the selected menu item opens.
 		 */
 		async loadMenuTarget() {
+			// Counts the loads, so a load that a newer menu choice overtook leaves the page alone. Not
+			// reactive, as nothing renders it; the immediate watcher calls this before created()
+			this.menuTargetRequest = (this.menuTargetRequest ?? 0) + 1
+			const request = this.menuTargetRequest
 			const item = this.selectedMenuItem
 			this.menuResource = null
 			if (!item || item.targetType === 'url') {
+				this.menuTargetLoading = false
 				return
 			}
 			this.menuTargetLoading = true
@@ -312,8 +343,10 @@ export default {
 							await this.loadRowsFromBE({ viewId: view.id, tableId: view.tableId })
 							await this.loadRelationsFromBE({ viewId: view.id })
 						}
-						this.menuViewSetting = this.createViewSetting(view)
-						this.menuResource = { ...view, isView: true, key: 'view-' + view.id }
+						if (request === this.menuTargetRequest) {
+							this.menuViewSetting = this.createViewSetting(view)
+							this.menuResource = { ...view, isView: true, key: 'view-' + view.id }
+						}
 					}
 				} else {
 					await this.loadContextTable({ id: item.targetId })
@@ -322,15 +355,21 @@ export default {
 						await this.loadColumnsFromBE({ view: null, tableId: table.id })
 						await this.loadRowsFromBE({ viewId: null, tableId: table.id })
 						await this.loadRelationsFromBE({ tableId: table.id })
-						this.menuViewSetting = this.createViewSetting(table)
-						this.menuResource = { ...table, isView: false, key: String(table.id) }
+						if (request === this.menuTargetRequest) {
+							this.menuViewSetting = this.createViewSetting(table)
+							this.menuResource = { ...table, isView: false, key: String(table.id) }
+						}
 					}
 				}
 			} catch (error) {
 				console.error('The menu target could not be loaded', error)
-				this.menuResource = null
+				if (request === this.menuTargetRequest) {
+					this.menuResource = null
+				}
 			} finally {
-				this.menuTargetLoading = false
+				if (request === this.menuTargetRequest) {
+					this.menuTargetLoading = false
+				}
 			}
 		},
 		contextSignature() {
@@ -349,6 +388,7 @@ export default {
 			this.loading = true
 			this.contextResources = []
 			this.resourceViewSettings = {}
+			this.resourcesLoaded = false
 
 			try {
 				await this.loadContext({ id: this.activeContextId })
@@ -364,72 +404,8 @@ export default {
 
 				this.icon = await this.getContextIcon(this.activeContext.iconName)
 
-				if (this.context && this.context.pages) {
-					const pages = Object.values(this.context.pages)
-					const startPage = pages.find(p => p.page_type === 'startpage')
-
-					if (startPage && startPage.content) {
-						const sortedContent = Object.values(startPage.content).sort((a, b) => a.order - b.order)
-
-						for (const content of sortedContent) {
-							const node = this.context.nodes[content.node_rel_id]
-							if (!node) continue
-
-							try {
-								const nodeType = parseInt(node.node_type)
-								if (nodeType === NODE_TYPE_TABLE) {
-
-									await this.loadContextTable({ id: node.node_id })
-									const table = this.tables.find(table => table.id === node.node_id)
-									if (table) {
-										await this.loadColumnsFromBE({
-											view: null,
-											tableId: table.id,
-										})
-										await this.loadRowsFromBE({
-											viewId: null,
-											tableId: table.id,
-										})
-										await this.loadRelationsFromBE({
-											tableId: table.id,
-										})
-										table.key = (table.id).toString()
-										table.isView = false
-										this.resourceViewSettings[table.key] = this.createViewSetting(table)
-										this.contextResources.push(table)
-									}
-
-								} else if (nodeType === NODE_TYPE_VIEW) {
-									await this.loadContextView({ id: node.node_id })
-									const view = this.views.find(view => view.id === node.node_id)
-									// A grid view has no rows; it is a page, reached through the menu
-									if (view && view.type !== 'grid') {
-										await this.loadColumnsFromBE({
-											view,
-										})
-										await this.loadRowsFromBE({
-											viewId: view.id,
-											tableId: view.tableId,
-										})
-										await this.loadRelationsFromBE({
-											viewId: view.id,
-										})
-										view.key = 'view-' + (view.id).toString()
-										view.isView = true
-										this.resourceViewSettings[view.key] = this.createViewSetting(view)
-										this.contextResources.push(view)
-									}
-								}
-							} catch (err) {
-								console.error(`Failed to load resource ${node.node_id}:`, err)
-								this.errorMessage = t('tables', 'Some resources in this application could not be loaded')
-							}
-						}
-					}
-					// TODO: check this
-					// Fallback if no startpage or content (though unexpected for valid contexts with nodes)
-					// If nodes exist but not in startpage content, they won't be shown.
-					// This matches backend logic where nodes are added to startpage.
+				if (this.showsOverview) {
+					await this.loadResources()
 				}
 			} catch (e) {
 				if (e.message === 'NOT_FOUND') {
@@ -443,6 +419,96 @@ export default {
 				this.isReloading = false
 			}
 		},
+		/**
+		 * Loads the tables and views of the overview when it is shown and has not loaded them yet,
+		 * for instance after leaving a menu page that the application opened on.
+		 */
+		async loadResourcesWhenShown() {
+			if (this.loading || this.resourcesLoaded || !this.showsOverview || !this.context) {
+				return
+			}
+			this.loading = true
+			try {
+				await this.loadResources()
+			} finally {
+				this.loading = false
+			}
+		},
+		/**
+		 * Loads the tables and views of the application's start page, with their columns, rows and relations.
+		 */
+		async loadResources() {
+			this.resourcesLoaded = true
+			this.contextResources = []
+			this.resourceViewSettings = {}
+			if (this.context && this.context.pages) {
+				const pages = Object.values(this.context.pages)
+				const startPage = pages.find(p => p.page_type === 'startpage')
+
+				if (startPage && startPage.content) {
+					const sortedContent = Object.values(startPage.content).sort((a, b) => a.order - b.order)
+
+					for (const content of sortedContent) {
+						const node = this.context.nodes[content.node_rel_id]
+						if (!node) continue
+
+						try {
+							const nodeType = parseInt(node.node_type)
+							if (nodeType === NODE_TYPE_TABLE) {
+
+								await this.loadContextTable({ id: node.node_id })
+								const table = this.tables.find(table => table.id === node.node_id)
+								if (table) {
+									await this.loadColumnsFromBE({
+										view: null,
+										tableId: table.id,
+									})
+									await this.loadRowsFromBE({
+										viewId: null,
+										tableId: table.id,
+									})
+									await this.loadRelationsFromBE({
+										tableId: table.id,
+									})
+									table.key = (table.id).toString()
+									table.isView = false
+									this.resourceViewSettings[table.key] = this.createViewSetting(table)
+									this.contextResources.push(table)
+								}
+
+							} else if (nodeType === NODE_TYPE_VIEW) {
+								await this.loadContextView({ id: node.node_id })
+								const view = this.views.find(view => view.id === node.node_id)
+								// A grid view has no rows; it is a page, reached through the menu
+								if (view && view.type !== 'grid') {
+									await this.loadColumnsFromBE({
+										view,
+									})
+									await this.loadRowsFromBE({
+										viewId: view.id,
+										tableId: view.tableId,
+									})
+									await this.loadRelationsFromBE({
+										viewId: view.id,
+									})
+									view.key = 'view-' + (view.id).toString()
+									view.isView = true
+									this.resourceViewSettings[view.key] = this.createViewSetting(view)
+									this.contextResources.push(view)
+								}
+							}
+						} catch (err) {
+							console.error(`Failed to load resource ${node.node_id}:`, err)
+							this.errorMessage = t('tables', 'Some resources in this application could not be loaded')
+						}
+					}
+				}
+				// TODO: check this
+				// Fallback if no startpage or content (though unexpected for valid contexts with nodes)
+				// If nodes exist but not in startpage content, they won't be shown.
+				// This matches backend logic where nodes are added to startpage.
+			}
+		},
 		createColumn(isView, element) {
 			emit('tables:column:create', { isView, element })
 		},