Migrate to React Router

frontend/src/pages/app/resources/css/_404.scss

@@ -0,0 +1,84 @@
+.not-found-page {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 2rem;
+}
+
+.not-found-container {
+    display: flex;
+    align-items: center;
+    gap: 3rem;
+    max-width: 800px;
+    width: 100%;
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 20px;
+    padding: 3rem;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(10px);
+}
+
+.not-found-content {
+    flex: 1;
+}
+
+.error-code {
+    font-size: 6rem;
+    font-weight: 900;
+    color: #667eea;
+    line-height: 1;
+    margin-bottom: 1rem;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.not-found-content h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: #2d3748;
+    margin-bottom: 1rem;
+    line-height: 1.2;
+}
+
+.not-found-content p {
+    font-size: 1.1rem;
+    color: #718096;
+    margin-bottom: 2rem;
+    line-height: 1.6;
+}
+
+.not-found-actions {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+.not-found-illustration {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #667eea;
+    opacity: 0.7;
+}
+
+@media (max-width: 768px) {
+    .not-found-container {
+        flex-direction: column;
+        text-align: center;
+        gap: 2rem;
+        padding: 2rem;
+    }
+    
+    .error-code {
+        font-size: 4rem;
+    }
+    
+    .not-found-content h1 {
+        font-size: 2rem;
+    }
+    
+    .not-found-actions {
+        justify-content: center;
+    }
+}

frontend/src/pages/app/resources/css/style.scss

@@ -10,6 +10,7 @@
 @use "electron";
 @use "dialogs/reply";
 @use "download-app";
+@use "404" as not-found;
 
 @use "lib/fonts/montserrat";
 @use "lib/fonts/material-symbols";

frontend/src/pages/app/ui/screen/LoginScreen.tsx

@@ -7,14 +7,15 @@ import { API_BASE_URL } from "../../core/config";
 import { useRef } from "react";
 import type { TextField } from "mdui/components/text-field";
 import { useAppState } from "../state";
+import { useNavigate } from "react-router-dom";
 import { MaterialTextField } from "../components/core/TextField";
 import { initialize, isSupported, startElectronReceiver, subscribe } from "../../utils/push-notifications";
 import { isElectron } from "../../electron/electron";
 
 export default function LoginScreen() {
     const [alerts, updateAlerts] = useImmer<Alert[]>([]);
-    const setCurrentPage = useAppState(state => state.setCurrentPage);
     const setUser = useAppState(state => state.setUser);
+    const navigate = useNavigate();
 
     function showAlert(type: AlertType, message: string) {
         updateAlerts((alerts) => { alerts.push({type: type, message: message}) });
@@ -67,7 +68,7 @@ export default function LoginScreen() {
                                     console.error("Key setup failed:", e);
                                 }
 
-                                setCurrentPage("chat");
+                                navigate("/chat");
                                 
                                 // Initialize notifications
                                 try {
@@ -130,7 +131,7 @@ export default function LoginScreen() {
                         <a
                             href="#"
                             className="link" 
-                            onClick={() => setCurrentPage("register")}>
+                            onClick={() => navigate("/register")}>
                             Зарегистрируйтесь
                         </a>
                     </p>

frontend/src/pages/app/ui/screen/RegisterScreen.tsx

@@ -7,13 +7,14 @@ import { TextField } from "mdui/components/text-field";
 import type { ErrorResponse, RegisterRequest, LoginResponse } from "../../core/types";
 import { API_BASE_URL } from "../../core/config";
 import { useAppState } from "../state";
+import { useNavigate } from "react-router-dom";
 import { MaterialTextField } from "../components/core/TextField";
 import { ensureKeysOnLogin } from "../../auth/crypto";
 
 export default function RegisterScreen() {
     const [alerts, updateAlerts] = useImmer<Alert[]>([]);
-    const setCurrentPage = useAppState(state => state.setCurrentPage);
     const setUser = useAppState(state => state.setUser);
+    const navigate = useNavigate();
 
     function showAlert(type: AlertType, message: string) {
         updateAlerts((alerts) => { alerts.push({type: type, message: message}) });
@@ -83,7 +84,7 @@ export default function RegisterScreen() {
                                 console.error("Key setup failed:", e);
                             }
 
-                            setCurrentPage("chat");
+                            navigate("/chat");
                         } else {
                             const data: ErrorResponse = await response.json();
                             showAlert("danger", data.message || "Ошибка при регистрации");
@@ -136,7 +137,7 @@ export default function RegisterScreen() {
                             href="#" 
                             id="login-link" 
                             className="link" 
-                            onClick={() => setCurrentPage("login")}>
+                            onClick={() => navigate("/login")}>
                             Войдите
                         </a>
                     </p>

frontend/src/pages/app/ui/state.ts

@@ -10,7 +10,6 @@ import { API_BASE_URL } from "../core/config";
 import { initialize, subscribe, startElectronReceiver, isSupported } from "../utils/push-notifications";
 import { isElectron } from "../electron/electron";
 
-type Page = "login" | "register" | "chat"
 export type ChatTabs = "chats" | "channels" | "contacts" | "dms"
 
 interface ActiveDM {
@@ -37,9 +36,6 @@ export interface UserState {
 }
 
 interface AppState {
-    currentPage: Page;
-    setCurrentPage: (page: Page) => void;
-    
     // Chat state
     chat: ChatState;
     addMessage: (message: Message) => void;
@@ -60,13 +56,10 @@ interface AppState {
     user: UserState;
     setUser: (token: string, user: User) => void;
     logout: () => void;
-    restoreUserFromStorage: () => void;
+    restoreUserFromStorage: () => Promise<void>;
 }
 
 export const useAppState = create<AppState>((set, get) => ({
-    currentPage: "login", // default page
-    setCurrentPage: (page: Page) => set({ currentPage: page }),
-    
     // Chat state
     chat: {
         messages: [],
@@ -191,8 +184,7 @@ export const useAppState = create<AppState>((set, get) => ({
             user: {
                 currentUser: null,
                 authToken: null
-            },
-            currentPage: "login"
+            }
         }));
     },
     restoreUserFromStorage: async () => {
@@ -212,8 +204,7 @@ export const useAppState = create<AppState>((set, get) => ({
                         user: {
                             currentUser: user,
                             authToken: token
-                        },
-                        currentPage: "chat"
+                        }
                     }));
 
                     try {