feat(05-04): calendar API client, calendar widget, registry wiring

- calendar-api.ts: fetchSources/addSource/updateSource/deleteSource/testSource/fetchEvents with credentials:'include' - calendar-widget.tsx: upcoming-events list with source color dots, three empty states (no sources/no events/loading) - widget-registry.tsx: wireCalendarWidget() replaces placeholder with real CalendarWidget - page.tsx: wires CalendarWidget into registry on mount - i18n: added calendar.loading key to de.json and en.json Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-24 15:23:27 +02:00
parent 2d8699e45c
commit c0f2f4ca51
6 changed files with 355 additions and 1 deletions
@@ -0,0 +1,162 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { useTranslations } from 'next-intl';
+import type { WidgetProps } from '../widget-registry';
+import { fetchEvents, fetchSources } from '@/lib/calendar-api';
+import type { CalendarEvent } from '@/lib/calendar-api';
+
+/**
+ * Calendar widget (DASH-05, D-10 read-only).
+ *
+ * Shows upcoming events aggregated from visible calendar sources.
+ * Three states per UI-SPEC:
+ * 1. No sources configured -> t('widgets.calendar.emptyNoSources')
+ * 2. Sources but no events -> t('widgets.calendar.emptyNoEvents')
+ * 3. Events -> upcoming-events list with time, title, source color dot
+ *
+ * Refreshes every 5 minutes to match the backend cache TTL.
+ * NEVER fetches external calendars directly (RESEARCH anti-pattern).
+ */
+export function CalendarWidget({ config }: WidgetProps) {
+  const t = useTranslations('widgets');
+  const [events, setEvents] = useState<CalendarEvent[]>([]);
+  const [hasSources, setHasSources] = useState<boolean | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | undefined>(undefined);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function loadData() {
+      try {
+        // Check if user has any sources configured
+        const sources = await fetchSources();
+        if (cancelled) return;
+
+        if (sources.length === 0) {
+          setHasSources(false);
+          setEvents([]);
+          setIsLoading(false);
+          return;
+        }
+
+        setHasSources(true);
+
+        // Fetch aggregated events from visible sources
+        const eventData = await fetchEvents();
+        if (cancelled) return;
+        setEvents(eventData);
+      } catch {
+        // Silent fail — show empty state
+        if (!cancelled) {
+          setEvents([]);
+        }
+      } finally {
+        if (!cancelled) {
+          setIsLoading(false);
+        }
+      }
+    }
+
+    loadData();
+
+    // Refresh every 5 minutes (300000ms) to match backend cache TTL
+    intervalRef.current = setInterval(() => {
+      loadData();
+    }, 300_000);
+
+    return () => {
+      cancelled = true;
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, []);
+
+  // Loading state
+  if (isLoading) {
+    return (
+      <div className="flex h-full items-center justify-center p-4">
+        <span className="text-sm text-muted-foreground">
+          {t('calendar.loading')}
+        </span>
+      </div>
+    );
+  }
+
+  // No sources configured
+  if (hasSources === false) {
+    return (
+      <div className="flex h-full items-center justify-center p-4">
+        <span className="text-sm text-muted-foreground">
+          {t('calendar.emptyNoSources')}
+        </span>
+      </div>
+    );
+  }
+
+  // Sources exist but no events
+  if (events.length === 0) {
+    return (
+      <div className="flex h-full items-center justify-center p-4">
+        <span className="text-sm text-muted-foreground">
+          {t('calendar.emptyNoEvents')}
+        </span>
+      </div>
+    );
+  }
+
+  // Events list
+  return (
+    <div className="flex h-full flex-col overflow-y-auto p-3">
+      <ul className="space-y-2">
+        {events.map((event) => (
+          <li
+            key={event.id}
+            className="flex items-start gap-2 rounded px-2 py-1.5 text-sm hover:bg-muted/50"
+          >
+            {/* Source color dot (8px, UI-SPEC) */}
+            <span
+              data-testid="event-color-dot"
+              className="mt-1.5 h-2 w-2 shrink-0 rounded-full"
+              style={{ backgroundColor: event.color || 'var(--muted-foreground)' }}
+              aria-hidden="true"
+            />
+            <div className="flex-1 min-w-0">
+              <p className="truncate font-medium text-foreground">
+                {event.title}
+              </p>
+              <p className="text-xs text-muted-foreground">
+                {formatEventTime(event)}
+              </p>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+/**
+ * Format event time using locale-aware Intl.DateTimeFormat.
+ * All-day events show only the date; timed events show time range.
+ */
+function formatEventTime(event: CalendarEvent): string {
+  const start = new Date(event.start);
+  const end = new Date(event.end);
+
+  if (event.allDay) {
+    return new Intl.DateTimeFormat('de-DE', {
+      day: '2-digit',
+      month: 'short',
+    }).format(start);
+  }
+
+  const timeFormatter = new Intl.DateTimeFormat('de-DE', {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+
+  return `${timeFormatter.format(start)} – ${timeFormatter.format(end)}`;
+}