frontend: now working fully, fuctionality tested

web/src/App.tsx

@@ -1,50 +1,36 @@
-import { useEffect, useState } from 'react'
-import { pingApi, type PingResponse } from './api'
-import './index.css'
-
-type ApiState =
-  | { status: 'loading' }
-  | { status: 'ok'; data: PingResponse }
-  | { status: 'error'; error: string }
-
-function App() {
-  const [api, setApi] = useState<ApiState>({ status: 'loading' })
-
-  useEffect(() => {
-    let cancelled = false
-    pingApi()
-      .then((data) => {
-        if (!cancelled) setApi({ status: 'ok', data })
-      })
-      .catch((err: unknown) => {
-        if (!cancelled) setApi({ status: 'error', error: String(err) })
-      })
-    return () => {
-      cancelled = true
-    }
-  }, [])
+import { useAuth } from './auth/AuthContext'
+import AuthScreen from './screens/AuthScreen'
+import ChatApp from './screens/ChatApp'
 
+function Splash() {
   return (
-    <main className="shell">
-      <h1>Messenger</h1>
-      <div className="card">
-        <div className="status-row">
-          <span className={`dot ${api.status}`} aria-hidden />
-          <span className="status-label">
-            {api.status === 'loading' && 'API: connecting…'}
-            {api.status === 'ok' && 'API: connected'}
-            {api.status === 'error' && 'API: unreachable'}
-          </span>
-        </div>
-        {api.status === 'ok' && (
-          <p className="detail">
-            {api.data.message} · server time {api.data.time}
-          </p>
-        )}
-        {api.status === 'error' && <p className="detail">{api.error}</p>}
+    <div className="flex min-h-full flex-col items-center justify-center gap-5">
+      <div className="relative flex h-20 w-20 items-center justify-center">
+        <span className="absolute inset-0 animate-ping rounded-3xl bg-accent/20" aria-hidden="true" />
+        <span className="relative flex h-16 w-16 items-center justify-center rounded-3xl bg-gradient-to-br from-accent to-accent-strong text-white shadow-2xl shadow-accent/30">
+          <svg viewBox="0 0 24 24" className="h-8 w-8" fill="none" aria-hidden="true">
+            <path
+              d="M4 12.5h3l2-5 3.2 9 2.3-6 1.5 2H20"
+              stroke="currentColor"
+              strokeWidth="1.9"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </span>
       </div>
-    </main>
+      <div className="text-center">
+        <p className="font-display text-xl font-bold tracking-tight text-fg">Пульс</p>
+        <p className="mt-1 text-sm text-muted">Подключаемся…</p>
+      </div>
+    </div>
   )
 }
 
-export default App
+export default function App() {
+  const { user, loading } = useAuth()
+
+  if (loading) return <Splash />
+  if (!user) return <AuthScreen />
+  return <ChatApp user={user} />
+}