apple calender enablement wip

Author: yujonglee

apps/desktop/src/components/settings/calendar/configure/apple.tsx

@@ -1,7 +1,7 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { openUrl } from "@tauri-apps/plugin-opener";
 import { AlertCircleIcon, ArrowRightIcon, CheckIcon } from "lucide-react";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 
 import {
   commands as appleCalendarCommands,
@@ -188,43 +188,49 @@ function useAppleCalendarSelection() {
   const calendars = main.UI.useTable("calendars", main.STORE_ID);
   const { user_id } = main.UI.useValues(main.STORE_ID);
 
-  const { mutate: syncCalendars, isPending } = useMutation({
-    mutationKey: ["appleCalendars", "sync"],
-    mutationFn: async () => {
+  const {
+    data: incomingCalendars,
+    refetch,
+    isFetching,
+  } = useQuery({
+    queryKey: ["appleCalendars"],
+    queryFn: async () => {
       const [result] = await Promise.all([
         appleCalendarCommands.listCalendars(),
-        new Promise((resolve) => setTimeout(resolve, 250)),
+        new Promise((resolve) => setTimeout(resolve, 150)),
       ]);
+
       if (result.status === "error") {
         throw new Error(result.error);
       }
       return result.data;
     },
-    onSuccess: (incomingCalendars) => {
-      if (!store || !user_id) return;
+  });
 
-      store.transaction(() => {
-        for (const cal of incomingCalendars) {
-          const existingRowId = findCalendarByTrackingId(store, cal.id);
-          const rowId = existingRowId ?? crypto.randomUUID();
-          const existing = existingRowId
-            ? store.getRow("calendars", existingRowId)
-            : null;
+  useEffect(() => {
+    if (!incomingCalendars || !store || !user_id) return;
 
-          store.setRow("calendars", rowId, {
-            user_id,
-            created_at: existing?.created_at || new Date().toISOString(),
-            tracking_id_calendar: cal.id,
-            name: cal.title,
-            enabled: existing?.enabled ?? false,
-            provider: "apple",
-            source: cal.source.title,
-            color: colorToCSS(cal.color),
-          });
-        }
-      });
-    },
-  });
+    store.transaction(() => {
+      for (const cal of incomingCalendars) {
+        const existingRowId = findCalendarByTrackingId(store, cal.id);
+        const rowId = existingRowId ?? crypto.randomUUID();
+        const existing = existingRowId
+          ? store.getRow("calendars", existingRowId)
+          : null;
+
+        store.setRow("calendars", rowId, {
+          user_id,
+          created_at: existing?.created_at || new Date().toISOString(),
+          tracking_id_calendar: cal.id,
+          name: cal.title,
+          enabled: existing?.enabled ?? false,
+          provider: "apple",
+          source: cal.source.title,
+          color: colorToCSS(cal.color),
+        });
+      }
+    });
+  }, [incomingCalendars, store, user_id]);
 
   const groups = useMemo((): CalendarGroup[] => {
     const appleCalendars = Object.entries(calendars).filter(
@@ -256,8 +262,8 @@ function useAppleCalendarSelection() {
   return {
     groups,
     handleToggle,
-    handleRefresh: syncCalendars,
-    isLoading: isPending,
+    handleRefresh: refetch,
+    isLoading: isFetching,
   };
 }
 
@@ -281,7 +287,7 @@ function DocumentationLink({ href }: { href: string }) {
       onClick={() => openUrl(href)}
       className="mb-3 text-xs text-neutral-500 hover:text-neutral-700 hover:underline"
     >
-      Read the docs →
+      Read the docs ↗
     </button>
   );
 }

apps/desktop/src/components/settings/calendar/configure/shared.tsx

@@ -1,4 +1,4 @@
-import { RefreshCwIcon } from "lucide-react";
+import { CalendarOffIcon, RefreshCwIcon } from "lucide-react";
 
 import { Button } from "@hypr/ui/components/ui/button";
 import { Switch } from "@hypr/ui/components/ui/switch";
@@ -31,8 +31,9 @@ export function CalendarSelection({
 }: CalendarSelectionProps) {
   if (groups.length === 0) {
     return (
-      <div className="py-4 text-center text-sm text-neutral-500">
-        No calendars found
+      <div className="flex flex-col items-center justify-center py-8 px-4 border border-dashed border-neutral-200 rounded-lg bg-neutral-50/50">
+        <CalendarOffIcon className="size-8 text-neutral-300 mb-3" />
+        <p className="text-sm text-neutral-500">No calendars found</p>
       </div>
     );
   }
@@ -54,13 +55,6 @@ export function CalendarSelection({
         </Button>
       </div>
       <div className="space-y-4">
-        <div className="mt-2 p-3 bg-amber-50 border border-amber-200 rounded-lg">
-          <p className="text-xs text-amber-700">
-            Event fetching is not implemented yet. Calendar selection will be
-            used once event syncing is available.
-          </p>
-        </div>
-
         {groups.map((group) => (
           <div key={group.sourceName}>
             <h5 className="text-xs font-medium text-neutral-500 mb-2">

apps/desktop/src/components/settings/calendar/shared.tsx

@@ -17,7 +17,7 @@ export type CalendarProviderId = (typeof _PROVIDERS)[number]["id"];
 
 const _PROVIDERS = [
   {
-    disabled: true,
+    disabled: false,
     id: "apple",
     displayName: "Apple",
     badge: "Almost Done, really",

apps/desktop/src/components/settings/general/notification.tsx

@@ -236,17 +236,14 @@ export function NotificationSettingsView() {
         {(field) => (
           <div className="flex items-start justify-between gap-4">
             <div className="flex-1">
-              <h3 className="mb-1 text-sm font-medium">
-                Event notifications (Not-available)
-              </h3>
+              <h3 className="mb-1 text-sm font-medium">Event notifications</h3>
               <p className="text-xs text-neutral-600">
-                Get notified about upcoming calendar events
+                Get notified 5 minutes before calendar events start
               </p>
             </div>
             <Switch
-              checked={false}
+              checked={field.state.value}
               onCheckedChange={field.handleChange}
-              disabled
             />
           </div>
         )}

apps/desktop/src/components/task-manager.tsx

@@ -1,31 +1,51 @@
+import { useRef } from "react";
 import type { Queries } from "tinybase/with-schemas";
 import { useScheduleTaskRun, useSetTask } from "tinytick/ui-react";
 
 import {
   CALENDAR_SYNC_TASK_ID,
   syncCalendarEvents,
 } from "../services/apple-calendar";
+import {
+  checkEventNotifications,
+  EVENT_NOTIFICATION_INTERVAL,
+  EVENT_NOTIFICATION_TASK_ID,
+} from "../services/event-notification";
 import * as main from "../store/tinybase/main";
+import * as settings from "../store/tinybase/settings";
 
 const CALENDAR_SYNC_INTERVAL = 60 * 1000; // 60 sec
 
 export function TaskManager() {
   const store = main.UI.useStore(main.STORE_ID);
   const queries = main.UI.useQueries(main.STORE_ID);
 
+  const settingsStore = settings.UI.useStore(settings.STORE_ID);
+  const notifiedEventsRef = useRef<Set<string>>(new Set());
+
   useSetTask(CALENDAR_SYNC_TASK_ID, async () => {
-    // TODO: Not ready yet
-    if (false) {
-      await syncCalendarEvents(
-        store as main.Store,
-        queries as Queries<main.Schemas>,
-      );
-    }
+    await syncCalendarEvents(
+      store as main.Store,
+      queries as Queries<main.Schemas>,
+    );
   });
 
   useScheduleTaskRun(CALENDAR_SYNC_TASK_ID, undefined, 0, {
     repeatDelay: CALENDAR_SYNC_INTERVAL,
   });
 
+  useSetTask(EVENT_NOTIFICATION_TASK_ID, async () => {
+    if (!store || !settingsStore) return;
+    checkEventNotifications(
+      store as main.Store,
+      settingsStore as settings.Store,
+      notifiedEventsRef.current,
+    );
+  });
+
+  useScheduleTaskRun(EVENT_NOTIFICATION_TASK_ID, undefined, 0, {
+    repeatDelay: EVENT_NOTIFICATION_INTERVAL,
+  });
+
   return null;
 }

apps/desktop/src/services/apple-calendar/fetch/existing.ts

@@ -31,7 +31,6 @@ export function fetchExistingEvents(ctx: Ctx): ExistingEvent[] {
         meeting_link: event.meeting_link as string | undefined,
         description: event.description as string | undefined,
         note: event.note as string | undefined,
-        participants: event.participants as string | undefined,
       });
     }
   });

apps/desktop/src/services/apple-calendar/fetch/incoming.ts

@@ -1,12 +1,18 @@
 import type { AppleEvent, Participant } from "@hypr/plugin-apple-calendar";
 import { commands as appleCalendarCommands } from "@hypr/plugin-apple-calendar";
 import { commands as miscCommands } from "@hypr/plugin-misc";
-import type { EventParticipant } from "@hypr/store";
 
 import type { Ctx } from "../ctx";
-import type { IncomingEvent } from "./types";
+import type {
+  EventParticipant,
+  IncomingEvent,
+  IncomingParticipants,
+} from "./types";
 
-export async function fetchIncomingEvents(ctx: Ctx): Promise<IncomingEvent[]> {
+export async function fetchIncomingEvents(ctx: Ctx): Promise<{
+  events: IncomingEvent[];
+  participants: IncomingParticipants;
+}> {
   const trackingIds = Array.from(ctx.calendarTrackingIdToId.keys());
 
   const results = await Promise.all(
@@ -25,36 +31,51 @@ export async function fetchIncomingEvents(ctx: Ctx): Promise<IncomingEvent[]> {
     }),
   );
 
-  const events = results.flat();
+  const appleEvents = results.flat();
+  const events: IncomingEvent[] = [];
+  const participants: IncomingParticipants = new Map();
 
-  return Promise.all(events.map(normalizeAppleEvent));
+  for (const appleEvent of appleEvents) {
+    const { event, eventParticipants } = await normalizeAppleEvent(appleEvent);
+    events.push(event);
+    if (eventParticipants.length > 0) {
+      participants.set(event.tracking_id_event, eventParticipants);
+    }
+  }
+
+  return { events, participants };
 }
 
-async function normalizeAppleEvent(event: AppleEvent): Promise<IncomingEvent> {
+async function normalizeAppleEvent(appleEvent: AppleEvent): Promise<{
+  event: IncomingEvent;
+  eventParticipants: EventParticipant[];
+}> {
   const meetingLink =
-    event.url ?? (await extractMeetingLink(event.notes, event.location));
+    appleEvent.url ??
+    (await extractMeetingLink(appleEvent.notes, appleEvent.location));
 
-  const participants: EventParticipant[] = [];
+  const eventParticipants: EventParticipant[] = [];
 
-  if (event.organizer) {
-    participants.push(normalizeParticipant(event.organizer, true));
+  if (appleEvent.organizer) {
+    eventParticipants.push(normalizeParticipant(appleEvent.organizer, true));
   }
 
-  for (const attendee of event.attendees) {
-    participants.push(normalizeParticipant(attendee, false));
+  for (const attendee of appleEvent.attendees) {
+    eventParticipants.push(normalizeParticipant(attendee, false));
   }
 
   return {
-    tracking_id_event: event.event_identifier,
-    tracking_id_calendar: event.calendar.id,
-    title: event.title,
-    started_at: event.start_date,
-    ended_at: event.end_date,
-    location: event.location ?? undefined,
-    meeting_link: meetingLink ?? undefined,
-    description: event.notes ?? undefined,
-    participants:
-      participants.length > 0 ? JSON.stringify(participants) : undefined,
+    event: {
+      tracking_id_event: appleEvent.event_identifier,
+      tracking_id_calendar: appleEvent.calendar.id,
+      title: appleEvent.title,
+      started_at: appleEvent.start_date,
+      ended_at: appleEvent.end_date,
+      location: appleEvent.location ?? undefined,
+      meeting_link: meetingLink ?? undefined,
+      description: appleEvent.notes ?? undefined,
+    },
+    eventParticipants,
   };
 }
 

apps/desktop/src/services/apple-calendar/fetch/types.ts

@@ -1,5 +1,12 @@
 import { EventStorage } from "@hypr/store";
 
+export type EventParticipant = {
+  name?: string;
+  email?: string;
+  is_organizer?: boolean;
+  is_current_user?: boolean;
+};
+
 export type IncomingEvent = {
   tracking_id_event: string;
   tracking_id_calendar: string;
@@ -9,9 +16,10 @@ export type IncomingEvent = {
   location?: string;
   meeting_link?: string;
   description?: string;
-  participants?: string;
 };
 
+export type IncomingParticipants = Map<string, EventParticipant[]>;
+
 export type ExistingEvent = {
   id: string;
   tracking_id_event?: string;

apps/desktop/src/services/apple-calendar/index.ts

@@ -28,14 +28,16 @@ async function run(store: Store, queries: Queries<Schemas>) {
     return null;
   }
 
-  const incoming = await fetchIncomingEvents(ctx);
+  const { events: incoming, participants: incomingParticipants } =
+    await fetchIncomingEvents(ctx);
   const existing = fetchExistingEvents(ctx);
 
-  const out = syncEvents(ctx, { incoming, existing });
-  const { addedEventIds } = executeForEventsSync(ctx, out);
+  const eventsOut = syncEvents(ctx, { incoming, existing });
+  const { trackingIdToEventId } = executeForEventsSync(ctx, eventsOut);
 
   const participantsOut = syncParticipants(ctx, {
-    eventIds: [...out.toUpdate.map((e) => e.id), ...addedEventIds],
+    incomingParticipants,
+    trackingIdToEventId,
   });
   executeForParticipantsSync(ctx, participantsOut);
 }