From 5d8e00b5e64e0859492f7c320d243aef548e0f2a Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Mon, 12 Oct 2026 10:29:52 +0200
Subject: [PATCH 1/5] feat(grid): show and edit grid views on their own page

A grid view opens as a page of widgets. In edit mode widgets are added,
configured, moved and removed, and the whole grid is saved at once. A
dialog creates a grid view or edits its title, description and technical
name.

- grid views are kept out of the table view lists in the navigation
- views without a table survive a reload of the tables in the store

Co-authored-by: Ruben van der Linde <ruben@conduction.nl>
Assisted-by: ClaudeCode:claude-opus-5-5
Signed-off-by: Remko <remko@conduction.nl>
---
 src/modules/grid/GridView.vue                 | 285 ++++++++++++++++++
 src/modules/modals/GridViewSettings.vue       | 181 +++++++++++
 src/modules/modals/Modals.vue                 |  22 +-
 .../partials/NavigationViewItem.vue           |  11 +-
 .../navigation/sections/Navigation.vue        |   4 +-
 src/pages/View.vue                            |  15 +
 src/store/store.js                            |  19 +-
 7 files changed, 530 insertions(+), 7 deletions(-)
 create mode 100644 src/modules/grid/GridView.vue
 create mode 100644 src/modules/modals/GridViewSettings.vue

diff --git a/src/modules/grid/GridView.vue b/src/modules/grid/GridView.vue
new file mode 100644
index 0000000000..3be5c81a58
--- /dev/null
+++ b/src/modules/grid/GridView.vue
@@ -0,0 +1,285 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<div class="grid-view" data-cy="grid-view">
+		<div class="grid-view__header">
+			<div class="grid-view__heading">
+				<h1 v-if="showTitle" class="grid-view__title" data-cy="grid-view-title">
+					{{ view.emoji }} {{ view.title }}
+				</h1>
+				<p v-if="showTitle && view.description" class="grid-view__description">
+					{{ view.description }}
+				</p>
+			</div>
+			<div v-if="canEdit" class="grid-view__actions">
+				<template v-if="isEditing">
+					<NcButton variant="secondary" data-cy="grid-view-add-widget" @click="openAddWidget">
+						<template #icon>
+							<Plus :size="20" />
+						</template>
+						{{ t('tables', 'Add widget') }}
+					</NcButton>
+					<NcButton variant="tertiary" data-cy="grid-view-cancel" @click="cancelEditing">
+						{{ t('tables', 'Cancel') }}
+					</NcButton>
+					<NcButton variant="primary" :disabled="saving" data-cy="grid-view-save" @click="save">
+						<template #icon>
+							<ContentSaveOutline :size="20" />
+						</template>
+						{{ t('tables', 'Save') }}
+					</NcButton>
+				</template>
+				<NcButton v-else variant="secondary" data-cy="grid-view-edit" @click="startEditing">
+					<template #icon>
+						<PencilOutline :size="20" />
+					</template>
+					{{ t('tables', 'Edit page') }}
+				</NcButton>
+			</div>
+		</div>
+
+		<NcEmptyContent v-if="activeGrid.layout.length === 0"
+			class="grid-view__empty"
+			:name="t('tables', 'This page is empty')"
+			:description="isEditing ? t('tables', 'Add a header, a description or a table.') : t('tables', 'Edit the page to add widgets.')">
+			<template #icon>
+				<ViewDashboardOutline />
+			</template>
+			<template v-if="isEditing" #action>
+				<NcButton variant="primary" @click="openAddWidget">
+					{{ t('tables', 'Add widget') }}
+				</NcButton>
+			</template>
+		</NcEmptyContent>
+
+		<GridCanvas :layout="activeGrid.layout" :editable="isEditing" @layout-change="onLayoutChange">
+			<template #widget="{ item }">
+				<GridWidget v-if="widgetsById[item.widgetId]"
+					:widget="widgetsById[item.widgetId]"
+					:editable="isEditing"
+					@configure="configureWidget"
+					@remove="removeWidget"
+					@move="moveWidget" />
+			</template>
+		</GridCanvas>
+
+		<AddWidget :show-modal="addWidgetOpen"
+			:editing-widget="widgetBeingConfigured"
+			@close="closeAddWidget"
+			@submit="onWidgetSubmit" />
+	</div>
+</template>
+
+<script>
+import { NcButton, NcEmptyContent } from '@nextcloud/vue'
+import { showError, showSuccess } from '@nextcloud/dialogs'
+import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue'
+import PencilOutline from 'vue-material-design-icons/PencilOutline.vue'
+import Plus from 'vue-material-design-icons/Plus.vue'
+import ViewDashboardOutline from 'vue-material-design-icons/ViewDashboardOutline.vue'
+import { mapActions, mapState } from 'pinia'
+import GridCanvas from './GridCanvas.vue'
+import GridWidget from './GridWidget.vue'
+import AddWidget from '../modals/AddWidget.vue'
+import { useTablesStore } from '../../store/store.js'
+import { GRID_COLUMNS, GRID_MIN_WIDTH, cloneGrid, emptyGrid, findWidgetType, nextFreeRow } from './widgetRegistry.js'
+
+/**
+ * A grid view: its widgets on a grid, with an edit mode that saves the whole grid at once.
+ */
+export default {
+	name: 'GridView',
+	components: {
+		NcButton,
+		NcEmptyContent,
+		ContentSaveOutline,
+		PencilOutline,
+		Plus,
+		ViewDashboardOutline,
+		GridCanvas,
+		GridWidget,
+		AddWidget,
+	},
+	props: {
+		view: {
+			type: Object,
+			required: true,
+		},
+		canEdit: {
+			type: Boolean,
+			default: false,
+		},
+		showTitle: {
+			type: Boolean,
+			default: true,
+		},
+	},
+	data() {
+		return {
+			draftGrid: null,
+			saving: false,
+			addWidgetOpen: false,
+			widgetBeingConfigured: null,
+		}
+	},
+	computed: {
+		...mapState(useTablesStore, ['widgetTypes']),
+		storedGrid() {
+			return this.view.grid?.layout ? this.view.grid : emptyGrid()
+		},
+		activeGrid() {
+			return this.draftGrid ?? this.storedGrid
+		},
+		isEditing() {
+			return this.draftGrid !== null
+		},
+		widgetsById() {
+			return Object.fromEntries(this.activeGrid.widgets.map(widget => [widget.id, widget]))
+		},
+	},
+	watch: {
+		'view.id'() {
+			this.draftGrid = null
+		},
+	},
+	methods: {
+		...mapActions(useTablesStore, ['updateView']),
+		startEditing() {
+			this.draftGrid = cloneGrid(this.storedGrid)
+		},
+		cancelEditing() {
+			this.draftGrid = null
+		},
+		onLayoutChange(layout) {
+			if (!this.isEditing) {
+				return
+			}
+			this.draftGrid = { ...this.draftGrid, layout }
+		},
+		openAddWidget() {
+			this.widgetBeingConfigured = null
+			this.addWidgetOpen = true
+		},
+		closeAddWidget() {
+			this.addWidgetOpen = false
+			this.widgetBeingConfigured = null
+		},
+		configureWidget(widget) {
+			this.widgetBeingConfigured = widget
+			this.addWidgetOpen = true
+		},
+		onWidgetSubmit(payload) {
+			if (this.widgetBeingConfigured) {
+				this.draftGrid = {
+					...this.draftGrid,
+					widgets: this.draftGrid.widgets.map(widget => widget.id === this.widgetBeingConfigured.id
+						? { ...widget, configuration: payload.configuration, content: payload.content }
+						: widget),
+				}
+				this.closeAddWidget()
+				return
+			}
+			const id = 'w-' + payload.type + '-' + Date.now()
+			const widgetType = findWidgetType(this.widgetTypes, payload.type)
+			const size = { gridWidth: widgetType?.defaultWidth ?? 6, gridHeight: widgetType?.defaultHeight ?? 3 }
+			this.draftGrid = {
+				widgets: [...this.draftGrid.widgets, { id, type: payload.type, configuration: payload.configuration, content: payload.content }],
+				layout: [...this.draftGrid.layout, {
+					id,
+					widgetId: id,
+					gridX: 0,
+					gridY: nextFreeRow(this.draftGrid.layout),
+					gridWidth: size.gridWidth,
+					gridHeight: size.gridHeight,
+				}],
+			}
+			this.closeAddWidget()
+		},
+		/**
+		 * Moves or resizes a widget by one step, kept inside the grid.
+		 *
+		 * @param {object} widget the widget to change
+		 * @param {{gridX?: number, gridY?: number, gridWidth?: number, gridHeight?: number}} change the steps to apply
+		 */
+		moveWidget(widget, change) {
+			this.draftGrid = {
+				...this.draftGrid,
+				layout: this.draftGrid.layout.map(item => {
+					if (item.widgetId !== widget.id) {
+						return item
+					}
+					const gridWidth = Math.min(GRID_COLUMNS, Math.max(GRID_MIN_WIDTH, item.gridWidth + (change.gridWidth ?? 0)))
+					return {
+						...item,
+						gridWidth,
+						gridHeight: Math.max(1, item.gridHeight + (change.gridHeight ?? 0)),
+						gridX: Math.min(GRID_COLUMNS - gridWidth, Math.max(0, item.gridX + (change.gridX ?? 0))),
+						gridY: Math.max(0, item.gridY + (change.gridY ?? 0)),
+					}
+				}),
+			}
+		},
+		removeWidget(widget) {
+			this.draftGrid = {
+				widgets: this.draftGrid.widgets.filter(item => item.id !== widget.id),
+				layout: this.draftGrid.layout.filter(item => item.widgetId !== widget.id),
+			}
+		},
+		async save() {
+			if (!this.isEditing) {
+				return
+			}
+			this.saving = true
+			const grid = cloneGrid(this.draftGrid)
+			const success = await this.updateView({
+				id: this.view.id,
+				data: { data: { grid: JSON.stringify(grid) } },
+			})
+			this.saving = false
+			if (success) {
+				this.draftGrid = null
+				showSuccess(t('tables', 'Page saved'))
+			} else {
+				showError(t('tables', 'The page could not be saved'))
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.grid-view {
+	width: 100%;
+	padding: calc(4 * var(--default-grid-baseline, 4px));
+
+	&__header {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: calc(4 * var(--default-grid-baseline, 4px));
+		margin-bottom: calc(4 * var(--default-grid-baseline, 4px));
+	}
+
+	&__title {
+		margin: 0;
+	}
+
+	&__description {
+		margin: calc(1 * var(--default-grid-baseline, 4px)) 0 0;
+		color: var(--color-text-maxcontrast);
+	}
+
+	&__actions {
+		display: flex;
+		align-items: center;
+		gap: calc(2 * var(--default-grid-baseline, 4px));
+		flex-shrink: 0;
+	}
+
+	&__empty {
+		margin-block: 4vh;
+	}
+}
+</style>
diff --git a/src/modules/modals/GridViewSettings.vue b/src/modules/modals/GridViewSettings.vue
new file mode 100644
index 0000000000..f3c1020a29
--- /dev/null
+++ b/src/modules/modals/GridViewSettings.vue
@@ -0,0 +1,181 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<NcDialog v-if="showModal"
+		:name="view ? t('tables', 'Edit grid view') : t('tables', 'Create grid view')"
+		size="normal"
+		data-cy="gridViewSettingsModal"
+		@closing="actionCancel">
+		<div class="modal__content">
+			<div class="row space-T">
+				<div class="col-4 mandatory">
+					{{ t('tables', 'Title') }}
+				</div>
+				<div class="col-4 title-row">
+					<NcEmojiPicker :close-on-select="true" @select="emoji => icon = emoji">
+						<NcButton variant="tertiary"
+							:aria-label="t('tables', 'Select emoji for view')"
+							:title="t('tables', 'Select emoji')"
+							@click.prevent>
+							{{ icon }}
+						</NcButton>
+					</NcEmojiPicker>
+					<input v-model="title"
+						:class="{ missing: errorTitle }"
+						type="text"
+						data-cy="gridViewTitle"
+						:placeholder="t('tables', 'Title of the grid view')">
+				</div>
+			</div>
+			<div class="row space-T">
+				<div class="col-4">
+					{{ t('tables', 'Description') }}
+				</div>
+				<input v-model="description" type="text" data-cy="gridViewDescription"
+					:placeholder="t('tables', 'What this page is for')">
+			</div>
+			<div class="row space-T">
+				<div class="col-4">
+					{{ t('tables', 'Technical name') }}
+				</div>
+				<input v-model="technicalName" type="text" data-cy="gridViewTechnicalName"
+					:class="{ missing: errorTechnicalName }"
+					:placeholder="t('tables', 'Optional, e.g. home. Lowercase letters, numbers and underscores.')">
+			</div>
+			<div class="row space-T">
+				<div class="fix-col-4 end">
+					<NcButton variant="primary" data-cy="gridViewSubmit" @click="submit">
+						{{ view ? t('tables', 'Save') : t('tables', 'Create grid view') }}
+					</NcButton>
+				</div>
+			</div>
+		</div>
+	</NcDialog>
+</template>
+
+<script>
+import { NcButton, NcDialog, NcEmojiPicker } from '@nextcloud/vue'
+import { showError } from '@nextcloud/dialogs'
+import { mapActions } from 'pinia'
+import { useTablesStore } from '../../store/store.js'
+
+const TECHNICAL_NAME_PATTERN = /^[a-z][a-z0-9_]*$/
+
+/**
+ * Creates a grid view, or edits the title, description and technicalName of one.
+ */
+export default {
+	name: 'GridViewSettings',
+	components: {
+		NcButton,
+		NcDialog,
+		NcEmojiPicker,
+	},
+	props: {
+		showModal: {
+			type: Boolean,
+			default: false,
+		},
+		view: {
+			type: Object,
+			default: null,
+		},
+		// passed through to the created event so an application can add the view to its menu
+		contextId: {
+			type: Number,
+			default: null,
+		},
+	},
+	emits: ['close', 'created'],
+	data() {
+		return {
+			title: '',
+			description: '',
+			technicalName: '',
+			icon: '',
+			errorTitle: false,
+			errorTechnicalName: false,
+			saving: false,
+		}
+	},
+	watch: {
+		showModal(open) {
+			if (open) {
+				this.reset()
+			}
+		},
+	},
+	methods: {
+		...mapActions(useTablesStore, ['insertStandaloneView', 'updateView']),
+		reset() {
+			this.title = this.view?.title ?? ''
+			this.description = this.view?.description ?? ''
+			this.technicalName = this.view?.technicalName ?? ''
+			this.icon = this.view?.emoji || '🧩'
+			this.errorTitle = false
+			this.errorTechnicalName = false
+			this.saving = false
+		},
+		actionCancel() {
+			this.$emit('close')
+		},
+		async submit() {
+			this.errorTitle = this.title.trim() === ''
+			this.errorTechnicalName = this.technicalName !== '' && !TECHNICAL_NAME_PATTERN.test(this.technicalName)
+			if (this.errorTitle) {
+				showError(t('tables', 'Cannot save the view. Title is missing.'))
+				return
+			}
+			if (this.errorTechnicalName) {
+				showError(t('tables', 'A technical name must start with a lowercase letter and contain only lowercase letters, numbers and underscores.'))
+				return
+			}
+			this.saving = true
+			if (this.view) {
+				const success = await this.updateView({
+					id: this.view.id,
+					data: { data: { title: this.title.trim(), description: this.description, emoji: this.icon, ...(this.technicalName ? { technicalName: this.technicalName } : {}) } },
+				})
+				this.saving = false
+				if (success) {
+					this.$emit('close')
+				}
+				return
+			}
+			const created = await this.insertStandaloneView({
+				data: { title: this.title.trim(), description: this.description, emoji: this.icon, type: 'grid', technicalName: this.technicalName || null },
+			})
+			this.saving = false
+			if (created) {
+				this.$emit('created', { view: created, contextId: this.contextId, technicalName: this.technicalName || null })
+				this.$emit('close')
+				if (!this.contextId) {
+					await this.$router.push('/view/' + created.id).catch(err => err)
+				}
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.modal__content {
+	padding-inline-end: 0 !important;
+
+	.title-row {
+		display: inline-flex;
+		align-items: center;
+		width: 100%;
+
+		input {
+			flex: 1;
+		}
+	}
+
+	input[type="text"] {
+		width: 100%;
+	}
+}
+</style>
diff --git a/src/modules/modals/Modals.vue b/src/modules/modals/Modals.vue
index 2738943b84..7b55ed19a1 100644
--- a/src/modules/modals/Modals.vue
+++ b/src/modules/modals/Modals.vue
@@ -35,6 +35,12 @@
 			:view-setting="viewToEdit?.viewSetting"
 			@close="viewToEdit = null" />
 		<DeleteView :show-modal="viewToDelete !== null" :view="viewToDelete" @cancel="viewToDelete = null" />
+		<GridViewSettings
+			:show-modal="gridView !== null"
+			:view="gridView?.view ?? null"
+			:context-id="gridView?.contextId ?? null"
+			@created="payload => emitGridViewCreated(payload)"
+			@close="gridView = null" />
 
 		<Import
 			:show-modal="importToElement !== null"
@@ -60,6 +66,7 @@
 
 <script>
 
+import { emit } from '@nextcloud/event-bus'
 import { useEventBusSubscriptions } from '../../shared/composables/useEventBusSubscriptions.js'
 import CreateRow from './CreateRow.vue'
 import ImportScheme from './ImportScheme.vue'
@@ -76,6 +83,7 @@ import CreateTable from './CreateTable.vue'
 import DeleteView from './DeleteView.vue'
 import EditTable from './EditTable.vue'
 import EditContext from './EditContext.vue'
+import GridViewSettings from './GridViewSettings.vue'
 import TransferTable from './TransferTable.vue'
 import CreateContext from './CreateContext.vue'
 import TransferContext from './TransferContext.vue'
@@ -85,6 +93,7 @@ import ImportContextScheme from './ImportContextScheme.vue';
 export default {
 	components: {
 		EditTable,
+		GridViewSettings,
 		DeleteView,
 		CreateTable,
 		Import,
@@ -118,6 +127,7 @@ export default {
 			editRow: null,
 			rowsToDelete: null,
 			viewToEdit: null,
+			gridView: null,
 			showModalCreateTable: false,
 			showModalCreateContext: false,
 			importToElement: null,
@@ -145,7 +155,14 @@ export default {
 
 		// views
 		this.subscribeToEventBus('tables:view:reload', () => { this.reload(true) })
-		this.subscribeToEventBus('tables:view:edit', view => { this.viewToEdit = { ...view, createView: false } })
+		this.subscribeToEventBus('tables:view:edit', view => {
+			if (view?.view?.type === 'grid') {
+				this.gridView = { view: view.view, contextId: null }
+				return
+			}
+			this.viewToEdit = { ...view, createView: false }
+		})
+		this.subscribeToEventBus('tables:view:create-grid', payload => { this.gridView = { view: null, contextId: payload?.contextId ?? null } })
 		this.subscribeToEventBus('tables:view:create', tableInfos => {
 			this.viewToEdit = {
 				view: { tableId: tableInfos.tableId, sort: [], filter: [] },
@@ -182,6 +199,9 @@ export default {
 
 	},
 	methods: {
+		emitGridViewCreated(payload) {
+			emit('tables:view:grid-created', payload)
+		},
 		onSaveNewColumn(event) {
 			if (this.createColumnInfo?.onSave) {
 				this.createColumnInfo.onSave(event)
diff --git a/src/modules/navigation/partials/NavigationViewItem.vue b/src/modules/navigation/partials/NavigationViewItem.vue
index 001f95cb1d..2625ba73a8 100644
--- a/src/modules/navigation/partials/NavigationViewItem.vue
+++ b/src/modules/navigation/partials/NavigationViewItem.vue
@@ -13,13 +13,16 @@
 			<template v-if="view.emoji">
 				{{ view.emoji }}
 			</template>
+			<template v-else-if="view.type === 'grid'">
+				<ViewDashboardOutline :size="20" />
+			</template>
 			<template v-else>
 				<Table :size="20" />
 			</template>
 		</template>
 		<template #counter>
 			<IconCloudOutline v-if="view.isFederated" :size="20" decorative style="margin-right: 8px;" />
-			<NcCounterBubble v-else-if="canReadData(view)" :count="view.rowsCount" />
+			<NcCounterBubble v-else-if="view.type !== 'grid' && canReadData(view)" :count="view.rowsCount" />
 			<NcActionButton v-if="view.hasShares" icon="icon-share" :class="{'margin-right': !(activeView && view.id === activeView.id)}" @click="actionShowShare" />
 			<div v-if="view.isShared && view.ownership !== userId && !canManageTable(view) && showShareSender" class="margin-left">
 				<NcAvatar :user="view.ownership" :show-user-status="false" />
@@ -37,7 +40,7 @@
 			</NcActionButton>
 
 			<!-- DUPLICATE -->
-			<NcActionButton v-if="canManageTable(view)"
+			<NcActionButton v-if="view.type !== 'grid' && canManageTable(view)"
 				:close-after-click="true"
 				@click="cloneView">
 				<template #icon>
@@ -55,7 +58,7 @@
 			</NcActionButton>
 
 			<!-- IMPORT -->
-			<NcActionButton v-if="canCreateRowInElement(view)"
+			<NcActionButton v-if="view.type !== 'grid' && canCreateRowInElement(view)"
 				:close-after-click="true"
 				@click="actionShowImport(view)">
 				{{ t('tables', 'Import') }}
@@ -117,6 +120,7 @@
 </template>
 <script>
 import { NcAppNavigationItem, NcActionButton, NcCounterBubble, NcAvatar } from '@nextcloud/vue'
+import ViewDashboardOutline from 'vue-material-design-icons/ViewDashboardOutline.vue'
 import '@nextcloud/dialogs/style.css'
 import { getCurrentUser } from '@nextcloud/auth'
 import { mapState, mapActions } from 'pinia'
@@ -140,6 +144,7 @@ export default {
 	name: 'NavigationViewItem',
 
 	components: {
+		ViewDashboardOutline,
 		IconCloudOutline,
 		ActivityIcon,
 		PlaylistEdit,
diff --git a/src/modules/navigation/sections/Navigation.vue b/src/modules/navigation/sections/Navigation.vue
index 8eb153920a..5f53751c63 100644
--- a/src/modules/navigation/sections/Navigation.vue
+++ b/src/modules/navigation/sections/Navigation.vue
@@ -148,12 +148,12 @@ export default {
 			const sharedTableIds = this.getFilteredTables.map(table => table.id)
 
 			return this.views.filter(view => {
-				return !view.isShared && view.ownership === getCurrentUser().uid && sharedTableIds.includes(view.tableId)
+				return view.type !== 'grid' && !view.isShared && view.ownership === getCurrentUser().uid && sharedTableIds.includes(view.tableId)
 			}).filter(view => view.title.toLowerCase().includes(this.filterString.toLowerCase()))
 		},
 		getSharedViews() {
 			return this.views.filter(view => {
-				return view.isShared && view.ownership !== getCurrentUser().uid
+				return view.type !== 'grid' && view.isShared && view.ownership !== getCurrentUser().uid
 			}).filter(view => view.title.toLowerCase().includes(this.filterString.toLowerCase()))
 		},
 		getFavoriteTables() {
diff --git a/src/pages/View.vue b/src/pages/View.vue
index e470492def..acca71c014 100644
--- a/src/pages/View.vue
+++ b/src/pages/View.vue
@@ -8,6 +8,10 @@
 			<div class="icon-loading" />
 		</div>
 
+		<div v-else-if="activeView && activeView.type === 'grid'" class="main-view-view__grid">
+			<GridView :view="activeView" :can-edit="canManageElement(activeView)" />
+		</div>
+
 		<div v-else-if="activeView">
 			<MainWrapper :element="activeView" :is-view="true" />
 		</div>
@@ -22,6 +26,8 @@
 import { mapState, mapActions } from 'pinia'
 import { useTablesStore } from '../store/store.js'
 import MainWrapper from '../modules/main/sections/MainWrapper.vue'
+import GridView from '../modules/grid/GridView.vue'
+import permissionsMixin from '../shared/components/ncTable/mixins/permissionsMixin.js'
 import MainModals from '../modules/modals/Modals.vue'
 import ErrorMessage from '../modules/main/partials/ErrorMessage.vue'
 import displayError, { getNotFoundError, getGenericLoadError } from '../shared/utils/displayError.js'
@@ -30,10 +36,13 @@ export default {
 
 	components: {
 		MainWrapper,
+		GridView,
 		MainModals,
 		ErrorMessage,
 	},
 
+	mixins: [permissionsMixin],
+
 	data() {
 		return {
 			errorMessage: null,
@@ -80,6 +89,12 @@ export default {
 .main-view-view {
 	width: max-content;
 	min-width: var(--app-content-width, 100%);
+
+	&__grid {
+		width: var(--app-content-width, 100%);
+		// leave room for the navigation toggle that floats over the top left corner of the content
+		padding-inline-start: var(--default-clickable-area, 44px);
+	}
 }
 
 :deep(h1) {
diff --git a/src/store/store.js b/src/store/store.js
index 1bbc96a8cb..114b478a6a 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -162,7 +162,11 @@ export const useTablesStore = defineStore('store', {
 						views = views.concat(table.views)
 					}
 				})
-				this.setViews(views)
+				// shared views and views without a table are loaded separately and must survive this reload
+				const loadedIds = new Set(views.map(view => view.id))
+				const loadedTableIds = new Set(res.data.map(table => table.id))
+				const keptViews = this.views.filter(view => !loadedIds.has(view.id) && !loadedTableIds.has(view.tableId))
+				this.setViews([...views, ...keptViews])
 			} catch (e) {
 				displayError(e, t('tables', 'Could not load tables.'))
 				showError(t('tables', 'Could not fetch tables'))
@@ -233,6 +237,19 @@ export const useTablesStore = defineStore('store', {
 			await widgetTypesRequest
 		},
 
+		async insertStandaloneView({ data }) {
+			let res = null
+			try {
+				res = (await axios.post(generateOcsUrl('/apps/tables/api/2/views'), data)).data.ocs.data
+			} catch (e) {
+				displayError(e, t('tables', 'Could not insert view.'))
+				return false
+			}
+
+			this.setViews([...this.views, res])
+			return res
+		},
+
 		async updateView({ id, data }) {
 			let res = null
 

From 213235a156fe9f786da8c6dc33e0b5f73136fe70 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Mon, 12 Oct 2026 16:13:17 +0200
Subject: [PATCH 2/5] fix(grid): edit grid views without a technical name and
 reach them from the navigation

- the grid view dialog no longer sends a technical name, which the server
  refuses for a view without a table, and only sends the fields the create
  endpoint takes; its fields are labelled and Submit is disabled while saving
- grid views get their own list in the navigation, with an action to create
  one, so the create flow has an entry point
- leaving a grid page with unsaved changes asks first, and the browser warns
  before closing the tab
- loading the tables keeps shared views and grid views but drops views of
  tables that are gone again
- the grid page imports the layout helpers from gridLayout.js, disables move
  steps that cannot apply and hides them on a narrow canvas
- a Playwright spec covers creating, editing, configuring and saving a page

Assisted-by: ClaudeCode:claude-opus-5-5
Signed-off-by: Remko <remko@conduction.nl>
---
 playwright/e2e/grid-view-page.spec.ts         | 129 ++++++++++++++++
 src/modules/grid/GridView.vue                 | 117 ++++++++++++--
 src/modules/modals/GridViewSettings.vue       | 143 +++++++-----------
 src/modules/modals/Modals.vue                 |  10 +-
 .../navigation/sections/Navigation.vue        |  21 +++
 src/store/store.js                            |   6 +-
 6 files changed, 309 insertions(+), 117 deletions(-)
 create mode 100644 playwright/e2e/grid-view-page.spec.ts

diff --git a/playwright/e2e/grid-view-page.spec.ts b/playwright/e2e/grid-view-page.spec.ts
new file mode 100644
index 0000000000..eeb9e5009a
--- /dev/null
+++ b/playwright/e2e/grid-view-page.spec.ts
@@ -0,0 +1,129 @@
+/**
+ * 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 through the API and opens its page.
+ *
+ * @param page the page of the test user
+ * @param user the test user
+ * @param title title of the grid view
+ */
+async function openNewGridView(page: Page, user: TestUser, title: string) {
+	const response = await ocsRequest(page.request, user, {
+		method: 'POST',
+		url: '/ocs/v2.php/apps/tables/api/2/views?format=json',
+		data: { title },
+	})
+	const view = (await response.json()).ocs.data
+	await page.goto(`/index.php/apps/tables/#/view/${view.id}`)
+	await expect(page.locator('[data-cy="gridViewHeading"]')).toContainText(title)
+	return view
+}
+
+/**
+ * Adds a header widget with the given heading through the widget dialog.
+ *
+ * @param page the page of the test user
+ * @param heading the heading of the header widget
+ */
+async function addHeaderWidget(page: Page, heading: string) {
+	await page.locator('[data-cy="gridViewAddWidget"]').click()
+	const dialog = page.locator('[data-cy="addWidgetModal"]')
+	await dialog.getByRole('textbox', { name: 'Heading', exact: true }).fill(heading)
+	await dialog.locator('[data-cy="addWidgetSubmit"]').click()
+	await expect(dialog).toBeHidden()
+}
+
+/**
+ * Saves the grid and waits for the server to store it.
+ *
+ * @param page the page of the test user
+ * @param viewId the id of the grid view
+ */
+async function saveGrid(page: Page, viewId: number) {
+	const saved = page.waitForResponse(response => response.url().includes(`/apps/tables/view/${viewId}`) && response.request().method() === 'PUT')
+	await page.locator('[data-cy="gridViewSave"]').click()
+	expect((await saved).status()).toBe(200)
+}
+
+test.describe('Grid view page', () => {
+	test('A grid view created from the navigation opens its page and is listed', async ({ userPage: { page } }) => {
+		await page.goto('/index.php/apps/tables')
+		await page.locator('[data-cy="navigationCreateGridViewIcon"]').click({ force: true })
+
+		const dialog = page.locator('[data-cy="gridViewSettingsModal"]')
+		await dialog.getByRole('textbox', { name: 'Title', exact: true }).fill('Team page')
+		await dialog.locator('[data-cy="gridViewSubmit"]').click()
+
+		await expect(page).toHaveURL(/#\/view\/\d+$/)
+		await expect(page.locator('[data-cy="gridViewHeading"]')).toContainText('Team page')
+		await expect(page.locator('[data-cy="navigationViewItem"]').filter({ hasText: 'Team page' })).toBeVisible()
+	})
+
+	test('Widgets are added, configured without losing their content, and kept after a reload', async ({ userPage: { page, user } }) => {
+		const view = await openNewGridView(page, user, 'Intake home')
+
+		await page.locator('[data-cy="gridViewEdit"]').click()
+		await addHeaderWidget(page, 'Welcome')
+		await saveGrid(page, view.id)
+
+		await page.reload()
+		await expect(page.locator('[data-cy="gridWidget"]')).toContainText('Welcome')
+
+		// Configuring the widget opens it with its own content, even after another type was picked before
+		await page.locator('[data-cy="gridViewEdit"]').click()
+		await page.locator('[data-cy="gridViewAddWidget"]').click()
+		const dialog = page.locator('[data-cy="addWidgetModal"]')
+		await dialog.locator('[data-cy="addWidgetType"]').click()
+		await page.getByRole('option', { name: 'Description' }).click()
+		await page.keyboard.press('Escape')
+		await expect(dialog).toBeHidden()
+
+		await page.locator('[data-cy="gridWidget"]').getByRole('button', { name: 'Widget actions' }).click()
+		await page.getByRole('menuitem', { name: 'Configure widget' }).click()
+		const heading = dialog.getByRole('textbox', { name: 'Heading', exact: true })
+		await expect(heading).toHaveValue('Welcome')
+		await heading.fill('Hello')
+		await dialog.locator('[data-cy="addWidgetSubmit"]').click()
+		await saveGrid(page, view.id)
+
+		await page.reload()
+		await expect(page.locator('[data-cy="gridWidget"]')).toContainText('Hello')
+	})
+
+	test('The title of a grid view is edited from the navigation', async ({ userPage: { page, user } }) => {
+		const view = await openNewGridView(page, user, 'Old title')
+
+		const item = page.locator('[data-cy="navigationViewItem"]').filter({ hasText: 'Old title' })
+		await item.hover()
+		await item.getByRole('button', { name: /Actions|Open menu/ }).first().click({ force: true })
+		await page.getByRole('menuitem', { name: 'View settings' }).click()
+
+		const dialog = page.locator('[data-cy="gridViewSettingsModal"]')
+		await dialog.getByRole('textbox', { name: 'Title', exact: true }).fill('New title')
+		const saved = page.waitForResponse(response => response.url().includes(`/apps/tables/view/${view.id}`) && response.request().method() === 'PUT')
+		await dialog.locator('[data-cy="gridViewSubmit"]').click()
+		expect((await saved).status()).toBe(200)
+
+		await page.reload()
+		await expect(page.locator('[data-cy="gridViewHeading"]')).toContainText('New title')
+	})
+
+	test('Leaving a page with unsaved changes asks first', async ({ userPage: { page, user } }) => {
+		await openNewGridView(page, user, 'Draft page')
+
+		await page.locator('[data-cy="gridViewEdit"]').click()
+		await addHeaderWidget(page, 'Not saved')
+		await page.goto('/index.php/apps/tables/#/')
+
+		await expect(page.getByRole('dialog', { name: 'Discard unsaved changes?' })).toBeVisible()
+		await page.getByRole('button', { name: 'Keep editing' }).click()
+		await expect(page.locator('[data-cy="gridWidget"]')).toContainText('Not saved')
+	})
+})
diff --git a/src/modules/grid/GridView.vue b/src/modules/grid/GridView.vue
index 3be5c81a58..3ede7d04d7 100644
--- a/src/modules/grid/GridView.vue
+++ b/src/modules/grid/GridView.vue
@@ -3,10 +3,10 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<div class="grid-view" data-cy="grid-view">
+	<div class="grid-view" data-cy="gridView">
 		<div class="grid-view__header">
 			<div class="grid-view__heading">
-				<h1 v-if="showTitle" class="grid-view__title" data-cy="grid-view-title">
+				<h1 v-if="showTitle" class="grid-view__title" data-cy="gridViewHeading">
 					{{ view.emoji }} {{ view.title }}
 				</h1>
 				<p v-if="showTitle && view.description" class="grid-view__description">
@@ -15,23 +15,23 @@
 			</div>
 			<div v-if="canEdit" class="grid-view__actions">
 				<template v-if="isEditing">
-					<NcButton variant="secondary" data-cy="grid-view-add-widget" @click="openAddWidget">
+					<NcButton variant="secondary" data-cy="gridViewAddWidget" @click="openAddWidget">
 						<template #icon>
 							<Plus :size="20" />
 						</template>
 						{{ t('tables', 'Add widget') }}
 					</NcButton>
-					<NcButton variant="tertiary" data-cy="grid-view-cancel" @click="cancelEditing">
+					<NcButton variant="tertiary" data-cy="gridViewCancel" @click="cancelEditing">
 						{{ t('tables', 'Cancel') }}
 					</NcButton>
-					<NcButton variant="primary" :disabled="saving" data-cy="grid-view-save" @click="save">
+					<NcButton variant="primary" :disabled="saving" data-cy="gridViewSave" @click="save">
 						<template #icon>
 							<ContentSaveOutline :size="20" />
 						</template>
 						{{ t('tables', 'Save') }}
 					</NcButton>
 				</template>
-				<NcButton v-else variant="secondary" data-cy="grid-view-edit" @click="startEditing">
+				<NcButton v-else variant="secondary" data-cy="gridViewEdit" @click="startEditing">
 					<template #icon>
 						<PencilOutline :size="20" />
 					</template>
@@ -55,10 +55,12 @@
 		</NcEmptyContent>
 
 		<GridCanvas :layout="activeGrid.layout" :editable="isEditing" @layout-change="onLayoutChange">
-			<template #widget="{ item }">
+			<template #widget="{ item, narrow }">
 				<GridWidget v-if="widgetsById[item.widgetId]"
 					:widget="widgetsById[item.widgetId]"
+					:layout-item="item"
 					:editable="isEditing"
+					:arrangeable="!narrow"
 					@configure="configureWidget"
 					@remove="removeWidget"
 					@move="moveWidget" />
@@ -74,17 +76,19 @@
 
 <script>
 import { NcButton, NcEmptyContent } from '@nextcloud/vue'
-import { showError, showSuccess } from '@nextcloud/dialogs'
+import { showConfirmation, showSuccess } from '@nextcloud/dialogs'
 import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue'
 import PencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import ViewDashboardOutline from 'vue-material-design-icons/ViewDashboardOutline.vue'
+import { getCurrentInstance } from 'vue'
+import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
 import { mapActions, mapState } from 'pinia'
 import GridCanvas from './GridCanvas.vue'
 import GridWidget from './GridWidget.vue'
 import AddWidget from '../modals/AddWidget.vue'
 import { useTablesStore } from '../../store/store.js'
-import { GRID_COLUMNS, GRID_MIN_WIDTH, cloneGrid, emptyGrid, findWidgetType, nextFreeRow } from './widgetRegistry.js'
+import { GRID_COLUMNS, GRID_MIN_WIDTH, cloneGrid, emptyGrid, findWidgetType, nextFreeRow } from './gridLayout.js'
 
 /**
  * A grid view: its widgets on a grid, with an edit mode that saves the whole grid at once.
@@ -116,6 +120,13 @@ export default {
 			default: true,
 		},
 	},
+	setup() {
+		// Leaving the page, or switching to another view, asks first while the grid has unsaved changes
+		const instance = getCurrentInstance()
+		const confirmLeave = () => instance.proxy.confirmDiscard()
+		onBeforeRouteLeave(confirmLeave)
+		onBeforeRouteUpdate(confirmLeave)
+	},
 	data() {
 		return {
 			draftGrid: null,
@@ -135,6 +146,9 @@ export default {
 		isEditing() {
 			return this.draftGrid !== null
 		},
+		hasUnsavedChanges() {
+			return this.isEditing && JSON.stringify(this.draftGrid) !== JSON.stringify(cloneGrid(this.storedGrid))
+		},
 		widgetsById() {
 			return Object.fromEntries(this.activeGrid.widgets.map(widget => [widget.id, widget]))
 		},
@@ -144,32 +158,96 @@ export default {
 			this.draftGrid = null
 		},
 	},
+	mounted() {
+		window.addEventListener('beforeunload', this.warnBeforeUnload)
+	},
+	beforeUnmount() {
+		window.removeEventListener('beforeunload', this.warnBeforeUnload)
+	},
 	methods: {
 		...mapActions(useTablesStore, ['updateView']),
+		/**
+		 * Asks whether unsaved changes may be discarded.
+		 *
+		 * @return {Promise<boolean>} true when there is nothing to lose or the user agrees
+		 */
+		async confirmDiscard() {
+			if (!this.hasUnsavedChanges) {
+				return true
+			}
+			try {
+				return await showConfirmation({
+					name: t('tables', 'Discard unsaved changes?'),
+					text: t('tables', 'This page has changes that are not saved yet.'),
+					labelConfirm: t('tables', 'Discard changes'),
+					labelReject: t('tables', 'Keep editing'),
+				})
+			} catch {
+				// Closing the dialog keeps the changes
+				return false
+			}
+		},
+		/**
+		 * Lets the browser warn before the tab closes or reloads with unsaved changes.
+		 *
+		 * @param {BeforeUnloadEvent} event the unload event
+		 */
+		warnBeforeUnload(event) {
+			if (this.hasUnsavedChanges) {
+				event.preventDefault()
+			}
+		},
+		/**
+		 * Starts editing on a copy of the stored grid.
+		 */
 		startEditing() {
 			this.draftGrid = cloneGrid(this.storedGrid)
 		},
+		/**
+		 * Leaves edit mode and drops the draft.
+		 */
 		cancelEditing() {
 			this.draftGrid = null
 		},
+		/**
+		 * Takes over the layout after a drag or resize.
+		 *
+		 * @param {Array} layout the new layout
+		 */
 		onLayoutChange(layout) {
 			if (!this.isEditing) {
 				return
 			}
 			this.draftGrid = { ...this.draftGrid, layout }
 		},
+		/**
+		 * Opens the dialog for a new widget.
+		 */
 		openAddWidget() {
 			this.widgetBeingConfigured = null
 			this.addWidgetOpen = true
 		},
+		/**
+		 * Closes the widget dialog.
+		 */
 		closeAddWidget() {
 			this.addWidgetOpen = false
 			this.widgetBeingConfigured = null
 		},
+		/**
+		 * Opens the dialog for a widget on the grid.
+		 *
+		 * @param {object} widget the widget to configure
+		 */
 		configureWidget(widget) {
 			this.widgetBeingConfigured = widget
 			this.addWidgetOpen = true
 		},
+		/**
+		 * Updates the configured widget, or places a new one below the others.
+		 *
+		 * @param {{type: string, configuration: object, content: object}} payload the widget from the dialog
+		 */
 		onWidgetSubmit(payload) {
 			if (this.widgetBeingConfigured) {
 				this.draftGrid = {
@@ -221,12 +299,20 @@ export default {
 				}),
 			}
 		},
+		/**
+		 * Removes a widget and its place on the grid.
+		 *
+		 * @param {object} widget the widget to remove
+		 */
 		removeWidget(widget) {
 			this.draftGrid = {
 				widgets: this.draftGrid.widgets.filter(item => item.id !== widget.id),
 				layout: this.draftGrid.layout.filter(item => item.widgetId !== widget.id),
 			}
 		},
+		/**
+		 * Saves the whole grid at once.
+		 */
 		async save() {
 			if (!this.isEditing) {
 				return
@@ -238,11 +324,10 @@ export default {
 				data: { data: { grid: JSON.stringify(grid) } },
 			})
 			this.saving = false
+			// A failed save is already reported by the store
 			if (success) {
 				this.draftGrid = null
 				showSuccess(t('tables', 'Page saved'))
-			} else {
-				showError(t('tables', 'The page could not be saved'))
 			}
 		},
 	},
@@ -252,14 +337,14 @@ export default {
 <style lang="scss" scoped>
 .grid-view {
 	width: 100%;
-	padding: calc(4 * var(--default-grid-baseline, 4px));
+	padding: calc(4 * var(--default-grid-baseline));
 
 	&__header {
 		display: flex;
 		align-items: flex-start;
 		justify-content: space-between;
-		gap: calc(4 * var(--default-grid-baseline, 4px));
-		margin-bottom: calc(4 * var(--default-grid-baseline, 4px));
+		gap: calc(4 * var(--default-grid-baseline));
+		margin-bottom: calc(4 * var(--default-grid-baseline));
 	}
 
 	&__title {
@@ -267,14 +352,14 @@ export default {
 	}
 
 	&__description {
-		margin: calc(1 * var(--default-grid-baseline, 4px)) 0 0;
+		margin: var(--default-grid-baseline) 0 0;
 		color: var(--color-text-maxcontrast);
 	}
 
 	&__actions {
 		display: flex;
 		align-items: center;
-		gap: calc(2 * var(--default-grid-baseline, 4px));
+		gap: calc(2 * var(--default-grid-baseline));
 		flex-shrink: 0;
 	}
 
diff --git a/src/modules/modals/GridViewSettings.vue b/src/modules/modals/GridViewSettings.vue
index f3c1020a29..9b83bb5f25 100644
--- a/src/modules/modals/GridViewSettings.vue
+++ b/src/modules/modals/GridViewSettings.vue
@@ -7,64 +7,47 @@
 		:name="view ? t('tables', 'Edit grid view') : t('tables', 'Create grid view')"
 		size="normal"
 		data-cy="gridViewSettingsModal"
-		@closing="actionCancel">
-		<div class="modal__content">
-			<div class="row space-T">
-				<div class="col-4 mandatory">
-					{{ t('tables', 'Title') }}
-				</div>
-				<div class="col-4 title-row">
-					<NcEmojiPicker :close-on-select="true" @select="emoji => icon = emoji">
-						<NcButton variant="tertiary"
-							:aria-label="t('tables', 'Select emoji for view')"
-							:title="t('tables', 'Select emoji')"
-							@click.prevent>
-							{{ icon }}
-						</NcButton>
-					</NcEmojiPicker>
-					<input v-model="title"
-						:class="{ missing: errorTitle }"
-						type="text"
-						data-cy="gridViewTitle"
-						:placeholder="t('tables', 'Title of the grid view')">
-				</div>
-			</div>
-			<div class="row space-T">
-				<div class="col-4">
-					{{ t('tables', 'Description') }}
-				</div>
-				<input v-model="description" type="text" data-cy="gridViewDescription"
-					:placeholder="t('tables', 'What this page is for')">
-			</div>
-			<div class="row space-T">
-				<div class="col-4">
-					{{ t('tables', 'Technical name') }}
-				</div>
-				<input v-model="technicalName" type="text" data-cy="gridViewTechnicalName"
-					:class="{ missing: errorTechnicalName }"
-					:placeholder="t('tables', 'Optional, e.g. home. Lowercase letters, numbers and underscores.')">
-			</div>
-			<div class="row space-T">
-				<div class="fix-col-4 end">
-					<NcButton variant="primary" data-cy="gridViewSubmit" @click="submit">
-						{{ view ? t('tables', 'Save') : t('tables', 'Create grid view') }}
+		@closing="$emit('close')">
+		<div class="grid-view-settings">
+			<div class="grid-view-settings__title-row">
+				<NcEmojiPicker :close-on-select="true" @select="emoji => icon = emoji">
+					<NcButton variant="tertiary"
+						:aria-label="t('tables', 'Select emoji for view')"
+						:title="t('tables', 'Select emoji')"
+						@click.prevent>
+						{{ icon }}
 					</NcButton>
-				</div>
+				</NcEmojiPicker>
+				<NcTextField v-model="title"
+					class="grid-view-settings__field"
+					:label="t('tables', 'Title')"
+					:error="errorTitle"
+					:helper-text="errorTitle ? t('tables', 'A grid view needs a title') : ''"
+					required
+					data-cy="gridViewTitle" />
 			</div>
+			<NcTextField v-model="description"
+				class="grid-view-settings__field"
+				:label="t('tables', 'Description')"
+				:placeholder="t('tables', 'What this page is for')"
+				data-cy="gridViewDescription" />
 		</div>
+		<template #actions>
+			<NcButton variant="primary" :disabled="saving" data-cy="gridViewSubmit" @click="submit">
+				{{ view ? t('tables', 'Save') : t('tables', 'Create grid view') }}
+			</NcButton>
+		</template>
 	</NcDialog>
 </template>
 
 <script>
-import { NcButton, NcDialog, NcEmojiPicker } from '@nextcloud/vue'
-import { showError } from '@nextcloud/dialogs'
+import { NcButton, NcDialog, NcEmojiPicker, NcTextField } from '@nextcloud/vue'
 import { mapActions } from 'pinia'
 import { useTablesStore } from '../../store/store.js'
 
-const TECHNICAL_NAME_PATTERN = /^[a-z][a-z0-9_]*$/
-
 /**
- * Creates a grid view, or edits the title, description and technicalName of one.
+ * Creates a grid view, or edits the title, emoji and description of one. A grid view is
+ * named by its id, so it has no technical name to set here.
  */
 export default {
 	name: 'GridViewSettings',
@@ -72,6 +55,7 @@ export default {
 		NcButton,
 		NcDialog,
 		NcEmojiPicker,
+		NcTextField,
 	},
 	props: {
 		showModal: {
@@ -82,21 +66,14 @@ export default {
 			type: Object,
 			default: null,
 		},
-		// passed through to the created event so an application can add the view to its menu
-		contextId: {
-			type: Number,
-			default: null,
-		},
 	},
-	emits: ['close', 'created'],
+	emits: ['close'],
 	data() {
 		return {
 			title: '',
 			description: '',
-			technicalName: '',
 			icon: '',
 			errorTitle: false,
-			errorTechnicalName: false,
 			saving: false,
 		}
 	},
@@ -109,51 +86,39 @@ export default {
 	},
 	methods: {
 		...mapActions(useTablesStore, ['insertStandaloneView', 'updateView']),
+		/**
+		 * Fills the form with the view being edited, or empty for a new one.
+		 */
 		reset() {
 			this.title = this.view?.title ?? ''
 			this.description = this.view?.description ?? ''
-			this.technicalName = this.view?.technicalName ?? ''
 			this.icon = this.view?.emoji || '🧩'
 			this.errorTitle = false
-			this.errorTechnicalName = false
 			this.saving = false
 		},
-		actionCancel() {
-			this.$emit('close')
-		},
+		/**
+		 * Saves the view, or creates it and opens it.
+		 */
 		async submit() {
 			this.errorTitle = this.title.trim() === ''
-			this.errorTechnicalName = this.technicalName !== '' && !TECHNICAL_NAME_PATTERN.test(this.technicalName)
-			if (this.errorTitle) {
-				showError(t('tables', 'Cannot save the view. Title is missing.'))
-				return
-			}
-			if (this.errorTechnicalName) {
-				showError(t('tables', 'A technical name must start with a lowercase letter and contain only lowercase letters, numbers and underscores.'))
+			if (this.errorTitle || this.saving) {
 				return
 			}
 			this.saving = true
+			const data = { title: this.title.trim(), description: this.description, emoji: this.icon }
 			if (this.view) {
-				const success = await this.updateView({
-					id: this.view.id,
-					data: { data: { title: this.title.trim(), description: this.description, emoji: this.icon, ...(this.technicalName ? { technicalName: this.technicalName } : {}) } },
-				})
+				const success = await this.updateView({ id: this.view.id, data: { data } })
 				this.saving = false
 				if (success) {
 					this.$emit('close')
 				}
 				return
 			}
-			const created = await this.insertStandaloneView({
-				data: { title: this.title.trim(), description: this.description, emoji: this.icon, type: 'grid', technicalName: this.technicalName || null },
-			})
+			const created = await this.insertStandaloneView({ data })
 			this.saving = false
 			if (created) {
-				this.$emit('created', { view: created, contextId: this.contextId, technicalName: this.technicalName || null })
 				this.$emit('close')
-				if (!this.contextId) {
-					await this.$router.push('/view/' + created.id).catch(err => err)
-				}
+				await this.$router.push('/view/' + created.id).catch(err => err)
 			}
 		},
 	},
@@ -161,21 +126,19 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.modal__content {
-	padding-inline-end: 0 !important;
-
-	.title-row {
-		display: inline-flex;
-		align-items: center;
-		width: 100%;
+.grid-view-settings {
+	display: flex;
+	flex-direction: column;
+	gap: calc(2 * var(--default-grid-baseline));
 
-		input {
-			flex: 1;
-		}
+	&__title-row {
+		display: flex;
+		align-items: flex-end;
+		gap: var(--default-grid-baseline);
 	}
 
-	input[type="text"] {
-		width: 100%;
+	&__field {
+		flex: 1;
 	}
 }
 </style>
diff --git a/src/modules/modals/Modals.vue b/src/modules/modals/Modals.vue
index 7b55ed19a1..8edae596c7 100644
--- a/src/modules/modals/Modals.vue
+++ b/src/modules/modals/Modals.vue
@@ -38,8 +38,6 @@
 		<GridViewSettings
 			:show-modal="gridView !== null"
 			:view="gridView?.view ?? null"
-			:context-id="gridView?.contextId ?? null"
-			@created="payload => emitGridViewCreated(payload)"
 			@close="gridView = null" />
 
 		<Import
@@ -66,7 +64,6 @@
 
 <script>
 
-import { emit } from '@nextcloud/event-bus'
 import { useEventBusSubscriptions } from '../../shared/composables/useEventBusSubscriptions.js'
 import CreateRow from './CreateRow.vue'
 import ImportScheme from './ImportScheme.vue'
@@ -157,12 +154,12 @@ export default {
 		this.subscribeToEventBus('tables:view:reload', () => { this.reload(true) })
 		this.subscribeToEventBus('tables:view:edit', view => {
 			if (view?.view?.type === 'grid') {
-				this.gridView = { view: view.view, contextId: null }
+				this.gridView = { view: view.view }
 				return
 			}
 			this.viewToEdit = { ...view, createView: false }
 		})
-		this.subscribeToEventBus('tables:view:create-grid', payload => { this.gridView = { view: null, contextId: payload?.contextId ?? null } })
+		this.subscribeToEventBus('tables:view:create-grid', () => { this.gridView = { view: null } })
 		this.subscribeToEventBus('tables:view:create', tableInfos => {
 			this.viewToEdit = {
 				view: { tableId: tableInfos.tableId, sort: [], filter: [] },
@@ -199,9 +196,6 @@ export default {
 
 	},
 	methods: {
-		emitGridViewCreated(payload) {
-			emit('tables:view:grid-created', payload)
-		},
 		onSaveNewColumn(event) {
 			if (this.createColumnInfo?.onSave) {
 				this.createColumnInfo.onSave(event)
diff --git a/src/modules/navigation/sections/Navigation.vue b/src/modules/navigation/sections/Navigation.vue
index 5f53751c63..bfe05f41b7 100644
--- a/src/modules/navigation/sections/Navigation.vue
+++ b/src/modules/navigation/sections/Navigation.vue
@@ -58,6 +58,18 @@
 						:filter-string="filterString" :table="table" />
 				</NcAppNavigationItem>
 			</ul>
+			<ul v-if="!isLoadingSomething">
+				<NcAppNavigationCaption :name="t('tables', 'Grid views')">
+					<template #actions>
+						<NcActionButton :aria-label="t('tables', 'Create grid view')" icon="icon-add"
+							data-cy="navigationCreateGridViewIcon" @click.prevent="createGridView" />
+					</template>
+				</NcAppNavigationCaption>
+
+				<template v-for="view in getGridViews" :key="'grid-view-' + view.id">
+					<NavigationViewItem :view="view" />
+				</template>
+			</ul>
 			<ul v-if="!isLoadingSomething">
 				<NcAppNavigationCaption :name="t('tables', 'Applications')">
 					<template #actions>
@@ -156,6 +168,12 @@ export default {
 				return view.type !== 'grid' && view.isShared && view.ownership !== getCurrentUser().uid
 			}).filter(view => view.title.toLowerCase().includes(this.filterString.toLowerCase()))
 		},
+		// Grid views are pages, not data, so they get their own list instead of sitting among the tables
+		getGridViews() {
+			return this.views
+				.filter(view => view.type === 'grid' && view.title.toLowerCase().includes(this.filterString.toLowerCase()))
+				.sort((a, b) => a.title.localeCompare(b.title))
+		},
 		getFavoriteTables() {
 			return this.getAllNodes.filter(node => !node.tableId && node.favorite)
 		},
@@ -206,6 +224,9 @@ export default {
 		createContext() {
 			emit('tables:context:create')
 		},
+		createGridView() {
+			emit('tables:view:create-grid')
+		},
 		closeNav() {
 			if (window.innerWidth < 960) {
 				emit('toggle-navigation', {
diff --git a/src/store/store.js b/src/store/store.js
index 114b478a6a..0f3681c5d7 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -162,10 +162,10 @@ export const useTablesStore = defineStore('store', {
 						views = views.concat(table.views)
 					}
 				})
-				// shared views and views without a table are loaded separately and must survive this reload
+				// Shared views and grid views are loaded separately and must survive this reload;
+				// a view of a table that is gone or no longer shared is dropped as before
 				const loadedIds = new Set(views.map(view => view.id))
-				const loadedTableIds = new Set(res.data.map(table => table.id))
-				const keptViews = this.views.filter(view => !loadedIds.has(view.id) && !loadedTableIds.has(view.tableId))
+				const keptViews = this.views.filter(view => !loadedIds.has(view.id) && (view.isShared || view.type === 'grid'))
 				this.setViews([...views, ...keptViews])
 			} catch (e) {
 				displayError(e, t('tables', 'Could not load tables.'))

From 387d9c3f0db4798d7fe15c72787b49d229e87bb5 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Mon, 12 Oct 2026 16:45:39 +0200
Subject: [PATCH 3/5] refactor(grid): keep the grid draft in setup instead of
 reaching the instance

The draft, the stored grid, the unsaved-changes check and the discard
confirmation live in setup(), so the route guards use them directly and the
options API reads the same state, without getCurrentInstance().

Assisted-by: ClaudeCode:claude-opus-5-5
Signed-off-by: Remko <remko@conduction.nl>
---
 src/modules/grid/GridView.vue | 67 +++++++++++++++++------------------
 1 file changed, 33 insertions(+), 34 deletions(-)

diff --git a/src/modules/grid/GridView.vue b/src/modules/grid/GridView.vue
index 3ede7d04d7..47e9ca33b4 100644
--- a/src/modules/grid/GridView.vue
+++ b/src/modules/grid/GridView.vue
@@ -81,7 +81,7 @@ import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue
 import PencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import ViewDashboardOutline from 'vue-material-design-icons/ViewDashboardOutline.vue'
-import { getCurrentInstance } from 'vue'
+import { computed, ref } from 'vue'
 import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
 import { mapActions, mapState } from 'pinia'
 import GridCanvas from './GridCanvas.vue'
@@ -120,16 +120,42 @@ export default {
 			default: true,
 		},
 	},
-	setup() {
+	setup(props) {
+		// The draft lives here, so the route guards and the component share one implementation
+		const draftGrid = ref(null)
+		const storedGrid = computed(() => props.view.grid?.layout ? props.view.grid : emptyGrid())
+		const hasUnsavedChanges = computed(() => draftGrid.value !== null && JSON.stringify(draftGrid.value) !== JSON.stringify(cloneGrid(storedGrid.value)))
+
+		/**
+		 * Asks whether unsaved changes may be discarded.
+		 *
+		 * @return {Promise<boolean>} true when there is nothing to lose or the user agrees
+		 */
+		const confirmDiscard = async () => {
+			if (!hasUnsavedChanges.value) {
+				return true
+			}
+			try {
+				return await showConfirmation({
+					name: t('tables', 'Discard unsaved changes?'),
+					text: t('tables', 'This page has changes that are not saved yet.'),
+					labelConfirm: t('tables', 'Discard changes'),
+					labelReject: t('tables', 'Keep editing'),
+				})
+			} catch {
+				// Closing the dialog keeps the changes
+				return false
+			}
+		}
+
 		// Leaving the page, or switching to another view, asks first while the grid has unsaved changes
-		const instance = getCurrentInstance()
-		const confirmLeave = () => instance.proxy.confirmDiscard()
-		onBeforeRouteLeave(confirmLeave)
-		onBeforeRouteUpdate(confirmLeave)
+		onBeforeRouteLeave(confirmDiscard)
+		onBeforeRouteUpdate(confirmDiscard)
+
+		return { draftGrid, storedGrid, hasUnsavedChanges, confirmDiscard }
 	},
 	data() {
 		return {
-			draftGrid: null,
 			saving: false,
 			addWidgetOpen: false,
 			widgetBeingConfigured: null,
@@ -137,18 +163,12 @@ export default {
 	},
 	computed: {
 		...mapState(useTablesStore, ['widgetTypes']),
-		storedGrid() {
-			return this.view.grid?.layout ? this.view.grid : emptyGrid()
-		},
 		activeGrid() {
 			return this.draftGrid ?? this.storedGrid
 		},
 		isEditing() {
 			return this.draftGrid !== null
 		},
-		hasUnsavedChanges() {
-			return this.isEditing && JSON.stringify(this.draftGrid) !== JSON.stringify(cloneGrid(this.storedGrid))
-		},
 		widgetsById() {
 			return Object.fromEntries(this.activeGrid.widgets.map(widget => [widget.id, widget]))
 		},
@@ -166,27 +186,6 @@ export default {
 	},
 	methods: {
 		...mapActions(useTablesStore, ['updateView']),
-		/**
-		 * Asks whether unsaved changes may be discarded.
-		 *
-		 * @return {Promise<boolean>} true when there is nothing to lose or the user agrees
-		 */
-		async confirmDiscard() {
-			if (!this.hasUnsavedChanges) {
-				return true
-			}
-			try {
-				return await showConfirmation({
-					name: t('tables', 'Discard unsaved changes?'),
-					text: t('tables', 'This page has changes that are not saved yet.'),
-					labelConfirm: t('tables', 'Discard changes'),
-					labelReject: t('tables', 'Keep editing'),
-				})
-			} catch {
-				// Closing the dialog keeps the changes
-				return false
-			}
-		},
 		/**
 		 * Lets the browser warn before the tab closes or reloads with unsaved changes.
 		 *

From bf9e036c8bd3dee22394be397addd652fc2cf160 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Tue, 13 Oct 2026 08:53:05 +0200
Subject: [PATCH 4/5] fix(grid): keep applications the second navigation list
 and open the type select in the e2e test

- the grid views list now follows the applications, which the Cypress
  helper for creating an application addresses as the second list
- the Playwright spec opens the widget type select from its indicator, like
  the other specs do, instead of clicking the component root

Assisted-by: ClaudeCode:claude-opus-5-5
Signed-off-by: Remko <remko@conduction.nl>
---
 playwright/e2e/grid-view-page.spec.ts         |  5 +++--
 .../navigation/sections/Navigation.vue        | 21 ++++++++++---------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/playwright/e2e/grid-view-page.spec.ts b/playwright/e2e/grid-view-page.spec.ts
index eeb9e5009a..43055bd39f 100644
--- a/playwright/e2e/grid-view-page.spec.ts
+++ b/playwright/e2e/grid-view-page.spec.ts
@@ -80,8 +80,9 @@ test.describe('Grid view page', () => {
 		await page.locator('[data-cy="gridViewEdit"]').click()
 		await page.locator('[data-cy="gridViewAddWidget"]').click()
 		const dialog = page.locator('[data-cy="addWidgetModal"]')
-		await dialog.locator('[data-cy="addWidgetType"]').click()
-		await page.getByRole('option', { name: 'Description' }).click()
+		// An NcSelect opens from its indicator, like in the other specs
+		await dialog.locator('[data-cy="addWidgetType"] .vs__open-indicator').click()
+		await page.locator('.vs__dropdown-menu li').filter({ hasText: 'Description' }).first().click()
 		await page.keyboard.press('Escape')
 		await expect(dialog).toBeHidden()
 
diff --git a/src/modules/navigation/sections/Navigation.vue b/src/modules/navigation/sections/Navigation.vue
index bfe05f41b7..bdc1d6ac64 100644
--- a/src/modules/navigation/sections/Navigation.vue
+++ b/src/modules/navigation/sections/Navigation.vue
@@ -59,27 +59,28 @@
 				</NcAppNavigationItem>
 			</ul>
 			<ul v-if="!isLoadingSomething">
-				<NcAppNavigationCaption :name="t('tables', 'Grid views')">
+				<NcAppNavigationCaption :name="t('tables', 'Applications')">
 					<template #actions>
-						<NcActionButton :aria-label="t('tables', 'Create grid view')" icon="icon-add"
-							data-cy="navigationCreateGridViewIcon" @click.prevent="createGridView" />
+						<NcActionButton :aria-label="t('tables', 'Create application')" icon="icon-add" data-cy="createContextIcon"
+							@click.prevent="createContext" />
 					</template>
 				</NcAppNavigationCaption>
 
-				<template v-for="view in getGridViews" :key="'grid-view-' + view.id">
-					<NavigationViewItem :view="view" />
+				<template v-for="node in getAllContexts" :key="node.id">
+					<NavigationContextItem :context="node" />
 				</template>
 			</ul>
+			<!-- After the applications, which tests address as the second list -->
 			<ul v-if="!isLoadingSomething">
-				<NcAppNavigationCaption :name="t('tables', 'Applications')">
+				<NcAppNavigationCaption :name="t('tables', 'Grid views')">
 					<template #actions>
-						<NcActionButton :aria-label="t('tables', 'Create application')" icon="icon-add" data-cy="createContextIcon"
-							@click.prevent="createContext" />
+						<NcActionButton :aria-label="t('tables', 'Create grid view')" icon="icon-add"
+							data-cy="navigationCreateGridViewIcon" @click.prevent="createGridView" />
 					</template>
 				</NcAppNavigationCaption>
 
-				<template v-for="node in getAllContexts" :key="node.id">
-					<NavigationContextItem :context="node" />
+				<template v-for="view in getGridViews" :key="'grid-view-' + view.id">
+					<NavigationViewItem :view="view" />
 				</template>
 			</ul>
 

From 64e68f3823b724b181ccaad9984438d72cb331ee Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Tue, 13 Oct 2026 09:18:53 +0200
Subject: [PATCH 5/5] test(grid): close the widget dialog with its close button
 in the e2e test

Escape only reaches the type select, which keeps the focus after a pick, so the dialog stayed open.

Assisted-by: ClaudeCode:claude-opus-5-5
Signed-off-by: Remko <remko@conduction.nl>
---
 playwright/e2e/grid-view-page.spec.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/playwright/e2e/grid-view-page.spec.ts b/playwright/e2e/grid-view-page.spec.ts
index 43055bd39f..8223dac118 100644
--- a/playwright/e2e/grid-view-page.spec.ts
+++ b/playwright/e2e/grid-view-page.spec.ts
@@ -83,7 +83,8 @@ test.describe('Grid view page', () => {
 		// An NcSelect opens from its indicator, like in the other specs
 		await dialog.locator('[data-cy="addWidgetType"] .vs__open-indicator').click()
 		await page.locator('.vs__dropdown-menu li').filter({ hasText: 'Description' }).first().click()
-		await page.keyboard.press('Escape')
+		// Escape would only leave the select, which keeps the focus after the pick
+		await dialog.getByRole('button', { name: 'Close', exact: true }).click()
 		await expect(dialog).toBeHidden()
 
 		await page.locator('[data-cy="gridWidget"]').getByRole('button', { name: 'Widget actions' }).click()