docs(01): capture phase context
This commit is contained in:
@@ -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*
|
||||||
@@ -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
|
||||||
Reference in New Issue
Block a user