fix(desktop): open Settings as an overlay so it doesn't end the session (#26)

Settings was a sibling route under AppLayout, so navigating to it unmounted
HomePage — which ran CapturePreview's unmount cleanup (stopHosting), dropping
the host from the LiveKit room and ending the live session (and restarting
egress, which traps YouTube on "Preparing"). Coming back landed on a fresh
HomePage with no session.

Settings now renders as a full-screen overlay (new useUIStore) over the still
-mounted Home, so the session keeps running underneath. All entry points are
covered: the main-process menu/tray IPC ('navigate' -> '/settings') is
intercepted in main.tsx, the mac/win TitleBar button opens the overlay, and
the Back button closes it. The unmounting '/settings' route is removed.

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: ralyodio

apps/desktop/src/renderer/components/layout/AppLayout.test.tsx

@@ -0,0 +1,40 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen, act } from '@testing-library/react';
+import { AppLayout } from './AppLayout';
+import { useUIStore } from '@/stores/ui';
+
+vi.mock('./TitleBar', () => ({ TitleBar: () => null }));
+vi.mock('@/routes/settings', () => ({
+  SettingsPage: () => <div data-testid="settings-overlay" />,
+}));
+
+describe('AppLayout', () => {
+  beforeEach(() => {
+    useUIStore.setState({ settingsOpen: false });
+  });
+
+  it('keeps children mounted and only shows the settings overlay when open', () => {
+    render(
+      <AppLayout>
+        <div data-testid="home">home</div>
+      </AppLayout>
+    );
+
+    expect(screen.getByTestId('home')).toBeInTheDocument();
+    expect(screen.queryByTestId('settings-overlay')).toBeNull();
+
+    act(() => {
+      useUIStore.getState().openSettings();
+    });
+
+    // Home stays mounted underneath the overlay — the session is never torn down.
+    expect(screen.getByTestId('home')).toBeInTheDocument();
+    expect(screen.getByTestId('settings-overlay')).toBeInTheDocument();
+
+    act(() => {
+      useUIStore.getState().closeSettings();
+    });
+    expect(screen.queryByTestId('settings-overlay')).toBeNull();
+    expect(screen.getByTestId('home')).toBeInTheDocument();
+  });
+});

apps/desktop/src/renderer/components/layout/AppLayout.tsx

@@ -1,15 +1,30 @@
 import type { ReactNode } from 'react';
 import { TitleBar } from './TitleBar';
+import { SettingsPage } from '@/routes/settings';
+import { useUIStore } from '@/stores/ui';
 
 interface AppLayoutProps {
   children: ReactNode;
 }
 
 export function AppLayout({ children }: AppLayoutProps) {
+  const settingsOpen = useUIStore((s) => s.settingsOpen);
+
   return (
     <div className="flex min-h-screen flex-col bg-background text-foreground">
       <TitleBar />
-      <main className="flex flex-1 flex-col">{children}</main>
+      <main className="relative flex flex-1 flex-col">
+        {children}
+
+        {/* Settings is an overlay rather than a route so opening it keeps Home
+            (and the active session) mounted underneath. Scoped to the content
+            area so the title bar / window controls stay usable. */}
+        {settingsOpen && (
+          <div className="absolute inset-0 z-50 flex flex-col overflow-auto bg-background">
+            <SettingsPage />
+          </div>
+        )}
+      </main>
     </div>
   );
 }

apps/desktop/src/renderer/components/layout/TitleBar.tsx

@@ -3,12 +3,14 @@ import { useNavigate } from 'react-router-dom';
 import { LogOut, User, ChevronDown, Settings } from 'lucide-react';
 import { isElectron, getElectronAPI } from '../../lib/ipc';
 import { useAuthStore } from '@/stores/auth';
+import { useUIStore } from '@/stores/ui';
 
 export function TitleBar() {
   const platform = isElectron() ? getElectronAPI().platform : 'unknown';
   const isMac = platform === 'darwin';
   const isLinux = platform === 'linux';
   const { user, logout } = useAuthStore();
+  const openSettings = useUIStore((s) => s.openSettings);
   const navigate = useNavigate();
   const [showMenu, setShowMenu] = useState(false);
 
@@ -70,7 +72,7 @@ export function TitleBar() {
                 <button
                   onClick={() => {
                     setShowMenu(false);
-                    void navigate('/settings');
+                    openSettings();
                   }}
                   className="flex w-full items-center gap-2 px-3 py-2 text-sm transition-colors hover:bg-muted"
                 >

apps/desktop/src/renderer/main.tsx

@@ -3,12 +3,19 @@ import ReactDOM from 'react-dom/client';
 import { RouterProvider } from 'react-router-dom';
 import { router } from './routes';
 import { getElectronAPI, isElectron } from './lib/ipc';
+import { useUIStore } from './stores/ui';
 import './styles/globals.css';
 
 // Listen for navigation events from main process (menu, tray, etc.)
 if (isElectron()) {
   const api = getElectronAPI();
   api.on('navigate', (path) => {
+    // Settings is an overlay, not a route — routing to it would unmount the
+    // active session on Home and end it. Open the overlay instead.
+    if (path === '/settings') {
+      useUIStore.getState().openSettings();
+      return;
+    }
     void router.navigate(path);
   });
 }

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

@@ -3,7 +3,6 @@ import { LoginPage } from './login';
 import { HomePage } from './home';
 import { JoinPage } from './join';
 import { ViewerPage } from './viewer';
-import { SettingsPage } from './settings';
 import { AppLayout } from '@/components/layout/AppLayout';
 import { ProtectedRoute } from '@/components/layout/ProtectedRoute';
 
@@ -36,10 +35,8 @@ export const router = createHashRouter([
         path: 'viewer/:sessionId',
         element: <ViewerPage />,
       },
-      {
-        path: 'settings',
-        element: <SettingsPage />,
-      },
+      // Settings is rendered as an overlay (see AppLayout) instead of a sibling
+      // route, so opening it does not unmount the active session on Home.
     ],
   },
   {

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

@@ -1,5 +1,4 @@
 import { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
 import {
   ArrowLeft,
   Monitor,
@@ -17,6 +16,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { StreamDestinations } from '@/components/streaming';
 import { LIVE_STREAM_CHANGED_EVENT } from '@/lib/liveStream';
 import { useAuthStore } from '@/stores/auth';
+import { useUIStore } from '@/stores/ui';
 import { getElectronAPI, isElectron } from '@/lib/ipc';
 import type { RecordingQuality } from '@/hooks/useRecording';
 import { useRTMPStreaming } from '@/hooks/useRTMPStreaming';
@@ -59,7 +59,7 @@ const DEFAULT_SETTINGS: AppSettings = {
 };
 
 export function SettingsPage() {
-  const navigate = useNavigate();
+  const closeSettings = useUIStore((s) => s.closeSettings);
   const { user, profile } = useAuthStore();
   const [settings, setSettings] = useState<AppSettings>(DEFAULT_SETTINGS);
   const [recordingsPath, setRecordingsPath] = useState<string>('');
@@ -188,7 +188,9 @@ export function SettingsPage() {
       <div className="mb-6 flex items-center justify-between">
         <div className="flex items-center gap-4">
           <button
-            onClick={() => void navigate('/')}
+            onClick={() => {
+              closeSettings();
+            }}
             className="flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
           >
             <ArrowLeft className="h-4 w-4" />

apps/desktop/src/renderer/stores/ui.test.ts

@@ -0,0 +1,18 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useUIStore } from './ui';
+
+describe('useUIStore', () => {
+  beforeEach(() => {
+    useUIStore.setState({ settingsOpen: false });
+  });
+
+  it('opens and closes the settings overlay', () => {
+    expect(useUIStore.getState().settingsOpen).toBe(false);
+
+    useUIStore.getState().openSettings();
+    expect(useUIStore.getState().settingsOpen).toBe(true);
+
+    useUIStore.getState().closeSettings();
+    expect(useUIStore.getState().settingsOpen).toBe(false);
+  });
+});

apps/desktop/src/renderer/stores/ui.ts

@@ -0,0 +1,25 @@
+import { create } from 'zustand';
+
+/**
+ * Transient UI state that must survive route changes.
+ *
+ * Settings is shown as an overlay (not a sibling route) so opening it does NOT
+ * unmount the active session on Home — navigating to a `/settings` route tore
+ * the HomePage subtree down, which ran CapturePreview's unmount cleanup
+ * (`stopHosting`) and ended the live session.
+ */
+interface UIState {
+  settingsOpen: boolean;
+  openSettings: () => void;
+  closeSettings: () => void;
+}
+
+export const useUIStore = create<UIState>((set) => ({
+  settingsOpen: false,
+  openSettings: () => {
+    set({ settingsOpen: true });
+  },
+  closeSettings: () => {
+    set({ settingsOpen: false });
+  },
+}));