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,105 @@
+"use client";
+
+import { LoaderCircleIcon, MapPinIcon, RepeatIcon, SendIcon } from "lucide-react";
+import { CalendarBadge } from "@/components/admin/CalendarBadge";
+import { Button } from "@/components/ui/button";
+import { dateBlock, describeWhen, isPast, occurrence, repeatLabel } from "@/lib/event-display";
+import type { CalendarEvent } from "@/lib/types";
+import { cn } from "@/lib/utils";
+
+/**
+ * One event in the list. The whole row opens the event (a stretched button on
+ * the title, so the row's other button - "Veröffentlichen" - stays a separate,
+ * valid control rather than a button inside a button).
+ */
+export function EventListItem({
+  event,
+  now,
+  publishing,
+  onOpen,
+  onPublish,
+}: {
+  event: CalendarEvent;
+  now: Date;
+  publishing: boolean;
+  onOpen?: (event: CalendarEvent) => void;
+  onPublish: (event: CalendarEvent) => void;
+}) {
+  const { start } = occurrence(event, now);
+  const block = dateBlock(start);
+  const repeat = repeatLabel(event.repeatFrequency);
+  const title = event.name || "(ohne Titel)";
+
+  return (
+    <li
+      className={cn(
+        "relative flex gap-3 px-3 py-3 transition-colors sm:gap-4 sm:px-4",
+        onOpen && "hover:bg-muted/50 has-[button[data-open]:focus-visible]:bg-muted/50",
+        isPast(event, now) && "opacity-60",
+      )}
+    >
+      <div className="flex w-11 shrink-0 flex-col items-center pt-0.5 text-center leading-tight" aria-hidden>
+        <span className="text-[11px] font-medium text-muted-foreground uppercase">{block.weekday}</span>
+        <span className="text-xl font-semibold tabular-nums">{block.day}</span>
+        <span className="text-[11px] text-muted-foreground">{block.month}</span>
+      </div>
+
+      <div className="flex min-w-0 flex-1 flex-col gap-1">
+        {onOpen ? (
+          <button
+            type="button"
+            data-open
+            onClick={() => onOpen(event)}
+            className="text-left font-medium outline-none after:absolute after:inset-0 after:content-['']"
+          >
+            <span className="line-clamp-2">{title}</span>
+          </button>
+        ) : (
+          <span className="line-clamp-2 font-medium">{title}</span>
+        )}
+
+        <div className="flex flex-wrap items-center gap-x-3 gap-y-0.5 text-sm text-muted-foreground">
+          <span>{describeWhen(event, now)}</span>
+          {event.location && (
+            <span className="inline-flex min-w-0 items-center gap-1">
+              <MapPinIcon aria-hidden className="size-3.5 shrink-0" />
+              <span className="truncate">{event.location}</span>
+            </span>
+          )}
+        </div>
+
+        <div className="mt-1 flex flex-wrap items-center gap-1.5">
+          <CalendarBadge calendarId={event.calendarId} />
+          {event.status === "DRAFT" && (
+            <span className="inline-flex h-5 items-center rounded-full border border-dashed border-amber-400 px-2 text-xs font-medium text-amber-800">
+              Entwurf
+            </span>
+          )}
+          {event.status === "PRIVATE" && (
+            <span className="inline-flex h-5 items-center rounded-full bg-muted px-2 text-xs font-medium text-muted-foreground">
+              Privat
+            </span>
+          )}
+          {repeat && (
+            <span className="inline-flex h-5 items-center gap-1 rounded-full bg-muted px-2 text-xs text-muted-foreground">
+              <RepeatIcon aria-hidden className="size-3" />
+              {repeat}
+            </span>
+          )}
+          {event.status === "DRAFT" && (
+            <Button
+              variant="outline"
+              size="xs"
+              className="relative z-10 ml-auto"
+              disabled={publishing}
+              onClick={() => onPublish(event)}
+            >
+              {publishing ? <LoaderCircleIcon className="animate-spin" /> : <SendIcon />}
+              Veröffentlichen
+            </Button>
+          )}
+        </div>
+      </div>
+    </li>
+  );
+}