Накатил человеческий дизайн

codebase/backend/frontend-test-site/app/dialogs/index.tsx

@@ -1,10 +1,13 @@
 import { useQuery } from "@tanstack/react-query";
 import { Link, useRouter } from "expo-router";
 import React, { useEffect, useRef } from "react";
-import { ScrollView, Text } from "react-native";
+import { ScrollView, Text, View } from "react-native";
 import { useApp } from "../../src/app-context";
+import { AppHeader } from "../../src/components/AppHeader";
+import { ScreenShell } from "../../src/components/ScreenShell";
 import { dialogApi } from "../../src/services";
-import { ErrorNotice, Header, Loading, styles } from "../../src/ui";
+import { ErrorNotice, Loading, styles } from "../../src/ui";
+import { spacing } from "../../src/theme";
 
 export default function DialogsScreen() {
   const app = useApp();
@@ -20,17 +23,27 @@ export default function DialogsScreen() {
     if (chat.data) router.replace(`/dialogs/${chat.data.dialog_id}`);
   }, [chat.data, router]);
 
-  if (app.authStatus !== "authenticated") return <ScrollView contentContainerStyle={styles.page}>
-    <Header status={app.authStatus} realtime={app.realtimeState} />
-    <Text accessibilityRole="header" style={styles.title}>Чат</Text>
-    <Text style={styles.text}>Чат с компанией доступен после авторизации. Отправьте сообщение на главной странице, чтобы войти.</Text>
-    <Link href="/" style={styles.link}>На главную</Link>
-  </ScrollView>;
+  if (app.authStatus !== "authenticated") {
+    return (
+      <ScreenShell>
+        <AppHeader guestLabel="Гость" />
+        <View style={{ flex: 1, padding: spacing.lg, justifyContent: "center", gap: spacing.md }}>
+          <Text accessibilityRole="header" style={styles.title}>Чат</Text>
+          <Text style={styles.text}>Чат с компанией доступен после авторизации. Отправьте сообщение на главной странице, чтобы войти.</Text>
+          <Link href="/" style={styles.link}>На главную</Link>
+        </View>
+      </ScreenShell>
+    );
+  }
 
-  return <ScrollView contentContainerStyle={styles.page}>
-    <Header status={app.authStatus} realtime={app.realtimeState} onLogout={() => void app.signOut()} />
-    <Text accessibilityRole="header" style={styles.title}>Чат</Text>
-    {chat.isLoading && <Loading />}
-    {chat.error && <ErrorNotice error={chat.error} retry={() => void chat.refetch()} />}
-  </ScrollView>;
+  return (
+    <ScreenShell>
+      <AppHeader />
+      <View style={{ flex: 1, padding: spacing.lg, justifyContent: "center" }}>
+        <Text accessibilityRole="header" style={styles.title}>Открываем чат…</Text>
+        {chat.isLoading && <Loading />}
+        {chat.error && <ErrorNotice error={chat.error} retry={() => void chat.refetch()} />}
+      </View>
+    </ScreenShell>
+  );
 }