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";

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 });

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>
    );
  }

  return (
    <ul className="space-y-2">
      {events.slice(0, 8).map((event) => {
        const start = new Date(event.startAt);
        const label = event.allDay
          ? start.toLocaleDateString(undefined, { month: "short", day: "numeric" })
          : start.toLocaleString(undefined, {
              month: "short",
              day: "numeric",
              hour: "numeric",
              minute: "2-digit",
            });
        return (
          <li key={event.id} className="flex items-start gap-2 text-sm">
            <span className="mt-0.5 shrink-0 text-xs text-muted-foreground">{label}</span>
            <span className="font-medium leading-snug">{event.title}</span>
          </li>
        );
      })}
    </ul>
  );
}

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="space-y-2">
      <p className="text-xs font-medium text-muted-foreground">{monthName}</p>
      {events.length === 0 ? (
        <p className="text-sm text-muted-foreground">No events this month</p>
      ) : (
        <ul className="space-y-1">
          {events.slice(0, 10).map((event) => {
            const eventStart = new Date(event.startAt);
            const day = eventStart.getDate();
            return (
              <li key={event.id} className="flex items-center gap-2 text-sm">
                <span className="w-5 shrink-0 text-center text-xs font-semibold text-muted-foreground">
                  {day}
                </span>
                <span className="truncate">{event.title}</span>
              </li>
            );
          })}
          {events.length > 10 && (
            <li className="text-xs text-muted-foreground">+{events.length - 10} more</li>
          )}
        </ul>
      )}
    </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}`,
      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}`,
      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;