Skip to content

feat(navigation): add drag-resizable desktop sidebar - #443

Merged
chriswritescode-dev merged 1 commit into
mainfrom
feat/resizable-sidebar
Oct 19, 2026
Merged

feat(navigation): add drag-resizable desktop sidebar#443
chriswritescode-dev merged 1 commit into
mainfrom
feat/resizable-sidebar

Conversation

@chriswritescode-dev

@chriswritescode-dev chriswritescode-dev commented Oct 18, 2026 •
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Owner

Summary

The desktop sidebar was fixed at 240px when expanded. It is now drag-resizable and remembers its width across reloads.

  • A full-height handle on the right edge resizes the sidebar between 200px and 480px.
  • Width persists in localStorage under oc:sidebar:width; malformed or out-of-range values fall back to 240px, clamped on read.
  • Collapsed mode is unchanged: the 56px rail stays fixed and the handle is hidden.
  • Width transitions are disabled while dragging so the edge tracks the pointer; the collapse chevron keeps priority where the two overlap.
  • Keyboard access: the handle is a vertical separator (Arrow keys 16px, Shift 64px, Home/End for min/max).

Implementation notes

  • useSidebarWidth follows the existing usePersistentBoolean persistence pattern.
  • The localStorage read/write helpers duplicated in usePersistentBoolean moved to lib/persistentStorage.ts; both hooks now share them.
  • Sidebar keeps its existing w-60/w-14 classes when no width prop is passed, so default behavior is unchanged.

Validation

  • vitest run on useSidebarWidth, usePersistentBoolean, useSidebarCollapsed, sidebar, and DesktopSidebar: 56 passed.
  • tsc -b: clean.
  • ESLint on changed files: clean.
  • Not manually verified in a running browser; no dev servers were started.

Summary by CodeRabbit

  • New Features
    • The desktop sidebar can now be resized by dragging or using keyboard controls. Its width is saved between visits and stays within supported limits.

@coderabbitai

coderabbitai Bot commented Oct 18, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Review in Change Stack →

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: 383395b9-e234-447d-ad46-bec7708692cb
📥 Commits

Reviewing files that changed from the base of the PR and between 7f5c242 and 93118b6.

📒 Files selected for processing: 7
  • frontend/src/components/navigation/DesktopSidebar.tsx
  • frontend/src/components/ui/sidebar.test.tsx
  • frontend/src/components/ui/sidebar.tsx
  • frontend/src/hooks/usePersistentBoolean.ts
  • frontend/src/hooks/useSidebarWidth.test.tsx
  • frontend/src/hooks/useSidebarWidth.ts
  • frontend/src/lib/persistentStorage.ts

Included review availability: This review used your included allowance. Your plan provides up to 5 included reviews per hour; 2 remain after this review.

📝 Walkthrough

The sidebar now has persisted, bounded width state. Expanded sidebars with width controls support pointer dragging and keyboard resizing. The desktop sidebar connects the width hook to the resize controls.

Changes: Sidebar width controls

Layer / File(s) Summary
Persistent width state
frontend/src/lib/persistentStorage.ts, frontend/src/hooks/usePersistentBoolean.ts, frontend/src/hooks/useSidebarWidth.ts, frontend/src/hooks/useSidebarWidth.test.tsx		 Shared helpers handle persistent storage reads and writes. The sidebar-width hook loads, clamps, and persists its value; tests cover defaults, parsing, bounds, and persistence. The boolean hook now uses the shared helpers.
Sidebar resize controls
frontend/src/components/ui/sidebar.tsx, frontend/src/components/ui/sidebar.test.tsx		 Sidebar accepts controlled width and callback props. It supports pointer and keyboard resizing and renders an accessible resize separator when expanded with both controls. Tests cover styling, handle availability, pointer behavior, and keyboard input.
Desktop sidebar wiring
frontend/src/components/navigation/DesktopSidebar.tsx		 DesktopSidebar passes the width and setter from useSidebarWidth to Sidebar; existing collapsed-state props remain.

Priority: ⬇️ Low

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

Change: Feature

Sequence Diagram(s)

sequenceDiagram
  actor User
  participant DesktopSidebar
  participant Sidebar
  participant useSidebarWidth
  participant persistentStorage
  DesktopSidebar->>Sidebar: Pass width and width-change setter
  User->>Sidebar: Drag resize handle
  Sidebar->>useSidebarWidth: Call width-change setter
  useSidebarWidth->>persistentStorage: Store clamped width
Loading
Merge Risk: ⚪ Minimal · up to 93118

No confirmed issue blocks merging. Clarify the intended behavior for out-of-range saved widths if a 240px fallback is required.

Pre-merge checks: Passed 4 · Failed 1

Failed Failed checks: 1 warning

Check name Status Explanation Resolution
Docstring Coverage Warning Docstring coverage is 22.22% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 9 functions across 7 files. Write docstrings for the functions missing them to satisfy the coverage threshold.
Passed Passed checks: 4 passed
Check name Status Explanation
Title check Passed The title clearly and concisely describes the primary change: adding a drag-resizable desktop sidebar.
Description check Passed The description provides a detailed summary, implementation notes, behavior requirements, and validation results. It does not include the template's Type of Change and Checklist headings, but 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.
Full details: Description check

Explanation

The description provides a detailed summary, implementation notes, behavior requirements, and validation results. It does not include the template's Type of Change and Checklist headings, but the main required information is covered, including test, typecheck, and lint results.

  • Fix all pre-merge checks with AI
✨ Finishing Touches: 💡 1
📝 Generate docstrings: 💡
  • Commit to this branch
  • Create a new PR
🧪 Generate unit tests (beta)
  • Commit to this branch
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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

@chriswritescode-dev
chriswritescode-dev merged commit ca54b08 into main Oct 19, 2026
2 checks passed
@chriswritescode-dev
chriswritescode-dev deleted the feat/resizable-sidebar branch October 19, 2026 00:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@chriswritescode-dev