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>
This commit is contained in:
Dave 2026-09-19 13:16:07 +02:00
parent 73f0f6e655
commit 123be346a3
4 changed files with 26 additions and 23 deletions

View file

@ -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)}

View file

@ -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>

View file

@ -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=""

View file

@ -0,0 +1,7 @@
export function LoggedTag() {
return (
<span className="shrink-0 text-[10px] font-medium uppercase tracking-wide text-priority-medium">
Logged
</span>
);
}