resolutionflow/docs/plans/Frontend/sidebar-redesign-context.md

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