fix(sidebar): keep read titles at text-foreground; drop PR link font-medium

Read titles were dropping both weight and color, which flattened cards so
the title read at the same tone as the branch row below it. Weight alone
now carries the unread signal — same reasoning the repo chip already
documents. Also drops font-medium on the PR link so it matches the PR
title's weight.

Co-authored-by: Orca <help@stably.ai>
This commit is contained in:
brennanb2025
2026-05-01 16:13:21 -07:00
co-authored by Orca
parent 06510f685a
commit 7bb5f39c14
3 changed files with 20 additions and 23 deletions
+12 -13
View File
@@ -80,7 +80,9 @@ the unread signal. This applies to:
- The title (`displayName`) — today `font-semibold text-foreground`
(`WorktreeCard.tsx:430`) → on read cards becomes
`font-normal text-muted-foreground`.
`font-normal text-foreground` (weight only; color stays at
`text-foreground` to preserve hierarchy against the muted branch
row below, same reasoning as the repo badge).
- The repo badge label — today `font-semibold text-foreground`
(`WorktreeCard.tsx:508`) → drops to `font-normal text-foreground`
on read cards to preserve hierarchy (the repo label must not read
@@ -143,17 +145,14 @@ card property is enabled:**
```
- Apply to the display name (`WorktreeCard.tsx:430`):
```tsx
{/* Why: bold = unread is the single attention signal on this card,
mirroring DashboardAgentRow.tsx:262. The base class drops the
always-on font-semibold that was safe when a separate bell carried
the signal; now the title IS the signal, so it must de-bold on
read cards. */}
{/* Why: weight alone carries the unread signal; color stays at
text-foreground in both states so the title keeps hierarchy
against the muted branch row below (muting the title as well
flattened the card — same reasoning as the repo chip below). */}
<div
className={cn(
'text-[12px] truncate leading-tight',
showUnreadEmphasis
? 'font-semibold text-foreground'
: 'font-normal text-muted-foreground'
'text-[12px] truncate leading-tight text-foreground',
showUnreadEmphasis ? 'font-semibold' : 'font-normal'
)}
>
{worktree.displayName}
@@ -263,9 +262,9 @@ becomes: *unread state is automatic; to clear it, open the workspace.*
| Card state | Title | Repo badge | Bell | Notes |
|---|---|---|---|---|
| unread + property on | `font-semibold text-foreground` | `font-semibold text-foreground` | — | Primary target behavior |
| unread + property off | `font-normal text-muted-foreground` | `font-normal text-foreground` | — | Opt-out active; store flag unchanged |
| read + property on | `font-normal text-muted-foreground` | `font-normal text-foreground` | — | Baseline read |
| read + property off | `font-normal text-muted-foreground` | `font-normal text-foreground` | — | Same as read + property on (no signal to hide) |
| unread + property off | `font-normal text-foreground` | `font-normal text-foreground` | — | Opt-out active; store flag unchanged |
| read + property on | `font-normal text-foreground` | `font-normal text-foreground` | — | Baseline read |
| read + property off | `font-normal text-foreground` | `font-normal text-foreground` | — | Same as read + property on (no signal to hide) |
| SSH disconnected + unread | bold + `opacity-60` (inherited from card root) | bold + `opacity-60` | — | Dimmed but still bolder than the read cards next to it |
| Deleting + unread | bold + `opacity-50 grayscale` | bold + `opacity-50 grayscale` | — | Deleting takes visual priority; acceptable |
@@ -393,17 +393,15 @@ const WorktreeCard = React.memo(function WorktreeCard({
</Tooltip>
)}
{/* Why: bold = unread is the single attention signal on this
card, mirroring DashboardAgentRow.tsx:262. The base class
drops the always-on font-semibold that was safe when a
separate bell carried the signal; now the title IS the
signal, so it must de-bold on read cards. */}
{/* Why: weight alone carries the unread signal; color stays
at text-foreground in both states so the title keeps
hierarchy against the muted branch row below (muting the
title as well flattened the card — same reasoning as the
repo chip comment below). */}
<div
className={cn(
'text-[12px] truncate leading-tight',
showUnreadEmphasis
? 'font-semibold text-foreground'
: 'font-normal text-muted-foreground'
'text-[12px] truncate leading-tight text-foreground',
showUnreadEmphasis ? 'font-semibold' : 'font-normal'
)}
>
{/* Why: the card root is a non-interactive <div>, so aria-label
@@ -97,7 +97,7 @@ export function PrSection({ pr, onClick }: PrSectionProps): React.JSX.Element {
href={pr.url}
target="_blank"
rel="noreferrer"
className="text-foreground opacity-80 font-medium shrink-0 hover:text-foreground hover:underline"
className="text-foreground opacity-80 shrink-0 hover:text-foreground hover:underline"
onClick={(e) => e.stopPropagation()}
>
PR #{pr.number}