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 <[email protected]>
Signed-off-by: Paul Spooren <[email protected]>

Author: aparcar

package-lock.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",

package.json

@@ -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')
 		},

src/components/Controls.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',