chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: simplify sidebar for copilot-first navigation

Browse Source 
- Add "New Session" button at top of rail and pinned mode
- Replace Work → History, Know → Flows, add Scripts as own icon
- Remove Help/Guides/Feedback from sidebar rail
- Remove Maintenance from flow sub-items
- Remove Step Library from pinned Knowledge section
- Remove FlowPilot Analytics and Rocket icon
- Rename "Active Sessions" → "Session History"
- Rename "Flows" → "Guided Flows" in pinned mode

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-03-23 03:58:14 +00:00
parent 36be22e407
commit ee606643d5
1 changed files with 46 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
frontend/src/components/layout/Sidebar.tsx
View File

@@ -2,10 +2,10 @@ import { useCallback, useEffect, useRef, useState, type PointerEvent as ReactPoi
import { Link, useLocation } from 'react-router-dom'
import type { LucideIcon } from 'lucide-react'
import {
LayoutGrid, Clock, AlertTriangle, GitBranch, Layers, Code2, Wand2,
ListChecks, Download, BarChart3, Rocket,
LayoutGrid, Clock, AlertTriangle, GitBranch, Code2, Wand2,
ListChecks, Download, BarChart3,
Settings, Pin, PinOff,
Zap, Database, HelpCircle,
Plus, History, FileText,
} from 'lucide-react'
import { cn } from '@/lib/utils'
import { useUserPreferencesStore } from '@/store/userPreferencesStore'
@@ -71,44 +71,40 @@ export function Sidebar() {
matchPaths: ['/'],
},
{
href: '/sessions', icon: Zap, label: 'Work', shortLabel: 'Work',
badge: (stats?.active_count || 0) + (stats?.escalation_count || 0) || undefined,
href: '/sessions', icon: History, label: 'History', shortLabel: 'History',
badge: stats?.active_count || undefined,
matchPaths: ['/sessions', '/escalations', '/pilot'],
children: [
{ href: '/sessions', label: 'Active Sessions', count: stats?.active_count || undefined },
{ href: '/sessions', label: 'Session History', count: stats?.active_count || undefined },
{ href: '/escalations', label: 'Escalations', count: stats?.escalation_count || undefined },
],
},
{
href: '/trees', icon: Database, label: 'Knowledge', shortLabel: 'Know',
href: '/trees', icon: GitBranch, label: 'Flows', shortLabel: 'Flows',
badge: stats?.tree_counts.total || undefined,
matchPaths: ['/trees', '/flows', '/my-trees', '/step-library', '/scripts', '/script-builder', '/review-queue'],
matchPaths: ['/trees', '/flows', '/my-trees', '/step-library', '/review-queue'],
children: [
{ href: '/trees', label: 'All Flows', count: stats?.tree_counts.total || undefined },
{ href: '/trees', label: 'Guided Flows', count: stats?.tree_counts.total || undefined },
{ href: '/trees?type=troubleshooting', label: 'Troubleshooting', count: stats?.tree_counts.troubleshooting || undefined },
{ href: '/trees?type=procedural', label: 'Projects', count: stats?.tree_counts.procedural || undefined },
{ href: '/trees?type=maintenance', label: 'Maintenance', count: stats?.tree_counts.maintenance || undefined },
{ href: '/step-library', label: 'Step Library' },
{ href: '/scripts', label: 'Scripts' },
{ href: '/script-builder', label: 'Script Builder' },
{ href: '/review-queue', label: 'Review Queue' },
],
},
{
href: '/scripts', icon: FileText, label: 'Scripts', shortLabel: 'Scripts',
matchPaths: ['/scripts', '/script-builder'],
children: [
{ href: '/scripts', label: 'Script Library' },
{ href: '/script-builder', label: 'Script Builder' },
],
},
{
href: '/analytics', icon: BarChart3, label: 'Insights', shortLabel: 'Data',
matchPaths: ['/analytics', '/shares'],
children: [
{ href: '/shares', label: 'Exports' },
{ href: '/analytics', label: 'Analytics' },
{ href: '/analytics/flowpilot', label: 'FlowPilot Analytics' },
],
},
{
href: '/guides', icon: HelpCircle, label: 'Help', shortLabel: 'Help',
matchPaths: ['/guides', '/feedback'],
children: [
{ href: '/guides', label: 'User Guides' },
{ href: '/feedback', label: 'Feedback' },
{ href: '/shares', label: 'Exports' },
],
},
]
@@ -119,7 +115,7 @@ export function Sidebar() {
title: 'RESOLVE',
items: [
{ href: '/', icon: LayoutGrid, label: 'Dashboard', shortLabel: 'Dash' },
{ href: '/sessions', icon: Clock, label: 'Active Sessions', shortLabel: 'Sessions', badge: stats?.active_count || undefined, matchPaths: ['/sessions'] },
{ href: '/sessions', icon: Clock, label: 'Session History', shortLabel: 'History', badge: stats?.active_count || undefined, matchPaths: ['/sessions'] },
{ href: '/escalations', icon: AlertTriangle, label: 'Escalations', shortLabel: 'Escal', badge: stats?.escalation_count || undefined },
],
},
@@ -127,17 +123,15 @@ export function Sidebar() {
title: 'KNOWLEDGE',
items: [
{
href: '/trees', icon: GitBranch, label: 'Flows', shortLabel: 'Flows',
href: '/trees', icon: GitBranch, label: 'Guided Flows', shortLabel: 'Flows',
badge: stats?.tree_counts.total || undefined,
matchPaths: ['/trees', '/flows', '/my-trees'],
children: [
{ href: '/trees', label: 'All Flows' },
{ href: '/trees?type=troubleshooting', label: 'Troubleshooting', count: stats?.tree_counts.troubleshooting || undefined },
{ href: '/trees?type=procedural', label: 'Projects', count: stats?.tree_counts.procedural || undefined },
{ href: '/trees?type=maintenance', label: 'Maintenance', count: stats?.tree_counts.maintenance || undefined },
],
},
{ href: '/step-library', icon: Layers, label: 'Step Library', shortLabel: 'Steps' },
{ href: '/scripts', icon: Code2, label: 'Scripts', shortLabel: 'Scripts' },
{ href: '/script-builder', icon: Wand2, label: 'Script Builder', shortLabel: 'Builder' },
{ href: '/review-queue', icon: ListChecks, label: 'Review Queue', shortLabel: 'Review' },
@@ -146,9 +140,8 @@ export function Sidebar() {
{
title: 'INSIGHTS',
items: [
{ href: '/shares', icon: Download, label: 'Exports', shortLabel: 'Export' },
{ href: '/analytics', icon: BarChart3, label: 'Analytics', shortLabel: 'Stats' },
{ href: '/analytics/flowpilot', icon: Rocket, label: 'FlowPilot Analytics', shortLabel: 'FPilot' },
{ href: '/shares', icon: Download, label: 'Exports', shortLabel: 'Export' },
],
},
]
@@ -370,6 +363,17 @@ export function Sidebar() {
style={{ background: 'var(--color-bg-sidebar)', borderRight: '1px solid var(--color-border-default)' }}
onWheel={handleWheel}
>
{/* New Session button */}
<div className="px-3 pt-3 pb-1">
<Link
to="/"
className="flex items-center justify-center gap-2 w-full rounded-lg bg-primary/15 py-2.5 text-sm font-semibold text-primary hover:bg-primary/25 transition-colors"
>
<Plus size={16} strokeWidth={2} />
New Session
</Link>
</div>
{/* Pinned sidebar content */}
<div className="px-3 py-2 space-y-0.5">
{sections.map((section, si) => (
@@ -416,8 +420,20 @@ export function Sidebar() {
style={{ background: 'var(--color-bg-sidebar)', borderRight: '1px solid var(--color-border-default)', width: '72px' }}
onWheel={handleWheel}
>
{/* Grouped nav items */}
<div className="flex flex-col items-center w-full px-1 pt-4 space-y-1.5">
{/* New Session button */}
<div className="w-full px-2 pt-4 pb-2">
<Link
to="/"
className="flex flex-col items-center justify-center w-full rounded-lg bg-primary/15 py-2.5 text-primary hover:bg-primary/25 transition-colors"
title="New Session"
>
<Plus size={20} strokeWidth={2} />
<span className="mt-1 text-[0.5625rem] font-sans font-semibold">New</span>
</Link>
</div>
{/* Nav items */}
<div className="flex flex-col items-center w-full px-1 space-y-1.5">
{railGroups.map((item, i) => renderRailItem(item, `rail-${i}`))}
</div>