import React, { useState, useEffect } from 'react'; import { Link, useLocation, useNavigate } from 'react-router-dom'; import { LayoutDashboard, FileText, Image as ImageIcon, Mic2, Video, Settings, Sun, Moon, LogOut, Crown, ShieldCheck, ArrowRight, User } from 'lucide-react'; import { useTheme } from '../../hooks/useTheme'; import { useAuth } from '../../hooks/useAuth.tsx'; import logo from '../../assets/logo.png'; interface SidebarProps { activeTab?: string; isOpen?: boolean; onClose?: () => void; } const Sidebar: React.FC = ({ activeTab, isOpen, onClose }) => { const location = useLocation(); const navigate = useNavigate(); const { theme, toggleTheme } = useTheme(); const { user, logout, isAuthenticated } = useAuth(); const [showConfirm, setShowConfirm] = useState(false); // Close on Esc useEffect(() => { if (!showConfirm) return; const handler = (e: KeyboardEvent) => { if (e.key === 'Escape') setShowConfirm(false); }; window.addEventListener('keydown', handler); return () => window.removeEventListener('keydown', handler); }, [showConfirm]); const handleLogout = () => { logout(); navigate('/', { replace: true }); }; const menuItems = [ { name: 'Dashboard', icon: LayoutDashboard, path: '/dashboard' }, { name: 'Image lab', icon: ImageIcon, path: '/image-lab' }, { name: 'Text lab', icon: FileText, path: '/text-lab' }, { name: 'Audio lab', icon: Mic2, path: '/audio-lab' }, { name: 'Video lab', icon: Video, path: '/video-lab' }, ]; const currentTab = activeTab || menuItems.find(item => item.path === location.pathname)?.name || 'Image lab'; const isPaid = user?.subscription_tier === 'paid'; return ( <> {/* ── Logout Confirmation Modal ── */} {showConfirm && (
setShowConfirm(false)} >
e.stopPropagation()} > {/* top red accent line */}
{/* header */}

Sign out of FakeShield

Your session will be terminated and you will be redirected to the landing page.

{/* session info row */}
{(user?.name || user?.fullName || 'U').charAt(0).toUpperCase()}

{user?.name || user?.fullName || 'User Account'}

{user?.email ?? 'session active'}

{user?.subscription_tier === 'paid' ? 'PRO' : 'FREE'}
{/* divider */}
{/* actions */}
{/* keyboard hint */}
Esc to cancel
)} {/* Mobile Overlay */} {isOpen && (
)} ); }; export default Sidebar;