Redesign responsive MyTube interface

frontend/src/App.tsx

@@ -1,57 +1,40 @@
 import { useQuery } from '@tanstack/react-query'
-import { Route, Routes } from 'react-router-dom'
+import { Link, Navigate, Route, Routes } from 'react-router-dom'
 import { getAuthStatus } from './api/client'
+import AppShell from './components/AppShell'
 import Connect from './pages/Connect'
 import Feed from './pages/Feed'
-import Saved from './pages/Saved'
 import Channels from './pages/Channels'
 import ChannelVideos from './pages/ChannelVideos'
 import VideoPage from './pages/VideoPage'
 import Categories from './pages/Categories'
+import Settings from './pages/Settings'
 import './App.css'
 
 function App() {
-  const { data, isLoading, isError } = useQuery({
-    queryKey: ['auth-status'],
-    queryFn: getAuthStatus,
-  })
+  const { data, isLoading, isError } = useQuery({ queryKey: ['auth-status'], queryFn: getAuthStatus })
 
-  if (isLoading) {
-    return (
-      <div className="app">
-        <p>Загрузка...</p>
-      </div>
-    )
-  }
+  if (isLoading) return <div className="app-loading"><span className="brand-mark">▶</span><p>Открываем MyTube…</p></div>
+  if (isError) return <div className="app-loading"><h1>Не удалось открыть MyTube</h1><p>Проверь подключение к серверу и обнови страницу.</p><button onClick={() => window.location.reload()}>Повторить</button></div>
+  if (!data?.authenticated) return <Connect />
 
-  if (isError) {
-    return (
-      <div className="app">
-        <p className="error">Backend недоступен</p>
-      </div>
-    )
-  }
-
-  if (!data?.authenticated) {
-    return (
-      <div className="app">
-        <Connect />
-      </div>
-    )
-  }
-
-  return (
-    <div className="app">
-      <Routes>
-        <Route path="/" element={<Feed />} />
-        <Route path="/saved" element={<Saved />} />
-        <Route path="/channels" element={<Channels />} />
-        <Route path="/channels/:channelId/videos" element={<ChannelVideos />} />
-        <Route path="/video/:youtubeVideoId" element={<VideoPage />} />
-        <Route path="/categories" element={<Categories />} />
-      </Routes>
-    </div>
-  )
+  return <AppShell>
+    <Routes>
+      <Route path="/" element={<Feed />} />
+      <Route path="/category/:categoryId" element={<Feed />} />
+      <Route path="/uncategorized" element={<Feed />} />
+      <Route path="/local" element={<Feed />} />
+      <Route path="/search" element={<Feed />} />
+      <Route path="/saved" element={<Navigate to="/local" replace />} />
+      <Route path="/channels" element={<Channels />} />
+      <Route path="/channels/:channelId/videos" element={<ChannelVideos />} />
+      <Route path="/video/:youtubeVideoId" element={<VideoPage />} />
+      <Route path="/settings" element={<Settings email={data.email} />} />
+      <Route path="/settings/categories" element={<Categories />} />
+      <Route path="/categories" element={<Navigate to="/settings/categories" replace />} />
+      <Route path="*" element={<div className="empty-state"><h1>Страница не найдена</h1><Link to="/">Вернуться к ленте</Link></div>} />
+    </Routes>
+  </AppShell>
 }
 
 export default App