Rewrite the calendar frontend in Next.js

Replaces the Angular 18 app with Next.js 16 / React 19 / Tailwind 4 / shadcn, the same stack and design system as nachklang-feedback, planned in docs/rewrite-plan.md. - Admin: all calendars in one mobile-friendly list (month groups, calendar chips, Kommend/Vergangen/Alle, search, sort, filters in the URL), an edit sheet for create/edit/duplicate/delete, publish confirmation, and an "Abonnieren" dialog with subscription links for every calendar. - Public landing page: subscribe links from env instead of hardcoded, plus the next public events, server-rendered and revalidated every 5 minutes. - All times handled explicitly as Europe/Berlin; whole-day events stored as 00:00-23:59. Fixes carried over from the Angular app: the move dialog leaking a cancelled calendar change, saves that looked saved when they failed, in-place Date mutation, and duplicated calendar-id mappings. - Same shared-session auth as before (proxy.ts gate, /admin/me, 401 vs 403). - 112 Vitest tests over lib/; docs in docs/ (architecture, features, gotchas, API wish list, deployment). Needs the API branch feature/calendar-ical-escaping-subscriptions deployed first (GET /calendar/events/subscriptions). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-28 22:15:59 +02:00
1 parent f82255961b
commit 0cda40f85e
@@ -0,0 +1,63 @@
+"use client";
+
+import { CircleAlertIcon, LoaderCircleIcon } from "lucide-react";
+import type { CalendarLoad } from "@/components/admin/useEvents";
+import { CALENDARS } from "@/lib/calendars";
+import { cn } from "@/lib/utils";
+
+/**
+ * One toggle per calendar. A row that scrolls sideways on phones rather than
+ * wrapping into three lines of chrome above the list; wraps on wider screens.
+ */
+export function CalendarChips({
+  selected,
+  counts,
+  loads,
+  onToggle,
+}: {
+  selected: readonly number[];
+  counts: Record<number, number>;
+  loads: Record<number, CalendarLoad>;
+  onToggle: (calendarId: number) => void;
+}) {
+  return (
+    <div
+      className="-mx-4 flex gap-2 overflow-x-auto px-4 pb-1 [scrollbar-width:none] sm:mx-0 sm:flex-wrap sm:overflow-visible sm:px-0 [&::-webkit-scrollbar]:hidden"
+      role="group"
+      aria-label="Kalender"
+    >
+      {CALENDARS.map((calendar) => {
+        const on = selected.includes(calendar.id);
+        const load = loads[calendar.id];
+        return (
+          <button
+            key={calendar.id}
+            type="button"
+            aria-pressed={on}
+            onClick={() => onToggle(calendar.id)}
+            title={load?.status === "error" ? `${calendar.label} konnte nicht geladen werden: ${load.message}` : undefined}
+            className={cn(
+              "inline-flex h-8 shrink-0 items-center gap-2 rounded-full border px-3 text-sm transition-colors outline-none focus-visible:ring-3 focus-visible:ring-ring/30",
+              on
+                ? "border-foreground/15 bg-foreground/[0.04] font-medium text-foreground"
+                : "border-border text-muted-foreground hover:bg-muted",
+            )}
+          >
+            <span
+              aria-hidden
+              className={cn("size-2.5 rounded-full", on ? calendar.dotClass : "ring-1 ring-muted-foreground/50 ring-inset")}
+            />
+            {calendar.label}
+            {load?.status === "loading" ? (
+              <LoaderCircleIcon aria-label="lädt" className="size-3.5 animate-spin text-muted-foreground" />
+            ) : load?.status === "error" ? (
+              <CircleAlertIcon aria-label="Fehler" className="size-3.5 text-destructive" />
+            ) : (
+              <span className="text-xs text-muted-foreground tabular-nums">{counts[calendar.id] ?? 0}</span>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}