feat: add a quick PC switcher to Remote (#86)

* feat: add quick PC switcher

* fix: cancel stale PC switches

* fix: make quick switching intent-safe

* fix: reconnect when reversing a switch

---------

Co-authored-by: Owen McGirr <owenmcgirr@Owens-Mac-Studio-2.local>

Author: enaboapps

docs/accessibility.md

@@ -4,6 +4,7 @@ Switchify Remote is designed for VoiceOver, TalkBack, iOS Switch Control, and An
 
 - Every interactive target is at least 48 by 48 logical points and has a concise accessible name.
 - Surface selection is one button that announces its current value and opens a modal option list. Options expose selected state, scanning stays inside the modal, and focus returns to the selector after selection or dismissal. Toggles expose selected or disabled state.
+- Remote keeps a quick PC switcher immediately above the tab bar in every connection state. It announces the active connection, exposes selected state for the current saved PC, and restores focus after its modal closes.
 - Headings, connection changes, failures, repeat state, pairing approval, and pointer-profile recovery transitions are announced once without moving focus unexpectedly.
 - The pairing code is announced one digit at a time.
 - Text scales with the operating system; controls grow rather than shrinking text below the user's chosen size.
@@ -22,4 +23,4 @@ Switchify Remote is designed for VoiceOver, TalkBack, iOS Switch Control, and An
 
 ## Manual smoke test
 
-On both platforms, enable the screen reader and then the platform switch-access feature. Navigate PCs, pairing, every available remote screen, Settings, and Diagnostics in logical order. Confirm every action can be selected, read-only text does not become a switch-scan stop, pointer repeat exposes Stop movement, held modifiers and drag expose state, disabled controls are announced, and backgrounding returns the desktop to a neutral input state. On Android, confirm Forwarding keeps its profile choices available before Start but adds mapped external switches to scanning only while forwarding is active. The mapped switches and overflow notice must disappear after manual or safety stops. In Settings, edit the Remote name and confirm validation and save status are announced without adding read-only scan stops. Confirm Use device model restores the model-based name. Confirm Privacy policy is one scan stop, announces that it opens in a browser, opens the Remote-specific policy, and returns safely if the browser cannot open. During a delayed pointer-profile response, confirm "Restoring controls" is announced once, followed by either restored controls or "Controls unavailable" after all retries. Open the Surface selector and confirm the underlying screen and bottom tabs are not scannable, options scan linearly, Close works, Android back and VoiceOver escape dismiss the modal, and focus returns to the selector after selection or dismissal. Press Unpair for a saved computer and confirm the native alert reads the full computer name. Verify Cancel, Android Back, and outside dismissal preserve the pairing, then confirm Unpair removes it. Repeat in light and dark appearance, at 200% text scaling, and with reduced motion enabled.
+On both platforms, enable the screen reader and then the platform switch-access feature. Navigate PCs, pairing, every available remote screen, Settings, and Diagnostics in logical order. Confirm every action can be selected, read-only text does not become a switch-scan stop, pointer repeat exposes Stop movement, held modifiers and drag expose state, disabled controls are announced, and backgrounding returns the desktop to a neutral input state. On Android, confirm Forwarding keeps its profile choices available before Start but adds mapped external switches to scanning only while forwarding is active. The mapped switches and overflow notice must disappear after manual or safety stops. In Settings, edit the Remote name and confirm validation and save status are announced without adding read-only scan stops. Confirm Use device model restores the model-based name. Confirm Privacy policy is one scan stop, announces that it opens in a browser, opens the Remote-specific policy, and returns safely if the browser cannot open. During a delayed pointer-profile response, confirm "Restoring controls" is announced once, followed by either restored controls or "Controls unavailable" after all retries. Open the Surface selector and confirm the underlying screen and bottom tabs are not scannable, options scan linearly, Close works, Android back and VoiceOver escape dismiss the modal, and focus returns to the selector after selection or dismissal. Repeat those checks with the Remote PC switcher, confirm it stays above the tabs while content scrolls, and switch between two saved PCs. Press Unpair for a saved computer and confirm the native alert reads the full computer name. Verify Cancel, Android Back, and outside dismissal preserve the pairing, then confirm Unpair removes it. Repeat in light and dark appearance, at 200% text scaling, and with reduced motion enabled.

src/app/(tabs)/remote.tsx

@@ -8,6 +8,7 @@ import { useConnectionManager, useConnectionState } from '@/connection/Connectio
 import { usePreferredPcConnection } from '@/connection/usePreferredPcConnection';
 import { MouseSurface } from '@/remote/MouseSurface';
 import { DisconnectedRemote } from '@/remote/DisconnectedRemote';
+import { RemoteDeviceSwitcher } from '@/remote/RemoteDeviceSwitcher';
 import { RemoteSession } from '@/remote/RemoteSession';
 import { SurfaceSelector } from '@/remote/SurfaceSelector';
 import { TypingSurface } from '@/remote/TypingSurface';
@@ -40,13 +41,14 @@ export default function RemoteScreen() {
   useEffect(() => {
     if (shouldClearForwardingRestore(preferences.surface, connection.kind)) forwardingRestore.clear();
   }, [connection.kind, forwardingRestore, preferences.surface]);
-  if (connection.kind !== 'connected') return <DisconnectedRemote connection={connection} selectedSurface={preferences.surface} retry={() => void manager.connectPreferred()} choose={() => router.navigate('/')} />;
+  const deviceSwitcher = <RemoteDeviceSwitcher connection={connection} manager={manager} managePcs={() => router.navigate('/')} />;
+  if (connection.kind !== 'connected') return <DisconnectedRemote connection={connection} selectedSurface={preferences.surface} retry={() => void manager.connectPreferred()} choose={() => router.navigate('/')} bottomAccessory={deviceSwitcher} />;
   if (!connection.profile) {
     const unavailablePresentation = profilePresentation(connection.profileStatus);
-    return <Screen title="Remote"><EmptyState icon={unavailablePresentation.icon} title={unavailablePresentation.title} body={unavailablePresentation.body} /></Screen>;
+    return <Screen title="Remote" bottomAccessory={deviceSwitcher}><EmptyState icon={unavailablePresentation.icon} title={unavailablePresentation.title} body={unavailablePresentation.body} /></Screen>;
   }
   return (
-    <Screen title="Remote" headerAccessory={<StatusBadge icon="check-circle" label={`Connected · ${connection.desktop.displayName}`} tone="success" />}>
+    <Screen title="Remote" headerAccessory={<StatusBadge icon="check-circle" label={`Connected · ${connection.desktop.displayName}`} tone="success" />} bottomAccessory={deviceSwitcher}>
       <SurfaceSelector selected={preferences.surface} />
       {preferences.surface === 'mouse' ? <MouseSurface session={session} state={sessionState} physicalSwitchStopAvailable={bridgeSnapshot.captureAvailable && bridgeSnapshot.externalSwitches.length > 0} /> : null}
       {preferences.surface === 'typing' ? <TypingSurface session={session} mode={preferences.typingMode} draft={preferences.draft} /> : null}

src/components/ActionButton.tsx

@@ -1,20 +1,20 @@
 import MaterialIcons from '@expo/vector-icons/MaterialIcons';
-import type { ComponentProps } from 'react';
-import { ActivityIndicator, Animated, Pressable, Text, View } from 'react-native';
+import type { ComponentProps, Ref } from 'react';
+import { ActivityIndicator, Animated, Pressable, Text, View, type View as NativeView } from 'react-native';
 import { useTheme } from '@/theme/ThemeContext';
 import { usePressScale } from './usePressScale';
 
 type Tone = 'primary' | 'secondary' | 'tertiary' | 'danger';
 type IconName = ComponentProps<typeof MaterialIcons>['name'];
 
-export function ActionButton({ label, onPress, disabled = false, busy = false, secondary = false, tone, icon }: { label: string; onPress: () => void; disabled?: boolean; busy?: boolean; secondary?: boolean; tone?: Tone; icon?: IconName }) {
+export function ActionButton({ label, onPress, disabled = false, busy = false, secondary = false, tone, icon, controlRef }: { label: string; onPress: () => void; disabled?: boolean; busy?: boolean; secondary?: boolean; tone?: Tone; icon?: IconName; controlRef?: Ref<NativeView> }) {
   const { colors, radii, spacing, typography } = useTheme();
   const press = usePressScale();
   const resolvedTone = tone ?? (secondary ? 'secondary' : 'primary');
   const background = resolvedTone === 'primary' ? colors.brand : resolvedTone === 'danger' ? colors.dangerTint : resolvedTone === 'secondary' ? colors.surfaceRaised : 'transparent';
   const foreground = resolvedTone === 'primary' ? colors.onBrand : resolvedTone === 'danger' ? colors.danger : resolvedTone === 'tertiary' ? colors.brandText : colors.text;
   return (
-    <Animated.View style={{ transform: [{ scale: press.scale }], width: '100%' }}><Pressable accessibilityRole="button" accessibilityLabel={label} accessibilityState={{ disabled, busy }} disabled={disabled} onPress={onPress} onPressIn={press.pressIn} onPressOut={press.pressOut} style={({ pressed }) => ({ alignItems: 'center', backgroundColor: pressed && !disabled ? (resolvedTone === 'primary' ? colors.brandPressed : colors.surfacePressed) : background, borderColor: resolvedTone === 'tertiary' ? 'transparent' : resolvedTone === 'danger' ? colors.danger : colors.border, borderRadius: radii.md, borderWidth: resolvedTone === 'primary' ? 0 : 1, justifyContent: 'center', minHeight: 52, opacity: disabled ? 0.4 : 1, paddingHorizontal: spacing.lg })}>
+    <Animated.View style={{ transform: [{ scale: press.scale }], width: '100%' }}><Pressable ref={controlRef} accessibilityRole="button" accessibilityLabel={label} accessibilityState={{ disabled, busy }} disabled={disabled} onPress={onPress} onPressIn={press.pressIn} onPressOut={press.pressOut} style={({ pressed }) => ({ alignItems: 'center', backgroundColor: pressed && !disabled ? (resolvedTone === 'primary' ? colors.brandPressed : colors.surfacePressed) : background, borderColor: resolvedTone === 'tertiary' ? 'transparent' : resolvedTone === 'danger' ? colors.danger : colors.border, borderRadius: radii.md, borderWidth: resolvedTone === 'primary' ? 0 : 1, justifyContent: 'center', minHeight: 52, opacity: disabled ? 0.4 : 1, paddingHorizontal: spacing.lg })}>
       <View style={{ alignItems: 'center', flexDirection: 'row', gap: spacing.sm }}>
         {busy ? <ActivityIndicator color={foreground} /> : icon ? <MaterialIcons color={foreground} importantForAccessibility="no" name={icon} size={20} /> : null}
         <Text style={[typography.label, { color: foreground, flexShrink: 1, textAlign: 'center' }]}>{label}</Text>

src/components/Screen.tsx

@@ -5,16 +5,16 @@ import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context'
 import { AppText } from './AppText';
 import { useLayout, useTheme } from '@/theme/ThemeContext';
 
-type ScreenProps = PropsWithChildren<{ title: string; description?: string; headerAccessory?: ReactNode; nativeHeader?: boolean }>;
+type ScreenProps = PropsWithChildren<{ title: string; description?: string; headerAccessory?: ReactNode; bottomAccessory?: ReactNode; nativeHeader?: boolean }>;
 
-export function Screen({ title, description, headerAccessory, nativeHeader = false, children }: ScreenProps) {
+export function Screen({ title, description, headerAccessory, bottomAccessory, nativeHeader = false, children }: ScreenProps) {
   const { colors, spacing } = useTheme();
   const { isCompact, isExpanded, isLargeText } = useLayout();
   const insets = useSafeAreaInsets();
   const stackHeader = isCompact || isLargeText;
   return (
     <SafeAreaView edges={nativeHeader ? [] : ['top']} style={{ backgroundColor: colors.background, flex: 1 }}>
-      <ScrollView testID="screen-scroll" contentContainerStyle={{ alignItems: 'center', flexGrow: 1, paddingBottom: spacing.xxxl + insets.bottom, paddingHorizontal: isExpanded ? spacing.xxl : spacing.xl }}>
+      <ScrollView testID="screen-scroll" contentContainerStyle={{ alignItems: 'center', flexGrow: 1, paddingBottom: bottomAccessory ? spacing.xl : spacing.xxxl + insets.bottom, paddingHorizontal: isExpanded ? spacing.xxl : spacing.xl }}>
         <View testID="screen-content" style={{ gap: spacing.xl, maxWidth: isExpanded ? 960 : 640, paddingTop: nativeHeader ? spacing.xl : 0, width: '100%' }}>
           {!nativeHeader ? <View testID="screen-header" style={{ alignItems: 'flex-start', flexDirection: stackHeader ? 'column' : 'row', gap: stackHeader ? spacing.sm : spacing.md, justifyContent: 'space-between' }}>
             <View style={{ flex: 1 }}>
@@ -26,6 +26,9 @@ export function Screen({ title, description, headerAccessory, nativeHeader = fal
           {children}
         </View>
       </ScrollView>
+      {bottomAccessory ? <View testID="screen-bottom-accessory" style={{ alignItems: 'center', backgroundColor: colors.surface, borderTopColor: colors.border, borderTopWidth: 1, paddingHorizontal: isExpanded ? spacing.xxl : spacing.xl, paddingVertical: spacing.sm }}>
+        <View testID="screen-bottom-accessory-content" style={{ maxWidth: isExpanded ? 960 : 640, width: '100%' }}>{bottomAccessory}</View>
+      </View> : null}
     </SafeAreaView>
   );
 }

src/connection/ConnectionManager.ts

@@ -34,6 +34,7 @@ export class ConnectionManager {
   #operation = 0;
   #preferredConnect: Promise<void> | null = null;
   #disconnecting: Promise<void> | null = null;
+  #switchIntent = 0;
   #invalidSavedDesktopIds = new Set<string>();
   #profileRecoveryTimers = new Map<ReturnType<typeof setTimeout>, (active: boolean) => void>();
 
@@ -140,6 +141,14 @@ export class ConnectionManager {
     }
   }
 
+  async switchSaved(pc: SavedPc): Promise<void> {
+    const intent = ++this.#switchIntent;
+    if ('desktop' in this.#state && this.#state.desktop.desktopId === pc.desktopId && !this.#disconnecting) return;
+    await this.#beginDisconnect(false);
+    if (intent !== this.#switchIntent) return;
+    await this.connectSaved(pc);
+  }
+
   async connectPreferred(): Promise<void> {
     if (this.#preferredConnect) return this.#preferredConnect;
     const attempt = (async () => {
@@ -210,6 +219,11 @@ export class ConnectionManager {
   }
 
   async disconnect(record = true): Promise<void> {
+    this.#switchIntent += 1;
+    await this.#beginDisconnect(record);
+  }
+
+  async #beginDisconnect(record: boolean): Promise<void> {
     if (this.#disconnecting) return this.#disconnecting;
     this.#preferredConnect = null;
     const attempt = this.#disconnect(record);