Store the user in localStorage

frontend/src/ui/App.tsx

@@ -4,9 +4,15 @@ import LoginScreen from "./screen/LoginScreen";
 import RegisterScreen from "./screen/RegisterScreen";
 import { useAppState } from "./state";
 import { DialogProvider } from "./contexts/DialogContext";
+import { useEffect } from "react";
 
 export default function App() {
-    const { currentPage } = useAppState();
+    const { currentPage, restoreUserFromStorage } = useAppState();
+
+    // Restore user from localStorage on app initialization
+    useEffect(() => {
+        restoreUserFromStorage();
+    }, [restoreUserFromStorage]);
 
     let page = <LoginScreen />;
 

frontend/src/ui/components/chat/LeftPanel.tsx

@@ -12,6 +12,11 @@ import type { ChatTabs } from "../../state";
 
 function BottomAppBar() {
     const [settingsOpen, onSettingsOpenChange] = useState(false);
+    const { logout } = useAppState();
+
+    const handleLogout = () => {
+        logout();
+    };
 
     return (
         <>
@@ -19,6 +24,12 @@ function BottomAppBar() {
                 <mdui-button-icon icon="settings--filled" id="settings-open" onClick={() => onSettingsOpenChange(true)}></mdui-button-icon>
                 <mdui-button-icon icon="group_add--filled"></mdui-button-icon>
                 <div style={{ flexGrow: 1 }}></div>
+                <mdui-button-icon 
+                    icon="logout--filled" 
+                    id="logout-btn" 
+                    onClick={handleLogout}
+                    title="Выйти"
+                ></mdui-button-icon>
                 <mdui-fab icon="edit--filled"></mdui-fab>
             </mdui-bottom-app-bar>
             <SettingsDialog isOpen={settingsOpen} onOpenChange={onSettingsOpenChange} />

frontend/src/ui/state.ts

@@ -55,6 +55,7 @@ interface AppState {
     user: UserState;
     setUser: (token: string, user: User) => void;
     logout: () => void;
+    restoreUserFromStorage: () => void;
 }
 
 export const useAppState = create<AppState>((set, get) => ({
@@ -151,6 +152,14 @@ export const useAppState = create<AppState>((set, get) => ({
             }
         }));
 
+        // Store credentials in localStorage
+        try {
+            localStorage.setItem('authToken', token);
+            localStorage.setItem('currentUser', JSON.stringify(user));
+        } catch (error) {
+            console.error('Failed to store credentials in localStorage:', error);
+        }
+
         try {
             const payload: WebSocketMessage = {
                 type: "ping",
@@ -166,13 +175,45 @@ export const useAppState = create<AppState>((set, get) => ({
             })
         } catch {}
     },
-    logout: () => set(() => ({
+    logout: () => {
-        user: {
+        // Clear localStorage
-            currentUser: null,
+        try {
-            authToken: null
+            localStorage.removeItem('authToken');
-        },
+            localStorage.removeItem('currentUser');
-        currentPage: "login"
+        } catch (error) {
-    })),
+            console.error('Failed to clear localStorage:', error);
+        }
+
+        set(() => ({
+            user: {
+                currentUser: null,
+                authToken: null
+            },
+            currentPage: "login"
+        }));
+    },
+    restoreUserFromStorage: () => {
+        try {
+            const token = localStorage.getItem('authToken');
+            const userStr = localStorage.getItem('currentUser');
+            
+            if (token && userStr) {
+                const user = JSON.parse(userStr) as User;
+                set(() => ({
+                    user: {
+                        currentUser: user,
+                        authToken: token
+                    },
+                    currentPage: "chat"
+                }));
+            }
+        } catch (error) {
+            console.error('Failed to restore user from localStorage:', error);
+            // Clear invalid data
+            localStorage.removeItem('authToken');
+            localStorage.removeItem('currentUser');
+        }
+    },
     
     // Panel management
     setActivePanel: (panel: MessagePanel | null) => set((state) => ({