feat(source-control): edge-anchored sidebar toggle, branches header cleanup, orange current-branch accents by chriswritescode-dev · Pull Request #349 · chriswritescode-dev/opencode-manager

chriswritescode-dev · 2026-09-08T13:15:20Z

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, focus, and accessibility feedback.
- Updated branch controls with compact icon buttons, tooltips, inline search, and refreshed branch colors.
- Refreshed settings layouts with responsive columns, grouped sections, improved wrapping, and clearer navigation.
- Made host configuration import collapsible and improved log viewer responsiveness.
- Added clearer notification, provider, keyboard shortcut, voice, and account settings layouts.
- Improved mobile prompt stop-button placement and session message scrolling during prompt editing.

…leanup, orange current-branch accents

coderabbitai · 2026-09-08T13:15:37Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Essentials

Run ID: 6bfd7271-a6f4-43e3-befd-47060086bab6

📥 Commits

Reviewing files that changed from the base of the PR and between a63897a and 0cf7318.

📒 Files selected for processing (3)

frontend/src/components/message/PromptInput.tsx
frontend/src/pages/SessionDetail.tsx
frontend/src/pages/__tests__/SessionDetail.scroll-floating.test.tsx

Included review availability: 3 reviews are currently available. Your included PR review attempts over the past 7 days set your current allowance at 5 reviews per hour.

📝 Walkthrough

Walkthrough

The PR updates sidebar collapse controls, branch controls, responsive settings interfaces, and prompt-overlay sizing. It adds accessibility attributes, collapsible configuration content, responsive layouts, and component tests while preserving existing settings and source-control actions.

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` renders an optional vertical collapse handle with directional chevrons and `aria-expanded`. `DesktopSidebar` uses `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 ahead/behind counts, conditionally shows search, and uses compact icon buttons. Current-branch indicators use orange styling.

Settings interface

Layer / File(s)	Summary
Settings navigation and configuration `frontend/src/components/settings/SettingsDialog.tsx`, `frontend/src/components/settings/SettingsDialog.test.tsx`, `frontend/src/components/settings/SettingsDialogLogs.test.tsx`, `frontend/src/components/settings/OpenCodeConfigManager.tsx`, `frontend/src/components/settings/OpenCodeConfigManager.test.tsx`	The settings dialog uses a vertical desktop menu, revised mobile navigation, shared OpenCode settings rendering, and a collapsible host-import section. Tests cover navigation and host-import behavior.
Responsive settings layouts `frontend/src/components/settings/AccountSettings.tsx`, `frontend/src/components/settings/GeneralSettings.tsx`, `frontend/src/components/settings/GitSettings.tsx`, `frontend/src/components/settings/NotificationSettings.tsx`, `frontend/src/components/settings/LogsViewer.tsx`, `frontend/src/components/settings/ServerHealthStatus.tsx`, `frontend/src/components/settings/VoiceSettings.tsx`, `frontend/src/components/settings/GeneralSettings.test.tsx`, `frontend/src/components/settings/NotificationSettings.test.tsx`, `frontend/src/components/settings/VoiceSettings.test.tsx`	Settings sections use responsive grids, divided rows, flexible log sizing, updated spacing, and accessible controls. Tests cover rendering and notification interactions.
Settings interaction and coverage `frontend/src/components/settings/KeyboardShortcuts.tsx`, `frontend/src/components/settings/KeyboardShortcuts.test.tsx`, `frontend/src/components/settings/ProviderSettings.tsx`, `frontend/src/components/settings/ProviderSettings.test.tsx`	Keyboard shortcuts use grouped reusable rows. Provider settings use compact responsive sections and accessible actions. Tests cover recording, provider flows, filtering, dialogs, and deletion.

Session overlay handling

Layer / File(s)	Summary
Prompt overlay observer `frontend/src/components/message/PromptInput.tsx`, `frontend/src/pages/SessionDetail.tsx`, `frontend/src/pages/__tests__/SessionDetail.scroll-floating.test.tsx`	The mobile stop button uses local absolute positioning. `SessionDetail` replaces its resize observer when the overlay changes and resets height when it is absent. Tests cover editing, unmounting, and remounting.

Priority: ➖ Normal

Estimated code review effort: 4 (Complex) | ~60 minutes

Merge Risk: ⚪ Minimal · up to 0cf73

The update refreshes source-control and settings UI behavior while ensuring prompt-overlay spacing is restored after edit remounts. No current merge-blocking risk is identified.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
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 29 functions across 27 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the primary source-control changes: the edge-anchored sidebar toggle, branches header cleanup, and orange current-branch accents.
Description check	✅ Passed	The description is detailed and relevant. It explains the problem, implementation, testing, and manual verification steps. It does not use the template headings or checklist, but it provides the main …
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.

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.}

…d mobile menu landing

…le stop button above input

…leanup, orange current-branch accents (chriswritescode-dev#349) * feat(source-control): edge-anchored sidebar toggle, branches header cleanup, orange current-branch accents * feat(settings): sidebar navigation with per-tab two-column layouts and mobile menu landing * fix(ui): re-measure prompt overlay after edit remount and anchor mobile stop button above input

feat(source-control): edge-anchored sidebar toggle, branches header c…

38f855d

…leanup, orange current-branch accents

chriswritescode-dev added 2 commits September 9, 2026 09:04

feat(settings): sidebar navigation with per-tab two-column layouts an…

a63897a

…d mobile menu landing

fix(ui): re-measure prompt overlay after edit remount and anchor mobi…

0cf7318

…le stop button above input

chriswritescode-dev merged commit 16f9f9c into main Sep 9, 2026
2 checks passed

chriswritescode-dev deleted the feat/ui-polish branch September 9, 2026 14:57

Navigation Menu

Repository navigation

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

feat(source-control): edge-anchored sidebar toggle, branches header cleanup, orange current-branch accents#349
chriswritescode-dev merged 3 commits into
mainfrom
feat/ui-polish

chriswritescode-dev commented Sep 8, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Sep 8, 2026 •

edited

Loading

Walkthrough

Changes

❌ Failed checks (1 warning)

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

chriswritescode-dev commented Sep 8, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Fix

Testing

How to test manually

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Sep 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

❌ Failed checks (1 warning)

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

chriswritescode-dev commented Sep 8, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Sep 8, 2026 •

edited

Loading