7f91e048f3
E1.S1 Command Center layout: - 4-zone layout (context, canvas, recent, input) - Keyboard shortcuts (⌘K focus, Escape close) - CanvasArea met empty state + voorbeelden E1.S2 Context Bar: - Shift indicator met icons per dienst - Patient chip met avatar + clear button - Terug naar EPD link E1.S3 Command Input: - Dynamic placeholder op basis van context - Send button (verschijnt bij input) - Focus state met ring E1.S4 Voice Input: - useSwiftVoice hook (wraps Deepgram) - Real-time waveform visualisatie - Streaming transcript naar input E1.S5 Recent Strip: - Intent-based chips met icons + kleuren - Relative time (zojuist, 5m, 2u) - Click-to-repeat functionaliteit - Quick hints bij lege state Bouwplan bijgewerkt: E0+E1 done (21/68 SP, 31%) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
66 lines
1.6 KiB
TypeScript
66 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
/**
|
|
* Command Center
|
|
*
|
|
* Main container for the Swift interface.
|
|
* 4-zone layout: Context Bar | Canvas Area | Recent Strip | Command Input
|
|
*
|
|
* Layout specs:
|
|
* - Context Bar: 48px (h-12)
|
|
* - Canvas Area: flex-1 (fills remaining space)
|
|
* - Recent Strip: 48px (h-12)
|
|
* - Command Input: 64px (h-16)
|
|
*/
|
|
|
|
import { useEffect, useCallback, useRef } from 'react';
|
|
import { useSwiftStore } from '@/stores/swift-store';
|
|
import { ContextBar } from './context-bar';
|
|
import { CommandInput } from './command-input';
|
|
import { RecentStrip } from './recent-strip';
|
|
import { CanvasArea } from './canvas-area';
|
|
|
|
export function CommandCenter() {
|
|
const { closeBlock, activeBlock } = useSwiftStore();
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
|
|
// Global keyboard shortcuts
|
|
const handleKeyDown = useCallback(
|
|
(e: KeyboardEvent) => {
|
|
// Escape: close active block
|
|
if (e.key === 'Escape' && activeBlock) {
|
|
e.preventDefault();
|
|
closeBlock();
|
|
}
|
|
|
|
// Cmd/Ctrl + K: focus input
|
|
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
|
|
e.preventDefault();
|
|
inputRef.current?.focus();
|
|
}
|
|
},
|
|
[activeBlock, closeBlock]
|
|
);
|
|
|
|
useEffect(() => {
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
return () => window.removeEventListener('keydown', handleKeyDown);
|
|
}, [handleKeyDown]);
|
|
|
|
return (
|
|
<>
|
|
{/* Context Bar - 48px */}
|
|
<ContextBar />
|
|
|
|
{/* Canvas Area - flex */}
|
|
<CanvasArea />
|
|
|
|
{/* Recent Strip - 48px */}
|
|
<RecentStrip />
|
|
|
|
{/* Command Input - 64px */}
|
|
<CommandInput ref={inputRef} />
|
|
</>
|
|
);
|
|
}
|