import { Component, For, Show, createEffect, createSignal, onCleanup } from 'solid-js'; interface SidebarProps { activeTab: string; onTabChange: (tab: string) => void; // Recording controls isRecording: boolean; onToggleRecording: () => void; // Model state isModelReady: boolean; onLoadModel: () => void; modelState: string; // Device selection availableDevices: MediaDeviceInfo[]; selectedDeviceId: string; onDeviceSelect: (id: string) => void; // Audio feedback audioLevel: number; } export const Sidebar: Component = (props) => { const [showDevices, setShowDevices] = createSignal(false); let triggerContainerRef: HTMLDivElement | undefined; let popoverRef: HTMLDivElement | undefined; createEffect(() => { if (!showDevices()) return; const onMouseDown = (e: MouseEvent) => { const target = e.target as Node; if (triggerContainerRef?.contains(target) || popoverRef?.contains(target)) return; setShowDevices(false); }; const onKeyDown = (e: KeyboardEvent) => { if (e.key === 'Escape') setShowDevices(false); }; document.addEventListener('mousedown', onMouseDown); document.addEventListener('keydown', onKeyDown); onCleanup(() => { document.removeEventListener('mousedown', onMouseDown); document.removeEventListener('keydown', onKeyDown); }); }); return ( ); }; export default Sidebar;