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:
parent
73f0f6e655
commit
123be346a3
4 changed files with 26 additions and 23 deletions
|
|
@ -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)}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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=""
|
||||
|
|
|
|||
7
src/components/ui/logged-tag.tsx
Normal file
7
src/components/ui/logged-tag.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue