feat(navigation): add navigate event to IPCEvents and handle navigation in main process

feat(auth): update logo path in LoginForm to use BASE_URL
feat(home): enhance capture handling with loading state and user-friendly error messages
feat(settings): add error handling for cloud save settings with user feedback release:patch

Author: ralyodio

apps/desktop/src/preload/api.ts

@@ -308,6 +308,7 @@ export interface IPCEvents {
   'recording:space-warning': { availableGb: number };
   'tray:end-session': undefined;
   'tray:toggle-pause': undefined;
+  navigate: string;
 }
 
 // Type helpers for the API

apps/desktop/src/renderer/components/auth/LoginForm.tsx

@@ -64,7 +64,7 @@ export function LoginForm() {
     <Card className="w-full max-w-md border-border">
       <CardHeader className="space-y-1 text-center">
         <div className="mb-4 flex justify-center">
-          <img src="/logo.svg" alt="PairUX" className="h-12 w-12" />
+          <img src={`${import.meta.env.BASE_URL}logo.svg`} alt="PairUX" className="h-12 w-12" />
         </div>
         <CardTitle className="text-2xl font-semibold">Welcome back</CardTitle>
         <CardDescription>Sign in to your PairUX account</CardDescription>

apps/desktop/src/renderer/main.tsx

@@ -2,8 +2,17 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { RouterProvider } from 'react-router-dom';
 import { router } from './routes';
+import { getElectronAPI, isElectron } from './lib/ipc';
 import './styles/globals.css';
 
+// Listen for navigation events from main process (menu, tray, etc.)
+if (isElectron()) {
+  const api = getElectronAPI();
+  api.on('navigate', (path) => {
+    void router.navigate(path);
+  });
+}
+
 const rootElement = document.getElementById('root');
 if (rootElement) {
   ReactDOM.createRoot(rootElement).render(

apps/desktop/src/renderer/routes/home.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Users, Link2 } from 'lucide-react';
+import { Users, Link2, Loader2 } from 'lucide-react';
 import { SourcePicker } from '@/components/capture/SourcePicker';
 import { CapturePreview } from '@/components/capture/CapturePreview';
 import { CreateLinkModal } from '@/components/CreateLinkModal';
@@ -17,6 +17,7 @@ export function HomePage() {
   const [error, setError] = useState<string | null>(null);
   const [displayServer, setDisplayServer] = useState<DisplayServer>('x11');
   const [isWayland, setIsWayland] = useState(false);
+  const [isCapturing, setIsCapturing] = useState(false);
   const [showCreateLinkModal, setShowCreateLinkModal] = useState(false);
   const [preCreatedSession, setPreCreatedSession] = useState<Session | null>(null);
 
@@ -31,8 +32,12 @@ export function HomePage() {
   }, []);
 
   const handleSourceSelect = async (source: CaptureSource) => {
+    // Prevent multiple concurrent capture attempts
+    if (isCapturing) return;
+
     setSelectedSource(source);
     setError(null);
+    setIsCapturing(true);
 
     try {
       // Stop existing stream
@@ -77,14 +82,24 @@ export function HomePage() {
     } catch (err) {
       console.error('[Renderer] Failed to start capture:', err);
       const message = err instanceof Error ? err.message : 'Unknown error';
-      setError(`Failed to capture: ${message}`);
+      // Provide more user-friendly error messages
+      if (message.includes('Permission denied') || message.includes('NotAllowedError')) {
+        setError('Screen capture was canceled or permission denied. Please try again.');
+      } else {
+        setError(`Failed to capture: ${message}`);
+      }
       setSelectedSource(null);
+    } finally {
+      setIsCapturing(false);
     }
   };
 
   // Handle Wayland direct capture (bypasses source picker)
   const handleWaylandCapture = async () => {
+    if (isCapturing) return;
+
     setError(null);
+    setIsCapturing(true);
 
     try {
       if (stream) {
@@ -116,7 +131,13 @@ export function HomePage() {
     } catch (err) {
       console.error('[Renderer] Failed to start Wayland capture:', err);
       const message = err instanceof Error ? err.message : 'Unknown error';
-      setError(`Failed to capture: ${message}`);
+      if (message.includes('Permission denied') || message.includes('NotAllowedError')) {
+        setError('Screen capture was canceled or permission denied. Please try again.');
+      } else {
+        setError(`Failed to capture: ${message}`);
+      }
+    } finally {
+      setIsCapturing(false);
     }
   };
 
@@ -147,22 +168,36 @@ export function HomePage() {
       )}
 
       {!stream ? (
-        <>
+        <div className="relative">
+          {/* Loading overlay */}
+          {isCapturing && (
+            <div className="absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-background/80 backdrop-blur-sm">
+              <div className="flex flex-col items-center gap-3">
+                <Loader2 className="h-8 w-8 animate-spin text-primary" />
+                <p className="text-sm text-muted-foreground">
+                  {isWayland ? 'Waiting for system screen picker...' : 'Starting capture...'}
+                </p>
+              </div>
+            </div>
+          )}
+
           <div className="mb-6 flex items-center justify-between">
             <h1 className="text-2xl font-semibold">Select a screen or window to share</h1>
             <div className="flex items-center gap-2">
               <button
                 onClick={() => {
                   setShowCreateLinkModal(true);
                 }}
-                className="flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+                disabled={isCapturing}
+                className="flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50"
               >
                 <Link2 className="h-4 w-4" />
                 Create Link
               </button>
               <button
                 onClick={() => void navigate('/join')}
-                className="flex items-center gap-2 rounded-lg bg-muted px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted/80"
+                disabled={isCapturing}
+                className="flex items-center gap-2 rounded-lg bg-muted px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted/80 disabled:opacity-50"
               >
                 <Users className="h-4 w-4" />
                 Join a Session
@@ -180,9 +215,17 @@ export function HomePage() {
                 onClick={() => {
                   void handleWaylandCapture();
                 }}
-                className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+                disabled={isCapturing}
+                className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50"
               >
-                Open System Screen Picker
+                {isCapturing ? (
+                  <>
+                    <Loader2 className="mr-2 inline h-4 w-4 animate-spin" />
+                    Waiting...
+                  </>
+                ) : (
+                  'Open System Screen Picker'
+                )}
               </button>
             </div>
           )}
@@ -192,7 +235,7 @@ export function HomePage() {
               void handleSourceSelect(source);
             }}
           />
-        </>
+        </div>
       ) : (
         <CapturePreview
           stream={stream}

apps/desktop/src/renderer/routes/settings.tsx

@@ -10,6 +10,7 @@ import {
   Cloud,
   Loader2,
   Check,
+  AlertCircle,
 } from 'lucide-react';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { useAuthStore } from '@/stores/auth';
@@ -48,6 +49,7 @@ export function SettingsPage() {
   } | null>(null);
   const [isSaving, setIsSaving] = useState(false);
   const [saveSuccess, setSaveSuccess] = useState(false);
+  const [saveError, setSaveError] = useState<string | null>(null);
   const [hasChanges, setHasChanges] = useState(false);
 
   // Load settings from localStorage on mount
@@ -74,13 +76,15 @@ export function SettingsPage() {
     localStorage.setItem('pairux-settings', JSON.stringify(newSettings));
     setHasChanges(true);
     setSaveSuccess(false);
+    setSaveError(null);
   };
 
   // Save settings to cloud
   const handleSaveToCloud = async () => {
     if (!user) return;
 
     setIsSaving(true);
+    setSaveError(null);
     try {
       const response = await fetch(`${APP_URL}/api/settings`, {
         method: 'PUT',
@@ -97,9 +101,11 @@ export function SettingsPage() {
         }, 3000);
       } else {
         console.error('Failed to save settings to cloud');
+        setSaveError('Failed to save settings');
       }
     } catch (error) {
       console.error('Error saving settings:', error);
+      setSaveError('Could not connect to server');
     } finally {
       setIsSaving(false);
     }
@@ -167,6 +173,22 @@ export function SettingsPage() {
         )}
       </div>
 
+      {/* Error message */}
+      {saveError && (
+        <div className="mb-6 flex max-w-3xl items-center gap-2 rounded-lg bg-destructive/10 p-3 text-sm text-destructive">
+          <AlertCircle className="h-4 w-4 flex-shrink-0" />
+          <span>{saveError}</span>
+          <button
+            onClick={() => {
+              setSaveError(null);
+            }}
+            className="ml-auto text-xs underline"
+          >
+            Dismiss
+          </button>
+        </div>
+      )}
+
       <div className="grid max-w-3xl gap-6">
         {/* Account Section */}
         <Card>