279 lines
51 KiB
Markdown
279 lines
51 KiB
Markdown
---
|
||
phase: quick-260916-htc
|
||
plan: 01
|
||
type: execute
|
||
wave: 1
|
||
depends_on: []
|
||
autonomous: true
|
||
requirements: [QUICK-260916-HTC]
|
||
|
||
files_modified:
|
||
- apps/web/src/messages/de.json
|
||
- apps/web/src/messages/en.json
|
||
- apps/web/src/components/dashboard/widgets/calendar-month.ts
|
||
- apps/web/src/components/dashboard/widgets/calendar-month.test.ts
|
||
- apps/web/src/components/dashboard/widgets/calendar-widget.tsx
|
||
- apps/web/src/components/dashboard/widgets/calendar-widget.test.tsx
|
||
- apps/web/src/components/dashboard/widget-registry.tsx
|
||
- apps/web/src/components/dashboard/widget-registry.test.tsx
|
||
- apps/web/src/components/settings/widget-settings-panel.tsx
|
||
- apps/web/src/components/settings/widget-settings-panel.test.tsx
|
||
- CHANGELOG.md
|
||
- docs/anleitung-anwender.md
|
||
|
||
estimate:
|
||
tokens: 75000
|
||
raw_tokens: 75000
|
||
tasks: 3
|
||
confidence: low
|
||
|
||
must_haves:
|
||
truths:
|
||
- "Das Kalender-Widget zeigt oben ein Monatsraster (Zeile Zurück / „Monat Jahr“ / Weiter, Kopfzeile Mo Di Mi Do Fr Sa So, 42 Zellen ab Montag, Fremdmonatstage gedämpft, heutiger Tag hervorgehoben, kleine Zähl-Plakette unten rechts an Tagen mit Terminen; beim Überfahren eines Tages mit Terminen ein Tooltip mit bis zu 5 Zeilen „HH:MM Titel“ plus „Weitere Termine vorhanden“) und darunter den Block „Nächste Termine“ (Datum/Uhrzeit, Titel fett, Ort gedämpft, 8-px-Farbpunkt der Quelle)."
|
||
- "Ein Klick auf „Monat Jahr“ springt zum heutigen Monat zurück; Zurück/Weiter blättern; jeder Monatswechsel lädt die Termine neu. Nav-Knöpfe und Tageszellen tragen `widgetNoDrag` (kein Ziehen im Bearbeitungsmodus)."
|
||
- "Unter Einstellungen → Dashboard → Widgets → Kalender gibt es drei Felder: Kontrollkästchen „Monatsansicht anzeigen“ (showMonth, Vorgabe an), Auswahl „Anzahl Termine“ (maxEvents 0..10, Vorgabe 3, Optionen „Ausblenden“, „1 Termin“, „2 Termine“ … „10 Termine“) und Auswahl „Zeitraum“ (lookaheadDays 7/14/30/60/90, Vorgabe 30, Optionen „Nächste N Tage“); darunter die übersetzte Zeile „Kalenderquellen verwalten Sie unter Einstellungen → Dashboard → Kalender“ als Link. Jede Änderung ruft `updateWidgetConfig(id, { feld: wert })` mit genau dem geänderten Feld auf."
|
||
- "Das Widget liest showMonth/maxEvents/lookaheadDays aus `config`, klemmt ungültige Werte (maxEvents 0..10, lookaheadDays auf 7/14/30/60/90 sonst 30) und zeigt bei showMonth=false und maxEvents=0 den gedämpften Text „Nichts zum Anzeigen ausgewählt“ statt abzustürzen."
|
||
- "Pro Ladevorgang genau EIN `fetchEvents(from, to)`-Aufruf mit beiden Argumenten; from/to sind lokale Tagesgrenzen (00:00:00.000) als ISO-Strings über `min(Rasterstart, heute 00:00)` … `max(Rasterende, heute 00:00 + lookaheadDays)`, damit der Backend-Cache-Schlüssel über die 5-Minuten-Aktualisierung hinweg stabil bleibt."
|
||
- "`WIDGET_CONSTRAINTS.calendar` ist `{ minW: 6, minH: 8, defaultW: 8, defaultH: 12 }`; gespeicherte kleinere Layouts hebt `applyConstraintMinima` in dashboard-grid.tsx automatisch an (seit 260916-dyv, keine Änderung nötig)."
|
||
- "Type-Check Exit 0; alle Web-Tests grün (Basislinie 50 Dateien / 315 Tests, danach 51 Dateien und mindestens 328 Tests); Umlaut-Wächter 3/3; changelog.test.ts grün."
|
||
artifacts:
|
||
- "apps/web/src/components/dashboard/widgets/calendar-month.ts — reine Hilfsfunktionen: resolveCalendarConfig, dateKey, startOfLocalDay, addDays, gridStartFor, groupEventsByDate, buildCalendarDays, computeFetchWindow, selectUpcomingEvents, formatEventDate, formatEventTime, formatMonthLabel, Konstanten"
|
||
- "apps/web/src/components/dashboard/widgets/calendar-month.test.ts — Unit-Tests der Hilfsfunktionen"
|
||
- "apps/web/src/components/dashboard/widgets/calendar-widget.tsx — neues Widget (Monatsraster + Nächste Termine + Portal-Tooltip)"
|
||
- "apps/web/src/components/dashboard/widgets/calendar-widget.test.tsx — neu geschriebener Komponententest"
|
||
- "apps/web/src/components/settings/widget-settings-panel.tsx — `CalendarConfig` nach Muster `ClockConfig`"
|
||
- "apps/web/src/messages/de.json + en.json — 16 neue Schlüssel unter `widgets.calendar`"
|
||
- "CHANGELOG.md — Eintrag unter Unveröffentlicht / Geändert; docs/anleitung-anwender.md — Kalender-Zeile in der Widget-Tabelle und Absatz Dashboard > Widgets ergänzt"
|
||
key_links:
|
||
- "`t('calendar.<key>')` im Widget und im Panel (Namespace `widgets` aus `useTranslations('widgets')`) ↔ `widgets.calendar.<key>` in de.json/en.json; `umlaut-guard.spec.ts` erzwingt identische Schlüsselmengen"
|
||
- "`resolveCalendarConfig` wird von Widget UND Panel benutzt — dieselben Vorgaben/Grenzen an beiden Stellen (Muster clock-font-size.ts, T-BWO-01)"
|
||
- "`computeFetchWindow` liefert die from/to-Werte, die 1:1 per `toISOString()` an `fetchEvents` gehen; Backend-Cache-Schlüssel = `${userId}:${from.toISOString()}:${to.toISOString()}` (calendar.service.ts, aggregateEvents)"
|
||
- "Tooltip per `createPortal(..., document.body)` mit `position: fixed`, weil die Karte in widget-wrapper.tsx `overflow-hidden` ist und der Rumpf `@container-size` trägt"
|
||
- "`widget-registry.test.tsx` Test A pinnt `WIDGET_CONSTRAINTS` per `toEqual` — die Kalender-Zeile dort muss mitgezogen werden"
|
||
---
|
||
|
||
<objective>
|
||
Das Kalender-Widget (`apps/web/src/components/dashboard/widgets/calendar-widget.tsx`) zeigt heute nur eine flache Terminliste. Es wird nach dem Vorbild des alten persönlichen Dashboards des Anwenders neu gebaut: oben ein Monatsraster mit Blätter-Zeile, Wochentagskopf, 42 Tageszellen, Hervorhebung von heute, Zähl-Plakette an Tagen mit Terminen und Tooltip beim Überfahren; darunter der Block „Nächste Termine“. Drei neue Widget-Einstellungen (Monatsansicht an/aus, Anzahl Termine, Zeitraum) werden unter Einstellungen → Dashboard → Widgets → Kalender nach dem Muster `ClockConfig` gepflegt; der bisher untranslatierte englische Hinweistext dort wird durch eine übersetzte Link-Zeile ersetzt.
|
||
|
||
NICHT Teil dieses Auftrags (bewusst, Entscheidung des Anwenders): keine Quellenauswahl je Widget — der globale Sichtbar-Schalter je Quelle unter Einstellungen → Dashboard → Kalender bleibt der einzige Filter. Kein Docker-Build, kein Deploy, kein Testserver, kein `git push`. `biome.json` nicht anfassen.
|
||
|
||
Purpose: Der Anwender will die Monatsübersicht mit Terminanzahl je Tag zurück, die er von seinem alten Dashboard kennt, plus Einfluss darauf, wie viele Termine und welcher Zeitraum darunter erscheinen.
|
||
Output: Hilfsmodul `calendar-month.ts` mit Unit-Tests, neues Widget mit neu geschriebenem Komponententest, `CalendarConfig` im Einstellungsfeld mit Tests, 16 Übersetzungsschlüssel de/en, angepasste Mindestgröße im Registry (+ Test), Changelog-Eintrag, Handbuch-Ergänzung.
|
||
</objective>
|
||
|
||
<execution_context>
|
||
@~/.claude/gsd-core/workflows/execute-plan.md
|
||
@~/.claude/gsd-core/templates/summary.md
|
||
</execution_context>
|
||
|
||
<context>
|
||
@.planning/STATE.md
|
||
@apps/web/src/components/dashboard/widgets/calendar-widget.tsx
|
||
@apps/web/src/components/dashboard/widgets/calendar-widget.test.tsx
|
||
@apps/web/src/components/dashboard/widgets/clock-widget.tsx
|
||
@apps/web/src/components/dashboard/widgets/widget-wrapper.tsx
|
||
@apps/web/src/components/settings/widget-settings-panel.tsx
|
||
@apps/web/src/components/settings/widget-settings-panel.test.tsx
|
||
@apps/web/src/lib/calendar-api.ts
|
||
@apps/web/src/messages/umlaut-guard.spec.ts
|
||
|
||
Gemessene Fakten zur Planungszeit (2026-09-16, Arbeitsbaum sauber auf `main` @ a60c168):
|
||
|
||
- `WidgetProps` (widget-registry.tsx Z. 21-25): `{ instanceId: string; config: Record<string, unknown>; isEditMode: boolean }`. `WIDGET_CONSTRAINTS.calendar` steht in Z. 44 auf `{ minW: 3, minH: 3, defaultW: 8, defaultH: 12 }`; `widget-registry.test.tsx` Z. 64 pinnt genau diese Zeile per `toEqual` — beide Stellen ändern.
|
||
- Raster (dashboard-grid.tsx Z. 18/171/172): `COLS.lg = 24`, `rowHeight={20}`, `margin=[8,8]`. Kachelhöhe = h·20 + (h−1)·8 → Vorgabe 8×12 ≈ 328 px hoch, minH 8 = 216 px; Kachelbreite bei 8 Spalten ≈ 460 px (1400-px-Dashboard), minW 6 ≈ 340 px. `applyConstraintMinima` (Z. 86-113) hebt gespeicherte w/h auf minW/minH an und setzt minW/minH aus der Tabelle — kein Eingriff nötig.
|
||
- Drag-Cancel-Selektor (dashboard-grid.tsx Z. 31-32): `'input, textarea, select, button, a, [contenteditable], [data-no-drag], .widgetNoDrag'`. Knöpfe sind also ohnehin drag-frei; Tageszellen (div) brauchen die Klasse `widgetNoDrag`.
|
||
- widget-wrapper.tsx: Karte `overflow-hidden rounded-lg border …`, Rumpf `<div className="@container-size h-full">` (container-type: size, `cqw`/`cqh` lösen auf). Ein absolut positionierter Tooltip in der Karte würde abgeschnitten → Portal + `position: fixed`.
|
||
- Container-Query-Konvention (clock-widget.tsx Z. 51, calculator-widget.tsx Z. 315-332): Tailwind-Arbitrary-Werte wie `text-[clamp(12px,min(20cqw,50cqh),400px)]`; jsdom verwirft clamp() nur im Inline-Style, Klassen bleiben prüfbar (`className` toMatch /cqw/).
|
||
- calendar-api.ts: `fetchEvents(from?: string, to?: string)` hängt from/to als Query an; `fetchSources()`; `CalendarEvent { id, sourceId, title, start, end, allDay, location?, description?, color? }`. Backend (calendar.service.ts `aggregateEvents`, Z. 373-395): Cache-Schlüssel `${userId}:${fromDate.toISOString()}:${toDate.toISOString()}`, TTL 5 min, Default-Fenster jetzt..+30 d. Der alte Widget-Code ruft `fetchEvents` OHNE Argumente → Default-Fenster, Cache-Treffer nur zufällig.
|
||
- widget-settings-panel.tsx: `handleConfigChange(id, partialConfig)` → `updateWidgetConfig` + `onWidgetUpdate` (Seite `settings/dashboard/page.tsx` Z. 43-49 mischt partiell: `{ ...w.config, ...config }`). Kalender-Zweig Z. 178-192 zeigt einen fest englischen Absatz mit `<Link href="/settings/dashboard/calendar">`. `ClockConfig` (Z. 209-330) ist das Muster: Kontrollkästchen `h-4 w-4 rounded border-border text-primary`, Select `h-9 w-full max-w-xs rounded border border-border bg-background px-3 text-sm text-foreground`, Label `mb-1 block text-sm text-foreground`. `Link` ist bereits importiert.
|
||
- widget-settings-panel.test.tsx: mockt `next-intl` über die echte `de.json` per Pfad-Lookup — der Mock gibt `lookup(...) ?? key` zurück und ersetzt KEINE `{platzhalter}`; für die neuen Optionstexte („{count} Termine“, „Nächste {days} Tage“) muss der Mock ein zweites Argument `values` annehmen und `{name}` ersetzen (Task 3). Mockt `@/lib/dashboard-api.updateWidgetConfig`, `next/link`, `search-provider-form`.
|
||
- de.json Z. 205-239 / en.json Z. 205-239: `widgets.calendar` mit `name, description, loading, emptyNoSources, emptyNoEvents, connectionSuccess, …, saveError` (35 Schlüssel). `umlaut-guard.spec.ts` prüft (1) keine Ersatzschreibungen, (2) jedes de-Token mit ae/oe/ue/ss muss auf `UMLAUT_ALLOWLIST` stehen („Kalenderquellen“, „Quelle“, „Quellen“ stehen drauf; „aktuellen“/„Aktueller“ NICHT — deshalb „heutigen Monat“ statt „aktuellen Monat“), (3) identische Schlüsselmengen de/en.
|
||
- vitest (apps/web 4.1.9): jsdom, `globals: true`, jest-dom-Matcher über `src/test/setup.ts`, `css: false`. Zeitlogik in Tests deterministisch über `vi.useFakeTimers({ toFake: ['Date'] })` + `vi.setSystemTime(...)` (nur Date faken, damit `waitFor` mit echten Timern weiterläuft); Testdaten immer mit lokalen Konstruktoren `new Date(2026, 6, 20, 9, 0)` bauen, nie mit festen `Z`-Strings, damit die Tests in jeder Zeitzone gleich laufen.
|
||
- Referenz (user-files/personal-dashboard/src/app/page.tsx): `buildCalendarDays` Z. 230-256 (Montag-basiert, 42 Zellen, `dateKey` lokal YYYY-MM-DD, `isToday` per Key-Vergleich), `groupEventsByDate` Z. 379-390 (nach lokalem Startdatum), `formatEventDate` Z. 190-198 (de-DE, weekday short, day/month 2-digit, hour/minute 2-digit → „Mi., 01.07., 18:00“), `formatMonthLabel` Z. 207-212 („Juli 2026“), `renderCalendarWidget` Z. 1892-1990 (Struktur Header → Wochentage → Raster mit Zähl-Plakette + Tooltip (5 Einträge + „Weitere Termine vorhanden“) → Block „Nächste Termine“ mit eventDate / eventTitle / eventLocation). Screenshot user-files/dashboard.png, Kachel „CTL“ oben rechts: Plakette rot (= primary) unten rechts in der Zelle, heutiger Tag mit Rahmen, Listeneinträge als flache Karten mit drei Zeilen.
|
||
- Kalenderrechnung für die Tests: 1. Juli 2026 ist ein Mittwoch → Rasterstart Mo 29.06.2026, Rasterende (exklusiv) Mo 10.08.2026, letzte Zelle So 09.08.2026. 1. August 2026 ist ein Samstag → Rasterstart Mo 27.07.2026, Rasterende Mo 07.09.2026.
|
||
- Basislinie: `pnpm --filter @tessera/web type-check` Exit 0; `pnpm --filter @tessera/web exec vitest run` → 50 Testdateien / 315 Tests grün; Umlaut-Wächter 3/3. `biome check` ist KEIN Gate (vorbestehender, fremder Konfigurationsfehler in biome.json).
|
||
- Handbuch docs/anleitung-anwender.md: Widget-Tabelle Z. 72-81, Kalender-Zeile Z. 76 („Zeigt kommende Termine aus Ihren verbundenen Kalenderquellen“); Absatz „**Dashboard > Widgets:**“ Z. 153; Absatz „**Dashboard > Kalender:**“ Z. 155 (bleibt).
|
||
- CHANGELOG.md: `## Unveröffentlicht` Z. 5, `### Geändert` Z. 7, genau ein Eintrag Z. 9 (Kalender-Einstellungen URL-Platzhalter, quick 260916-hiv); `## 1.1.0 – 2026-09-16` Z. 11.
|
||
</context>
|
||
|
||
<tasks>
|
||
|
||
<task type="auto" tdd="true">
|
||
<name>Task 1: Übersetzungsschlüssel de/en + reines Hilfsmodul calendar-month.ts mit Unit-Tests</name>
|
||
<files>apps/web/src/messages/de.json, apps/web/src/messages/en.json, apps/web/src/components/dashboard/widgets/calendar-month.ts, apps/web/src/components/dashboard/widgets/calendar-month.test.ts</files>
|
||
<read_first>
|
||
- user-files/personal-dashboard/src/app/page.tsx Z. 180-256 und Z. 379-390 (Vorlage für dateKey, buildCalendarDays, groupEventsByDate, formatEventDate, formatMonthLabel)
|
||
- apps/web/src/components/dashboard/widgets/clock-font-size.ts (Muster: Grenzen/Vorgaben in einem Modul, das Widget und Panel teilen)
|
||
- apps/web/src/messages/de.json Z. 205-211 (Einfügestelle nach `emptyNoEvents`)
|
||
- apps/web/src/messages/umlaut-guard.spec.ts (Regeln für neue deutsche Wörter)
|
||
</read_first>
|
||
<behavior>
|
||
calendar-month.test.ts (vitest, kein DOM nötig; beschreibende deutsche Testnamen wie in den Bestandstests):
|
||
- Test 1 buildCalendarDays(new Date(2026, 6, 1), new Map(), new Date(2026, 6, 15)) → 42 Zellen; days[0].key === '2026-06-29' und inCurrentMonth false; days[2].key === '2026-07-01' und inCurrentMonth true; days[41].key === '2026-08-09'; genau eine Zelle isToday, deren key '2026-07-15'; genau 11 Zellen mit inCurrentMonth false (2 im Juni, 9 im August — Juli hat 31 Tage, 42 − 31 = 11).
|
||
- Test 2 groupEventsByDate: zwei Termine mit start new Date(2026, 6, 20, 9, 0) / new Date(2026, 6, 20, 14, 0) und einer am 21.07. → Map-Größe 2, Eintrag '2026-07-20' hat Länge 2; buildCalendarDays mit dieser Map liefert für die 20.07.-Zelle events.length 2.
|
||
- Test 3 resolveCalendarConfig: {} → { showMonth: true, maxEvents: 3, lookaheadDays: 30 }; { showMonth: false } → false; { showMonth: 'nein' } → true; { maxEvents: 99 } → 10; { maxEvents: -1 } → 0; { maxEvents: 4.7 } → 4; { maxEvents: '5' } → 3; { lookaheadDays: 45 } → 30; { lookaheadDays: 90 } → 90.
|
||
- Test 4 computeFetchWindow(new Date(2026, 6, 1), 30, new Date(2026, 6, 15, 10, 30)) → from.getTime() === new Date(2026, 5, 29).getTime(), to.getTime() === new Date(2026, 7, 14).getTime(); mit now = new Date(2026, 4, 1, 8, 0) (Mai, Juli angezeigt) → from === new Date(2026, 4, 1), to === new Date(2026, 7, 10); mit lookahead 90 und now 15.07. → to === new Date(2026, 9, 13); from/to haben jeweils getHours()/getMinutes()/getSeconds()/getMilliseconds() === 0.
|
||
- Test 5 selectUpcomingEvents(events, 7, 2, now = new Date(2026, 6, 15, 10, 0)): Termine „gestern“ (end 14.07. 12:00) raus; „läuft gerade“ (start 09:00, end 11:00 heute) drin; „heute 15:00“ drin; „in 5 Tagen“ drin; „in 10 Tagen“ (25.07.) raus wegen lookahead 7; Ergebnis nach start sortiert und auf 2 gekürzt → Titel ['läuft', 'heute 15'] in dieser Reihenfolge; maxEvents 0 → [].
|
||
- Test 6 formatEventDate: Termin start new Date(2026, 6, 20, 9, 5), allDay false → Text matcht /20\.07\./ und /09:05/; allDay true → matcht /20\.07\./ und NICHT /\d{2}:\d{2}/. formatMonthLabel(new Date(2026, 6, 1)) === 'Juli 2026'. formatEventTime(new Date(2026, 6, 20, 9, 5).toISOString()) === '09:05'.
|
||
- Test 7 gridStartFor(new Date(2026, 7, 1)) === new Date(2026, 6, 27) (Samstag → Montag davor); gridStartFor(new Date(2026, 5, 1)) === new Date(2026, 5, 1) (1. Juni 2026 ist ein Montag → Rasterstart = 1.).
|
||
</behavior>
|
||
<action>
|
||
1. **Übersetzungen.** In `apps/web/src/messages/de.json` unter `widgets.calendar` direkt NACH `"emptyNoEvents"` (vor `"connectionSuccess"`) diese 16 Schlüssel in genau dieser Reihenfolge einfügen; in `en.json` an derselben Stelle dieselben Schlüssel:
|
||
- `nothingSelected`: de „Nichts zum Anzeigen ausgewählt“ / en „Nothing selected to display“
|
||
- `monthPrev`: „Zurück“ / „Back“
|
||
- `monthNext`: „Weiter“ / „Next“
|
||
- `monthToday`: „Zurück zum heutigen Monat“ / „Back to the current month“ (bewusst „heutigen“, nicht „aktuellen“ — siehe Umlaut-Allowlist im Kontext)
|
||
- `upcomingTitle`: „Nächste Termine“ / „Upcoming events“
|
||
- `tooltipMore`: „Weitere Termine vorhanden“ / „More events available“
|
||
- `allDay`: „ganztägig“ / „all day“
|
||
- `configShowMonth`: „Monatsansicht anzeigen“ / „Show month view“
|
||
- `configMaxEvents`: „Anzahl Termine“ / „Number of events“
|
||
- `configMaxEventsNone`: „Ausblenden“ / „Hide“
|
||
- `configMaxEventsOne`: „1 Termin“ / „1 event“
|
||
- `configMaxEventsMany`: „{count} Termine“ / „{count} events“ (ICU-Platzhalter, next-intl ersetzt ihn über `t('calendar.configMaxEventsMany', { count })`)
|
||
- `configLookahead`: „Zeitraum“ / „Time range“
|
||
- `configLookaheadOption`: „Nächste {days} Tage“ / „Next {days} days“
|
||
- `configSourcesHint`: „Kalenderquellen verwalten Sie unter“ / „Manage calendar sources under“
|
||
- `configSourcesLink`: „Einstellungen → Dashboard → Kalender“ / „Settings → Dashboard → Calendar“
|
||
Bestehende Schlüssel (`loading`, `emptyNoSources`, `emptyNoEvents`, …) unverändert lassen. Echte Umlaute verwenden (ä/ü/ß), keine Ersatzschreibungen.
|
||
2. **Hilfsmodul** `apps/web/src/components/dashboard/widgets/calendar-month.ts` (kein React, kein `'use client'`, importiert nur `type { CalendarEvent } from '@/lib/calendar-api'`). Exporte mit genau diesen Namen/Signaturen:
|
||
- `CALENDAR_LOOKAHEAD_OPTIONS: readonly number[] = [7, 14, 30, 60, 90]`, `CALENDAR_MAX_EVENTS_LIMIT = 10`, `CALENDAR_DEFAULTS = { showMonth: true, maxEvents: 3, lookaheadDays: 30 } as const`, `WEEKDAY_LABELS = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'] as const`.
|
||
- `interface CalendarWidgetConfig { showMonth: boolean; maxEvents: number; lookaheadDays: number }` und `resolveCalendarConfig(config: Record<string, unknown>): CalendarWidgetConfig` — showMonth ist nur bei literalem `false` aus, sonst an; maxEvents: wenn `typeof === 'number'` und endlich → `Math.min(10, Math.max(0, Math.trunc(n)))`, sonst 3; lookaheadDays: wenn Zahl und in `CALENDAR_LOOKAHEAD_OPTIONS` enthalten → die Zahl, sonst 30.
|
||
- `dateKey(date: Date): string` (lokal `YYYY-MM-DD`, Vorlage Z. 182-188), `startOfLocalDay(date: Date): Date` (Kopie mit setHours(0,0,0,0)), `addDays(date: Date, days: number): Date` (Kopie, `setDate(getDate() + days)` — behält die lokale Wanduhrzeit über Sommerzeitwechsel, deshalb nicht über Millisekunden rechnen).
|
||
- `gridStartFor(monthDate: Date): Date` — Montag am oder vor dem 1. des Monats, 00:00 lokal (Vorlage Z. 231-238: `(firstDay.getDay() + 6) % 7`).
|
||
- `interface CalendarDay { key: string; date: Date; inCurrentMonth: boolean; isToday: boolean; events: CalendarEvent[] }`, `groupEventsByDate(events: CalendarEvent[]): Map<string, CalendarEvent[]>` (Schlüssel = `dateKey(new Date(event.start))`; mehrtägige/ganztägige Termine bewusst nur am Starttag gezählt — im SUMMARY erwähnen), `buildCalendarDays(monthDate: Date, eventsByDate: Map<string, CalendarEvent[]>, today: Date = new Date()): CalendarDay[]` (42 Zellen ab `gridStartFor`, `isToday` = `key === dateKey(today)`).
|
||
- `computeFetchWindow(monthDate: Date, lookaheadDays: number, now: Date = new Date()): { from: Date; to: Date }` — gridStart = gridStartFor(monthDate); gridEnd = addDays(gridStart, 42); todayStart = startOfLocalDay(now); lookEnd = addDays(todayStart, lookaheadDays); from = das frühere von gridStart/todayStart; to = das spätere von gridEnd/lookEnd. Alle vier Werte sind Tagesgrenzen 00:00 lokal, daher ist `toISOString()` innerhalb eines Tages konstant (Backend-Cache-Schlüssel stabil).
|
||
- `selectUpcomingEvents(events: CalendarEvent[], lookaheadDays: number, maxEvents: number, now: Date = new Date()): CalendarEvent[]` — behalten, wenn `new Date(e.end).getTime() >= now.getTime()` UND `new Date(e.start).getTime() < addDays(startOfLocalDay(now), lookaheadDays).getTime()`; nach start aufsteigend sortieren; `slice(0, maxEvents)`.
|
||
- `formatEventDate(event: CalendarEvent): string` — `Intl.DateTimeFormat('de-DE', { weekday: 'short', day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' })` für Termine mit Uhrzeit; bei `allDay` dieselben Optionen OHNE hour/minute. `formatEventTime(iso: string): string` — de-DE hour/minute 2-digit. `formatMonthLabel(date: Date): string` — de-DE `{ month: 'long', year: 'numeric' }`.
|
||
Kopfkommentar auf Deutsch (Muster clock-font-size.ts): Zweck, „quick-260916-htc“, Hinweis auf geteilte Nutzung durch Widget und Einstellungsfeld, Starttag-Regel für mehrtägige Termine.
|
||
3. **Tests** `calendar-month.test.ts` exakt nach `<behavior>`; Testdaten für `CalendarEvent` mit einer kleinen Fabrik `ev(id, start: Date, end: Date, extra?)` bauen (Felder id, sourceId 's1', title = id, start/end als `toISOString()`, allDay false). Kein DOM, kein Mock nötig. RED zuerst ausführen (Modul fehlt → Test rot), dann GREEN.
|
||
</action>
|
||
<verify>
|
||
<automated>cd /home/vicolab/projects/tessera-ctl; set -e; for f in apps/web/src/messages/de.json apps/web/src/messages/en.json; do for k in nothingSelected monthPrev monthNext monthToday upcomingTitle tooltipMore allDay configShowMonth configMaxEvents configMaxEventsNone configMaxEventsOne configMaxEventsMany configLookahead configLookaheadOption configSourcesHint configSourcesLink; do grep -q "\"$k\"" "$f"; done; done; node -e "const de=require('./apps/web/src/messages/de.json').widgets.calendar, en=require('./apps/web/src/messages/en.json').widgets.calendar; const need=['nothingSelected','monthPrev','monthNext','monthToday','upcomingTitle','tooltipMore','allDay','configShowMonth','configMaxEvents','configMaxEventsNone','configMaxEventsOne','configMaxEventsMany','configLookahead','configLookaheadOption','configSourcesHint','configSourcesLink']; for (const k of need) { if (typeof de[k]!=='string'||typeof en[k]!=='string') throw new Error('missing '+k); if (de[k]===en[k]) throw new Error('untranslated '+k); } if (de.nothingSelected!=='Nichts zum Anzeigen ausgewählt') throw new Error('nothingSelected'); if (de.configShowMonth!=='Monatsansicht anzeigen') throw new Error('configShowMonth'); if (de.configMaxEventsNone!=='Ausblenden') throw new Error('none'); if (!de.configMaxEventsMany.includes('{count}')||!en.configMaxEventsMany.includes('{count}')) throw new Error('count placeholder'); if (!de.configLookaheadOption.includes('{days}')||!en.configLookaheadOption.includes('{days}')) throw new Error('days placeholder'); if (de.tooltipMore!=='Weitere Termine vorhanden') throw new Error('tooltipMore'); if (de.emptyNoEvents!=='Keine anstehenden Termine') throw new Error('existing key changed'); const keys=Object.keys(de); if (keys[keys.indexOf('emptyNoEvents')+1]!=='nothingSelected') throw new Error('order'); console.log('I18N_OK')"; F=apps/web/src/components/dashboard/widgets/calendar-month.ts; test -f "$F"; for s in "export function resolveCalendarConfig" "export function buildCalendarDays" "export function computeFetchWindow" "export function selectUpcomingEvents" "export function groupEventsByDate" "export function gridStartFor" "export function formatEventDate" "export function formatMonthLabel" "export const CALENDAR_LOOKAHEAD_OPTIONS" "export const WEEKDAY_LABELS"; do grep -q "$s" "$F"; done; ! grep -q "from 'react'" "$F"; pnpm --filter @tessera/web exec vitest run src/components/dashboard/widgets/calendar-month.test.ts src/messages/umlaut-guard.spec.ts</automated>
|
||
</verify>
|
||
<done>16 neue Schlüssel in de.json und en.json (Reihenfolge direkt nach `emptyNoEvents`), Umlaut-Wächter 3/3 grün; `calendar-month.ts` exportiert alle genannten Funktionen/Konstanten ohne React-Import; `calendar-month.test.ts` mit mindestens 7 Tests grün.</done>
|
||
</task>
|
||
|
||
<task type="auto" tdd="true">
|
||
<name>Task 2: Kalender-Widget neu bauen (Monatsraster + Tooltip-Portal + Nächste Termine), Komponententest neu schreiben, Mindestgröße 6×8</name>
|
||
<files>apps/web/src/components/dashboard/widgets/calendar-widget.tsx, apps/web/src/components/dashboard/widgets/calendar-widget.test.tsx, apps/web/src/components/dashboard/widget-registry.tsx, apps/web/src/components/dashboard/widget-registry.test.tsx</files>
|
||
<read_first>
|
||
- apps/web/src/components/dashboard/widgets/calendar-widget.tsx (Bestand: Lade-/Quellen-Ablauf, 5-Minuten-Intervall, `data-testid="event-color-dot"` — Ablauf und Testid bleiben)
|
||
- apps/web/src/components/dashboard/widgets/clock-widget.tsx Z. 51 und calculator-widget.tsx Z. 315-332 (Container-Query-Klassen)
|
||
- apps/web/src/components/dashboard/widgets/widget-wrapper.tsx Z. 106 (Rumpf `@container-size h-full`, Karte `overflow-hidden`)
|
||
- apps/web/src/components/dashboard/widgets/link-widget.tsx Z. 197 (Klasse `widgetNoDrag` im Einsatz)
|
||
- user-files/personal-dashboard/src/app/page.tsx Z. 1892-1990 (Struktur der Vorlage) und user-files/dashboard.png (Zielbild, Kachel „CTL“)
|
||
- apps/web/src/components/dashboard/widget-registry.tsx Z. 44 und widget-registry.test.tsx Z. 56-70
|
||
</read_first>
|
||
<behavior>
|
||
calendar-widget.test.tsx (neu; `vi.mock('next-intl')` per Schlüssel-Map wie bisher, aber die Mock-Funktion nimmt `(key, values?)` und ersetzt `{name}`-Platzhalter aus `values`; Map enthält alle Schlüssel aus Task 1 in deutscher Fassung plus `calendar.loading`/`emptyNoSources`/`emptyNoEvents`; `vi.mock('@/lib/calendar-api')` wie bisher; `beforeEach`: `vi.useFakeTimers({ toFake: ['Date'] }); vi.setSystemTime(new Date(2026, 6, 15, 10, 0, 0));` Quellen-Mock mit einer sichtbaren Quelle; `afterEach`: `vi.useRealTimers(); cleanup();`):
|
||
- Test 1 Laden → „Laden...“ sichtbar; danach bei `fetchSources → []` erscheint „Keine Kalenderquellen konfiguriert“, `fetchEvents` wird NICHT aufgerufen.
|
||
- Test 2 Monatsraster: `config={{}}`, `fetchEvents → []` → nach dem Laden Text „Juli 2026“; Kopfzeile enthält Mo, Di, Mi, Do, Fr, Sa, So; 42 Elemente `data-testid="calendar-day"`; die Zelle mit `data-date="2026-07-15"` hat `data-today="true"` und Text „15“; Zelle `2026-06-29` hat `data-outside="true"`; alle Tageszellen und die drei Knöpfe tragen die Klasse `widgetNoDrag`; die Zelle für 15.07. hat KEINE Plakette. Unter dem Raster steht „Nächste Termine“ und (bei leerer Liste) „Keine anstehenden Termine“.
|
||
- Test 3 Plakette: Termine 20.07. 09:00 („Team Meeting“) und 20.07. 14:00 („Lunch“), 21.07. 10:00 („Review“) → Zelle `2026-07-20` enthält `data-testid="calendar-day-count"` mit Text „2“, Zelle `2026-07-21` Plakette „1“, Zelle `2026-07-22` keine Plakette.
|
||
- Test 4 Tooltip: `fireEvent.mouseEnter` auf Zelle `2026-07-20` → `screen.getByTestId('calendar-day-tooltip')` steht im `document.body`, enthält „09:00“, „Team Meeting“ und „Lunch“; `fireEvent.mouseLeave` → Tooltip weg. Mit 6 Terminen an einem Tag zeigt der Tooltip 5 Einträge und den Text „Weitere Termine vorhanden“.
|
||
- Test 5 Nächste Termine: 5 Termine zwischen 16.07. und 30.07. (einer davon mit `location: 'Raum 2'`), `config={{ maxEvents: 2 }}` → `within(getByTestId('calendar-upcoming')).getAllByRole('listitem')` hat Länge 2, in Start-Reihenfolge; jeder Eintrag hat einen `event-color-dot`; der Ort „Raum 2“ ist sichtbar, wenn der betroffene Termin unter den ersten zwei ist; die Datumzeile matcht /\d{2}\.\d{2}\./.
|
||
- Test 6 showMonth=false: `config={{ showMonth: false, maxEvents: 3 }}` → `queryByTestId('calendar-month')` null, `getByTestId('calendar-upcoming')` vorhanden. `config={{ showMonth: false, maxEvents: 0 }}` → Text „Nichts zum Anzeigen ausgewählt“, kein Raster, keine Liste.
|
||
- Test 7 Ladefenster: `config={{}}` → `mockFetchEvents` genau einmal aufgerufen mit `(new Date(2026, 5, 29).toISOString(), new Date(2026, 7, 14).toISOString())`; `config={{ lookaheadDays: 90 }}` → zweites Argument `new Date(2026, 9, 13).toISOString()`.
|
||
- Test 8 Blättern: Klick auf „Weiter“ → Text „August 2026“, `fetchEvents` erneut aufgerufen mit `(new Date(2026, 6, 27).toISOString(), new Date(2026, 8, 7).toISOString())`; Klick auf „August 2026“ (Monatsknopf) → wieder „Juli 2026“; Klick auf „Zurück“ von Juli → „Juni 2026“.
|
||
widget-registry.test.tsx Test A: Kalender-Zeile auf `{ minW: 6, minH: 8, defaultW: 8, defaultH: 12 }` ändern, Kommentar um einen Satz zu quick-260916-htc ergänzen (Monatsraster braucht Breite für 7 Spalten und Höhe für Nav + Kopf + 6 Zeilen + Liste).
|
||
</behavior>
|
||
<action>
|
||
1. **Registry.** `WIDGET_CONSTRAINTS.calendar` in widget-registry.tsx auf `{ minW: 6, minH: 8, defaultW: 8, defaultH: 12 }` setzen, mit Kommentarzeile „quick-260916-htc: Monatsraster …“. Test A in widget-registry.test.tsx entsprechend anpassen (siehe behavior). Kein Eingriff in dashboard-grid.tsx: `applyConstraintMinima` hebt gespeicherte 3×3-Layouts beim nächsten Laden auf 6×8 an (im SUMMARY erwähnen).
|
||
2. **Widget** `calendar-widget.tsx` komplett neu schreiben (`'use client'`, Export `CalendarWidget({ config }: WidgetProps)` bleibt — das Wiring über `wireCalendarWidget` ändert sich nicht). Importe: `useCallback, useEffect, useMemo, useRef, useState` aus react, `createPortal` aus react-dom, `useTranslations` aus next-intl, `fetchEvents, fetchSources` + `type CalendarEvent` aus `@/lib/calendar-api`, alles Nötige aus `./calendar-month`.
|
||
Zustand: `events: CalendarEvent[]`, `hasSources: boolean | null`, `isLoading`, `monthDate: Date` (Initial `new Date(y, m, 1)` von heute), `hover: { key: string; rect: { top: number; left: number; bottom: number; right: number } } | null`. Konfiguration per `resolveCalendarConfig(config)` in einem `useMemo` über `config.showMonth, config.maxEvents, config.lookaheadDays`.
|
||
Laden: ein `useEffect` mit Abhängigkeiten `[monthDate.getTime(), lookaheadDays]`, Ablauf wie bisher (cancelled-Flag, `fetchSources` zuerst → bei 0 Quellen `hasSources=false`, `events=[]`, fertig; sonst `computeFetchWindow(monthDate, lookaheadDays)` und `fetchEvents(from.toISOString(), to.toISOString())` — IMMER mit beiden Argumenten; Fehler → leere Liste; 5-Minuten-Intervall `300_000` im selben Effekt, Cleanup räumt Intervall und setzt cancelled). Beim Monatswechsel `isLoading` NICHT wieder auf true setzen (kein Flackern des Rasters), nur die Terminliste austauschen.
|
||
Navigation: `showPrev`/`showNext` (Monat ±1 via `new Date(y, m ± 1, 1)`), `showToday` (heutiger Monat); alle drei setzen `hover` auf null.
|
||
Abgeleitet: `eventsByDate = groupEventsByDate(events)`, `days = buildCalendarDays(monthDate, eventsByDate)`, `upcoming = selectUpcomingEvents(events, lookaheadDays, maxEvents)`.
|
||
Render-Reihenfolge:
|
||
a) `isLoading` → bisheriger Lade-Block (`t('calendar.loading')`). b) `hasSources === false` → bisheriger Block `emptyNoSources`. c) `!showMonth && maxEvents === 0` → derselbe zentrierte gedämpfte Block mit `t('calendar.nothingSelected')`.
|
||
d) Sonst Wurzel `<div className="flex h-full flex-col gap-1 overflow-hidden p-1.5">`:
|
||
- Wenn `showMonth`: `<div data-testid="calendar-month" className="flex shrink-0 flex-col gap-1">` mit
|
||
· Nav-Zeile `<div className="grid grid-cols-[1fr_1.4fr_1fr] gap-1">`: drei `<button type="button">` mit gemeinsamer Klasse `widgetNoDrag rounded border border-border bg-muted/50 px-1 py-[clamp(2px,0.8cqh,6px)] text-[clamp(10px,2.6cqw,13px)] leading-none text-foreground hover:bg-muted`; links `t('calendar.monthPrev')` (onClick showPrev), Mitte `formatMonthLabel(monthDate)` mit zusätzlich `truncate font-semibold` und `title={t('calendar.monthToday')}` (KEIN aria-label, damit der zugängliche Name der Monatstext bleibt und der Test per `getByRole('button', { name: 'August 2026' })` klicken kann) (onClick showToday); rechts `t('calendar.monthNext')` (onClick showNext).
|
||
· Wochentagskopf `<div className="grid grid-cols-7 gap-px text-center text-[clamp(9px,2.2cqw,12px)] font-medium text-muted-foreground">` aus `WEEKDAY_LABELS`.
|
||
· Raster `<div className="grid grid-cols-7 gap-px">` (keine ARIA-Grid-Rollen, schlichte divs) mit 42 Zellen `<div data-testid="calendar-day" data-date={day.key} data-today={day.isToday || undefined} data-outside={!day.inCurrentMonth || undefined} className={…} onMouseEnter={(e) => day.events.length > 0 && setHover({ key: day.key, rect: e.currentTarget.getBoundingClientRect() })} onMouseLeave={() => setHover(null)}>`; Basis-Klasse `widgetNoDrag relative flex min-h-[clamp(16px,5.5cqh,40px)] items-start rounded bg-muted/50 px-1 py-0.5 text-[clamp(9px,2.4cqw,13px)] leading-none`, plus `text-muted-foreground/60` wenn außerhalb, sonst `text-foreground`; plus `ring-1 ring-primary font-semibold text-primary` wenn heute; plus `cursor-default hover:bg-muted` wenn Termine. Inhalt: `<span>{day.date.getDate()}</span>` und bei Terminen `<span data-testid="calendar-day-count" className="absolute bottom-px right-px flex h-[clamp(10px,3cqw,16px)] min-w-[clamp(10px,3cqw,16px)] items-center justify-center rounded-full bg-primary px-0.5 text-[clamp(7px,1.8cqw,10px)] font-semibold leading-none text-primary-foreground">{day.events.length}</span>`.
|
||
- Wenn `maxEvents > 0`: `<section className="flex min-h-0 flex-1 flex-col gap-1">` mit `<h3 className="shrink-0 text-[clamp(10px,2.6cqw,13px)] font-semibold text-foreground">{t('calendar.upcomingTitle')}</h3>` und entweder `<p className="text-[clamp(9px,2.2cqw,12px)] text-muted-foreground">{t('calendar.emptyNoEvents')}</p>` (leer) oder `<ul data-testid="calendar-upcoming" className="min-h-0 flex-1 space-y-1 overflow-y-auto">` mit `<li key={event.id} className="flex items-start gap-2 rounded bg-muted/50 px-2 py-1">`: Farbpunkt `<span data-testid="event-color-dot" className="mt-1 h-2 w-2 shrink-0 rounded-full" style={{ backgroundColor: event.color || 'var(--muted-foreground)' }} aria-hidden="true" />`, dann `<div className="min-w-0 flex-1">` mit `<p className="truncate text-[clamp(9px,2.2cqw,12px)] text-muted-foreground">{formatEventDate(event)}</p>`, `<p className="truncate text-[clamp(10px,2.5cqw,14px)] font-semibold text-foreground">{event.title}</p>`, bei `event.location` `<p className="truncate text-[clamp(9px,2.1cqw,12px)] text-muted-foreground">{event.location}</p>`.
|
||
- Wenn `showMonth` und `maxEvents === 0`: nur das Raster, kein Block.
|
||
- Tooltip: nur wenn `hover !== null && typeof document !== 'undefined'`; Termine der Zelle aus `eventsByDate.get(hover.key) ?? []`; `createPortal(<div data-testid="calendar-day-tooltip" role="tooltip" className="pointer-events-none fixed z-50 w-60 rounded border border-border bg-card p-2 text-xs text-foreground shadow-lg" style={{ top: hover.rect.bottom + 4, left: Math.max(4, Math.min(hover.rect.left, window.innerWidth - 244)) }}>…</div>, document.body)`; Inhalt: bis zu 5 Zeilen `<div className="flex gap-2"><span className="shrink-0 tabular-nums text-muted-foreground">{event.allDay ? t('calendar.allDay') : formatEventTime(event.start)}</span><span className="truncate">{event.title}</span></div>` und bei mehr als 5 `<div className="mt-1 text-muted-foreground">{t('calendar.tooltipMore')}</div>`.
|
||
Kopfkommentar auf Deutsch aktualisieren: Zweck, quick-260916-htc, Vorlage personal-dashboard, warum Portal (overflow-hidden der Karte), warum Tagesgrenzen (Cache-Schlüssel), Starttag-Regel; die Hinweise „NEVER fetches external calendars directly“ und 5-Minuten-TTL beibehalten.
|
||
3. **Test** `calendar-widget.test.tsx` komplett neu nach `<behavior>` (RED zuerst gegen das alte Widget ausführen — mindestens Tests 2-8 müssen rot sein — dann GREEN). Hilfsfunktion `ev(id, start: Date, end: Date, extra?)` wie in Task 1; Zellen per `document.querySelector('[data-date="2026-07-20"]')` bzw. `screen.getByTestId('calendar-month').querySelector(...)` holen; `within` aus `@testing-library/react`. Nach jedem Render mit Quellen `await waitFor(() => expect(mockFetchEvents).toHaveBeenCalled())` bzw. auf einen sichtbaren Text warten, bevor Zellen abgefragt werden.
|
||
</action>
|
||
<verify>
|
||
<automated>cd /home/vicolab/projects/tessera-ctl; set -e; F=apps/web/src/components/dashboard/widgets/calendar-widget.tsx; grep -q "createPortal" "$F"; grep -q "from './calendar-month'" "$F"; ! grep -q "fetchEvents()" "$F"; grep -q "computeFetchWindow" "$F"; grep -q "widgetNoDrag" "$F"; grep -q 'data-testid="calendar-day-tooltip"' "$F"; grep -q 'data-testid="calendar-day-count"' "$F"; grep -q 'data-testid="calendar-upcoming"' "$F"; grep -q 'data-testid="event-color-dot"' "$F"; grep -q "300_000" "$F"; grep -q "cqh" "$F"; grep -q "cqw" "$F"; grep -q "calendar: { minW: 6, minH: 8, defaultW: 8, defaultH: 12 }" apps/web/src/components/dashboard/widget-registry.tsx; grep -q "calendar: { minW: 6, minH: 8, defaultW: 8, defaultH: 12 }" apps/web/src/components/dashboard/widget-registry.test.tsx; ! grep -q "calendar: { minW: 3, minH: 3" apps/web/src/components/dashboard/widget-registry.tsx; pnpm --filter @tessera/web exec vitest run src/components/dashboard/widgets/calendar-widget.test.tsx src/components/dashboard/widget-registry.test.tsx src/components/dashboard/dashboard-grid.test.tsx; pnpm --filter @tessera/web type-check</automated>
|
||
</verify>
|
||
<done>Neues Widget rendert Monatsraster (42 Zellen, heute markiert, Plaketten, Portal-Tooltip) und „Nächste Termine“ nach Konfiguration; `fetchEvents` bekommt immer zwei Tagesgrenzen-ISO-Strings; `calendar-widget.test.tsx` mit mindestens 8 Tests grün; Registry 6×8 an beiden Stellen; dashboard-grid-Tests weiter grün; Type-Check Exit 0.</done>
|
||
</task>
|
||
|
||
<task type="auto" tdd="true">
|
||
<name>Task 3: CalendarConfig im Einstellungsfeld + Paneltests, Changelog, Anwenderhandbuch, Gesamtlauf</name>
|
||
<files>apps/web/src/components/settings/widget-settings-panel.tsx, apps/web/src/components/settings/widget-settings-panel.test.tsx, CHANGELOG.md, docs/anleitung-anwender.md</files>
|
||
<read_first>
|
||
- apps/web/src/components/settings/widget-settings-panel.tsx Z. 178-192 (Kalender-Zweig, wird ersetzt) und Z. 209-330 (`ClockConfig`, Muster für Label/Select/Kontrollkästchen-Klassen)
|
||
- apps/web/src/components/settings/widget-settings-panel.test.tsx Z. 15-24 (next-intl-Mock über de.json — muss `values` interpolieren) und Z. 36-46 (Render-Helfer)
|
||
- apps/web/src/components/dashboard/widgets/calendar-month.ts (aus Task 1: `resolveCalendarConfig`, `CALENDAR_LOOKAHEAD_OPTIONS`, `CALENDAR_MAX_EVENTS_LIMIT`)
|
||
- CHANGELOG.md Z. 1-12; docs/anleitung-anwender.md Z. 72-83 und Z. 153-155
|
||
</read_first>
|
||
<behavior>
|
||
widget-settings-panel.test.tsx — neues `describe('WidgetSettingsPanel — Kalender-Einstellungen (quick-260916-htc)')`, Widget `{ id: 'k1', widgetType: 'calendar', config: {} }`, aufklappen per `fireEvent.click(screen.getByRole('button', { name: /Kalender #1/ }))`, Texte aus der echten de.json (`de.widgets.calendar`):
|
||
- Test 5: Kontrollkästchen `getByLabelText(cal.configShowMonth)` ist `checked`; Select `getByLabelText(cal.configMaxEvents)` hat `value` '3' und 11 Optionen mit Texten „Ausblenden“, „1 Termin“, „2 Termine“ … „10 Termine“; Select `getByLabelText(cal.configLookahead)` hat `value` '30' und 5 Optionen „Nächste 7 Tage“, „Nächste 14 Tage“, „Nächste 30 Tage“, „Nächste 60 Tage“, „Nächste 90 Tage“; Text `cal.configSourcesHint` sichtbar und ein Link mit Text `cal.configSourcesLink` und `href="/settings/dashboard/calendar"`; der englische Satz mit „managed under“ kommt nirgends vor (`screen.queryByText(/managed under/)` null).
|
||
- Test 6: `fireEvent.change(select Anzahl, { target: { value: '5' } })` → `updateWidgetConfig` mit `('k1', { maxEvents: 5 })` und `onWidgetUpdate` mit denselben Argumenten; danach `fireEvent.change(select Zeitraum, '14')` → `('k1', { lookaheadDays: 14 })`; `fireEvent.click(Kontrollkästchen)` → `('k1', { showMonth: false })`. Jeder Aufruf enthält NUR das geänderte Feld.
|
||
- Test 7: `config: { showMonth: false, maxEvents: 7, lookaheadDays: 60 }` → Kontrollkästchen nicht gesetzt, Selects '7' und '60'. `config: { maxEvents: 42, lookaheadDays: 45 }` → Selects '10' und '30' (Klemmung über `resolveCalendarConfig`).
|
||
Der bestehende Mock von `next-intl` (Z. 15-24) wird so erweitert, dass `useTranslations(ns)(key, values?)` in der gefundenen Zeichenkette jedes `{name}` durch `String(values[name])` ersetzt; die vier Uhr-Tests bleiben unverändert grün.
|
||
</behavior>
|
||
<action>
|
||
1. **Panel.** In `widget-settings-panel.tsx` den Kalender-Zweig (der `<div className="text-sm text-muted-foreground">` mit dem englischen Absatz und dem `Link`) durch `<CalendarConfig config={widget.config} onChange={(cfg) => handleConfigChange(widget.id, cfg)} />` ersetzen; Kommentar „Calendar config (quick-260916-htc)“. Unten bei den typ-spezifischen Formularen eine Funktion `CalendarConfig({ config, onChange })` mit derselben Signatur wie `ClockConfig` ergänzen: `const t = useTranslations('widgets'); const { showMonth, maxEvents, lookaheadDays } = resolveCalendarConfig(config);` (Import aus `@/components/dashboard/widgets/calendar-month`, zusätzlich `CALENDAR_LOOKAHEAD_OPTIONS`, `CALENDAR_MAX_EVENTS_LIMIT`). Aufbau `<div className="space-y-4">`:
|
||
- Kontrollkästchen-Zeile wie „Show date toggle“ in ClockConfig: `<input id="calendar-show-month" type="checkbox" className="h-4 w-4 rounded border-border text-primary" checked={showMonth} onChange={(e) => onChange({ showMonth: e.target.checked })} />` + `<label htmlFor="calendar-show-month" className="text-sm text-foreground">{t('calendar.configShowMonth')}</label>`.
|
||
- Select „Anzahl Termine“: `<label htmlFor="calendar-max-events" className="mb-1 block text-sm text-foreground">{t('calendar.configMaxEvents')}</label>` + `<select id="calendar-max-events" className="h-9 w-full max-w-xs rounded border border-border bg-background px-3 text-sm text-foreground" value={String(maxEvents)} onChange={(e) => onChange({ maxEvents: Number(e.target.value) })}>` mit Optionen für 0..CALENDAR_MAX_EVENTS_LIMIT: 0 → `t('calendar.configMaxEventsNone')`, 1 → `t('calendar.configMaxEventsOne')`, n ≥ 2 → `t('calendar.configMaxEventsMany', { count: n })`; `value={String(n)}`.
|
||
- Select „Zeitraum“: analog `id="calendar-lookahead"`, `value={String(lookaheadDays)}`, `onChange={(e) => onChange({ lookaheadDays: Number(e.target.value) })}`, Optionen aus `CALENDAR_LOOKAHEAD_OPTIONS` mit Text `t('calendar.configLookaheadOption', { days })`.
|
||
- Hinweiszeile `<p className="text-xs text-muted-foreground">{t('calendar.configSourcesHint')}{' '}<Link href="/settings/dashboard/calendar" className="text-primary underline hover:text-primary/90">{t('calendar.configSourcesLink')}</Link></p>`.
|
||
Der vorhandene `Link`-Import bleibt in Gebrauch; kein englischer Fließtext mehr im Kalender-Zweig.
|
||
2. **Paneltest.** Mock (Z. 15-24) erweitern: `useTranslations: (ns?) => (key: string, values?: Record<string, unknown>) => { const raw = lookup(...) ?? key; return values ? raw.replace(/\{(\w+)\}/g, (_, n) => String(values[n] ?? '')) : raw; }`. Neues describe mit Tests 5-7 nach `<behavior>`; `const cal = (de as { widgets: { calendar: Record<string, string> } }).widgets.calendar;`. RED zuerst (alter Kalender-Zweig → Tests rot), dann GREEN.
|
||
3. **Changelog.** In `CHANGELOG.md` unter `## Unveröffentlicht` → `### Geändert` als ZWEITEN Aufzählungspunkt (nach dem bestehenden „Kalender-Einstellungen: Das Feld …“) einfügen: `- Kalender-Widget neu gestaltet: Monatsübersicht mit Terminanzahl je Tag (Termine beim Überfahren sichtbar) und darunter die nächsten Termine. In den Widget-Einstellungen lässt sich die Monatsansicht ein-/ausblenden sowie Anzahl und Zeitraum der angezeigten Termine wählen.` Keine weiteren Abschnitte anlegen, `## 1.1.0 – 2026-09-16` unangetastet.
|
||
4. **Handbuch.** `docs/anleitung-anwender.md`: Tabellenzeile „| Kalender | … |“ (Z. 76) ersetzen durch: `| Kalender | Monatsübersicht mit der Anzahl der Termine je Tag (die Termine eines Tages erscheinen, wenn Sie mit der Maus darüberfahren) und darunter die nächsten Termine aus Ihren verbundenen Kalenderquellen. Ob die Monatsansicht erscheint, wie viele Termine und welcher Zeitraum gezeigt werden, stellen Sie unter Einstellungen > Dashboard > Widgets ein |`. Absatz „**Dashboard > Widgets:**“ (Z. 153) am Satzende ergänzen zu: „… zum Beispiel eigene Suchanbieter für die Suchleiste oder beim Kalender die Monatsansicht (ein/aus), die Anzahl der angezeigten Termine (bis zu zehn, oder ausgeblendet) und den Zeitraum (7 bis 90 Tage).“ Absatz „**Dashboard > Kalender:**“ unverändert.
|
||
5. **Gesamtlauf.** `pnpm --filter @tessera/web type-check` und `pnpm --filter @tessera/web exec vitest run` (alle Dateien) ausführen; Zählung im SUMMARY festhalten (erwartet 51 Dateien, ≥ 328 Tests).
|
||
</action>
|
||
<verify>
|
||
<automated>cd /home/vicolab/projects/tessera-ctl; set -e; F=apps/web/src/components/settings/widget-settings-panel.tsx; ! grep -q "Calendar sources are managed under" "$F"; grep -q "function CalendarConfig" "$F"; grep -q "<CalendarConfig" "$F"; grep -q "resolveCalendarConfig" "$F"; grep -q 'id="calendar-show-month"' "$F"; grep -q 'id="calendar-max-events"' "$F"; grep -q 'id="calendar-lookahead"' "$F"; grep -q 'href="/settings/dashboard/calendar"' "$F"; for k in configShowMonth configMaxEvents configMaxEventsNone configMaxEventsOne configMaxEventsMany configLookahead configLookaheadOption configSourcesHint configSourcesLink; do grep -q "calendar.$k" "$F"; done; SEC="$(awk '/^## Unveröffentlicht$/{f=1;next} /^## /{if(f)exit} f' CHANGELOG.md)"; printf '%s\n' "$SEC" | grep -q '^### Geändert$'; printf '%s\n' "$SEC" | grep -q '^- Kalender-Widget neu gestaltet: Monatsübersicht'; test "$(printf '%s\n' "$SEC" | grep -c '^- ')" -ge 2; grep -q '^## Unveröffentlicht$' CHANGELOG.md; grep -q '^## 1.1.0 – 2026-09-16$' CHANGELOG.md; grep -q '^| Kalender | Monatsübersicht' docs/anleitung-anwender.md; grep -q 'beim Kalender die Monatsansicht' docs/anleitung-anwender.md; grep -q '^\*\*Dashboard > Kalender:\*\*' docs/anleitung-anwender.md; pnpm --filter @tessera/web type-check; OUT="$(pnpm --filter @tessera/web exec vitest run 2>&1)"; printf '%s\n' "$OUT" | tail -12; printf '%s\n' "$OUT" | grep -Eq 'Test Files +51 passed'; printf '%s\n' "$OUT" | grep -Eq 'Tests +[0-9]+ passed'; ! printf '%s\n' "$OUT" | grep -Eq '[0-9]+ failed'</automated>
|
||
</verify>
|
||
<done>Kalender-Zweig zeigt `CalendarConfig` mit drei Feldern und übersetzter Link-Zeile, keine englische Fließtext-Zeile mehr; Paneltests 7/7 grün (4 Uhr + 3 Kalender); Changelog-Eintrag als zweiter Punkt unter Unveröffentlicht/Geändert; Handbuch-Zeile und -Absatz ergänzt; Type-Check Exit 0; Gesamtlauf 51 Testdateien grün, keine Fehlschläge.</done>
|
||
</task>
|
||
|
||
</tasks>
|
||
|
||
<threat_model>
|
||
## Trust Boundaries
|
||
|
||
| Boundary | Description |
|
||
|----------|-------------|
|
||
| API → Widget/Panel (`config` JSON) | Widget-Konfiguration kommt als beliebiges JSON aus der Datenbank (per PATCH vom Anwender setzbar) |
|
||
| API → Widget (Termindaten) | Titel/Ort/Beschreibung stammen aus fremden Kalenderquellen (Exchange/CalDAV/ICS) |
|
||
| Widget → document.body (Portal) | Tooltip wird außerhalb der Karte in den Body gerendert |
|
||
|
||
## STRIDE Threat Register
|
||
|
||
| Threat ID | Category | Component | Severity | Disposition | Mitigation Plan |
|
||
|-----------|----------|-----------|----------|-------------|-----------------|
|
||
| T-HTC-01 | Tampering | `resolveCalendarConfig` (calendar-month.ts) | low | mitigate | Alle drei Werte werden geklemmt/auf Vorgaben zurückgesetzt (maxEvents 0..10, lookaheadDays nur 7/14/30/60/90, showMonth nur literal false); Widget und Panel nutzen dieselbe Funktion; Unit-Test 3 in Task 1 pinnt die Grenzen |
|
||
| T-HTC-02 | Information Disclosure / XSS | Tooltip-Portal + Terminliste | low | mitigate | Ausschließlich React-Textknoten (`{event.title}`), kein `dangerouslySetInnerHTML`; Tooltip zeigt nur Termine des eingeloggten Anwenders (Backend filtert per userId/tenant, unverändert) |
|
||
| T-HTC-03 | Denial of Service | `fetchEvents`-Fenster | low | mitigate | Fenster ist auf 42 Rastertage bzw. maximal 90 Tage Vorschau begrenzt; Tagesgrenzen halten den Backend-Cache-Schlüssel stabil, sodass der 5-Minuten-Refresh aus dem Cache bedient wird statt die Quellen neu abzufragen |
|
||
| T-HTC-SC | Tampering | npm-Installationen | low | accept | Dieser Plan installiert keine Pakete (kein `pnpm add`); `react-dom` (createPortal) ist bereits Abhängigkeit von apps/web; Lockfile bleibt unverändert |
|
||
</threat_model>
|
||
|
||
<verification>
|
||
1. `pnpm --filter @tessera/web type-check` → Exit 0.
|
||
2. `pnpm --filter @tessera/web exec vitest run` → 51 Testdateien grün (50 Bestand + `calendar-month.test.ts`), mindestens 328 Tests, keine Fehlschläge; darin `umlaut-guard.spec.ts` 3/3, `changelog.test.ts` grün, `widget-registry.test.tsx` und `dashboard-grid.test.tsx` grün.
|
||
3. `git diff --stat` zeigt genau die 12 Dateien aus `files_modified`; `biome.json`, `pnpm-lock.yaml`, `dashboard-grid.tsx`, `calendar-api.ts` unverändert.
|
||
4. Kein `git push`, kein Docker, kein Testserver.
|
||
</verification>
|
||
|
||
<success_criteria>
|
||
- Widget: Monatsraster (Nav-Zeile, Wochentagskopf, 42 Zellen ab Montag, gedämpfte Fremdmonatstage, heutiger Tag hervorgehoben, Zähl-Plakette, Portal-Tooltip mit bis zu 5 Einträgen + Hinweis) und Block „Nächste Termine“ (Datum/Uhrzeit, Titel fett, Ort, Farbpunkt) — Struktur wie im Vorbild, Farben aus den bestehenden Tokens, Container-Query-Skalierung.
|
||
- Einstellungen: drei Felder (showMonth-Kontrollkästchen, maxEvents-Auswahl 0..10, lookaheadDays-Auswahl 7/14/30/60/90) plus übersetzte Link-Zeile, Speichern per partiellem `updateWidgetConfig`.
|
||
- Ein `fetchEvents(from, to)`-Aufruf je Ladevorgang mit Tagesgrenzen; Neuladen bei Monatswechsel; 5-Minuten-Intervall bleibt; Zustände Laden / keine Quellen / „Nichts zum Anzeigen ausgewählt“.
|
||
- Mindestgröße Kalender 6×8, Vorgabe 8×12; Registry-Test angepasst.
|
||
- Changelog und Handbuch aktualisiert; alle Gates grün.
|
||
</success_criteria>
|
||
|
||
<output>
|
||
Nach Abschluss `.planning/quick/260916-htc-kalender-widget-nach-vorbild-personal-da/260916-htc-SUMMARY.md` anlegen. Darin erwähnen: (a) mehrtägige/ganztägige Termine werden im Raster nur am Starttag gezählt, (b) gespeicherte 3×3-Kalender-Layouts werden durch `applyConstraintMinima` automatisch auf 6×8 angehoben, (c) das Ladefenster umfasst immer das 42-Tage-Raster, auch wenn die Monatsansicht ausgeblendet ist (dann ist der Monat immer der heutige), (d) gemessene Testzahlen vorher/nachher.
|
||
</output>
|