From 8c3c7de871ea792719e9456858e828869b16fa38 Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Sun, 29 Mar 2026 17:36:20 +0100
Subject: [PATCH 1/3] fix: reduce label and drag-handle visual noise (#522)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Hide "Drag card" text on the drag handle by default; text fades in
  only when the handle is hovered, letting the dotted-grid icon carry
  affordance in compact mode
- Add a colour swatch (3×3 rounded dot) next to each label name in the
  CardModal picker so label colour is visible before the row is selected
- Add native tooltip to "Precision Mode Active" sidebar subtitle
  explaining the mode and pointing users to Preferences
---
 .../taskdeck-web/src/components/board/CardItem.vue   | 12 +++++++++++-
 .../taskdeck-web/src/components/board/CardModal.vue  |  6 ++++++
 .../src/components/shell/ShellSidebar.vue            |  5 ++++-
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/frontend/taskdeck-web/src/components/board/CardItem.vue b/frontend/taskdeck-web/src/components/board/CardItem.vue
index ffb25fe4e..e9f1b4dfb 100644
--- a/frontend/taskdeck-web/src/components/board/CardItem.vue
+++ b/frontend/taskdeck-web/src/components/board/CardItem.vue
@@ -83,7 +83,7 @@ function isOverdue(dateString: string | null): boolean {
       <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 6h.01M8 12h.01M8 18h.01M16 6h.01M16 12h.01M16 18h.01" />
       </svg>
-      <span class="td-board-card__drag-label">Drag card</span>
+      <span class="td-board-card__drag-label td-board-card__drag-label--hidden">Drag card</span>
     </button>
 
     <!-- Blocked Badge -->
@@ -203,6 +203,16 @@ function isOverdue(dateString: string | null): boolean {
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.2em;
+  transition: opacity var(--td-transition-fast);
+}
+
+/* Hide "Drag card" text by default; reveal only on drag-handle hover */
+.td-board-card__drag-label--hidden {
+  opacity: 0;
+}
+
+.td-card-drag-handle:hover .td-board-card__drag-label--hidden {
+  opacity: 1;
 }
 
 /* ── Badge row ── */
diff --git a/frontend/taskdeck-web/src/components/board/CardModal.vue b/frontend/taskdeck-web/src/components/board/CardModal.vue
index 3a9cd6790..d906e7551 100644
--- a/frontend/taskdeck-web/src/components/board/CardModal.vue
+++ b/frontend/taskdeck-web/src/components/board/CardModal.vue
@@ -424,6 +424,12 @@ onBeforeUnmount(() => {
                   :value="label.id"
                   class="w-4 h-4 text-primary border-outline-variant rounded focus:ring-primary/50"
                 />
+                <!-- Color swatch always visible so users can identify labels before selecting -->
+                <span
+                  class="inline-block w-3 h-3 rounded-full flex-shrink-0"
+                  :style="{ backgroundColor: label.colorHex }"
+                  aria-hidden="true"
+                />
                 <span>{{ label.name }}</span>
               </label>
             </div>
diff --git a/frontend/taskdeck-web/src/components/shell/ShellSidebar.vue b/frontend/taskdeck-web/src/components/shell/ShellSidebar.vue
index ce142cd48..a2c4b3d36 100644
--- a/frontend/taskdeck-web/src/components/shell/ShellSidebar.vue
+++ b/frontend/taskdeck-web/src/components/shell/ShellSidebar.vue
@@ -234,7 +234,10 @@ defineExpose({
     <div class="td-sidebar__header">
       <div v-if="!sidebarCollapsed" class="td-sidebar__brand">
         <span class="td-sidebar__title">Taskdeck</span>
-        <span class="td-sidebar__subtitle">Precision Mode Active</span>
+        <span
+          class="td-sidebar__subtitle"
+          title="Precision Mode: the workspace operates with guided automation — all proposals require explicit review before applying to the board. Change this in Preferences."
+        >Precision Mode Active</span>
       </div>
       <button
         class="td-sidebar__toggle"

From 44813097b4ffbfeda0390dd13e45a2670398248c Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Sun, 29 Mar 2026 17:36:39 +0100
Subject: [PATCH 2/3] fix: trim card title before toast interpolation (#522)

Success toast for card creation was showing a leading space inside the
quoted name (e.g. Card " First test card" created successfully) because
the raw API-returned title was not trimmed before interpolation.
---
 frontend/taskdeck-web/src/store/board/cardStore.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/taskdeck-web/src/store/board/cardStore.ts b/frontend/taskdeck-web/src/store/board/cardStore.ts
index 408e6b17d..7c618a808 100644
--- a/frontend/taskdeck-web/src/store/board/cardStore.ts
+++ b/frontend/taskdeck-web/src/store/board/cardStore.ts
@@ -41,7 +41,7 @@ export function createCardActions(state: BoardState, helpers: BoardHelpers) {
       const newCard = await cardsApi.createCard(boardId, card)
       state.currentBoardCards.value.push(newCard)
       helpers.updateColumnCardCount(newCard.columnId, 1)
-      helpers.toast.success(`Card "${newCard.title}" created successfully`)
+      helpers.toast.success(`Card "${newCard.title.trim()}" created successfully`)
       return newCard
     } catch (e: unknown) {
       helpers.handleApiError(e, 'Failed to create card')

From 1237ce097666a100641bc942a9477c28043090dc Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Sun, 29 Mar 2026 17:41:31 +0100
Subject: [PATCH 3/3] fix: address adversarial review findings for #522

- CardItem.vue: collapse hidden drag-label width to zero so the invisible
  text does not consume horizontal flex space and widen the button layout;
  restore width:auto on hover so the transition still works
- CardModal.vue: add bg-outline-variant fallback class on colour swatch so
  the dot remains visible when colorHex is empty/falsy
---
 frontend/taskdeck-web/src/components/board/CardItem.vue  | 8 +++++++-
 frontend/taskdeck-web/src/components/board/CardModal.vue | 4 ++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/taskdeck-web/src/components/board/CardItem.vue b/frontend/taskdeck-web/src/components/board/CardItem.vue
index e9f1b4dfb..92472e424 100644
--- a/frontend/taskdeck-web/src/components/board/CardItem.vue
+++ b/frontend/taskdeck-web/src/components/board/CardItem.vue
@@ -206,13 +206,19 @@ function isOverdue(dateString: string | null): boolean {
   transition: opacity var(--td-transition-fast);
 }
 
-/* Hide "Drag card" text by default; reveal only on drag-handle hover */
+/* Hide "Drag card" text by default; reveal only on drag-handle hover.
+   Use width/overflow collapse (not just opacity) so the invisible text
+   does not consume horizontal space in the flex button layout. */
 .td-board-card__drag-label--hidden {
   opacity: 0;
+  width: 0;
+  overflow: hidden;
 }
 
 .td-card-drag-handle:hover .td-board-card__drag-label--hidden {
   opacity: 1;
+  width: auto;
+  overflow: visible;
 }
 
 /* ── Badge row ── */
diff --git a/frontend/taskdeck-web/src/components/board/CardModal.vue b/frontend/taskdeck-web/src/components/board/CardModal.vue
index d906e7551..d3fef7499 100644
--- a/frontend/taskdeck-web/src/components/board/CardModal.vue
+++ b/frontend/taskdeck-web/src/components/board/CardModal.vue
@@ -426,8 +426,8 @@ onBeforeUnmount(() => {
                 />
                 <!-- Color swatch always visible so users can identify labels before selecting -->
                 <span
-                  class="inline-block w-3 h-3 rounded-full flex-shrink-0"
-                  :style="{ backgroundColor: label.colorHex }"
+                  class="inline-block w-3 h-3 rounded-full flex-shrink-0 bg-outline-variant"
+                  :style="label.colorHex ? { backgroundColor: label.colorHex } : {}"
                   aria-hidden="true"
                 />
                 <span>{{ label.name }}</span>