Add main window update indicator

src/main/index.ts

@@ -3,6 +3,8 @@ import { autoUpdater } from 'electron-updater';
 import { existsSync } from 'node:fs';
 import { join } from 'node:path';
 import { DEFAULT_BLUETOOTH_STATUS } from '../shared/bluetooth-status';
+import { SHOW_SETTINGS_SECTION_CHANNEL } from '../shared/ipc-channels';
+import type { SettingsSectionId } from '../shared/settings';
 import { WindowsBluetoothTransport } from './bluetooth/bluetooth-transport';
 import { ControlService } from './control/control-service';
 import { CursorOverlay } from './cursor-overlay';
@@ -122,7 +124,11 @@ function createMainWindow(options: MainWindowOptions = {}): BrowserWindow {
   return window;
 }
 
-function createSettingsWindow(): BrowserWindow {
+function settingsHashForSection(section: SettingsSectionId): string {
+  return section === 'general' ? '/settings' : `/settings/${section}`;
+}
+
+function createSettingsWindow(section: SettingsSectionId = 'general'): BrowserWindow {
   const iconPath = appIconPath();
   const window = new BrowserWindow({
     width: 820,
@@ -172,10 +178,10 @@ function createSettingsWindow(): BrowserWindow {
 
   if (isDev && process.env.ELECTRON_RENDERER_URL) {
     const url = new URL(process.env.ELECTRON_RENDERER_URL);
-    url.hash = '/settings';
+    url.hash = settingsHashForSection(section);
     void window.loadURL(url.toString());
   } else {
-    void window.loadFile(join(__dirname, '../renderer/index.html'), { hash: '/settings' });
+    void window.loadFile(join(__dirname, '../renderer/index.html'), { hash: settingsHashForSection(section) });
   }
 
   return window;
@@ -194,9 +200,24 @@ function showMainWindow(): void {
   mainWindow.focus();
 }
 
-function showSettingsWindow(): void {
+function sendSettingsSection(window: BrowserWindow, section: SettingsSectionId): void {
+  const send = (): void => {
+    if (!window.isDestroyed()) {
+      window.webContents.send(SHOW_SETTINGS_SECTION_CHANNEL, section);
+    }
+  };
+
+  if (window.webContents.isLoading()) {
+    window.webContents.once('did-finish-load', send);
+    return;
+  }
+
+  send();
+}
+
+function showSettingsWindow(section: SettingsSectionId = 'general'): void {
   if (!settingsWindow || settingsWindow.isDestroyed()) {
-    settingsWindow = createSettingsWindow();
+    settingsWindow = createSettingsWindow(section);
     return;
   }
 
@@ -205,6 +226,7 @@ function showSettingsWindow(): void {
   }
   settingsWindow.show();
   settingsWindow.focus();
+  sendSettingsSection(settingsWindow, section);
 }
 
 function quitApp(): void {

src/main/settings-window-ipc.ts

@@ -1,8 +1,9 @@
 import { ipcMain } from 'electron';
 import { OPEN_SETTINGS_WINDOW_CHANNEL } from '../shared/ipc-channels';
+import { isSettingsSectionId, type SettingsSectionId } from '../shared/settings';
 
-export function registerSettingsWindowIpc(openSettingsWindow: () => void): void {
-  ipcMain.handle(OPEN_SETTINGS_WINDOW_CHANNEL, () => {
-    openSettingsWindow();
+export function registerSettingsWindowIpc(openSettingsWindow: (section?: SettingsSectionId) => void): void {
+  ipcMain.handle(OPEN_SETTINGS_WINDOW_CHANNEL, (_event, section) => {
+    openSettingsWindow(isSettingsSectionId(section) ? section : undefined);
   });
 }

src/preload/index.ts

@@ -1,4 +1,4 @@
-import { contextBridge, ipcRenderer } from 'electron';
+import { contextBridge, ipcRenderer, type IpcRendererEvent } from 'electron';
 import type { PairingApprovalDecision, PendingPairingApprovalView } from '../shared/pairing-approval';
 import type { PairedDeviceView, PcControlStatus } from '../shared/server-status';
 import type { CursorOverlaySettings } from '../shared/cursor-overlay-settings';
@@ -23,7 +23,9 @@ import {
   SET_CURSOR_OVERLAY_ENABLED_CHANNEL,
   SET_CURSOR_OVERLAY_SETTINGS_CHANNEL,
   SET_START_WITH_SYSTEM_CHANNEL,
+  SHOW_SETTINGS_SECTION_CHANNEL,
 } from '../shared/ipc-channels';
+import type { SettingsSectionId } from '../shared/settings';
 import type { SystemStartupSettings } from '../shared/system-startup';
 import type { UpdateState } from '../shared/update';
 
@@ -45,7 +47,13 @@ contextBridge.exposeInMainWorld('switchifyPc', {
   getCursorOverlaySettings: (): Promise<CursorOverlaySettings> => ipcRenderer.invoke(GET_CURSOR_OVERLAY_SETTINGS_CHANNEL),
   setCursorOverlaySettings: (settings: CursorOverlaySettings): Promise<CursorOverlaySettings> =>
     ipcRenderer.invoke(SET_CURSOR_OVERLAY_SETTINGS_CHANNEL, settings),
-  openSettingsWindow: (): Promise<void> => ipcRenderer.invoke(OPEN_SETTINGS_WINDOW_CHANNEL),
+  openSettingsWindow: (section?: SettingsSectionId): Promise<void> =>
+    ipcRenderer.invoke(OPEN_SETTINGS_WINDOW_CHANNEL, section),
+  onShowSettingsSection: (handler: (section: SettingsSectionId) => void): (() => void) => {
+    const listener = (_event: IpcRendererEvent, section: SettingsSectionId): void => handler(section);
+    ipcRenderer.on(SHOW_SETTINGS_SECTION_CHANNEL, listener);
+    return () => ipcRenderer.removeListener(SHOW_SETTINGS_SECTION_CHANNEL, listener);
+  },
   openExternalUrl: (url: string): Promise<{ ok: boolean }> =>
     ipcRenderer.invoke(OPEN_EXTERNAL_URL_CHANNEL, url),
   getPendingPairingRequests: (): Promise<PendingPairingApprovalView[]> =>

src/renderer/App.tsx

@@ -1,4 +1,5 @@
-import type { ReactElement } from 'react';
+import { useEffect, useState, type ReactElement } from 'react';
+import type { UpdateState } from '../shared/update';
 import { AndroidDownloadPanel } from './components/AndroidDownloadPanel';
 import { PairingApprovalRequests } from './components/PairingApprovalRequests';
 import { PrimaryContent } from './components/PrimaryContent';
@@ -9,7 +10,7 @@ import { SettingsApp } from './SettingsApp';
 import { useSwitchifyPcStatus } from './useSwitchifyPcStatus';
 
 export function App(): ReactElement {
-  if (window.location.hash === '#/settings') {
+  if (window.location.hash === '#/settings' || window.location.hash.startsWith('#/settings/')) {
     return <SettingsApp />;
   }
 
@@ -19,9 +20,38 @@ export function App(): ReactElement {
 function MainApp(): ReactElement {
   const bridge = window.switchifyPc;
   const status = useSwitchifyPcStatus(bridge);
+  const [updateState, setUpdateState] = useState<UpdateState | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const refreshUpdateState = (): void => {
+      void bridge.getUpdateState().then((state) => {
+        if (!cancelled) {
+          setUpdateState(state);
+        }
+      });
+    };
+
+    refreshUpdateState();
+    const interval = window.setInterval(refreshUpdateState, 30_000);
+    window.addEventListener('focus', refreshUpdateState);
+
+    return () => {
+      cancelled = true;
+      window.clearInterval(interval);
+      window.removeEventListener('focus', refreshUpdateState);
+    };
+  }, [bridge]);
 
   return (
-    <WindowChrome title={bridge.appName} state={status.uiState} className="app-shell">
+    <WindowChrome
+      title={bridge.appName}
+      state={status.uiState}
+      className="app-shell"
+      updateState={updateState}
+      onOpenUpdates={() => bridge.openSettingsWindow('updates')}
+    >
       <section className="setup-card" aria-label="Switchify PC setup">
         <StatusHeader
           state={status.uiState}

src/renderer/SettingsApp.tsx

@@ -3,6 +3,7 @@ import type { SystemStartupSettings } from '../shared/system-startup';
 import type { UpdateState } from '../shared/update';
 import { SettingsView } from './components/SettingsPanel';
 import { WindowChrome } from './components/WindowTitleBar';
+import { settingsSectionFromHash } from './settings-route';
 import { useSwitchifyPcStatus } from './useSwitchifyPcStatus';
 
 export function SettingsApp(): ReactElement {
@@ -107,9 +108,11 @@ export function SettingsApp(): ReactElement {
         updateState={updateState}
         isCheckingForUpdates={isCheckingForUpdates}
         isDownloadingUpdate={isDownloadingUpdate}
-          onCheckForUpdates={checkForUpdates}
-          onDownloadUpdate={downloadUpdate}
-          onInstallDownloadedUpdate={installDownloadedUpdate}
+        initialSection={settingsSectionFromHash(window.location.hash)}
+        onSettingsSectionRequest={bridge.onShowSettingsSection}
+        onCheckForUpdates={checkForUpdates}
+        onDownloadUpdate={downloadUpdate}
+        onInstallDownloadedUpdate={installDownloadedUpdate}
         />
     </WindowChrome>
   );

src/renderer/api.d.ts

@@ -3,6 +3,7 @@ export {};
 import type { PairingApprovalDecision, PendingPairingApprovalView } from '../shared/pairing-approval';
 import type { PairedDeviceView, PcControlStatus } from '../shared/server-status';
 import type { CursorOverlaySettings } from '../shared/cursor-overlay-settings';
+import type { SettingsSectionId } from '../shared/settings';
 import type { SystemStartupSettings } from '../shared/system-startup';
 import type { UpdateState } from '../shared/update';
 
@@ -24,7 +25,8 @@ declare global {
       setCursorOverlayEnabled: (enabled: boolean) => Promise<boolean>;
       getCursorOverlaySettings: () => Promise<CursorOverlaySettings>;
       setCursorOverlaySettings: (settings: CursorOverlaySettings) => Promise<CursorOverlaySettings>;
-      openSettingsWindow: () => Promise<void>;
+      openSettingsWindow: (section?: SettingsSectionId) => Promise<void>;
+      onShowSettingsSection: (handler: (section: SettingsSectionId) => void) => () => void;
       openExternalUrl: (url: string) => Promise<{ ok: boolean }>;
       getPendingPairingRequests: () => Promise<PendingPairingApprovalView[]>;
       respondToPairingRequest: (

src/renderer/components/SettingsPanel.tsx

@@ -1,4 +1,4 @@
-import { useState, type ReactElement } from 'react';
+import { useEffect, useState, type ReactElement } from 'react';
 import type {
   CursorOverlayColor,
   CursorOverlaySettings,
@@ -8,6 +8,7 @@ import type {
 import { CURSOR_OVERLAY_COLORS } from '../../shared/cursor-overlay-settings';
 import type { PairedDeviceView, PcControlStatus } from '../../shared/server-status';
 import type { SystemStartupSettings } from '../../shared/system-startup';
+import type { SettingsSectionId } from '../../shared/settings';
 import type { UpdateState } from '../../shared/update';
 import { formatBluetoothStatus } from '../bluetooth-status';
 import type { ConnectedDeviceView } from '../connected-devices';
@@ -29,13 +30,13 @@ type SettingsViewProps = {
   updateState: UpdateState | null;
   isCheckingForUpdates: boolean;
   isDownloadingUpdate: boolean;
+  initialSection: SettingsSectionId;
+  onSettingsSectionRequest?: (handler: (section: SettingsSectionId) => void) => () => void;
   onCheckForUpdates: () => Promise<void>;
   onDownloadUpdate: () => Promise<void>;
   onInstallDownloadedUpdate: () => Promise<void>;
 };
 
-type SettingsSectionId = 'general' | 'bluetooth' | 'pointer' | 'updates' | 'savedDevices';
-
 const SETTINGS_SECTIONS: Array<{
   id: SettingsSectionId;
   label: string;
@@ -61,11 +62,18 @@ export function SettingsView({
   updateState,
   isCheckingForUpdates,
   isDownloadingUpdate,
+  initialSection,
+  onSettingsSectionRequest,
   onCheckForUpdates,
   onDownloadUpdate,
   onInstallDownloadedUpdate
 }: SettingsViewProps): ReactElement {
-  const [selectedSection, setSelectedSection] = useState<SettingsSectionId>('general');
+  const [selectedSection, setSelectedSection] = useState<SettingsSectionId>(initialSection);
+
+  useEffect(() => {
+    if (!onSettingsSectionRequest) return undefined;
+    return onSettingsSectionRequest(setSelectedSection);
+  }, [onSettingsSectionRequest]);
 
   return (
     <div className="settings-layout">

src/renderer/components/WindowTitleBar.tsx

@@ -1,5 +1,7 @@
 import type { ReactElement, ReactNode } from 'react';
 import type { DesktopUiState } from '../../shared/desktop-ui-state';
+import type { UpdateState } from '../../shared/update';
+import { updateIndicatorState } from '../updates';
 import { Tooltip } from './Tooltip';
 
 type WindowControlOptions = {
@@ -12,18 +14,29 @@ export function WindowChrome({
   subtitle,
   className,
   windowControls,
+  updateState,
+  onOpenUpdates,
   children
 }: {
   title: string;
   state?: DesktopUiState;
   subtitle?: string;
   className: string;
   windowControls?: WindowControlOptions;
+  updateState?: UpdateState | null;
+  onOpenUpdates?: () => Promise<void> | void;
   children: ReactNode;
 }): ReactElement {
   return (
     <>
-      <WindowTitleBar title={title} state={state} subtitle={subtitle} windowControls={windowControls} />
+      <WindowTitleBar
+        title={title}
+        state={state}
+        subtitle={subtitle}
+        windowControls={windowControls}
+        updateState={updateState}
+        onOpenUpdates={onOpenUpdates}
+      />
       <main className={className}>{children}</main>
     </>
   );
@@ -33,17 +46,22 @@ export function WindowTitleBar({
   title,
   state,
   subtitle,
-  windowControls
+  windowControls,
+  updateState,
+  onOpenUpdates
 }: {
   title: string;
   state?: DesktopUiState;
   subtitle?: string;
   windowControls?: WindowControlOptions;
+  updateState?: UpdateState | null;
+  onOpenUpdates?: () => Promise<void> | void;
 }): ReactElement {
   const controls = {
     minimize: true,
     ...windowControls
   };
+  const updateIndicator = updateIndicatorState(updateState ?? null);
 
   return (
     <header className="window-titlebar" aria-label="Window title bar">
@@ -58,6 +76,18 @@ export function WindowTitleBar({
         {!state && subtitle ? <span className="window-titlebar-status">{subtitle}</span> : null}
       </div>
       <div className="window-titlebar-controls" aria-label="Window controls">
+        {updateIndicator !== 'hidden' && onOpenUpdates ? (
+          <Tooltip label={updateIndicator === 'downloaded' ? 'Update ready to install' : 'Update available'} placement="bottom">
+            <button
+              type="button"
+              className={`window-titlebar-control window-titlebar-update window-titlebar-update-${updateIndicator}`}
+              aria-label="Open updates"
+              onClick={() => void onOpenUpdates()}
+            >
+              <span className="window-control-icon window-control-icon-update" aria-hidden="true" />
+            </button>
+          </Tooltip>
+        ) : null}
         {controls.minimize ? (
           <Tooltip label="Minimize" placement="bottom">
             <button

src/renderer/settings-route.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest';
+import { settingsHashForSection, settingsSectionFromHash } from './settings-route';
+
+describe('settingsSectionFromHash', () => {
+  it('uses general for the base settings route', () => {
+    expect(settingsSectionFromHash('#/settings')).toBe('general');
+  });
+
+  it('reads the updates section from the settings route', () => {
+    expect(settingsSectionFromHash('#/settings/updates')).toBe('updates');
+  });
+
+  it('uses general for invalid sections', () => {
+    expect(settingsSectionFromHash('#/settings/unknown')).toBe('general');
+  });
+});
+
+describe('settingsHashForSection', () => {
+  it('formats the general settings route', () => {
+    expect(settingsHashForSection('general')).toBe('/settings');
+  });
+
+  it('formats non-default settings sections', () => {
+    expect(settingsHashForSection('updates')).toBe('/settings/updates');
+  });
+});

src/renderer/settings-route.ts

@@ -0,0 +1,11 @@
+import type { SettingsSectionId } from '../shared/settings';
+import { isSettingsSectionId } from '../shared/settings';
+
+export function settingsHashForSection(section: SettingsSectionId): string {
+  return section === 'general' ? '/settings' : `/settings/${section}`;
+}
+
+export function settingsSectionFromHash(hash: string): SettingsSectionId {
+  const section = hash.replace(/^#\/settings\/?/, '');
+  return isSettingsSectionId(section) ? section : 'general';
+}