feat: change auth type from cookies to localstorage add loadpage, test auth to prod

frontend/src/components/Navigation.tsx

@@ -17,18 +17,41 @@ export default function Navigation() {
 
   const checkAuth = async () => {
     try {
-      const response = await fetch("/api/auth/session");
+      const token = localStorage.getItem("auth_token");
+
+      if (!token) {
+        setIsLoading(false);
+        return;
+      }
+
+      const response = await fetch("/api/v1/auth/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");
+    setUser(null);
+    window.location.href = "/";
+  };
+
   const getInitials = (user: User): string => {
     if (user.name) {
       return user.name.substring(0, 2).toUpperCase();
@@ -49,18 +72,26 @@ export default function Navigation() {
     return (
       <>
         {user ? (
-          <div className="relative cursor-pointer">
+          <div
+            className="relative cursor-pointer group"
+            onClick={handleLogout}
+            title={`Logout (${user.name || user.email})`}
+          >
             {user.avatar ? (
               <img
                 src={user.avatar}
                 alt={user.name || user.email || "User"}
-                className="w-10 h-10 rounded-full object-cover border-2 border-[hsl(270,73%,63%)]"
+                className="w-10 h-10 rounded-full object-cover border-2 border-[hsl(270,73%,63%)] group-hover:border-red-500 transition-colors"
               />
             ) : (
-              <div className="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white font-semibold text-sm">
+              <div className="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white font-semibold text-sm group-hover:from-red-500 group-hover:to-red-600 transition-colors">
                 {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>
           </div>
         ) : (
           <a
@@ -186,13 +217,15 @@ export default function Navigation() {
                   <div className="py-3 px-4 text-sm text-gray-600">
                     {user.name || user.email}
                   </div>
-                  <a
-                    href="/logout"
-                    className="py-3 px-4 hover:bg-gray-100 rounded-lg transition-all text-red-600"
-                    onClick={() => setIsOpen(false)}
+                  <button
+                    onClick={() => {
+                      setIsOpen(false);
+                      handleLogout();
+                    }}
+                    className="py-3 px-4 hover:bg-gray-100 rounded-lg transition-all text-red-600 text-left"
                   >
                     Logout
-                  </a>
+                  </button>
                 </>
               )}
             </div>