feat(mobile): HIG and system-UI pass: glass sidebar, bottom search, chat soft edge, native dialogs and menus

apps/mobile/app/(tabs)/(home)/index.tsx

@@ -23,8 +23,9 @@ import { conversations, searchKey, type Conversation } from '../../../src/ui/cha
 import { CloudConversationRow } from '../../../src/ui/chat/cloud-conversation-row';
 import { useConversationFilter } from '../../../src/host/native-conversation-filter';
 import { ConnectionBanner } from '../../../src/ui/connection-banner';
+import { useDesignTheme } from '../../../src/ui/design/theme';
 import { space } from '../../../src/ui/design/tokens';
-import { SearchField } from '../../../src/ui/primitives/search-field';
+import { BottomSearch, bottomSearchHeight } from '../../../src/ui/shell/bottom-search';
 import { EnvironmentPager } from '../../../src/ui/shell/environment-pager';
 import {
   conversationEnvironments,
@@ -98,13 +99,15 @@ const HomeContent = memo(function HomeContent({
       };
     }, [router, client]),
   );
-  const onScroll = useChromeScroll();
+  const [query, setQuery] = useState('');
+  const [searching, setSearching] = useState(false);
+  const onScroll = useChromeScroll(true, searching || query !== '');
   const chrome = useScrollChrome();
-  const bottom = useFloatingTabInset();
+  const theme = useDesignTheme();
+  const bottom = useFloatingTabInset() + bottomSearchHeight(theme.touch);
   const look = useHostLook(saved?.hostId);
   const cloud = useCloudSnapshot();
   const directory = useCloudConversations();
-  const [query, setQuery] = useState('');
   const [filter, setFilter] = useConversationFilter();
   const [refreshing, setRefreshing] = useState(false);
   const [opening, setOpening] = useState(false);
@@ -300,12 +303,6 @@ const HomeContent = memo(function HomeContent({
                           onPairAgain={() => router.push('/pair')}
                         />
                       )}
-                    <SearchField
-                      inset={space.x5}
-                      value={query}
-                      placeholder={t.searchPlaceholder}
-                      onChangeText={setQuery}
-                    />
                     {(directory.errors.length > 0 || cloud.error || error) && (
                       <Text tone="muted" style={{ paddingHorizontal: space.x5 }}>
                         {t.cloudListUnavailable}
@@ -347,6 +344,12 @@ const HomeContent = memo(function HomeContent({
             )}
           />
         </HomeHeader>
+        <BottomSearch
+          value={query}
+          placeholder={t.searchPlaceholder}
+          onChangeText={setQuery}
+          onFocusChange={setSearching}
+        />
       </HostDrawerEdge>
     </>
   );

apps/mobile/app/pair.tsx

@@ -1,9 +1,9 @@
-import { Text, TextInput } from '../src/ui/primitives/system-text';
+import { TextField } from '../src/ui/primitives/text-field';
 import { CameraView, useCameraPermissions } from 'expo-camera';
 import Constants from 'expo-constants';
 import { useFocusEffect, useLocalSearchParams, useRouter } from 'expo-router';
 import { useCallback, useRef, useState } from 'react';
-import { Platform, Pressable, View } from 'react-native';
+import { Platform, Pressable, View, useWindowDimensions } from 'react-native';
 
 import { hostSession } from '../src/host/host-session';
 import { hostLooks } from '../src/host/native-host-look';
@@ -16,19 +16,21 @@ import { mobileTelemetry } from '../src/telemetry/native';
 import type { PairingMethod } from '../src/telemetry/schema';
 import { Button } from '../src/ui/primitives/button';
 import { DrawerHeader } from '../src/ui/primitives/drawer-header';
-import { useDesignTheme } from '../src/ui/design/theme';
 import { KeyboardFormScroll } from '../src/ui/primitives/keyboard-form';
 import { cloudAvailable } from '../src/cloud/available';
 import { t } from '../src/ui/strings';
-import { useTheme } from '../src/ui/theme';
+import { useDesignTheme } from '../src/ui/design/theme';
+import { pairingScan, radius, space } from '../src/ui/design/tokens';
+import { Text } from '../src/ui/primitives/text';
 
 function deviceName(): string {
   return Constants.deviceName ?? (Platform.OS === 'ios' ? 'iPhone' : 'Android phone');
 }
 
 export default function PairScreen() {
-  const theme = useTheme();
-  const design = useDesignTheme();
+  const theme = useDesignTheme();
+  const { width } = useWindowDimensions();
+  const scan = Math.min(width * pairingScan.widthRatio, pairingScan.maxSize);
   const router = useRouter();
   const params = useLocalSearchParams<{ p?: string }>();
   const [permission, requestPermission] = useCameraPermissions();
@@ -92,60 +94,60 @@ export default function PairScreen() {
     <KeyboardFormScroll
       keyboardShouldPersistTaps="handled"
       keyboardDismissMode="interactive"
-      style={{ flex: 1, backgroundColor: design.overlay.fill }}
-      contentContainerStyle={{ padding: 16, gap: 12 }}
+      style={{ flex: 1, backgroundColor: theme.overlay.fill }}
+      contentContainerStyle={{ padding: space.x5, gap: space.x4 }}
     >
       <DrawerHeader
         title={t.pairTitle}
         {...(router.canGoBack() ? { onClose: () => router.back() } : {})}
       />
-      {cloudAvailable && (
-        <Button label={t.cloud.title} onPress={() => router.dismissTo('/cloud-services')} />
-      )}
-      <Text style={{ color: theme.inkSoft, fontSize: 14 }}>{t.pairHint}</Text>
-      <ConnectionNameField
-        value={connectionName}
-        onChange={setConnectionName}
-        maxLength={HOST_NAME_MAX}
-        disabled={busy}
-      />
       <View
         style={{
-          aspectRatio: 1,
-          borderRadius: 16,
-          overflow: 'hidden',
-          backgroundColor: design.layer.raised.fill,
           alignItems: 'center',
-          justifyContent: 'center',
+          gap: space.x4,
+          padding: space.x5,
+          borderRadius: radius.lg,
+          backgroundColor: theme.layer.raised.fill,
         }}
       >
-        {permission?.granted ? (
-          focused && (
-            <CameraView
-              style={{ width: '100%', height: '100%' }}
-              facing="back"
-              barcodeScannerSettings={{ barcodeTypes: ['qr'] }}
-              onBarcodeScanned={busy ? undefined : ({ data }) => void pair(data, 'qr')}
-            />
-          )
-        ) : (
-          <Pressable
-            onPress={() => void requestPermission()}
-            accessibilityRole="button"
-            style={{ padding: 16 }}
-          >
-            <Text style={{ color: theme.accent, fontSize: 16, fontWeight: '600' }}>
-              {t.allowCamera}
-            </Text>
-          </Pressable>
-        )}
+        <View
+          style={{
+            width: scan,
+            height: scan,
+            borderRadius: radius.lg,
+            overflow: 'hidden',
+            backgroundColor: theme.layer.well.fill,
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          {permission?.granted ? (
+            focused && (
+              <CameraView
+                style={{ width: '100%', height: '100%' }}
+                facing="back"
+                barcodeScannerSettings={{ barcodeTypes: ['qr'] }}
+                onBarcodeScanned={busy ? undefined : ({ data }) => void pair(data, 'qr')}
+              />
+            )
+          ) : (
+            <Pressable
+              onPress={() => void requestPermission()}
+              accessibilityRole="button"
+              style={{ padding: space.x5, minHeight: theme.touch, justifyContent: 'center' }}
+            >
+              <Text tone="accent" strong style={{ textAlign: 'center' }}>
+                {t.allowCamera}
+              </Text>
+            </Pressable>
+          )}
+        </View>
+        <Text variant="meta" tone="muted" style={{ textAlign: 'center' }}>
+          {t.pairHint}
+        </Text>
       </View>
       {error !== undefined ? (
-        <Text
-          accessibilityRole="alert"
-          accessibilityLiveRegion="polite"
-          style={{ color: theme.danger }}
-        >
+        <Text accessibilityRole="alert" accessibilityLiveRegion="polite" tone="danger">
           {pairingFailureText(error, lastMethod.current)}
         </Text>
       ) : null}
@@ -155,30 +157,33 @@ export default function PairScreen() {
           onPress={() => void pair(handled.current!, lastMethod.current, true)}
         />
       ) : null}
-      <Text style={{ color: theme.ink, fontWeight: '600' }}>{t.pasteLink}</Text>
-      <TextInput
-        accessibilityLabel={t.pasteLink}
-        value={link}
-        onChangeText={(value) => {
-          setLink(value);
-          handled.current = undefined;
-        }}
-        placeholder="deepseekbot://pair?p=…"
-        placeholderTextColor={theme.inkSoft}
-        autoCapitalize="none"
-        autoCorrect={false}
-        keyboardType="url"
-        returnKeyType="go"
-        onSubmitEditing={() => void pair(link, 'paste')}
-        style={{
-          borderWidth: 1,
-          borderColor: theme.border,
-          borderRadius: 12,
-          padding: 12,
-          fontSize: 16,
-          color: theme.ink,
-          backgroundColor: theme.surface,
-        }}
+      <View style={{ gap: space.x2 }}>
+        <Text variant="meta" tone="muted" accessibilityRole="header">
+          {t.pasteLink}
+        </Text>
+        <TextField
+          accessibilityLabel={t.pasteLink}
+          value={link}
+          onChangeText={(value) => {
+            setLink(value);
+            handled.current = undefined;
+          }}
+          placeholder="deepseekbot://pair?p=…"
+          autoCapitalize="none"
+          autoCorrect={false}
+          keyboardType="url"
+          returnKeyType="go"
+          onSubmitEditing={() => void pair(link, 'paste')}
+        />
+        <Text variant="meta" tone="muted">
+          {t.pasteLinkHint}
+        </Text>
+      </View>
+      <ConnectionNameField
+        value={connectionName}
+        onChange={setConnectionName}
+        maxLength={HOST_NAME_MAX}
+        disabled={busy}
       />
       <Button
         label={t.pair}
@@ -188,6 +193,13 @@ export default function PairScreen() {
         disabled={busy || link.trim() === ''}
         onPress={() => void pair(link, 'paste')}
       />
+      {cloudAvailable && (
+        <Button
+          label={t.cloud.title}
+          variant="text"
+          onPress={() => router.dismissTo('/cloud-services')}
+        />
+      )}
     </KeyboardFormScroll>
   );
 }

apps/mobile/app/settings/index.tsx

@@ -11,6 +11,7 @@ import { StatisticsSettings } from '../../src/ui/shell/statistics-settings';
 import { MessageDisplaySettings } from '../../src/ui/shell/message-display-settings';
 import { ActivityCountLink } from '../../src/ui/shell/activity-count-settings';
 import { SHEET_GROUP } from '../../src/ui/chat/sheet';
+import { RowIcon } from '../../src/ui/primitives/row-icon';
 import { SettingsRow } from '../../src/ui/primitives/settings-row';
 import { t } from '../../src/ui/strings';
 import { SettingsView } from '../../src/ui/settings-view';
@@ -33,6 +34,7 @@ export default function SettingsScreen() {
         <SettingsRow
           on={SHEET_GROUP}
           title={t.chatBackground.global}
+          leading={<RowIcon name="background" />}
           disclosure
           onPress={() => router.push('/settings/chat-background')}
         />

apps/mobile/src/ui/chat/chat-title.tsx

@@ -3,10 +3,12 @@ import { Pressable, View } from 'react-native';
 
 import type { RosterBot } from '../../host/client';
 import { BotAvatar } from '../bot-avatar';
-import { frosted, useDesignTheme } from '../design/theme';
-import { edge, radius, space } from '../design/tokens';
+import { useDesignTheme } from '../design/theme';
+import { radius, space } from '../design/tokens';
+import { DrawerMaterial, useLiquidGlass } from '../primitives/drawer-material';
 import { t } from '../strings';
 import { botDotTone } from './bot-tone';
+import { headerGlassFill } from './header-chrome';
 
 const AVATAR = 28;
 const DOT = space.x3;
@@ -21,6 +23,7 @@ export function ChatTitle({
   onPress(): void;
 }) {
   const theme = useDesignTheme();
+  const glass = useLiquidGlass();
   const status = bot === undefined ? undefined : bot.paused ? t.paused : t.state[bot.state];
   const name = bot?.displayName ?? fallback;
   return (
@@ -39,11 +42,10 @@ export function ChatTitle({
         paddingLeft: bot === undefined ? theme.touch / 2 : (theme.touch - AVATAR) / 2,
         paddingRight: bot === undefined ? theme.touch / 2 : (theme.touch - DOT) / 2,
         borderRadius: radius.round,
-        borderWidth: edge.hairline,
-        borderColor: theme.layer.raised.edge,
-        backgroundColor: pressed ? theme.layer.raised.pressed : frosted(theme.layer.raised.fill),
+        ...headerGlassFill(theme, glass, pressed),
       })}
     >
+      {glass ? <DrawerMaterial /> : null}
       {bot === undefined ? null : <BotAvatar bot={bot} size={AVATAR} ring={false} />}
       <SourceName name={name} source="computer" />
       {bot === undefined ? null : (

apps/mobile/src/ui/chat/conversation-screen.tsx

@@ -827,7 +827,11 @@ function ChatConversation({
               />
             </SpeakerStageContext.Provider>
           </MarkdownViewportContext.Provider>
-          <EdgeFade edge="bottom" height={edgeFade.bottom} />
+          <EdgeFade
+            edge="bottom"
+            height={composerHeight + edgeFade.bottom}
+            fade={edgeFade.bottom}
+          />
           {latest.away ? (
             <View
               pointerEvents="box-none"
@@ -844,7 +848,7 @@ function ChatConversation({
           ) : null}
         </Animated.View>
       </KeyboardChatFrame>
-      <EdgeFade edge="top" height={headerHeight + edgeFade.top} />
+      <EdgeFade edge="top" height={headerHeight + edgeFade.top} fade={edgeFade.top} />
       <ChatHeader
         left={<HeaderBackButton onPress={leave} />}
         center={