Render the fork count on the Fork button inside a count badge matching the header row's badge idiom

crueber commented

2026-09-13 13:38:25 +00:00

Owner

What's requested

On the repository header row, render the fork count on the Fork button inside a count badge / circle, matching the count-badge idiom already used in the same header area, instead of the current bare-text suffix.

Current behavior (evidence)

web/src/pages/Repo.jsx (Fork pill, Issue #424 block, ~line 618-626): the Fork link renders as a plain pill with the count appended as text:
```
<A class="pill" href={`/${full()}/fork`} title={`Fork ${full()}`}>
  Fork{(s().forks ?? 0) > 0 ? ` ${s().forks}` : ""}
</A>
```
The count is plain inline text — visually indistinguishable from the label.
The Fork pill sits in the ml-auto actions cluster of .repo-header alongside StarToggle (~line 333, renders the star glyph + {stars} inside a .btn) and WatchToggle (~line 179, renders the eye glyph + {watchers} inside a .btn), plus CloneMenu.

Reference idiom to match

.tab-badge in web/src/ui.css (~line 83) is the established count-badge/circle style:
```
.tab-badge { @apply ml-1.5 inline-block min-w-5 rounded-full bg-emerald-500 px-1 text-center text-[11px] font-semibold leading-5 text-white; }
```
(used on the repo tab row, issue #319 — count rendered in a white-on-emerald rounded-full pill, hidden at 0).
The GitHub/Forgejo convention this ticket mirrors: action button (Fork) + count inside a small badge/circle attached to the button, same as the Star/Watch controls read as button-plus-count in the header row.

Architecture notes

Count source is the shared summary (s().forks), already fetched — no new request, no ETag/caching concern (display-only, client-side).
Fork is an <A> link, not a button; the badge nests inside the anchor and does not need to change the link semantics.
Hidden-at-zero is the existing convention (tab badges render nothing at 0); keep that behavior for the badge.

Acceptance criteria

Fork count renders inside a rounded-full badge/circle on the Fork control, reusing (or extracting to match) the .tab-badge count-pill styling — white on emerald-500, readable in both themes, no dark: variant needed (same rationale as the tab badge comment).
At 0 forks the badge is hidden (current behavior preserved — no "Fork 0").
Badge composes into the existing Fork pill (inline-flex, same row height) — no reflow of the header actions cluster, no orphaned wrapping on narrow widths.
Star/Watch controls in the same header row remain visually consistent (button-plus-count reads the same); if the badge style is extracted to a shared class, Star/Watch may adopt it but that is the implementer's call — note the decision.
Link still navigates to /{owner}/{repo}/fork; title and accessibility labels unchanged in meaning.

## What's requested On the repository header row, render the fork count on the Fork button inside a count badge / circle, matching the count-badge idiom already used in the same header area, instead of the current bare-text suffix. ## Current behavior (evidence) - `web/src/pages/Repo.jsx` (Fork pill, Issue #424 block, ~line 618-626): the Fork link renders as a plain `pill` with the count appended as text: ```jsx <A class="pill" href={`/${full()}/fork`} title={`Fork ${full()}`}> Fork{(s().forks ?? 0) > 0 ? ` ${s().forks}` : ""} </A> ``` The count is plain inline text — visually indistinguishable from the label. - The Fork pill sits in the `ml-auto` actions cluster of `.repo-header` alongside `StarToggle` (~line 333, renders the star glyph + `{stars}` inside a `.btn`) and `WatchToggle` (~line 179, renders the eye glyph + `{watchers}` inside a `.btn`), plus `CloneMenu`. ## Reference idiom to match - `.tab-badge` in `web/src/ui.css` (~line 83) is the established count-badge/circle style: ``` .tab-badge { @apply ml-1.5 inline-block min-w-5 rounded-full bg-emerald-500 px-1 text-center text-[11px] font-semibold leading-5 text-white; } ``` (used on the repo tab row, issue #319 — count rendered in a white-on-emerald rounded-full pill, hidden at 0). - The GitHub/Forgejo convention this ticket mirrors: action button (Fork) + count inside a small badge/circle attached to the button, same as the Star/Watch controls read as button-plus-count in the header row. ## Architecture notes - Count source is the shared summary (`s().forks`), already fetched — no new request, no ETag/caching concern (display-only, client-side). - Fork is an `<A>` link, not a button; the badge nests inside the anchor and does not need to change the link semantics. - Hidden-at-zero is the existing convention (tab badges render nothing at 0); keep that behavior for the badge. ## Acceptance criteria - [ ] Fork count renders inside a rounded-full badge/circle on the Fork control, reusing (or extracting to match) the `.tab-badge` count-pill styling — white on emerald-500, readable in both themes, no `dark:` variant needed (same rationale as the tab badge comment). - [ ] At 0 forks the badge is hidden (current behavior preserved — no "Fork 0"). - [ ] Badge composes into the existing Fork pill (inline-flex, same row height) — no reflow of the header actions cluster, no orphaned wrapping on narrow widths. - [ ] Star/Watch controls in the same header row remain visually consistent (button-plus-count reads the same); if the badge style is extracted to a shared class, Star/Watch may adopt it but that is the implementer's call — note the decision. - [ ] Link still navigates to `/{owner}/{repo}/fork`; `title` and accessibility labels unchanged in meaning.

crueber added the

fork

label

2026-09-13 13:38:31 +00:00

crueber added this to the v1 milestone

2026-09-13 13:38:31 +00:00

crueber added

issues

and removed

fork

labels

2026-09-13 13:39:21 +00:00

crueber referenced this issue

2026-09-13 13:39:41 +00:00

Unify Star/Watch/Fork/Clone header pills into one idiom (Star/Watch canonical): counts left of label, one aligned row #447

crueber commented

2026-09-13 13:39:55 +00:00

Author

Owner

Superseded by #447: the header is being unified into one pill idiom (Star/Watch style, count left of label) rather than adding a tab-badge count circle to Fork — #447 absorbs this ticket.

crueber closed this issue

2026-09-13 13:39:55 +00:00

crueber referenced this issue

2026-09-13 14:08:56 +00:00

Fix #447: unify header pills #454

crueber commented

2026-09-13 14:09:00 +00:00

Author

Owner

Superseded by #447 (absorbed); closing.

crueber referenced this issue

2026-09-13 14:11:09 +00:00