From a9921749bd9f422fa660388232f9ae21d61bd3ea Mon Sep 17 00:00:00 2001
From: grnd-alt <git@belakkaf.net>
Date: Tue, 28 Jul 2026 10:03:14 +0200
Subject: [PATCH] refactor(store): move cardStore to pinia

Signed-off-by: grnd-alt <git@belakkaf.net>
---
 src/CardMoveDialog.vue                        |  14 +-
 src/components/board/Board.vue                |   6 +-
 src/components/board/GanttView.vue            |  10 +-
 src/components/board/Stack.vue                |  26 +-
 src/components/card/CardSidebar.vue           |  10 +-
 src/components/card/CardSidebarTabDetails.vue |  28 +-
 .../card/DependentCardsSelector.vue           |  14 +-
 src/components/card/Description.vue           |   7 +-
 src/components/card/DueDateSelector.vue       |  10 +-
 src/components/cards/CardCover.vue            |   8 +-
 src/components/cards/CardItem.vue             |  28 +-
 src/components/cards/CardMenuEntries.vue      |  23 +-
 src/store/card.js                             | 425 ------------------
 src/store/main.js                             |   4 -
 src/stores/attachment.js                      |  16 +-
 src/stores/card.js                            | 418 +++++++++++++++++
 src/stores/overview.js                        |   4 +-
 src/stores/stack.js                           |  12 +-
 src/stores/trashbin.js                        |   3 +-
 19 files changed, 572 insertions(+), 494 deletions(-)
 delete mode 100644 src/store/card.js
 create mode 100644 src/stores/card.js

diff --git a/src/CardMoveDialog.vue b/src/CardMoveDialog.vue
index 831c2d25d1..05f4779f45 100644
--- a/src/CardMoveDialog.vue
+++ b/src/CardMoveDialog.vue
@@ -38,8 +38,9 @@ import { generateOcsUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { mapGetters } from 'vuex'
-import { mapState } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 import { useStackStore } from './stores/stack.js'
+import { useCardStore } from './stores/card.js'
 
 export default {
 	name: 'CardMoveDialog',
@@ -79,6 +80,11 @@ export default {
 		unsubscribe('deck:card:show-move-dialog', this.openModal)
 	},
 	methods: {
+		...mapActions(useCardStore, {
+			moveCardInStore: 'moveCard',
+			addNewCardInStore: 'addNewCard',
+			cloneCardInStore: 'cloneCard',
+		}),
 		openModal(card) {
 			this.card = card
 			this.selectedStack = this.stackById(this.card.stackId)
@@ -98,14 +104,14 @@ export default {
 		async moveCard() {
 			this.copiedCard = Object.assign({}, this.card)
 			this.copiedCard.stackId = this.selectedStack.id
-			this.$store.dispatch('moveCard', { card: this.copiedCard, oldBoardId: this.selectedBoard.id })
+			await this.moveCardInStore({ card: this.copiedCard, oldBoardId: this.selectedBoard.id })
 			if (parseInt(this.selectedBoard.id) === parseInt(this.selectedStack.boardId)) {
-				await this.$store.commit('addNewCard', { ...this.copiedCard })
+				this.addNewCardInStore({ ...this.copiedCard })
 			}
 			this.modalShow = false
 		},
 		async cloneCard() {
-			this.$store.dispatch('cloneCard', { cardId: this.card.id, targetStackId: this.selectedStack.id })
+			await this.cloneCardInStore({ cardId: this.card.id, targetStackId: this.selectedStack.id })
 			this.modalShow = false
 		},
 	},
diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue
index 0af01efd9a..522a97ebe5 100644
--- a/src/components/board/Board.vue
+++ b/src/components/board/Board.vue
@@ -100,6 +100,7 @@ import { createSession } from '../../sessions.js'
 import CardSidebar from '../card/CardSidebar.vue'
 import { mapActions, mapState } from 'pinia'
 import { useStackStore } from '../../stores/stack.js'
+import { useCardStore } from '../../stores/card.js'
 export default {
 	name: 'Board',
 	components: {
@@ -139,6 +140,7 @@ export default {
 	},
 	computed: {
 		...mapState(useStackStore, ['stacksByBoard']),
+		...mapState(useCardStore, ['cardById']),
 		...mapStateVuex({
 			isFullApp: state => state.isFullApp,
 			board: state => state.currentBoard,
@@ -192,10 +194,10 @@ export default {
 
 				const routeCardId = this.$route?.params?.cardId ? parseInt(this.$route.params.cardId) : null
 				// If an archived card is requested, and we cannot find it in the current we load the archived stacks instead
-				if (routeCardId && !this.$store.getters.cardById(routeCardId)) {
+				if (routeCardId && !this.cardById(routeCardId)) {
 					await this.loadArchivedStacks(this.id)
 
-					if (this.$store.getters.cardById(routeCardId)) {
+					if (this.cardById(routeCardId)) {
 						this.$store.commit('toggleShowArchived', true)
 					}
 				}
diff --git a/src/components/board/GanttView.vue b/src/components/board/GanttView.vue
index f0c06f8a5d..6afd783d00 100644
--- a/src/components/board/GanttView.vue
+++ b/src/components/board/GanttView.vue
@@ -60,12 +60,14 @@
 
 <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
 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'
+import { useCardStore } from '../../stores/card.js'
 
 const STACK_COLORS = [
 	'#0082c9', '#4caf50', '#ff9800', '#e91e63',
@@ -198,7 +200,8 @@ export default {
 		}
 	},
 	computed: {
-		...mapGetters(['cardsByStack', 'canEdit']),
+		...mapGetters(['canEdit']),
+		...mapState(useCardStore, ['cardsByStack']),
 		partitionedCards() {
 			const undatedCards = []
 			const ganttTasks = []
@@ -294,6 +297,9 @@ export default {
 		this.ganttInstance = null
 	},
 	methods: {
+		...mapActions(useCardStore, {
+			updateCardDatesInStore: 'updateCardDates',
+		}),
 		cardToGanttTask(card, stackIndex) {
 			let start = card.startdate ? new Date(card.startdate) : null
 			let end = card.duedate ? new Date(card.duedate) : null
@@ -371,7 +377,7 @@ export default {
 			this.fitColumnsToWidth()
 		},
 		async updateTaskDate(task, start, end) {
-			await this.$store.dispatch('updateCardDates', {
+			await this.updateCardDatesInStore({
 				...task._card,
 				startdate: new Date(start).toISOString(),
 				duedate: new Date(end).toISOString(),
diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 9936f556b6..317e767752 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -149,7 +149,8 @@
 
 <script>
 import ClickOutside from 'vue-click-outside'
-import { mapGetters, mapState } from 'vuex'
+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'
 import CardPlusOutline from 'vue-material-design-icons/CardPlusOutline.vue'
@@ -160,9 +161,9 @@ import { showError, showUndo } from '@nextcloud/dialogs'
 import CardItem from '../cards/CardItem.vue'
 
 import '@nextcloud/dialogs/style.css'
-import { mapActions } from 'pinia'
 import { useTrashbinStore } from '../../stores/trashbin.js'
 import { useStackStore } from '../../stores/stack.js'
+import { useCardStore } from '../../stores/card.js'
 
 export default {
 	name: 'Stack',
@@ -212,11 +213,14 @@ export default {
 			'canEdit',
 			'isArchived',
 		]),
-		...mapState({
+		...mapStateVuex({
 			showArchived: state => state.showArchived,
 		}),
+		...mapState(useCardStore, {
+			cardsByStackGetter: 'cardsByStack',
+		}),
 		cardsByStack() {
-			return this.$store.getters.cardsByStack(this.stack.id).filter((card) => {
+			return this.cardsByStackGetter(this.stack.id).filter((card) => {
 				if (this.showArchived) {
 					return card.archived
 				}
@@ -257,6 +261,11 @@ export default {
 	methods: {
 		...mapActions(useTrashbinStore, ['stackUndoDelete']),
 		...mapActions(useStackStore, ['setDoneStack', 'deleteStack', 'updateStack']),
+		...mapActions(useCardStore, {
+			reorderCardInStore: 'reorderCard',
+			archiveUnarchiveCardInStore: 'archiveUnarchiveCard',
+			addCardInStore: 'addCard',
+		}),
 		stopCardCreation(e) {
 			// For some reason the submit event triggers a MouseEvent that is bubbling to the outside
 			// so we have to ignore it
@@ -276,12 +285,12 @@ export default {
 					card.stackId = stackId
 					card.order = addedIndex
 					console.debug('move card to stack', card.stackId, card.order)
-					await this.$store.dispatch('reorderCard', card)
+					await this.reorderCardInStore(card)
 				}
 				if (addedIndex !== null && removedIndex !== null) {
 					card.order = addedIndex
 					console.debug('move card in stack', card.stackId, card.order)
-					await this.$store.dispatch('reorderCard', card)
+					await this.reorderCardInStore(card)
 				}
 			}
 		},
@@ -302,11 +311,10 @@ export default {
 			showUndo(t('deck', 'List deleted'), () => this.stackUndoDelete(stack))
 		},
 		setArchivedToAllCardsFromStack(stack, isArchived) {
-
 			this.stackTransfer.total = this.cardsByStack.length
 			this.cardsByStack.forEach((card, index) => {
 				this.stackTransfer.current = index
-				this.$store.dispatch('archiveUnarchiveCard', { ...card, archived: isArchived })
+				this.archiveUnarchiveCardInStore({ ...card, archived: isArchived })
 			})
 			this.modalArchivAllCardsShow = false
 		},
@@ -331,7 +339,7 @@ export default {
 			this.stateCardCreating = true
 			try {
 				this.animate = true
-				const newCard = await this.$store.dispatch('addCard', {
+				const newCard = await this.addCardInStore({
 					title: this.newCardTitle,
 					stackId: this.stack.id,
 					boardId: this.stack.boardId,
diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue
index c162b8d905..713e38e223 100644
--- a/src/components/card/CardSidebar.vue
+++ b/src/components/card/CardSidebar.vue
@@ -101,6 +101,8 @@ import ActivityIcon from 'vue-material-design-icons/LightningBolt.vue'
 import { showError, showWarning } from '@nextcloud/dialogs'
 import { getLocale } from '@nextcloud/l10n'
 import CardMenuEntries from '../cards/CardMenuEntries.vue'
+import { mapActions, mapState } from 'pinia'
+import { useCardStore } from '../../stores/card.js'
 
 const capabilities = getCapabilities()
 
@@ -151,6 +153,7 @@ export default {
 		}
 	},
 	computed: {
+		...mapState(useCardStore, ['cardById']),
 		...mapStateVuex({
 			isFullApp: (state) => state.isFullApp,
 			currentBoard: (state) => state.currentBoard,
@@ -158,7 +161,7 @@ export default {
 		}),
 		...mapGetters(['canEdit', 'assignables']),
 		currentCard() {
-			return this.$store.getters.cardById(this.id)
+			return this.cardById(this.id)
 		},
 		cardOwnerDisplayName() {
 			return this.currentCard.owner?.displayname ?? this.currentCard.owner?.uid ?? this.currentCard.owner ?? null
@@ -216,6 +219,9 @@ export default {
 		},
 	},
 	methods: {
+		...mapActions(useCardStore, {
+			updateCardTitleInStore: 'updateCardTitle',
+		}),
 		focusHeader() {
 			this.$nextTick(() => {
 				this.$refs?.cardSidebar.$el.querySelector('.app-sidebar-header__mainname')?.focus()
@@ -227,7 +233,7 @@ export default {
 				return
 			}
 			this.isEditingTitle = false
-			this.$store.dispatch('updateCardTitle', {
+			this.updateCardTitleInStore({
 				...this.currentCard,
 				title: this.titleEditing,
 			})
diff --git a/src/components/card/CardSidebarTabDetails.vue b/src/components/card/CardSidebarTabDetails.vue
index 5602d115a9..18edd93de4 100644
--- a/src/components/card/CardSidebarTabDetails.vue
+++ b/src/components/card/CardSidebarTabDetails.vue
@@ -48,6 +48,7 @@
 
 <script>
 import { mapState, mapGetters } from 'vuex'
+import { mapActions } from 'pinia'
 import moment from '@nextcloud/moment'
 import { loadState } from '@nextcloud/initial-state'
 
@@ -63,6 +64,7 @@ import DueDateSelector from './DueDateSelector.vue'
 import StartDateSelector from './StartDateSelector.vue'
 import { debounce } from 'lodash'
 import DependentCardsSelector from './DependentCardsSelector.vue'
+import { useCardStore } from '../../stores/card.js'
 
 export default {
 	name: 'CardSidebarTabDetails',
@@ -116,6 +118,16 @@ export default {
 		this.initialize()
 	},
 	methods: {
+		...mapActions(useCardStore, {
+			assignCardToUserInStore: 'assignCardToUser',
+			removeUserFromCardInStore: 'removeUserFromCard',
+			updateCardDueInStore: 'updateCardDue',
+			updateCardStartDateInStore: 'updateCardStartDate',
+			addLabelInStore: 'addLabel',
+			removeLabelInStore: 'removeLabel',
+			assignDependentCardInStore: 'assignDependentCard',
+			removeDependentCardInStore: 'removeDependentCard',
+		}),
 		async descriptionChanged(newDesc) {
 			if (newDesc === this.copiedCard.description) {
 				return
@@ -133,7 +145,7 @@ export default {
 		},
 
 		assignUserToCard(user) {
-			this.$store.dispatch('assignCardToUser', {
+			this.assignCardToUserInStore({
 				card: this.copiedCard,
 				assignee: {
 					userId: user.uid,
@@ -143,7 +155,7 @@ export default {
 		},
 
 		removeUserFromCard(user) {
-			this.$store.dispatch('removeUserFromCard', {
+			this.removeUserFromCardInStore({
 				card: this.copiedCard,
 				assignee: {
 					userId: user.uid,
@@ -153,7 +165,7 @@ export default {
 		},
 
 		updateCardDue(val) {
-			this.$store.dispatch('updateCardDue', {
+			this.updateCardDueInStore({
 				...this.copiedCard,
 				duedate: val ? (new Date(val)).toISOString() : null,
 			})
@@ -164,7 +176,7 @@ export default {
 		}, 500, { leading: true }),
 
 		updateCardStartDate(val) {
-			this.$store.dispatch('updateCardStartDate', {
+			this.updateCardStartDateInStore({
 				...this.copiedCard,
 				startdate: val ? (new Date(val)).toISOString() : null,
 			})
@@ -181,7 +193,7 @@ export default {
 				labelId: newLabel.id,
 				boardId: this.copiedCard.boardId,
 			}
-			this.$store.dispatch('addLabel', data)
+			this.addLabelInStore(data)
 		},
 
 		async addLabelToBoardAndCard(name) {
@@ -206,7 +218,7 @@ export default {
 				card: this.copiedCard,
 				labelId: removedLabel.id,
 			}
-			this.$store.dispatch('removeLabel', data)
+			this.removeLabelInStore(data)
 		},
 		assignDependentCard(dependentCard) {
 			if (!dependentCard?.id) {
@@ -221,7 +233,7 @@ export default {
 				this.copiedCard.dependentCards.push(dependentCard.id)
 			}
 
-			this.$store.dispatch('assignDependentCard', {
+			this.assignDependentCardInStore({
 				card: this.copiedCard,
 				dependentCard,
 			})
@@ -236,7 +248,7 @@ export default {
 				this.copiedCard.dependentCards = this.copiedCard.dependentCards.filter((id) => id !== dependentCardId)
 			}
 
-			this.$store.dispatch('removeDependentCard', {
+			this.removeDependentCardInStore({
 				card: this.copiedCard,
 				dependentCardId,
 			})
diff --git a/src/components/card/DependentCardsSelector.vue b/src/components/card/DependentCardsSelector.vue
index ab4d31e891..0a4a284a1a 100644
--- a/src/components/card/DependentCardsSelector.vue
+++ b/src/components/card/DependentCardsSelector.vue
@@ -88,7 +88,6 @@
 
 <script>
 import { defineComponent } from 'vue'
-import { mapGetters, mapState as mapStateVuex } from 'vuex'
 import { generateUrl } from '@nextcloud/router'
 import { NcSelect, NcButton } from '@nextcloud/vue'
 import ListBoxOutline from 'vue-material-design-icons/ListBoxOutline.vue'
@@ -97,8 +96,9 @@ import CheckCircle from 'vue-material-design-icons/CheckCircle.vue'
 import Close from 'vue-material-design-icons/Close.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import CardDetailEntry from './CardDetailEntry.vue'
-import { mapState } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 import { useStackStore } from '../../stores/stack.js'
+import { useCardStore } from '../../stores/card.js'
 
 export default defineComponent({
 	name: 'DependentCardsSelector',
@@ -129,10 +129,7 @@ export default defineComponent({
 	},
 	computed: {
 		...mapState(useStackStore, ['stackById']),
-		...mapStateVuex({
-			cards: state => state.card.cards,
-		}),
-		...mapGetters(['cardById']),
+		...mapState(useCardStore, ['cards', 'cardById']),
 		isEditable() {
 			return this.canEdit && !this.card?.done && !this.card?.archived
 		},
@@ -159,6 +156,9 @@ export default defineComponent({
 		},
 	},
 	methods: {
+		...mapActions(useCardStore, {
+			changeCardDoneStatusInStore: 'changeCardDoneStatus',
+		}),
 		openSelector() {
 			this.showSelector = true
 			this.$nextTick(() => {
@@ -208,7 +208,7 @@ export default defineComponent({
 			window.location = generateUrl('/apps/deck') + `#/board/${boardId}/card/${dependentCard.id}`
 		},
 		changeCardDoneStatus(card) {
-			this.$store.dispatch('changeCardDoneStatus', { ...card, done: !card.done })
+			this.changeCardDoneStatusInStore({ ...card, done: !card.done })
 		},
 	},
 })
diff --git a/src/components/card/Description.vue b/src/components/card/Description.vue
index 1bd3457b91..125635382d 100644
--- a/src/components/card/Description.vue
+++ b/src/components/card/Description.vue
@@ -76,6 +76,8 @@ import { generateUrl } from '@nextcloud/router'
 import { showWarning } from '@nextcloud/dialogs'
 import PaperclipIcon from 'vue-material-design-icons/Paperclip.vue'
 import { mapState } from 'vuex'
+import { mapActions } from 'pinia'
+import { useCardStore } from '../../stores/card.js'
 
 const markdownIt = new MarkdownIt({
 	linkify: true,
@@ -195,6 +197,9 @@ export default {
 		await this.destroyEditor()
 	},
 	methods: {
+		...mapActions(useCardStore, {
+			updateCardDescInStore: 'updateCardDesc',
+		}),
 		async setupEditor() {
 			await this.destroyEditor()
 			this.descriptionLastEdit = 0
@@ -309,7 +314,7 @@ export default {
 			this.descriptionSaving = true
 			try {
 				if (this.card.id !== undefined) {
-					await this.$store.dispatch('updateCardDesc', { ...this.card, description: this.description })
+					await this.updateCardDescInStore({ ...this.card, description: this.description })
 				}
 				this.$emit('change', this.description)
 				this.descriptionLastEdit = 0
diff --git a/src/components/card/DueDateSelector.vue b/src/components/card/DueDateSelector.vue
index 1e75237750..f7aa69bfcd 100644
--- a/src/components/card/DueDateSelector.vue
+++ b/src/components/card/DueDateSelector.vue
@@ -89,6 +89,7 @@
 
 <script>
 import { defineComponent } from 'vue'
+import { mapActions } from 'pinia'
 import {
 	NcActionButton,
 	NcActions,
@@ -106,6 +107,7 @@ import CalendarCheck from 'vue-material-design-icons/CalendarCheckOutline.vue'
 import CheckIcon from 'vue-material-design-icons/Check.vue'
 import ClearIcon from 'vue-material-design-icons/Close.vue'
 import CardDetailEntry from './CardDetailEntry.vue'
+import { useCardStore } from '../../stores/card.js'
 
 export default defineComponent({
 	name: 'DueDateSelector',
@@ -207,6 +209,10 @@ export default defineComponent({
 		},
 	},
 	methods: {
+		...mapActions(useCardStore, {
+			changeCardDoneStatusInStore: 'changeCardDoneStatus',
+			archiveUnarchiveCardInStore: 'archiveUnarchiveCard',
+		}),
 		initDate() {
 			if (this.duedate === null) {
 				// We initialize empty dates with a time once clicked to make picking a day easier
@@ -229,10 +235,10 @@ export default defineComponent({
 			return momentObject?.minute(0).second(0).millisecond(0).toDate() || null
 		},
 		changeCardDoneStatus() {
-			this.$store.dispatch('changeCardDoneStatus', { ...this.card, done: !this.card.done })
+			this.changeCardDoneStatusInStore({ ...this.card, done: !this.card.done })
 		},
 		archiveUnarchiveCard() {
-			this.$store.dispatch('archiveUnarchiveCard', { ...this.card, archived: !this.card.archived })
+			this.archiveUnarchiveCardInStore({ ...this.card, archived: !this.card.archived })
 		},
 	},
 })
diff --git a/src/components/cards/CardCover.vue b/src/components/cards/CardCover.vue
index 75df0256a2..c5ac6c27e1 100644
--- a/src/components/cards/CardCover.vue
+++ b/src/components/cards/CardCover.vue
@@ -12,9 +12,10 @@
 	</div>
 </template>
 <script>
-import { mapActions } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 import { generateUrl } from '@nextcloud/router'
 import { useAttachmentStore } from '../../stores/attachment.js'
+import { useCardStore } from '../../stores/card.js'
 export default {
 	name: 'CardCover',
 	props: {
@@ -24,6 +25,7 @@ export default {
 		},
 	},
 	computed: {
+		...mapState(useCardStore, ['cardById']),
 		attachments() {
 			return [...this.$store.getters.attachmentsByCard(this.cardId)]
 				// Filter deleted and hasPreview
@@ -45,7 +47,7 @@ export default {
 			)
 		},
 		card() {
-			return this.$store.getters.cardById(this.cardId)
+			return this.cardById(this.cardId)
 		},
 		referencePreview() {
 			return this.card?.referenceData?.richObject?.thumb
@@ -55,7 +57,7 @@ export default {
 		cardId: {
 			immediate: true,
 			handler() {
-				if (this.$store.getters.cardById(this.cardId)?.attachmentCount > 0) {
+				if (this.card?.attachmentCount > 0) {
 					this.fetchAttachments(this.cardId)
 				}
 			},
diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index 0aaed963b2..ad8f2d663c 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -87,8 +87,9 @@ import CardMenu from './CardMenu.vue'
 import CardCover from './CardCover.vue'
 import DueDate from './badges/DueDate.vue'
 import { getCurrentUser } from '@nextcloud/auth'
-import { mapState } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 import { useStackStore } from '../../stores/stack.js'
+import { useCardStore } from '../../stores/card.js'
 
 const TITLE_EDITING_STATE = {
 	OFF: 0,
@@ -130,6 +131,7 @@ export default {
 	},
 	computed: {
 		...mapState(useStackStore, ['stackById']),
+		...mapState(useCardStore, ['cardById']),
 		...mapStateVuex({
 			compactMode: state => state.compactMode,
 			showArchived: state => state.showArchived,
@@ -155,7 +157,7 @@ export default {
 			return board ? !board.archived && board.permissions.PERMISSION_EDIT : false
 		},
 		card() {
-			return this.item ? this.item : this.$store.getters.cardById(this.id)
+			return this.item ? this.item : this.cardById(this.id)
 		},
 		displayTitle() {
 			const reference = this.card?.referenceData
@@ -217,6 +219,13 @@ export default {
 		},
 	},
 	methods: {
+		...mapActions(useCardStore, {
+			updateCardTitleInStore: 'updateCardTitle',
+			archiveUnarchiveCardInStore: 'archiveUnarchiveCard',
+			changeCardDoneStatusInStore: 'changeCardDoneStatus',
+			removeUserFromCardInStore: 'removeUserFromCard',
+			assignCardToUserInStore: 'assignCardToUser',
+		}),
 		hasSelection() {
 			const selection = window.getSelection()
 			return selection.toString() !== ''
@@ -261,7 +270,7 @@ export default {
 			}
 			this.editingTitle = TITLE_EDITING_STATE.OFF
 			if (value !== this.card.title) {
-				this.$store.dispatch('updateCardTitle', {
+				this.updateCardTitleInStore({
 					...this.card,
 					title: value,
 				})
@@ -285,10 +294,10 @@ export default {
 				this.triggerEditTitle()
 				break
 			case 'KeyA':
-				this.$store.dispatch('archiveUnarchiveCard', { ...this.card, archived: !this.card.archived })
+				this.archiveUnarchiveCardInStore({ ...this.card, archived: !this.card.archived })
 				break
 			case 'KeyO':
-				this.$store.dispatch('changeCardDoneStatus', { ...this.card, done: !this.card.done })
+				this.changeCardDoneStatusInStore({ ...this.card, done: !this.card.done })
 				break
 			case 'KeyM':
 				this.$el.querySelector('button.action-item__menutoggle')?.click()
@@ -312,13 +321,18 @@ export default {
 			const isAssigned = this.card.assignedUsers.find(
 				(item) => item.type === 0 && item.participant.uid === getCurrentUser()?.uid,
 			)
-			this.$store.dispatch(isAssigned ? 'removeUserFromCard' : 'assignCardToUser', {
+			const assigneeData = {
 				card: this.card,
 				assignee: {
 					userId: getCurrentUser()?.uid,
 					type: 0,
 				},
-			})
+			}
+			if (isAssigned) {
+				this.removeUserFromCardInStore(assigneeData)
+				return
+			}
+			this.assignCardToUserInStore(assigneeData)
 		},
 		scrollIntoView() {
 			this.$el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' })
diff --git a/src/components/cards/CardMenuEntries.vue b/src/components/cards/CardMenuEntries.vue
index c294422cc1..d7e73cb6da 100644
--- a/src/components/cards/CardMenuEntries.vue
+++ b/src/components/cards/CardMenuEntries.vue
@@ -100,7 +100,8 @@ import { emit } from '@nextcloud/event-bus'
 import { useActionsStore } from '../../stores/actions.js'
 import { useTrashbinStore } from '../../stores/trashbin.js'
 import { useStackStore } from '../../stores/stack.js'
-import { mapState } from 'pinia'
+import { useCardStore } from '../../stores/card.js'
+import { mapActions, mapState } from 'pinia'
 
 export default {
 	name: 'CardMenuEntries',
@@ -175,6 +176,14 @@ export default {
 		},
 	},
 	methods: {
+		...mapActions(useCardStore, {
+			deleteCardInStore: 'deleteCard',
+			changeCardDoneStatusInStore: 'changeCardDoneStatus',
+			archiveUnarchiveCardInStore: 'archiveUnarchiveCard',
+			assignCardToUserInStore: 'assignCardToUser',
+			removeUserFromCardInStore: 'removeUserFromCard',
+			updateCardColorInStore: 'updateCardColor',
+		}),
 		openCard() {
 			const boardId = this.card?.boardId ? this.card.boardId : this.$route?.params.id ?? this.currentBoard.id
 
@@ -189,7 +198,7 @@ export default {
 			this.$emit('edit-title', this.card.id)
 		},
 		deleteCard() {
-			this.$store.dispatch('deleteCard', this.card)
+			this.deleteCardInStore(this.card)
 			const undoCard = { ...this.card, deletedAt: 0 }
 			showUndo(t('deck', 'Card deleted'), () => useTrashbinStore().cardUndoDelete(undoCard))
 			if (this.$router.currentRoute.name === 'card') {
@@ -197,13 +206,13 @@ export default {
 			}
 		},
 		changeCardDoneStatus() {
-			this.$store.dispatch('changeCardDoneStatus', { ...this.card, done: !this.card.done })
+			this.changeCardDoneStatusInStore({ ...this.card, done: !this.card.done })
 		},
 		archiveUnarchiveCard() {
-			this.$store.dispatch('archiveUnarchiveCard', { ...this.card, archived: !this.card.archived })
+			this.archiveUnarchiveCardInStore({ ...this.card, archived: !this.card.archived })
 		},
 		assignCardToMe() {
-			this.$store.dispatch('assignCardToUser', {
+			this.assignCardToUserInStore({
 				card: this.card,
 				assignee: {
 					userId: getCurrentUser()?.uid,
@@ -212,7 +221,7 @@ export default {
 			})
 		},
 		unassignCardFromMe() {
-			this.$store.dispatch('removeUserFromCard', {
+			this.removeUserFromCardInStore({
 				card: this.card,
 				assignee: {
 					userId: getCurrentUser()?.uid,
@@ -227,7 +236,7 @@ export default {
 			this.editingCardColor = this.card.color ? '#' + this.card.color : ''
 		},
 		updateCardColor(val) {
-			this.$store.dispatch('updateCardColor', {
+			this.updateCardColorInStore({
 				...this.card,
 				color: val ? val.substring(1) : null,
 			})
diff --git a/src/store/card.js b/src/store/card.js
deleted file mode 100644
index c0577f4d3c..0000000000
--- a/src/store/card.js
+++ /dev/null
@@ -1,425 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import { CardApi } from './../services/CardApi.js'
-import moment from 'moment'
-import Vue from 'vue'
-import { useTrashbinStore } from '../stores/trashbin.js'
-import { useStackStore } from '../stores/stack.js'
-
-const apiClient = new CardApi()
-
-/**
- *
- */
-export default function cardModuleFactory() {
-	return {
-		state: {
-			cards: [],
-		},
-		getters: {
-			cardsByStack: (state, getters, rootState) => (id) => {
-				return state.cards.filter((card) => {
-					const { tags, users, due, unassigned, completed } = rootState.filter
-
-					if (completed === 'open' && card.done !== null) {
-						return false
-					}
-					if (completed === 'completed' && card.done == null) {
-						return false
-					}
-					let allTagsMatch = true
-
-					if (tags.length > 0) {
-						tags.forEach((tag) => {
-							if (card.labels.findIndex((l) => l.id === tag) === -1) {
-								allTagsMatch = false
-							}
-						})
-						if (!allTagsMatch) {
-							return false
-						}
-					}
-
-					if (users.length > 0) {
-						const anyUserMatch = !card?.assignedUsers
-							? false
-							: users.some((user) => card.assignedUsers.findIndex((u) => u.participant.uid === user) !== -1)
-						if (!anyUserMatch) {
-							return false
-						}
-					}
-
-					if (unassigned && card.assignedUsers.length > 0) {
-						return false
-					}
-
-					if (due !== '') {
-						const datediffHour = ((new Date(card.duedate) - new Date()) / 3600 / 1000)
-						switch (due) {
-						case 'noDue':
-							return (card.duedate === null)
-						case 'overdue':
-							return (card.overdue === 3)
-						case 'dueToday':
-							return (card.overdue >= 2)
-						case 'dueWeek':
-							return (datediffHour <= 7 * 24 && card.duedate !== null)
-						case 'dueMonth':
-							return (datediffHour <= 30 * 24 && card.duedate !== null)
-						}
-					}
-
-					return true
-				})
-					.filter((card) => card.stackId === id)
-					.filter((card) => {
-						if (getters.getSearchQuery === '') {
-							return true
-						}
-
-						let hasMatch = true
-						const matches = getters.getSearchQuery.match(/(?:[^\s"]+|"[^"]*")+/g)
-
-						const filterOutQuotes = (q) => {
-							if (q[0] === '"' && q[q.length - 1] === '"') {
-								return q.slice(1, -1)
-							}
-							return q
-						}
-						for (const match of matches) {
-							let [filter, query] = match.indexOf(':') !== -1 ? match.split(/:(.*)/) : [null, match]
-							const isEmptyQuery = typeof query === 'undefined' || filterOutQuotes(query) === ''
-
-							if (filter === 'title') {
-								if (isEmptyQuery) {
-									continue
-								}
-								hasMatch = hasMatch && card.title.toLowerCase().includes(filterOutQuotes(query).toLowerCase())
-							} else if (filter === 'description') {
-								if (isEmptyQuery) {
-									hasMatch = hasMatch && !!card.description
-									continue
-								}
-								hasMatch = hasMatch && card.description.toLowerCase().includes(filterOutQuotes(query).toLowerCase())
-							} else if (filter === 'list') {
-								if (isEmptyQuery) {
-									continue
-								}
-								const stack = useStackStore().stackById(card.stackId)
-								if (!stack) {
-									return false
-								}
-								hasMatch = hasMatch && stack.title.toLowerCase().includes(filterOutQuotes(query).toLowerCase())
-							} else if (filter === 'tag') {
-								if (isEmptyQuery) {
-									hasMatch = hasMatch && card.labels.length > 0
-									continue
-								}
-								hasMatch = hasMatch && card.labels.findIndex((label) => label.title.toLowerCase().includes(filterOutQuotes(query).toLowerCase())) !== -1
-							} else if (filter === 'date') {
-								const datediffHour = ((new Date(card.duedate) - new Date()) / 3600 / 1000)
-								query = filterOutQuotes(query)
-								switch (query) {
-								case 'overdue':
-									hasMatch = hasMatch && (card.overdue === 3)
-									break
-								case 'today':
-									hasMatch = hasMatch && (datediffHour > 0 && datediffHour <= 24 && card.duedate !== null)
-									break
-								case 'week':
-									hasMatch = hasMatch && (datediffHour > 0 && datediffHour <= 7 * 24 && card.duedate !== null)
-									break
-								case 'month':
-									hasMatch = hasMatch && (datediffHour > 0 && datediffHour <= 30 * 24 && card.duedate !== null)
-									break
-								case 'none':
-									hasMatch = hasMatch && (card.duedate === null)
-									break
-								}
-
-								if (card.duedate === null || !hasMatch) {
-									return false
-								}
-								const comparator = query[0] + (query[1] === '=' ? '=' : '')
-								const isValidComparator = ['<', '<=', '>', '>='].indexOf(comparator) !== -1
-								const parsedCardDate = moment(card.duedate)
-								const parsedDate = moment(query.slice(isValidComparator ? comparator.length : 0))
-								switch (comparator) {
-								case '<':
-									hasMatch = hasMatch && parsedCardDate.isBefore(parsedDate)
-									break
-								case '<=':
-									hasMatch = hasMatch && parsedCardDate.isSameOrBefore(parsedDate)
-									break
-								case '>':
-									hasMatch = hasMatch && parsedCardDate.isAfter(parsedDate)
-									break
-								case '>=':
-									hasMatch = hasMatch && parsedCardDate.isSameOrAfter(parsedDate)
-									break
-								default:
-									hasMatch = hasMatch && parsedCardDate.isSame(parsedDate)
-									break
-								}
-
-							} else if (filter === 'assigned') {
-								if (isEmptyQuery) {
-									hasMatch = hasMatch && card.assignedUsers.length > 0
-									continue
-								}
-								hasMatch = hasMatch && card.assignedUsers.findIndex((assignment) => {
-									return assignment.participant.primaryKey.toLowerCase() === filterOutQuotes(query).toLowerCase()
-										|| assignment.participant.displayname.toLowerCase() === filterOutQuotes(query).toLowerCase()
-								}) !== -1
-							} else {
-								hasMatch = hasMatch && (card.title.toLowerCase().includes(filterOutQuotes(match).toLowerCase())
-									|| card.description.toLowerCase().includes(filterOutQuotes(match).toLowerCase()) || card.id === parseInt(filterOutQuotes(match)))
-							}
-							if (!hasMatch) {
-								return false
-							}
-						}
-						return true
-					})
-					.sort((a, b) => a.order - b.order || a.createdAt - b.createdAt)
-			},
-			cardById: state => (id) => {
-				return state.cards.find((card) => card.id === id)
-			},
-		},
-		mutations: {
-			addCard(state, card) {
-				card.labels = card.labels || []
-				card.assignedUsers = card.assignedUsers || []
-				const existingIndex = state.cards.findIndex(_card => _card.id === card.id)
-				if (existingIndex !== -1) {
-					const existingCard = state.cards[existingIndex]
-					Vue.set(state.cards, existingIndex, Object.assign({}, existingCard, card))
-				} else {
-					state.cards.push(card)
-				}
-			},
-			deleteCard(state, card) {
-				const existingIndex = state.cards.findIndex(_card => _card.id === card.id)
-				if (existingIndex !== -1) {
-					state.cards.splice(existingIndex, 1)
-				}
-			},
-			updateCard(state, card) {
-				const existingIndex = state.cards.findIndex(_card => _card.id === card.id)
-				if (existingIndex !== -1) {
-					Vue.set(state.cards, existingIndex, Object.assign({}, state.cards[existingIndex], card))
-				}
-			},
-			updateCardsReorder(state, cards) {
-				for (const newCard of cards) {
-					const existingIndex = state.cards.findIndex(_card => _card.id === newCard.id)
-					if (existingIndex !== -1) {
-						Vue.set(state.cards[existingIndex], 'order', newCard.order)
-						Vue.set(state.cards[existingIndex], 'stackId', newCard.stackId)
-						Vue.set(state.cards[existingIndex], 'done', newCard.done)
-					}
-				}
-			},
-			assignCardToUser(state, user) {
-				const existingIndex = state.cards.findIndex(_card => _card.id === user.cardId)
-				if (existingIndex !== -1) {
-					state.cards[existingIndex].assignedUsers.push(user)
-				}
-			},
-			removeUserFromCard(state, user) {
-				const existingIndex = state.cards.findIndex(_card => _card.id === user.cardId)
-				if (existingIndex !== -1) {
-					const foundIndex = state.cards[existingIndex].assignedUsers.findIndex(_user => _user.id === user.id)
-					if (foundIndex !== -1) {
-						state.cards[existingIndex].assignedUsers.splice(foundIndex, 1)
-					}
-				}
-			},
-			updateCardProperty(state, { card, property }) {
-				const existingIndex = state.cards.findIndex(_card => _card.id === card.id)
-				if (existingIndex !== -1) {
-					Vue.set(state.cards[existingIndex], property, card[property])
-					Vue.set(state.cards[existingIndex], 'lastModified', Date.now() / 1000)
-				}
-			},
-			cardSetAttachmentCount(state, { cardId, count }) {
-				const existingIndex = state.cards.findIndex(_card => _card.id === cardId)
-				if (existingIndex !== -1) {
-					Vue.set(state.cards[existingIndex], 'attachmentCount', count)
-				}
-			},
-			cardIncreaseAttachmentCount(state, cardId) {
-				const existingIndex = state.cards.findIndex(_card => _card.id === cardId)
-				if (existingIndex !== -1) {
-					Vue.set(state.cards[existingIndex], 'attachmentCount', state.cards[existingIndex].attachmentCount + 1)
-				}
-			},
-			cardDecreaseAttachmentCount(state, cardId) {
-				const existingIndex = state.cards.findIndex(_card => _card.id === cardId)
-				if (existingIndex !== -1) {
-					Vue.set(state.cards[existingIndex], 'attachmentCount', state.cards[existingIndex].attachmentCount - 1)
-				}
-			},
-			addNewCard(state, card) {
-				state.cards.push(card)
-			},
-			setCards(state, cards) {
-				const deletedCards = state.cards.filter(_card => {
-					return cards.findIndex(c => _card.id === c.id) === -1
-				})
-				for (const card of deletedCards) {
-					this.commit('deleteCard', card)
-				}
-				for (const card of cards) {
-					this.commit('addCard', card)
-				}
-			},
-		},
-		actions: {
-			async cloneCard({ commit }, { cardId, targetStackId }) {
-				const createdCard = await apiClient.cloneCard(cardId, targetStackId)
-				commit('addCard', createdCard)
-				return createdCard
-			},
-			async addCard({ commit }, card) {
-				const createdCard = await apiClient.addCard(card)
-				commit('addCard', createdCard)
-				return createdCard
-			},
-			async updateCardTitle({ commit, getters }, card) {
-				const stack = useStackStore().stackById(card.stackId)
-				const updatedCard = await apiClient.updateCard(card, stack.boardId)
-				commit('updateCardProperty', { property: 'title', card: updatedCard })
-				commit('updateCardProperty', { property: 'referenceData', card: updatedCard })
-			},
-			async moveCard({ commit }, { card, oldBoardId }) {
-				const updatedCard = await apiClient.updateCard(card, oldBoardId)
-				commit('deleteCard', updatedCard)
-			},
-			async reorderCard({ commit, getters }, card) {
-				let i = 0
-				const newCards = []
-				for (const c of getters.cardsByStack(card.stackId)) {
-					if (c.id === card.id) {
-						newCards.push(card)
-					}
-					if (i === card.order) {
-						i++
-					}
-					if (c.id !== card.id) {
-						newCards.push({ ...c, order: i++ })
-					}
-				}
-				newCards.push(card)
-				await commit('updateCardsReorder', newCards)
-
-				const stack = useStackStore().stackById(card.stackId)
-				apiClient.reorderCard(card, stack.boardId).then((cards) => {
-					commit('updateCardsReorder', Object.values(cards))
-				})
-			},
-			async deleteCard({ commit }, card) {
-				await apiClient.deleteCard(card.id)
-				commit('deleteCard', card)
-				useTrashbinStore().moveCardToTrash(card)
-			},
-			async archiveUnarchiveCard({ commit }, card) {
-				let call = 'archiveCard'
-				if (card.archived === false) {
-					call = 'unArchiveCard'
-				}
-
-				const updatedCard = await apiClient[call](card)
-				commit('updateCard', updatedCard)
-			},
-			async changeCardDoneStatus({ commit, dispatch, rootState }, card) {
-				let call = 'markCardAsDone'
-				if (card.done === false) {
-					call = 'markCardAsUndone'
-				}
-
-				const updatedCard = await apiClient[call](card)
-				commit('updateCardProperty', { property: 'done', card: updatedCard })
-
-				if (card.done !== false) {
-					const cardStack = useStackStore().stackById(card.stackId)
-					const doneStack = useStackStore().stacks.find(
-						s => s.boardId === cardStack?.boardId && s.isDoneColumn,
-					)
-					if (doneStack && card.stackId !== doneStack.id) {
-						await dispatch('reorderCard', { ...updatedCard, stackId: doneStack.id, order: 0 })
-					}
-				}
-			},
-			async assignCardToUser({ commit }, { card, assignee }) {
-				const boardId = this.state.currentBoard.id
-				const user = await apiClient.assignUser(card.id, assignee.userId, assignee.type, boardId)
-				commit('assignCardToUser', user)
-			},
-			async removeUserFromCard({ commit }, { card, assignee }) {
-				const boardId = this.state.currentBoard.id
-				const user = await apiClient.removeUser(card.id, assignee.userId, assignee.type, boardId)
-				commit('removeUserFromCard', user)
-			},
-			async addLabel({ commit }, data) {
-				data.boardId = this.state.currentBoard.id
-				await apiClient.assignLabelToCard(data)
-				commit('updateCardProperty', { property: 'labels', card: data.card })
-			},
-			async removeLabel({ commit }, data) {
-				data.boardId = this.state.currentBoard.id
-				await apiClient.removeLabelFromCard(data)
-				commit('updateCardProperty', { property: 'labels', card: data.card })
-			},
-			async assignDependentCard({ commit }, { card, dependentCard }) {
-				const boardId = this.state.currentBoard.id
-				const updatedCard = await apiClient.assignDependentCard(card.id, dependentCard.id, boardId)
-				commit('updateCardProperty', { property: 'dependentCards', card: updatedCard })
-			},
-			async removeDependentCard({ commit }, { card, dependentCardId }) {
-				const boardId = this.state.currentBoard.id
-				const updatedCard = await apiClient.removeDependentCard(card.id, dependentCardId, boardId)
-				commit('updateCardProperty', { property: 'dependentCards', card: updatedCard })
-			},
-			async updateCardDesc({ commit, getters }, card) {
-				const stack = useStackStore().stackById(card.stackId)
-				const updatedCard = await apiClient.updateCard(card, stack.boardId)
-				commit('updateCardProperty', { property: 'description', card: updatedCard })
-			},
-			async updateCardDue({ commit, getters }, card) {
-				const stack = useStackStore().stackById(card.stackId)
-				const updatedCard = await apiClient.updateCard(card, stack.boardId)
-				commit('updateCardProperty', { property: 'duedate', card: updatedCard })
-			},
-			async updateCardStartDate({ commit, getters }, card) {
-				const stack = useStackStore().stackById(card.stackId)
-				const updatedCard = await apiClient.updateCard(card, stack.boardId)
-				commit('updateCardProperty', { property: 'startdate', card: updatedCard })
-			},
-			async updateCardDates({ commit, getters }, card) {
-				const stack = useStackStore().stackById(card.stackId)
-				const updatedCard = await apiClient.updateCard(card, stack.boardId)
-				commit('updateCardProperty', { property: 'duedate', card: updatedCard })
-				commit('updateCardProperty', { property: 'startdate', card: updatedCard })
-			},
-			async updateCardColor({ commit, getters }, card) {
-				const stack = useStackStore().stackById(card.stackId)
-				const updatedCard = await apiClient.updateCard(card, stack.boardId)
-				commit('updateCardProperty', { property: 'color', card: updatedCard })
-			},
-
-			addCardData({ commit }, cardData) {
-				const card = { ...cardData }
-				useStackStore().addStack(card.relatedStack)
-				commit('addBoard', card.relatedBoard)
-				delete card.relatedStack
-				delete card.relatedBoard
-				commit('addCard', card)
-			},
-		},
-	}
-}
diff --git a/src/store/main.js b/src/store/main.js
index 0617fedb87..42c40b7c42 100644
--- a/src/store/main.js
+++ b/src/store/main.js
@@ -11,7 +11,6 @@ import Vuex from 'vuex'
 import axios from '@nextcloud/axios'
 import { generateOcsUrl, generateUrl } from '@nextcloud/router'
 import { BoardApi } from '../services/BoardApi.js'
-import cardModuleFactory from './card.js'
 import { useStackStore } from '../stores/stack.js'
 Vue.use(Vuex)
 
@@ -29,9 +28,6 @@ export const BOARD_FILTERS = {
  */
 export default function storeFactory() {
 	return new Vuex.Store({
-		modules: {
-			card: cardModuleFactory(),
-		},
 		strict: debug,
 		state: {
 			isFullApp: true,
diff --git a/src/stores/attachment.js b/src/stores/attachment.js
index ec803a2add..05f6f19154 100644
--- a/src/stores/attachment.js
+++ b/src/stores/attachment.js
@@ -6,6 +6,7 @@
 import { defineStore } from 'pinia'
 import Vue from 'vue'
 import { AttachmentApi } from '../services/AttachmentApi.js'
+import { useCardStore } from './card.js'
 
 const apiClient = new AttachmentApi()
 
@@ -23,6 +24,7 @@ export const useAttachmentStore = defineStore('attachment', {
 	},
 	actions: {
 		async createAttachment({ cardId, formData, onUploadProgress }) {
+			const cardStore = useCardStore()
 			const boardId = this.$vuex.state.currentBoard.id
 			const attachment = await apiClient.createAttachment({ cardId, formData, onUploadProgress, boardId })
 			if (typeof this.attachments[cardId] === 'undefined') {
@@ -30,13 +32,14 @@ export const useAttachmentStore = defineStore('attachment', {
 			} else {
 				this.attachments[cardId].push(attachment)
 			}
-			this.$vuex.commit('cardIncreaseAttachmentCount', cardId)
+			cardStore.cardIncreaseAttachmentCount(cardId)
 		},
 		async fetchAttachments(cardId) {
+			const cardStore = useCardStore()
 			const boardId = this.$vuex.state.currentBoard.id
 			const attachments = await apiClient.fetchAttachments(cardId, boardId)
 			Vue.set(this.attachments, cardId, attachments)
-			this.$vuex.commit('cardSetAttachmentCount', { cardId, count: attachments.length })
+			cardStore.cardSetAttachmentCount({ cardId, count: attachments.length })
 		},
 		async updateAttachment({ cardId, attachment, formData }) {
 			const boardId = this.$vuex.state.currentBoard.id
@@ -47,31 +50,34 @@ export const useAttachmentStore = defineStore('attachment', {
 			}
 		},
 		async deleteAttachment(attachment) {
+			const cardStore = useCardStore()
 			const boardId = this.$vuex.state.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) {
 				Vue.set(this.attachments[attachment.cardId][existingIndex], 'deletedAt', Date.now() / 1000 | 0)
 			}
-			this.$vuex.commit('cardDecreaseAttachmentCount', attachment.cardId)
+			cardStore.cardDecreaseAttachmentCount(attachment.cardId)
 		},
 		async unshareAttachment(attachment) {
+			const cardStore = useCardStore()
 			const boardId = this.$vuex.state.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) {
 				Vue.set(this.attachments[attachment.cardId][existingIndex], 'deletedAt', -1)
 			}
-			this.$vuex.commit('cardDecreaseAttachmentCount', attachment.cardId)
+			cardStore.cardDecreaseAttachmentCount(attachment.cardId)
 		},
 		async restoreAttachment(attachment) {
+			const cardStore = useCardStore()
 			const boardId = this.$vuex.state.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) {
 				Vue.set(this.attachments[restoredAttachment.cardId][existingIndex], 'deletedAt', 0)
 			}
-			this.$vuex.commit('cardIncreaseAttachmentCount', attachment.cardId)
+			cardStore.cardIncreaseAttachmentCount(attachment.cardId)
 		},
 	},
 
diff --git a/src/stores/card.js b/src/stores/card.js
new file mode 100644
index 0000000000..774e53a4a9
--- /dev/null
+++ b/src/stores/card.js
@@ -0,0 +1,418 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { defineStore } from 'pinia'
+import { CardApi } from '../services/CardApi.js'
+import moment from 'moment'
+import Vue from 'vue'
+import { useStackStore } from './stack.js'
+import { useTrashbinStore } from './trashbin.js'
+
+const apiClient = new CardApi()
+
+export const useCardStore = defineStore('card', {
+	state: () => ({
+		cards: [],
+	}),
+	getters: {
+		cardsByStack(state) {
+			return (id) => state.cards.filter((card) => {
+				const { tags, users, due, unassigned, completed } = this.$vuex.state.filter
+
+				if (completed === 'open' && card.done !== null) {
+					return false
+				}
+				if (completed === 'completed' && card.done == null) {
+					return false
+				}
+				let allTagsMatch = true
+
+				if (tags.length > 0) {
+					tags.forEach((tag) => {
+						if (card.labels.findIndex((l) => l.id === tag) === -1) {
+							allTagsMatch = false
+						}
+					})
+					if (!allTagsMatch) {
+						return false
+					}
+				}
+
+				if (users.length > 0) {
+					const anyUserMatch = !card?.assignedUsers
+						? false
+						: users.some((user) => card.assignedUsers.findIndex((u) => u.participant.uid === user) !== -1)
+					if (!anyUserMatch) {
+						return false
+					}
+				}
+
+				if (unassigned && card.assignedUsers.length > 0) {
+					return false
+				}
+
+				if (due !== '') {
+					const datediffHour = ((new Date(card.duedate) - new Date()) / 3600 / 1000)
+					switch (due) {
+					case 'noDue':
+						return (card.duedate === null)
+					case 'overdue':
+						return (card.overdue === 3)
+					case 'dueToday':
+						return (card.overdue >= 2)
+					case 'dueWeek':
+						return (datediffHour <= 7 * 24 && card.duedate !== null)
+					case 'dueMonth':
+						return (datediffHour <= 30 * 24 && card.duedate !== null)
+					}
+				}
+
+				return true
+			})
+				.filter((card) => card.stackId === id)
+				.filter((card) => {
+					if (this.$vuex.getters.getSearchQuery === '') {
+						return true
+					}
+
+					let hasMatch = true
+					const matches = this.$vuex.getters.getSearchQuery.match(/(?:[^\s"]+|"[^"]*")+/g)
+
+					const filterOutQuotes = (q) => {
+						if (q[0] === '"' && q[q.length - 1] === '"') {
+							return q.slice(1, -1)
+						}
+						return q
+					}
+					for (const match of matches) {
+						let [filter, query] = match.indexOf(':') !== -1 ? match.split(/:(.*)/) : [null, match]
+						const isEmptyQuery = typeof query === 'undefined' || filterOutQuotes(query) === ''
+
+						if (filter === 'title') {
+							if (isEmptyQuery) {
+								continue
+							}
+							hasMatch = hasMatch && card.title.toLowerCase().includes(filterOutQuotes(query).toLowerCase())
+						} else if (filter === 'description') {
+							if (isEmptyQuery) {
+								hasMatch = hasMatch && !!card.description
+								continue
+							}
+							hasMatch = hasMatch && card.description.toLowerCase().includes(filterOutQuotes(query).toLowerCase())
+						} else if (filter === 'list') {
+							if (isEmptyQuery) {
+								continue
+							}
+							const stack = useStackStore().stackById(card.stackId)
+							if (!stack) {
+								return false
+							}
+							hasMatch = hasMatch && stack.title.toLowerCase().includes(filterOutQuotes(query).toLowerCase())
+						} else if (filter === 'tag') {
+							if (isEmptyQuery) {
+								hasMatch = hasMatch && card.labels.length > 0
+								continue
+							}
+							hasMatch = hasMatch && card.labels.findIndex((label) => label.title.toLowerCase().includes(filterOutQuotes(query).toLowerCase())) !== -1
+						} else if (filter === 'date') {
+							const datediffHour = ((new Date(card.duedate) - new Date()) / 3600 / 1000)
+							query = filterOutQuotes(query)
+							switch (query) {
+							case 'overdue':
+								hasMatch = hasMatch && (card.overdue === 3)
+								break
+							case 'today':
+								hasMatch = hasMatch && (datediffHour > 0 && datediffHour <= 24 && card.duedate !== null)
+								break
+							case 'week':
+								hasMatch = hasMatch && (datediffHour > 0 && datediffHour <= 7 * 24 && card.duedate !== null)
+								break
+							case 'month':
+								hasMatch = hasMatch && (datediffHour > 0 && datediffHour <= 30 * 24 && card.duedate !== null)
+								break
+							case 'none':
+								hasMatch = hasMatch && (card.duedate === null)
+								break
+							}
+
+							if (card.duedate === null || !hasMatch) {
+								return false
+							}
+							const comparator = query[0] + (query[1] === '=' ? '=' : '')
+							const isValidComparator = ['<', '<=', '>', '>='].indexOf(comparator) !== -1
+							const parsedCardDate = moment(card.duedate)
+							const parsedDate = moment(query.slice(isValidComparator ? comparator.length : 0))
+							switch (comparator) {
+							case '<':
+								hasMatch = hasMatch && parsedCardDate.isBefore(parsedDate)
+								break
+							case '<=':
+								hasMatch = hasMatch && parsedCardDate.isSameOrBefore(parsedDate)
+								break
+							case '>':
+								hasMatch = hasMatch && parsedCardDate.isAfter(parsedDate)
+								break
+							case '>=':
+								hasMatch = hasMatch && parsedCardDate.isSameOrAfter(parsedDate)
+								break
+							default:
+								hasMatch = hasMatch && parsedCardDate.isSame(parsedDate)
+								break
+							}
+
+						} else if (filter === 'assigned') {
+							if (isEmptyQuery) {
+								hasMatch = hasMatch && card.assignedUsers.length > 0
+								continue
+							}
+							hasMatch = hasMatch && card.assignedUsers.findIndex((assignment) => {
+								return assignment.participant.primaryKey.toLowerCase() === filterOutQuotes(query).toLowerCase()
+									|| assignment.participant.displayname.toLowerCase() === filterOutQuotes(query).toLowerCase()
+							}) !== -1
+						} else {
+							hasMatch = hasMatch && (card.title.toLowerCase().includes(filterOutQuotes(match).toLowerCase())
+								|| card.description.toLowerCase().includes(filterOutQuotes(match).toLowerCase()) || card.id === parseInt(filterOutQuotes(match)))
+						}
+						if (!hasMatch) {
+							return false
+						}
+					}
+					return true
+				})
+				.sort((a, b) => a.order - b.order || a.createdAt - b.createdAt)
+		},
+		cardById: state => id => {
+			return state.cards.find((card) => card.id === id)
+		},
+	},
+	actions: {
+		addCardToStore(card) {
+			card.labels = card.labels || []
+			card.assignedUsers = card.assignedUsers || []
+			const existingIndex = this.cards.findIndex(_card => _card.id === card.id)
+			if (existingIndex !== -1) {
+				const existingCard = this.cards[existingIndex]
+				Vue.set(this.cards, existingIndex, Object.assign({}, existingCard, card))
+			} else {
+				this.cards.push(card)
+			}
+		},
+		updateCard(card) {
+			const existingIndex = this.cards.findIndex(_card => _card.id === card.id)
+			if (existingIndex !== -1) {
+				Vue.set(this.cards, existingIndex, Object.assign({}, this.cards[existingIndex], card))
+			}
+		},
+		deleteCardFromStore(card) {
+			const existingIndex = this.cards.findIndex(_card => _card.id === card.id)
+			if (existingIndex !== -1) {
+				this.cards.splice(existingIndex, 1)
+			}
+		},
+		assignCardToUserInStore(user) {
+			const existingIndex = this.cards.findIndex(_card => _card.id === user.cardId)
+			if (existingIndex !== -1) {
+				this.cards[existingIndex].assignedUsers.push(user)
+			}
+		},
+		removeUserFromCardInStore(user) {
+			const existingIndex = this.cards.findIndex(_card => _card.id === user.cardId)
+			if (existingIndex !== -1) {
+				const foundIndex = this.cards[existingIndex].assignedUsers.findIndex(_user => _user.id === user.id)
+				if (foundIndex !== -1) {
+					this.cards[existingIndex].assignedUsers.splice(foundIndex, 1)
+				}
+			}
+		},
+		updateCardProperty({ card, property }) {
+			const existingIndex = this.cards.findIndex(_card => _card.id === card.id)
+			if (existingIndex !== -1) {
+				Vue.set(this.cards[existingIndex], property, card[property])
+				Vue.set(this.cards[existingIndex], 'lastModified', Date.now() / 1000)
+			}
+		},
+		cardSetAttachmentCount({ cardId, count }) {
+			const existingIndex = this.cards.findIndex(_card => _card.id === cardId)
+			if (existingIndex !== -1) {
+				Vue.set(this.cards[existingIndex], 'attachmentCount', count)
+			}
+		},
+		cardIncreaseAttachmentCount(cardId) {
+			const existingIndex = this.cards.findIndex(_card => _card.id === cardId)
+			if (existingIndex !== -1) {
+				Vue.set(this.cards[existingIndex], 'attachmentCount', this.cards[existingIndex].attachmentCount + 1)
+			}
+		},
+		cardDecreaseAttachmentCount(cardId) {
+			const existingIndex = this.cards.findIndex(_card => _card.id === cardId)
+			if (existingIndex !== -1) {
+				Vue.set(this.cards[existingIndex], 'attachmentCount', this.cards[existingIndex].attachmentCount - 1)
+			}
+		},
+		addNewCard(card) {
+			this.cards.push(card)
+		},
+		setCards(cards) {
+			const deletedCards = this.cards.filter(_card => cards.findIndex(c => _card.id === c.id) === -1)
+			for (const card of deletedCards) {
+				this.deleteCardFromStore(card)
+			}
+			for (const card of cards) {
+				this.addCardToStore(card)
+			}
+		},
+		updateCardsReorder(cards) {
+			for (const newCard of cards) {
+				const existingIndex = this.cards.findIndex(_card => _card.id === newCard.id)
+				if (existingIndex !== -1) {
+					Vue.set(this.cards[existingIndex], 'order', newCard.order)
+					Vue.set(this.cards[existingIndex], 'stackId', newCard.stackId)
+					Vue.set(this.cards[existingIndex], 'done', newCard.done)
+				}
+			}
+		},
+		async cloneCard({ cardId, targetStackId }) {
+			const createdCard = await apiClient.cloneCard(cardId, targetStackId)
+			this.addCardToStore(createdCard)
+			return createdCard
+		},
+		async addCard(card) {
+			const createdCard = await apiClient.addCard(card)
+			this.addCardToStore(createdCard)
+			return createdCard
+		},
+		async updateCardTitle(card) {
+			const stack = useStackStore().stackById(card.stackId)
+			const updatedCard = await apiClient.updateCard(card, stack.boardId)
+			this.updateCardProperty({ card: updatedCard, property: 'title' })
+			this.updateCardProperty({ property: 'referenceData', card: updatedCard })
+		},
+		async moveCard({ card, oldBoardId }) {
+			const updatedCard = await apiClient.updateCard(card, oldBoardId)
+			this.deleteCardFromStore(updatedCard)
+		},
+		async deleteCard(card) {
+			await apiClient.deleteCard(card.id)
+			this.deleteCardFromStore(card)
+			useTrashbinStore().moveCardToTrash(card)
+		},
+		async reorderCard(card) {
+			let i = 0
+			const newCards = []
+			for (const c of this.cardsByStack(card.stackId)) {
+				if (c.id === card.id) {
+					newCards.push(card)
+				}
+				if (i === card.order) {
+					i++
+				}
+				if (c.id !== card.id) {
+					newCards.push({ ...c, order: i++ })
+				}
+			}
+			newCards.push(card)
+			this.updateCardsReorder(newCards)
+
+			const stack = useStackStore().stackById(card.stackId)
+			apiClient.reorderCard(card, stack.boardId).then((cards) => {
+				this.updateCardsReorder(Object.values(cards))
+			})
+		},
+		async archiveUnarchiveCard(card) {
+			let call = 'archiveCard'
+			if (card.archived === false) {
+				call = 'unArchiveCard'
+			}
+
+			const updatedCard = await apiClient[call](card)
+			this.updateCard(updatedCard)
+		},
+		async changeCardDoneStatus(card) {
+			let call = 'markCardAsDone'
+			if (card.done === false) {
+				call = 'markCardAsUndone'
+			}
+
+			const updatedCard = await apiClient[call](card)
+			this.updateCardProperty({ property: 'done', card: updatedCard })
+
+			if (card.done !== false) {
+				const stackStore = useStackStore()
+				const cardStack = stackStore.stackById(card.stackId)
+				const doneStack = stackStore.stacks.find(
+					s => s.boardId === cardStack?.boardId && s.isDoneColumn,
+				)
+				if (doneStack && card.stackId !== doneStack.id) {
+					await this.reorderCard({ ...updatedCard, stackId: doneStack.id, order: 0 })
+				}
+			}
+		},
+		async assignCardToUser({ card, assignee }) {
+			const boardId = this.$vuex.state.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 user = await apiClient.removeUser(card.id, assignee.userId, assignee.type, boardId)
+			this.removeUserFromCardInStore(user)
+		},
+		async addLabel(data) {
+			data.boardId = this.$vuex.state.currentBoard.id
+			await apiClient.assignLabelToCard(data)
+			this.updateCardProperty({ property: 'labels', card: data.card })
+		},
+		async removeLabel(data) {
+			data.boardId = this.$vuex.state.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 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 updatedCard = await apiClient.removeDependentCard(card.id, dependentCardId, boardId)
+			this.updateCardProperty({ property: 'dependentCards', card: updatedCard })
+		},
+		async updateCardDesc(card) {
+			const stack = useStackStore().stackById(card.stackId)
+			const updatedCard = await apiClient.updateCard(card, stack.boardId)
+			this.updateCardProperty({ property: 'description', card: updatedCard })
+		},
+		async updateCardDue(card) {
+			const stack = useStackStore().stackById(card.stackId)
+			const updatedCard = await apiClient.updateCard(card, stack.boardId)
+			this.updateCardProperty({ property: 'duedate', card: updatedCard })
+		},
+		async updateCardStartDate(card) {
+			const stack = useStackStore().stackById(card.stackId)
+			const updatedCard = await apiClient.updateCard(card, stack.boardId)
+			this.updateCardProperty({ property: 'startdate', card: updatedCard })
+		},
+		async updateCardDates(card) {
+			const stack = useStackStore().stackById(card.stackId)
+			const updatedCard = await apiClient.updateCard(card, stack.boardId)
+			this.updateCardProperty({ property: 'duedate', card: updatedCard })
+			this.updateCardProperty({ property: 'startdate', card: updatedCard })
+		},
+		async updateCardColor(card) {
+			const stack = useStackStore().stackById(card.stackId)
+			const updatedCard = await apiClient.updateCard(card, stack.boardId)
+			this.updateCardProperty({ property: 'color', card: updatedCard })
+		},
+		addCardData(cardData) {
+			const card = { ...cardData }
+			useStackStore().addStack(card.relatedStack)
+			this.$vuex.commit('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 843c05a04c..9ebff675fd 100644
--- a/src/stores/overview.js
+++ b/src/stores/overview.js
@@ -5,6 +5,7 @@
 
 import { defineStore } from 'pinia'
 import { OverviewApi } from '../services/OverviewApi.js'
+import { useCardStore } from './card.js'
 
 const overviewApi = new OverviewApi()
 
@@ -19,11 +20,12 @@ export const useOverviewStore = defineStore('overview', {
 				return this.loading
 			}
 			const promise = (async () => {
+				const cardStore = useCardStore()
 				this.$vuex.commit('setCurrentBoard', null)
 				const assignedCards = await overviewApi.get('upcoming')
 				const assignedCardsFlat = Object.values(assignedCards).flat()
 				for (const i in assignedCardsFlat) {
-					this.$vuex.commit('addCard', assignedCardsFlat[i])
+					cardStore.addCardToStore(assignedCardsFlat[i])
 				}
 				this.assignedCards = assignedCards
 				this.loading = false
diff --git a/src/stores/stack.js b/src/stores/stack.js
index 24dcb42a1d..987e3fb1b0 100644
--- a/src/stores/stack.js
+++ b/src/stores/stack.js
@@ -8,6 +8,7 @@ import { defineStore } from 'pinia'
 import { StackApi } from '../services/StackApi.js'
 import applyOrderToArray from '../helpers/applyOrderToArray.js'
 import { useTrashbinStore } from './trashbin.js'
+import { useCardStore } from './card.js'
 
 const apiClient = new StackApi()
 
@@ -50,6 +51,7 @@ export const useStackStore = defineStore('stack', {
 				})
 		},
 		async loadStacks(boardId) {
+			const cardStore = useCardStore()
 			let call = 'loadStacks'
 			if (this.$vuex.state.showArchived === true) {
 				call = 'loadArchivedStacks'
@@ -64,9 +66,10 @@ export const useStackStore = defineStore('stack', {
 				delete stack.cards
 				this.addStack(stack)
 			}
-			this.$vuex.commit('setCards', cards)
+			cardStore.setCards(cards)
 		},
 		async loadArchivedStacks(boardId) {
+			const cardStore = useCardStore()
 			const archivedStacks = await apiClient.loadArchivedStacks(boardId)
 			const cards = []
 			for (const i in archivedStacks) {
@@ -79,7 +82,7 @@ export const useStackStore = defineStore('stack', {
 					this.addStack(stack)
 				}
 			}
-			this.$vuex.commit('setCards', cards)
+			cardStore.setCards(cards)
 		},
 		createStack(stack) {
 			stack.boardId = this.$vuex.state.currentBoard.id
@@ -108,6 +111,7 @@ export const useStackStore = defineStore('stack', {
 				})
 		},
 		async setDoneStack({ stackId, boardId, isDone }) {
+			const cardStore = useCardStore()
 			await apiClient.setDoneStack(stackId, boardId, isDone)
 			// Mirror the backend bulk-clear: clear the flag on any other stack in this board
 			if (isDone) {
@@ -116,10 +120,10 @@ export const useStackStore = defineStore('stack', {
 					.forEach((s) => this.addStack({ ...s, isDoneColumn: false }))
 				// Mirror the backend bulk-done: mark all undone cards in this stack as done
 				const now = new Date().toISOString()
-				this.$vuex.state.card.cards
+				cardStore.cards
 					.filter((c) => c.stackId === stackId && c.done == null)
 					.forEach((c) =>
-						this.$vuex.commit('updateCardProperty', { property: 'done', card: { ...c, done: now } }),
+						cardStore.updateCardProperty({ property: 'done', card: { ...c, done: now } }),
 					)
 			}
 			const stack = this.stacks.find((s) => s.id === stackId)
diff --git a/src/stores/trashbin.js b/src/stores/trashbin.js
index 036fca83d4..7f8f5dabc2 100644
--- a/src/stores/trashbin.js
+++ b/src/stores/trashbin.js
@@ -7,6 +7,7 @@ import { defineStore } from 'pinia'
 import { StackApi } from '../services/StackApi.js'
 import { CardApi } from '../services/CardApi.js'
 import { useStackStore } from './stack.js'
+import { useCardStore } from './card.js'
 
 const stackApi = new StackApi()
 const cardApi = new CardApi()
@@ -64,7 +65,7 @@ export const useTrashbinStore = defineStore('trashbin', {
 		cardUndoDelete(card) {
 			cardApi.updateCard(card).then((restoredCard) => {
 				this.removeCardFromTrash(restoredCard)
-				this.$vuex.commit('addCard', restoredCard)
+				useCardStore().addCardToStore(restoredCard)
 			})
 		},
 	},