Implement share viewer (task 31)

- Makes actorId nullable in activity_log (migration 0010) with onDelete: set null so audit history survives user deletion; adds logShareActivity for anonymous mutations - Adds resolveShareToken return of householdId for downstream validation - Adds renderSharedView to EntityTypeRegistration; each module implements loadForShare (no-session bare queries) and renderSharedView - Calendar: CalendarSharedView (upcoming 90-day events) and EventSharedView (title/time/location/notes) - Lists: ListSharedView (client component with optimistic toggles via toggleShareListItem server action in lists/server/share-actions.ts) - Notes: NoteSharedView (title + body + updated date) - /app/s/[token]/page.tsx: resolves token, dispatches to loadForShare + renderSharedView, friendly error for invalid/expired tokens, noindex - Middleware /s/* exemption confirmed present (no change needed) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-06 14:26:38 -05:00
parent d5deee9a46
commit 39aa5704f9
18 changed files with 558 additions and 5 deletions
@@ -0,0 +1,79 @@
+import { MapPin, StickyNote } from "lucide-react";
+import type { CalendarShareData, EventShareData } from "../server/share-queries";
+
+function formatEventTime(startAt: string, endAt: string, allDay: boolean): string {
+  const start = new Date(startAt);
+  const end = new Date(endAt);
+  if (allDay) {
+    return start.toLocaleDateString(undefined, { weekday: "short", month: "long", day: "numeric" });
+  }
+  const dateStr = start.toLocaleDateString(undefined, {
+    weekday: "short",
+    month: "long",
+    day: "numeric",
+  });
+  const startTime = start.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
+  const endTime = end.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
+  return `${dateStr} · ${startTime}–${endTime}`;
+}
+
+export function EventSharedView({ data }: { data: EventShareData }) {
+  return (
+    <div className="mx-auto max-w-xl space-y-4 p-4">
+      <header className="space-y-1">
+        <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+          {data.calendarName}
+        </p>
+        <h1 className="text-2xl font-semibold">{data.title}</h1>
+        <p className="text-sm text-muted-foreground">
+          {formatEventTime(data.startAt, data.endAt, data.allDay)}
+        </p>
+      </header>
+      {data.location && (
+        <div className="flex items-start gap-2 text-sm">
+          <MapPin className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+          <span>{data.location}</span>
+        </div>
+      )}
+      {data.notes && (
+        <div className="flex items-start gap-2 text-sm">
+          <StickyNote className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+          <p className="whitespace-pre-wrap">{data.notes}</p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function CalendarSharedView({ data }: { data: CalendarShareData }) {
+  return (
+    <div className="mx-auto max-w-xl space-y-4 p-4">
+      <header>
+        <h1 className="text-2xl font-semibold">{data.name}</h1>
+        <p className="text-sm text-muted-foreground">
+          Upcoming events — next 90 days
+        </p>
+      </header>
+      {data.events.length === 0 ? (
+        <p className="text-sm text-muted-foreground">No upcoming events.</p>
+      ) : (
+        <ul className="divide-y rounded-lg border bg-background">
+          {data.events.map((event) => (
+            <li key={event.id} className="flex flex-col gap-0.5 px-4 py-3">
+              <span className="font-medium">{event.title}</span>
+              <span className="text-xs text-muted-foreground">
+                {formatEventTime(event.startAt, event.endAt, event.allDay)}
+              </span>
+              {event.location && (
+                <span className="flex items-center gap-1 text-xs text-muted-foreground">
+                  <MapPin className="size-3" />
+                  {event.location}
+                </span>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
@@ -1,6 +1,13 @@
 import type { ModuleManifest, WidgetContext } from "../_core/module";
 import { z } from "zod";
 import { listCalendars, listEvents, searchCalendars, searchEvents } from "./server/queries";
+import {
+  loadCalendarForShare,
+  loadEventForShare,
+  type CalendarShareData,
+  type EventShareData,
+} from "./server/share-queries";
+import { CalendarSharedView, EventSharedView } from "./components/shared-view";

 const calendarIdsSchema = z.union([z.literal("all"), z.array(z.string().uuid())]);

@@ -101,6 +108,8 @@ const manifest: ModuleManifest = {
      share: { canShare: true, defaultCapabilities: ["read"] },
      search: { search: searchCalendars },
      resolveUrl: (id) => `/calendar?id=${id}`,
+      loadForShare: (id) => loadCalendarForShare(id),
+      renderSharedView: ({ data }) => <CalendarSharedView data={data as CalendarShareData} />,
      renderActivity: (entry) => {
        const name = entry.payload?.name as string | undefined;
        if (entry.action === "create") return `Created calendar${name ? ` "${name}"` : ""}`;
@@ -115,6 +124,8 @@ const manifest: ModuleManifest = {
      reminder: { canRemind: true },
      search: { search: searchEvents },
      resolveUrl: (id) => `/calendar/events/${id}`,
+      loadForShare: (id) => loadEventForShare(id),
+      renderSharedView: ({ data }) => <EventSharedView data={data as EventShareData} />,
      renderActivity: (entry) => {
        const title = entry.payload?.title as string | undefined;
        if (entry.action === "create") return `Created event${title ? ` "${title}"` : ""}`;
@@ -0,0 +1,90 @@
+import { and, asc, eq, gte, lte } from "drizzle-orm";
+import { db } from "@/lib/db";
+import { calendarEvents, calendars } from "../schema";
+
+export type EventSummary = {
+  id: string;
+  title: string;
+  startAt: string;
+  endAt: string;
+  allDay: boolean;
+  location: string | null;
+  notes: string | null;
+};
+
+export type CalendarShareData = {
+  id: string;
+  name: string;
+  color: string | null;
+  events: EventSummary[];
+};
+
+export type EventShareData = EventSummary & { calendarName: string };
+
+export async function loadCalendarForShare(id: string): Promise<CalendarShareData | null> {
+  const [calendar] = await db
+    .select({ id: calendars.id, name: calendars.name, color: calendars.color })
+    .from(calendars)
+    .where(eq(calendars.id, id))
+    .limit(1);
+
+  if (!calendar) return null;
+
+  const now = new Date();
+  const end = new Date(now.getTime() + 90 * 24 * 60 * 60 * 1000);
+
+  const rows = await db
+    .select({
+      id: calendarEvents.id,
+      title: calendarEvents.title,
+      startAt: calendarEvents.startAt,
+      endAt: calendarEvents.endAt,
+      allDay: calendarEvents.allDay,
+      location: calendarEvents.location,
+      notes: calendarEvents.notes,
+    })
+    .from(calendarEvents)
+    .where(
+      and(
+        eq(calendarEvents.calendarId, id),
+        gte(calendarEvents.startAt, now),
+        lte(calendarEvents.startAt, end),
+      ),
+    )
+    .orderBy(asc(calendarEvents.startAt));
+
+  return {
+    ...calendar,
+    events: rows.map((e) => ({
+      ...e,
+      startAt: e.startAt.toISOString(),
+      endAt: e.endAt.toISOString(),
+    })),
+  };
+}
+
+export async function loadEventForShare(id: string): Promise<EventShareData | null> {
+  const [row] = await db
+    .select({
+      id: calendarEvents.id,
+      title: calendarEvents.title,
+      startAt: calendarEvents.startAt,
+      endAt: calendarEvents.endAt,
+      allDay: calendarEvents.allDay,
+      location: calendarEvents.location,
+      notes: calendarEvents.notes,
+      calendarName: calendars.name,
+    })
+    .from(calendarEvents)
+    .innerJoin(calendars, eq(calendarEvents.calendarId, calendars.id))
+    .where(eq(calendarEvents.id, id))
+    .limit(1);
+
+  if (!row) return null;
+
+  return {
+    ...row,
+    startAt: row.startAt.toISOString(),
+    endAt: row.endAt.toISOString(),
+  };
+}