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

fix: move ViewToggle into header bars and remove subtitle

Browse Source 
Eliminates the dedicated ViewToggle row on CockpitPage by merging
it into IncidentHeader's action group via extraActions prop. Removes
subtitle from ViewToggle component entirely — the icon + label is
self-explanatory. Cleans up showSubtitle prop from all call sites.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-04-04 01:48:09 +00:00
parent 47e71c4753
commit aca976a49a
5 changed files with 32 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
frontend/src/components/assistant/ViewToggle.tsx
View File

@@ -6,9 +6,9 @@ import { useUserPreferencesStore } from '@/store/userPreferencesStore'
type FlowPilotView = 'flowpilot' | 'cockpit'
const VIEW_OPTIONS: { key: FlowPilotView; label: string; icon: typeof MessageSquare; subtitle: string }[] = [
{ key: 'flowpilot', label: 'FlowPilot', icon: MessageSquare, subtitle: 'Chat-first AI troubleshooting' },
{ key: 'cockpit', label: 'Cockpit', icon: LayoutDashboard, subtitle: 'Steps, evidence & triage board' },
const VIEW_OPTIONS: { key: FlowPilotView; label: string; icon: typeof MessageSquare }[] = [
{ key: 'flowpilot', label: 'FlowPilot', icon: MessageSquare },
{ key: 'cockpit', label: 'Cockpit', icon: LayoutDashboard },
]
interface ViewToggleProps {
@@ -16,19 +16,15 @@ interface ViewToggleProps {
currentView: FlowPilotView
/** Session ID for navigation (session pages only). Omit for preference-only mode (dashboard). */
sessionId?: string
/** Show the subtitle below the toggle. Default true for standalone, false for inline. */
showSubtitle?: boolean
}
export function ViewToggle({ currentView, sessionId, showSubtitle = true }: ViewToggleProps) {
export function ViewToggle({ currentView, sessionId }: ViewToggleProps) {
const navigate = useNavigate()
const hasCockpit = useFeatureFlag('flowpilot_cockpit')
const setPreferredView = useUserPreferencesStore(s => s.setPreferredFlowPilotView)
if (!hasCockpit) return null
const activeOption = VIEW_OPTIONS.find(o => o.key === currentView) ?? VIEW_OPTIONS[0]
const handleSwitch = (view: FlowPilotView) => {
if (view === currentView) return
setPreferredView(view)
@@ -41,29 +37,22 @@ export function ViewToggle({ currentView, sessionId, showSubtitle = true }: View
}
return (
<div className="flex flex-col items-start gap-1">
<div className="flex items-center rounded-lg border border-border bg-card p-0.5 text-xs">
{VIEW_OPTIONS.map(({ key, label, icon: Icon }) => (
<button
key={key}
onClick={() => handleSwitch(key)}
className={cn(
'flex items-center gap-1.5 rounded-md px-2.5 py-1 font-medium transition-colors',
currentView === key
? 'bg-elevated text-foreground'
: 'text-muted-foreground hover:text-foreground'
)}
>
<Icon size={12} />
{label}
</button>
))}
</div>
{showSubtitle && (
<span className="text-[10px] text-muted-foreground leading-none pl-0.5">
{activeOption.subtitle}
</span>
)}
<div className="flex items-center rounded-lg border border-border bg-card p-0.5 text-xs">
{VIEW_OPTIONS.map(({ key, label, icon: Icon }) => (
<button
key={key}
onClick={() => handleSwitch(key)}
className={cn(
'flex items-center gap-1.5 rounded-md px-2.5 py-1 font-medium transition-colors',
currentView === key
? 'bg-elevated text-foreground'
: 'text-muted-foreground hover:text-foreground'
)}
>
<Icon size={12} />
{label}
</button>
))}
</div>
)
}