ERitors-Scribe-Desktop/components/UserMenu.tsx

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";

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 window.electron.removeToken();
        window.electron.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>
    )
}