Apply Stitch media operations redesign

2026-09-01 22:58:48 +12:00
parent 32bfa20ab7
commit f65e1b114c
6 changed files with 1003 additions and 16 deletions
@@ -56,7 +56,11 @@ export default function AdminSidebar() {
  const pathname = usePathname()
  return (
    <nav className="admin-sidebar">
-      <div className="admin-sidebar-title">Settings</div>
+      <div className="admin-sidebar-identity">
+        <strong>Magent Admin</strong>
+        <span><i aria-hidden="true" />Configuration workspace</span>
+      </div>
+      <a className="admin-new-request" href="/new-requests"><span>+</span> New request</a>
      {NAV_GROUPS.map((group) => (
        <div key={group.title} className="admin-nav-group">
          <span className="admin-nav-title">{group.title}</span>
@@ -0,0 +1,92 @@
+'use client'
+
+import { usePathname } from 'next/navigation'
+import { useEffect, useState } from 'react'
+import { authFetch, getApiBase, getToken } from '../lib/auth'
+import BrandingLogo from './BrandingLogo'
+
+type NavigationItem = {
+  href: string
+  label: string
+  shortLabel: string
+  icon: 'dashboard' | 'media' | 'issues' | 'invites' | 'settings'
+  adminOnly?: boolean
+  match: (path: string) => boolean
+}
+
+const NAVIGATION: NavigationItem[] = [
+  { href: '/', label: 'My Requests', shortLabel: 'Requests', icon: 'dashboard', match: (path) => path === '/' || path.startsWith('/requests/') },
+  { href: '/new-requests', label: 'New Request', shortLabel: 'New', icon: 'media', match: (path) => path === '/new-requests' },
+  { href: '/portal/issues', label: 'Issues', shortLabel: 'Issues', icon: 'issues', match: (path) => path.startsWith('/portal/issues') },
+  { href: '/profile/invites', label: 'Invites', shortLabel: 'Invites', icon: 'invites', match: (path) => path.startsWith('/profile/invites') },
+  { href: '/admin', label: 'Configuration', shortLabel: 'Config', icon: 'settings', adminOnly: true, match: (path) => path.startsWith('/admin') },
+]
+
+const HIDDEN_ROUTES = ['/login', '/signup', '/forgot-password', '/reset-password', '/how-it-works']
+
+function NavigationIcon({ name }: { name: NavigationItem['icon'] }) {
+  const paths: Record<NavigationItem['icon'], React.ReactNode> = {
+    dashboard: <><rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" /><rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" /></>,
+    media: <><rect x="3" y="5" width="18" height="15" rx="2" /><path d="m8 3 2 4m4-4 2 4M3 10h18" /><path d="m10 13 5 3-5 3z" /></>,
+    issues: <><path d="M12 3 2.8 19h18.4L12 3Z" /><path d="M12 9v4m0 3h.01" /></>,
+    invites: <><circle cx="9" cy="8" r="3" /><path d="M3.5 20v-2.2A4.8 4.8 0 0 1 8.3 13h1.4a4.8 4.8 0 0 1 3.8 1.9M17 8v6m-3-3h6" /></>,
+    settings: <><circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-2.8 2.8-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6v.2h-4V21a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1L4.2 17l.1-.1a1.7 1.7 0 0 0 .3-1.9A1.7 1.7 0 0 0 3 14H2.8v-4H3a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9L4.2 7 7 4.2l.1.1a1.7 1.7 0 0 0 1.9.3A1.7 1.7 0 0 0 10 3V2.8h4V3a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1L19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.6 1h.2v4H21a1.7 1.7 0 0 0-1.6 1Z" /></>,
+  }
+  return <svg viewBox="0 0 24 24" aria-hidden="true">{paths[name]}</svg>
+}
+
+export default function WorkspaceNavigation() {
+  const pathname = usePathname()
+  const [role, setRole] = useState<string | null>(null)
+  const [ready, setReady] = useState(false)
+
+  useEffect(() => {
+    const token = getToken()
+    if (!token) {
+      setReady(true)
+      return
+    }
+    authFetch(`${getApiBase()}/auth/me`)
+      .then(async (response) => {
+        if (response.ok) setRole((await response.json())?.role ?? 'user')
+      })
+      .catch(() => undefined)
+      .finally(() => setReady(true))
+  }, [])
+
+  if (!ready || !getToken() || HIDDEN_ROUTES.some((route) => pathname.startsWith(route)) || pathname.startsWith('/admin')) {
+    return null
+  }
+
+  const items = NAVIGATION.filter((item) => !item.adminOnly || role === 'admin')
+
+  return (
+    <>
+      <aside className="workspace-sidebar" aria-label="Workspace navigation">
+        <div className="workspace-sidebar-identity">
+          <BrandingLogo className="workspace-sidebar-logo" />
+          <div><strong>{role === 'admin' ? 'Magent Admin' : 'Magent'}</strong><span>Media operations workspace</span></div>
+        </div>
+        <a className="workspace-new-request" href="/new-requests"><span>+</span> New request</a>
+        <nav>
+          {items.map((item) => (
+            <a key={item.href} href={item.href} className={item.match(pathname) ? 'is-active' : undefined}>
+              <NavigationIcon name={item.icon} /><span>{item.label}</span>
+            </a>
+          ))}
+        </nav>
+        <div className="workspace-sidebar-footer">
+          <a href="/feedback">Support</a>
+          <a href={role === 'admin' ? '/admin' : '/profile'}>Settings</a>
+        </div>
+      </aside>
+      <nav className="workspace-mobile-nav" aria-label="Mobile navigation">
+        {items.slice(0, 5).map((item) => (
+          <a key={item.href} href={item.href} className={item.match(pathname) ? 'is-active' : undefined}>
+            <NavigationIcon name={item.icon} /><span>{item.shortLabel}</span>
+          </a>
+        ))}
+      </nav>
+    </>
+  )
+}