Skip to content

Redesign repo list rows with activity sparklines#4

Merged
kevincodex1 merged 1 commit into
mainfrom
feat/repo-list-activity-rows
Jul 3, 2026
Merged

Redesign repo list rows with activity sparklines#4
kevincodex1 merged 1 commit into
mainfrom
feat/repo-list-activity-rows

Conversation

@kevincodex1

Copy link
Copy Markdown
Contributor

Description

Redesigns the repository list rows and adds a GitHub-style commit-activity graph.

Rows go from a dense single line (~44px) to a taller two-line layout (~95px):
repo name + pills on line one, full-width description on line two, updated time
and stars stacked in a right-aligned meta column. The squeezed description/branch
grid columns are removed (branch was already shown as a pill).

Each row gains an activity sparkline (md+ viewports): a dependency-free
110×28 SVG bar chart of weekly commit counts over the last 12 weeks — past weeks
in a de-emphasis tone, the current week in the warm accent. The value is exposed
via aria-label; sums at the node's 30-commit API cap read as a floor ("30+ commits").

Loading is node-friendly: useRepoActivity fetches /commits only once a row
scrolls near the viewport (IntersectionObserver, 200px margin), through a 2-slot
concurrency pool (the node limits concurrent connections), with a session cache.
Hover-prefetched repos (repoCache) resolve without any fetch via the new
RepoCommit.dateRaw field.

Known limitation: the node returns at most 30 commits, so hyperactive repos
collapse into a single current-week bar. The real fix is server-side weekly
buckets on the list endpoint — a good candidate to bundle with the pending
q=/sort= node deploy.

Type of change

  • Bug fix (non-breaking change that fixes an issue)
  • New feature (non-breaking change that adds functionality)
  • Breaking change (fix or feature that changes existing behavior)
  • Refactor / code quality (no behavior change)
  • Documentation
  • Tests / CI

How was this tested?

  • 8 new unit tests for the week-bucketing logic (src/lib/activity.test.ts);
    full suite: 68 tests passing.
  • Driven end-to-end with Playwright against the live node (dev proxy):
    • Max in-flight /commits requests observed: 2 (concurrency cap holds).
    • Only near-viewport rows fetch: 6 requests on load, 12 more after paging to
      page 2 — not one per row.
    • Sparklines hidden below md (0 visible at 390px); rows stack cleanly on mobile.
    • Verified light and dark themes via the app's own theme persistence.
    • Zero console errors.

Screenshots

Screenshot 2026-07-03 at 8 26 02 AM

Checklist

  • npm run lint passes
  • npm test passes
  • npm run build passes (includes typecheck)
  • New logic in src/lib/ has colocated unit tests
  • I kept the change focused on a single concern

Rows go from a dense single line to a taller two-line layout (name +
pills, full-width description) with a per-repo commit-activity sparkline
in a new column, GitHub-style.

- Sparkline: dependency-free SVG micro bar chart of weekly commit counts
  (12 weeks); past weeks in a de-emphasis tone, current week in the warm
  accent. Values carried by an aria-label; counts at the node's
  30-commit API cap are reported as a floor ("30+").
- useRepoActivity: IntersectionObserver-gated lazy load per row, session
  cache, and a 2-slot concurrency pool since the node limits concurrent
  connections. Hover-prefetched repos (repoCache) resolve without a
  fetch via the new RepoCommit.dateRaw field.
- RepoList header and RepoRowSkeleton updated to the new grid.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@kevincodex1 kevincodex1 merged commit 67aa8f6 into main Jul 3, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant