feat(desktop): add calendar picker UI with permission handling (#2473)

# feat(desktop): add calendar picker UI with permission handling

## Summary

This PR adds a calendar picker UI to the desktop settings, allowing users to request calendar/contacts permissions and select which Apple calendars to track. The implementation reorganizes the calendar settings into a modular directory structure.

Key changes:
- Reorganized `configure.tsx` into `configure/` directory with separate files for Apple, cloud providers, and shared components
- Added `CalendarSelection` component that displays calendars grouped by source (iCloud, Exchange, etc.) with toggle switches
- Added permission request UI for calendar and contacts access
- Includes a note indicating that event fetching is not yet implemented (per requirements)

**Important limitation:** Calendar selection state is stored in local React state only and does **not persist** across sessions. The TinyBase `calendars` table schema does not currently have the required fields (`tracking_id`, `enabled`, `source`, `provider`). Persistence can be added once the schema is updated.

## Review & Testing Checklist for Human

- [ ] **Test on macOS** (required): This feature uses Apple Calendar APIs and can only be fully tested on macOS. Verify:
  - Permission request flow works correctly (request → grant → calendar list appears)
  - Calendar list populates after granting permission
  - Calendar colors display correctly (RGBA conversion from Apple's color format)
  - Toggle switches work within the session
- [ ] **Verify non-persistence is acceptable**: Calendar toggle state resets when closing/reopening settings. Confirm this is OK until schema changes are made to support persistence.
- [ ] **Visual review**: Check that the calendar selection UI renders correctly within the settings panel accordion

**Recommended test plan:**
1. Open Settings > Calendar on macOS
2. Expand Apple Calendar provider
3. Request calendar permission if not already granted
4. Verify calendars appear grouped by source (iCloud, Exchange, etc.)
5. Toggle some calendars on/off
6. Close and reopen settings - confirm toggles reset (expected with current implementation)

### Notes

- Event fetching is intentionally not implemented yet - the calendar selection will be used once event syncing is available
- Calendar selection does not persist - this is a known limitation pending schema updates
- Requested by @yujonglee ([email protected])
- Devin session: https://app.devin.ai/sessions/438145d499b246d4b7d2ab257e7f8ecb

Author: devin-ai-integration[bot]

apps/desktop/src/components/devtool/seed/shared/calendar.ts

@@ -24,6 +24,7 @@ export const createCalendar = () => {
       user_id: DEFAULT_USER_ID,
       name: template,
       created_at: faker.date.past({ years: 1 }).toISOString(),
+      enabled: faker.datatype.boolean(),
     } satisfies Calendar,
   };
 };

apps/desktop/src/components/main/body/empty/index.tsx

@@ -49,7 +49,7 @@ function EmptyView() {
   const newNote = useNewNote({ behavior: "current" });
   const openCurrent = useTabs((state) => state.openCurrent);
   const openCalendar = useCallback(
-    () => openCurrent({ type: "extension", extensionId: "calendar" }),
+    () => openCurrent({ type: "calendar" }),
     [openCurrent],
   );
   const openContacts = useCallback(

…mponents/settings/calendar/configure.tsx …ts/settings/calendar/configure/apple.tsxapps/desktop/src/components/settings/calendar/configure.tsx renamed to apps/desktop/src/components/settings/calendar/configure/apple.tsx apps/desktop/src/components/settings/calendar/configure.tsx renamed to apps/desktop/src/components/settings/calendar/configure/apple.tsx

@@ -1,44 +1,30 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { platform } from "@tauri-apps/plugin-os";
 import { AlertCircleIcon, ArrowRightIcon, CheckIcon } from "lucide-react";
+import { useEffect, useMemo } from "react";
 
+import {
+  commands as appleCalendarCommands,
+  type CalendarColor,
+} from "@hypr/plugin-apple-calendar";
 import {
   commands as permissionsCommands,
-  PermissionStatus,
+  type PermissionStatus,
 } from "@hypr/plugin-permissions";
 import {
-  Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "@hypr/ui/components/ui/accordion";
 import { Button } from "@hypr/ui/components/ui/button";
 import { cn } from "@hypr/utils";
 
-import { PROVIDERS } from "./shared";
-
-export function ConfigureProviders() {
-  const isMacos = platform() === "macos";
-
-  const visibleProviders = PROVIDERS.filter(
-    (p) => p.platform === "all" || (p.platform === "macos" && isMacos),
-  );
-
-  return (
-    <div className="flex flex-col gap-3">
-      <h3 className="text-sm font-semibold">Configure Providers</h3>
-      <Accordion type="single" collapsible className="space-y-3">
-        {visibleProviders.map((provider) =>
-          provider.id === "apple" ? (
-            <AppleCalendarProviderCard key={provider.id} />
-          ) : (
-            <DisabledProviderCard key={provider.id} config={provider} />
-          ),
-        )}
-      </Accordion>
-    </div>
-  );
-}
+import * as main from "../../../../store/tinybase/main";
+import { PROVIDERS } from "../shared";
+import {
+  type CalendarGroup,
+  type CalendarItem,
+  CalendarSelection,
+} from "./shared";
 
 function useAccessPermission(config: {
   queryKey: string;
@@ -81,7 +67,7 @@ function useAccessPermission(config: {
     }
   };
 
-  return { isAuthorized, isPending, handleAction };
+  return { status: status.data, isAuthorized, isPending, handleAction };
 }
 
 function AccessPermissionRow({
@@ -140,7 +126,156 @@ function AccessPermissionRow({
   );
 }
 
-function AppleCalendarProviderCard() {
+function appleColorToCss(color?: CalendarColor | null): string | undefined {
+  if (!color) return undefined;
+  return `rgba(${Math.round(color.red * 255)}, ${Math.round(color.green * 255)}, ${Math.round(color.blue * 255)}, ${color.alpha})`;
+}
+
+function useAppleCalendarSelection() {
+  const { user_id } = main.UI.useValues(main.STORE_ID);
+  const calendarsTable = main.UI.useTable("calendars", main.STORE_ID);
+
+  const {
+    data: appleCalendars,
+    refetch,
+    isFetching,
+  } = useQuery({
+    queryKey: ["appleCalendars"],
+    queryFn: async () => {
+      const operation = appleCalendarCommands.listCalendars();
+      const minDelay = new Promise((resolve) => setTimeout(resolve, 500));
+
+      const [result] = await Promise.all([operation, minDelay]);
+      if (result.status === "error") {
+        throw new Error(result.error);
+      }
+      return result.data;
+    },
+  });
+
+  const createCalendarRow = main.UI.useSetRowCallback(
+    "calendars",
+    (p: { id: string; name: string }) => p.id,
+    (p: { id: string; name: string }) => ({
+      user_id: user_id ?? "",
+      created_at: new Date().toISOString(),
+      name: p.name,
+      enabled: false,
+    }),
+    [user_id],
+    main.STORE_ID,
+  );
+
+  const updateCalendarName = main.UI.useSetCellCallback(
+    "calendars",
+    (p: { id: string; name: string }) => p.id,
+    "name",
+    (p: { id: string; name: string }) => p.name,
+    [],
+    main.STORE_ID,
+  );
+
+  useEffect(() => {
+    if (!appleCalendars || !user_id) {
+      return;
+    }
+
+    for (const cal of appleCalendars) {
+      const existing = calendarsTable[cal.id];
+      if (!existing) {
+        createCalendarRow({ id: cal.id, name: cal.title });
+      } else if (existing.name !== cal.title) {
+        updateCalendarName({ id: cal.id, name: cal.title });
+      }
+    }
+  }, [
+    appleCalendars,
+    user_id,
+    calendarsTable,
+    createCalendarRow,
+    updateCalendarName,
+  ]);
+
+  const groups = useMemo((): CalendarGroup[] => {
+    if (!appleCalendars) {
+      return [];
+    }
+
+    const grouped = new Map<string, CalendarItem[]>();
+    for (const cal of appleCalendars) {
+      const sourceTitle = cal.source.title;
+      if (!grouped.has(sourceTitle)) {
+        grouped.set(sourceTitle, []);
+      }
+      grouped.get(sourceTitle)!.push({
+        id: cal.id,
+        title: cal.title,
+        color: appleColorToCss(cal.color),
+      });
+    }
+
+    return Array.from(grouped.entries()).map(([sourceName, calendars]) => ({
+      sourceName,
+      calendars,
+    }));
+  }, [appleCalendars]);
+
+  const isCalendarEnabled = (calendarId: string): boolean => {
+    const calendar = calendarsTable[calendarId];
+    return calendar?.enabled === true;
+  };
+
+  const setCalendarRow = main.UI.useSetRowCallback(
+    "calendars",
+    (p: { calendarId: string; enabled: boolean }) => p.calendarId,
+    (p: { calendarId: string; enabled: boolean }) => {
+      const existing = calendarsTable[p.calendarId];
+      if (!existing) {
+        return {
+          user_id: user_id ?? "",
+          created_at: new Date().toISOString(),
+          name: "",
+          enabled: p.enabled,
+        };
+      }
+      return {
+        ...existing,
+        enabled: p.enabled,
+      };
+    },
+    [calendarsTable, user_id],
+    main.STORE_ID,
+  );
+
+  const handleToggle = (calendar: CalendarItem, enabled: boolean) => {
+    setCalendarRow({ calendarId: calendar.id, enabled });
+  };
+
+  return {
+    groups,
+    isCalendarEnabled,
+    handleToggle,
+    handleRefresh: refetch,
+    isLoading: isFetching,
+  };
+}
+
+function AppleCalendarSelection() {
+  const { groups, isCalendarEnabled, handleToggle, handleRefresh, isLoading } =
+    useAppleCalendarSelection();
+
+  return (
+    <CalendarSelection
+      groups={groups}
+      isCalendarEnabled={isCalendarEnabled}
+      onToggle={handleToggle}
+      onRefresh={handleRefresh}
+      isLoading={isLoading}
+    />
+  );
+}
+
+export function AppleCalendarProviderCard() {
   const config = PROVIDERS.find((p) => p.id === "apple")!;
 
   const calendar = useAccessPermission({
@@ -187,38 +322,8 @@ function AppleCalendarProviderCard() {
             onAction={contacts.handleAction}
           />
         </div>
+        {calendar.isAuthorized && <AppleCalendarSelection />}
       </AccordionContent>
     </AccordionItem>
   );
 }
-
-function DisabledProviderCard({
-  config,
-}: {
-  config: (typeof PROVIDERS)[number];
-}) {
-  return (
-    <AccordionItem
-      disabled
-      value={config.id}
-      className="rounded-xl border-2 border-dashed bg-neutral-50"
-    >
-      <AccordionTrigger
-        className={cn([
-          "capitalize gap-2 px-4",
-          "cursor-not-allowed opacity-50",
-        ])}
-      >
-        <div className="flex items-center gap-2">
-          {config.icon}
-          <span>{config.displayName}</span>
-          {config.badge && (
-            <span className="text-xs text-neutral-500 font-light border border-neutral-300 rounded-full px-2">
-              {config.badge}
-            </span>
-          )}
-        </div>
-      </AccordionTrigger>
-    </AccordionItem>
-  );
-}

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

@@ -0,0 +1,38 @@
+import {
+  AccordionItem,
+  AccordionTrigger,
+} from "@hypr/ui/components/ui/accordion";
+import { cn } from "@hypr/utils";
+
+import { PROVIDERS } from "../shared";
+
+export function DisabledProviderCard({
+  config,
+}: {
+  config: (typeof PROVIDERS)[number];
+}) {
+  return (
+    <AccordionItem
+      disabled
+      value={config.id}
+      className="rounded-xl border-2 border-dashed bg-neutral-50"
+    >
+      <AccordionTrigger
+        className={cn([
+          "capitalize gap-2 px-4",
+          "cursor-not-allowed opacity-50",
+        ])}
+      >
+        <div className="flex items-center gap-2">
+          {config.icon}
+          <span>{config.displayName}</span>
+          {config.badge && (
+            <span className="text-xs text-neutral-500 font-light border border-neutral-300 rounded-full px-2">
+              {config.badge}
+            </span>
+          )}
+        </div>
+      </AccordionTrigger>
+    </AccordionItem>
+  );
+}

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

@@ -0,0 +1,30 @@
+import { platform } from "@tauri-apps/plugin-os";
+
+import { Accordion } from "@hypr/ui/components/ui/accordion";
+
+import { PROVIDERS } from "../shared";
+import { AppleCalendarProviderCard } from "./apple";
+import { DisabledProviderCard } from "./cloud";
+
+export function ConfigureProviders() {
+  const isMacos = platform() === "macos";
+
+  const visibleProviders = PROVIDERS.filter(
+    (p) => p.platform === "all" || (p.platform === "macos" && isMacos),
+  );
+
+  return (
+    <div className="flex flex-col gap-3">
+      <h3 className="text-sm font-semibold">Configure Providers</h3>
+      <Accordion type="single" collapsible className="space-y-3">
+        {visibleProviders.map((provider) =>
+          provider.id === "apple" ? (
+            <AppleCalendarProviderCard key={provider.id} />
+          ) : (
+            <DisabledProviderCard key={provider.id} config={provider} />
+          ),
+        )}
+      </Accordion>
+    </div>
+  );
+}