Move account actions into avatar menu

frontend/app/ui/HeaderActions.tsx

@@ -32,14 +32,6 @@ export default function HeaderActions() {
     void load()
   }, [])
 
-  const signOut = () => {
-    clearToken()
-    setSignedIn(false)
-    if (typeof window !== 'undefined') {
-      window.location.href = '/login'
-    }
-  }
-
   if (!signedIn) {
     return null
   }
@@ -49,12 +41,7 @@ export default function HeaderActions() {
       <a className="header-cta header-cta--left" href="/feedback">Send feedback</a>
       <a href="/">Requests</a>
       <a href="/how-it-works">How it works</a>
-      <a href="/changelog">Changelog</a>
-      <a href="/profile">My profile</a>
       {role === 'admin' && <a href="/admin">Settings</a>}
-      <button type="button" className="header-link" onClick={signOut}>
-        Sign out
-      </button>
     </div>
   )
 }

frontend/app/ui/HeaderIdentity.tsx

@@ -4,13 +4,15 @@ import { useEffect, useState } from 'react'
 import { authFetch, clearToken, getApiBase, getToken } from '../lib/auth'
 
 export default function HeaderIdentity() {
-  const [identity, setIdentity] = useState<string | null>(null)
+  const [identity, setIdentity] = useState<{ username: string; role?: string } | null>(null)
+  const [buildNumber, setBuildNumber] = useState<string | null>(null)
   const [open, setOpen] = useState(false)
 
   useEffect(() => {
     const token = getToken()
     if (!token) {
       setIdentity(null)
+      setBuildNumber(null)
       return
     }
     const load = async () => {
@@ -24,7 +26,14 @@ export default function HeaderIdentity() {
         }
         const data = await response.json()
         if (data?.username) {
-          setIdentity(`${data.username}${data.role ? ` (${data.role})` : ''}`)
+          setIdentity({ username: data.username, role: data.role })
+        }
+        const siteResponse = await fetch(`${baseUrl}/site/public`)
+        if (siteResponse.ok) {
+          const siteInfo = await siteResponse.json()
+          if (siteInfo?.buildNumber) {
+            setBuildNumber(siteInfo.buildNumber)
+          }
         }
       } catch (err) {
         console.error(err)
@@ -38,14 +47,42 @@ export default function HeaderIdentity() {
     return null
   }
 
+  const label = `${identity.username}${identity.role ? ` (${identity.role})` : ''}`
+  const initial = identity.username.slice(0, 1).toUpperCase()
+  const signOut = () => {
+    clearToken()
+    if (typeof window !== 'undefined') {
+      window.location.href = '/login'
+    }
+  }
+
   return (
     <div className="signed-in-menu">
-      <button type="button" className="signed-in" onClick={() => setOpen((prev) => !prev)}>
-        Signed in as {identity}
+      <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">
-          <a href="/profile">My profile</a>
+          <div className="signed-in-header">Signed in as {label}</div>
+          <div className="signed-in-actions">
+            <a href="/profile" onClick={() => setOpen(false)}>
+              My profile
+            </a>
+            <a href="/changelog" onClick={() => setOpen(false)}>
+              Changelog
+            </a>
+            <button type="button" className="signed-in-signout" onClick={signOut}>
+              Sign out
+            </button>
+          </div>
+          {buildNumber ? <div className="signed-in-build">Build {buildNumber}</div> : null}
         </div>
       )}
     </div>

frontend/app/ui/SiteStatus.tsx

@@ -57,9 +57,6 @@ export default function SiteStatus() {
       {banner?.enabled && banner.message ? (
         <div className={`site-banner site-banner--${tone}`}>{banner.message}</div>
       ) : null}
-      {info?.buildNumber ? (
-        <div className="site-version">Build {info.buildNumber}</div>
-      ) : null}
     </>
   )
 }