d3m0k1d/d3m0k1d.ru
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: bug with avatar fixes
Some checks failed
Backend ci / build (pull_request) Has been cancelled
Details

Browse Source
This commit is contained in:
d3m0k1d
2026-02-15 00:06:22 +03:00
parent 5d8b271da2
commit de2735eb16
6 changed files with 197 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
frontend/src/components/Navigation.tsx
View File

@@ -1,58 +1,15 @@
import { useState, useEffect } from "react";
import { useState } from "react";
import { useAuth } from "../contexts/AuthContext.tsx";
interface User {
name?: string;
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);
}
};
function AccountAvatar() {
const { user, isLoading, logout } = useAuth();
const handleLogout = () => {
localStorage.removeItem("auth_token");
setUser(null);
logout();
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,70 +19,73 @@ export default function Navigation() {
return "?";
};
const AccountAvatar = () => {
if (isLoading) {
return (
<div className="w-10 h-10 rounded-full bg-gray-200 animate-pulse" />
);
}
if (isLoading) {
return <div className="w-10 h-10 rounded-full bg-gray-200 animate-pulse" />;
}
return (
<>
{user ? (
<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%)] 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 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
return (
<>
{user ? (
<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%)] 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 group-hover:from-red-500 group-hover:to-red-600 transition-colors">
{getInitials(user)}
</div>
)}
<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>
) : (
<a
href="/login"
className="w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center hover:bg-gray-400 transition-colors"
</div>
) : (
<a
href="/login"
className="w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center hover:bg-gray-400 transition-colors"
>
<svg
className="w-6 h-6 text-gray-600"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<svg
className="w-6 h-6 text-gray-600"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
</a>
)}
</>
);
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
</a>
)}
</>
);
}
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