From 101f2ea79ca0a626acec544a6b068b62bf5f3a83 Mon Sep 17 00:00:00 2001
From: sadegh <sa.rohani72@gmail.com>
Date: Tue, 9 Jun 2026 19:26:57 +0330
Subject: [PATCH] feat(card): show comments within the Details tab

Remove the separate Comments sidebar tab and render the comment list and
form at the bottom of the Details tab under a "Comments" heading, so a
card's description and its discussion are visible together without
switching tabs. The Activity tab moves up to fill the freed slot, and
the comments badge on a card now opens the Details tab.

Signed-off-by: sadegh <sa.rohani72@gmail.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/card/CardSidebar.vue           | 18 +-----------------
 src/components/card/CardSidebarTabDetails.vue | 17 +++++++++++++++++
 src/components/cards/CardBadges.vue           |  2 +-
 3 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue
index 346aa6cb9..cf1c1a1c2 100644
--- a/src/components/card/CardSidebar.vue
+++ b/src/components/card/CardSidebar.vue
@@ -58,19 +58,9 @@
 			<CardSidebarTabAttachments :card="currentCard" />
 		</NcAppSidebarTab>
 
-		<NcAppSidebarTab id="comments"
-			:order="2"
-			:name="t('deck', 'Comments')">
-			<template #icon>
-				<CommentIcon v-if="activeTabId === 'comments'" :size="20" />
-				<CommentOutlineIcon v-else :size="20" />
-			</template>
-			<CardSidebarTabComments :card="currentCard" :tab-query="tabQuery" />
-		</NcAppSidebarTab>
-
 		<NcAppSidebarTab v-if="hasActivity"
 			id="timeline"
-			:order="3"
+			:order="2"
 			:name="t('deck', 'Activity')">
 			<template #icon>
 				<ActivityIcon :size="20" />
@@ -87,15 +77,12 @@ import { getCapabilities } from '@nextcloud/capabilities'
 import { mapState, mapGetters } from 'vuex'
 import CardSidebarTabDetails from './CardSidebarTabDetails.vue'
 import CardSidebarTabAttachments from './CardSidebarTabAttachments.vue'
-import CardSidebarTabComments from './CardSidebarTabComments.vue'
 import CardSidebarTabActivity from './CardSidebarTabActivity.vue'
 import relativeDate from '../../mixins/relativeDate.js'
 import moment from '@nextcloud/moment'
 import AttachmentIcon from 'vue-material-design-icons/Paperclip.vue'
 import HomeIcon from 'vue-material-design-icons/Home.vue'
 import HomeOutlineIcon from 'vue-material-design-icons/HomeOutline.vue'
-import CommentIcon from 'vue-material-design-icons/Comment.vue'
-import CommentOutlineIcon from 'vue-material-design-icons/CommentOutline.vue'
 import ActivityIcon from 'vue-material-design-icons/LightningBolt.vue'
 
 import { showError, showWarning } from '@nextcloud/dialogs'
@@ -112,13 +99,10 @@ export default {
 		NcActionButton,
 		NcReferenceList,
 		CardSidebarTabAttachments,
-		CardSidebarTabComments,
 		CardSidebarTabActivity,
 		CardSidebarTabDetails,
 		ActivityIcon,
 		AttachmentIcon,
-		CommentIcon,
-		CommentOutlineIcon,
 		HomeIcon,
 		HomeOutlineIcon,
 		CardMenuEntries,
diff --git a/src/components/card/CardSidebarTabDetails.vue b/src/components/card/CardSidebarTabDetails.vue
index c70ebdf07..41d6d583c 100644
--- a/src/components/card/CardSidebarTabDetails.vue
+++ b/src/components/card/CardSidebarTabDetails.vue
@@ -45,6 +45,11 @@
 			:can-edit="canEdit"
 			show-attachments
 			@change="descriptionChanged" />
+
+		<div class="comments-section">
+			<h5>{{ t('deck', 'Comments') }}</h5>
+			<CardSidebarTabComments :card="card" />
+		</div>
 	</div>
 </template>
 
@@ -65,6 +70,7 @@ import DueDateSelector from './DueDateSelector.vue'
 import StartDateSelector from './StartDateSelector.vue'
 import { debounce } from 'lodash'
 import DependentCardsSelector from './DependentCardsSelector.vue'
+import CardSidebarTabComments from './CardSidebarTabComments.vue'
 
 export default {
 	name: 'CardSidebarTabDetails',
@@ -75,6 +81,7 @@ export default {
 		AssignmentSelector,
 		TagSelector,
 		Description,
+		CardSidebarTabComments,
 		NcCollectionList,
 	},
 	mixins: [Color],
@@ -253,6 +260,16 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.comments-section {
+	margin-top: 20px;
+
+	h5 {
+		border-bottom: 1px solid var(--color-border);
+		color: var(--color-text-maxcontrast);
+		margin-bottom: 10px;
+	}
+}
+
 .section-wrapper {
 	display: flex;
 	max-width: 100%;
diff --git a/src/components/cards/CardBadges.vue b/src/components/cards/CardBadges.vue
index 1d88fe311..bbf94847a 100644
--- a/src/components/cards/CardBadges.vue
+++ b/src/components/cards/CardBadges.vue
@@ -94,7 +94,7 @@ export default {
 	methods: {
 		openComments() {
 			const boardId = this.card && this.card.boardId ? this.card.boardId : this.$route.params.id
-			this.$router.push({ name: 'card', params: { id: boardId, cardId: this.card.id, tabId: 'comments' } })
+			this.$router.push({ name: 'card', params: { id: boardId, cardId: this.card.id, tabId: 'details' } })
 		},
 	},
 }