fix: deduplicate actions, promote ViewToggle tab bar, standardize naming

Remove duplicate Update/Close actions from chat toolbars (FlowPilotPage,
CockpitPage) — session lifecycle actions now live only in headers. Redesign
ViewToggle as a persistent tab bar with bottom-border active indicator and
ARIA attributes. Standardize all action naming: Resolve (emerald), Update
(blue), Close (rose), Pause (muted). Fix IncidentHeader Resolve from orange
to emerald. Delete unused FlowPilotActionBar component (227 lines). Update
ConcludeSessionModal copy to use forward-facing action verbs.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-04-04 04:40:06 +00:00
parent aca976a49a
commit 165e402284
9 changed files with 109 additions and 328 deletions

View File

@@ -1,5 +1,5 @@
import { useState, useRef, useEffect } from 'react'
import { Pencil, X, Check, ExternalLink, Pause, XCircle, Link2, MoreHorizontal, FileText } from 'lucide-react'
import { Pencil, X, Check, CheckCircle2, ExternalLink, Pause, XCircle, Link2, MoreHorizontal, FileText } from 'lucide-react'
import { cn } from '@/lib/utils'
import { toast } from '@/lib/toast'
import type { TriageMeta } from '@/types/ai-session'
@@ -12,8 +12,6 @@ interface IncidentHeaderProps {
onStatusUpdate?: () => void
onPause?: () => void
onClose?: () => void
/** Extra elements rendered in the action group (e.g. ViewToggle) */
extraActions?: React.ReactNode
}
interface EditPopoverProps {
@@ -129,14 +127,14 @@ function OverflowMenu({ onPause, onClose }: { onPause?: () => void; onClose?: ()
{open && (
<>
<div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
<div className="absolute right-0 top-full mt-1 z-50 w-44 rounded-lg border border-border bg-card py-1 shadow-xl">
<div className="absolute right-0 top-full mt-1 z-50 w-40 rounded-lg border border-border bg-card py-1 shadow-xl">
{onPause && (
<button
onClick={() => { onPause(); setOpen(false) }}
className="w-full flex items-center gap-2 px-3 py-2 text-xs text-muted-foreground hover:text-foreground hover:bg-[rgba(255,255,255,0.06)] transition-colors text-left"
>
<Pause size={13} />
Pause Case
Pause
</button>
)}
<button
@@ -152,7 +150,7 @@ function OverflowMenu({ onPause, onClose }: { onPause?: () => void; onClose?: ()
className="w-full flex items-center gap-2 px-3 py-2 text-xs text-muted-foreground hover:text-rose-400 hover:bg-rose-500/10 transition-colors text-left"
>
<XCircle size={13} />
Close Case
Close
</button>
)}
</div>
@@ -170,7 +168,6 @@ export function IncidentHeader({
onStatusUpdate,
onPause,
onClose,
extraActions,
}: IncidentHeaderProps) {
return (
<div className="bg-card border-b border-default px-4 py-2 flex items-center gap-4 flex-wrap">
@@ -212,21 +209,21 @@ export function IncidentHeader({
)}
<button
onClick={onResolve}
className="bg-accent/15 border border-accent rounded px-3 py-1 text-xs font-medium text-accent hover:bg-accent/25 transition-colors"
className="flex items-center gap-1.5 bg-emerald-500/10 border border-emerald-500/20 rounded-lg px-3 py-1.5 text-xs font-medium text-emerald-400 hover:bg-emerald-500/20 transition-colors"
>
<CheckCircle2 size={13} />
Resolve
</button>
{onStatusUpdate && (
<button
onClick={onStatusUpdate}
className="flex items-center gap-1.5 bg-blue-500/10 border border-blue-500/20 rounded px-3 py-1 text-xs font-medium text-blue-400 hover:bg-blue-500/20 transition-colors"
className="flex items-center gap-1.5 bg-blue-500/10 border border-blue-500/20 rounded-lg px-3 py-1.5 text-xs font-medium text-blue-400 hover:bg-blue-500/20 transition-colors"
>
<FileText size={13} />
Update
</button>
)}
<OverflowMenu onPause={onPause} onClose={onClose} />
{extraActions}
</div>
</div>
)