fix: bug with avatar fixes

frontend/package-lock.json

@@ -17,7 +17,7 @@
       "devDependencies": {
         "@eslint/js": "^9.39.1",
         "@types/node": "^24.10.1",
-        "@types/react": "^19.2.5",
+        "@types/react": "^19.2.14",
         "@types/react-dom": "^19.2.3",
         "@vitejs/plugin-react": "^5.1.1",
         "daisyui": "^5.5.14",
@@ -1640,9 +1640,9 @@
       }
     },
     "node_modules/@types/react": {
-      "version": "19.2.10",
+      "version": "19.2.14",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.10.tgz",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
-      "integrity": "sha512-WPigyYuGhgZ/cTPRXB2EwUw+XvsRA3GqHlsP4qteqrnnjDrApbS7MxcGr/hke5iUoeB7E/gQtrs9I37zAJ0Vjw==",
+      "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

frontend/package.json

@@ -19,7 +19,7 @@
   "devDependencies": {
     "@eslint/js": "^9.39.1",
     "@types/node": "^24.10.1",
-    "@types/react": "^19.2.5",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
     "daisyui": "^5.5.14",

frontend/src/App.tsx

@@ -1,6 +1,7 @@
 import "./App.css";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { useEffect } from "react";
+import { AuthProvider } from "./contexts/AuthContext.tsx";
 import Navigation from "./components/Navigation.tsx";
 import Footer from "./components/Footer.tsx";
 import AuthCallback from "./components/AuthCallback.tsx";
@@ -14,6 +15,7 @@ function App() {
   }, []);
 
   return (
+    <AuthProvider>
       <BrowserRouter>
         <div className="min-h-screen flex flex-col">
           <Navigation />
@@ -35,6 +37,7 @@ function App() {
           <Footer />
         </div>
       </BrowserRouter>
+    </AuthProvider>
   );
 }
 

frontend/src/components/AuthCallback.tsx

@@ -1,29 +1,36 @@
 import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
+import { useAuth } from "../contexts/AuthContext.tsx";
 
 export default function AuthCallback() {
   const navigate = useNavigate();
+  const { checkAuth } = useAuth();
 
   useEffect(() => {
+    const processAuth = async () => {
       const hash = window.location.hash.substring(1);
       const params = new URLSearchParams(hash);
       const token = params.get("token");
 
       if (token) {
         localStorage.setItem("auth_token", token);
+        console.log("Token saved, loading user...");
 
-      navigate("/");
+        await checkAuth();
+
+        navigate("/", { replace: true });
       } else {
+        console.error("No token in URL");
         navigate("/login?error=no_token");
       }
-  }, [navigate]);
+    };
+
+    processAuth();
+  }, [navigate, checkAuth]);
 
   return (
-    <div className="min-h-screen flex items-center justify-center">
+    <div className="fixed inset-0 bg-black flex items-center justify-center">
-      <div className="text-center">
+      <div className="w-12 h-12 border-2 border-gray-800 border-t-[hsl(270,73%,63%)] rounded-full animate-spin"></div>
-        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[hsl(270,73%,63%)] mx-auto mb-4"></div>
-        <p className="text-gray-400">Completing authentication...</p>
-      </div>
     </div>
   );
 }

frontend/src/components/Navigation.tsx

@@ -1,58 +1,15 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
+import { useAuth } from "../contexts/AuthContext.tsx";
 
-interface User {
+function AccountAvatar() {
-  name?: string;
+  const { user, isLoading, logout } = useAuth();
-  email?: string;
-  avatar?: string;
-}
-
-export default function Navigation() {
-  const [isOpen, setIsOpen] = useState(false);
-  const [user, setUser] = useState<User | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    checkAuth();
-  }, []);
-
-  const checkAuth = async () => {
-    try {
-      const token = localStorage.getItem("auth_token");
-
-      if (!token) {
-        setIsLoading(false);
-        return;
-      }
-
-      const response = await fetch("/api/v1/session", {
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-      });
-
-      if (response.ok) {
-        const data = await response.json();
-        setUser(data.user);
-        console.log("User loaded:", data.user);
-      } else {
-        console.error("Token invalid, removing");
-        localStorage.removeItem("auth_token");
-      }
-    } catch (error) {
-      console.error("Auth check failed:", error);
-      localStorage.removeItem("auth_token");
-    } finally {
-      setIsLoading(false);
-    }
-  };
 
   const handleLogout = () => {
-    localStorage.removeItem("auth_token");
+    logout();
-    setUser(null);
     window.location.href = "/";
   };
 
-  const getInitials = (user: User): string => {
+  const getInitials = (user: { name?: string; email?: string }): string => {
     if (user.name) {
       return user.name.substring(0, 2).toUpperCase();
     }
@@ -62,11 +19,8 @@ export default function Navigation() {
     return "?";
   };
 
-  const AccountAvatar = () => {
   if (isLoading) {
-      return (
+    return <div className="w-10 h-10 rounded-full bg-gray-200 animate-pulse" />;
-        <div className="w-10 h-10 rounded-full bg-gray-200 animate-pulse" />
-      );
   }
 
   return (
@@ -88,7 +42,6 @@ export default function Navigation() {
               {getInitials(user)}
             </div>
           )}
-            {/* Tooltip при наведении */}
           <div className="absolute top-12 right-0 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
             Click to logout
           </div>
@@ -115,17 +68,24 @@ export default function Navigation() {
       )}
     </>
   );
+}
+
+export default function Navigation() {
+  const [isOpen, setIsOpen] = useState(false);
+  const { user, logout } = useAuth();
+
+  const handleLogout = () => {
+    logout();
+    window.location.href = "/";
   };
 
   return (
     <>
-      {/* Account Avatar - Fixed position, synced with nav */}
       <div className="hidden md:block fixed right-4 lg:right-8 top-3 z-50">
         <AccountAvatar />
       </div>
 
       <nav className="sticky top-0 z-50 py-3">
-        {/* Desktop Navigation */}
         <div className="hidden md:flex gap-8 lg:gap-12 justify-center">
           <a
             href="/"
@@ -147,7 +107,6 @@ export default function Navigation() {
           </a>
         </div>
 
-        {/* Mobile */}
         <div className="md:hidden flex justify-between items-center px-4">
           <button
             onClick={() => setIsOpen(!isOpen)}
@@ -180,7 +139,6 @@ export default function Navigation() {
         </div>
       </nav>
 
-      {/* Mobile Menu */}
       {isOpen && (
         <>
           <div

frontend/src/contexts/AuthContext.tsx

@@ -0,0 +1,86 @@
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  type ReactNode,
+} from "react";
+
+interface User {
+  name?: string;
+  email?: string;
+  avatar?: string;
+}
+
+interface AuthContextType {
+  user: User | null;
+  isLoading: boolean;
+  checkAuth: () => Promise<void>;
+  logout: () => void;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<User | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const checkAuth = async () => {
+    setIsLoading(true);
+    try {
+      const token = localStorage.getItem("auth_token");
+
+      if (!token) {
+        setUser(null);
+        setIsLoading(false);
+        return;
+      }
+
+      const response = await fetch("/api/session", {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        setUser(data.user);
+        console.log("User loaded:", data.user);
+      } else {
+        console.error("Token invalid, removing");
+        localStorage.removeItem("auth_token");
+        setUser(null);
+      }
+    } catch (error) {
+      console.error("Auth check failed:", error);
+      localStorage.removeItem("auth_token");
+      setUser(null);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const logout = () => {
+    localStorage.removeItem("auth_token");
+    setUser(null);
+  };
+
+  useEffect(() => {
+    checkAuth();
+  }, []);
+
+  return (
+    <AuthContext.Provider value={{ user, isLoading, checkAuth, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error("useAuth must be used within AuthProvider");
+  }
+  return context;
+}