From 123be346a3ce333253b3a1445652d1dc73f7113a Mon Sep 17 00:00:00 2001
From: Dave <david.els1@outlook.com>
Date: Sat, 19 Sep 2026 13:16:07 +0200
Subject: [PATCH] refactor(dashboard): shared LoggedTag component, fix dead
 toggle and colliding a11y labels

- Create shared LoggedTag component to prevent style drift across three render paths
- Replace all three inline spans with single LoggedTag component import
- Fix dead "Show technical detail" toggle: only render when card has git commits
- Fix colliding screen-reader labels in unassigned tray by using commit subject instead of generic text
- Ensures manual entries stay visually consistent and semantically correct everywhere
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 src/components/card/commit-history.tsx       | 28 ++++++++++----------
 src/components/dashboard/recent-activity.tsx |  7 ++---
 src/components/linking/unassigned-list.tsx   |  7 +++--
 src/components/ui/logged-tag.tsx             |  7 +++++
 4 files changed, 26 insertions(+), 23 deletions(-)
 create mode 100644 src/components/ui/logged-tag.tsx

diff --git a/src/components/card/commit-history.tsx b/src/components/card/commit-history.tsx
index 63d16b4..ea00655 100644
--- a/src/components/card/commit-history.tsx
+++ b/src/components/card/commit-history.tsx
@@ -4,6 +4,7 @@ import { useState } from "react";
 import { Code2 } from "lucide-react";
 
 import { relativeTime } from "@/lib/time/relative";
+import { LoggedTag } from "@/components/ui/logged-tag";
 import type { CommitRecord } from "@/lib/pb/types";
 
 /**
@@ -18,6 +19,7 @@ import type { CommitRecord } from "@/lib/pb/types";
  */
 export function CommitHistory({ commits }: { commits: CommitRecord[] }) {
   const [showRaw, setShowRaw] = useState(false);
+  const hasGitCommits = commits.some((commit) => commit.source !== "manual");
 
   if (commits.length === 0) return null;
 
@@ -30,15 +32,17 @@ export function CommitHistory({ commits }: { commits: CommitRecord[] }) {
         <span className="tabular text-xs text-text-muted">
           {commits.length} {commits.length === 1 ? "change" : "changes"}
         </span>
-        <button
-          type="button"
-          onClick={() => setShowRaw((value) => !value)}
-          aria-pressed={showRaw}
-          className="ml-auto inline-flex items-center gap-1.5 text-[11px] text-text-muted hover:text-text-secondary"
-        >
-          <Code2 size={12} strokeWidth={2} />
-          {showRaw ? "Hide technical detail" : "Show technical detail"}
-        </button>
+        {hasGitCommits && (
+          <button
+            type="button"
+            onClick={() => setShowRaw((value) => !value)}
+            aria-pressed={showRaw}
+            className="ml-auto inline-flex items-center gap-1.5 text-[11px] text-text-muted hover:text-text-secondary"
+          >
+            <Code2 size={12} strokeWidth={2} />
+            {showRaw ? "Hide technical detail" : "Show technical detail"}
+          </button>
+        )}
       </div>
 
       <ol className="space-y-2.5">
@@ -54,11 +58,7 @@ export function CommitHistory({ commits }: { commits: CommitRecord[] }) {
                   {/* Fall back to the raw subject — never render nothing. */}
                   {commit.summary || commit.subject}
                 </p>
-                {commit.source === "manual" && (
-                  <span className="shrink-0 text-[10px] font-medium uppercase tracking-wide text-priority-medium">
-                    Logged
-                  </span>
-                )}
+                {commit.source === "manual" && <LoggedTag />}
               </div>
               <p className="mt-0.5 text-[11px] text-text-muted">
                 {relativeTime(commit.authored_at)}
diff --git a/src/components/dashboard/recent-activity.tsx b/src/components/dashboard/recent-activity.tsx
index b47ed22..ef53ef7 100644
--- a/src/components/dashboard/recent-activity.tsx
+++ b/src/components/dashboard/recent-activity.tsx
@@ -1,4 +1,5 @@
 import { relativeTime } from "@/lib/time/relative";
+import { LoggedTag } from "@/components/ui/logged-tag";
 import type { CommitRecord } from "@/lib/pb/types";
 
 /**
@@ -25,11 +26,7 @@ export function RecentActivity({ commits }: { commits: CommitRecord[] }) {
             <p className="min-w-0 flex-1 text-sm text-text-secondary">
               {commit.summary || commit.subject}
             </p>
-            {commit.source === "manual" && (
-              <span className="shrink-0 text-[10px] font-medium uppercase tracking-wide text-priority-medium">
-                Logged
-              </span>
-            )}
+            {commit.source === "manual" && <LoggedTag />}
             <span className="shrink-0 text-[11px] text-text-muted">
               {relativeTime(commit.authored_at)}
             </span>
diff --git a/src/components/linking/unassigned-list.tsx b/src/components/linking/unassigned-list.tsx
index ec43bc6..d529bcb 100644
--- a/src/components/linking/unassigned-list.tsx
+++ b/src/components/linking/unassigned-list.tsx
@@ -5,6 +5,7 @@ import { RefreshCw } from "lucide-react";
 
 import { linkCommitAction, relinkProjectAction } from "@/app/actions/linking";
 import { relativeTime } from "@/lib/time/relative";
+import { LoggedTag } from "@/components/ui/logged-tag";
 import { Pill } from "@/components/ui/pill";
 import type { CommitRecord } from "@/lib/pb/types";
 
@@ -73,9 +74,7 @@ export function UnassignedList({
                 </p>
                 <p className="mt-0.5 flex items-center gap-2 text-xs text-text-muted">
                   {commit.source === "manual" ? (
-                    <span className="text-[10px] font-medium uppercase tracking-wide text-priority-medium">
-                      Logged
-                    </span>
+                    <LoggedTag />
                   ) : (
                     <code>{commit.short_sha}</code>
                   )}
@@ -89,7 +88,7 @@ export function UnassignedList({
 
               <label className="shrink-0">
                 <span className="sr-only">
-                  Attach {commit.source === "manual" ? "this logged entry" : commit.short_sha} to a card
+                  Attach "{commit.subject || commit.short_sha}" to a card
                 </span>
                 <select
                   defaultValue=""
diff --git a/src/components/ui/logged-tag.tsx b/src/components/ui/logged-tag.tsx
new file mode 100644
index 0000000..a5bc97d
--- /dev/null
+++ b/src/components/ui/logged-tag.tsx
@@ -0,0 +1,7 @@
+export function LoggedTag() {
+  return (
+    <span className="shrink-0 text-[10px] font-medium uppercase tracking-wide text-priority-medium">
+      Logged
+    </span>
+  );
+}