fix: properly handle permissions on macos

src/app/page.tsx

@@ -3,6 +3,7 @@
 import { ChangeVersionDialog } from "@/components/change-version-dialog";
 import { CreateProfileDialog } from "@/components/create-profile-dialog";
 import { ImportProfileDialog } from "@/components/import-profile-dialog";
+import { PermissionDialog } from "@/components/permission-dialog";
 import { ProfilesDataTable } from "@/components/profile-data-table";
 import { ProfileSelectorDialog } from "@/components/profile-selector-dialog";
 import { ProxySettingsDialog } from "@/components/proxy-settings-dialog";
@@ -21,6 +22,8 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { useAppUpdateNotifications } from "@/hooks/use-app-update-notifications";
+import { usePermissions } from "@/hooks/use-permissions";
+import type { PermissionType } from "@/hooks/use-permissions";
 import { useUpdateNotifications } from "@/hooks/use-update-notifications";
 import { showErrorToast } from "@/lib/toast-utils";
 import type { BrowserProfile, ProxySettings } from "@/types";
@@ -58,6 +61,11 @@ export default function Home() {
   const [currentProfileForVersionChange, setCurrentProfileForVersionChange] =
     useState<BrowserProfile | null>(null);
   const [hasCheckedStartupPrompt, setHasCheckedStartupPrompt] = useState(false);
+  const [permissionDialogOpen, setPermissionDialogOpen] = useState(false);
+  const [currentPermissionType, setCurrentPermissionType] =
+    useState<PermissionType>("microphone");
+  const { isMicrophoneAccessGranted, isCameraAccessGranted, isInitialized } =
+    usePermissions();
 
   // Simple profiles loader without updates check (for use as callback)
   const loadProfiles = useCallback(async () => {
@@ -119,6 +127,13 @@ export default function Home() {
     };
   }, [loadProfilesWithUpdateCheck, checkForUpdates]);
 
+  // Check permissions when they are initialized
+  useEffect(() => {
+    if (isInitialized) {
+      void checkAllPermissions();
+    }
+  }, [isInitialized]);
+
   const checkStartupPrompt = async () => {
     // Only check once during app startup to prevent reopening after dismissing notifications
     if (hasCheckedStartupPrompt) return;
@@ -137,6 +152,42 @@ export default function Home() {
     }
   };
 
+  const checkAllPermissions = async () => {
+    try {
+      // Wait for permissions to be initialized before checking
+      if (!isInitialized) {
+        return;
+      }
+
+      // Check if any permissions are not granted - prioritize missing permissions
+      if (!isMicrophoneAccessGranted) {
+        setCurrentPermissionType("microphone");
+        setPermissionDialogOpen(true);
+      } else if (!isCameraAccessGranted) {
+        setCurrentPermissionType("camera");
+        setPermissionDialogOpen(true);
+      }
+    } catch (error) {
+      console.error("Failed to check permissions:", error);
+    }
+  };
+
+  const checkNextPermission = () => {
+    try {
+      if (!isMicrophoneAccessGranted) {
+        setCurrentPermissionType("microphone");
+        setPermissionDialogOpen(true);
+      } else if (!isCameraAccessGranted) {
+        setCurrentPermissionType("camera");
+        setPermissionDialogOpen(true);
+      } else {
+        setPermissionDialogOpen(false);
+      }
+    } catch (error) {
+      console.error("Failed to check next permission:", error);
+    }
+  };
+
   const checkStartupUrls = async () => {
     try {
       const hasStartupUrl = await invoke<boolean>(
@@ -533,6 +584,15 @@ export default function Home() {
           runningProfiles={runningProfiles}
         />
       ))}
+
+      <PermissionDialog
+        isOpen={permissionDialogOpen}
+        onClose={() => {
+          setPermissionDialogOpen(false);
+        }}
+        permissionType={currentPermissionType}
+        onPermissionGranted={checkNextPermission}
+      />
     </div>
   );
 }

src/components/permission-dialog.tsx

@@ -0,0 +1,182 @@
+"use client";
+
+import { LoadingButton } from "@/components/loading-button";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { usePermissions } from "@/hooks/use-permissions";
+import type { PermissionType } from "@/hooks/use-permissions";
+import { showErrorToast, showSuccessToast } from "@/lib/toast-utils";
+import { useEffect, useState } from "react";
+import { BsCamera, BsMic } from "react-icons/bs";
+
+interface PermissionDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  permissionType: PermissionType;
+  onPermissionGranted?: () => void;
+}
+
+export function PermissionDialog({
+  isOpen,
+  onClose,
+  permissionType,
+  onPermissionGranted,
+}: PermissionDialogProps) {
+  const [isRequesting, setIsRequesting] = useState(false);
+  const [isMacOS, setIsMacOS] = useState(false);
+  const {
+    requestPermission,
+    isMicrophoneAccessGranted,
+    isCameraAccessGranted,
+  } = usePermissions();
+
+  // Check if we're on macOS and close dialog if not
+  useEffect(() => {
+    const userAgent = navigator.userAgent;
+    const isMac = userAgent.includes("Mac");
+    setIsMacOS(isMac);
+
+    // If not macOS, close the dialog as permissions aren't needed
+    if (!isMac) {
+      onClose();
+    }
+  }, [onClose]);
+
+  // Get current permission status
+  const isCurrentPermissionGranted =
+    permissionType === "microphone"
+      ? isMicrophoneAccessGranted
+      : isCameraAccessGranted;
+
+  // Auto-close dialog when permission is granted
+  useEffect(() => {
+    if (isCurrentPermissionGranted && isOpen) {
+      onPermissionGranted?.();
+    }
+  }, [isCurrentPermissionGranted, isOpen, onPermissionGranted]);
+
+  const getPermissionIcon = (type: PermissionType) => {
+    switch (type) {
+      case "microphone":
+        return <BsMic className="w-8 h-8" />;
+      case "camera":
+        return <BsCamera className="w-8 h-8" />;
+    }
+  };
+
+  const getPermissionTitle = (type: PermissionType) => {
+    switch (type) {
+      case "microphone":
+        return "Microphone Access Required";
+      case "camera":
+        return "Camera Access Required";
+    }
+  };
+
+  const getPermissionDescription = (type: PermissionType) => {
+    switch (type) {
+      case "microphone":
+        return "Donut Browser needs access to your microphone to enable microphone functionality in web browsers. Each website that wants to use your microphone will still ask for your permission individually.";
+      case "camera":
+        return "Donut Browser needs access to your camera to enable camera functionality in web browsers. Each website that wants to use your camera will still ask for your permission individually.";
+    }
+  };
+
+  const getStatusBadge = (isGranted: boolean) => {
+    if (isGranted) {
+      return (
+        <Badge variant="default" className="text-green-800 bg-green-100">
+          Granted
+        </Badge>
+      );
+    }
+    return <Badge variant="secondary">Not Granted</Badge>;
+  };
+
+  const handleRequestPermission = async () => {
+    setIsRequesting(true);
+    try {
+      await requestPermission(permissionType);
+      showSuccessToast(
+        `${getPermissionTitle(permissionType).replace(
+          " Required",
+          "",
+        )} permission requested`,
+      );
+    } catch (error) {
+      console.error("Failed to request permission:", error);
+      showErrorToast("Failed to request permission");
+    } finally {
+      setIsRequesting(false);
+    }
+  };
+
+  // Don't render if not macOS
+  if (!isMacOS) {
+    return null;
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-w-md">
+        <DialogHeader className="text-center">
+          <div className="flex justify-center items-center mx-auto mb-4 w-16 h-16 bg-blue-100 rounded-full dark:bg-blue-900">
+            {getPermissionIcon(permissionType)}
+          </div>
+          <DialogTitle className="text-xl">
+            {getPermissionTitle(permissionType)}
+          </DialogTitle>
+          <DialogDescription className="text-base">
+            {getPermissionDescription(permissionType)}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {isCurrentPermissionGranted && (
+            <div className="p-3 bg-green-50 rounded-lg dark:bg-green-900/20">
+              <p className="text-sm text-green-800 dark:text-green-200">
+                ✅ Permission granted! Browsers launched from Donut Browser can
+                now access your {permissionType}.
+              </p>
+            </div>
+          )}
+
+          {!isCurrentPermissionGranted && (
+            <div className="p-3 bg-amber-50 rounded-lg dark:bg-amber-900/20">
+              <p className="text-sm text-amber-800 dark:text-amber-200">
+                ⚠️ Permission not granted. Click the button below to request
+                access to your {permissionType}.
+              </p>
+            </div>
+          )}
+        </div>
+
+        <DialogFooter className="gap-2">
+          <Button variant="outline" onClick={onClose}>
+            {isCurrentPermissionGranted ? "Done" : "Cancel"}
+          </Button>
+
+          {!isCurrentPermissionGranted && (
+            <LoadingButton
+              isLoading={isRequesting}
+              onClick={() => {
+                handleRequestPermission().catch(console.error);
+              }}
+              className="min-w-24"
+            >
+              Grant Access
+            </LoadingButton>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/settings-dialog.tsx

@@ -19,10 +19,13 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { usePermissions } from "@/hooks/use-permissions";
+import type { PermissionType } from "@/hooks/use-permissions";
 import { showSuccessToast } from "@/lib/toast-utils";
 import { invoke } from "@tauri-apps/api/core";
 import { useTheme } from "next-themes";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
+import { BsCamera, BsMic } from "react-icons/bs";
 
 interface AppSettings {
   set_as_default_browser: boolean;
@@ -32,6 +35,12 @@ interface AppSettings {
   auto_delete_unused_binaries: boolean;
 }
 
+interface PermissionInfo {
+  permission_type: PermissionType;
+  isGranted: boolean;
+  description: string;
+}
+
 interface SettingsDialogProps {
   isOpen: boolean;
   onClose: () => void;
@@ -57,18 +66,46 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
   const [isSaving, setIsSaving] = useState(false);
   const [isSettingDefault, setIsSettingDefault] = useState(false);
   const [isClearingCache, setIsClearingCache] = useState(false);
+  const [permissions, setPermissions] = useState<PermissionInfo[]>([]);
+  const [isLoadingPermissions, setIsLoadingPermissions] = useState(false);
+  const [requestingPermission, setRequestingPermission] =
+    useState<PermissionType | null>(null);
+  const [isMacOS, setIsMacOS] = useState(false);
 
   const { setTheme } = useTheme();
+  const {
+    requestPermission,
+    isMicrophoneAccessGranted,
+    isCameraAccessGranted,
+  } = usePermissions();
+
+  const getPermissionDescription = useCallback((type: PermissionType) => {
+    switch (type) {
+      case "microphone":
+        return "Access to microphone for browser applications";
+      case "camera":
+        return "Access to camera for browser applications";
+    }
+  }, []);
 
   useEffect(() => {
     if (isOpen) {
-      void loadSettings();
-      void checkDefaultBrowserStatus();
+      loadSettings().catch(console.error);
+      checkDefaultBrowserStatus().catch(console.error);
+
+      // Check if we're on macOS
+      const userAgent = navigator.userAgent;
+      const isMac = userAgent.includes("Mac");
+      setIsMacOS(isMac);
+
+      if (isMac) {
+        loadPermissions().catch(console.error);
+      }
 
       // Set up interval to check default browser status
       const intervalId = setInterval(() => {
-        void checkDefaultBrowserStatus();
-      }, 500); // Check every 2 seconds
+        checkDefaultBrowserStatus().catch(console.error);
+      }, 500); // Check every 500ms
 
       // Cleanup interval on component unmount or dialog close
       return () => {
@@ -77,6 +114,32 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
     }
   }, [isOpen]);
 
+  // Update permissions when the permission states change
+  useEffect(() => {
+    if (isMacOS) {
+      const permissionList: PermissionInfo[] = [
+        {
+          permission_type: "microphone",
+          isGranted: isMicrophoneAccessGranted,
+          description: getPermissionDescription("microphone"),
+        },
+        {
+          permission_type: "camera",
+          isGranted: isCameraAccessGranted,
+          description: getPermissionDescription("camera"),
+        },
+      ];
+      setPermissions(permissionList);
+    } else {
+      setPermissions([]);
+    }
+  }, [
+    isMacOS,
+    isMicrophoneAccessGranted,
+    isCameraAccessGranted,
+    getPermissionDescription,
+  ]);
+
   const loadSettings = async () => {
     setIsLoading(true);
     try {
@@ -90,6 +153,36 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
     }
   };
 
+  const loadPermissions = async () => {
+    setIsLoadingPermissions(true);
+    try {
+      if (!isMacOS) {
+        // On non-macOS platforms, don't show permissions
+        setPermissions([]);
+        return;
+      }
+
+      const permissionList: PermissionInfo[] = [
+        {
+          permission_type: "microphone",
+          isGranted: isMicrophoneAccessGranted,
+          description: getPermissionDescription("microphone"),
+        },
+        {
+          permission_type: "camera",
+          isGranted: isCameraAccessGranted,
+          description: getPermissionDescription("camera"),
+        },
+      ];
+
+      setPermissions(permissionList);
+    } catch (error) {
+      console.error("Failed to load permissions:", error);
+    } finally {
+      setIsLoadingPermissions(false);
+    }
+  };
+
   const checkDefaultBrowserStatus = async () => {
     try {
       const isDefault = await invoke<boolean>("is_default_browser");
@@ -127,6 +220,49 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
     }
   };
 
+  const handleRequestPermission = async (permissionType: PermissionType) => {
+    setRequestingPermission(permissionType);
+    try {
+      await requestPermission(permissionType);
+      showSuccessToast(
+        `${getPermissionDisplayName(permissionType)} access requested`,
+      );
+    } catch (error) {
+      console.error("Failed to request permission:", error);
+    } finally {
+      setRequestingPermission(null);
+    }
+  };
+
+  const getPermissionIcon = (type: PermissionType) => {
+    switch (type) {
+      case "microphone":
+        return <BsMic className="h-4 w-4" />;
+      case "camera":
+        return <BsCamera className="h-4 w-4" />;
+    }
+  };
+
+  const getPermissionDisplayName = (type: PermissionType) => {
+    switch (type) {
+      case "microphone":
+        return "Microphone";
+      case "camera":
+        return "Camera";
+    }
+  };
+
+  const getStatusBadge = (isGranted: boolean) => {
+    if (isGranted) {
+      return (
+        <Badge variant="default" className="bg-green-100 text-green-800">
+          Granted
+        </Badge>
+      );
+    }
+    return <Badge variant="secondary">Not Granted</Badge>;
+  };
+
   const handleSave = async () => {
     setIsSaving(true);
     try {
@@ -204,7 +340,7 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
             <LoadingButton
               isLoading={isSettingDefault}
               onClick={() => {
-                void handleSetDefaultBrowser();
+                handleSetDefaultBrowser().catch(console.error);
               }}
               disabled={isDefaultBrowser}
               variant={isDefaultBrowser ? "outline" : "default"}
@@ -284,6 +420,69 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
             </p>
           </div>
 
+          {/* Permissions Section - Only show on macOS */}
+          {isMacOS && (
+            <div className="space-y-4">
+              <Label className="text-base font-medium">
+                System Permissions
+              </Label>
+
+              {isLoadingPermissions ? (
+                <div className="text-sm text-muted-foreground">
+                  Loading permissions...
+                </div>
+              ) : (
+                <div className="space-y-3">
+                  {permissions.map((permission) => (
+                    <div
+                      key={permission.permission_type}
+                      className="flex items-center justify-between p-3 border rounded-lg"
+                    >
+                      <div className="flex items-center space-x-3">
+                        {getPermissionIcon(permission.permission_type)}
+                        <div>
+                          <div className="text-sm font-medium">
+                            {getPermissionDisplayName(
+                              permission.permission_type,
+                            )}
+                          </div>
+                          <div className="text-xs text-muted-foreground">
+                            {permission.description}
+                          </div>
+                        </div>
+                      </div>
+                      <div className="flex items-center space-x-2">
+                        {getStatusBadge(permission.isGranted)}
+                        {!permission.isGranted && (
+                          <LoadingButton
+                            size="sm"
+                            isLoading={
+                              requestingPermission ===
+                              permission.permission_type
+                            }
+                            onClick={() => {
+                              handleRequestPermission(
+                                permission.permission_type,
+                              ).catch(console.error);
+                            }}
+                          >
+                            Grant
+                          </LoadingButton>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              <p className="text-xs text-muted-foreground">
+                These permissions allow browsers launched from Donut Browser to
+                access system resources. Each website will still ask for your
+                permission individually.
+              </p>
+            </div>
+          )}
+
           {/* Advanced Section */}
           <div className="space-y-4">
             <Label className="text-base font-medium">Advanced</Label>
@@ -291,7 +490,7 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
             <LoadingButton
               isLoading={isClearingCache}
               onClick={() => {
-                void handleClearCache();
+                handleClearCache().catch(console.error);
               }}
               variant="outline"
               className="w-full"
@@ -314,7 +513,7 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
           <LoadingButton
             isLoading={isSaving}
             onClick={() => {
-              void handleSave();
+              handleSave().catch(console.error);
             }}
             disabled={isLoading || !hasChanges}
           >

src/hooks/use-permissions.ts

@@ -0,0 +1,174 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+// Platform-specific imports
+let macOSPermissions:
+  | typeof import("tauri-plugin-macos-permissions-api")
+  | null = null;
+
+// Dynamically import macOS permissions only when needed
+const loadMacOSPermissions = async () => {
+  if (macOSPermissions) return macOSPermissions;
+
+  try {
+    macOSPermissions = await import("tauri-plugin-macos-permissions-api");
+    return macOSPermissions;
+  } catch (error) {
+    console.warn("Failed to load macOS permissions API:", error);
+    return null;
+  }
+};
+
+export type PermissionType = "microphone" | "camera";
+
+export interface UsePermissionsReturn {
+  requestPermission: (type: PermissionType) => Promise<void>;
+  isMicrophoneAccessGranted: boolean;
+  isCameraAccessGranted: boolean;
+  isInitialized: boolean;
+}
+
+export function usePermissions(): UsePermissionsReturn {
+  const [isMicrophoneAccessGranted, setIsMicrophoneAccessGranted] =
+    useState(false);
+  const [isCameraAccessGranted, setIsCameraAccessGranted] = useState(false);
+  const [currentPlatform, setCurrentPlatform] = useState<string | null>(null);
+  const [isInitialized, setIsInitialized] = useState(false);
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Check permissions status
+  const checkPermissions = useCallback(async () => {
+    if (!currentPlatform) return;
+
+    if (currentPlatform !== "macos") {
+      // Windows/Linux - assume permissions are granted
+      setIsMicrophoneAccessGranted(true);
+      setIsCameraAccessGranted(true);
+      setIsInitialized(true);
+      return;
+    }
+
+    // macOS - use the permissions API
+    try {
+      const permissions = await loadMacOSPermissions();
+      if (permissions) {
+        const [micGranted, camGranted] = await Promise.all([
+          permissions.checkMicrophonePermission(),
+          permissions.checkCameraPermission(),
+        ]);
+
+        setIsMicrophoneAccessGranted(micGranted);
+        setIsCameraAccessGranted(camGranted);
+        setIsInitialized(true);
+      }
+    } catch (error) {
+      console.error("Failed to check permissions on macOS:", error);
+      setIsInitialized(true);
+    }
+  }, [currentPlatform]);
+
+  // Request permission
+  const requestPermission = useCallback(
+    async (type: PermissionType): Promise<void> => {
+      if (!currentPlatform || currentPlatform !== "macos") return;
+
+      // macOS - use the permissions API
+      try {
+        const permissions = await loadMacOSPermissions();
+        if (!permissions) return;
+
+        if (type === "microphone") {
+          await permissions.requestMicrophonePermission();
+
+          // Poll for permission status change
+          const pollMicPermission = async () => {
+            const granted = await permissions.checkMicrophonePermission();
+            setIsMicrophoneAccessGranted(granted);
+
+            if (!granted) {
+              setTimeout(() => {
+                void pollMicPermission();
+              }, 1000);
+            }
+          };
+
+          await pollMicPermission();
+        }
+
+        if (type === "camera") {
+          await permissions.requestCameraPermission();
+
+          // Poll for permission status change
+          const pollCamPermission = async () => {
+            const granted = await permissions.checkCameraPermission();
+            setIsCameraAccessGranted(granted);
+
+            if (!granted) {
+              setTimeout(() => {
+                void pollCamPermission();
+              }, 1000);
+            }
+          };
+
+          await pollCamPermission();
+        }
+      } catch (error) {
+        console.error(`Failed to request ${type} permission on macOS:`, error);
+      }
+    },
+    [currentPlatform],
+  );
+
+  // Initialize platform detection and start interval checking
+  useEffect(() => {
+    const initializePlatform = async () => {
+      try {
+        // Detect platform - on macOS we need permissions, on others we don't
+        const userAgent = navigator.userAgent;
+        let platformName = "unknown";
+
+        if (userAgent.includes("Mac")) {
+          platformName = "macos";
+        } else if (userAgent.includes("Win")) {
+          platformName = "windows";
+        } else if (userAgent.includes("Linux")) {
+          platformName = "linux";
+        }
+
+        setCurrentPlatform(platformName);
+      } catch (error) {
+        console.error("Failed to detect platform:", error);
+        // Fallback - assume non-macOS
+        setCurrentPlatform("unknown");
+      }
+    };
+
+    initializePlatform().catch(console.error);
+  }, []);
+
+  // Set up interval checking when platform is determined
+  useEffect(() => {
+    if (!currentPlatform) return;
+
+    // Initial check
+    void checkPermissions();
+
+    // Set up 500ms interval for checking permissions
+    intervalRef.current = setInterval(() => {
+      void checkPermissions();
+    }, 500);
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [currentPlatform, checkPermissions]);
+
+  return {
+    requestPermission,
+    isMicrophoneAccessGranted,
+    isCameraAccessGranted,
+    isInitialized,
+  };
+}

src/types.ts

@@ -40,3 +40,17 @@ export interface AppVersionInfo {
   version: string;
   is_nightly: boolean;
 }
+
+export type PermissionType = "microphone" | "camera" | "location";
+
+export type PermissionStatus =
+  | "granted"
+  | "denied"
+  | "not_determined"
+  | "restricted";
+
+export interface PermissionInfo {
+  permission_type: PermissionType;
+  status: PermissionStatus;
+  description: string;
+}