350 lines
14 KiB
TypeScript
350 lines
14 KiB
TypeScript
import { useState, useEffect, useCallback, useRef } from 'react'
|
|
import { Link, useLocation, useNavigate, Outlet } from 'react-router-dom'
|
|
import { useAuthStore } from '@/store/authStore'
|
|
import { usePermissions } from '@/hooks/usePermissions'
|
|
import { BrandLogo } from '@/components/common/BrandLogo'
|
|
import { Menu, X, LogOut, User, Shield, ChevronDown, FolderTree, ListOrdered, Layers } from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface NavItem {
|
|
path: string
|
|
label: string
|
|
children?: { path: string; label: string; icon: React.ReactNode }[]
|
|
}
|
|
|
|
export function AppLayout() {
|
|
const location = useLocation()
|
|
const navigate = useNavigate()
|
|
const { user, logout } = useAuthStore()
|
|
const { effectiveRole, isSuperAdmin } = usePermissions()
|
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
|
const [flowsDropdownOpen, setFlowsDropdownOpen] = useState(false)
|
|
const flowsDropdownRef = useRef<HTMLDivElement>(null)
|
|
|
|
const handleLogout = async () => {
|
|
setMobileMenuOpen(false)
|
|
await logout()
|
|
navigate('/login')
|
|
}
|
|
|
|
// Close mobile menu on route change
|
|
const [prevPath, setPrevPath] = useState(location.pathname)
|
|
if (prevPath !== location.pathname) {
|
|
setPrevPath(location.pathname)
|
|
if (mobileMenuOpen) setMobileMenuOpen(false)
|
|
setFlowsDropdownOpen(false)
|
|
}
|
|
|
|
// Close on Escape
|
|
const handleKeyDown = useCallback((e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') {
|
|
setMobileMenuOpen(false)
|
|
setFlowsDropdownOpen(false)
|
|
}
|
|
}, [])
|
|
|
|
// Close dropdown on outside click
|
|
useEffect(() => {
|
|
const handleClickOutside = (e: MouseEvent) => {
|
|
if (flowsDropdownRef.current && !flowsDropdownRef.current.contains(e.target as Node)) {
|
|
setFlowsDropdownOpen(false)
|
|
}
|
|
}
|
|
if (flowsDropdownOpen) {
|
|
document.addEventListener('mousedown', handleClickOutside)
|
|
}
|
|
return () => document.removeEventListener('mousedown', handleClickOutside)
|
|
}, [flowsDropdownOpen])
|
|
|
|
useEffect(() => {
|
|
if (mobileMenuOpen) {
|
|
document.addEventListener('keydown', handleKeyDown)
|
|
document.body.style.overflow = 'hidden'
|
|
} else {
|
|
document.body.style.overflow = ''
|
|
}
|
|
return () => {
|
|
document.removeEventListener('keydown', handleKeyDown)
|
|
document.body.style.overflow = ''
|
|
}
|
|
}, [mobileMenuOpen, handleKeyDown])
|
|
|
|
const isFlowsActive = location.pathname.startsWith('/trees') || location.pathname.startsWith('/flows')
|
|
|
|
const navItems: NavItem[] = [
|
|
{ path: '/', label: 'Home' },
|
|
{
|
|
path: '/trees',
|
|
label: 'Flows',
|
|
children: [
|
|
{ path: '/trees', label: 'All Flows', icon: <Layers className="h-4 w-4 text-white/50" /> },
|
|
{ path: '/trees?type=troubleshooting', label: 'Troubleshooting', icon: <FolderTree className="h-4 w-4 text-white/50" /> },
|
|
{ path: '/trees?type=procedural', label: 'Procedures', icon: <ListOrdered className="h-4 w-4 text-white/50" /> },
|
|
],
|
|
},
|
|
{ path: '/my-trees', label: 'My Flows' },
|
|
{ path: '/sessions', label: 'Sessions' },
|
|
{ path: '/shares', label: 'My Shares' },
|
|
{ path: '/account', label: 'Account' },
|
|
...(isSuperAdmin ? [{ path: '/admin', label: 'Admin Panel' }] : []),
|
|
]
|
|
|
|
return (
|
|
<div className="min-h-screen bg-black">
|
|
{/* Subtle radial overlay for depth */}
|
|
<div className="pointer-events-none fixed inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(100,100,120,0.03),transparent_50%),radial-gradient(circle_at_80%_80%,rgba(80,80,100,0.02),transparent_50%)]" />
|
|
|
|
{/* Header */}
|
|
<header className="sticky top-0 z-50 border-b border-white/[0.06] bg-black/80 backdrop-blur-xl">
|
|
<div className="container mx-auto flex h-16 items-center justify-between px-4">
|
|
<div className="flex items-center gap-8">
|
|
{/* Mobile hamburger */}
|
|
<button
|
|
onClick={() => setMobileMenuOpen(true)}
|
|
className="rounded-xl p-2 text-white/50 hover:bg-white/10 hover:text-white transition-all sm:hidden"
|
|
aria-label="Open menu"
|
|
>
|
|
<Menu className="h-5 w-5" />
|
|
</button>
|
|
|
|
{/* Logo */}
|
|
<Link to="/" className="flex items-center gap-3 group">
|
|
<div className="w-9 h-9 rounded-xl bg-white flex items-center justify-center transition-transform group-hover:scale-105">
|
|
<BrandLogo size="sm" className="h-5 w-5 invert" />
|
|
</div>
|
|
<span className="text-xl font-semibold text-white tracking-tight">
|
|
ResolutionFlow
|
|
</span>
|
|
</Link>
|
|
|
|
{/* Desktop Navigation */}
|
|
<nav className="hidden items-center gap-1 sm:flex">
|
|
{navItems.map((item) => {
|
|
if (item.children) {
|
|
return (
|
|
<div key={item.path} className="relative" ref={flowsDropdownRef}>
|
|
<button
|
|
onClick={() => setFlowsDropdownOpen(!flowsDropdownOpen)}
|
|
className={cn(
|
|
'flex items-center gap-1 rounded-xl px-4 py-2 text-sm font-medium transition-all',
|
|
isFlowsActive
|
|
? 'bg-white/10 text-white border border-white/20'
|
|
: 'text-white/50 hover:text-white hover:bg-white/[0.06]'
|
|
)}
|
|
>
|
|
{item.label}
|
|
<ChevronDown className={cn('h-3.5 w-3.5 transition-transform', flowsDropdownOpen && 'rotate-180')} />
|
|
</button>
|
|
{flowsDropdownOpen && (
|
|
<div className="absolute left-0 z-50 mt-1 w-52 rounded-lg border border-white/10 bg-black/95 p-1 shadow-xl backdrop-blur-sm">
|
|
{item.children.map((child) => (
|
|
<Link
|
|
key={child.path}
|
|
to={child.path}
|
|
onClick={() => setFlowsDropdownOpen(false)}
|
|
className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-white/70 hover:bg-white/10 hover:text-white"
|
|
>
|
|
{child.icon}
|
|
{child.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const isActive = item.path === '/'
|
|
? location.pathname === '/'
|
|
: location.pathname.startsWith(item.path)
|
|
|
|
return (
|
|
<Link
|
|
key={item.path}
|
|
to={item.path}
|
|
className={cn(
|
|
'rounded-xl px-4 py-2 text-sm font-medium transition-all',
|
|
isActive
|
|
? 'bg-white/10 text-white border border-white/20'
|
|
: 'text-white/50 hover:text-white hover:bg-white/[0.06]'
|
|
)}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
)
|
|
})}
|
|
</nav>
|
|
</div>
|
|
|
|
{/* Right side controls */}
|
|
<div className="flex items-center gap-3">
|
|
{/* User info */}
|
|
<div className="hidden items-center gap-3 sm:flex">
|
|
<div className="flex items-center gap-2 rounded-xl bg-white/[0.06] px-3 py-1.5 border border-white/10">
|
|
<User className="h-4 w-4 text-white/40" />
|
|
<span className="text-sm text-white/70">
|
|
{user?.name || user?.email}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Role badge */}
|
|
{effectiveRole && effectiveRole !== 'engineer' && (
|
|
<div className="px-3 py-1.5 rounded-xl bg-white/10 border border-white/20">
|
|
<span className="flex items-center gap-1.5 text-xs text-white font-semibold">
|
|
<Shield className="h-3 w-3" />
|
|
{effectiveRole === 'super_admin' ? 'Super Admin' :
|
|
effectiveRole === 'owner' ? 'Owner' :
|
|
'Viewer'}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Logout button */}
|
|
<button
|
|
onClick={handleLogout}
|
|
className={cn(
|
|
'hidden items-center gap-2 rounded-xl px-4 py-2 text-sm font-medium sm:flex',
|
|
'text-white/50 hover:text-white hover:bg-white/10 transition-all',
|
|
'border border-white/10 hover:border-white/20'
|
|
)}
|
|
>
|
|
<LogOut className="h-4 w-4" />
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Mobile Nav Drawer */}
|
|
{mobileMenuOpen && (
|
|
<div className="fixed inset-0 z-50 sm:hidden">
|
|
{/* Backdrop */}
|
|
<div
|
|
className="absolute inset-0 bg-black/80 backdrop-blur-sm animate-in fade-in duration-200"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
aria-hidden="true"
|
|
/>
|
|
|
|
{/* Drawer */}
|
|
<nav className="absolute inset-y-0 left-0 w-72 border-r border-white/[0.06] bg-black shadow-2xl animate-in slide-in-from-left duration-300">
|
|
<div className="flex h-16 items-center justify-between border-b border-white/[0.06] px-4">
|
|
<Link to="/" className="flex items-center gap-3">
|
|
<div className="w-9 h-9 rounded-xl bg-white flex items-center justify-center">
|
|
<BrandLogo size="sm" className="h-5 w-5 invert" />
|
|
</div>
|
|
<span className="text-xl font-semibold text-white tracking-tight">
|
|
ResolutionFlow
|
|
</span>
|
|
</Link>
|
|
<button
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
className="rounded-xl p-2 text-white/50 hover:bg-white/10 hover:text-white transition-all"
|
|
aria-label="Close menu"
|
|
>
|
|
<X className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex flex-col p-4">
|
|
{/* User info */}
|
|
<div className="mb-4 border-b border-white/[0.06] pb-4">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<User className="h-4 w-4 text-white/40" />
|
|
<p className="text-sm font-medium text-white">
|
|
{user?.name || user?.email}
|
|
</p>
|
|
</div>
|
|
{effectiveRole && effectiveRole !== 'engineer' && (
|
|
<div className="inline-flex px-3 py-1.5 rounded-xl bg-white/10 border border-white/20">
|
|
<span className="flex items-center gap-1.5 text-xs text-white font-semibold">
|
|
<Shield className="h-3 w-3" />
|
|
{effectiveRole === 'super_admin' ? 'Super Admin' :
|
|
effectiveRole === 'owner' ? 'Owner' :
|
|
'Viewer'}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Nav items */}
|
|
<div className="space-y-1">
|
|
{navItems.map((item) => {
|
|
if (item.children) {
|
|
return (
|
|
<div key={item.path}>
|
|
<div className={cn(
|
|
'px-4 py-2 text-xs font-semibold uppercase tracking-wider',
|
|
isFlowsActive ? 'text-white/60' : 'text-white/30'
|
|
)}>
|
|
{item.label}
|
|
</div>
|
|
<div className="space-y-0.5">
|
|
{item.children.map((child) => (
|
|
<Link
|
|
key={child.path}
|
|
to={child.path}
|
|
className={cn(
|
|
'flex items-center gap-3 rounded-xl px-4 py-3 text-sm font-medium transition-all ml-1',
|
|
'text-white/50 hover:text-white hover:bg-white/[0.06]'
|
|
)}
|
|
>
|
|
{child.icon}
|
|
{child.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const isActive = item.path === '/'
|
|
? location.pathname === '/'
|
|
: location.pathname.startsWith(item.path)
|
|
|
|
return (
|
|
<Link
|
|
key={item.path}
|
|
to={item.path}
|
|
className={cn(
|
|
'block rounded-xl px-4 py-3 text-sm font-medium transition-all',
|
|
isActive
|
|
? 'bg-white/10 text-white border border-white/20'
|
|
: 'text-white/50 hover:text-white hover:bg-white/[0.06]'
|
|
)}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
{/* Logout */}
|
|
<div className="mt-4 border-t border-white/[0.06] pt-4">
|
|
<button
|
|
onClick={handleLogout}
|
|
className={cn(
|
|
'w-full flex items-center gap-2 rounded-xl px-4 py-3 text-sm font-medium',
|
|
'text-white/50 hover:text-white hover:bg-white/10 transition-all',
|
|
'border border-white/10 hover:border-white/20'
|
|
)}
|
|
>
|
|
<LogOut className="h-4 w-4" />
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
)}
|
|
|
|
{/* Main Content */}
|
|
<main className="relative animate-in fade-in duration-500">
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default AppLayout
|