Skip to content

feat(ui): shared RepoGroupHeader with info tint styling (#63)#69

Merged
wgordon17 merged 7 commits into
gordon-code:mainfrom
wgordon17:worktree-feat+repo-header-styling
Apr 18, 2026
Merged

feat(ui): shared RepoGroupHeader with info tint styling (#63)#69
wgordon17 merged 7 commits into
gordon-code:mainfrom
wgordon17:worktree-feat+repo-header-styling

Conversation

@wgordon17
Copy link
Copy Markdown
Member

Summary

  • Extracts shared RepoGroupHeader component from IssuesTab, PullRequestsTab, ActionsTab
  • Applies bg-info/20 tint, text-base font-bold, oklch text color via CSS light-dark()
  • Fixes WAF smoke test Origin header requirement for /api/* assertions

Closes #63

@wgordon17 wgordon17 marked this pull request as ready for review April 18, 2026 15:19
Extracts RepoGroupHeader component with bg-info/20 tint, oklch text
color via CSS light-dark(), and slot-based API (badges, trailing,
children). Adds @Utility repo-header-text with adaptive oklch colors.
Fixes animate-reorder-highlight fill-mode (forwards to none) to
prevent bg-info/20 override after animation ends. Includes 16 unit
tests for RepoGroupHeader component.
Replaces inline header markup with RepoGroupHeader component.
Removes ChevronIcon and formatStarCount imports. Retains Tooltip
for Monitoring all badge and Dep Dashboard toggle.
Replaces inline header markup with RepoGroupHeader component.
Removes ChevronIcon and formatStarCount imports. Retains Tooltip
for item rows and Monitoring all badge. Peek update div stays
as sibling outside the component.
Replaces inline header markup with RepoGroupHeader component.
Removes ChevronIcon import. Omits starCount and badges props
(ActionsTab has neither). Peek update div stays as sibling.
Restores compact-mode font size (text-sm/14px) while keeping
text-base/16px for normal density. Without this, compact repo
headers were 36px vs old 32px — a 12.5% height regression.
Reduces bg tint from info/20 to info/5 (hover info/10). Keeps oklch
repo-header-text but darkens dark-mode values (L 0.85→0.70, C 0.18→0.15)
for less visual competition with content rows.
Renames RepoGroupHeader children prop to collapsedSummary for
self-documenting API — the prop is only shown when collapsed.
Updates all 3 tab call sites.

Renames ActionsTab local collapsedSummary memo to workflowCounts
to avoid shadowing the new prop name.

Test improvements from PR review:
- Adds accessible name constraint to getByRole queries
- Adds toHaveBeenCalledWith() for onToggle no-args contract
- Adds repo-header-text class assertion
- Adds ActionsTab RepoGroupHeader integration tests
@wgordon17 wgordon17 force-pushed the worktree-feat+repo-header-styling branch from abba9a9 to c8d1977 Compare April 18, 2026 15:27
@wgordon17 wgordon17 merged commit bf8e737 into gordon-code:main Apr 18, 2026
1 check 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.

Repo group headers are hard to distinguish from item rows

1 participant