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>
This commit is contained in:
colinislit
2025-12-23 22:28:41 +01:00
parent 96a1f25e55
commit 855b1e99ae
27 changed files with 8496 additions and 14 deletions

View File

@@ -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>
);
}