permission check troubleshooting utils in frontend and in dev

Author: yujonglee

Cargo.lock

@@ -43,6 +43,7 @@ hypr-audio-interface = { path = "crates/audio-interface", package = "audio-inter
 hypr-audio-priority = { path = "crates/audio-priority", package = "audio-priority" }
 hypr-audio-utils = { path = "crates/audio-utils", package = "audio-utils" }
 hypr-buffer = { path = "crates/buffer", package = "buffer" }
+hypr-bundle = { path = "crates/bundle", package = "bundle" }
 hypr-data = { path = "crates/data", package = "data" }
 hypr-db-core = { path = "crates/db-core", package = "db-core" }
 hypr-db-user = { path = "crates/db-user", package = "db-user" }

Cargo.toml

@@ -1,17 +1,17 @@
 import { openUrl } from "@tauri-apps/plugin-opener";
 
-import { commands as permissionsCommands } from "@hypr/plugin-permissions";
 import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "@hypr/ui/components/ui/accordion";
 
+import { usePermission } from "../../../../../hooks/use-permissions";
 import { StyledStreamdown } from "../../../ai/shared";
 import { PROVIDERS } from "../../shared";
 import { AppleCalendarSelection } from "./calendar-selection";
 import { SyncProvider } from "./context";
-import { AccessPermissionRow, useAccessPermission } from "./permission";
+import { AccessPermissionRow } from "./permission";
 
 export function Section({
   title,
@@ -38,19 +38,8 @@ export function Section({
 export function AppleCalendarProviderCard() {
   const config = PROVIDERS.find((p) => p.id === "apple")!;
 
-  const calendar = useAccessPermission({
-    queryKey: "appleCalendarAccess",
-    checkPermission: () => permissionsCommands.checkPermission("calendar"),
-    requestPermission: () => permissionsCommands.requestPermission("calendar"),
-    openSettings: () => permissionsCommands.openPermission("calendar"),
-  });
-
-  const contacts = useAccessPermission({
-    queryKey: "appleContactsAccess",
-    checkPermission: () => permissionsCommands.checkPermission("contacts"),
-    requestPermission: () => permissionsCommands.requestPermission("contacts"),
-    openSettings: () => permissionsCommands.openPermission("contacts"),
-  });
+  const calendar = usePermission("calendar");
+  const contacts = usePermission("contacts");
 
   return (
     <AccordionItem
@@ -85,25 +74,25 @@ export function AppleCalendarProviderCard() {
         <Section title="Permissions">
           <div className="space-y-1">
             <AccessPermissionRow
-              title="Calendar Access"
-              grantedDescription="Permission granted. Click to open settings."
-              requestDescription="Grant access to sync events from your Apple Calendar"
-              isAuthorized={calendar.isAuthorized}
+              title="Calendar"
+              status={calendar.status}
               isPending={calendar.isPending}
-              onAction={calendar.handleAction}
+              onOpen={calendar.open}
+              onRequest={calendar.request}
+              onReset={calendar.reset}
             />
             <AccessPermissionRow
-              title="Contacts Access"
-              grantedDescription="Permission granted. Click to open settings."
-              requestDescription="Grant access to match participants with your contacts"
-              isAuthorized={contacts.isAuthorized}
+              title="Contacts"
+              status={contacts.status}
               isPending={contacts.isPending}
-              onAction={contacts.handleAction}
+              onOpen={contacts.open}
+              onRequest={contacts.request}
+              onReset={contacts.reset}
             />
           </div>
         </Section>
 
-        {calendar.isAuthorized && (
+        {calendar.status === "authorized" && (
           <SyncProvider>
             <AppleCalendarSelection />
           </SyncProvider>

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

@@ -1,69 +1,61 @@
-import { useMutation, useQuery } from "@tanstack/react-query";
 import { AlertCircleIcon, ArrowRightIcon, CheckIcon } from "lucide-react";
+import { useState } from "react";
 
 import { type PermissionStatus } from "@hypr/plugin-permissions";
 import { Button } from "@hypr/ui/components/ui/button";
 import { cn } from "@hypr/utils";
 
-export function useAccessPermission(config: {
-  queryKey: string;
-  checkPermission: () => Promise<
-    | { status: "ok"; data: PermissionStatus }
-    | { status: "error"; error: string }
-  >;
-  requestPermission: () => Promise<unknown>;
-  openSettings: () => Promise<unknown>;
+function ActionLink({
+  onClick,
+  disabled,
+  children,
+}: {
+  onClick: () => void;
+  disabled?: boolean;
+  children: React.ReactNode;
 }) {
-  const status = useQuery({
-    queryKey: [config.queryKey],
-    queryFn: async () => {
-      const result = await config.checkPermission();
-      if (result.status === "ok") {
-        return result.data;
-      }
-      return "denied" as PermissionStatus;
-    },
-    refetchInterval: 1000,
-  });
-
-  const requestAccess = useMutation({
-    mutationFn: config.requestPermission,
-    onSuccess: () => {
-      setTimeout(() => status.refetch(), 1000);
-    },
-  });
-
-  const isAuthorized = status.data === "authorized";
-  const isPending = requestAccess.isPending;
-
-  const handleAction = async () => {
-    if (isAuthorized) {
-      await config.openSettings();
-    } else if (status.data === "denied") {
-      await config.openSettings();
-    } else {
-      requestAccess.mutate();
-    }
-  };
-
-  return { status: status.data, isAuthorized, isPending, handleAction };
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      className={cn([
+        "underline hover:text-neutral-900 transition-colors",
+        disabled && "opacity-50 cursor-not-allowed",
+      ])}
+    >
+      {children}
+    </button>
+  );
 }
 
 export function AccessPermissionRow({
   title,
-  grantedDescription,
-  requestDescription,
-  isAuthorized,
+  status,
   isPending,
-  onAction,
+  onOpen,
+  onRequest,
+  onReset,
 }: {
   title: string;
-  grantedDescription: string;
-  requestDescription: string;
-  isAuthorized: boolean;
+  status: PermissionStatus | undefined;
   isPending: boolean;
-  onAction: () => void;
+  onOpen: () => void;
+  onRequest: () => void;
+  onReset: () => void;
 }) {
+  const [showActions, setShowActions] = useState(false);
+  const isAuthorized = status === "authorized";
+  const isDenied = status === "denied";
+
+  const handleButtonClick = () => {
+    if (isAuthorized || isDenied) {
+      onOpen();
+    } else {
+      onRequest();
+    }
+  };
+
   return (
     <div className="flex items-center justify-between gap-4 py-2">
       <div className="flex-1">
@@ -76,14 +68,37 @@ export function AccessPermissionRow({
           {!isAuthorized && <AlertCircleIcon className="size-4" />}
           <h3 className="text-sm font-medium">{title}</h3>
         </div>
-        <p className="text-xs text-neutral-600">
-          {isAuthorized ? grantedDescription : requestDescription}
-        </p>
+        <div className="text-xs text-neutral-600">
+          {!showActions ? (
+            <button
+              type="button"
+              onClick={() => setShowActions(true)}
+              className="underline hover:text-neutral-900 transition-colors"
+            >
+              Having trouble?
+            </button>
+          ) : (
+            <div>
+              You can{" "}
+              <ActionLink onClick={onRequest} disabled={isPending}>
+                Request,
+              </ActionLink>{" "}
+              <ActionLink onClick={onReset} disabled={isPending}>
+                Reset
+              </ActionLink>{" "}
+              or{" "}
+              <ActionLink onClick={onOpen} disabled={isPending}>
+                Open
+              </ActionLink>{" "}
+              permission panel.
+            </div>
+          )}
+        </div>
       </div>
       <Button
         variant={isAuthorized ? "outline" : "default"}
         size="icon"
-        onClick={onAction}
+        onClick={handleButtonClick}
         disabled={isPending}
         className={cn([
           "size-8",