feat(mobile): polish unreachable host state (#387)

Author: AprilNEA

apps/mobile/e2e/flows/add-host.yaml

@@ -49,6 +49,9 @@ appId: com.arcboxlabs.linkcode.mobile
 # Naming the URL back is the assertion that matters: it can only come from text that made it
 # out of the field, into the store, and back onto a screen.
 - assertVisible: 'Unable to reach the host at http://127.0.0.1:19599.'
+- assertVisible: 'Host unavailable'
+- tapOn: 'Retry'
+- assertVisible: 'Connecting to the host…'
 
 # Best-effort tidy-up, deliberately `optional`. Removal is a list swipe action, and revealing one
 # needs a drag longer than Maestro's element-relative swipe produces — an element swipe either does

apps/mobile/src/components/host/host-connection-state.tsx

@@ -1,9 +1,15 @@
-import { Button, Host, ProgressView, Text, VStack } from '@expo/ui/swift-ui';
-import { font, foregroundStyle, multilineTextAlignment } from '@expo/ui/swift-ui/modifiers';
+import { Button, Host, Image, ProgressView, Text, VStack } from '@expo/ui/swift-ui';
+import {
+  buttonStyle,
+  font,
+  multilineTextAlignment,
+  textSelection,
+} from '@expo/ui/swift-ui/modifiers';
+import { FOOTNOTE, SECONDARY } from '@mobile/components/form/styles';
 import { useTranslations } from 'use-intl';
 
-const SECONDARY = foregroundStyle({ type: 'hierarchical', style: 'secondary' });
-const FOOTNOTE = font({ textStyle: 'footnote' });
+const CENTERED = multilineTextAlignment('center');
+const TITLE = font({ textStyle: 'title2', weight: 'semibold' });
 
 export interface HostConnectionStateProps {
   status: 'connecting' | 'error';
@@ -32,13 +38,24 @@ export function HostConnectionState({
           </>
         ) : (
           <>
-            <Text modifiers={[multilineTextAlignment('center')]}>{t('error', { url })}</Text>
+            <Image systemName="wifi.exclamationmark" size={44} modifiers={[SECONDARY]} />
+            <VStack spacing={6}>
+              <Text modifiers={[TITLE, CENTERED]}>{t('unavailableTitle')}</Text>
+              <Text modifiers={[SECONDARY, CENTERED, textSelection(true)]}>
+                {t('error', { url })}
+              </Text>
+            </VStack>
+            <Button
+              label={t('retry')}
+              systemImage="arrow.clockwise"
+              modifiers={[buttonStyle('borderedProminent')]}
+              onPress={onRetry}
+            />
             {failure ? (
-              <Text modifiers={[FOOTNOTE, SECONDARY, multilineTextAlignment('center')]}>
+              <Text modifiers={[FOOTNOTE, SECONDARY, CENTERED, textSelection(true)]}>
                 {failure}
               </Text>
             ) : null}
-            <Button label={t('retry')} onPress={onRetry} />
           </>
         )}
       </VStack>

packages/presentation/i18n/src/locales/en.ts

@@ -1302,6 +1302,7 @@ export const en = {
     },
     connection: {
       connecting: 'Connecting to the host…',
+      unavailableTitle: 'Host unavailable',
       error: 'Unable to reach the host at {url}.',
       retry: 'Retry',
     },

packages/presentation/i18n/src/locales/zh-cn.ts

@@ -1268,6 +1268,7 @@ export const zhCN = {
     },
     connection: {
       connecting: '正在连接 host…',
+      unavailableTitle: '无法连接 host',
       error: '无法连接 host（{url}）。',
       retry: '重试',
     },