Onboarding hotfix 5

apps/desktop/src/components/settings/views/sound.tsx

@@ -1,6 +1,7 @@
 import { Trans, useLingui } from "@lingui/react/macro";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { MicIcon, Volume2Icon } from "lucide-react";
+import { useState } from "react";
 
 import { commands as listenerCommands } from "@hypr/plugin-listener";
 import { Button } from "@hypr/ui/components/ui/button";
@@ -16,6 +17,7 @@ interface PermissionItemProps {
   done: boolean | undefined;
   isPending: boolean;
   onRequest: () => void;
+  buttonText: string;
 }
 
 function PermissionItem({
@@ -25,6 +27,7 @@ function PermissionItem({
   done,
   isPending,
   onRequest,
+  buttonText,
 }: PermissionItemProps) {
   return (
     <div
@@ -58,7 +61,7 @@ function PermissionItem({
                   <Trans>Requesting...</Trans>
                 </>
               )
-              : <Trans>Enable</Trans>}
+              : <Trans>{buttonText}</Trans>}
           </Button>
         )}
       </div>
@@ -69,6 +72,8 @@ function PermissionItem({
 export default function Sound() {
   const { t } = useLingui();
 
+  const [micPermissionRequested, setMicPermissionRequested] = useState(false);
+
   const micPermissionStatus = useQuery({
     queryKey: ["micPermission"],
     queryFn: () => listenerCommands.checkMicrophoneAccess(),
@@ -84,11 +89,15 @@ export default function Sound() {
   const micPermission = useMutation({
     mutationFn: () => listenerCommands.requestMicrophoneAccess(),
     onSuccess: () => {
+      setMicPermissionRequested(true);
       setTimeout(() => {
         micPermissionStatus.refetch();
       }, 3000);
     },
-    onError: console.error,
+    onError: (error) => {
+      setMicPermissionRequested(true);
+      console.error(error);
+    },
   });
 
   const capturePermission = useMutation({
@@ -102,6 +111,14 @@ export default function Sound() {
     onError: console.error,
   });
 
+  const handleMicPermissionAction = () => {
+    if (micPermissionRequested && !micPermissionStatus.data) {
+      listenerCommands.openMicrophoneAccessSettings();
+    } else {
+      micPermission.mutate();
+    }
+  };
+
   return (
     <div>
       <div className="space-y-2">
@@ -111,7 +128,8 @@ export default function Sound() {
           description={t`Required to transcribe your voice during meetings`}
           done={micPermissionStatus.data}
           isPending={micPermission.isPending}
-          onRequest={() => micPermission.mutate({})}
+          onRequest={handleMicPermissionAction}
+          buttonText={micPermissionRequested && !micPermissionStatus.data ? "Open Settings" : "Enable"}
         />
 
         <PermissionItem
@@ -121,6 +139,7 @@ export default function Sound() {
           done={systemAudioPermissionStatus.data}
           isPending={capturePermission.isPending}
           onRequest={() => capturePermission.mutate({})}
+          buttonText="Enable"
         />
       </div>
     </div>

apps/desktop/src/components/welcome-modal/audio-permissions-view.tsx

@@ -9,6 +9,7 @@ import { Spinner } from "@hypr/ui/components/ui/spinner";
 import { cn } from "@hypr/ui/lib/utils";
 import { message } from "@tauri-apps/plugin-dialog";
 import { relaunch } from "@tauri-apps/plugin-process";
+import { useState } from "react";
 
 interface PermissionItemProps {
   icon: React.ReactNode;
@@ -18,6 +19,7 @@ interface PermissionItemProps {
   isPending: boolean;
   onRequest: () => void;
   showSystemSettings?: boolean;
+  buttonText: string;
 }
 
 function PermissionItem({
@@ -28,6 +30,7 @@ function PermissionItem({
   isPending,
   onRequest,
   showSystemSettings = false,
+  buttonText,
 }: PermissionItemProps) {
   return (
     <div
@@ -76,7 +79,7 @@ function PermissionItem({
                     <Trans>Requesting...</Trans>
                   </>
                 )
-                : <Trans>Enable</Trans>}
+                : <Trans>{buttonText}</Trans>}
             </Button>
           </>
         )}
@@ -97,6 +100,8 @@ interface AudioPermissionsViewProps {
 export function AudioPermissionsView({ onContinue }: AudioPermissionsViewProps) {
   const { t } = useLingui();
 
+  const [micPermissionRequested, setMicPermissionRequested] = useState(false);
+
   const micPermissionStatus = useQuery({
     queryKey: ["micPermission"],
     queryFn: () => listenerCommands.checkMicrophoneAccess(),
@@ -112,11 +117,15 @@ export function AudioPermissionsView({ onContinue }: AudioPermissionsViewProps)
   const micPermission = useMutation({
     mutationFn: () => listenerCommands.requestMicrophoneAccess(),
     onSuccess: () => {
+      setMicPermissionRequested(true);
       setTimeout(() => {
         micPermissionStatus.refetch();
       }, 3000);
     },
-    onError: console.error,
+    onError: (error) => {
+      setMicPermissionRequested(true);
+      console.error(error);
+    },
   });
 
   const capturePermission = useMutation({
@@ -130,6 +139,14 @@ export function AudioPermissionsView({ onContinue }: AudioPermissionsViewProps)
     onError: console.error,
   });
 
+  const handleMicPermissionAction = () => {
+    if (micPermissionRequested && !micPermissionStatus.data) {
+      listenerCommands.openMicrophoneAccessSettings();
+    } else {
+      micPermission.mutate();
+    }
+  };
+
   const allPermissionsGranted = micPermissionStatus.data && systemAudioPermissionStatus.data;
 
   return (
@@ -149,7 +166,8 @@ export function AudioPermissionsView({ onContinue }: AudioPermissionsViewProps)
           description={t`Required for meeting transcription`}
           done={micPermissionStatus.data}
           isPending={micPermission.isPending}
-          onRequest={() => micPermission.mutate({})}
+          onRequest={handleMicPermissionAction}
+          buttonText={micPermissionRequested && !micPermissionStatus.data ? "Open Settings" : "Enable"}
         />
 
         <PermissionItem
@@ -159,6 +177,7 @@ export function AudioPermissionsView({ onContinue }: AudioPermissionsViewProps)
           done={systemAudioPermissionStatus.data}
           isPending={capturePermission.isPending}
           onRequest={() => capturePermission.mutate({})}
+          buttonText="Enable"
         />
       </div>
 

apps/desktop/src/components/welcome-modal/index.tsx

@@ -14,7 +14,7 @@ import { Particles } from "@hypr/ui/components/ui/particles";
 import { commands as dbCommands } from "@hypr/plugin-db";
 import { commands as localLlmCommands } from "@hypr/plugin-local-llm";
 import { AudioPermissionsView } from "./audio-permissions-view";
-import { CalendarPermissionsView } from "./calendar-permissions-view";
+// import { CalendarPermissionsView } from "./calendar-permissions-view";
 import { DownloadProgressView } from "./download-progress-view";
 import { LanguageSelectionView } from "./language-selection-view";
 import { ModelSelectionView } from "./model-selection-view";
@@ -35,7 +35,6 @@ export function WelcomeModal({ isOpen, onClose }: WelcomeModalProps) {
     | "download-progress"
     | "audio-permissions"
     | "language-selection"
-    | "calendar-permissions"
   >("welcome");
   const [selectedSttModel, setSelectedSttModel] = useState<SupportedModel>("QuantizedSmall");
   const [wentThroughDownloads, setWentThroughDownloads] = useState(false);
@@ -109,7 +108,6 @@ export function WelcomeModal({ isOpen, onClose }: WelcomeModalProps) {
   };
 
   const handleLanguageSelectionContinue = async (languages: string[]) => {
-    // Save the selected languages to the database
     try {
       const config = await dbCommands.getConfig();
       await dbCommands.setConfig({
@@ -123,17 +121,12 @@ export function WelcomeModal({ isOpen, onClose }: WelcomeModalProps) {
       console.error("Failed to save language preferences:", error);
     }
 
-    setCurrentStep("calendar-permissions");
-  };
-
-  const handleCalendarPermissionsContinue = () => {
     commands.setOnboardingNeeded(false);
     onClose();
   };
 
   useEffect(() => {
     if (!isOpen && wentThroughDownloads) {
-      // start servers for mockup & tutorial
       localSttCommands.startServer();
       localLlmCommands.startServer();
 
@@ -195,11 +188,6 @@ export function WelcomeModal({ isOpen, onClose }: WelcomeModalProps) {
               onContinue={handleLanguageSelectionContinue}
             />
           )}
-          {currentStep === "calendar-permissions" && (
-            <CalendarPermissionsView
-              onContinue={handleCalendarPermissionsContinue}
-            />
-          )}
         </div>
 
         <Particles

apps/desktop/src/components/welcome-modal/language-selection-view.tsx

@@ -177,7 +177,7 @@ export function LanguageSelectionView({ onContinue }: LanguageSelectionViewProps
         className="w-full max-w-sm"
         disabled={selectedLanguages.length === 0}
       >
-        <Trans>Continue</Trans>
+        <Trans>Finish Onboarding</Trans>
       </PushableButton>
     </div>
   );