feat(applications): page listing all applications

playwright/e2e/application.spec.ts

@@ -6,6 +6,7 @@
 import type { APIRequestContext, Page } from '@playwright/test'
 import { test, expect } from '../support/fixtures'
 import { ocsRequest, type TestUser } from '../support/api'
+import { createContext, ensureNavigationOpen } from '../support/commands'
 
 test.use({ viewport: { width: 1600, height: 1000 } })
 
@@ -191,7 +192,7 @@
 		await page.getByRole('menuitem', { name: 'Edit name, icon and members' }).click()
 		await page.locator('[data-cy="editContextTechnicalName"]').fill(technicalName)
 		await page.locator('[data-cy="editContextSubmitBtn"]').click()
 		await expect(page.locator('[data-cy="context-address"]')).toContainText('/apps/tables/app/' + technicalName)
 		// Pages carry their own technical name, shown next to their title
 		await expect(page.locator('[data-cy="page-card-technical-name"]')).toHaveText(['dashboard'])
 
@@ -200,6 +201,22 @@
 		await expect(page).toHaveURL(/\/menu\/dashboard$/)
 	})
 
+	test('All applications are listed on one page that opens each of them', async ({ userPage: { page } }) => {
+		await page.goto('/index.php/apps/tables')
+		await createContext(page, 'listed application')
+
+		// Opening the new application collapses the Tables navigation
+		await ensureNavigationOpen(page)
+		await page.locator('[data-cy="navigationAllApplications"] a').first().click()
+		const card = page.locator('[data-cy="application-card"]').filter({ hasText: 'listed application' })
+		await expect(card).toBeVisible()
+		await expect(card).toContainText('1 menu item')
+		await card.click()
+
+		await expect(page).toHaveURL(/\/application\/\d+\/overview$/)
+		await expect(page.locator('[data-cy="context-title"]')).toContainText('listed application')
+	})
+
 	test('The overview lists the pages; a page added there gets a menu entry and opens in edit mode', async ({ userPage: { page, user } }) => {
 		const contextResponse = await ocsRequest(page.request, user, { method: 'POST', url: `${API}/contexts?format=json`, data: { name: 'overview application', iconName: 'star' } })
 		const contextId = (await contextResponse.json()).ocs.data.id
@@ -257,7 +274,7 @@
 
 		const saveResponse = page.waitForResponse(response => response.url().includes('/apps/tables/api/2/contexts/') && response.request().method() === 'PUT')
 		await page.locator('[data-cy="context-menu-save"]').click()
 		expect((await saveResponse).status()).toBe(200)
 
 		await page.reload()
 		const items = page.locator('[data-cy="context-menu-preview-item"]')
@@ -282,7 +299,7 @@
 
 		const saveResponse = page.waitForResponse(response => response.url().includes('/apps/tables/api/2/contexts/') && response.request().method() === 'PUT')
 		await page.locator('[data-cy="context-menu-save"]').click()
 		expect((await saveResponse).status()).toBe(200)
 		await expect(page.locator('[data-cy="context-menu-preview-item"]').filter({ hasText: 'Reports' }).last()).toBeVisible()
 
 		await page.goto(`/index.php/apps/tables/app/${contextId}`)
@@ -445,6 +462,6 @@
 	const importResponse = page.waitForResponse(r => r.url().includes('/scheme/import') && r.request().method() === 'POST')
 	await dialog.getByRole('button', { name: 'Import' }).click()
 	const response = await importResponse
 	await expect(dialog).toContainText('Import completed successfully.')
 	return response
 }

src/App.vue

@@ -147,6 +147,9 @@ export default {
 						|| document.querySelector(`header .header-left .app-menu a[href="${url}"]`)
 					this.switchActiveMenuEntry(targetElement)
 				}
+			} else if (currentRoute.path === '/applications') {
+				this.setActiveContextId(null)
+				this.setPageTitle(t('tables', 'Applications'))
 			} else if (currentRoute.path.startsWith('/application/')) {
 				const contextId = parseInt(currentRoute.params.contextId)
 				this.setActiveContextId(contextId)

src/modules/navigation/sections/Navigation.vue

@@ -66,6 +66,12 @@
 					</template>
 				</NcAppNavigationCaption>
 
+				<NcAppNavigationItem :name="t('tables', 'All applications')" to="/applications" data-cy="navigationAllApplications">
+					<template #icon>
+						<ViewGridOutline :size="20" />
+					</template>
+				</NcAppNavigationItem>
+
 				<template v-for="node in getAllContexts" :key="node.id">
 					<NavigationContextItem :context="node" />
 				</template>
@@ -108,6 +114,7 @@ import { emit } from '@nextcloud/event-bus'
 import { useEventBusSubscriptions } from '../../../shared/composables/useEventBusSubscriptions.js'
 import Magnify from 'vue-material-design-icons/Magnify.vue'
 import ArchiveOutline from 'vue-material-design-icons/ArchiveOutline.vue'
+import ViewGridOutline from 'vue-material-design-icons/ViewGridOutline.vue'
 import { getCurrentUser } from '@nextcloud/auth'
 import { loadState } from '@nextcloud/initial-state'
 import { mapState, mapActions } from 'pinia'
@@ -125,6 +132,7 @@ export default {
 		NcTextField,
 		Magnify,
 		ArchiveOutline,
+		ViewGridOutline,
 		NcButton,
 		NcCounterBubble,
 		NcEmptyContent,

src/pages/Applications.vue

@@ -0,0 +1,147 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<div class="applications-page" data-cy="applications-page">
+		<div class="applications-page__header">
+			<h1>{{ t('tables', 'Applications') }}</h1>
+			<NcButton variant="primary" data-cy="applications-create" @click="createContext">
+				<template #icon>
+					<Plus :size="20" />
+				</template>
+				{{ t('tables', 'Create application') }}
+			</NcButton>
+		</div>
+
+		<NcEmptyContent v-if="contexts.length === 0"
+			:name="t('tables', 'No applications yet')"
+			:description="t('tables', 'An application bundles pages, tables and views behind one menu.')">
+			<template #icon>
+				<ViewGridOutline />
+			</template>
+		</NcEmptyContent>
+
+		<ul v-else class="applications-page__list">
+			<li v-for="context in sortedContexts" :key="context.id">
+				<router-link :to="'/application/' + context.id + '/overview'" class="application-card" data-cy="application-card">
+					<ApplicationIcon :icon-name="context.iconName" :size="32" />
+					<div class="application-card__text">
+						<h2 class="application-card__title">
+							{{ context.name }}
+						</h2>
+						<p v-if="context.description" class="application-card__description">
+							{{ context.description }}
+						</p>
+						<p class="application-card__meta">
+							{{ n('tables', '%n menu item', '%n menu items', (context.menuItems ?? []).length) }}
+							<template v-if="context.technicalName">
+								· /{{ context.technicalName }}
+							</template>
+						</p>
+					</div>
+				</router-link>
+			</li>
+		</ul>
+
+		<MainModals />
+	</div>
+</template>
+
+<script>
+import { NcButton, NcEmptyContent } from '@nextcloud/vue'
+import Plus from 'vue-material-design-icons/Plus.vue'
+import ViewGridOutline from 'vue-material-design-icons/ViewGridOutline.vue'
+import { emit } from '@nextcloud/event-bus'
+import { mapState } from 'pinia'
+import MainModals from '../modules/modals/Modals.vue'
+import ApplicationIcon from '../shared/components/ApplicationIcon.vue'
+import { useTablesStore } from '../store/store.js'
+
+export default {
+	name: 'Applications',
+	components: {
+		NcButton,
+		NcEmptyContent,
+		Plus,
+		ViewGridOutline,
+		MainModals,
+		ApplicationIcon,
+	},
+	computed: {
+		...mapState(useTablesStore, ['contexts']),
+		sortedContexts() {
+			return [...this.contexts].sort((a, b) => a.name.localeCompare(b.name))
+		},
+	},
+	methods: {
+		createContext() {
+			emit('tables:context:create')
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.applications-page {
+	width: 100%;
+	padding: calc(4 * var(--default-grid-baseline));
+
+	&__header {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: space-between;
+		gap: calc(4 * var(--default-grid-baseline));
+		margin-bottom: calc(4 * var(--default-grid-baseline));
+
+		h1 {
+			// Leave room for the navigation toggle that floats over the top left corner of the content
+			margin: 0;
+			margin-inline-start: var(--default-clickable-area);
+		}
+	}
+
+	&__list {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+		gap: calc(4 * var(--default-grid-baseline));
+		list-style: none;
+	}
+}
+
+.application-card {
+	display: flex;
+	gap: calc(3 * var(--default-grid-baseline));
+	padding: calc(4 * var(--default-grid-baseline));
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius-large);
+	background-color: var(--color-main-background);
+	color: inherit;
+	text-decoration: none;
+
+	&:hover,
+	&:focus-visible {
+		background-color: var(--color-background-hover);
+	}
+
+	&__text {
+		min-width: 0;
+	}
+
+	&__title {
+		margin: 0;
+		font-size: var(--default-font-size);
+		font-weight: bold;
+	}
+
+	&__description {
+		margin: var(--default-grid-baseline) 0 0;
+	}
+
+	&__meta {
+		margin: var(--default-grid-baseline) 0 0;
+		color: var(--color-text-maxcontrast);
+	}
+}
+</style>

src/router.js

@@ -8,6 +8,7 @@ import MainViewWrapper from './pages/View.vue'
 import MainDashboardWrapper from './pages/Table.vue'
 import Startpage from './pages/Startpage.vue'
 import Context from './pages/Context.vue'
+import Applications from './pages/Applications.vue'
 import PublicTableView from './pages/PublicTableView.vue'
 
 export default createRouter({
@@ -18,6 +19,11 @@ export default createRouter({
 			path: '/',
 			component: Startpage,
 		},
+		{
+			path: '/applications',
+			component: Applications,
+			name: 'applications',
+		},
 		{
 			path: '/application/:contextId',
 			component: Context,