Repo header: star/watch buttons should be icon + count only (drop the words) #285

New issue

Closed

opened 2026-09-10 13:04:45 +00:00 by crueber · 3 comments

crueber commented

2026-09-10 13:04:45 +00:00

Owner

What's requested

On the repo page header, the star and watch toggle buttons should drop the words — icon + count is enough. The words are redundant (the icons already carry the meaning, and the filled/color state already shows whether it's active) and the pair takes up a lot of the narrow header row (they were the dominant elements in the mobile sweep, see #273-#278 context).

Current code

Star toggle: web/src/pages/Repo.jsx:366 — ★ {s().viewer?.starred ? "starred" : "star"} · {s().stars ?? 0}
Watch toggle: web/src/pages/Repo.jsx:212 — {w().watching ? "[eye] watching" : "[eye] watch"} · {w().watchers ?? 0}

Rendered today as ★ starred · 1 and [eye] watching · 1 (screenshot).

Desired

Compact pill form: ★ 1 and [eye-emoji] 1 — icon plus count only. State continues to be communicated the way it already is:

active/filled styling via the existing primary class toggle (Repo.jsx:361, :207),
hover/tooltip via the existing title attributes ("Unstar this repo" / "Watch this repo", :363, :209),
aria-pressed stays for assistive tech; add/keep an aria-label carrying the verb ("Star this repo"/"Unstar this repo") since the visible verb is gone.

Acceptance criteria

Star button renders as ★ <count>, watch as [eye icon] <count> — no words.
Starred/watching state still visually distinct (existing primary treatment) and still one-click togglable with optimistic flip + error reconcile (no behavior change).
Tooltips and aria-labels carry the verb so the action remains discoverable and accessible.
No layout regression in the header cluster on desktop and at 390px mobile width (the buttons get smaller, which helps #273's header crowding).

## What's requested On the repo page header, the star and watch toggle buttons should drop the words — icon + count is enough. The words are redundant (the icons already carry the meaning, and the filled/color state already shows whether it's active) and the pair takes up a lot of the narrow header row (they were the dominant elements in the mobile sweep, see #273-#278 context). ## Current code - Star toggle: `web/src/pages/Repo.jsx:366` — `★ {s().viewer?.starred ? "starred" : "star"} · {s().stars ?? 0}` - Watch toggle: `web/src/pages/Repo.jsx:212` — `{w().watching ? "[eye] watching" : "[eye] watch"} · {w().watchers ?? 0}` Rendered today as `★ starred · 1` and `[eye] watching · 1` (screenshot). ## Desired Compact pill form: `★ 1` and `[eye-emoji] 1` — icon plus count only. State continues to be communicated the way it already is: - active/filled styling via the existing `primary` class toggle (`Repo.jsx:361`, `:207`), - hover/tooltip via the existing `title` attributes ("Unstar this repo" / "Watch this repo", `:363`, `:209`), - `aria-pressed` stays for assistive tech; add/keep an `aria-label` carrying the verb ("Star this repo"/"Unstar this repo") since the visible verb is gone. ## Acceptance criteria - [ ] Star button renders as `★ <count>`, watch as `[eye icon] <count>` — no words. - [ ] Starred/watching state still visually distinct (existing `primary` treatment) and still one-click togglable with optimistic flip + error reconcile (no behavior change). - [ ] Tooltips and `aria-label`s carry the verb so the action remains discoverable and accessible. - [ ] No layout regression in the header cluster on desktop and at 390px mobile width (the buttons get smaller, which helps #273's header crowding).

crueber referenced this issue from a commit

2026-09-10 19:41:45 +00:00

Fix #285: icon-only star/watch header buttons

crueber referenced this issue from a pull request that will close it,

2026-09-10 19:41:51 +00:00

Fix #285: icon-only star/watch buttons #302

crueber commented

2026-09-10 19:41:54 +00:00

Author

Owner

Fix up in PR #302 (#302): star/watch header buttons now icon + count only, aria-label/title carry the verb, aria-pressed + primary styling + optimistic flip unchanged. node --test green (581/581). Live-browser check left open for the reviewer (loopback blocked from the shared daemon).

Fix up in PR #302 (https://git.packden.us/crueber/walhub/pulls/302): star/watch header buttons now icon + count only, aria-label/title carry the verb, aria-pressed + primary styling + optimistic flip unchanged. node --test green (581/581). Live-browser check left open for the reviewer (loopback blocked from the shared daemon).

crueber commented

2026-09-10 19:58:16 +00:00

Author

Owner

Review of PR #302 (fix/issue-285, commit 216956f) — icon-only star/watch buttons. Verified in scratch worktree, main untouched.

Words gone in all states: StarToggle (web/src/pages/Repo.jsx:368) is now single-expression '\u2605 {s().stars ?? 0}' — no starred/star branch remains; WatchToggle (:213) is '\ud83d\udc41 {w().watchers ?? 0}' — no watching/watch branch remains. Grep confirms no visible word strings and no '\u00b7' separator in either block. Both states (starred/unstarred, watching/unwatching) render through the same expression, so every render branch is covered.

Aria-labels + titles (Repo.jsx:209-211, :364-366): title and aria-label both carry the verb per state ('Star/Unstar this repo', 'Watch/Unwatch this repo') — they announce the action while aria-pressed (:210, :365) keeps the state. Correct pattern, matches #285 acceptance.

Counts live: s().stars ?? 0 / w().watchers ?? 0 signals unchanged. Optimistic flip + error reconcile untouched (flip fns :189-200, :343-355 identical to main). Active styling (classList primary :207, :362) + tooltips intact; button classes unchanged.

No new deps: diff is Repo.jsx (6 lines) + new test only; package.json/pnpm-lock untouched (law 1 ok). Dark+light: no class/style change — inherits existing btn/primary, dark default unaffected. Laws 7/8 n/a (no tasks, no seam touch). Law 12: searched docs/ — no doc pins the button words (only backend/API record shapes), so no doc change needed.

Tests: new web/test/unit/repo-social-toggles.test.js (3 tests, source-pinned per repo convention) passes. Full unit suite: 362+216 pass, 0 fail (smoke.test.js 3/3 pass when server up; its trailing file-level hang reproduces on main too — pre-existing environmental, not from this PR). vite build clean (2.15s), esbuild SDK clean. No browser pass per task constraints (no browser needed — text-only change inside unchanged buttons/classes); noted explicitly.

No fixes needed — nothing pushed.

MERGE RECOMMENDATION: ready to merge.

Review of PR #302 (fix/issue-285, commit 216956f) — icon-only star/watch buttons. Verified in scratch worktree, main untouched. Words gone in all states: StarToggle (web/src/pages/Repo.jsx:368) is now single-expression '\u2605 {s().stars ?? 0}' — no starred/star branch remains; WatchToggle (:213) is '\ud83d\udc41 {w().watchers ?? 0}' — no watching/watch branch remains. Grep confirms no visible word strings and no '\u00b7' separator in either block. Both states (starred/unstarred, watching/unwatching) render through the same expression, so every render branch is covered. Aria-labels + titles (Repo.jsx:209-211, :364-366): title and aria-label both carry the verb per state ('Star/Unstar this repo', 'Watch/Unwatch this repo') — they announce the action while aria-pressed (:210, :365) keeps the state. Correct pattern, matches #285 acceptance. Counts live: s().stars ?? 0 / w().watchers ?? 0 signals unchanged. Optimistic flip + error reconcile untouched (flip fns :189-200, :343-355 identical to main). Active styling (classList primary :207, :362) + tooltips intact; button classes unchanged. No new deps: diff is Repo.jsx (6 lines) + new test only; package.json/pnpm-lock untouched (law 1 ok). Dark+light: no class/style change — inherits existing btn/primary, dark default unaffected. Laws 7/8 n/a (no tasks, no seam touch). Law 12: searched docs/ — no doc pins the button words (only backend/API record shapes), so no doc change needed. Tests: new web/test/unit/repo-social-toggles.test.js (3 tests, source-pinned per repo convention) passes. Full unit suite: 362+216 pass, 0 fail (smoke.test.js 3/3 pass when server up; its trailing file-level hang reproduces on main too — pre-existing environmental, not from this PR). vite build clean (2.15s), esbuild SDK clean. No browser pass per task constraints (no browser needed — text-only change inside unchanged buttons/classes); noted explicitly. No fixes needed — nothing pushed. MERGE RECOMMENDATION: ready to merge.

crueber closed this issue

2026-09-10 19:59:42 +00:00

crueber referenced this issue from a commit

2026-09-10 19:59:42 +00:00

Merge pull request 'Fix #285: icon-only star/watch buttons' (#302) from fix/issue-285 into main

crueber commented

2026-09-10 19:59:43 +00:00

Author

Owner

Fixed by PR #302 (review clean; all states wordless with verb aria-labels; tests green), merged. Closing.

crueber added the

git storage