Aktueller Stand

components/ViewManager.tsx

@@ -3,10 +3,14 @@
 import { useEffect, useState } from "react";
 
 export default function ViewManager() {
-  const [view, setView] = useState<{ id: string; name: string; token: string } | null>(
-    null
-  );
+  const [view, setView] = useState<{
+    id: string;
+    name: string;
+    token: string;
+    icalPastDays?: number;
+  } | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [appName, setAppName] = useState("Vereinskalender");
 
   const load = async () => {
     try {
@@ -20,8 +24,21 @@ export default function ViewManager() {
     }
   };
 
+  const loadAppName = async () => {
+    try {
+      const nameResponse = await fetch("/api/settings/app-name");
+      if (nameResponse.ok) {
+        const payload = await nameResponse.json();
+        setAppName(payload.name || "Vereinskalender");
+      }
+    } catch {
+      // ignore
+    }
+  };
+
   useEffect(() => {
     load();
+    loadAppName();
   }, []);
 
   useEffect(() => {
@@ -30,6 +47,13 @@ export default function ViewManager() {
     return () => window.removeEventListener("views-updated", handler);
   }, []);
 
+  const toFilename = (value: string) =>
+    value
+      .trim()
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/(^-|-$)/g, "") || "kalender";
+
   const icalBase = typeof window === "undefined" ? "" : window.location.origin;
 
   return (
@@ -53,7 +77,11 @@ export default function ViewManager() {
           <div className="rounded-xl border border-slate-200 bg-slate-50 p-3 text-sm">
             <p className="font-medium">iCal URL</p>
             <p className="break-all text-slate-700">
-              {icalBase}/api/ical/{view.token}
+              {icalBase}/api/ical/{view.token}/{toFilename(appName)}.ical{
+                view.icalPastDays && view.icalPastDays > 0
+                  ? `?pastDays=${view.icalPastDays}`
+                  : ""
+              }
             </p>
           </div>
         )}