4.2 KiB
4.2 KiB
Phase 1: Foundation & Portal Shell - Context
Gathered: 2026-06-18 Status: Ready for planning
## Phase BoundaryDocker-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.
## Implementation DecisionsSidebar-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)
<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>
## 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
None — discussion stayed within phase scope
Phase: 1-Foundation & Portal Shell Context gathered: 2026-06-18