From e1f6cb410d63eee0c70a3b1e11f2945b1182fa2e Mon Sep 17 00:00:00 2001
From: Paul Spooren <mail@aparcar.org>
Date: Mon, 16 Mar 2026 17:50:36 +0100
Subject: [PATCH] feat: add Gantt chart view for boards

Add a timeline/Gantt view as an alternative to the kanban board view,
allowing users to visualize card schedules across time using
frappe-gantt.

- Add GanttView component with Day/Week/Month view modes
- Add Kanban/Gantt view toggle in board controls
- Store view mode preference in localStorage via Vuex
- Stack-based color coding with legend and undated cards section
- Drag-and-drop support for rescheduling cards
- Auto-fit column width to fill container on wider views
- Add frappe-gantt dependency and webpack resolve alias for its CSS

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Paul Spooren <mail@aparcar.org>
---
 package-lock.json                  |   7 +
 package.json                       |   1 +
 src/components/Controls.vue        |  26 +-
 src/components/board/Board.vue     |   7 +
 src/components/board/GanttView.vue | 514 +++++++++++++++++++++++++++++
 src/store/main.js                  |   8 +
 webpack.js                         |   3 +
 7 files changed, 565 insertions(+), 1 deletion(-)
 create mode 100644 src/components/board/GanttView.vue

diff --git a/package-lock.json b/package-lock.json
index d4a9b8fab0..2eef224caf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,7 @@
         "blueimp-md5": "^2.19.0",
         "chroma-js": "^3.2.0",
         "dompurify": "^3.3.2",
+        "frappe-gantt": "^1.2.2",
         "lodash": "^4.17.23",
         "markdown-it": "^14.1.1",
         "markdown-it-link-attributes": "^4.0.1",
@@ -13490,6 +13491,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/frappe-gantt": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/frappe-gantt/-/frappe-gantt-1.2.2.tgz",
+      "integrity": "sha512-1+uPNRa92LBIeKiZCVhJMiGIifJk5ONaoerXI8eBREXWRZGGoTJR5ATpMpsnAQcyBA6Gnq5wIht4eL+e4eHMBA==",
+      "license": "MIT"
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
diff --git a/package.json b/package.json
index 36b368314f..15eb0c9b7e 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
     "blueimp-md5": "^2.19.0",
     "chroma-js": "^3.2.0",
     "dompurify": "^3.3.2",
+    "frappe-gantt": "^1.2.2",
     "lodash": "^4.17.23",
     "markdown-it": "^14.1.1",
     "markdown-it-link-attributes": "^4.0.1",
diff --git a/src/components/Controls.vue b/src/components/Controls.vue
index ef7ee270dd..1fda52523c 100644
--- a/src/components/Controls.vue
+++ b/src/components/Controls.vue
@@ -226,6 +226,21 @@
 
 				<NcActions :aria-label="t('deck', 'View Modes')"
 					:name="t('deck', 'Toggle View Modes')">
+					<NcActionButton :class="{ 'action--active': viewMode === 'kanban' }"
+						@click="setViewMode('kanban')">
+						<template #icon>
+							<ViewColumnIcon :size="20" decorative />
+						</template>
+						{{ t('deck', 'Kanban view') }}
+					</NcActionButton>
+					<NcActionButton :class="{ 'action--active': viewMode === 'gantt' }"
+						@click="setViewMode('gantt')">
+						<template #icon>
+							<ChartGanttIcon :size="20" decorative />
+						</template>
+						{{ t('deck', 'Gantt view') }}
+					</NcActionButton>
+					<NcActionSeparator />
 					<NcActionButton @click="toggleShowArchived">
 						<template #icon>
 							<ArchiveIcon :size="20" decorative />
@@ -264,7 +279,7 @@
 <script>
 import { mapState, mapGetters } from 'vuex'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
-import { NcActions, NcActionButton, NcAvatar, NcButton, NcPopover, NcModal } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcActionSeparator, NcAvatar, NcButton, NcPopover, NcModal } from '@nextcloud/vue'
 import labelStyle from '../mixins/labelStyle.js'
 import ArchiveIcon from 'vue-material-design-icons/ArchiveOutline.vue'
 import ImageIcon from 'vue-material-design-icons/ImageMultipleOutline.vue'
@@ -273,6 +288,8 @@ import FilterOffIcon from 'vue-material-design-icons/FilterOffOutline.vue'
 import TableColumnPlusAfter from 'vue-material-design-icons/TableColumnPlusAfter.vue'
 import ArrowCollapseVerticalIcon from 'vue-material-design-icons/ArrowCollapseVertical.vue'
 import ArrowExpandVerticalIcon from 'vue-material-design-icons/ArrowExpandVertical.vue'
+import ViewColumnIcon from 'vue-material-design-icons/ViewColumn.vue'
+import ChartGanttIcon from 'vue-material-design-icons/ChartGantt.vue'
 import SessionList from './SessionList.vue'
 import { isNotifyPushEnabled } from '../sessions.js'
 import CreateNewCardCustomPicker from '../views/CreateNewCardCustomPicker.vue'
@@ -294,6 +311,9 @@ export default {
 		FilterOffIcon,
 		ArrowCollapseVerticalIcon,
 		ArrowExpandVerticalIcon,
+		ViewColumnIcon,
+		ChartGanttIcon,
+		NcActionSeparator,
 		TableColumnPlusAfter,
 		SessionList,
 	},
@@ -334,6 +354,7 @@ export default {
 			showCardCover: state => state.showCardCover,
 			searchQuery: state => state.searchQuery,
 			showArchived: state => state.showArchived,
+			viewMode: state => state.viewMode,
 		}),
 		detailsRoute() {
 			return {
@@ -406,6 +427,9 @@ export default {
 		toggleShowCardCover() {
 			this.$store.dispatch('toggleShowCardCover')
 		},
+		setViewMode(mode) {
+			this.$store.dispatch('setViewMode', mode)
+		},
 		toggleShowArchived() {
 			this.$store.dispatch('toggleShowArchived')
 		},
diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue
index 3b971fb479..ced0f5ec4c 100644
--- a/src/components/board/Board.vue
+++ b/src/components/board/Board.vue
@@ -46,6 +46,10 @@
 					</form>
 				</template>
 			</NcEmptyContent>
+			<GanttView v-else-if="!isEmpty && !loading && viewMode === 'gantt'"
+				key="gantt"
+				:board="board"
+				:stacks="stacksByBoard" />
 			<div v-else-if="!isEmpty && !loading"
 				key="board"
 				ref="board"
@@ -88,6 +92,7 @@ import Controls from '../Controls.vue'
 import DeckIcon from '../icons/DeckIcon.vue'
 import CheckIcon from 'vue-material-design-icons/Check.vue'
 import Stack from './Stack.vue'
+import GanttView from './GanttView.vue'
 import { NcEmptyContent, NcModal, NcButton, NcTextField, NcLoadingIcon } from '@nextcloud/vue'
 import GlobalSearchResults from '../search/GlobalSearchResults.vue'
 import { showError } from '../../helpers/errors.js'
@@ -102,6 +107,7 @@ export default {
 		DeckIcon,
 		Draggable,
 		Stack,
+		GanttView,
 		NcEmptyContent,
 		NcModal,
 		NcTextField,
@@ -134,6 +140,7 @@ export default {
 			isFullApp: state => state.isFullApp,
 			board: state => state.currentBoard,
 			showArchived: state => state.showArchived,
+			viewMode: state => state.viewMode,
 		}),
 		...mapGetters([
 			'canEdit',
diff --git a/src/components/board/GanttView.vue b/src/components/board/GanttView.vue
new file mode 100644
index 0000000000..c3de968819
--- /dev/null
+++ b/src/components/board/GanttView.vue
@@ -0,0 +1,514 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<div class="gantt-wrapper">
+		<div class="gantt-toolbar">
+			<NcButton v-for="mode in viewModes"
+				:key="mode.value"
+				:type="currentViewMode === mode.value ? 'primary' : 'secondary'"
+				@click="changeViewMode(mode.value)">
+				{{ mode.label }}
+			</NcButton>
+		</div>
+
+		<div v-if="ganttTasks.length > 0" ref="ganttContainer" class="gantt-chart" />
+
+		<NcEmptyContent v-if="!ganttTasks.length && !undatedCards.length">
+			<template #icon>
+				<ChartGanttIcon />
+			</template>
+			<template #name>
+				{{ t('deck', 'No cards with dates') }}
+			</template>
+			<template #description>
+				{{ t('deck', 'Set a start date and due date on your cards to see them on the Gantt chart') }}
+			</template>
+		</NcEmptyContent>
+
+		<div v-if="undatedCards.length" class="gantt-undated">
+			<NcButton type="tertiary" @click="showUndated = !showUndated">
+				<template #icon>
+					<ChevronDown v-if="showUndated" :size="20" />
+					<ChevronRight v-else :size="20" />
+				</template>
+				{{ t('deck', 'Cards without dates ({count})', { count: undatedCards.length }) }}
+			</NcButton>
+			<div v-if="showUndated" class="gantt-undated__list">
+				<div v-for="card in undatedCards"
+					:key="card.id"
+					class="gantt-undated__card"
+					@click="openCard(card)">
+					<span class="gantt-undated__stack-dot" :style="{ backgroundColor: getStackColor(card.stackId) }" />
+					<span class="gantt-undated__title">{{ card.title }}</span>
+					<span class="gantt-undated__stack-name">{{ getStackTitle(card.stackId) }}</span>
+				</div>
+			</div>
+		</div>
+
+		<div v-if="stacksByBoard.length" class="gantt-legend">
+			<span v-for="stack in stacksByBoard"
+				:key="stack.id"
+				class="gantt-legend__item">
+				<span class="gantt-legend__dot" :style="{ backgroundColor: getStackColor(stack.id) }" />
+				{{ stack.title }}
+			</span>
+		</div>
+	</div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import Gantt from 'frappe-gantt'
+import 'frappe-gantt/dist/frappe-gantt.css' // eslint-disable-line
+import { NcButton, NcEmptyContent } from '@nextcloud/vue'
+import ChartGanttIcon from 'vue-material-design-icons/ChartGantt.vue'
+import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
+import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
+
+const STACK_COLORS = [
+	'#0082c9', '#4caf50', '#ff9800', '#e91e63',
+	'#9c27b0', '#00bcd4', '#795548', '#607d8b',
+	'#3f51b5', '#8bc34a', '#ff5722', '#009688',
+]
+
+const GANTT_VIEW_MODES = [
+	{
+		name: 'Day',
+		padding: '14d',
+		step: '1d',
+		column_width: 38,
+		date_format: 'YYYY-MM-DD',
+		lower_text(date, last, lang) {
+			if (last && date.getDate() === last.getDate()) return ''
+			const day = date.getDate()
+			const weekday = new Intl.DateTimeFormat(lang || 'en', { weekday: 'short' }).format(date)
+			return day + '\n' + weekday
+		},
+		upper_text(date, last, lang) {
+			if (last && date.getMonth() === last.getMonth()) return ''
+			return new Intl.DateTimeFormat(lang || 'en', { month: 'long', year: 'numeric' }).format(date)
+		},
+		thick_line(date) {
+			return date.getDay() === 1
+		},
+	},
+	{
+		name: 'Week',
+		padding: '1m',
+		step: '7d',
+		column_width: 140,
+		date_format: 'YYYY-MM-DD',
+		lower_text(date, last, lang) {
+			const end = new Date(date)
+			end.setDate(end.getDate() + 6)
+			const sameMonth = date.getMonth() === end.getMonth()
+			const fmt = new Intl.DateTimeFormat(lang || 'en', { day: 'numeric', month: 'short' })
+			const fmtDay = new Intl.DateTimeFormat(lang || 'en', { day: 'numeric' })
+			return fmt.format(date) + ' – ' + (sameMonth ? fmtDay.format(end) : fmt.format(end))
+		},
+		upper_text(date, last, lang) {
+			if (last && date.getMonth() === last.getMonth()) return ''
+			return new Intl.DateTimeFormat(lang || 'en', { month: 'long', year: 'numeric' }).format(date)
+		},
+		thick_line(date) {
+			return date.getDate() >= 1 && date.getDate() <= 7
+		},
+		upper_text_frequency: 4,
+	},
+	{
+		name: 'Month',
+		padding: '2m',
+		step: '1m',
+		column_width: 120,
+		date_format: 'YYYY-MM',
+		lower_text: 'MMMM',
+		upper_text(date, last, lang) {
+			if (last && date.getFullYear() === last.getFullYear()) return ''
+			return new Intl.DateTimeFormat(lang || 'en', { year: 'numeric' }).format(date)
+		},
+		thick_line(date) {
+			return date.getMonth() % 3 === 0
+		},
+		snap_at: '7d',
+	},
+]
+
+export default {
+	name: 'GanttView',
+	components: {
+		NcButton,
+		NcEmptyContent,
+		ChartGanttIcon,
+		ChevronDown,
+		ChevronRight,
+	},
+	props: {
+		board: {
+			type: Object,
+			required: true,
+		},
+		stacks: {
+			type: Array,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			ganttInstance: null,
+			currentViewMode: 'Day',
+			isDragging: false,
+			showUndated: false,
+			viewModes: [
+				{ value: 'Day', label: t('deck', 'Days') },
+				{ value: 'Week', label: t('deck', 'Weeks') },
+				{ value: 'Month', label: t('deck', 'Months') },
+			],
+		}
+	},
+	computed: {
+		...mapState({
+			filter: state => state.filter,
+		}),
+		stacksByBoard() {
+			return this.stacks || []
+		},
+		allCards() {
+			const cards = []
+			for (const stack of this.stacksByBoard) {
+				const stackCards = this.$store.getters.cardsByStack(stack.id)
+				cards.push(...stackCards)
+			}
+			return cards
+		},
+		ganttTasks() {
+			return this.allCards
+				.filter(card => card.duedate || card.startdate)
+				.map(card => {
+					let start = card.startdate ? new Date(card.startdate) : null
+					let end = card.duedate ? new Date(card.duedate) : null
+
+					if (!start && end) {
+						start = new Date(end)
+						start.setDate(start.getDate() - 1)
+					}
+					if (start && !end) {
+						end = new Date(start)
+						end.setDate(end.getDate() + 1)
+					}
+
+					// Ensure start <= end
+					if (start > end) {
+						const tmp = start
+						start = end
+						end = tmp
+					}
+
+					const stackIdx = this.stacksByBoard.findIndex(s => s.id === card.stackId)
+
+					return {
+						id: String(card.id),
+						name: card.title,
+						start,
+						end,
+						progress: card.done ? 100 : 0,
+						custom_class: 'gantt-bar--color-' + (stackIdx % STACK_COLORS.length),
+						_card: card,
+					}
+				})
+		},
+		undatedCards() {
+			return this.allCards.filter(card => !card.duedate && !card.startdate)
+		},
+	},
+	watch: {
+		ganttTasks: {
+			deep: true,
+			handler(tasks) {
+				if (!this.isDragging && this.ganttInstance) {
+					this.ganttInstance.refresh(JSON.parse(JSON.stringify(tasks)))
+				}
+			},
+		},
+		currentViewMode(mode) {
+			if (this.ganttInstance) {
+				this.ganttInstance.change_view_mode(mode)
+				this.$nextTick(() => this.fitColumnsToWidth())
+			}
+		},
+	},
+	mounted() {
+		this._onMouseUp = () => {
+			if (this._pendingChange) {
+				const { task, start, end } = this._pendingChange
+				this._pendingChange = null
+				this.onDateChange(task, start, end)
+			}
+		}
+		document.addEventListener('mouseup', this._onMouseUp)
+		this.$nextTick(() => this.renderGantt())
+	},
+	beforeDestroy() {
+		document.removeEventListener('mouseup', this._onMouseUp)
+		this.ganttInstance = null
+	},
+	methods: {
+		getStackColor(stackId) {
+			const idx = this.stacksByBoard.findIndex(s => s.id === stackId)
+			return STACK_COLORS[idx % STACK_COLORS.length] || STACK_COLORS[0]
+		},
+		getStackTitle(stackId) {
+			const stack = this.stacksByBoard.find(s => s.id === stackId)
+			return stack ? stack.title : ''
+		},
+		changeViewMode(mode) {
+			this.currentViewMode = mode
+		},
+		openCard(card) {
+			this.$router.push({
+				name: 'card',
+				params: {
+					id: this.board.id,
+					cardId: card.id,
+				},
+			})
+		},
+		renderGantt() {
+			if (!this.$refs.ganttContainer || this.ganttTasks.length === 0) {
+				return
+			}
+
+			this.$refs.ganttContainer.innerHTML = ''
+
+			this.ganttInstance = new Gantt(this.$refs.ganttContainer, JSON.parse(JSON.stringify(this.ganttTasks)), {
+				view_mode: this.currentViewMode,
+				view_modes: GANTT_VIEW_MODES,
+				bar_height: 28,
+				lower_header_height: 40,
+				padding: 20,
+				scroll_to: 'today',
+				today_button: true,
+				infinite_padding: false,
+				on_click: (task) => {
+					this.openCard(task._card)
+				},
+				on_date_change: (task, start, end) => {
+					this.isDragging = true
+					this._pendingChange = { task, start, end }
+				},
+			})
+
+			this.fitColumnsToWidth()
+		},
+		fitColumnsToWidth() {
+			const gantt = this.ganttInstance
+			if (!gantt?.dates?.length) return
+			const containerWidth = this.$refs.ganttContainer.clientWidth
+			const contentWidth = gantt.dates.length * gantt.config.column_width
+			if (contentWidth < containerWidth) {
+				const fitted = Math.floor(containerWidth / gantt.dates.length)
+				gantt.config.view_mode.column_width = fitted
+				gantt.change_view_mode(gantt.config.view_mode.name, true)
+			}
+		},
+		async onDateChange(task, start, end) {
+			const card = task._card
+			if (!card) return
+
+			try {
+				await this.$store.dispatch('updateCardStartDate', {
+					...card,
+					startdate: new Date(start).toISOString(),
+				})
+				await this.$store.dispatch('updateCardDue', {
+					...card,
+					duedate: new Date(end).toISOString(),
+				})
+			} finally {
+				this.isDragging = false
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.gantt-wrapper {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	overflow: hidden;
+	padding: 0 var(--default-grid-baseline);
+}
+
+.gantt-toolbar {
+	flex: 0 0 auto;
+	display: flex;
+	gap: calc(var(--default-grid-baseline) * 2);
+	padding: calc(var(--default-grid-baseline) * 2);
+}
+
+.gantt-chart {
+	flex: 1 1 0;
+	min-height: 0;
+	overflow-x: auto;
+	overflow-y: hidden;
+}
+
+.gantt-undated {
+	flex: 0 0 auto;
+	padding: calc(var(--default-grid-baseline) * 2);
+	border-top: 1px solid var(--color-border);
+}
+
+.gantt-undated__list {
+	max-height: 200px;
+	overflow-y: auto;
+}
+
+.gantt-undated__card {
+	display: flex;
+	align-items: center;
+	gap: calc(var(--default-grid-baseline) * 2);
+	padding: calc(var(--default-grid-baseline) * 2);
+	cursor: pointer;
+	border-radius: var(--border-radius);
+
+	&:hover {
+		background: var(--color-background-hover);
+	}
+}
+
+.gantt-undated__stack-dot {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	flex-shrink: 0;
+}
+
+.gantt-undated__title {
+	flex-grow: 1;
+}
+
+.gantt-undated__stack-name {
+	color: var(--color-text-maxcontrast);
+	font-size: 0.9em;
+}
+
+.gantt-legend {
+	flex: 0 0 auto;
+	display: flex;
+	flex-wrap: wrap;
+	gap: calc(var(--default-grid-baseline) * 3);
+	padding: calc(var(--default-grid-baseline) * 2);
+	border-top: 1px solid var(--color-border);
+}
+
+.gantt-legend__item {
+	display: flex;
+	align-items: center;
+	gap: var(--default-grid-baseline);
+	font-size: 0.9em;
+}
+
+.gantt-legend__dot {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+}
+</style>
+
+<style lang="scss">
+/* Map frappe-gantt CSS variables to Nextcloud theme variables */
+.gantt-chart .gantt-container {
+	/* Grid and background */
+	--g-row-color: var(--color-main-background);
+	--g-header-background: var(--color-background-dark);
+	--g-border-color: var(--color-border);
+	--g-row-border-color: var(--color-border);
+	--g-tick-color: var(--color-border);
+	--g-tick-color-thick: var(--color-border);
+	--g-weekend-highlight-color: var(--color-background-hover);
+
+	/* Text */
+	--g-text-dark: var(--color-main-text);
+	--g-text-light: var(--color-main-text);
+	--g-text-muted: var(--color-text-maxcontrast);
+	--g-weekend-label-color: var(--color-text-maxcontrast);
+
+	/* Today highlight */
+	--g-today-highlight: var(--color-primary-element);
+
+	/* Actions / buttons */
+	--g-actions-background: var(--color-background-dark);
+
+	/* Bars */
+	--g-bar-color: var(--color-primary-element-light);
+	--g-progress-color: var(--color-primary-element);
+	--g-handle-color: var(--color-primary-element);
+
+	/* Popup */
+	--g-popup-actions: var(--color-main-background);
+
+	/* Prevent vertical scrollbar */
+	overflow-y: hidden !important;
+}
+
+/* Move the Today button up into the upper header area */
+.gantt-chart .gantt-container .side-header {
+	padding-top: 2px;
+
+	button {
+		color: var(--color-main-text);
+		border-color: var(--color-border);
+	}
+}
+
+/* Popup theming */
+.gantt-chart .gantt-container .popup-wrapper {
+	background: var(--color-main-background);
+	border: 1px solid var(--color-border);
+
+	.pointer {
+		border-color: var(--color-main-background) transparent transparent transparent;
+	}
+	.title-container .title {
+		color: var(--color-main-text);
+	}
+	.title-container .subtitle {
+		color: var(--color-text-maxcontrast);
+	}
+}
+
+/* Bar handle visibility */
+.gantt-chart .gantt {
+	.handle {
+		visibility: hidden;
+	}
+	.bar-wrapper:hover .handle {
+		visibility: visible;
+	}
+
+	// Stack color classes — bar fill and progress colors
+	@each $color in ('#0082c9', '#4caf50', '#ff9800', '#e91e63',
+		'#9c27b0', '#00bcd4', '#795548', '#607d8b',
+		'#3f51b5', '#8bc34a', '#ff5722', '#009688') {
+		$i: index(('#0082c9', '#4caf50', '#ff9800', '#e91e63',
+			'#9c27b0', '#00bcd4', '#795548', '#607d8b',
+			'#3f51b5', '#8bc34a', '#ff5722', '#009688'), $color) - 1;
+
+		.bar-wrapper.gantt-bar--color-#{$i} {
+			.bar {
+				fill: #{$color}33 !important;
+				stroke: #{$color} !important;
+				stroke-width: 1;
+			}
+			.bar-progress {
+				fill: #{$color} !important;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/store/main.js b/src/store/main.js
index 9a45065b0e..671af7eb15 100644
--- a/src/store/main.js
+++ b/src/store/main.js
@@ -64,6 +64,7 @@ export default function storeFactory() {
 			activityLoadMore: true,
 			filter: { tags: [], users: [], due: '', unassigned: false, completed: 'both' },
 			shortcutLock: false,
+			viewMode: localStorage.getItem('deck.viewMode') || 'kanban',
 		},
 		getters: {
 			config: state => (key) => {
@@ -304,6 +305,10 @@ export default function storeFactory() {
 			TOGGLE_SHORTCUT_LOCK(state, lock) {
 				state.shortcutLock = lock
 			},
+			setViewMode(state, mode) {
+				state.viewMode = mode
+				localStorage.setItem('deck.viewMode', mode)
+			},
 		},
 		actions: {
 			setFullApp({ commit }, isFullApp) {
@@ -533,6 +538,9 @@ export default function storeFactory() {
 			toggleShortcutLock({ commit }, lock) {
 				commit('TOGGLE_SHORTCUT_LOCK', lock)
 			},
+			setViewMode({ commit }, mode) {
+				commit('setViewMode', mode)
+			},
 		},
 	})
 }
diff --git a/webpack.js b/webpack.js
index 2b32457bba..78b144c64c 100644
--- a/webpack.js
+++ b/webpack.js
@@ -33,4 +33,7 @@ if (isDevServer) {
 // Workaround for https://github.com/nextcloud/webpack-vue-config/pull/432 causing problems with nextcloud-vue-collections
 webpackConfig.resolve.alias = {}
 
+// Allow importing frappe-gantt CSS (not exposed via package.json exports field)
+webpackConfig.resolve.alias['frappe-gantt/dist/frappe-gantt.css'] = path.resolve(__dirname, 'node_modules/frappe-gantt/dist/frappe-gantt.css')
+
 module.exports = webpackConfig