I finished the remaining polish so the admin app now feels fully “app‑like” across the core screens.

resources/js/admin/mobile/SettingsPage.tsx

@@ -26,6 +26,7 @@ import { getInstallBannerDismissed, setInstallBannerDismissed, shouldShowInstall
 import { MobileInstallBanner } from './components/MobileInstallBanner';
 import { setTourSeen } from './lib/mobileTour';
 import { useBackNavigation } from './hooks/useBackNavigation';
+import { useOnlineStatus } from './hooks/useOnlineStatus';
 
 type PreferenceKey = keyof NotificationPreferences;
 
@@ -59,6 +60,7 @@ export default function MobileSettingsPage() {
   const [storageError, setStorageError] = React.useState<string | null>(null);
   const pushState = useAdminPushSubscription();
   const devicePermissions = useDevicePermissions();
+  const online = useOnlineStatus();
   const installPrompt = useInstallPrompt();
   const back = useBackNavigation(adminPath('/mobile/profile'));
   const [installBannerDismissed, setInstallBannerDismissedState] = React.useState(() => getInstallBannerDismissed());
@@ -109,6 +111,9 @@ export default function MobileSettingsPage() {
     t(`mobileSettings.deviceStatusValues.${status}`, status);
   const storageLabel = (status: StorageStatus) =>
     t(`mobileSettings.deviceStatusValues.${status}`, status);
+  const connectionLabel = online
+    ? t('mobileSettings.deviceStatusValues.online', 'Online')
+    : t('mobileSettings.deviceStatusValues.offline', 'Offline');
 
   React.useEffect(() => {
     (async () => {
@@ -375,6 +380,17 @@ export default function MobileSettingsPage() {
                 {storageLabel(devicePermissions.storage)}
               </PillBadge>
             </XStack>
+            <XStack alignItems="center" justifyContent="space-between" gap="$2">
+              <YStack flex={1} space="$1">
+                <Text fontSize="$sm" fontWeight="700" color={text}>
+                  {t('mobileSettings.deviceStatus.connection.label', 'Connection')}
+                </Text>
+                <Text fontSize="$xs" color={muted}>
+                  {t('mobileSettings.deviceStatus.connection.description', 'Shows if the app is online or offline.')}
+                </Text>
+              </YStack>
+              <PillBadge tone={online ? 'success' : 'warning'}>{connectionLabel}</PillBadge>
+            </XStack>
           </YStack>
         )}
         {devicePermissions.storage === 'available' ? (