docs: add sidebar redesign context and decision summary

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-15 11:31:41 -04:00
parent 90b927fc22
commit cc2f59aa85

View File

@@ -0,0 +1,83 @@
# Sidebar Redesign — Context & Decisions
> Branch: `design/sidebar-icon-concepts`
> Date: 2026-03-15
## What's Already Implemented
### Icon Changes (committed)
Swapped generic icons for more descriptive ones:
- Dashboard: `LayoutGrid` (kept)
- All Flows: `Box``Network`
- Flow Editor: `PenLine``Wrench`
- Sessions: `Clock` (kept)
- Exports: `FileText``FileOutput`
- AI Assistant: `BotMessageSquare` (kept)
- Step Library: `Bookmark``Library`
- Script Library: `Terminal``Code2`
- KB Accelerator: `Sparkles``Lightbulb`
- Analytics: `BarChart3` (kept)
### Semantic Icon Colors (committed)
Each nav icon now has a permanent color (Concept 1 style):
| Item | Color | Hex |
|------|-------|-----|
| Dashboard | Cyan | `#22d3ee` |
| All Flows | Violet | `#a78bfa` |
| Flow Editor | Amber | `#f59e0b` |
| Sessions | Emerald | `#34d399` |
| Exports | Blue | `#60a5fa` |
| AI Assistant | Fuchsia | `#e879f9` |
| Step Library | Orange | `#fb923c` |
| Script Library | Teal | `#2dd4bf` |
| KB Accelerator | Rose | `#fb7185` |
| Analytics | Sky | `#38bdf8` |
| User Guides | Lime | `#a3e635` |
| Feedback | Indigo | `#818cf8` |
| Account/Collapse | No color (stays muted) |
Colors defined in `NAV_COLORS` constant in `Sidebar.tsx`, applied via `iconColor` prop on `NavItem`.
### Session History Tab Reorder (committed)
- Default tab: `Active` (was `All`)
- Tab order: Active → Prepared → Completed → All
## Still Deciding
### Nav Grouping
Mockups in `sidebar-grouping-concepts.html`. Four options explored:
**Concept A1 — Three labeled groups:**
- Resolve: Sessions, All Flows, FlowPilot, Script Library
- Build: Flow Editor, Flow Assist, Step Library, KB Accelerator
- Insights: Dashboard, Exports, Analytics
**Concept A2 — Same groups, divider lines only (no labels)**
**Concept A3 — Dashboard first, then Resolve / Build / Insights**
**Concept B1 — Two groups only (Work / Build) with Dashboard on top**
### AI Assistant Split
Currently one "AI Assistant" nav item does two jobs. Considering splitting into:
**In-session copilot (Resolve group):**
- Recommended name: **FlowPilot** (already used in copilot panel)
- Icon: Brain (fuchsia)
- Purpose: helps during active troubleshooting sessions
**Flow builder (Build group):**
- Recommended name: **Flow Assist** (already used in embedded editor AI)
- Icon: Wand2 (pink)
- Purpose: conversational flow creation/authoring
Other naming options explored: AI Copilot, Resolve AI, AI Builder, Flow Forge
## Files Changed
- `frontend/src/components/layout/Sidebar.tsx` — new icons, colors, NAV_COLORS constant
- `frontend/src/components/layout/NavItem.tsx` — added `iconColor` prop
- `frontend/src/pages/SessionHistoryPage.tsx` — default tab + tab order
## Mockup Files (open in browser)
- `docs/plans/Frontend/sidebar-icon-concepts.html` — icon + color comparison (6 panels)
- `docs/plans/Frontend/sidebar-grouping-concepts.html` — grouping + AI naming options