Add global admin user-view preview

frontend/app/ui/HeaderIdentity.tsx

@@ -2,11 +2,13 @@
 
 import { useEffect, useState } from 'react'
 import { authFetch, clearToken, getApiBase, getToken, logout } from '../lib/auth'
+import { setUserViewPreview, useUserViewPreview } from '../lib/viewMode'
 
 export default function HeaderIdentity() {
   const [identity, setIdentity] = useState<{ username: string; role?: string } | null>(null)
   const [buildNumber, setBuildNumber] = useState<string | null>(null)
   const [open, setOpen] = useState(false)
+  const viewAsUser = useUserViewPreview()
 
   useEffect(() => {
     const token = getToken()
@@ -27,6 +29,9 @@ export default function HeaderIdentity() {
         const data = await response.json()
         if (data?.username) {
           setIdentity({ username: data.username, role: data.role })
+          if (data.role !== 'admin') {
+            setUserViewPreview(false)
+          }
         }
         const siteResponse = await fetch(`${baseUrl}/site/public`)
         if (siteResponse.ok) {
@@ -50,6 +55,7 @@ export default function HeaderIdentity() {
   const label = `${identity.username}${identity.role ? ` (${identity.role})` : ''}`
   const initial = identity.username.slice(0, 1).toUpperCase()
   const signOut = async () => {
+    setUserViewPreview(false)
     await logout().catch(() => undefined)
     clearToken()
     if (typeof window !== 'undefined') {
@@ -58,39 +64,54 @@ export default function HeaderIdentity() {
   }
 
   return (
-    <div className="signed-in-menu">
-      <button
-        type="button"
-        className="avatar-button"
-        onClick={() => setOpen((prev) => !prev)}
-        aria-haspopup="true"
-        aria-expanded={open}
-        title={label}
-      >
-        {initial}
-      </button>
-      {open && (
-        <div className="signed-in-dropdown">
-          <div className="signed-in-header">Signed in as {label}</div>
-          <div className="signed-in-actions">
-            <a href="/profile" onClick={() => setOpen(false)}>
-              My profile
-            </a>
-            {identity.role === 'admin' ? (
-              <a href="/admin" onClick={() => setOpen(false)}>
-                Settings
+    <div className="signed-in-context">
+      {identity.role === 'admin' ? (
+        <button
+          type="button"
+          className={`user-view-toggle ${viewAsUser ? 'is-active' : ''}`}
+          aria-pressed={viewAsUser}
+          onClick={() => setUserViewPreview(!viewAsUser)}
+        >
+          {viewAsUser ? 'Exit user view' : 'View as user'}
+        </button>
+      ) : null}
+      <div className="signed-in-menu">
+        <button
+          type="button"
+          className="avatar-button"
+          onClick={() => setOpen((prev) => !prev)}
+          aria-haspopup="true"
+          aria-expanded={open}
+          title={label}
+        >
+          {initial}
+        </button>
+        {open && (
+          <div className="signed-in-dropdown">
+            <div className="signed-in-header">
+              Signed in as {label}
+              {viewAsUser ? <span>Previewing user view</span> : null}
+            </div>
+            <div className="signed-in-actions">
+              <a href="/profile" onClick={() => setOpen(false)}>
+                My profile
               </a>
-            ) : null}
-            <a href="/changelog" onClick={() => setOpen(false)}>
-              Changelog
-            </a>
-            <button type="button" className="signed-in-signout" onClick={() => void signOut()}>
-              Sign out
-            </button>
+              {identity.role === 'admin' ? (
+                <a href="/admin" onClick={() => setOpen(false)}>
+                  Settings
+                </a>
+              ) : null}
+              <a href="/changelog" onClick={() => setOpen(false)}>
+                Changelog
+              </a>
+              <button type="button" className="signed-in-signout" onClick={() => void signOut()}>
+                Sign out
+              </button>
+            </div>
+            {buildNumber ? <div className="signed-in-build">Build {buildNumber}</div> : null}
           </div>
-          {buildNumber ? <div className="signed-in-build">Build {buildNumber}</div> : null}
-        </div>
-      )}
+        )}
+      </div>
     </div>
   )
 }