From 9af5aad7ed137c2b3ea4becab4e22c1be1e1ac70 Mon Sep 17 00:00:00 2001
From: grnd-alt <git@belakkaf.net>
Date: Tue, 4 Aug 2026 11:35:56 +0200
Subject: [PATCH 1/2] refactor(pinia): move board logic to boardStore

Signed-off-by: grnd-alt <git@belakkaf.net>
---
 src/App.vue                                   |  10 +-
 src/CardMoveDialog.vue                        |   6 +-
 src/components/AttachmentDragAndDrop.vue      |   5 +-
 src/components/Controls.vue                   |  35 +-
 src/components/KeyboardShortcuts.vue          |   7 +-
 src/components/board/Board.vue                |  22 +-
 src/components/board/BoardSidebar.vue         |  10 +-
 src/components/board/GanttView.vue            |   4 +-
 src/components/board/SharingTabSidebar.vue    |  26 +-
 src/components/board/Stack.vue                |   8 +-
 src/components/board/TagsTabSidebar.vue       |  16 +-
 src/components/boards/Boards.vue              |   5 +-
 src/components/card/AttachmentList.vue        |   8 +-
 src/components/card/CardSidebar.vue           |   6 +-
 .../card/CardSidebarTabComments.vue           |   7 +-
 src/components/card/CardSidebarTabDetails.vue |  12 +-
 src/components/card/CommentForm.vue           |   7 +-
 src/components/cards/CardCover.vue            |   2 +-
 src/components/cards/CardItem.vue             |  24 +-
 src/components/cards/CardMenuEntries.vue      |  21 +-
 src/components/navigation/AppNavigation.vue   |   5 +-
 .../navigation/AppNavigationAddBoard.vue      |  10 +-
 .../navigation/AppNavigationBoard.vue         |  30 +-
 .../navigation/AppNavigationImportBoard.vue   |   3 +-
 src/components/search/GlobalSearchResults.vue |   3 +-
 src/main.js                                   |   3 +-
 src/services/StackApi.js                      |   3 -
 src/sessions.js                               |  13 +-
 src/store/main.js                             | 388 +-----------------
 src/stores/attachment.js                      |  13 +-
 src/stores/board.js                           | 309 ++++++++++++++
 src/stores/card.js                            |  18 +-
 src/stores/overview.js                        |   3 +-
 src/stores/stack.js                           |   5 +-
 34 files changed, 496 insertions(+), 551 deletions(-)
 create mode 100644 src/stores/board.js

diff --git a/src/App.vue b/src/App.vue
index 881f75ced9..c7f91f0ca7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState as mapStateVuex } from 'vuex'
 import AppNavigation from './components/navigation/AppNavigation.vue'
 import KeyboardShortcuts from './components/KeyboardShortcuts.vue'
 import { NcModal, NcContent, NcAppContent, isMobile } from '@nextcloud/vue'
@@ -38,6 +38,8 @@ import { BoardApi } from './services/BoardApi.js'
 import { emit, subscribe } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
 import CardMoveDialog from './CardMoveDialog.vue'
+import { useBoardStore } from './stores/board.js'
+import { mapState } from 'pinia'
 
 const boardApi = new BoardApi()
 
@@ -77,10 +79,10 @@ export default {
 		}
 	},
 	computed: {
-		...mapState({
+		...mapState(useBoardStore, ['currentBoard']),
+		...mapStateVuex({
 			navShown: state => state.navShown,
 			sidebarShownState: state => state.sidebarShown,
-			currentBoard: state => state.currentBoard,
 		}),
 		// TODO: properly handle sidebar showing for route subview and board sidebar
 		sidebarRouterView() {
@@ -102,7 +104,7 @@ export default {
 	created() {
 		const initialState = loadState('deck', 'initialBoards', null)
 		if (initialState !== null) {
-			this.$store.dispatch('loadBoards')
+			useBoardStore().loadBoards()
 		}
 		this.$store.dispatch('loadSharees')
 	},
diff --git a/src/CardMoveDialog.vue b/src/CardMoveDialog.vue
index 05f4779f45..b0e2d2d7ff 100644
--- a/src/CardMoveDialog.vue
+++ b/src/CardMoveDialog.vue
@@ -37,10 +37,10 @@ import { NcDialog, NcSelect, NcButton } from '@nextcloud/vue'
 import { generateOcsUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
-import { mapGetters } from 'vuex'
 import { mapActions, mapState } from 'pinia'
 import { useStackStore } from './stores/stack.js'
 import { useCardStore } from './stores/card.js'
+import { useBoardStore } from './stores/board.js'
 
 export default {
 	name: 'CardMoveDialog',
@@ -55,10 +55,10 @@ export default {
 		}
 	},
 	computed: {
-		...mapGetters(['boardById']),
 		...mapState(useStackStore, ['stackById']),
+		...mapState(useBoardStore, ['boardById', 'boards']),
 		activeBoards() {
-			return this.$store.getters.boards.filter((item) => item.deletedAt === 0 && item.archived === false)
+			return this.boards.filter((item) => item.deletedAt === 0 && item.archived === false)
 		},
 		isBoardAndStackChoosen() {
 			return !(this.selectedBoard === '' || this.selectedStack === '')
diff --git a/src/components/AttachmentDragAndDrop.vue b/src/components/AttachmentDragAndDrop.vue
index 7794ca8ce4..127cfa0651 100644
--- a/src/components/AttachmentDragAndDrop.vue
+++ b/src/components/AttachmentDragAndDrop.vue
@@ -48,6 +48,8 @@
 import { NcModal } from '@nextcloud/vue'
 import attachmentUpload from '../mixins/attachmentUpload.js'
 import { loadState } from '@nextcloud/initial-state'
+import { mapState } from 'pinia'
+import { useBoardStore } from '../stores/board.js'
 
 const maxUploadSizeState = loadState('deck', 'maxUploadSize', -1)
 
@@ -71,8 +73,9 @@ export default {
 		}
 	},
 	computed: {
+		...mapState(useBoardStore, ['canEdit']),
 		isReadOnly() {
-			return !this.$store.getters.canEdit
+			return !this.canEdit
 		},
 		dropHintText() {
 			if (this.isReadOnly) {
diff --git a/src/components/Controls.vue b/src/components/Controls.vue
index 81c39cfc74..c449af0e2a 100644
--- a/src/components/Controls.vue
+++ b/src/components/Controls.vue
@@ -249,7 +249,7 @@
 						{{ t('deck', 'Gantt view') }}
 					</NcActionButton>
 					<NcActionSeparator />
-					<NcActionButton @click="toggleShowArchived">
+					<NcActionButton @click="() => toggleShowArchived()">
 						<template #icon>
 							<ArchiveIcon :size="20" decorative />
 						</template>
@@ -285,7 +285,7 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from 'vuex'
+import { mapState as mapStateVuex } from 'vuex'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { NcActions, NcActionButton, NcActionSeparator, NcAvatar, NcButton, NcPopover, NcModal, NcTextField } from '@nextcloud/vue'
 import labelStyle from '../mixins/labelStyle.js'
@@ -302,8 +302,9 @@ import SessionList from './SessionList.vue'
 import { isNotifyPushEnabled } from '../sessions.js'
 import CreateNewCardCustomPicker from '../views/CreateNewCardCustomPicker.vue'
 import { getCurrentUser } from '@nextcloud/auth'
-import { mapActions } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 import { useStackStore } from '../stores/stack.js'
+import { useBoardStore } from '../stores/board.js'
 
 export default {
 	name: 'Controls',
@@ -368,17 +369,18 @@ export default {
 	},
 
 	computed: {
-		...mapGetters([
+		...mapState(useBoardStore, [
 			'canEdit',
 			'canManage',
 			'viewMode',
+			'showArchived',
 		]),
-		...mapState({
+		...mapStateVuex({
 			isFullApp: state => state.isFullApp,
+			navShown: state => state.navShown,
 			compactMode: state => state.compactMode,
 			showCardCover: state => state.showCardCover,
 			searchQuery: state => state.searchQuery,
-			showArchived: state => state.showArchived,
 		}),
 		detailsRoute() {
 			return {
@@ -422,26 +424,27 @@ export default {
 		this.setPageTitle('')
 	},
 	methods: {
+		...mapActions(useBoardStore, { setViewMode: 'setViewMode', toggleShowArchived: 'toggleShowArchived', setFilterInStore: 'setFilterInStore' }),
 		...mapActions(useStackStore, ['createStack']),
 		beforeSetFilter(e) {
 			if (this.filter.due === e.target.value) {
 				this.filter.due = ''
-				this.$store.dispatch('setFilter', { ...this.filter })
+				this.setFilterInStore({ ...this.filter })
 			}
 			if (e.target.value === 'unassigned') {
 				this.filter.users = []
-				this.$store.dispatch('setFilter', { ...this.filter })
+				this.setFilterInStore({ ...this.filter })
 			} else {
 				this.filter.completed = 'both'
-				this.$store.dispatch('setFilter', { ...this.filter })
+				this.setFilterInStore({ ...this.filter })
 			}
-			this.$store.dispatch('setFilter', { ...this.filter })
+			this.setFilterInStore({ ...this.filter })
 		},
 		setFilter() {
 			if (this.filter.users.length > 0) {
 				this.filter.unassigned = false
 			}
-			this.$nextTick(() => this.$store.dispatch('setFilter', { ...this.filter }))
+			this.$nextTick(() => this.setFilterInStore({ ...this.filter }))
 		},
 		setSearchQuery(value) {
 			this.$store.commit('setSearchQuery', value)
@@ -450,7 +453,7 @@ export default {
 			this.$store.commit('setSearchQuery', '')
 		},
 		toggleNav() {
-			this.$store.dispatch('toggleNav')
+			this.$store.dispatch('toggleNav', !this.navShown)
 		},
 		toggleCompactMode() {
 			this.$store.dispatch('toggleCompactMode')
@@ -458,12 +461,6 @@ export default {
 		toggleShowCardCover() {
 			this.$store.dispatch('toggleShowCardCover')
 		},
-		setViewMode(mode) {
-			this.$store.dispatch('setViewMode', mode)
-		},
-		toggleShowArchived() {
-			this.$store.dispatch('toggleShowArchived')
-		},
 		addNewStack() {
 			this.stack = { title: this.newStackTitle }
 			this.createStack(this.stack)
@@ -486,7 +483,7 @@ export default {
 		},
 		clearFilter() {
 			const filterReset = { tags: [], users: [], due: '', unassigned: false, completed: 'both' }
-			this.$store.dispatch('setFilter', { ...filterReset })
+			this.setFilterInStore({ ...filterReset })
 			this.filter = filterReset
 		},
 		clickShowAddCardModel() {
diff --git a/src/components/KeyboardShortcuts.vue b/src/components/KeyboardShortcuts.vue
index 0433ceb9d7..6f47089a7f 100644
--- a/src/components/KeyboardShortcuts.vue
+++ b/src/components/KeyboardShortcuts.vue
@@ -19,10 +19,11 @@
 <script>
 import DueDateSelector from './card/DueDateSelector.vue'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 import TagSelector from './card/TagSelector.vue'
 import AssignmentSelector from './card/AssignmentSelector.vue'
 import CardItem from './cards/CardItem.vue'
+import { useBoardStore } from '../stores/board.js'
 
 export default {
 	name: 'KeyboardShortcuts',
@@ -41,8 +42,8 @@ export default {
 		}
 	},
 	computed: {
-		...mapState({
-			board: state => state.currentBoard,
+		...mapState(useBoardStore, {
+			board: 'currentBoard',
 		}),
 	},
 	created() {
diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue
index 0a76e9e191..1e08a15254 100644
--- a/src/components/board/Board.vue
+++ b/src/components/board/Board.vue
@@ -90,7 +90,7 @@
 
 <script>
 import { Container, Draggable } from 'vue-smooth-dnd'
-import { mapState as mapStateVuex, mapGetters } from 'vuex'
+import { mapState as mapStateVuex } from 'vuex'
 import Controls from '../Controls.vue'
 import DeckIcon from '../icons/DeckIcon.vue'
 import CheckIcon from 'vue-material-design-icons/Check.vue'
@@ -104,6 +104,7 @@ import CardSidebar from '../card/CardSidebar.vue'
 import { mapActions, mapState } from 'pinia'
 import { useStackStore } from '../../stores/stack.js'
 import { useCardStore } from '../../stores/card.js'
+import { useBoardStore } from '../../stores/board.js'
 export default {
 	name: 'Board',
 	components: {
@@ -144,16 +145,16 @@ export default {
 	computed: {
 		...mapState(useStackStore, ['stacksByBoard']),
 		...mapState(useCardStore, ['cardById']),
+		...mapState(useBoardStore, {
+			board: 'currentBoard',
+			showArchived: 'showArchived',
+			canEdit: 'canEdit',
+			canManage: 'canManage',
+			viewMode: 'viewMode',
+		}),
 		...mapStateVuex({
 			isFullApp: state => state.isFullApp,
-			board: state => state.currentBoard,
-			showArchived: state => state.showArchived,
 		}),
-		...mapGetters([
-			'canEdit',
-			'canManage',
-			'viewMode',
-		]),
 		stacks() {
 			return this.board?.id ? this.stacksByBoard(this.board.id) : []
 		},
@@ -194,11 +195,12 @@ export default {
 		this.session?.close()
 	},
 	methods: {
+		...mapActions(useBoardStore, ['loadBoardById', 'toggleShowArchived']),
 		...mapActions(useStackStore, ['loadStacks', 'loadArchivedStacks', 'createStack', 'orderStack']),
 		async fetchData() {
 			this.loading = true
 			try {
-				await this.$store.dispatch('loadBoardById', this.id)
+				await this.loadBoardById(this.id)
 				await this.loadStacks(this.id)
 
 				const routeCardId = this.$route?.params?.cardId ? parseInt(this.$route.params.cardId) : null
@@ -207,7 +209,7 @@ export default {
 					await this.loadArchivedStacks(this.id)
 
 					if (this.cardById(routeCardId)) {
-						this.$store.commit('toggleShowArchived', true)
+						this.toggleShowArchived(true)
 					}
 				}
 
diff --git a/src/components/board/BoardSidebar.vue b/src/components/board/BoardSidebar.vue
index a869ea0c1e..b4fa18387f 100644
--- a/src/components/board/BoardSidebar.vue
+++ b/src/components/board/BoardSidebar.vue
@@ -49,7 +49,7 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from 'vuex'
+import { mapState } from 'pinia'
 import SharingTabSidebar from './SharingTabSidebar.vue'
 import TagsTabSidebar from './TagsTabSidebar.vue'
 import DeletedTabSidebar from './DeletedTabSidebar.vue'
@@ -59,6 +59,7 @@ import ActivityIcon from 'vue-material-design-icons/LightningBolt.vue'
 import SharingIcon from 'vue-material-design-icons/ShareVariantOutline.vue'
 import TagsIcon from 'vue-material-design-icons/TagMultipleOutline.vue'
 import TrashIcon from 'vue-material-design-icons/TrashCanOutline.vue'
+import { useBoardStore } from '../../stores/board.js'
 const capabilities = window.OC.getCapabilities()
 
 export default {
@@ -87,11 +88,10 @@ export default {
 		}
 	},
 	computed: {
-		...mapState({
-			board: state => state.currentBoard,
-			labels: state => state.labels,
+		...mapState(useBoardStore, {
+			board: 'currentBoard',
+			canEdit: 'canEdit',
 		}),
-		...mapGetters(['canEdit']),
 	},
 	methods: {
 		closeSidebar() {
diff --git a/src/components/board/GanttView.vue b/src/components/board/GanttView.vue
index 6afd783d00..0f1ee76506 100644
--- a/src/components/board/GanttView.vue
+++ b/src/components/board/GanttView.vue
@@ -59,7 +59,6 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
 import { mapActions, mapState } from 'pinia'
 import Gantt from 'frappe-gantt'
 import 'frappe-gantt/dist/frappe-gantt.css' // eslint-disable-line
@@ -68,6 +67,7 @@ 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'
 import { useCardStore } from '../../stores/card.js'
+import { useBoardStore } from '../../stores/board.js'
 
 const STACK_COLORS = [
 	'#0082c9', '#4caf50', '#ff9800', '#e91e63',
@@ -200,7 +200,7 @@ export default {
 		}
 	},
 	computed: {
-		...mapGetters(['canEdit']),
+		...mapState(useBoardStore, ['canEdit']),
 		...mapState(useCardStore, ['cardsByStack']),
 		partitionedCards() {
 			const undatedCards = []
diff --git a/src/components/board/SharingTabSidebar.vue b/src/components/board/SharingTabSidebar.vue
index 59d7088256..b7dcd846a9 100644
--- a/src/components/board/SharingTabSidebar.vue
+++ b/src/components/board/SharingTabSidebar.vue
@@ -80,11 +80,13 @@
 
 <script>
 import { NcCollectionList, NcAvatar, NcActions, NcActionButton, NcActionCheckbox, NcRelatedResourcesPanel, NcSelectUsers } from '@nextcloud/vue'
-import { mapGetters, mapState } from 'vuex'
+import { mapState as mapStateVuex } from 'vuex'
+import { mapActions, mapState } from 'pinia'
 import { getCurrentUser } from '@nextcloud/auth'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
 import debounce from 'lodash/debounce.js'
+import { useBoardStore } from '../../stores/board.js'
 const SOURCE_TO_SHARE_TYPE = {
 	users: 0,
 	groups: 1,
@@ -122,10 +124,10 @@ export default {
 		}
 	},
 	computed: {
-		...mapState([
+		...mapStateVuex([
 			'sharees',
 		]),
-		...mapGetters([
+		...mapState(useBoardStore, [
 			'canEdit',
 			'canManage',
 			'canShare',
@@ -177,6 +179,12 @@ export default {
 		this.asyncFind('', () => {})
 	},
 	methods: {
+		...mapActions(useBoardStore, [
+			'addAclToCurrentBoard',
+			'updateAclFromCurrentBoard',
+			'deleteAclFromCurrentBoard',
+			'transferOwnership',
+		]),
 		debouncedFind: debounce(async function(query) {
 			this.isSearching = true
 			await this.$store.dispatch('loadSharees', query)
@@ -197,7 +205,7 @@ export default {
 			}
 			this.isLoading = true
 			try {
-				await this.$store.dispatch('addAclToCurrentBoard', this.addAclForAPI)
+				await this.addAclToCurrentBoard(this.addAclForAPI)
 			} catch (e) {
 				const errorMessage = t('deck', 'Failed to create share with {displayName}', { displayName: this.addAcl.displayName })
 				console.error(errorMessage, e)
@@ -209,20 +217,20 @@ export default {
 		clickEditAcl(acl) {
 			this.addAclForAPI = Object.assign({}, acl)
 			this.addAclForAPI.permissionEdit = !acl.permissionEdit
-			this.$store.dispatch('updateAclFromCurrentBoard', this.addAclForAPI)
+			this.updateAclFromCurrentBoard(this.addAclForAPI)
 		},
 		clickShareAcl(acl) {
 			this.addAclForAPI = Object.assign({}, acl)
 			this.addAclForAPI.permissionShare = !acl.permissionShare
-			this.$store.dispatch('updateAclFromCurrentBoard', this.addAclForAPI)
+			this.updateAclFromCurrentBoard(this.addAclForAPI)
 		},
 		clickManageAcl(acl) {
 			this.addAclForAPI = Object.assign({}, acl)
 			this.addAclForAPI.permissionManage = !acl.permissionManage
-			this.$store.dispatch('updateAclFromCurrentBoard', this.addAclForAPI)
+			this.updateAclFromCurrentBoard(this.addAclForAPI)
 		},
 		clickDeleteAcl(acl) {
-			this.$store.dispatch('deleteAclFromCurrentBoard', acl)
+			this.deleteAclFromCurrentBoard(acl)
 		},
 		clickTransferOwner(newOwner) {
 			OC.dialogs.confirmDestructive(
@@ -238,7 +246,7 @@ export default {
 					if (result) {
 						try {
 							this.isLoading = true
-							await this.$store.dispatch('transferOwnership', {
+							await this.transferOwnership({
 								boardId: this.board.id,
 								newOwner,
 							})
diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 317e767752..fe50a98c46 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -149,7 +149,6 @@
 
 <script>
 import ClickOutside from 'vue-click-outside'
-import { mapGetters, mapState as mapStateVuex } from 'vuex'
 import { mapState, mapActions } from 'pinia'
 import { Container, Draggable } from 'vue-smooth-dnd'
 import ArchiveIcon from 'vue-material-design-icons/ArchiveOutline.vue'
@@ -164,6 +163,7 @@ import '@nextcloud/dialogs/style.css'
 import { useTrashbinStore } from '../../stores/trashbin.js'
 import { useStackStore } from '../../stores/stack.js'
 import { useCardStore } from '../../stores/card.js'
+import { useBoardStore } from '../../stores/board.js'
 
 export default {
 	name: 'Stack',
@@ -208,14 +208,12 @@ export default {
 		}
 	},
 	computed: {
-		...mapGetters([
+		...mapState(useBoardStore, [
 			'canManage',
 			'canEdit',
 			'isArchived',
+			'showArchived',
 		]),
-		...mapStateVuex({
-			showArchived: state => state.showArchived,
-		}),
 		...mapState(useCardStore, {
 			cardsByStackGetter: 'cardsByStack',
 		}),
diff --git a/src/components/board/TagsTabSidebar.vue b/src/components/board/TagsTabSidebar.vue
index 3f6c30b865..aabc02084e 100644
--- a/src/components/board/TagsTabSidebar.vue
+++ b/src/components/board/TagsTabSidebar.vue
@@ -86,9 +86,10 @@
 
 <script>
 
-import { mapGetters } from 'vuex'
+import { mapActions, mapState } from 'pinia'
 import Color from '../../mixins/color.js'
 import { NcColorPicker, NcActions, NcActionButton } from '@nextcloud/vue'
+import { useBoardStore } from '../../stores/board.js'
 
 export default {
 	name: 'TagsTabSidebar',
@@ -111,7 +112,7 @@ export default {
 		}
 	},
 	computed: {
-		...mapGetters({
+		...mapState(useBoardStore, {
 			labels: 'currentBoardLabels',
 			canManage: 'canManage',
 			isArchived: 'isArchived',
@@ -144,6 +145,11 @@ export default {
 
 	},
 	methods: {
+		...mapActions(useBoardStore, [
+			'removeLabelFromCurrentBoard',
+			'updateLabelFromCurrentBoard',
+			'addLabelToCurrentBoard',
+		]),
 		updateColor(c) {
 			if (this.editingLabel === null) {
 				this.addLabelObj.color = c.substring(1, 7)
@@ -157,10 +163,10 @@ export default {
 			this.editingLabelColor = '#' + label.color
 		},
 		deleteLabel(id) {
-			this.$store.dispatch('removeLabelFromCurrentBoard', id)
+			this.removeLabelFromCurrentBoard(id)
 		},
 		updateLabel(label) {
-			this.$store.dispatch('updateLabelFromCurrentBoard', this.editingLabel)
+			this.updateLabelFromCurrentBoard(this.editingLabel)
 			this.editingLabelId = null
 		},
 		clickShowAddLabel() {
@@ -169,7 +175,7 @@ export default {
 			this.addLabel = true
 		},
 		clickAddLabel() {
-			this.$store.dispatch('addLabelToCurrentBoard', this.addLabelObj)
+			this.addLabelToCurrentBoard(this.addLabelObj)
 			this.addLabel = false
 			this.addLabelObj = null
 			this.addLabelColor = null
diff --git a/src/components/boards/Boards.vue b/src/components/boards/Boards.vue
index 579186d065..12635bc6b9 100644
--- a/src/components/boards/Boards.vue
+++ b/src/components/boards/Boards.vue
@@ -29,6 +29,7 @@
 
 import BoardItem from './BoardItem.vue'
 import Controls from '../Controls.vue'
+import { useBoardStore } from '../../stores/board.js'
 
 export default {
 	name: 'Boards',
@@ -48,14 +49,14 @@ export default {
 		},
 		filteredBoards() {
 			const query = this.$store.getters.getSearchQuery
-			return this.$store.getters.filteredBoards.filter((board) => {
+			return useBoardStore().filteredBoards.filter((board) => {
 				return board.deletedAt <= 0 && board.title.toLowerCase().includes(query.toLowerCase())
 			})
 		},
 	},
 	watch: {
 		navFilter(value) {
-			this.$store.commit('setBoardFilter', value)
+			useBoardStore().setBoardFilter(value)
 		},
 	},
 }
diff --git a/src/components/card/AttachmentList.vue b/src/components/card/AttachmentList.vue
index cb53b38371..d602ae3bb9 100644
--- a/src/components/card/AttachmentList.vue
+++ b/src/components/card/AttachmentList.vue
@@ -94,12 +94,12 @@ import relativeDate from '../../mixins/relativeDate.js'
 import { formatFileSize } from '@nextcloud/files'
 import { getCurrentUser } from '@nextcloud/auth'
 import { generateUrl, generateOcsUrl, generateRemoteUrl } from '@nextcloud/router'
-import { mapState as mapStateVuex } from 'vuex'
 import { mapState, mapActions } from 'pinia'
 import { loadState } from '@nextcloud/initial-state'
 import attachmentUpload from '../../mixins/attachmentUpload.js'
 import { getFilePickerBuilder } from '@nextcloud/dialogs'
 import { useAttachmentStore } from '../../stores/attachment.js'
+import { useBoardStore } from '../../stores/board.js'
 const maxUploadSizeState = loadState('deck', 'maxUploadSize', -1)
 
 const picker = getFilePickerBuilder(t('deck', 'File to share'))
@@ -178,14 +178,12 @@ export default {
 		formattedFileSize() {
 			return (filesize) => formatFileSize(filesize)
 		},
-		...mapStateVuex({
-			currentBoard: state => state.currentBoard,
-		}),
+		...mapState(useBoardStore, ['currentBoard', 'canEdit']),
 		...mapState(useAttachmentStore, [
 			'attachmentsByCard',
 		]),
 		isReadOnly() {
-			return !this.$store.getters.canEdit
+			return !this.canEdit
 		},
 		dropHintText() {
 			if (this.isReadOnly) {
diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue
index 713e38e223..db5bc7639e 100644
--- a/src/components/card/CardSidebar.vue
+++ b/src/components/card/CardSidebar.vue
@@ -84,7 +84,7 @@
 import { NcActionButton, NcAppSidebar, NcAppSidebarTab, NcUserBubble } from '@nextcloud/vue'
 import { NcReferenceList } from '@nextcloud/vue/dist/Components/NcRichText.js'
 import { getCapabilities } from '@nextcloud/capabilities'
-import { mapState as mapStateVuex, mapGetters } from 'vuex'
+import { mapState as mapStateVuex } from 'vuex'
 import CardSidebarTabDetails from './CardSidebarTabDetails.vue'
 import CardSidebarTabAttachments from './CardSidebarTabAttachments.vue'
 import CardSidebarTabComments from './CardSidebarTabComments.vue'
@@ -103,6 +103,7 @@ import { getLocale } from '@nextcloud/l10n'
 import CardMenuEntries from '../cards/CardMenuEntries.vue'
 import { mapActions, mapState } from 'pinia'
 import { useCardStore } from '../../stores/card.js'
+import { useBoardStore } from '../../stores/board.js'
 
 const capabilities = getCapabilities()
 
@@ -154,12 +155,11 @@ export default {
 	},
 	computed: {
 		...mapState(useCardStore, ['cardById']),
+		...mapState(useBoardStore, ['canEdit', 'assignables', 'currentBoard']),
 		...mapStateVuex({
 			isFullApp: (state) => state.isFullApp,
-			currentBoard: (state) => state.currentBoard,
 			hasCardSaveError: (state) => state.hasCardSaveError,
 		}),
-		...mapGetters(['canEdit', 'assignables']),
 		currentCard() {
 			return this.cardById(this.id)
 		},
diff --git a/src/components/card/CardSidebarTabComments.vue b/src/components/card/CardSidebarTabComments.vue
index 64f8f1649c..d3cc5a4f6f 100644
--- a/src/components/card/CardSidebarTabComments.vue
+++ b/src/components/card/CardSidebarTabComments.vue
@@ -38,13 +38,14 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 import { NcAvatar } from '@nextcloud/vue'
 import CommentItem from './CommentItem.vue'
 import CommentForm from './CommentForm.vue'
 import InfiniteLoading from 'vue-infinite-loading'
 import { getCurrentUser } from '@nextcloud/auth'
 import { useCommentStore } from '../../stores/comment.js'
+import { useBoardStore } from '../../stores/board.js'
 
 export default {
 	name: 'CardSidebarTabComments',
@@ -78,8 +79,8 @@ export default {
 		}
 	},
 	computed: {
-		...mapState({
-			currentBoard: state => state.currentBoard,
+		...mapState(useBoardStore, {
+			currentBoard: 'currentBoard',
 		}),
 		members() {
 			return this.currentBoard.users
diff --git a/src/components/card/CardSidebarTabDetails.vue b/src/components/card/CardSidebarTabDetails.vue
index 18edd93de4..15013973c2 100644
--- a/src/components/card/CardSidebarTabDetails.vue
+++ b/src/components/card/CardSidebarTabDetails.vue
@@ -47,8 +47,7 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from 'vuex'
-import { mapActions } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 import moment from '@nextcloud/moment'
 import { loadState } from '@nextcloud/initial-state'
 
@@ -65,6 +64,7 @@ import StartDateSelector from './StartDateSelector.vue'
 import { debounce } from 'lodash'
 import DependentCardsSelector from './DependentCardsSelector.vue'
 import { useCardStore } from '../../stores/card.js'
+import { useBoardStore } from '../../stores/board.js'
 
 export default {
 	name: 'CardSidebarTabDetails',
@@ -93,10 +93,7 @@ export default {
 		}
 	},
 	computed: {
-		...mapState({
-			currentBoard: state => state.currentBoard,
-		}),
-		...mapGetters(['canEdit', 'assignables']),
+		...mapState(useBoardStore, ['currentBoard', 'canEdit', 'assignables']),
 		cardDetailsInModal: {
 			get() {
 				return this.$store.getters.config('cardDetailsInModal')
@@ -118,6 +115,7 @@ export default {
 		this.initialize()
 	},
 	methods: {
+		...mapActions(useBoardStore, ['addLabelToCurrentBoardAndCard']),
 		...mapActions(useCardStore, {
 			assignCardToUserInStore: 'assignCardToUser',
 			removeUserFromCardInStore: 'removeUserFromCard',
@@ -197,7 +195,7 @@ export default {
 		},
 
 		async addLabelToBoardAndCard(name) {
-			await this.$store.dispatch('addLabelToCurrentBoardAndCard', {
+			await this.addLabelToCurrentBoardAndCard({
 				card: this.copiedCard,
 				newLabel: {
 					title: name,
diff --git a/src/components/card/CommentForm.vue b/src/components/card/CommentForm.vue
index 1855d60b66..fd5442851a 100644
--- a/src/components/card/CommentForm.vue
+++ b/src/components/card/CommentForm.vue
@@ -28,9 +28,10 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 import { NcButton, NcRichContenteditable } from '@nextcloud/vue'
 import ArrowRightIcon from 'vue-material-design-icons/ArrowRight.vue'
+import { useBoardStore } from '../../stores/board.js'
 
 export default {
 	name: 'CommentForm',
@@ -52,8 +53,8 @@ export default {
 		}
 	},
 	computed: {
-		...mapState({
-			currentBoard: state => state.currentBoard,
+		...mapState(useBoardStore, {
+			currentBoard: 'currentBoard',
 		}),
 		members() {
 			const obj = {}
diff --git a/src/components/cards/CardCover.vue b/src/components/cards/CardCover.vue
index c5ac6c27e1..d2bdba1fd6 100644
--- a/src/components/cards/CardCover.vue
+++ b/src/components/cards/CardCover.vue
@@ -27,7 +27,7 @@ export default {
 	computed: {
 		...mapState(useCardStore, ['cardById']),
 		attachments() {
-			return [...this.$store.getters.attachmentsByCard(this.cardId)]
+			return [...useAttachmentStore().attachmentsByCard(this.cardId)]
 				// Filter deleted and hasPreview
 				.filter(attachment => attachment.deletedAt >= 0 && attachment.extendedData.hasPreview)
 				// sort by id (same as in AttachmentList) to get Newest
diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index ad8f2d663c..743241ca9b 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -78,7 +78,7 @@
 
 <script>
 import ClickOutside from 'vue-click-outside'
-import { mapState as mapStateVuex, mapGetters } from 'vuex'
+import { mapState as mapStateVuex } from 'vuex'
 import CardBadges from './CardBadges.vue'
 import Color from '../../mixins/color.js'
 import labelStyle from '../../mixins/labelStyle.js'
@@ -90,6 +90,7 @@ import { getCurrentUser } from '@nextcloud/auth'
 import { mapActions, mapState } from 'pinia'
 import { useStackStore } from '../../stores/stack.js'
 import { useCardStore } from '../../stores/card.js'
+import { useBoardStore } from '../../stores/board.js'
 
 const TITLE_EDITING_STATE = {
 	OFF: 0,
@@ -132,28 +133,30 @@ export default {
 	computed: {
 		...mapState(useStackStore, ['stackById']),
 		...mapState(useCardStore, ['cardById']),
+		...mapState(useBoardStore, {
+			showArchived: 'showArchived',
+			currentBoard: 'currentBoard',
+			canEditPermission: 'canEdit',
+			boards: 'boards',
+			boardById: 'boardById',
+		}),
 		...mapStateVuex({
 			compactMode: state => state.compactMode,
-			showArchived: state => state.showArchived,
-			currentBoard: state => state.currentBoard,
 			showCardCover: state => state.showCardCover,
 			shortcutLock: state => state.shortcutLock,
 		}),
-		...mapGetters([
-			'isArchived',
-		]),
 
 		board() {
-			return this.$store.getters.boardById(this?.stack?.boardId)
+			return this.boardById(this?.stack?.boardId)
 		},
 		stack() {
 			return this.stackById(this?.card?.stackId)
 		},
 		canEdit() {
 			if (this.currentBoard) {
-				return !this.currentBoard.archived && this.$store.getters.canEdit
+				return !this.currentBoard.archived && this.canEditPermission
 			}
-			const board = this.$store.getters.boards.find((item) => item.id === this.card.boardId)
+			const board = this.boards.find((item) => item.id === this.card.boardId)
 			return board ? !board.archived && board.permissions.PERMISSION_EDIT : false
 		},
 		card() {
@@ -226,6 +229,7 @@ export default {
 			removeUserFromCardInStore: 'removeUserFromCard',
 			assignCardToUserInStore: 'assignCardToUser',
 		}),
+		...mapActions(useBoardStore, ['toggleFilter']),
 		hasSelection() {
 			const selection = window.getSelection()
 			return selection.toString() !== ''
@@ -315,7 +319,7 @@ export default {
 			if (this.dragging) {
 				return
 			}
-			this.$nextTick(() => this.$store.dispatch('toggleFilter', { tags: [label.id] }))
+			this.$nextTick(() => this.toggleFilter({ tags: [label.id] }))
 		},
 		toggleSelfAsignment() {
 			const isAssigned = this.card.assignedUsers.find(
diff --git a/src/components/cards/CardMenuEntries.vue b/src/components/cards/CardMenuEntries.vue
index d7e73cb6da..46dd769931 100644
--- a/src/components/cards/CardMenuEntries.vue
+++ b/src/components/cards/CardMenuEntries.vue
@@ -81,7 +81,6 @@
 </template>
 <script>
 import { NcActionButton, NcColorPicker } from '@nextcloud/vue'
-import { mapGetters, mapState as mapStateVuex } from 'vuex'
 import ArchiveIcon from 'vue-material-design-icons/ArchiveOutline.vue'
 import CardBulletedIcon from 'vue-material-design-icons/CardBulletedOutline.vue'
 import PencilIcon from 'vue-material-design-icons/PencilOutline.vue'
@@ -102,6 +101,7 @@ import { useTrashbinStore } from '../../stores/trashbin.js'
 import { useStackStore } from '../../stores/stack.js'
 import { useCardStore } from '../../stores/card.js'
 import { mapActions, mapState } from 'pinia'
+import { useBoardStore } from '../../stores/board.js'
 
 export default {
 	name: 'CardMenuEntries',
@@ -134,14 +134,13 @@ export default {
 	},
 	computed: {
 		...mapState(useStackStore, ['stackById']),
-		...mapGetters([
-			'isArchived',
-			'boards',
-			'boardById',
-		]),
-		...mapStateVuex({
-			showArchived: state => state.showArchived,
-			currentBoard: state => state.currentBoard,
+		...mapState(useBoardStore, {
+			showArchived: 'showArchived',
+			currentBoard: 'currentBoard',
+			canEditPermission: 'canEdit',
+			boards: 'boards',
+			boardById: 'boardById',
+			isArchived: 'isArchived',
 		}),
 		canEdit() {
 			return !this.card.archived
@@ -151,9 +150,9 @@ export default {
 		},
 		canEditBoard() {
 			if (this.currentBoard) {
-				return this.$store.getters.canEdit
+				return this.canEditPermission
 			}
-			const board = this.$store.getters.boards.find((item) => item.id === this.card.boardId)
+			const board = this.boards.find((item) => item.id === this.card.boardId)
 			return !!board?.permissions?.PERMISSION_EDIT
 		},
 		isCurrentUserAssigned() {
diff --git a/src/components/navigation/AppNavigation.vue b/src/components/navigation/AppNavigation.vue
index e0cffe2387..9bf274f1ac 100644
--- a/src/components/navigation/AppNavigation.vue
+++ b/src/components/navigation/AppNavigation.vue
@@ -64,7 +64,6 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
 import ClickOutside from 'vue-click-outside'
 import { NcAppNavigation, NcAppNavigationItem } from '@nextcloud/vue'
 import AppNavigationAddBoard from './AppNavigationAddBoard.vue'
@@ -81,6 +80,8 @@ import AppNavigationImportBoard from './AppNavigationImportBoard.vue'
 import DeckAppSettings from '../DeckAppSettings.vue'
 import IconCog from 'vue-material-design-icons/CogOutline.vue'
 import { getCurrentUser } from '@nextcloud/auth'
+import { mapState } from 'pinia'
+import { useBoardStore } from '../../stores/board.js'
 
 const canCreateState = loadState('deck', 'canCreate')
 
@@ -122,7 +123,7 @@ export default {
 		}
 	},
 	computed: {
-		...mapGetters([
+		...mapState(useBoardStore, [
 			'noneArchivedBoards',
 			'archivedBoards',
 			'sharedBoards',
diff --git a/src/components/navigation/AppNavigationAddBoard.vue b/src/components/navigation/AppNavigationAddBoard.vue
index 47b76180fb..894803a181 100644
--- a/src/components/navigation/AppNavigationAddBoard.vue
+++ b/src/components/navigation/AppNavigationAddBoard.vue
@@ -45,6 +45,8 @@
 import { NcButton, NcColorPicker, NcAppNavigationItem, NcLoadingIcon, NcTextField } from '@nextcloud/vue'
 import CheckIcon from 'vue-material-design-icons/Check.vue'
 import CloseIcon from 'vue-material-design-icons/Close.vue'
+import { useBoardStore } from '../../stores/board.js'
+import { mapActions } from 'pinia'
 
 /**
  *
@@ -72,6 +74,9 @@ export default {
 		}
 	},
 	methods: {
+		...mapActions(useBoardStore, {
+			createBoardInStore: 'createBoard',
+		}),
 		startCreateBoard(e) {
 			this.editing = true
 			this.$nextTick(() => {
@@ -81,10 +86,7 @@ export default {
 		async createBoard(e) {
 			this.loading = true
 			const title = this.value.trim()
-			await this.$store.dispatch('createBoard', {
-				title,
-				color: this.color.substring(1),
-			})
+			await this.createBoardInStore({ title, color: this.color.substring(1) })
 			this.loading = false
 			this.editing = false
 			this.color = randomColor()
diff --git a/src/components/navigation/AppNavigationBoard.vue b/src/components/navigation/AppNavigationBoard.vue
index 30506a054d..a9532a7eb6 100644
--- a/src/components/navigation/AppNavigationBoard.vue
+++ b/src/components/navigation/AppNavigationBoard.vue
@@ -219,6 +219,8 @@ import BoardCloneModal from './BoardCloneModal.vue'
 import BoardExportModal from './BoardExportModal.vue'
 import { showLoading, showError } from '@nextcloud/dialogs'
 import { getCurrentUser } from '@nextcloud/auth'
+import { mapActions } from 'pinia'
+import { useBoardStore } from '../../stores/board.js'
 
 const canCreateState = loadState('deck', 'canCreate')
 
@@ -334,6 +336,7 @@ export default {
 		this.popupItem = this.$el
 	},
 	methods: {
+		...mapActions(useBoardStore, ['cloneBoard', 'archiveBoard', 'unarchiveBoard', 'removeBoard', 'updateBoard']),
 		toggleDefaultBoard() {
 			if (this.isDefaultBoard) {
 				localStorage.removeItem('deck.defaultBoardId')
@@ -358,27 +361,13 @@ export default {
 				this.$refs?.inputField.focus()
 			})
 		},
-		async actionClone() {
-			this.loading = true
-			try {
-				const newBoard = await this.$store.dispatch('cloneBoard', this.board)
-				this.loading = false
-				if (newBoard instanceof Error) {
-					throw newBoard
-				}
-				this.$router.push({ name: 'board', params: { id: newBoard.id } })
-			} catch (e) {
-				OC.Notification.showTemporary(t('deck', 'An error occurred'))
-				console.error(e)
-			}
-		},
 		actionArchive() {
 			this.loading = true
-			this.$store.dispatch('archiveBoard', this.board)
+			this.archiveBoard(this.board)
 		},
 		actionUnarchive() {
 			this.loading = true
-			this.$store.dispatch('unarchiveBoard', this.board)
+			this.unarchiveBoard(this.board)
 		},
 		actionDelete() {
 			OC.dialogs.confirmDestructive(
@@ -399,7 +388,7 @@ export default {
 								this.deleted = true
 								this.redirectToOverviewIfCurrentBoard()
 								this.undoTimeoutHandle = setTimeout(() => {
-									this.$store.dispatch('removeBoard', this.board)
+									this.removeBoard(this.board)
 								}, 7000)
 							})
 					}
@@ -424,7 +413,7 @@ export default {
 							.then(() => {
 								this.loading = false
 								this.redirectToOverviewIfCurrentBoard()
-								this.$store.dispatch('removeBoard', this.board)
+								this.removeBoard(this.board)
 							})
 							.catch(() => {
 								showError(t('deck', 'Failed to leave the board'))
@@ -445,7 +434,7 @@ export default {
 				const copy = JSON.parse(JSON.stringify(this.board))
 				copy.title = this.editTitle
 				copy.color = (typeof this.editColor.hex !== 'undefined' ? this.editColor.hex : this.editColor).substring(1)
-				this.$store.dispatch('updateBoard', copy)
+				this.updateBoard(copy)
 					.then(() => {
 						this.loading = false
 					})
@@ -489,13 +478,14 @@ export default {
 			if (data) {
 				this.loading = true
 				try {
-					const newBoard = await this.$store.dispatch('cloneBoard', {
+					const newBoard = await this.cloneBoard({
 						boardData: this.board,
 						settings: data,
 					})
 					this.loading = false
 					this.$router.push({ name: 'board', params: { id: newBoard.id } })
 				} catch (e) {
+					console.error(e)
 					OC.Notification.showTemporary(t('deck', 'An error occurred'))
 					console.error(e)
 				}
diff --git a/src/components/navigation/AppNavigationImportBoard.vue b/src/components/navigation/AppNavigationImportBoard.vue
index bd8d9f001a..7605fcbbfb 100644
--- a/src/components/navigation/AppNavigationImportBoard.vue
+++ b/src/components/navigation/AppNavigationImportBoard.vue
@@ -17,6 +17,7 @@
 import { NcAppNavigationItem } from '@nextcloud/vue'
 import { showError } from '../../helpers/errors.js'
 import { showSuccess, showLoading } from '@nextcloud/dialogs'
+import { useBoardStore } from '../../stores/board.js'
 
 export default {
 	name: 'AppNavigationImportBoard',
@@ -41,7 +42,7 @@ export default {
 			const file = event.target.files[0]
 			if (file) {
 				const loadingToast = showLoading(t('deck', 'Importing board...'))
-				const result = await this.$store.dispatch('importBoard', file)
+				const result = await useBoardStore().importBoard(file)
 				loadingToast.hideToast()
 				if (result?.message) {
 					showError(result)
diff --git a/src/components/search/GlobalSearchResults.vue b/src/components/search/GlobalSearchResults.vue
index 383e683f3a..994904e152 100644
--- a/src/components/search/GlobalSearchResults.vue
+++ b/src/components/search/GlobalSearchResults.vue
@@ -45,6 +45,7 @@ import { generateOcsUrl } from '@nextcloud/router'
 import InfiniteLoading from 'vue-infinite-loading'
 import Placeholder from './Placeholder.vue'
 import { NcActions, NcActionButton, NcRichText } from '@nextcloud/vue'
+import { useCardStore } from '../../stores/card.js'
 
 const createCancelToken = () => axios.CancelToken.source()
 
@@ -146,7 +147,7 @@ export default {
 			}
 			if (data.ocs.data.length > 0) {
 				data.ocs.data.forEach((card) => {
-					this.$store.dispatch('addCardData', card)
+					useCardStore().addCardData(card)
 				})
 				this.results = [...this.results, ...data.ocs.data]
 				this.cursor = data.ocs.data[data.ocs.data.length - 1].lastModified
diff --git a/src/main.js b/src/main.js
index a1a20d02ce..4d90a6a13a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -25,7 +25,6 @@ Vue.use(PiniaVuePlugin)
 pinia.use(() => ({ $vuex: store }))
 
 sync(store, router)
-initSessions(store)
 
 Vue.prototype.t = translate
 Vue.prototype.n = translatePlural
@@ -61,6 +60,8 @@ new Vue({
 		}
 	},
 	created() {
+		initSessions()
+
 		this.interval = setInterval(() => {
 			this.time = Date.now()
 		}, 1000)
diff --git a/src/services/StackApi.js b/src/services/StackApi.js
index f5e26e45c6..dc4ef73585 100644
--- a/src/services/StackApi.js
+++ b/src/services/StackApi.js
@@ -29,9 +29,6 @@ export class StackApi {
 					return Promise.reject(err)
 				},
 			)
-			.catch((err) => {
-				return Promise.reject(err)
-			})
 	}
 
 	deletedStacks(boardId) {
diff --git a/src/sessions.js b/src/sessions.js
index e71dca383a..683ba3c1c1 100644
--- a/src/sessions.js
+++ b/src/sessions.js
@@ -7,6 +7,7 @@ import { listen } from '@nextcloud/notify_push'
 import { sessionApi } from './services/SessionApi.js'
 import axios from '@nextcloud/axios'
 import { useStackStore } from './stores/stack.js'
+import { useBoardStore } from './stores/board.js'
 
 const SESSION_INTERVAL = 90 // in seconds
 
@@ -34,17 +35,17 @@ function isOurSessionToken(token) {
  *
  * @param storeInstance
  */
-export function initSessions(storeInstance) {
-	store = storeInstance
+export function initSessions() {
+	store = useBoardStore()
 	hasPush = listen('deck_board_update', (name, body) => {
 		// ignore update events which we have triggered ourselves
 		if (isOurSessionToken(body._causingSessionToken)) return
 
 		// only handle update events for the currently open board
-		const currentBoardId = store.state.currentBoard?.id
+		const currentBoardId = store.currentBoard?.id
 		if (body.id !== currentBoardId) return
 
-		store.dispatch('refreshBoard', currentBoardId)
+		store.refreshBoard(currentBoardId)
 	})
 
 	listen('deck_card_update', (name, body) => {
@@ -53,7 +54,7 @@ export function initSessions(storeInstance) {
 		if (isOurSessionToken(body._causingSessionToken)) return
 
 		// only handle update events for the currently open board
-		const currentBoardId = store.state.currentBoard?.id
+		const currentBoardId = store.currentBoard?.id
 		if (body.boardId !== currentBoardId) return
 
 		useStackStore().loadStacks(currentBoardId)
@@ -139,7 +140,7 @@ export function createSession(boardId) {
 
 			// we must assume that the websocket connection was
 			// paused and we have missed updates in the meantime.
-			store.dispatch('refreshBoard', store.state.currentBoard?.id)
+			store.refreshBoard(store.currentBoard?.id)
 
 			// restart session refresh interval
 			clearInterval(interval)
diff --git a/src/store/main.js b/src/store/main.js
index 42c40b7c42..5b06d37a6a 100644
--- a/src/store/main.js
+++ b/src/store/main.js
@@ -9,12 +9,10 @@ import { loadState } from '@nextcloud/initial-state'
 import Vue from 'vue'
 import Vuex from 'vuex'
 import axios from '@nextcloud/axios'
-import { generateOcsUrl, generateUrl } from '@nextcloud/router'
-import { BoardApi } from '../services/BoardApi.js'
-import { useStackStore } from '../stores/stack.js'
+import { generateOcsUrl } from '@nextcloud/router'
+import { useBoardStore } from '../stores/board.js'
 Vue.use(Vuex)
 
-const apiClient = new BoardApi()
 const debug = process.env.NODE_ENV !== 'production'
 
 export const BOARD_FILTERS = {
@@ -32,24 +30,17 @@ export default function storeFactory() {
 		state: {
 			isFullApp: true,
 			config: loadState('deck', 'config', {}),
-			showArchived: false,
 			navShown: localStorage.getItem('deck.navShown') === null || localStorage.getItem('deck.navShown') === 'true',
 			compactMode: localStorage.getItem('deck.compactMode') === 'true',
 			showCardCover: localStorage.getItem('deck.showCardCover') === 'true',
 			sidebarShown: false,
-			currentBoard: null,
 			currentCard: null,
 			hasCardSaveError: false,
-			boards: loadState('deck', 'initialBoards', {}),
 			sharees: [],
-			assignableUsers: [],
-			boardFilter: BOARD_FILTERS.ALL,
 			searchQuery: '',
 			activity: [],
 			activityLoadMore: true,
-			filter: { tags: [], users: [], due: '', unassigned: false, completed: 'both' },
 			shortcutLock: false,
-			viewModeByBoard: {},
 		},
 		getters: {
 			config: state => (key) => {
@@ -62,70 +53,6 @@ export default function storeFactory() {
 			getSearchQuery: state => {
 				return state.searchQuery
 			},
-			viewMode: state => {
-				if (!state.currentBoard) return 'kanban'
-				if (state.viewModeByBoard[state.currentBoard.id] !== undefined) {
-					return state.viewModeByBoard[state.currentBoard.id]
-				}
-
-				const stored = localStorage.getItem(`deck.viewMode.${state.currentBoard.id}`)
-				return stored !== null ? stored : 'kanban'
-			},
-			getFilter: state => {
-				return state.filter
-			},
-			boards: state => {
-				return state.boards
-			},
-			boardById: state => (id) => {
-				return state.boards.find((board) => board.id === id)
-			},
-			assignables: state => {
-				return [
-					...state.assignableUsers.map((user) => ({ ...user, type: user.type })),
-					...state.currentBoard.acl.filter((acl) => acl.type === 1 && typeof acl.participant === 'object').map((group) => ({ ...group.participant, type: 1 })),
-					...state.currentBoard.acl.filter((acl) => acl.type === 7 && typeof acl.participant === 'object').map((circle) => ({ ...circle.participant, type: 7 })),
-				]
-			},
-			noneArchivedBoards: state => {
-				return state.boards.filter(board => {
-					return board.archived === false && !board.deletedAt
-				})
-			},
-			archivedBoards: state => {
-				return state.boards.filter(board => {
-					return board.archived === true && !board.deletedAt
-				})
-			},
-			sharedBoards: state => {
-				return state.boards.filter(board => {
-					return board.shared && !board.deletedAt
-				})
-			},
-			filteredBoards: state => {
-				// filters the boards depending on the active filter
-				const boards = state.boards.filter(board => {
-					return (state.boardFilter === BOARD_FILTERS.ALL && board.archived === false)
-						|| (state.boardFilter === BOARD_FILTERS.ARCHIVED && board.archived === true)
-						|| (state.boardFilter === BOARD_FILTERS.SHARED && board.shared === 1)
-				})
-				return boards
-			},
-			currentBoardLabels: state => {
-				return state.currentBoard ? state.currentBoard.labels : []
-			},
-			canEdit: state => {
-				return state.currentBoard ? state.currentBoard.permissions.PERMISSION_EDIT : false
-			},
-			canManage: state => {
-				return state.currentBoard ? state.currentBoard.permissions.PERMISSION_MANAGE : false
-			},
-			canShare: state => {
-				return state.currentBoard ? state.currentBoard.permissions.PERMISSION_SHARE : false
-			},
-			isArchived: state => {
-				return state.currentBoard && state.currentBoard.archived
-			},
 		},
 		mutations: {
 			setFullApp(state, isFullApp) {
@@ -139,12 +66,12 @@ export default function storeFactory() {
 				let indexExisting = -1
 				switch (scope) {
 				case 'board':
-					indexExisting = state.boards.findIndex((b) => {
+					indexExisting = useBoardStore().boards.findIndex((b) => {
 						return id === '' + b.id
 					})
 
 					if (indexExisting > -1) {
-						Vue.set(state.boards[indexExisting].settings, configKey, value)
+						Vue.set(useBoardStore().boards[indexExisting].settings, configKey, value)
 					}
 					break
 				default:
@@ -154,66 +81,6 @@ export default function storeFactory() {
 			setSearchQuery(state, searchQuery) {
 				state.searchQuery = searchQuery
 			},
-			SET_FILTER(state, filter) {
-				Object.assign(state.filter, filter)
-			},
-			TOGGLE_FILTER(state, filter) {
-				Object.keys(filter).forEach((key) => {
-					switch (key) {
-					case 'due':
-						Vue.set(state.filter, key, filter.due)
-						break
-					default:
-						filter[key].forEach((item) => {
-							if (state.filter[key].indexOf(item) === -1) {
-								state.filter[key].push(item)
-							} else {
-								state.filter[key].splice(state.filter[key].indexOf(item), 1)
-							}
-						})
-						break
-					}
-				})
-			},
-			toggleShowArchived(state, newState = undefined) {
-				state.showArchived = newState !== undefined ? newState : !state.showArchived
-			},
-			/*
-			 * Adds or replaces a board in the store.
-			 * Matches a board by it's id.
-			 */
-			addBoard(state, board) {
-				const indexExisting = state.boards.findIndex((b) => {
-					return board.id === b.id
-				})
-
-				if (indexExisting > -1) {
-					Vue.set(state.boards, indexExisting, board)
-				} else {
-					state.boards.push(board)
-				}
-			},
-
-			cloneBoard(state, board) {
-				const indexExisting = state.boards.findIndex((b) => {
-					return board.id === b.id
-				})
-
-				if (indexExisting > -1) {
-					Vue.set(state.boards, indexExisting, board)
-				} else {
-					state.boards.push(board)
-				}
-			},
-
-			/*
-			 * Removes the board from the store.
-			 */
-			removeBoard(state, board) {
-				state.boards = state.boards.filter((b) => {
-					return board.id !== b.id
-				})
-			},
 			toggleNav(state, navState) {
 				state.navShown = navState
 				localStorage.setItem('deck.navShown', navState)
@@ -229,81 +96,15 @@ export default function storeFactory() {
 				state.showCardCover = !state.showCardCover
 				localStorage.setItem('deck.showCardCover', state.showCardCover)
 			},
-			setBoards(state, boards) {
-				state.boards = boards
-			},
 			setSharees(state, shareesUsersAndGroups) {
 				Vue.set(state, 'sharees', shareesUsersAndGroups)
 			},
-			setAssignableUsers(state, users) {
-				state.assignableUsers = users
-			},
-			setBoardFilter(state, filter) {
-				state.boardFilter = filter
-			},
-			setCurrentBoard(state, board) {
-				state.currentBoard = board
-			},
 			setCurrentCard(state, card) {
 				state.currentCard = card
 			},
-
-			// label mutators
-			removeLabelFromCurrentBoard(state, labelId) {
-				const removeIndex = state.currentBoard.labels.findIndex((l) => {
-					return labelId === l.id
-				})
-
-				if (removeIndex > -1) {
-					state.currentBoard.labels.splice(removeIndex, 1)
-				}
-			},
-			updateLabelFromCurrentBoard(state, newLabel) {
-				const labelToUpdate = state.currentBoard.labels.find((l) => {
-					return newLabel.id === l.id
-				})
-
-				labelToUpdate.title = newLabel.title
-				labelToUpdate.color = newLabel.color
-			},
-			addLabelToCurrentBoard(state, newLabel) {
-				state.currentBoard.labels.push(newLabel)
-			},
-
-			// acl mutators
-			addAclToCurrentBoard(state, createdAcl) {
-				state.currentBoard.acl.push(createdAcl)
-			},
-			updateAclFromCurrentBoard(state, acl) {
-				for (const acl_ in state.currentBoard.acl) {
-					if (state.currentBoard.acl[acl_].participant.uid === acl.participant.uid) {
-						Vue.set(state.currentBoard.acl, acl_, acl)
-						break
-					}
-				}
-			},
-			deleteAclFromCurrentBoard(state, acl) {
-				let removeIndex = -1
-				for (const index in state.currentBoard.acl) {
-					const attr = state.currentBoard.acl[index]
-					if (acl.id === attr.id) {
-						removeIndex = index
-						break
-					}
-				}
-
-				if (removeIndex > -1) {
-					Vue.delete(state.currentBoard.acl, removeIndex)
-				}
-			},
 			TOGGLE_SHORTCUT_LOCK(state, lock) {
 				state.shortcutLock = lock
 			},
-			setViewMode(state, mode) {
-				if (!state.currentBoard) return
-				Vue.set(state.viewModeByBoard, state.currentBoard.id, mode)
-				localStorage.setItem(`deck.viewMode.${state.currentBoard.id}`, mode)
-			},
 		},
 		actions: {
 			setFullApp({ commit }, isFullApp) {
@@ -322,116 +123,6 @@ export default function storeFactory() {
 					}
 				}
 			},
-			setFilter({ commit }, filter) {
-				commit('SET_FILTER', filter)
-			},
-			toggleFilter({ commit }, filter) {
-				commit('TOGGLE_FILTER', filter)
-			},
-			async loadBoardById({ commit, dispatch }, boardId) {
-				const filterReset = { tags: [], users: [], due: '', unassigned: false, completed: 'both' }
-				dispatch('setFilter', filterReset)
-				commit('setCurrentBoard', null)
-				const board = await apiClient.loadById(boardId)
-				commit('setCurrentBoard', board)
-				commit('setAssignableUsers', board.users)
-			},
-
-			async refreshBoard({ commit, dispatch }, boardId) {
-				const board = await apiClient.loadById(boardId)
-				const etagHasChanged = board.ETag !== this.state.currentBoard.ETag
-				commit('setCurrentBoard', board)
-				commit('setAssignableUsers', board.users)
-
-				if (etagHasChanged) {
-					useStackStore().loadStacks(boardId)
-				}
-			},
-
-			toggleShowArchived({ commit }) {
-				commit('toggleShowArchived')
-			},
-
-			/**
-			 * @param commit.commit
-			 * @param commit
-			 * @param state
-			 * @param {Board} board
-			 */
-			archiveBoard({ commit }, board) {
-				const boardCopy = JSON.parse(JSON.stringify(board))
-				boardCopy.archived = true
-				apiClient.updateBoard(boardCopy)
-					.then((board) => {
-						commit('addBoard', board)
-					})
-			},
-			/**
-			 * @param commit.commit
-			 * @param commit
-			 * @param state
-			 * @param {Board} board
-			 */
-			unarchiveBoard({ commit }, board) {
-				const boardCopy = JSON.parse(JSON.stringify(board))
-				boardCopy.archived = false
-				apiClient.updateBoard(boardCopy)
-					.then((board) => {
-						commit('addBoard', board)
-					})
-			},
-			/**
-			 * Updates a board API side.
-			 *
-			 * @param commit.commit
-			 * @param commit
-			 * @param commit.state
-			 * @param board The board to update.
-			 * @return {Promise<void>}
-			 */
-			async updateBoard({ commit, state }, board) {
-				const storedBoard = await apiClient.updateBoard(board)
-				commit('addBoard', storedBoard)
-
-				// keep the currently opened board title in sync after edits
-				if (state.currentBoard?.id === storedBoard.id) {
-					commit('setCurrentBoard', storedBoard)
-				}
-			},
-			async createBoard({ commit }, boardData) {
-				try {
-					const board = await apiClient.createBoard(boardData)
-					commit('addBoard', board)
-				} catch (err) {
-					return err
-				}
-			},
-			async importBoard({ commit }, file) {
-				try {
-					const board = await apiClient.importBoard(file)
-					commit('addBoard', board)
-				} catch (err) {
-					return err
-				}
-			},
-			async cloneBoard({ commit }, { boardData, settings }) {
-				const { withCards, withAssignments, withLabels, withDueDate, moveCardsToLeftStack, restoreArchivedCards } = settings
-
-				try {
-					const newBoard = await apiClient.cloneBoard(boardData, withCards, withAssignments, withLabels, withDueDate, moveCardsToLeftStack, restoreArchivedCards)
-					commit('cloneBoard', newBoard)
-					return newBoard
-				} catch (err) {
-					return err
-				}
-			},
-			removeBoard({ commit }, board) {
-				commit('removeBoard', board)
-			},
-			async loadBoards({ commit }) {
-				const boards = await apiClient.loadBoards()
-				commit('setBoards', boards)
-			},
 			async loadSharees({ commit }, query) {
 				if (typeof query === 'undefined') {
 					return
@@ -447,9 +138,6 @@ export default function storeFactory() {
 				commit('setSharees', response.data.ocs.data)
 			},
 
-			setBoardFilter({ commmit }, filter) {
-				commmit('setBoardFilter', filter)
-			},
 			toggleNav({ commit }, navState) {
 				commit('toggleNav', navState)
 			},
@@ -462,81 +150,13 @@ export default function storeFactory() {
 			toggleShowCardCover({ commit }) {
 				commit('toggleShowCardCover')
 			},
-			setCurrentBoard({ commit }, board) {
-				commit('setCurrentBoard', board)
-			},
-			setAssignableUsers({ commit }, board) {
-				commit('setAssignableUsers', board)
-			},
 			setCurrentCard({ commit }, card) {
 				commit('setCurrentCard', card)
 			},
 
-			// label actions
-			removeLabelFromCurrentBoard({ commit }, label) {
-				apiClient.deleteLabel(label)
-					.then((label) => {
-						commit('removeLabelFromCurrentBoard', label.id)
-					})
-			},
-			updateLabelFromCurrentBoard({ commit }, newLabel) {
-				apiClient.updateLabel(newLabel)
-					.then((newLabel) => {
-						commit('updateLabelFromCurrentBoard', newLabel)
-					})
-			},
-			addLabelToCurrentBoard({ commit }, newLabel) {
-				newLabel.boardId = this.state.currentBoard.id
-				apiClient.createLabel(newLabel)
-					.then((newLabel) => {
-						commit('addLabelToCurrentBoard', newLabel)
-					})
-			},
-			async addLabelToCurrentBoardAndCard({ dispatch, commit }, { newLabel, card }) {
-				newLabel.boardId = this.state.currentBoard.id
-				const label = await apiClient.createLabel(newLabel)
-				card.labels.push(label)
-				commit('addLabelToCurrentBoard', label)
-				dispatch('addLabel', {
-					card,
-					labelId: label.id,
-				})
-				return label
-			},
-
-			// acl actions
-			async addAclToCurrentBoard({ dispatch, commit }, newAcl) {
-				newAcl.boardId = this.state.currentBoard.id
-				const result = await apiClient.addAcl(newAcl)
-				commit('addAclToCurrentBoard', result)
-				dispatch('refreshBoard', newAcl.boardId)
-			},
-			updateAclFromCurrentBoard({ commit }, acl) {
-				acl.boardId = this.state.currentBoard.id
-				apiClient.updateAcl(acl)
-					.then((acl) => {
-						commit('updateAclFromCurrentBoard', acl)
-					})
-			},
-			deleteAclFromCurrentBoard({ dispatch, commit }, acl) {
-				acl.boardId = this.state.currentBoard.id
-				apiClient.deleteAcl(acl)
-					.then((acl) => {
-						commit('deleteAclFromCurrentBoard', acl)
-						dispatch('loadBoardById', acl.boardId)
-					})
-			},
-			async transferOwnership({ commit }, { boardId, newOwner }) {
-				await axios.put(generateUrl(`apps/deck/boards/${boardId}/transferOwner`), {
-					newOwner,
-				})
-			},
 			toggleShortcutLock({ commit }, lock) {
 				commit('TOGGLE_SHORTCUT_LOCK', lock)
 			},
-			setViewMode({ commit }, mode) {
-				commit('setViewMode', mode)
-			},
 		},
 	})
 }
diff --git a/src/stores/attachment.js b/src/stores/attachment.js
index 05f6f19154..cb8b4a7fd7 100644
--- a/src/stores/attachment.js
+++ b/src/stores/attachment.js
@@ -7,6 +7,7 @@ import { defineStore } from 'pinia'
 import Vue from 'vue'
 import { AttachmentApi } from '../services/AttachmentApi.js'
 import { useCardStore } from './card.js'
+import { useBoardStore } from './board.js'
 
 const apiClient = new AttachmentApi()
 
@@ -25,7 +26,7 @@ export const useAttachmentStore = defineStore('attachment', {
 	actions: {
 		async createAttachment({ cardId, formData, onUploadProgress }) {
 			const cardStore = useCardStore()
-			const boardId = this.$vuex.state.currentBoard.id
+			const boardId = useBoardStore().currentBoard.id
 			const attachment = await apiClient.createAttachment({ cardId, formData, onUploadProgress, boardId })
 			if (typeof this.attachments[cardId] === 'undefined') {
 				Vue.set(this.attachments, cardId, [attachment])
@@ -36,13 +37,13 @@ export const useAttachmentStore = defineStore('attachment', {
 		},
 		async fetchAttachments(cardId) {
 			const cardStore = useCardStore()
-			const boardId = this.$vuex.state.currentBoard.id
+			const boardId = useBoardStore().currentBoard.id
 			const attachments = await apiClient.fetchAttachments(cardId, boardId)
 			Vue.set(this.attachments, cardId, attachments)
 			cardStore.cardSetAttachmentCount({ cardId, count: attachments.length })
 		},
 		async updateAttachment({ cardId, attachment, formData }) {
-			const boardId = this.$vuex.state.currentBoard.id
+			const boardId = useBoardStore().currentBoard.id
 			const result = await apiClient.updateAttachment({ cardId, attachment, formData, boardId })
 			const existingIndex = this.attachments[attachment.cardId].findIndex(a => a.id === attachment.id && a.type === attachment.type)
 			if (existingIndex !== -1) {
@@ -51,7 +52,7 @@ export const useAttachmentStore = defineStore('attachment', {
 		},
 		async deleteAttachment(attachment) {
 			const cardStore = useCardStore()
-			const boardId = this.$vuex.state.currentBoard.id
+			const boardId = useBoardStore().currentBoard.id
 			await apiClient.deleteAttachment(attachment, boardId)
 			const existingIndex = this.attachments[attachment.cardId].findIndex(a => a.id === attachment.id && a.type === attachment.type)
 			if (existingIndex !== -1) {
@@ -61,7 +62,7 @@ export const useAttachmentStore = defineStore('attachment', {
 		},
 		async unshareAttachment(attachment) {
 			const cardStore = useCardStore()
-			const boardId = this.$vuex.state.currentBoard.id
+			const boardId = useBoardStore().currentBoard.id
 			await apiClient.deleteAttachment(attachment, boardId)
 			const existingIndex = this.attachments[attachment.cardId].findIndex(a => a.id === attachment.id && a.type === attachment.type)
 			if (existingIndex !== -1) {
@@ -71,7 +72,7 @@ export const useAttachmentStore = defineStore('attachment', {
 		},
 		async restoreAttachment(attachment) {
 			const cardStore = useCardStore()
-			const boardId = this.$vuex.state.currentBoard.id
+			const boardId = useBoardStore().currentBoard.id
 			const restoredAttachment = await apiClient.restoreAttachment(attachment, boardId)
 			const existingIndex = this.attachments[restoredAttachment.cardId].findIndex(a => a.id === restoredAttachment.id && a.type === restoredAttachment.type)
 			if (existingIndex !== -1) {
diff --git a/src/stores/board.js b/src/stores/board.js
new file mode 100644
index 0000000000..ded7af243d
--- /dev/null
+++ b/src/stores/board.js
@@ -0,0 +1,309 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import Vue from 'vue'
+import { defineStore } from 'pinia'
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
+import { BoardApi } from '../services/BoardApi.js'
+import { useStackStore } from './stack.js'
+import { useCardStore } from './card.js'
+import { loadState } from '@nextcloud/initial-state'
+
+const apiClient = new BoardApi()
+
+export const BOARD_FILTERS = {
+	ALL: '',
+	ARCHIVED: 'archived',
+	SHARED: 'shared',
+}
+
+export const useBoardStore = defineStore('board', {
+	state: () => ({
+		currentBoard: null,
+		showArchived: false,
+		viewModeByBoard: {},
+		assignableUsers: [],
+		filter: { tags: [], users: [], due: '', unassigned: false, completed: 'both' },
+		boardFilter: BOARD_FILTERS.ALL,
+		boards: loadState('deck', 'initialBoards', {}),
+	}),
+	getters: {
+		boardById: (state) => (id) => {
+			return state.boards.find((board) => board.id === id)
+		},
+		viewMode(state) {
+			if (!state.currentBoard) return 'kanban'
+			if (state.viewModeByBoard[state.currentBoard.id] !== undefined) {
+				return state.viewModeByBoard[state.currentBoard.id]
+			}
+
+			const stored = localStorage.getItem(`deck.viewMode.${state.currentBoard.id}`)
+			return stored !== null ? stored : 'kanban'
+		},
+		assignables: state => {
+			if (!state.currentBoard) {
+				return []
+			}
+
+			return [
+				...state.assignableUsers.map((user) => ({ ...user, type: user.type })),
+				...state.currentBoard.acl.filter((acl) => acl.type === 1 && typeof acl.participant === 'object').map((group) => ({ ...group.participant, type: 1 })),
+				...state.currentBoard.acl.filter((acl) => acl.type === 7 && typeof acl.participant === 'object').map((circle) => ({ ...circle.participant, type: 7 })),
+			]
+		},
+		noneArchivedBoards: state => {
+			return state.boards.filter(board => {
+				return board.archived === false && !board.deletedAt
+			})
+		},
+		archivedBoards: state => {
+			return state.boards.filter(board => {
+				return board.archived === true && !board.deletedAt
+			})
+		},
+		sharedBoards: state => {
+			return state.boards.filter(board => {
+				return board.shared && !board.deletedAt
+			})
+		},
+		filteredBoards: state => {
+			// filters the boards depending on the active filter
+			const boards = state.boards.filter(board => {
+				return (state.boardFilter === BOARD_FILTERS.ALL && board.archived === false)
+					|| (state.boardFilter === BOARD_FILTERS.ARCHIVED && board.archived === true)
+					|| (state.boardFilter === BOARD_FILTERS.SHARED && board.shared === 1)
+			})
+			return boards
+		},
+		currentBoardLabels: state => {
+			return state.currentBoard ? state.currentBoard.labels : []
+		},
+		canEdit: state => {
+			return state.currentBoard ? state.currentBoard.permissions.PERMISSION_EDIT : false
+		},
+		canManage: state => {
+			return state.currentBoard ? state.currentBoard.permissions.PERMISSION_MANAGE : false
+		},
+		canShare: state => {
+			return state.currentBoard ? state.currentBoard.permissions.PERMISSION_SHARE : false
+		},
+		isArchived: state => {
+			return state.currentBoard && state.currentBoard.archived
+		},
+	},
+	actions: {
+		setBoards(boards) {
+			this.boards = boards
+		},
+		setBoardFilter(filter) {
+			this.boardFilter = filter
+		},
+		toggleFilter(filter) {
+			Object.keys(filter).forEach((key) => {
+				switch (key) {
+				case 'due':
+					this.filter.due = filter.due
+					break
+				default:
+					filter[key].forEach((item) => {
+						const index = this.filter[key].indexOf(item)
+						if (index === -1) {
+							this.filter[key].push(item)
+						} else {
+							this.filter[key].splice(index, 1)
+						}
+					})
+					break
+				}
+			})
+		},
+		async loadBoards() {
+			const boards = await apiClient.loadBoards()
+			this.boards = boards
+		},
+		setCurrentBoard(board) {
+			this.currentBoard = board
+		},
+		setAssignableUsers(users) {
+			this.assignableUsers = users
+		},
+		setFilterInStore(filter) {
+			Object.assign(this.filter, filter)
+		},
+		toggleShowArchived(newState = undefined) {
+			this.showArchived = newState !== undefined ? newState : !this.showArchived
+		},
+		setViewMode(mode) {
+			if (!this.currentBoard) return
+			Vue.set(this.viewModeByBoard, this.currentBoard.id, mode)
+			localStorage.setItem(`deck.viewMode.${this.currentBoard.id}`, mode)
+		},
+		async loadBoardById(boardId) {
+			this.filter = { tags: [], users: [], due: '', unassigned: false, completed: 'both' }
+			this.setCurrentBoard(null)
+			const board = await apiClient.loadById(boardId)
+			this.setCurrentBoard(board)
+			this.setAssignableUsers(board.users)
+		},
+		async refreshBoard(boardId) {
+			const board = await apiClient.loadById(boardId)
+			const etagHasChanged = board.ETag !== this.currentBoard?.ETag
+			this.setCurrentBoard(board)
+			this.setAssignableUsers(board.users)
+
+			if (etagHasChanged) {
+				useStackStore().loadStacks(boardId)
+			}
+		},
+
+		async createBoard(boardData) {
+			try {
+				const board = await apiClient.createBoard(boardData)
+				this.addBoard(board)
+			} catch (err) {
+				return err
+			}
+		},
+
+		async importBoard(file) {
+			try {
+				const board = await apiClient.importBoard(file)
+				this.addBoard(board)
+			} catch (err) {
+				return err
+			}
+		},
+
+		async cloneBoard({ boardData, settings }) {
+			const { withCards, withAssignments, withLabels, withDueDate, moveCardsToLeftStack, restoreArchivedCards } = settings
+			try {
+				const newBoard = await apiClient.cloneBoard(boardData, withCards, withAssignments, withLabels, withDueDate, moveCardsToLeftStack, restoreArchivedCards)
+				const indexExisting = this.boards.findIndex((b) => {
+					return newBoard.id === b.id
+				})
+
+				if (indexExisting > -1) {
+					Vue.set(this.boards, indexExisting, newBoard)
+				} else {
+					this.boards.push(newBoard)
+				}
+				return newBoard
+			} catch (err) {
+				return err
+			}
+		},
+
+		archiveBoard(board) {
+			const boardCopy = JSON.parse(JSON.stringify(board))
+			boardCopy.archived = true
+			apiClient.updateBoard(boardCopy)
+				.then((board) => {
+					this.addBoard(board)
+				})
+		},
+		unarchiveBoard(board) {
+			const boardCopy = JSON.parse(JSON.stringify(board))
+			boardCopy.archived = false
+			apiClient.updateBoard(boardCopy)
+				.then((board) => {
+					this.addBoard(board)
+				})
+		},
+
+		/*
+		 * Adds or replaces a board in the store.
+		 * Matches a board by it's id.
+		 */
+		addBoard(board) {
+			const indexExisting = this.boards.findIndex((b) => {
+				return board.id === b.id
+			})
+
+			if (indexExisting > -1) {
+				Vue.set(this.boards, indexExisting, board)
+			} else {
+				this.boards.push(board)
+			}
+		},
+		removeBoard(board) {
+			this.boards = this.boards.filter((b) => {
+				return b.id !== board.id
+			})
+		},
+		async updateBoard(board) {
+			const storedBoard = await apiClient.updateBoard(board)
+			this.addBoard(storedBoard)
+
+			if (this.currentBoard?.id === storedBoard.id) {
+				this.setCurrentBoard(storedBoard)
+			}
+		},
+		async removeLabelFromCurrentBoard(label) {
+			const deletedLabel = await apiClient.deleteLabel(label)
+			const removeIndex = this.currentBoard?.labels?.findIndex((l) => deletedLabel.id === l.id)
+
+			if (removeIndex > -1) {
+				this.currentBoard.labels.splice(removeIndex, 1)
+			}
+		},
+		async updateLabelFromCurrentBoard(newLabel) {
+			const updated = await apiClient.updateLabel(newLabel)
+			const labelToUpdate = this.currentBoard?.labels?.find((l) => updated.id === l.id)
+
+			if (labelToUpdate) {
+				labelToUpdate.title = updated.title
+				labelToUpdate.color = updated.color
+			}
+		},
+		async addLabelToCurrentBoard(newLabel) {
+			newLabel.boardId = this.currentBoard.id
+			const created = await apiClient.createLabel(newLabel)
+			this.currentBoard?.labels?.push(created)
+		},
+		async addLabelToCurrentBoardAndCard({ newLabel, card }) {
+			newLabel.boardId = this.currentBoard.id
+			const label = await apiClient.createLabel(newLabel)
+			card.labels.push(label)
+			this.currentBoard?.labels?.push(label)
+			await useCardStore().addLabel({
+				card,
+				labelId: label.id,
+			})
+			return label
+		},
+		async addAclToCurrentBoard(newAcl) {
+			newAcl.boardId = this.currentBoard.id
+			const result = await apiClient.addAcl(newAcl)
+			this.currentBoard?.acl?.push(result)
+			this.refreshBoard(newAcl.boardId)
+		},
+		async updateAclFromCurrentBoard(acl) {
+			acl.boardId = this.currentBoard.id
+			const updatedAcl = await apiClient.updateAcl(acl)
+			const updateIndex = this.currentBoard?.acl?.findIndex((currentAcl) => {
+				return currentAcl.participant.uid === updatedAcl.participant.uid
+			})
+			if (updateIndex > -1) {
+				Vue.set(this.currentBoard.acl, updateIndex, updatedAcl)
+			}
+		},
+		async deleteAclFromCurrentBoard(acl) {
+			acl.boardId = this.currentBoard.id
+			const deletedAcl = await apiClient.deleteAcl(acl)
+			const removeIndex = this.currentBoard?.acl?.findIndex((attr) => deletedAcl.id === attr.id)
+
+			if (removeIndex > -1) {
+				Vue.delete(this.currentBoard.acl, removeIndex)
+			}
+			this.loadBoardById(deletedAcl.boardId)
+		},
+		async transferOwnership({ boardId, newOwner }) {
+			await axios.put(generateUrl(`apps/deck/boards/${boardId}/transferOwner`), {
+				newOwner,
+			})
+		},
+	},
+})
diff --git a/src/stores/card.js b/src/stores/card.js
index 774e53a4a9..a31d4cc6b4 100644
--- a/src/stores/card.js
+++ b/src/stores/card.js
@@ -9,6 +9,7 @@ import moment from 'moment'
 import Vue from 'vue'
 import { useStackStore } from './stack.js'
 import { useTrashbinStore } from './trashbin.js'
+import { useBoardStore } from './board.js'
 
 const apiClient = new CardApi()
 
@@ -19,8 +20,7 @@ export const useCardStore = defineStore('card', {
 	getters: {
 		cardsByStack(state) {
 			return (id) => state.cards.filter((card) => {
-				const { tags, users, due, unassigned, completed } = this.$vuex.state.filter
-
+				const { tags, users, due, unassigned, completed } = useBoardStore().filter
 				if (completed === 'open' && card.done !== null) {
 					return false
 				}
@@ -350,32 +350,32 @@ export const useCardStore = defineStore('card', {
 			}
 		},
 		async assignCardToUser({ card, assignee }) {
-			const boardId = this.$vuex.state.currentBoard.id
+			const boardId = useBoardStore().currentBoard.id
 			const user = await apiClient.assignUser(card.id, assignee.userId, assignee.type, boardId)
 			this.assignCardToUserInStore(user)
 		},
 		async removeUserFromCard({ card, assignee }) {
-			const boardId = this.$vuex.state.currentBoard.id
+			const boardId = useBoardStore().currentBoard.id
 			const user = await apiClient.removeUser(card.id, assignee.userId, assignee.type, boardId)
 			this.removeUserFromCardInStore(user)
 		},
 		async addLabel(data) {
-			data.boardId = this.$vuex.state.currentBoard.id
+			data.boardId = useBoardStore().currentBoard.id
 			await apiClient.assignLabelToCard(data)
 			this.updateCardProperty({ property: 'labels', card: data.card })
 		},
 		async removeLabel(data) {
-			data.boardId = this.$vuex.state.currentBoard.id
+			data.boardId = useBoardStore().currentBoard.id
 			await apiClient.removeLabelFromCard(data)
 			this.updateCardProperty({ property: 'labels', card: data.card })
 		},
 		async assignDependentCard({ card, dependentCard }) {
-			const boardId = this.$vuex.state.currentBoard.id
+			const boardId = useBoardStore().currentBoard.id
 			const updatedCard = await apiClient.assignDependentCard(card.id, dependentCard.id, boardId)
 			this.updateCardProperty({ property: 'dependentCards', card: updatedCard })
 		},
 		async removeDependentCard({ card, dependentCardId }) {
-			const boardId = this.$vuex.state.currentBoard.id
+			const boardId = useBoardStore().currentBoard.id
 			const updatedCard = await apiClient.removeDependentCard(card.id, dependentCardId, boardId)
 			this.updateCardProperty({ property: 'dependentCards', card: updatedCard })
 		},
@@ -408,7 +408,7 @@ export const useCardStore = defineStore('card', {
 		addCardData(cardData) {
 			const card = { ...cardData }
 			useStackStore().addStack(card.relatedStack)
-			this.$vuex.commit('addBoard', card.relatedBoard)
+			useBoardStore().addBoard(card.relatedBoard)
 			delete card.relatedStack
 			delete card.relatedBoard
 			this.addCardToStore(card)
diff --git a/src/stores/overview.js b/src/stores/overview.js
index 9ebff675fd..758214fdc0 100644
--- a/src/stores/overview.js
+++ b/src/stores/overview.js
@@ -6,6 +6,7 @@
 import { defineStore } from 'pinia'
 import { OverviewApi } from '../services/OverviewApi.js'
 import { useCardStore } from './card.js'
+import { useBoardStore } from './board.js'
 
 const overviewApi = new OverviewApi()
 
@@ -21,7 +22,7 @@ export const useOverviewStore = defineStore('overview', {
 			}
 			const promise = (async () => {
 				const cardStore = useCardStore()
-				this.$vuex.commit('setCurrentBoard', null)
+				useBoardStore().setCurrentBoard(null)
 				const assignedCards = await overviewApi.get('upcoming')
 				const assignedCardsFlat = Object.values(assignedCards).flat()
 				for (const i in assignedCardsFlat) {
diff --git a/src/stores/stack.js b/src/stores/stack.js
index 987e3fb1b0..d1c3929065 100644
--- a/src/stores/stack.js
+++ b/src/stores/stack.js
@@ -9,6 +9,7 @@ import { StackApi } from '../services/StackApi.js'
 import applyOrderToArray from '../helpers/applyOrderToArray.js'
 import { useTrashbinStore } from './trashbin.js'
 import { useCardStore } from './card.js'
+import { useBoardStore } from './board.js'
 
 const apiClient = new StackApi()
 
@@ -53,7 +54,7 @@ export const useStackStore = defineStore('stack', {
 		async loadStacks(boardId) {
 			const cardStore = useCardStore()
 			let call = 'loadStacks'
-			if (this.$vuex.state.showArchived === true) {
+			if (useBoardStore().showArchived === true) {
 				call = 'loadArchivedStacks'
 			}
 			const stacks = await apiClient[call](boardId)
@@ -85,7 +86,7 @@ export const useStackStore = defineStore('stack', {
 			cardStore.setCards(cards)
 		},
 		createStack(stack) {
-			stack.boardId = this.$vuex.state.currentBoard.id
+			stack.boardId = useBoardStore().currentBoard.id
 			apiClient.createStack(stack)
 				.then((createdStack) => {
 					this.addStack(createdStack)

From 58125bf9fa86645414bd71dbd4862f8cbf158629 Mon Sep 17 00:00:00 2001
From: grnd-alt <git@belakkaf.net>
Date: Wed, 5 Aug 2026 12:23:45 +0200
Subject: [PATCH 2/2] fix(widgets): supply pinia instance to deck widgets

Signed-off-by: grnd-alt <git@belakkaf.net>
---
 src/init-reference.js | 32 ++++++++++++++++++++++++--------
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/init-reference.js b/src/init-reference.js
index 28213a36a3..337f39f820 100644
--- a/src/init-reference.js
+++ b/src/init-reference.js
@@ -9,9 +9,10 @@ import storeFactory from './store/main.js'
 
 import './shared-init.js'
 
-const prepareVue = async (Component = null) => {
+const prepareVue = async (Component = null, store = null) => {
 	const { default: Vue } = await import('vue')
 	const { default: ClickOutside } = await import('vue-click-outside')
+	const { createPinia, PiniaVuePlugin } = await import('pinia')
 
 	Vue.prototype.t = translate
 	Vue.prototype.n = translatePlural
@@ -23,22 +24,33 @@ const prepareVue = async (Component = null) => {
 			el.focus()
 		},
 	})
+	Vue.use(PiniaVuePlugin)
+
+	const pinia = createPinia()
+	if (store) {
+		pinia.use(() => ({ $vuex: store }))
+	}
+
 	if (!Component) {
-		return Vue
+		return { Vue, pinia }
 	}
 
-	return Vue.extend(Component)
+	return {
+		Widget: Vue.extend(Component),
+		pinia,
+	}
 }
 
 registerWidget('deck-card', async (el, { richObjectType, richObject, accessible }) => {
 	const { default: CardReferenceWidget } = await import('./views/CardReferenceWidget.vue')
-	const Widget = await prepareVue(CardReferenceWidget)
+	const { Widget, pinia } = await prepareVue(CardReferenceWidget)
 	// trick to change the wrapper element size, otherwise it always is 100%
 	// which is not very nice with a simple card
 	el.parentNode.style['max-width'] = '400px'
 	el.parentNode.style['margin-left'] = '0'
 	el.parentNode.style['margin-right'] = '0'
 	new Widget({
+		pinia,
 		propsData: {
 			richObjectType,
 			richObject,
@@ -50,9 +62,11 @@ registerWidget('deck-card', async (el, { richObjectType, richObject, accessible
 const boardWidgets = {}
 registerWidget('deck-board', async (el, { richObjectType, richObject, accessible, interactive }) => {
 	const { default: BoardReferenceWidget } = await import('./views/BoardReferenceWidget.vue')
-	const Widget = await prepareVue(BoardReferenceWidget)
+	const store = storeFactory()
+	const { Widget, pinia } = await prepareVue(BoardReferenceWidget, store)
 	boardWidgets[el] = new Widget({
-		store: storeFactory(),
+		store,
+		pinia,
 		propsData: {
 			richObjectType,
 			richObject,
@@ -67,13 +81,14 @@ registerWidget('deck-board', async (el, { richObjectType, richObject, accessible
 
 registerWidget('deck-comment', async (el, { richObjectType, richObject, accessible }) => {
 	const { default: CommentReferenceWidget } = await import('./views/CommentReferenceWidget.vue')
-	const Widget = await prepareVue(CommentReferenceWidget)
+	const { Widget, pinia } = await prepareVue(CommentReferenceWidget)
 
 	el.parentNode.style['max-width'] = '400px'
 	el.parentNode.style['margin-left'] = '0'
 	el.parentNode.style['margin-right'] = '0'
 
 	new Widget({
+		pinia,
 		propsData: {
 			richObjectType,
 			richObject,
@@ -84,8 +99,9 @@ registerWidget('deck-comment', async (el, { richObjectType, richObject, accessib
 
 registerCustomPickerElement('create-new-deck-card', async (el, { providerId, accessible }) => {
 	const { default: CreateNewCardCustomPicker } = await import('./views/CreateNewCardCustomPicker.vue')
-	const Element = await prepareVue(CreateNewCardCustomPicker)
+	const { Widget: Element, pinia } = await prepareVue(CreateNewCardCustomPicker)
 	const vueElement = new Element({
+		pinia,
 		propsData: {
 			providerId,
 			accessible,