refactor: move FlowPilot actions to header bar, fix dividers
- Moved Resolve/Escalate/Share Update buttons from fixed bottom bar into the session header. Desktop: inline buttons + overflow menu (Pause/Close). Mobile: single overflow menu with all actions. - Removed FlowPilotActionBar from bottom — message input is now the only fixed element at bottom, giving more breathing room. - Replaced jarring white dividers (var(--glass-border)) with subtle border-border (#2e3240) throughout FlowPilot session. - Restyled status badge from button-looking element to dot + text indicator with semantic colors (green=resolved, amber=escalated). - Reduced content padding from pb-32 to pb-24. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -178,7 +178,7 @@ export function FlowPilotMessageBar({ onRespond, disabled = false, isProcessing
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed bottom-[52px] sm:bottom-[56px] right-0 lg:right-72 z-40 px-3 sm:px-6 lg:px-8 pb-2"
|
||||
className="fixed bottom-0 right-0 lg:right-72 z-40 px-3 sm:px-6 lg:px-8 pb-3"
|
||||
style={{ left: 'var(--sidebar-w, 0px)' }}
|
||||
onDragOver={handleDragOver}
|
||||
onDragEnter={handleDragEnter}
|
||||
|
||||
@@ -14,7 +14,6 @@ import type {
|
||||
} from '@/types/ai-session'
|
||||
import { ConfidenceIndicator } from './ConfidenceIndicator'
|
||||
import { FlowPilotStepCard } from './FlowPilotStepCard'
|
||||
import { FlowPilotActionBar } from './FlowPilotActionBar'
|
||||
import { FlowPilotMessageBar } from './FlowPilotMessageBar'
|
||||
import { SessionDocView } from './SessionDocView'
|
||||
import { StatusUpdateModal } from './StatusUpdateModal'
|
||||
@@ -170,7 +169,7 @@ export function FlowPilotSession({
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
{/* Mobile sidebar summary (collapsible) */}
|
||||
<div className="lg:hidden border-b" style={{ borderColor: 'var(--glass-border)' }}>
|
||||
<div className="lg:hidden border-b border-border">
|
||||
<button
|
||||
onClick={() => setShowMobileSidebar(!showMobileSidebar)}
|
||||
className="flex w-full items-center justify-between px-3 py-2 sm:px-4"
|
||||
@@ -230,8 +229,8 @@ export function FlowPilotSession({
|
||||
|
||||
{/* Main content area: conversation + sidebar */}
|
||||
<div className="flex flex-1 min-h-0">
|
||||
{/* Conversation column — pb-32 provides clearance for the fixed message bar + action bar */}
|
||||
<div ref={scrollRef} className="flex-1 overflow-y-auto p-3 pb-32 sm:p-4 sm:pb-32 lg:p-6 lg:pb-32">
|
||||
{/* Conversation column — pb-24 provides clearance for the fixed message bar */}
|
||||
<div ref={scrollRef} className="flex-1 overflow-y-auto p-3 pb-24 sm:p-4 sm:pb-24 lg:p-6 lg:pb-24">
|
||||
<div className="mx-auto max-w-2xl space-y-3">
|
||||
{allSteps.map((step) => (
|
||||
<FlowPilotStepCard
|
||||
@@ -248,8 +247,7 @@ export function FlowPilotSession({
|
||||
|
||||
{/* Sidebar — desktop only */}
|
||||
<div
|
||||
className="hidden w-72 shrink-0 overflow-y-auto border-l p-4 lg:block"
|
||||
style={{ borderColor: 'var(--glass-border)' }}
|
||||
className="hidden w-72 shrink-0 overflow-y-auto border-l border-border p-4 lg:block"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
{/* Ticket context */}
|
||||
@@ -337,7 +335,7 @@ export function FlowPilotSession({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Message bar */}
|
||||
{/* Message bar — now the only fixed bottom element */}
|
||||
{session.status === 'active' && (
|
||||
<FlowPilotMessageBar
|
||||
onRespond={onRespond}
|
||||
@@ -346,23 +344,6 @@ export function FlowPilotSession({
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Action bar */}
|
||||
{session.status === 'active' && (
|
||||
<FlowPilotActionBar
|
||||
canResolve={canResolve}
|
||||
canEscalate={canEscalate}
|
||||
isProcessing={isProcessing}
|
||||
hasPsaTicket={!!session.psa_ticket_id}
|
||||
sessionId={session.id}
|
||||
canShareUpdate={allSteps.length >= 2}
|
||||
onResolve={onResolve}
|
||||
onEscalate={onEscalate}
|
||||
onPause={onPause}
|
||||
onAbandon={onAbandon}
|
||||
onGenerateStatusUpdate={onGenerateStatusUpdate}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Paused banner */}
|
||||
{session.status === 'paused' && onResume && (
|
||||
<div
|
||||
|
||||
Reference in New Issue
Block a user