84 lines
2.9 KiB
Markdown
84 lines
2.9 KiB
Markdown
# 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
|