65 lines
2.2 KiB
TypeScript
65 lines
2.2 KiB
TypeScript
import { Link } from 'react-router';
|
|
import { ArrowLeft, Archive, Trash2, Maximize2, Minimize2 } from 'lucide-react';
|
|
|
|
type SessionBarProps = {
|
|
listPath: string;
|
|
provider: 'claude' | 'opencode';
|
|
sessionTitle: string | undefined;
|
|
isConnected: boolean;
|
|
isGenerating: boolean;
|
|
fullscreen: boolean;
|
|
onArchive: (() => void) | undefined;
|
|
onDelete: () => void;
|
|
onToggleFullscreen: () => void;
|
|
};
|
|
|
|
export const SessionBar = ({
|
|
listPath,
|
|
provider,
|
|
sessionTitle,
|
|
isConnected,
|
|
isGenerating,
|
|
fullscreen,
|
|
onArchive,
|
|
onDelete,
|
|
onToggleFullscreen,
|
|
}: SessionBarProps) => (
|
|
<div className="shrink-0 flex items-center px-4 py-2 border-b border-duck-dark/10 bg-white/60">
|
|
<div className="flex items-center gap-1">
|
|
<Link to={listPath} className="p-1 text-duck-dark/40 hover:text-duck-dark transition-colors">
|
|
<ArrowLeft className="h-4 w-4" />
|
|
</Link>
|
|
{provider === 'claude' && onArchive && (
|
|
<button
|
|
onClick={onArchive}
|
|
className="p-1 text-duck-dark/40 hover:text-duck-teal transition-colors cursor-pointer"
|
|
>
|
|
<Archive className="h-4 w-4" />
|
|
</button>
|
|
)}
|
|
<button onClick={onDelete} className="p-1 text-duck-dark/40 hover:text-red-500 transition-colors cursor-pointer">
|
|
<Trash2 className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
<div className="flex-1 min-w-0 text-center text-sm font-medium text-duck-dark/70 truncate px-3">
|
|
{sessionTitle ?? 'New chat'}
|
|
</div>
|
|
<div className="flex items-center gap-2 text-xs text-duck-dark/50">
|
|
{!isConnected ? (
|
|
<span className="inline-block h-2 w-2 rounded-full bg-red-500" />
|
|
) : isGenerating ? (
|
|
<span className="inline-block h-2 w-2 rounded-full bg-duck-orange animate-pulse" />
|
|
) : (
|
|
<span className="inline-block h-2 w-2 rounded-full bg-green-500" />
|
|
)}
|
|
<span>{!isConnected ? 'Disconnected' : isGenerating ? 'Working...' : ''}</span>
|
|
<button
|
|
onClick={onToggleFullscreen}
|
|
className="p-1 text-duck-dark/40 hover:text-duck-dark transition-colors cursor-pointer"
|
|
>
|
|
{fullscreen ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|