PaddyandClaude Opus 5.5
0cda40f85e
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>
64 lines
2.3 KiB
TypeScript
64 lines
2.3 KiB
TypeScript
"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>
|
|
);
|
|
}
|