ee4438834c
- Replaced `window.electron.invoke` calls with equivalent `tauri` function calls for all IPC interactions. - Removed `electron.d.ts` TypeScript definitions as they are no longer needed. - Updated related logic for offline/online state synchronization. - Added `types.rs` and `shared/mod.rs` modules to support Tauri IPC integration with Rust enums and shared logic. - Refactored IPC request queues to use updated handler names for consistency with Tauri.
74 lines
3.3 KiB
TypeScript
74 lines
3.3 KiB
TypeScript
import {useContext, useEffect, useRef, useState} from "react";
|
|
import {SessionContext} from "@/context/SessionContext";
|
|
import NoPicture from "@/components/NoPicture";
|
|
import System from "@/lib/models/System";
|
|
import {useTranslations} from "next-intl";
|
|
import * as tauri from '@/lib/tauri';
|
|
|
|
export default function UserMenu() {
|
|
const {session} = useContext(SessionContext);
|
|
const t = useTranslations();
|
|
|
|
const profileMenuRef: React.RefObject<HTMLDivElement | null> = useRef<HTMLDivElement>(null);
|
|
|
|
const [isProfileMenuOpen, setIsProfileMenuOpen] = useState(false);
|
|
|
|
function handleProfileClick(): void {
|
|
setIsProfileMenuOpen(!isProfileMenuOpen);
|
|
}
|
|
|
|
useEffect((): () => void => {
|
|
function handleClickOutside(event: MouseEvent): void {
|
|
if (profileMenuRef.current && !profileMenuRef.current.contains(event.target as Node)) {
|
|
setIsProfileMenuOpen(false);
|
|
}
|
|
}
|
|
|
|
if (isProfileMenuOpen) {
|
|
document.addEventListener("mousedown", handleClickOutside);
|
|
}
|
|
|
|
return (): void => {
|
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
};
|
|
}, [isProfileMenuOpen]);
|
|
|
|
async function handleLogout(): Promise<void> {
|
|
System.removeCookie("token");
|
|
await tauri.removeToken();
|
|
tauri.logout();
|
|
}
|
|
|
|
return (
|
|
<div className="relative" data-guide="user-dropdown" ref={profileMenuRef}>
|
|
<button
|
|
className="group bg-secondary/50 hover:bg-secondary p-2.5 rounded-full transition-all duration-200 flex items-center border border-secondary/50 hover:border-primary/30 hover:shadow-md hover:scale-110"
|
|
onClick={session.user ? handleProfileClick : () => document.location.href = "/login"}
|
|
>
|
|
{
|
|
session.user && <NoPicture/>
|
|
}
|
|
</button>
|
|
{isProfileMenuOpen && (
|
|
<div
|
|
className="absolute right-0 mt-3 w-56 bg-tertiary rounded-xl shadow-2xl py-2 z-[100] border border-secondary/50 backdrop-blur-sm animate-fadeIn">
|
|
<div
|
|
className="px-4 py-3 border-b border-secondary/30 bg-gradient-to-r from-primary/10 to-transparent">
|
|
<p className="text-text-primary font-bold text-sm tracking-wide">{session.user?.username}</p>
|
|
<p className="text-text-secondary text-xs mt-0.5">{session.user?.email}</p>
|
|
</div>
|
|
<a href="https://eritors.com/settings"
|
|
className="group flex items-center gap-3 px-4 py-2.5 text-text-primary hover:bg-secondary/50 transition-all hover:pl-5">
|
|
<span
|
|
className="text-sm font-medium group-hover:text-primary transition-colors">{t('userMenu.settings')}</span>
|
|
</a>
|
|
<a onClick={handleLogout} href="#"
|
|
className="group flex items-center gap-3 px-4 py-2.5 text-error hover:bg-error/10 transition-all hover:pl-5 rounded-b-xl">
|
|
<span className="text-sm font-medium">{t('userMenu.logout')}</span>
|
|
</a>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|