Header: replace My Account nav link with an account icon in the top right (sign-in link / account menu), collapse header below 900px; v2.23.0

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/components/HeaderAccount.tsx

@@ -0,0 +1,95 @@
+import { useEffect, useRef, useState } from 'react'
+import { Link } from 'react-router-dom'
+
+interface AccountStatus {
+  authenticated: boolean
+  username: string
+  displayName?: string
+  avatarUrl?: string
+}
+
+// Shared across header instances so moving between pages doesn't flash the signed-out icon
+let cachedStatus: AccountStatus | null = null
+
+function PersonIcon() {
+  return (
+    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <circle cx="12" cy="8" r="4" />
+      <path d="M4 20c0-3.6 3.6-6 8-6s8 2.4 8 6" />
+    </svg>
+  )
+}
+
+export function HeaderAccount() {
+  const [status, setStatus] = useState<AccountStatus | null>(cachedStatus)
+  const [open, setOpen] = useState(false)
+  const wrapRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    fetch('/api/study-auth/status')
+      .then(r => (r.ok ? r.json() : Promise.reject(new Error('status failed'))))
+      .then((data: AccountStatus) => {
+        cachedStatus = data
+        if (!cancelled) setStatus(data)
+      })
+      .catch(() => {})
+    return () => { cancelled = true }
+  }, [])
+
+  useEffect(() => {
+    if (!open) return
+    const onDown = (e: MouseEvent | TouchEvent) => {
+      if (wrapRef.current && !wrapRef.current.contains(e.target as Node)) setOpen(false)
+    }
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setOpen(false) }
+    document.addEventListener('mousedown', onDown)
+    document.addEventListener('touchstart', onDown)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('mousedown', onDown)
+      document.removeEventListener('touchstart', onDown)
+      document.removeEventListener('keydown', onKey)
+    }
+  }, [open])
+
+  async function signOut() {
+    try { await fetch('/api/study-auth/logout', { method: 'POST' }) } catch { /* reload below shows the real state */ }
+    cachedStatus = null
+    window.location.assign('/')
+  }
+
+  // Signed out (or still checking): one tap goes to the sign-in page
+  if (!status?.authenticated) {
+    return (
+      <Link to="/study/account" className="header-account" aria-label="Sign in or create an account" title="Sign in">
+        <PersonIcon />
+      </Link>
+    )
+  }
+
+  const name = status.displayName?.trim() || status.username
+  const initial = (name || '?').charAt(0).toUpperCase()
+
+  return (
+    <div className="header-account-wrap" ref={wrapRef}>
+      <button
+        type="button"
+        className="header-account header-account--in"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        aria-label={`Account menu for ${name}`}
+        onClick={() => setOpen(o => !o)}
+      >
+        {status.avatarUrl ? <img src={status.avatarUrl} alt="" className="header-account-avatar" /> : <span aria-hidden="true">{initial}</span>}
+      </button>
+      {open && (
+        <div className="header-account-menu" role="menu">
+          <p className="header-account-name">Signed in as <strong>{name}</strong></p>
+          <Link to="/study/account" role="menuitem" className="header-account-item" onClick={() => setOpen(false)}>My Account</Link>
+          <button type="button" role="menuitem" className="header-account-item" onClick={signOut}>Sign out</button>
+        </div>
+      )}
+    </div>
+  )
+}