feat: app shell — activity bar + primary sidebar panel switching (#14)#30
Merged
Conversation
… search - Add ActivityBar component (48px): Chats, Personas, Marketplace icons + Settings gear - Add activePanel state to uiStore (chats | personas | marketplace) - Clicking active icon toggles sidebar; clicking another icon switches panel - Sidebar content (Chats) extracted from outer <aside> wrapper - App.tsx provides it - Remove sidebarOpen guard and bottom settings button from Sidebar - Marketplace panel rebuilt as unified search: @mcp / @Provider prefix support, All|Providers|MCP type pills, combined flat list with kind badge + direct install - PersonasPanel wrapped in scrollable container in sidebar - macOS: pt-8 on sidebar <aside> and activity bar to clear traffic lights - TopBar: remove sidebarOpen-based pl-[80px] macOS hack (activity bar handles it) Closes #14
Drag the right edge of the sidebar to resize. Width persisted to localStorage (key: oc-sidebar-width). Bounds: 160–520px, default 240px. Blue accent line appears on hover over the resize handle.
- PersonasPanel: replace text-white with text-slate-100 throughout so slate CSS inversion handles light/dark automatically; keep text-white only on blue buttons and colored avatar circles - MarketplaceSidebarPanel: badge colors use dark: variants for light mode (indigo/teal/amber/green); EntryIcon adds border in light mode to prevent white-on-white - uiStore: persist activePanel to localStorage (oc-active-panel) so selected sidebar panel survives app restarts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #14
What's in this PR
New
ActivityBar— 48px icon strip (Chats / Personas / Marketplace). Active icon toggles sidebar; different icon switches panel + opens sidebar.MarketplaceSidebarPanel— Unified marketplace search with@mcp/@providerprefix detection, type pills (All / Providers / MCP), and direct install.Changed
App.tsx— New root layout with resizable sidebar (oc-sidebar-widthin localStorage, 160–520px drag handle). Panel switching renders the correct sidebar content.Sidebar— Removed<aside>wrapper + bottom Settings button (App.tsx owns the wrapper now).TopBar— Removedpl-[80px]macOS hack (ActivityBar handles traffic light clearance).uiStore—activePaneladded and persisted tolocalStorage(oc-active-panel).Bug fixes
PersonasPanel—text-white→text-slate-100throughout so light mode works via the slate CSS inversion.MarketplaceSidebarPanel— Badge colors usedark:variants; EntryIcon gets a border in light mode to prevent white-on-white.Acceptance criteria
Unlocks
#15 · #17 · #18 · #28 · #29