Skip to content

feat(sidebar): user-customizable nav — hide/show and reorder items#199

Open
Makisuo wants to merge 2 commits into
mainfrom
feat/customizable-sidebar
Open

feat(sidebar): user-customizable nav — hide/show and reorder items#199
Makisuo wants to merge 2 commits into
mainfrom
feat/customizable-sidebar

Conversation

@Makisuo

@Makisuo Makisuo commented Jul 10, 2026

Copy link
Copy Markdown
Collaborator

What

The sidebar has grown to ~12 nav items and is getting hard to scan. This adds a user-facing "Customize sidebar" entry (pencil icon, footer group) that flips the sidebar into an inline edit mode:

  • Hide/show any nav item via per-row eye toggles (hidden rows stay in the edit list, dimmed)
  • Reorder within each group via drag grips (motion Reorder) or keyboard (Arrow keys / Home / End on the grip)
  • Pinned edit bar with Reset (only when customized) and Done; all writes are live, Done just exits
  • Preferences persist per browser in localStorage (maple.sidebar.prefs) via the existing Atom.kvs pattern

Design decisions

  • Stable ids added to NavItem — href can't be the identity because visibleSignalsNavItems rewrites the Infrastructure href when infra is org-gated off
  • Overview is locked: always visible, pinned first, no controls in edit mode
  • Org feature gating stays authoritative — prefs apply on top of the gated item set, so users can't reveal gated-off items
  • Schema evolution: mergeOrder drops removed ids and inserts nav items shipped in future releases at their default position, so new features never silently vanish from customized sidebars
  • Reorder is within-group only; Dashboards/Support/Settings/user menu are not customizable (dimmed + inert during edit)
  • Hidden-but-active route (e.g. hide Traces, visit /traces) just shows no active item — intentional, no ghost row
  • Collapsing the rail mid-edit acts as implicit Done; clicking Customize from the icon-collapsed rail expands straight into edit mode

Reviewer notes

  • New EyeSlashIcon follows the app's dotted icon style (core EyeIcon + strike)
  • No useEffect: collapse-exits-edit is derived state adjusted during render
  • Unit tests cover the merge algorithm (permutations, unknown ids, new-id insertion) and pref application (locked ids, gated-out items, infra-gated href rewrite)

Testing

  • bun run typecheck clean; bun run test — 11/11 new tests pass
  • Verified end-to-end in the browser: hide → persists across full reload; reorder via keyboard path → persists; Reset restores defaults; icon-rail entry, mid-edit collapse, and hidden-route navigation all behave

🤖 Generated with Claude Code


Open in Devin Review

The sidebar has grown to ~12 nav items and is getting hard to scan.
Add an inline edit mode ("Customize sidebar" in the footer group) with
per-item eye toggles and drag/keyboard reordering, persisted per
browser in localStorage via the existing Atom.kvs pattern.

- Stable `id` on NavItem (href is unstable: the infra gate rewrites it)
- mergeOrder drops removed ids and inserts future nav items at their
  default position so new features never silently vanish
- Overview is locked (always visible, pinned first); org feature gating
  stays authoritative — prefs apply on top of visibleSignalsNavItems
- Edit bar pinned outside the sidebar ScrollArea; collapsing the rail
  mid-edit acts as implicit Done; grips are keyboard-operable

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@pullfrog

pullfrog Bot commented Jul 10, 2026

Copy link
Copy Markdown
Contributor

Your Pullfrog Router balance is exhausted.

You have a card on file but auto-reload is disabled, so runs paused once your balance went past the overdraft buffer.

Top up balance → · Enable auto-reload →

Pullfrog  | ⚠️ this action is pinned to a commit SHA, which freezes the cleanup step — switch to @v0 or keep the SHA fresh with Dependabot | Rerun failed job ➔View workflow run | via Pullfrog | Using Claude Opus𝕏

@devin-ai-integration devin-ai-integration Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 1 additional finding.

Open in Devin Review

…ebar

# Conflicts:
#	apps/web/src/components/dashboard/nav-items.ts
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