| |
| |
| |
| |
|
|
| import React, { useState } from 'react' |
| import { Menu, Circle, Settings } from 'lucide-react' |
| import useAppStore from '../../stores/appStore' |
| import clsx from 'clsx' |
| import SettingsModal from './SettingsModal' |
| import { useKeyboardShortcut } from '../../hooks/index' |
|
|
| export default function StatusBar() { |
| const { toggleSidebar, modelStatus, activeSessionId, sessions } = useAppStore() |
| const [settingsOpen, setSettingsOpen] = useState(false) |
| const activeSession = sessions.find((s) => s.id === activeSessionId) |
| const isOnline = modelStatus?.status === 'online' |
|
|
| |
| useKeyboardShortcut(',', () => setSettingsOpen(true), { ctrl: true }) |
|
|
| return ( |
| <> |
| <header className="h-12 flex items-center px-4 gap-3 |
| border-b border-jarvis-border bg-jarvis-surface/80 backdrop-blur-sm |
| flex-shrink-0 z-10"> |
| {/* Sidebar toggle */} |
| <button |
| onClick={toggleSidebar} |
| className="p-1.5 rounded-lg text-jarvis-dim hover:text-jarvis-text |
| hover:bg-jarvis-panel transition-colors" |
| > |
| <Menu size={16} /> |
| </button> |
| |
| {/* Session title */} |
| <div className="flex-1 min-w-0"> |
| <p className="text-sm font-medium text-jarvis-text truncate"> |
| {activeSession?.title || 'JARVIS'} |
| </p> |
| </div> |
| |
| {/* Status indicator */} |
| <div className="flex items-center gap-1.5"> |
| <Circle |
| size={7} |
| className={clsx( |
| 'fill-current', |
| isOnline ? 'text-jarvis-success' : 'text-jarvis-dim', |
| )} |
| /> |
| <span className="text-[11px] font-mono text-jarvis-muted"> |
| {isOnline ? 'ONLINE' : 'CONNECTING'} |
| </span> |
| </div> |
| |
| {/* Settings */} |
| <button |
| onClick={() => setSettingsOpen(true)} |
| title="System status (Ctrl+,)" |
| className="p-1.5 rounded-lg text-jarvis-dim hover:text-jarvis-text |
| hover:bg-jarvis-panel transition-colors" |
| > |
| <Settings size={15} /> |
| </button> |
| </header> |
| |
| <SettingsModal open={settingsOpen} onClose={() => setSettingsOpen(false)} /> |
| </> |
| ) |
| } |
|
|
