docs(01): capture phase context

2026-06-18 09:13:55 +02:00
parent 4a71f1f774
commit 337e328e98
2 changed files with 269 additions and 0 deletions
@@ -0,0 +1,104 @@
+# Phase 1: Foundation & Portal Shell - Context
+
+**Gathered:** 2026-06-18
+**Status:** Ready for planning
+
+<domain>
+## Phase Boundary
+
+Docker-Infrastruktur (Compose-Stack mit PostgreSQL, Netzwerksegmentierung), das visuelle Portal-Grundgeruest (Header, Sidebar, Hauptbereich) mit responsivem Layout, Light/Dark Theme Toggle, und i18n-Framework (Deutsch + Englisch). Keine Authentifizierung, keine Module — nur der strukturelle Rahmen.
+
+</domain>
+
+<decisions>
+## Implementation Decisions
+
+### Sidebar-Verhalten
+- **D-01:** Sidebar einklappbar auf Icon-Leiste (Toggle zwischen ~240px voller Breite und schmaler Icon-Ansicht)
+- **D-02:** Breite ausgeklappt: ~240px (Standard wie VS Code/Slack)
+- **D-03:** Mobile/kleine Bildschirme: komplett versteckt, Hamburger-Button zum Oeffnen
+- **D-04:** Position: immer links (nicht konfigurierbar)
+- **D-05:** Kategorien als Accordion (aufklappbar, zeigen Module darunter)
+- **D-06:** Footer-Bereich in der Sidebar: Einstellungen-Icon und kompakte User-Info
+
+### Header/Kopfzeile
+- **D-07:** Inhalt: Logo/Branding links, Breadcrumb/Seitentitel mittig, globale Suche, Benutzer-Menu rechts (Avatar + Dropdown)
+- **D-08:** Hoehe: ~56-64px (Standard, nicht dominant)
+- **D-09:** Verhalten: sticky (bleibt immer sichtbar oben beim Scrollen)
+
+### Farbschema & Stil
+- **D-10:** Primaer-/Markenfarbe: Gelb #ffed00
+- **D-11:** Akzentfarbe: konfigurierbar in den Benutzer-Einstellungen
+- **D-12:** Visueller Stil: Modern/Clean (viel Whitespace, klare Linien, subtile Schatten — wie Notion/Linear)
+- **D-13:** Ecken: leicht abgerundet (border-radius ~6-8px)
+- **D-14:** Dark Mode: Claude entscheidet (dark gray empfohlen fuer Augenkomfort bei gelbem Akzent)
+
+### Leer-Zustand
+- **D-15:** Startseite ist das Dashboard (in Sidebar aktiv, im Hauptbereich geoeffnet)
+- **D-16:** Leeres Dashboard zeigt "Keine Widgets aktiv" mit Button zum Hinzufuegen
+- **D-17:** Dashboard-Funktionalitaet orientiert sich an Homarr — aber mit feinerem Grid fuer die Widget-Ausrichtung
+
+### Claude's Discretion
+- Dark Mode Farbton (empfohlen: dunkles Grau/Blau statt true-black wegen gelber Primaerfarbe)
+- Sidebar-Inhalt im Leer-Zustand (nur Dashboard + Marketplace sichtbar empfohlen)
+- Font-Wahl (Inter oder aehnliche clean sans-serif empfohlen)
+
+</decisions>
+
+<canonical_refs>
+## Canonical References
+
+**Downstream agents MUST read these before planning or implementing.**
+
+### Projekt-Kontext
+- `.planning/PROJECT.md` — Gesamtprojekt-Vision, Core Value, Constraints
+- `.planning/REQUIREMENTS.md` — Phase-1-Requirements: INFRA-01..03, PRTAL-01, PRTAL-04, UI-01..03
+- `.planning/ROADMAP.md` — Phase-Ziel und Success Criteria
+
+### Research
+- `.planning/research/STACK.md` — Technologie-Stack (Next.js 16, NestJS 11, Tailwind 4, shadcn/ui, pnpm Turborepo)
+- `.planning/research/ARCHITECTURE.md` — Systemarchitektur, Komponenten-Grenzen
+- `.planning/research/PITFALLS.md` — Fallstricke (besonders: i18n von Tag 1, Docker-Netzwerksegmentierung, Design Tokens)
+
+### Externe Referenzen
+- Homarr (https://homarr.dev) — Dashboard-Referenz fuer Grid/Widget-Verhalten (feineres Grid verwenden)
+
+</canonical_refs>
+
+<code_context>
+## Existing Code Insights
+
+### Reusable Assets
+- Keine — Greenfield-Projekt, erster Code wird in dieser Phase geschrieben
+
+### Established Patterns
+- Keine — Patterns werden in dieser Phase etabliert (Monorepo-Struktur, Component-Library, Design-Tokens)
+
+### Integration Points
+- Docker-Compose als Deployment-Basis fuer alle nachfolgenden Phasen
+- i18n-Framework muss so aufgesetzt werden, dass Module spaeter eigene Uebersetzungen registrieren koennen
+- Theme-System muss konfigurierbare Akzentfarbe pro Benutzer unterstuetzen
+
+</code_context>
+
+<specifics>
+## Specific Ideas
+
+- Dashboard-Grid wie Homarr aber feiner (mehr Spalten/Raster fuer praezisere Widget-Platzierung)
+- Primaerfarbe Gelb #ffed00 als Markenfarbe — UI-Elemente entsprechend gestalten (Buttons, aktive States, Links)
+- Akzentfarbe in Einstellungen konfigurierbar — Design-System muss CSS-Variablen / Tailwind-Config dynamisch unterstuetzen
+- Sidebar-Footer mit Settings-Icon bietet schnellen Zugang zu Einstellungen ohne Header-Navigation
+
+</specifics>
+
+<deferred>
+## Deferred Ideas
+
+None — discussion stayed within phase scope
+
+</deferred>
+
+---
+
+*Phase: 1-Foundation & Portal Shell*
+*Context gathered: 2026-06-18*