Skip to content

feat(source-control): edge-anchored sidebar toggle, branches header cleanup, orange current-branch accents - #349

Open
chriswritescode-dev wants to merge 1 commit into
mainfrom
feat/ui-polish
Open

feat(source-control): edge-anchored sidebar toggle, branches header cleanup, orange current-branch accents#349
chriswritescode-dev wants to merge 1 commit into
mainfrom
feat/ui-polish

Conversation

@chriswritescode-dev

@chriswritescode-dev chriswritescode-dev commented Sep 8, 2026

Copy link
Copy Markdown
Owner

Problem

The source-control panel had a bulky sidebar toggle in the desktop sidebar header and a cluttered branches tab: a redundant "Current: " header, a detached search input, and full-width buttons. Current-branch accents also reused the same emerald used for ahead/stage states, so the checked-out branch didn't stand out.

Fix

  • Edge-anchored sidebar collapse toggle: Sidebar renders its own toggle (only when onToggle is passed) as an absolute vertical pill on the right edge, with an orange accent bar, hover chevron, and aria-expanded; removed the toggle row from DesktopSidebar
  • Branches tab header cleanup: dropped the redundant current-branch header (already shown in the panel header), moved search into the action row, compacted Branch/Worktree buttons with labels hidden on small screens, raised mobile touch targets to h-10
  • Orange current-branch accents: rows highlight with bg-orange-500/10 and GIT_UI_COLORS.current changed from emerald to orange, distinguishing "current" from ahead/stage states
  • Sidebar toggle tests for collapsed-state click and accessible name / aria-expanded behavior

Testing

  • vitest src/components/ui/sidebar.test.tsx: 11 passed
  • pnpm lint:frontend clean
  • frontend tsc -b --noEmit clean

How to test manually

Open the source-control panel: hover the sidebar's right edge for the collapse pill, check the Branches tab header (search + compact Branch/Worktree buttons), and note the orange accent on the current branch row and panel header.

Summary by CodeRabbit

  • UI Improvements
    • Redesigned the sidebar collapse control as a vertical handle with clearer hover and focus indicators.
    • Improved accessibility feedback for expanding and collapsing the sidebar.
    • Updated branch controls with compact icon buttons and tooltips.
    • Positioned branch search alongside branch actions when branches are available.
    • Refined active and current branch color styling for improved visual distinction.

@coderabbitai

coderabbitai Bot commented Sep 8, 2026

Copy link
Copy Markdown
Contributor

Review Change StackReview Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Advanced

Run ID: 2eb6f623-9369-46cb-84f5-b6b5d80258b8

📥 Commits

Reviewing files that changed from the base of the PR and between 47d57df and 38f855d.

📒 Files selected for processing (6)
  • frontend/src/components/navigation/DesktopSidebar.tsx
  • frontend/src/components/source-control/BranchesTab.tsx
  • frontend/src/components/source-control/SourceControlPanel.tsx
  • frontend/src/components/ui/sidebar.test.tsx
  • frontend/src/components/ui/sidebar.tsx
  • frontend/src/lib/git-status-styles.ts
💤 Files with no reviewable changes (1)
  • frontend/src/components/navigation/DesktopSidebar.tsx

Included review availability: Your plan provides up to 4 included reviews per hour; 3 remain after this review.


📝 Walkthrough

Walkthrough

The PR redesigns the sidebar collapse handle and its accessibility behavior. It also simplifies branch controls, removes ahead/behind status display, and changes current-branch indicators to orange.

Changes

Sidebar controls

Layer / File(s) Summary
Sidebar toggle redesign
frontend/src/components/ui/sidebar.tsx, frontend/src/components/ui/sidebar.test.tsx, frontend/src/components/navigation/DesktopSidebar.tsx
Sidebar now renders an optional vertical collapse handle with directional chevrons and aria-expanded. DesktopSidebar relies on Sidebar.onToggle. Tests cover labels, state, and click behavior.

Branch interface

Layer / File(s) Summary
Branch controls and colors
frontend/src/components/source-control/BranchesTab.tsx, frontend/src/components/source-control/SourceControlPanel.tsx, frontend/src/lib/git-status-styles.ts
The branch view removes current-branch status counts, conditionally shows search, and uses compact icon buttons. Current-branch highlights and indicators use orange styling.

Priority: ⬇️ Low — Defer this source-control UI refresh because it is limited to sidebar controls, branch-tab layout, colors, and accessibility tests.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Merge Risk: ⚪ Minimal · up to 38f85

This updates sidebar and branch UI presentation while preserving collapse behavior, branch status refresh, and search availability. The change is ready to merge with no identified production risk.

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Description check ⚠️ Warning The description explains the problem, fix, testing, and manual validation steps, but it does not use the required template sections. It omits the Type of Change and Checklist sections and does not pro… Add the required ## Summary, ## Type of Change, and ## Checklist sections. Select the applicable change type and confirm the style, TypeScript, test coverage, lint, and typecheck items. Keep the existing problem, fix, testing, and manual te…
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 4 functions across 5 files. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly summarizes the main changes: the edge-anchored sidebar toggle, Branches tab cleanup, and orange current-branch accents.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Full details: Description check

Explanation

The description explains the problem, fix, testing, and manual validation steps, but it does not use the required template sections. It omits the Type of Change and Checklist sections and does not provide their checkbox selections.

Resolution

Add the required ## Summary, ## Type of Change, and ## Checklist sections. Select the applicable change type and confirm the style, TypeScript, test coverage, lint, and typecheck items. Keep the existing problem, fix, testing, and manual test details as supporting content.

  • Fix all pre-merge checks with AI
✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/ui-polish

Comment @coderabbitai help to get the list of available commands.

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