diff --git a/.planning/phases/01-foundation-portal-shell/01-CONTEXT.md b/.planning/phases/01-foundation-portal-shell/01-CONTEXT.md new file mode 100644 index 0000000..5b6f690 --- /dev/null +++ b/.planning/phases/01-foundation-portal-shell/01-CONTEXT.md @@ -0,0 +1,104 @@ +# Phase 1: Foundation & Portal Shell - Context + +**Gathered:** 2026-06-18 +**Status:** Ready for planning + + +## 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. + + + + +## 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) + + + + +## 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) + + + + +## 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 + + + + +## 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 + + + + +## Deferred Ideas + +None — discussion stayed within phase scope + + + +--- + +*Phase: 1-Foundation & Portal Shell* +*Context gathered: 2026-06-18* diff --git a/.planning/phases/01-foundation-portal-shell/01-DISCUSSION-LOG.md b/.planning/phases/01-foundation-portal-shell/01-DISCUSSION-LOG.md new file mode 100644 index 0000000..5d825b4 --- /dev/null +++ b/.planning/phases/01-foundation-portal-shell/01-DISCUSSION-LOG.md @@ -0,0 +1,165 @@ +# Phase 1: Foundation & Portal Shell - Discussion Log + +> **Audit trail only.** Do not use as input to planning, research, or execution agents. +> Decisions are captured in CONTEXT.md — this log preserves the alternatives considered. + +**Date:** 2026-06-18 +**Phase:** 1-Foundation & Portal Shell +**Areas discussed:** Sidebar-Verhalten, Header-Inhalt, Farbschema & Stil, Leer-Zustand + +--- + +## Sidebar-Verhalten + +| Option | Description | Selected | +|--------|-------------|----------| +| Einklappbar auf Icons | Breite Ansicht mit Text, kann auf schmale Icon-Leiste reduziert werden | ✓ | +| Immer voll sichtbar | Sidebar bleibt immer in voller Breite mit Text | | +| Auto-collapse | Auf kleinen Bildschirmen automatisch eingeklappt, auf grossen immer offen | | + +**User's choice:** Einklappbar auf Icons +**Notes:** — + +| Option | Description | Selected | +|--------|-------------|----------| +| ~240px (Standard) | Breite wie VS Code, Slack — genug Platz fuer Modulnamen | ✓ | +| ~200px (Kompakt) | Etwas schmaler, mehr Platz fuer den Hauptbereich | | +| Du entscheidest | Claude waehlt basierend auf Best-Practices | | + +**User's choice:** ~240px (Standard) +**Notes:** — + +| Option | Description | Selected | +|--------|-------------|----------| +| Overlay/Drawer | Sidebar gleitet als Overlay ueber den Content | | +| Versteckt + Hamburger | Komplett versteckt, Hamburger-Menu oeffnet sie | ✓ | +| Du entscheidest | Claude waehlt das beste Pattern | | + +**User's choice:** Versteckt + Hamburger +**Notes:** — + +| Option | Description | Selected | +|--------|-------------|----------| +| Immer links | Standard-Position, keine Konfiguration | ✓ | +| Konfigurierbar (links/rechts) | Benutzer kann die Seite waehlen | | + +**User's choice:** Immer links +**Notes:** — + +| Option | Description | Selected | +|--------|-------------|----------| +| Ja, Accordion | Kategorien klappen auf/zu, zeigen Module darunter | ✓ | +| Immer offen | Alle Kategorien und Module immer sichtbar | | +| Gruppiert mit Trenner | Optische Trennung ohne Klapp-Mechanik | | + +**User's choice:** Ja, Accordion +**Notes:** — + +| Option | Description | Selected | +|--------|-------------|----------| +| Ja, mit Einstellungen | Unten in der Sidebar: Settings-Icon, kompakte User-Info | ✓ | +| Nein, alles im Header | Sidebar nur fuer Navigation | | + +**User's choice:** Ja, mit Einstellungen +**Notes:** — + +--- + +## Header-Inhalt + +| Option | Description | Selected | +|--------|-------------|----------| +| Logo/Branding links | Tessera-Logo oder Schriftzug links | ✓ | +| Benutzer-Menu rechts | Avatar/Name mit Dropdown | ✓ | +| Breadcrumb/Seitentitel | Zeigt an wo man gerade ist | ✓ | +| Globale Suche | Suchfeld in der Kopfzeile | ✓ | + +**User's choice:** Alle vier Optionen gewaehlt +**Notes:** — + +| Option | Description | Selected | +|--------|-------------|----------| +| ~48px (sehr schmal) | Minimal, nur Icons | | +| ~56-64px (Standard) | Genug Platz fuer Logo + Menu | ✓ | +| Du entscheidest | Claude waehlt | | + +**User's choice:** ~56-64px (Standard) +**Notes:** — + +| Option | Description | Selected | +|--------|-------------|----------| +| Ja, sticky | Header bleibt immer sichtbar oben | ✓ | +| Nein, scrollt mit | Header verschwindet beim Scrollen | | +| Auto-hide | Verschwindet runter, erscheint hoch | | + +**User's choice:** Ja, sticky +**Notes:** — + +--- + +## Farbschema & Stil + +| Option | Description | Selected | +|--------|-------------|----------| +| Modern/Clean | Viel Whitespace, klare Linien, subtile Schatten | ✓ | +| Kompakt/Dicht | Weniger Whitespace, mehr Info | | +| Glassmorphism | Transparente Elemente mit Blur | | +| Du entscheidest | Claude waehlt | | + +**User's choice:** Modern/Clean +**Notes:** — + +| Option | Description | Selected | +|--------|-------------|----------| +| Leicht abgerundet | border-radius ~6-8px | ✓ | +| Stark abgerundet | border-radius ~12-16px | | +| Eckig/Kantig | border-radius 0-2px | | + +**User's choice:** Leicht abgerundet +**Notes:** — + +**User's choice (Farbe):** Primaerfarbe Gelb #ffed00, Akzentfarbe konfigurierbar in Einstellungen +**Notes:** Nachtraeglich als Freitext ergaenzt + +| Option | Description | Selected | +|--------|-------------|----------| +| True Dark (#0a0a0a) | Fast schwarz, hoher Kontrast | | +| Dark Gray (#1a1a2e) | Dunkles Grau/Blau, angenehmer | | +| Du entscheidest | Claude waehlt | ✓ | + +**User's choice:** Du entscheidest +**Notes:** — + +--- + +## Leer-Zustand + +| Option | Description | Selected | +|--------|-------------|----------| +| Welcome-Screen | Begruessung mit Hinweis auf Marketplace | | +| Leeres Dashboard | Direkt das Dashboard, Sidebar zeigt Dashboard + Marketplace | ✓ | +| Marketplace als Start | Marketplace als Startseite bis Module aktiv | | + +**User's choice:** Leeres Dashboard +**Notes:** Dashboard soll in Sidebar aktiv sein. Hauptbereich zeigt "Keine Widgets aktiv" + Add-Button. Orientierung an Homarr-Funktionalitaet mit feinerem Grid. + +| Option | Description | Selected | +|--------|-------------|----------| +| Dashboard + Marketplace | Nur diese zwei sichtbar | | +| Alle Kategorien (leer) | Kategorien sichtbar aber ohne Module | | +| Du entscheidest | Claude waehlt | ✓ | + +**User's choice:** Du entscheidest +**Notes:** — + +--- + +## Claude's Discretion + +- Dark Mode Farbton (empfohlen: dunkles Grau statt true-black wegen gelber Primaerfarbe) +- Sidebar-Inhalt im Leer-Zustand +- Font-Wahl + +## Deferred Ideas + +None — discussion stayed within phase scope