feat(web): wire calendar page to real API data (#474)

Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>

apps/web/src/app/(authenticated)/calendar/page.tsx

@@ -3,57 +3,161 @@
 import { useState, useEffect } from "react";
 import type { ReactElement } from "react";
 import { Calendar } from "@/components/calendar/Calendar";
-import { mockEvents } from "@/lib/api/events";
+import { fetchEvents } from "@/lib/api/events";
+import { MosaicSpinner } from "@/components/ui/MosaicSpinner";
+import { useWorkspaceId } from "@/lib/hooks";
 import type { Event } from "@mosaic/shared";
 
 export default function CalendarPage(): ReactElement {
+  const workspaceId = useWorkspaceId();
   const [events, setEvents] = useState<Event[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
-    void loadEvents();
-  }, []);
-
-  async function loadEvents(): Promise<void> {
-    setIsLoading(true);
-    setError(null);
-
-    try {
-      // TODO: Replace with real API call when backend is ready
-      // const data = await fetchEvents();
-      await new Promise((resolve) => setTimeout(resolve, 300));
-      setEvents(mockEvents);
-    } catch (err) {
-      setError(
-        err instanceof Error
-          ? err.message
-          : "We had trouble loading your calendar. Please try again when you're ready."
-      );
-    } finally {
+    if (!workspaceId) {
       setIsLoading(false);
+      return;
     }
+
+    const wsId = workspaceId;
+    let cancelled = false;
+    setError(null);
+    setIsLoading(true);
+
+    async function loadEvents(): Promise<void> {
+      try {
+        const data = await fetchEvents(wsId);
+        if (!cancelled) {
+          setEvents(data);
+        }
+      } catch (err: unknown) {
+        console.error("[Calendar] Failed to fetch events:", err);
+        if (!cancelled) {
+          setError(
+            err instanceof Error
+              ? err.message
+              : "We had trouble loading your calendar. Please try again when you're ready."
+          );
+        }
+      } finally {
+        if (!cancelled) {
+          setIsLoading(false);
+        }
+      }
+    }
+
+    void loadEvents();
+
+    return (): void => {
+      cancelled = true;
+    };
+  }, [workspaceId]);
+
+  function handleRetry(): void {
+    if (!workspaceId) return;
+
+    const wsId = workspaceId;
+    setError(null);
+    setIsLoading(true);
+
+    fetchEvents(wsId)
+      .then((data) => {
+        setEvents(data);
+      })
+      .catch((err: unknown) => {
+        console.error("[Calendar] Retry failed:", err);
+        setError(
+          err instanceof Error
+            ? err.message
+            : "We had trouble loading your calendar. Please try again when you're ready."
+        );
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  }
+
+  if (isLoading) {
+    return (
+      <main className="container mx-auto px-4 py-8">
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold" style={{ color: "var(--text)" }}>
+            Calendar
+          </h1>
+          <p style={{ color: "var(--text-muted)" }} className="mt-2">
+            View your schedule at a glance
+          </p>
+        </div>
+        <div className="flex justify-center py-16">
+          <MosaicSpinner label="Loading calendar..." />
+        </div>
+      </main>
+    );
+  }
+
+  if (error !== null) {
+    return (
+      <main className="container mx-auto px-4 py-8">
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold" style={{ color: "var(--text)" }}>
+            Calendar
+          </h1>
+          <p style={{ color: "var(--text-muted)" }} className="mt-2">
+            View your schedule at a glance
+          </p>
+        </div>
+        <div
+          className="rounded-lg p-6 text-center"
+          style={{
+            background: "var(--surface)",
+            border: "1px solid var(--border)",
+          }}
+        >
+          <p style={{ color: "var(--danger)" }}>{error}</p>
+          <button
+            onClick={handleRetry}
+            className="mt-4 rounded-md px-4 py-2 text-sm font-medium transition-colors"
+            style={{
+              background: "var(--accent)",
+              color: "var(--surface)",
+            }}
+          >
+            Try again
+          </button>
+        </div>
+      </main>
+    );
   }
 
   return (
     <main className="container mx-auto px-4 py-8">
       <div className="mb-8">
-        <h1 className="text-3xl font-bold text-gray-900">Calendar</h1>
-        <p className="text-gray-600 mt-2">View your schedule at a glance</p>
+        <h1 className="text-3xl font-bold" style={{ color: "var(--text)" }}>
+          Calendar
+        </h1>
+        <p style={{ color: "var(--text-muted)" }} className="mt-2">
+          View your schedule at a glance
+        </p>
       </div>
 
-      {error !== null ? (
-        <div className="rounded-lg border border-amber-200 bg-amber-50 p-6 text-center">
-          <p className="text-amber-800">{error}</p>
-          <button
-            onClick={() => void loadEvents()}
-            className="mt-4 rounded-md bg-amber-600 px-4 py-2 text-sm font-medium text-white hover:bg-amber-700 transition-colors"
-          >
-            Try again
-          </button>
+      {events.length === 0 ? (
+        <div
+          className="rounded-lg p-8 text-center"
+          style={{
+            background: "var(--surface)",
+            border: "1px solid var(--border)",
+          }}
+        >
+          <p className="text-lg" style={{ color: "var(--text-muted)" }}>
+            No events scheduled
+          </p>
+          <p className="text-sm mt-2" style={{ color: "var(--text-muted)" }}>
+            Your calendar is clear
+          </p>
         </div>
       ) : (
-        <Calendar events={events} isLoading={isLoading} />
+        <Calendar events={events} isLoading={false} />
       )}
     </main>
   );