feat(swift): E0 Setup & Foundation + documentatie

Swift - Contextual UI EPD: "Van 12 klikken naar 1 zin"

Documentatie:
- PRD, FO, TO, UX specificaties
- Bouwplan met 6 epics, 27 stories (68 SP)
- Analyse en onderzoeksdocumenten

E0 Setup & Foundation:
- E0.S1: Zustand v5.0.9 geïnstalleerd
- E0.S2: Swift store met context, blocks, input state
- E0.S3: /epd/swift route met eigen layout (dark theme)
- E0.S4: Folder structuur components/swift/, lib/swift/

Components:
- CommandCenter (container)
- ContextBar (shift, patient)
- CommandInput (text + voice button)
- RecentStrip (laatste 5 acties)
- BlockContainer (wrapper voor blocks)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

components/swift/blocks/block-container.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+/**
+ * Block Container
+ *
+ * Wrapper for ephemeral blocks with animation, close button, and sizing.
+ */
+
+import { ReactNode } from 'react';
+import { X } from 'lucide-react';
+import { useSwiftStore } from '@/stores/swift-store';
+import type { BlockSize } from '@/lib/swift/types';
+
+interface BlockContainerProps {
+  title: string;
+  size?: BlockSize;
+  children: ReactNode;
+}
+
+const SIZE_CLASSES: Record<BlockSize, string> = {
+  sm: 'max-w-sm',
+  md: 'max-w-md',
+  lg: 'max-w-2xl',
+  full: 'max-w-4xl',
+};
+
+export function BlockContainer({ title, size = 'md', children }: BlockContainerProps) {
+  const { closeBlock } = useSwiftStore();
+
+  return (
+    <div
+      className={`w-full ${SIZE_CLASSES[size]} bg-slate-800 rounded-xl border border-slate-700 shadow-2xl`}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 border-b border-slate-700">
+        <h2 className="text-lg font-medium text-white">{title}</h2>
+        <button
+          onClick={closeBlock}
+          className="p-1 rounded hover:bg-slate-700 text-slate-400 hover:text-white transition-colors"
+          title="Sluiten (Esc)"
+        >
+          <X size={20} />
+        </button>
+      </div>
+
+      {/* Content */}
+      <div className="p-4">{children}</div>
+    </div>
+  );
+}

components/swift/blocks/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Swift Blocks Barrel Export
+ */
+
+export { BlockContainer } from './block-container';
+// export { DagnotatieBlock } from './dagnotitie-block';
+// export { ZoekenBlock } from './zoeken-block';
+// export { OverdrachtBlock } from './overdracht-block';

components/swift/command-center/command-center.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+/**
+ * Command Center
+ *
+ * Main container for the Swift interface.
+ * Orchestrates Context Bar, Canvas, Recent Strip, and Command Input.
+ */
+
+import { ReactNode } from 'react';
+import { ContextBar } from './context-bar';
+import { CommandInput } from './command-input';
+import { RecentStrip } from './recent-strip';
+
+interface CommandCenterProps {
+  children?: ReactNode;
+}
+
+export function CommandCenter({ children }: CommandCenterProps) {
+  return (
+    <>
+      <ContextBar />
+      <main className="flex-1 flex items-center justify-center p-4 overflow-auto">
+        {children}
+      </main>
+      <RecentStrip />
+      <CommandInput />
+    </>
+  );
+}

components/swift/command-center/command-input.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+/**
+ * Command Input
+ *
+ * Bottom input bar for text and voice commands.
+ */
+
+import { useSwiftStore } from '@/stores/swift-store';
+import { Mic } from 'lucide-react';
+
+export function CommandInput() {
+  const { inputValue, setInputValue, isVoiceActive, setVoiceActive } = useSwiftStore();
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // TODO: Process intent (E2)
+    console.log('Submit:', inputValue);
+  };
+
+  return (
+    <footer className="h-16 border-t border-slate-700 flex items-center px-4 shrink-0">
+      <form onSubmit={handleSubmit} className="flex-1 flex items-center gap-3">
+        <input
+          type="text"
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          placeholder="Typ je intentie... (bijv. 'notitie jan medicatie')"
+          className="flex-1 bg-slate-800 border border-slate-600 rounded-lg px-4 py-2 text-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          autoFocus
+        />
+        <button
+          type="button"
+          onClick={() => setVoiceActive(!isVoiceActive)}
+          className={`p-2 rounded-lg transition-colors ${
+            isVoiceActive
+              ? 'bg-red-600 hover:bg-red-500 text-white'
+              : 'bg-slate-700 hover:bg-slate-600 text-slate-300'
+          }`}
+          title="Voice input"
+        >
+          <Mic size={20} />
+        </button>
+      </form>
+    </footer>
+  );
+}

components/swift/command-center/context-bar.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+/**
+ * Context Bar
+ *
+ * Top bar showing current context: shift, selected patient, user info.
+ */
+
+import { useSwiftStore } from '@/stores/swift-store';
+
+export function ContextBar() {
+  const { shift, activePatient } = useSwiftStore();
+
+  return (
+    <header className="h-12 border-b border-slate-700 flex items-center px-4 justify-between shrink-0">
+      <div className="flex items-center gap-4">
+        <span className="text-sm font-medium text-slate-400">Swift</span>
+        <span className="text-xs px-2 py-0.5 rounded bg-slate-700 text-slate-300 capitalize">
+          {shift}dienst
+        </span>
+      </div>
+      <div className="flex items-center gap-4">
+        {activePatient ? (
+          <span className="text-sm text-white">
+            {activePatient.name_given.join(' ')} {activePatient.name_family}
+          </span>
+        ) : (
+          <span className="text-sm text-slate-500">Geen patiënt geselecteerd</span>
+        )}
+      </div>
+    </header>
+  );
+}

components/swift/command-center/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Command Center Barrel Export
+ */
+
+export { CommandCenter } from './command-center';
+export { CommandInput } from './command-input';
+export { ContextBar } from './context-bar';
+export { RecentStrip } from './recent-strip';

components/swift/command-center/recent-strip.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+/**
+ * Recent Strip
+ *
+ * Shows last 5 actions as clickable chips for quick repeat.
+ */
+
+import { useSwiftStore } from '@/stores/swift-store';
+
+export function RecentStrip() {
+  const { recentActions } = useSwiftStore();
+
+  return (
+    <div className="h-12 border-t border-slate-700 flex items-center px-4 gap-2 shrink-0">
+      <span className="text-xs text-slate-500 shrink-0">Recent:</span>
+      {recentActions.length === 0 ? (
+        <span className="text-xs text-slate-600 italic">Nog geen acties</span>
+      ) : (
+        <div className="flex gap-2 overflow-x-auto">
+          {recentActions.map((action) => (
+            <button
+              key={action.id}
+              className="text-xs px-2 py-1 rounded bg-slate-700 hover:bg-slate-600 text-slate-300 whitespace-nowrap transition-colors"
+              title={`${action.intent}: ${action.label}`}
+            >
+              {action.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

components/swift/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Swift Components Barrel Export
+ */
+
+export * from './command-center';
+export * from './blocks';