Add components for Act management and integrate Electron setup

2025-11-16 11:00:04 -05:00
parent e192b6dcc2
commit 8167948881
97 changed files with 25378 additions and 3 deletions
--- a/components/UserMenu.tsx
+++ b/components/UserMenu.tsx
@@ -0,0 +1,69 @@
+import React, {useContext, useEffect, useRef, useState} from "react";
+import {SessionContext} from "@/context/SessionContext";
+import NoPicture from "@/components/NoPicture";
+import System from "@/lib/models/System";
+
+export default function UserMenu() {
+    const {session} = useContext(SessionContext);
+    
+    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]);
+    
+    function handleLogout(): void {
+        System.removeCookie("token");
+        document.location.href = "https://eritors.com/login";
+    }
+
+    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">Paramètres</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">Déconnexion</span>
+                    </a>
+                </div>
+            )}
+        </div>
+    )
+}