125 lines
6.6 KiB
Markdown
125 lines
6.6 KiB
Markdown
# Phase 2 — React UI Components Task Spec
|
||
|
||
## Context
|
||
- Project: web-cad-neu (clean rewrite of web-cad)
|
||
- Frontend: /a0/usr/workdir/web-cad-neu/frontend/
|
||
- Stack: React 18 + TypeScript + Vite, plain CSS (no Tailwind/styled-components)
|
||
- tsconfig: jsx=react-jsx, baseUrl=./src, paths @/* -> .
|
||
|
||
## Reference Files (READ THESE FIRST)
|
||
- Mockup HTML: /a0/usr/workdir/web-cad-neu/mockup/editor.html (1133 lines)
|
||
- Mockup theme CSS: /a0/usr/workdir/web-cad-neu/mockup/assets/styles.css (195 lines)
|
||
- Mockup layout CSS: /a0/usr/workdir/web-cad-neu/mockup/assets/layout.css (1298 lines)
|
||
- Types: /a0/usr/workdir/web-cad-neu/frontend/src/types/cad.types.ts
|
||
- Phase 1 engines: /a0/usr/workdir/web-cad-neu/frontend/src/canvas/*.ts, /a0/usr/workdir/web-cad-neu/frontend/src/interaction/index.ts
|
||
|
||
## Output Directory
|
||
/a0/usr/workdir/web-cad-neu/frontend/src/
|
||
|
||
## Files to Create (15 components + 1 CSS)
|
||
|
||
### 1. styles.css
|
||
- Copy /a0/usr/workdir/web-cad-neu/mockup/assets/styles.css + layout.css content into ONE file at frontend/src/styles.css
|
||
- Keep all CSS class names verbatim from mockup
|
||
- Keep all CSS variables from styles.css
|
||
- Add mobile breakpoint rules from layout.css (<=768px)
|
||
|
||
### 2. App.tsx
|
||
- Root component: imports styles.css
|
||
- Layout: <div class="app"> > Topbar + RibbonBar + <main class="main"> > LeftSidebar + CanvasArea + RightSidebar + </main> + CommandLine + StatusBar + MobileDrawers
|
||
- State: activeTool, activeRibbonTab, activeRightPanel, theme, snapEnabled, orthoEnabled, gridEnabled, selectedElements, layers, cursorPos, commandHistory
|
||
- Pass props to children
|
||
|
||
### 3. components/Topbar.tsx
|
||
- class="topbar" with topbar-left (hamburger, logo, app-name, project-name, saved-badge) and topbar-right (undo, redo, divider, versions, share, divider, theme-toggle, help, divider, lang-select, notifications, avatar)
|
||
- Copy SVG icons EXACTLY from mockup lines 21-68
|
||
- Props: projectName, savedStatus, onUndo, onRedo, onThemeToggle, theme
|
||
|
||
### 4. components/RibbonBar.tsx
|
||
- class="ribbon" with ribbon-tabs (6 tabs: Start/Einfügen/Format/Ansicht/Extras/KI) + ribbon-content
|
||
- Start tab groups: Datei (Neu/Öffnen/Speichern), Bearbeiten (Undo/Redo/Kopieren/Einfügen), Ansicht (Zoom Fit/100%/Grid/Layer), Extras (Messen/Suchen/KI/Plugins)
|
||
- Copy SVGs from mockup lines 72-191
|
||
- Props: activeTab, onTabChange, onAction
|
||
|
||
### 5. components/LeftSidebar.tsx
|
||
- class="leftbar" with header (title + toggle), 4 tool-sections, footer (3 buttons)
|
||
- Sections: Auswählen/Anzeigen (Auswahl/Pan/Zoom/Messen), Zeichnen (Linie/Polylinie/Rechteck/Kreis/Bogen/Text/Bemaßung/Schraffur), Bearbeiten (Move/Copy/Rotate/Scale/Mirror/Trim/Offset/Löschen), Bestuhlung (Reihe/Block/Tisch/Bühne)
|
||
- 20 tool buttons with data-tool, title, SVG icon, label, kbd shortcut
|
||
- Copy SVGs from mockup lines 198-360
|
||
- Props: activeTool, onToolChange
|
||
- Footer: Plugin/Settings/Help buttons
|
||
|
||
### 6. components/CanvasArea.tsx
|
||
- class="canvas-area" with canvas-coords (X/Y display), canvas-view-tabs (2D/ISO/Front/Top), <canvas> element (NOT SVG)
|
||
- useEffect: init RenderEngine + ZoomPanController + InteractionEngine on canvas ref
|
||
- Floating toolbar: zoom in/out/fit, grid toggle, ortho toggle, snap toggle, prev view
|
||
- Props: cursorPos, viewMode, onViewChange, gridEnabled, orthoEnabled, snapEnabled, onToggleGrid, onToggleOrtho, onToggleSnap, onZoomIn, onZoomOut, onZoomFit
|
||
|
||
### 7. components/RightSidebar.tsx
|
||
- class="rightbar" with rightbar-tabs (Werkzeug/Layer/Bibliothek/KI) + rightbar-content
|
||
- Tab switching shows/hides panels
|
||
- KI tab has badge (count)
|
||
- Copy SVGs from mockup lines 669-687
|
||
- Props: activePanel, onPanelChange, selectedElement, layers, blocks
|
||
|
||
### 8. components/PropertiesPanel.tsx
|
||
- rightbar-panel data-panel-content="tool"
|
||
- Sections: selection info, Geometrie (X/Y/Breite/Tiefe/Drehung inputs), Darstellung (Farbe color picker+hex, Linientyp select, Stärke select, Layer select), Block (name+description inputs)
|
||
- Copy structure from mockup lines 692-776
|
||
- Props: selectedElement, layers, onUpdateProperty
|
||
|
||
### 9. components/LayerPanel.tsx
|
||
- rightbar-panel data-panel-content="layer"
|
||
- Uses TreeView component for layer hierarchy
|
||
- Header with options button + add-layer button
|
||
- Copy structure from mockup lines 779-866
|
||
- Props: layers, onSelectLayer, onAddLayer, onToggleLayer
|
||
|
||
### 10. components/BlockLibrary.tsx
|
||
- rightbar-panel data-panel-content="library"
|
||
- lib-search (input with search icon), lib-categories (Alle/Bestuhlung/Tische/Bühne/Deko chips), tree-library with draggable items
|
||
- Copy structure from mockup lines 897-976
|
||
- Props: blocks, category, onCategoryChange, onSearch, onDragBlock
|
||
|
||
### 11. components/KICopilot.tsx
|
||
- rightbar-panel data-panel-content="ki"
|
||
- ki-header (avatar, title, status), ki-suggestions (chips), ki-chat (messages), ki-input-wrap (input+voice+send)
|
||
- Copy structure from mockup lines 978-1026
|
||
- Props: messages, suggestions, onSend, onSuggestionClick
|
||
|
||
### 12. components/CommandLine.tsx
|
||
- class="cmdline" with cmdline-history (entries with prefix · or ›) + cmdline-input-wrap (prompt › + input)
|
||
- Copy structure from mockup lines 1076-1089
|
||
- Props: history, onCommand
|
||
|
||
### 13. components/StatusBar.tsx
|
||
- class="statusbar" with status-items: SNAP/ORTHO/POLAR/GRID toggles, X/Y coords, active layer, active tool, online status
|
||
- Copy structure from mockup lines 1092-1127
|
||
- Props: snapEnabled, orthoEnabled, polarEnabled, gridEnabled, cursorX, cursorY, activeLayer, activeTool, onlineCount, onToggleSnap, onToggleOrtho, onTogglePolar, onToggleGrid
|
||
|
||
### 14. components/TreeView.tsx
|
||
- Reusable tree component for LayerPanel and BlockLibrary
|
||
- Props: nodes (TreeNode[]), onSelect, onToggle, draggable, renderIcon
|
||
- TreeNode type: { id, name, count?, icon?, children?, expanded?, active?, draggable? }
|
||
- Renders tree-node > tree-row (tree-row-folder or tree-row-leaf) > tree-children recursively
|
||
|
||
### 15. components/MobileDrawers.tsx
|
||
- Scrim + drawer-left + drawer-right
|
||
- drawer-left: header (title + close) + body (filled with LeftSidebar content)
|
||
- drawer-right: header (title + close) + drawer-tabs (Wz/Layer/Lib/KI) + body
|
||
- Copy structure from mockup lines 1032-1073
|
||
- Props: leftOpen, rightOpen, activeRightTab, onCloseLeft, onCloseRight, onRightTabChange
|
||
|
||
## Rules
|
||
- TypeScript functional components with React.FC or function syntax
|
||
- NO inline styles except where mockup uses them (style="...")
|
||
- NO styled-components, NO Tailwind
|
||
- Import styles.css once in App.tsx
|
||
- Copy SVG icons EXACTLY from mockup (viewBox, paths, attributes)
|
||
- Use mockup CSS class names verbatim
|
||
- All text in German (matching mockup)
|
||
- CanvasArea uses <canvas> not <svg> — wire to Phase 1 engines
|
||
- Mobile breakpoint <=768px: hamburger shows, sidebars hide, drawers slide in
|
||
- npx tsc --noEmit must pass with zero errors
|
||
- Each component in its own file under components/
|