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:
83
docs/plans/Frontend/sidebar-redesign-context.md
Normal file
83
docs/plans/Frontend/sidebar-redesign-context.md
Normal 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
|
||||
Reference in New Issue
Block a user