From 967b094a9e34d1a247471345a39143f41a2dcb9d Mon Sep 17 00:00:00 2001 From: Michael Chihlas Date: Sun, 15 Mar 2026 10:42:04 -0400 Subject: [PATCH] feat(ui): add semantic icon colors and updated icons to sidebar nav Swap generic icons for more descriptive alternatives (Network, Wrench, FileOutput, Library, Code2, Lightbulb) and assign each nav item a unique semantic color for instant visual landmarks. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../plans/Frontend/sidebar-icon-concepts.html | 1011 ++++++++--------- frontend/src/components/layout/NavItem.tsx | 7 +- frontend/src/components/layout/Sidebar.tsx | 67 +- 3 files changed, 517 insertions(+), 568 deletions(-) diff --git a/docs/plans/Frontend/sidebar-icon-concepts.html b/docs/plans/Frontend/sidebar-icon-concepts.html index d087c2ad..46559529 100644 --- a/docs/plans/Frontend/sidebar-icon-concepts.html +++ b/docs/plans/Frontend/sidebar-icon-concepts.html @@ -3,16 +3,14 @@ -ResolutionFlow — Sidebar Icon Concepts +ResolutionFlow — Sidebar Icon Concepts (Refined) -

Sidebar Icon Concepts

+

Sidebar Icons — Style × Shape Matrix

- 5 distinct approaches to make the ResolutionFlow sidebar navigation feel alive with color. - Each concept adds visual personality while maintaining the Slate & Ice design system. - Hover and active states are interactive — try them out. + Concept 1 (Semantic Colors) and Concept 2 (Tinted Pills) shown with 3 different icon sets each. + Current = existing Lucide icons, Set A = more descriptive/metaphorical icons, + Set B = minimal/geometric alternatives. Click any nav item to toggle active state.

-
+ +
+

Concept 1 — Semantic Colored Icons

+

Always-on color per icon. No pill background — just the stroke color creates landmarks.

+
- -
-
-
Concept 01
-
Semantic Color Icons
-
Every icon gets a permanent, meaningful color. Dashboard = cyan, Sessions = emerald, AI = fuchsia. Always-on color creates instant visual landmarks.
+
+ + +
+
+
Concept 1 × Current Icons
+
Original Lucide Set
+
LayoutGrid, Box, PenLine, Clock, FileText, BotMessageSquare, Bookmark, Terminal, Sparkles, BarChart3
+
Navigation
+ +
+
+ Dashboard +
+ +
+
+ All Flows + 12 +
+ +
+
+ Flow Editor +
+ +
+
+ Sessions + 3 +
+ +
+
+ Exports +
+ +
+
+ AI Assistant +
+ +
+
+ Step Library +
+ +
+
+ Script Library +
+ +
+
+ KB Accelerator +
+ +
+
+ Analytics +
+
+
+ + +
+
+
Concept 1 × Icon Set A
+
Descriptive / Metaphorical
+
Gauge, GitFork, Wrench, Zap, Share2, Brain, Layers, Code2, Rocket, TrendingUp
+
+
+
Navigation
+ +
+
+ Dashboard +
+ +
+
+ All Flows + 12 +
+ +
+
+ Flow Editor +
+ +
+
+ Sessions + 3 +
+ +
+
+ Exports +
+ +
+
+ AI Assistant +
+ +
+
+ Step Library +
+ +
+
+ Script Library +
+ +
+
+ KB Accelerator +
+ +
+
+ Analytics +
+
+
+ + +
+
+
Concept 1 × Icon Set B
+
Minimal / Geometric
+
Compass, Network, PenTool, Radio, FileOutput, Wand2, Library, ScrollText, Lightbulb, PieChart
+
+
+
Navigation
+ +
+
+ Dashboard +
+ +
+
+ All Flows + 12 +
+ +
+
+ Flow Editor +
+ +
+
+ Sessions + 3 +
+ +
+
+ Exports +
+ +
+
+ AI Assistant +
+ +
+
+ Step Library +
+ +
+
+ Script Library +
+ +
+
+ KB Accelerator +
+ +
+
+ Analytics +
+
+
+ +
+ + +
+

Concept 2 — Tinted Pill Backgrounds

+

Colored icon inside a soft tinted rounded-square. Creates visual weight — feels like an app dock.

+
+ +
+ + +
+
+
Concept 2 × Current Icons
+
Original Lucide Set
+
LayoutGrid, Box, PenLine, Clock, FileText, BotMessageSquare, Bookmark, Terminal, Sparkles, BarChart3
+
+
Navigation
@@ -549,227 +524,109 @@
- -
-
-
Concept 02
-
Tinted Pill Backgrounds
-
Each icon sits inside a rounded-square with a soft tinted background matching its color. Creates visual weight and makes icons feel like objects, not just strokes.
+ +
+
+
Concept 2 × Icon Set A
+
Descriptive / Metaphorical
+
Gauge, GitFork, Wrench, Zap, Share2, Brain, Layers, Code2, Rocket, TrendingUp
Navigation
-
+
Dashboard
-
+
All Flows 12
-
+
Flow Editor
-
-
+
+
Sessions 3
-
+
Exports
-
+
AI Assistant
-
+
Step Library
-
+
Script Library
-
+
KB Accelerator
-
+
Analytics
- -
-
-
Concept 03
-
Reveal on Active
-
Icons stay monochrome (subtle, professional) until active — then they bloom into their signature color with a matching tinted row background and accent bar. Quiet→loud transition.
+ +
+
+
Concept 2 × Icon Set B
+
Minimal / Geometric
+
Compass, Network, PenTool, Radio, FileOutput, Wand2, Library, ScrollText, Lightbulb, PieChart
-
+
Navigation
-
+
Dashboard
-
+
All Flows 12
-
+
Flow Editor
-
-
+
+
Sessions 3
-
+
Exports
-
+
AI Assistant
-
+
Step Library
-
+
Script Library
-
+
KB Accelerator
-
- Analytics -
-
-
- - -
-
-
Concept 04
-
Color Dot Markers
-
Clean monochrome icons paired with a small colored dot to the left. Minimal but adds color variety without overwhelming the sidebar. Active dots pulse gently.
-
-
-
Navigation
-
-
-
- Dashboard -
-
-
-
- All Flows - 12 -
-
-
-
- Flow Editor -
-
-
-
- Sessions - 3 -
-
-
-
- Exports -
-
-
-
- AI Assistant -
-
-
-
- Step Library -
-
-
-
- Script Library -
-
-
-
- KB Accelerator -
-
-
-
- Analytics -
-
-
- - -
-
-
Concept 05
-
Vivid + Micro-bounce
-
Always-colored icons at reduced opacity. On hover they bounce up slightly and go full vivid. Active items get a glowing underline beneath the icon. Playful but controlled energy.
-
-
-
Navigation
-
-
- Dashboard -
-
-
- All Flows - 12 -
-
-
- Flow Editor -
-
-
- Sessions - 3 -
-
-
- Exports -
-
-
- AI Assistant -
-
-
- Step Library -
-
-
- Script Library -
-
-
- KB Accelerator -
-
-
+
Analytics
@@ -777,25 +634,99 @@
-
-

Implementation Notes

-
    -
  • Concept 1 (Semantic Colors) — Simplest to implement. Just add a color class per NavItem. Lowest risk, highest impact. The always-on color creates wayfinding landmarks engineers use subconsciously.
    • -
  • Concept 2 (Tinted Pills) — More visual weight. The pill backgrounds make icons feel substantial, like app icons. Creates a premium "dock" feeling. Slightly more complex (28px wrapper with bg).
    • -
  • Concept 3 (Reveal on Active) — Most restrained. Keeps the sidebar quiet until you interact. The color "reward" on active creates a satisfying click moment. The tinted row bg per-color is the key differentiator from current.
    • -
  • Concept 4 (Dot Markers) — Minimal color addition. The dots add variety without changing icon rendering. The pulsing active dot adds a subtle "alive" feeling. Easiest to A/B test since it's purely additive.
    • -
  • Concept 5 (Vivid + Micro-bounce) — Most playful. The bounce micro-interaction adds personality. The glowing underline on active is a unique touch. Best for making the app feel "alive" and responsive to the engineer.
    • -
+ +
+

Icon Comparison Reference

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nav ItemCurrentSet A (Descriptive)Set B (Minimal)Color
DashboardLayoutGrid — 4 squaresGauge — speedometer, "command center"Compass — navigation hubCyan
All FlowsBox — generic 3D cubeGitFork — branching paths (literally what flows are)Network — connected nodesViolet
Flow EditorPenLine — pen tipWrench — builder toolPenTool — vector/design penAmber
SessionsClock — time-basedZap — active energy, live sessionsRadio — broadcasting/live signalEmerald
ExportsFileText — generic docShare2 — share network nodesFileOutput — file with arrow outBlue
AI AssistantBotMessageSquare — robot chatBrain — intelligence, organic feelWand2 — magic wand with sparklesFuchsia
Step LibraryBookmark — generic ribbonLayers — stacked layers = reusable stepsLibrary — book spinesOrange
Script LibraryTerminal — prompt cursorCode2 — angle brackets with slashScrollText — script/scroll with textTeal
KB AcceleratorSparkles — magic starRocket — acceleration/speedLightbulb — ideas/insightRose
AnalyticsBarChart3 — vertical barsTrendingUp — growth line with arrowPieChart — pie segmentsSky
diff --git a/frontend/src/components/layout/NavItem.tsx b/frontend/src/components/layout/NavItem.tsx index 10006b0c..cf05ee74 100644 --- a/frontend/src/components/layout/NavItem.tsx +++ b/frontend/src/components/layout/NavItem.tsx @@ -15,12 +15,13 @@ interface NavItemProps { icon: LucideIcon label: string badge?: number | 'dot' + iconColor?: string matchPaths?: string[] collapsed?: boolean children?: NavSubItem[] } -export function NavItem({ href, icon: Icon, label, badge, matchPaths, collapsed, children }: NavItemProps) { +export function NavItem({ href, icon: Icon, label, badge, iconColor, matchPaths, collapsed, children }: NavItemProps) { const location = useLocation() const fullPath = location.pathname + location.search const isActive = matchPaths @@ -49,7 +50,7 @@ export function NavItem({ href, icon: Icon, label, badge, matchPaths, collapsed, {isActive && (
)} - + {badge !== undefined && badge !== 0 && badge !== 'dot' && ( {badge} @@ -78,7 +79,7 @@ export function NavItem({ href, icon: Icon, label, badge, matchPaths, collapsed,
)} - + {label} {/* Badge */} diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx index bec2cce2..03ecb6da 100644 --- a/frontend/src/components/layout/Sidebar.tsx +++ b/frontend/src/components/layout/Sidebar.tsx @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react' -import { LayoutGrid, Box, PenLine, Clock, FileText, Bookmark, BarChart3, Settings, PanelLeftClose, PanelLeftOpen, MessageSquareText, BotMessageSquare, BookOpen, Sparkles, Terminal } from 'lucide-react' +import { LayoutGrid, Network, Wrench, Clock, FileOutput, BarChart3, Settings, PanelLeftClose, PanelLeftOpen, MessageSquareText, BotMessageSquare, BookOpen, Lightbulb, Code2, Library } from 'lucide-react' import { cn } from '@/lib/utils' import { useUserPreferencesStore } from '@/store/userPreferencesStore' import { usePinnedFlowsStore } from '@/store/pinnedFlowsStore' @@ -7,6 +7,22 @@ import { PinnedFlowsSection } from '@/components/sidebar/PinnedFlowsSection' import { NavItem } from './NavItem' import { sessionsApi, treesApi } from '@/api' +// Semantic icon colors — each nav item gets a unique color for visual landmarks +const NAV_COLORS = { + dashboard: '#22d3ee', // cyan-400 + flows: '#a78bfa', // violet-400 + editor: '#f59e0b', // amber-500 + sessions: '#34d399', // emerald-400 + exports: '#60a5fa', // blue-400 + ai: '#e879f9', // fuchsia-400 + stepLib: '#fb923c', // orange-400 + scripts: '#2dd4bf', // teal-400 + kb: '#fb7185', // rose-400 + analytics: '#38bdf8', // sky-400 + guides: '#a3e635', // lime-400 + feedback: '#818cf8', // indigo-400 +} as const + export function Sidebar() { const sidebarCollapsed = useUserPreferencesStore(s => s.sidebarCollapsed) const toggleSidebar = useUserPreferencesStore(s => s.toggleSidebar) @@ -76,18 +92,18 @@ export function Sidebar() { <> {/* Collapsed: icon-only nav */}
- - - - - - - - - - - - + + + + + + + + + + + +
) : ( @@ -99,12 +115,13 @@ export function Sidebar() { {/* Primary Navigation */}
- + - - - - - - - - + + + + + + + +
)} @@ -137,8 +154,8 @@ export function Sidebar() { > {!sidebarCollapsed && ( <> - - + + )}