famapp/src/modules/calendar/manifest.tsx

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())]);

const upcomingConfigSchema = z.object({
  calendarIds: calendarIdsSchema,
  days: z.number().int().min(1).max(30),
});

const monthConfigSchema = z.object({ calendarIds: calendarIdsSchema });

function dayLabel(d: Date): string {
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  const tomorrow = new Date(today);
  tomorrow.setDate(tomorrow.getDate() + 1);
  const target = new Date(d);
  target.setHours(0, 0, 0, 0);
  if (target.getTime() === today.getTime()) return "Today";
  if (target.getTime() === tomorrow.getTime()) return "Tomorrow";
  return d.toLocaleDateString(undefined, { weekday: "long" });
}

function formatTime(d: Date): string {
  return d.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
}

async function UpcomingEventsWidget({ config }: { config: unknown; ctx: WidgetContext }) {
  const parsed = upcomingConfigSchema.parse(config);
  const now = new Date();
  const end = new Date(now.getTime() + parsed.days * 24 * 60 * 60 * 1000);
  const events = await listEvents({ from: now, to: end, calendarIds: parsed.calendarIds });

  if (events.length === 0) {
    return (
      <p className="text-sm text-muted-foreground">
        No events in the next {parsed.days} day{parsed.days !== 1 ? "s" : ""}
      </p>
    );
  }

  // Group by day
  const groups = new Map<string, { day: Date; events: typeof events }>();
  for (const e of events) {
    const start = new Date(e.startAt);
    const key = start.toDateString();
    if (!groups.has(key)) groups.set(key, { day: start, events: [] });
    groups.get(key)!.events.push(e);
  }

  return (
    <div className="flex flex-col gap-3">
      {[...groups.values()].slice(0, 4).map((group, gi) => (
        <div key={gi}>
          <div className="eyebrow mb-1.5 flex items-baseline gap-2">
            <span>{dayLabel(group.day)}</span>
            <span className="text-[var(--ink-faint)] font-medium tracking-normal">
              {group.day.toLocaleDateString(undefined, { month: "short", day: "numeric" })}
            </span>
          </div>
          <div className="flex flex-col gap-1">
            {group.events.map((event) => {
              const start = new Date(event.startAt);
              return (
                <div
                  key={event.id}
                  className="flex items-start gap-2.5 px-2 py-1.5 rounded-md hover:bg-[var(--shade)]"
                >
                  <span className="dot mt-2" style={{ background: "var(--c-household)" }} />
                  <div className="min-w-[56px] tnum text-[var(--ink-mute)] text-[12px] mt-px">
                    {event.allDay ? "all day" : formatTime(start)}
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="text-[13.5px] font-medium text-[var(--ink)] truncate">
                      {event.title}
                    </div>
                    {event.location && (
                      <div className="text-[11.5px] text-[var(--ink-mute)]">{event.location}</div>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      ))}
    </div>
  );
}

async function MonthWidget({ config }: { config: unknown; ctx: WidgetContext }) {
  const parsed = monthConfigSchema.parse(config);
  const now = new Date();
  const monthStart = new Date(now.getFullYear(), now.getMonth(), 1);
  const monthEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
  const events = await listEvents({
    from: monthStart,
    to: monthEnd,
    calendarIds: parsed.calendarIds,
  });

  const monthName = now.toLocaleDateString(undefined, { month: "long", year: "numeric" });

  return (
    <div className="flex flex-col gap-2">
      <div className="eyebrow">{monthName}</div>
      {events.length === 0 ? (
        <p className="text-sm text-[var(--ink-mute)]">No events this month</p>
      ) : (
        <div className="flex flex-col">
          {events.slice(0, 10).map((event) => {
            const eventStart = new Date(event.startAt);
            const day = eventStart.getDate();
            return (
              <div key={event.id} className="flex items-center gap-3 py-1.5 text-sm">
                <span className="w-6 shrink-0 text-center font-medium text-[var(--ink-mute)] tnum">
                  {day}
                </span>
                <span className="dot" style={{ background: "var(--c-household)" }} />
                <span className="truncate text-[var(--ink-2)]">{event.title}</span>
              </div>
            );
          })}
          {events.length > 10 && (
            <div className="text-xs text-[var(--ink-mute)] mt-1">+{events.length - 10} more</div>
          )}
        </div>
      )}
    </div>
  );
}

const manifest: ModuleManifest = {
  id: "calendar",
  name: "Calendar",
  nav: { href: "/calendar", label: "Calendar", icon: "calendar" },
  entities: [
    {
      type: "calendar.calendar",
      label: { singular: "Calendar", plural: "Calendars" },
      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}"` : ""}`;
        if (entry.action === "delete") return "Deleted calendar";
        return `Updated calendar${name ? ` "${name}"` : ""}`;
      },
    },
    {
      type: "calendar.event",
      label: { singular: "Event", plural: "Events" },
      share: { canShare: true, defaultCapabilities: ["read"] },
      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}"` : ""}`;
        if (entry.action === "delete") return "Deleted event";
        return `Updated event${title ? ` "${title}"` : ""}`;
      },
    },
  ],
  dashboardWidgets: [
    {
      id: "calendar.upcoming",
      title: "Upcoming events",
      description: "Events from selected calendars over the next few days.",
      category: "Calendar",
      defaultSize: { w: 4, h: 3 },
      minSize: { w: 3, h: 2 },
      defaultPriority: 10,
      configSchema: upcomingConfigSchema,
      defaultConfig: { calendarIds: "all", days: 3 },
      resolveConfigOptions: async () => ({
        calendars: (await listCalendars()).map((calendar) => ({
          id: calendar.id,
          name: calendar.name,
          visibility: calendar.visibility,
        })),
      }),
      render: (props) => <UpcomingEventsWidget {...props} />,
    },
    {
      id: "calendar.month",
      title: "Month calendar",
      description: "A compact month view for selected calendars.",
      category: "Calendar",
      defaultSize: { w: 6, h: 5 },
      minSize: { w: 4, h: 4 },
      defaultPriority: 20,
      configSchema: monthConfigSchema,
      defaultConfig: { calendarIds: "all" },
      resolveConfigOptions: async () => ({
        calendars: (await listCalendars()).map((calendar) => ({
          id: calendar.id,
          name: calendar.name,
          visibility: calendar.visibility,
        })),
      }),
      render: (props) => <MonthWidget {...props} />,
    },
  ],
  quickAdds: [
    {
      id: "calendar.new-event",
      label: "New event",
      icon: "calendar-plus",
      url: "/calendar",
    },
    {
      id: "calendar.new-calendar",
      label: "New calendar",
      icon: "calendar-days",
      url: "/calendar",
    },
  ],
};

export default manifest;