Add user feature permissions and unified account management

frontend/app/ui/WorkspaceNavigation.tsx

@@ -1,8 +1,9 @@
 'use client'
 
 import { usePathname } from 'next/navigation'
-import { useEffect, useState } from 'react'
-import { authFetch, getApiBase, getToken } from '../lib/auth'
+import { getToken } from '../lib/auth'
+import { canAccess, featureForPath } from '../lib/features'
+import { useFeatureUser } from './FeatureGate'
 
 type NavigationItem = {
   href: string
@@ -38,36 +39,16 @@ function NavigationIcon({ name }: { name: NavigationItem['icon'] }) {
 
 export default function WorkspaceNavigation() {
   const pathname = usePathname()
-  const [role, setRole] = useState<string | null>(null)
-  const [ready, setReady] = useState(false)
-  const [showRequestsNav, setShowRequestsNav] = useState(true)
-
-  useEffect(() => {
-    const token = getToken()
-    if (!token) {
-      setReady(true)
-      return
-    }
-    Promise.all([
-      authFetch(`${getApiBase()}/auth/me`),
-      fetch(`${getApiBase()}/site/public`).catch(() => null),
-    ])
-      .then(async ([response, siteResponse]) => {
-        if (response.ok) setRole((await response.json())?.role ?? 'user')
-        if (siteResponse?.ok) setShowRequestsNav((await siteResponse.json())?.navigation?.showRequests !== false)
-      })
-      .catch(() => undefined)
-      .finally(() => setReady(true))
-  }, [])
+  const { user, ready } = useFeatureUser()
+  const role = user?.role
 
   if (!ready || !getToken() || HIDDEN_ROUTES.some((route) => pathname.startsWith(route))) {
     return null
   }
 
-  const items = NAVIGATION.filter((item) => (!item.adminOnly || role === 'admin') && (showRequestsNav || item.href !== '/new-requests'))
+  const items = NAVIGATION.filter((item) => (!item.adminOnly || role === 'admin') && canAccess(user, featureForPath(item.href)))
 
   return (
-    <>
       <nav className="workspace-mobile-nav" aria-label="Mobile navigation">
         {items.map((item) => (
           <a key={item.href} href={item.href} className={item.match(pathname) ? 'is-active' : undefined}>
@@ -75,6 +56,5 @@ export default function WorkspaceNavigation() {
           </a>
         ))}
       </nav>
-    </>
   )
 }