From a3b5197a5eb43c9171030fa39b869b8d5da251b2 Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Mon, 6 Apr 2026 09:46:23 +0000
Subject: [PATCH 1/2] Add Pinia store and update Vue components

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 .../card/CardSidebarTabComments.vue           |  35 +++---
 src/components/card/CommentItem.vue           |  11 +-
 src/store/main.js                             |   2 -
 src/stores/comment.js                         | 103 ++++++++++++++++++
 4 files changed, 133 insertions(+), 18 deletions(-)
 create mode 100644 src/stores/comment.js

diff --git a/src/components/card/CardSidebarTabComments.vue b/src/components/card/CardSidebarTabComments.vue
index fd0fc5d6f..50167665d 100644
--- a/src/components/card/CardSidebarTabComments.vue
+++ b/src/components/card/CardSidebarTabComments.vue
@@ -38,12 +38,13 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from 'vuex'
+import { mapState } from 'vuex'
 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'
 
 export default {
 	name: 'CardSidebarTabComments',
@@ -64,6 +65,10 @@ export default {
 			default: null,
 		},
 	},
+	setup() {
+		const commentStore = useCommentStore()
+		return { commentStore }
+	},
 	data() {
 		return {
 			newComment: '',
@@ -75,12 +80,16 @@ export default {
 	computed: {
 		...mapState({
 			currentBoard: state => state.currentBoard,
-			replyTo: state => state.comment.replyTo,
 		}),
-		...mapGetters([
-			'getCommentsForCard',
-			'hasMoreComments',
-		]),
+		replyTo() {
+			return this.commentStore.replyTo
+		},
+		getCommentsForCard() {
+			return this.commentStore.getCommentsForCard
+		},
+		hasMoreComments() {
+			return this.commentStore.hasMoreComments
+		},
 		members() {
 			return this.currentBoard.users
 		},
@@ -110,14 +119,14 @@ export default {
 			}
 		},
 		async loadComments() {
-			this.$store.dispatch('setReplyTo', null)
+			this.commentStore.setReplyTo(null)
 			this.error = null
 			this.isLoading = true
 			try {
-				await this.$store.dispatch('fetchComments', { cardId: this.card.id })
+				await this.commentStore.fetchComments({ cardId: this.card.id })
 				this.isLoading = false
 				if (this.card.commentsUnread > 0) {
-					await this.$store.dispatch('markCommentsAsRead', this.card.id)
+					await this.commentStore.apiMarkCommentsAsRead(this.card.id)
 				}
 			} catch (e) {
 				this.isLoading = false
@@ -130,18 +139,18 @@ export default {
 				cardId: this.card.id,
 				comment: content,
 			}
-			await this.$store.dispatch('createComment', commentObj)
-			this.$store.dispatch('setReplyTo', null)
+			await this.commentStore.createComment(commentObj)
+			this.commentStore.setReplyTo(null)
 			this.newComment = ''
 			await this.loadComments()
 		},
 		async loadMore() {
 			this.isLoading = true
-			await this.$store.dispatch('fetchMore', { cardId: this.card.id })
+			await this.commentStore.fetchMore({ cardId: this.card.id })
 			this.isLoading = false
 		},
 		cancelReply() {
-			this.$store.dispatch('setReplyTo', null)
+			this.commentStore.setReplyTo(null)
 		},
 	},
 }
diff --git a/src/components/card/CommentItem.vue b/src/components/card/CommentItem.vue
index a419661a8..ddd3f724d 100644
--- a/src/components/card/CommentItem.vue
+++ b/src/components/card/CommentItem.vue
@@ -84,6 +84,7 @@ import md5 from 'blueimp-md5'
 import relativeDate from '../../mixins/relativeDate.js'
 import ReplyIcon from 'vue-material-design-icons/ReplyOutline.vue'
 import moment from 'moment'
+import { useCommentStore } from '../../stores/comment.js'
 
 const AtMention = {
 	name: 'AtMention',
@@ -124,6 +125,10 @@ export default {
 			default: false,
 		},
 	},
+	setup() {
+		const commentStore = useCommentStore()
+		return { commentStore }
+	},
 	data() {
 		return {
 			edit: false,
@@ -179,7 +184,7 @@ export default {
 
 	methods: {
 		replyTo() {
-			this.$store.dispatch('setReplyTo', this.comment)
+			this.commentStore.setReplyTo(this.comment)
 		},
 		showUpdateForm() {
 			this.edit = true
@@ -197,7 +202,7 @@ export default {
 				cardId: this.comment.objectId,
 				id: this.comment.id,
 			}
-			await this.$store.dispatch('updateComment', data)
+			await this.commentStore.apiUpdateComment(data)
 			this.hideUpdateForm()
 		},
 		deleteComment() {
@@ -205,7 +210,7 @@ export default {
 				id: this.comment.id,
 				cardId: this.comment.objectId,
 			}
-			this.$store.dispatch('deleteComment', data)
+			this.commentStore.apiDeleteComment(data)
 		},
 	},
 }
diff --git a/src/store/main.js b/src/store/main.js
index 8b7a55b6c..578f987af 100644
--- a/src/store/main.js
+++ b/src/store/main.js
@@ -13,7 +13,6 @@ import { generateOcsUrl, generateUrl } from '@nextcloud/router'
 import { BoardApi } from '../services/BoardApi.js'
 import stackModuleFactory from './stack.js'
 import cardModuleFactory from './card.js'
-import comment from './comment.js'
 import trashbin from './trashbin.js'
 import attachment from './attachment.js'
 import overview from './overview.js'
@@ -36,7 +35,6 @@ export default function storeFactory() {
 		modules: {
 			stack: stackModuleFactory(),
 			card: cardModuleFactory(),
-			comment,
 			trashbin,
 			attachment,
 			overview,
diff --git a/src/stores/comment.js b/src/stores/comment.js
new file mode 100644
index 000000000..a7ba8fcf5
--- /dev/null
+++ b/src/stores/comment.js
@@ -0,0 +1,103 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { defineStore } from 'pinia'
+import { CommentApi } from '../services/CommentApi.js'
+
+const apiClient = new CommentApi()
+
+const COMMENT_FETCH_LIMIT = 10
+
+export const useCommentStore = defineStore('comment', {
+	state: () => ({
+		comments: {},
+		replyTo: null,
+	}),
+	getters: {
+		getCommentsForCard: (state) => (id) => {
+			if (state.comments[id]) {
+				return [...state.comments[id].comments].sort((a, b) => b.id - a.id)
+			}
+			return []
+		},
+		hasMoreComments: (state) => (cardId) => {
+			return state.comments[cardId] && state.comments[cardId].hasMore
+		},
+	},
+	actions: {
+		endReached(cardId) {
+			if (this.comments[cardId]) {
+				this.comments[cardId].hasMore = false
+			}
+		},
+		addComments({ comments, cardId }) {
+			if (this.comments[cardId] === undefined) {
+				this.comments[cardId] = {
+					hasMore: comments.length > 0,
+					comments: [...comments],
+				}
+			} else {
+				const newComments = comments.filter((comment) => {
+					return this.comments[cardId].comments.findIndex((item) => item.id === comment.id) === -1
+				})
+				this.comments[cardId].comments.push(...newComments)
+			}
+		},
+		updateComment({ cardId, comment }) {
+			const existingIndex = this.comments[cardId].comments.findIndex(c => c.id === comment.id)
+			if (existingIndex !== -1) {
+				Object.assign(this.comments[cardId].comments[existingIndex], comment)
+			}
+		},
+		deleteComment(comment) {
+			const existingIndex = this.comments[comment.cardId].comments.findIndex(_comment => _comment.id === comment.id)
+			if (existingIndex !== -1) {
+				this.comments[comment.cardId].comments.splice(existingIndex, 1)
+			}
+		},
+		markCommentsAsRead(cardId) {
+			this.comments[cardId].comments.forEach(_comment => {
+				_comment.isUnread = false
+			})
+		},
+		setReplyTo(comment) {
+			this.replyTo = comment
+		},
+		async fetchComments({ cardId, offset }) {
+			const comments = await apiClient.loadComments({
+				cardId,
+				limit: COMMENT_FETCH_LIMIT,
+				offset: offset || 0,
+			})
+
+			this.addComments({ cardId, comments })
+
+			if (comments.length < COMMENT_FETCH_LIMIT) {
+				this.endReached(cardId)
+			}
+		},
+		async fetchMore({ cardId }) {
+			// fetch newer comments first
+			await this.fetchComments({ cardId })
+			await this.fetchComments({ cardId, offset: this.getCommentsForCard(cardId).length })
+		},
+		async createComment({ cardId, comment }) {
+			await apiClient.createComment({ cardId, comment, replyTo: this.replyTo })
+			await this.fetchComments({ cardId })
+		},
+		async apiDeleteComment(data) {
+			await apiClient.deleteComment(data)
+			this.deleteComment(data)
+		},
+		async apiUpdateComment(data) {
+			const comment = await apiClient.updateComment(data)
+			this.updateComment({ cardId: data.cardId, comment })
+		},
+		async apiMarkCommentsAsRead(cardId) {
+			await apiClient.markCommentsAsRead(cardId)
+			this.markCommentsAsRead(cardId)
+		},
+	},
+})

From 138e3c4467ad9021d80fecf160c09989e5fd1b43 Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Mon, 6 Apr 2026 09:47:29 +0000
Subject: [PATCH 2/2] Remove migrated Vuex store

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 src/store/comment.js | 113 -------------------------------------------
 1 file changed, 113 deletions(-)
 delete mode 100644 src/store/comment.js

diff --git a/src/store/comment.js b/src/store/comment.js
deleted file mode 100644
index d580fe06d..000000000
--- a/src/store/comment.js
+++ /dev/null
@@ -1,113 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import { CommentApi } from '../services/CommentApi.js'
-import Vue from 'vue'
-
-const apiClient = new CommentApi()
-
-const COMMENT_FETCH_LIMIT = 10
-
-export default {
-	state: {
-		comments: {},
-		replyTo: null,
-	},
-	getters: {
-		getCommentsForCard: (state) => (id) => {
-			if (state.comments[id]) {
-				return [...state.comments[id].comments].sort((a, b) => b.id - a.id)
-			}
-			return []
-		},
-		hasMoreComments: (state) => (cardId) => {
-			return state.comments[cardId] && state.comments[cardId].hasMore
-		},
-	},
-	mutations: {
-		endReached(state, { cardId }) {
-			if (state.comments[cardId]) {
-				state.comments[cardId].hasMore = false
-			}
-		},
-		addComments(state, { comments, cardId }) {
-			if (state.comments[cardId] === undefined) {
-				Vue.set(state.comments, cardId, {
-					hasMore: comments.length > 0,
-					comments: [...comments],
-				})
-			} else {
-				const newComments = comments.filter((comment) => {
-					return state.comments[cardId].comments.findIndex((item) => item.id === comment.id) === -1
-				})
-				state.comments[cardId].comments.push(...newComments)
-			}
-		},
-		updateComment(state, { cardId, comment }) {
-			const existingIndex = state.comments[cardId].comments.findIndex(c => c.id === comment.id)
-			if (existingIndex !== -1) {
-				Object.assign(state.comments[cardId].comments[existingIndex], comment)
-			}
-		},
-		deleteComment(state, comment) {
-			const existingIndex = state.comments[comment.cardId].comments.findIndex(_comment => _comment.id === comment.id)
-			if (existingIndex !== -1) {
-				state.comments[comment.cardId].comments.splice(existingIndex, 1)
-			}
-		},
-		markCommentsAsRead(state, cardId) {
-			state.comments[cardId].comments.forEach(_comment => {
-				Vue.set(_comment, 'isUnread', false)
-			})
-		},
-		setReplyTo(state, comment) {
-			Vue.set(state, 'replyTo', comment)
-		},
-	},
-	actions: {
-		async fetchComments({ commit }, { cardId, offset }) {
-			const comments = await apiClient.loadComments({
-				cardId,
-				limit: COMMENT_FETCH_LIMIT,
-				offset: offset || 0,
-			})
-
-			commit('addComments', {
-				cardId,
-				comments,
-			})
-
-			if (comments.length < COMMENT_FETCH_LIMIT) {
-				commit('endReached', { cardId })
-
-			}
-		},
-		async fetchMore({ commit, dispatch, getters }, { cardId }) {
-			// fetch newer comments first
-			await dispatch('fetchComments', { cardId })
-			await dispatch('fetchComments', { cardId, offset: getters.getCommentsForCard(cardId).length })
-
-		},
-		async createComment({ commit, dispatch, state }, { cardId, comment }) {
-			await apiClient.createComment({ cardId, comment, replyTo: state.replyTo })
-			await dispatch('fetchComments', { cardId })
-		},
-		async deleteComment({ commit }, data) {
-			await apiClient.deleteComment(data)
-			commit('deleteComment', data)
-		},
-		async updateComment({ commit }, data) {
-			const comment = await apiClient.updateComment(data)
-			await commit('updateComment', { cardId: data.cardId, comment })
-		},
-		async markCommentsAsRead({ commit }, cardId) {
-			await apiClient.markCommentsAsRead(cardId)
-			await commit('markCommentsAsRead', cardId)
-		},
-		setReplyTo({ commit }, comment) {
-			commit('setReplyTo', comment)
-		},
-	},
-}