Merge pull request 'Frontend theme redo: player portal → Admin sidebar shell + stat-tile My Characters' (#50) from feature/frontend-theme-redo into main

Reviewed-on: UOM/website#50
Reviewed-by: Colby Whitlock <whitlocktech@gmail.com>

client/src/components/CharacterStats.jsx

@@ -0,0 +1,72 @@
+import { useEffect, useState } from 'react'
+
+// A small stat-tile row for a "My Characters" page: total characters, how many
+// are online right now, and how many game accounts are linked. `scope` is the
+// shard api object (admin or player self-service). Renders nothing until an
+// account is linked, so the empty/link-prompt state below it stands alone.
+//
+// It fetches the same rosters GameAccounts loads; for a personal page that's at
+// most a couple of extra live round-trips, and keeps this presentational bit
+// decoupled from GameAccounts' per-account roster loading.
+
+function Tile({ value, label }) {
+  return (
+    <div className="panel" style={{ padding: 20, textAlign: 'center' }}>
+      <div className="display" style={{ fontSize: '1.6rem', color: 'var(--head)' }}>{value}</div>
+      <div className="sans" style={{ color: 'var(--accent)', fontSize: '0.68rem', fontWeight: 700, letterSpacing: '0.15em', textTransform: 'uppercase', marginTop: 8 }}>
+        {label}
+      </div>
+    </div>
+  )
+}
+
+export default function CharacterStats({ scope }) {
+  const [stats, setStats] = useState(null)
+
+  useEffect(() => {
+    let cancelled = false
+    ;(async () => {
+      try {
+        const accounts = await scope.accounts()
+        const linked = accounts.length
+        if (linked === 0) {
+          if (!cancelled) setStats({ linked: 0 })
+          return
+        }
+        // Roster is a live round-trip and can be unavailable (503); tolerate a
+        // partial result so a restarting shard doesn't blank the whole row.
+        const rosters = await Promise.allSettled(accounts.map((a) => scope.roster(a.account)))
+        let chars = 0
+        let online = 0
+        let complete = true
+        for (const r of rosters) {
+          if (r.status === 'fulfilled') {
+            const cs = r.value.chars || []
+            chars += cs.length
+            online += cs.filter((c) => c.online).length
+          } else {
+            complete = false
+          }
+        }
+        if (!cancelled) setStats({ linked, chars, online, complete })
+      } catch {
+        if (!cancelled) setStats({ error: true })
+      }
+    })()
+    return () => { cancelled = true }
+  }, [scope])
+
+  // Hidden until we know an account is linked (or while first loading).
+  if (!stats || stats.error || stats.linked === 0) return null
+
+  // Counts depend on live rosters; show a dash if none came back.
+  const count = (n) => (stats.complete || stats.chars > 0 ? n : '—')
+
+  return (
+    <section className="grid-3" style={{ gap: 14, marginBottom: 26 }}>
+      <Tile value={count(stats.chars)} label="Characters" />
+      <Tile value={count(stats.online)} label="Online now" />
+      <Tile value={stats.linked} label={stats.linked === 1 ? 'Linked account' : 'Linked accounts'} />
+    </section>
+  )
+}

client/src/routes/admin/views/AdminCharacters.jsx

@@ -1,15 +1,16 @@
+import CharacterStats from '../../../components/CharacterStats.jsx'
 import GameAccounts from '../../../components/GameAccounts.jsx'
 import VendorSales from '../../../components/VendorSales.jsx'
 import { api } from '../../../api/client.js'
 
 // Staff link their OWN in-game account and view their characters — the same
 // shared component players use, pointed at the staff self-service endpoints.
+// Sits inside the Admin shell, which supplies the "My Characters" page header;
+// stat tiles bring it to parity with the Player Portal's Characters page.
 export default function AdminCharacters() {
   return (
     <section style={{ maxWidth: 760 }}>
-      <p className="sans" style={{ marginTop: 0, marginBottom: 22, color: 'var(--muted)', fontSize: '0.92rem', lineHeight: 1.6 }}>
+      <CharacterStats scope={api.admin.shard} />
-        Link your own game account to view your characters, stats, skills and vendors.
-      </p>
       <GameAccounts scope={api.admin.shard} charTo={(serial) => `/admin/characters/${serial}`} />
       <VendorSales fetchSales={api.admin.shard.sales} />
     </section>

client/src/routes/player/PlayerAccount.jsx

@@ -335,7 +335,6 @@ export default function PlayerAccount() {
 
   return (
     <div>
-      <h1 className="display" style={{ margin: '0 0 4px', fontSize: '1.6rem', color: 'var(--head)' }}>Account</h1>
       {loading && <Loading />}
       {error && <ErrorState message={error} />}
       {!loading && !error && account && (

client/src/routes/player/PlayerCharacters.jsx

@@ -8,7 +8,6 @@ import { api } from '../../api/client.js'
 export default function PlayerCharacters() {
   return (
     <div>
-      <h1 className="display" style={{ margin: '0 0 18px', fontSize: '1.6rem', color: 'var(--head)' }}>Your characters</h1>
       <GameAccounts scope={api.player.shard} charTo={(serial) => `/player/char/${serial}`} />
       <VendorSales fetchSales={api.player.shard.sales} />
     </div>

client/src/routes/player/PlayerPortalLayout.jsx

@@ -1,22 +1,65 @@
-import { NavLink, Link, Outlet, useNavigate } from 'react-router-dom'
+import { NavLink, Outlet, useNavigate, useLocation } from 'react-router-dom'
 import MoonDot from '../../components/MoonDot.jsx'
 import { useAuth } from '../../contexts/AuthContext.jsx'
 
-// Shared shell for the logged-in player portal: a header with a nav bar
+// Shared shell for the logged-in player portal. Uses the same sidebar shell as
-// (Characters / Account) and the page content in an <Outlet />. Matches the
+// Admin (icon nav, sticky content header, footer sign-out) so the two logged-in
-// site's dark theme vocabulary.
+// experiences read as one app — the portal just carries fewer nav rows.
-const tab = ({ isActive }) => ({
+
-  textDecoration: 'none',
+// Small inline stroke icons (16px, currentColor) — same frame as AdminLayout.
+function Icon({ children, size = 16 }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    >
+      {children}
+    </svg>
+  )
+}
+const IconUser = () => <Icon><circle cx="12" cy="8" r="4" /><path d="M4 21a8 8 0 0 1 16 0" /></Icon>
+const IconGear = () => <Icon><circle cx="12" cy="12" r="3" /><path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M19.1 4.9L17 7M7 17l-2.1 2.1" /></Icon>
+
+const NAV = [
+  { to: '/player', label: 'Characters', end: true, icon: IconUser },
+  { to: '/account', label: 'Account', icon: IconGear },
+]
+
+// The sticky content header mirrors the active page. Character sheets live under
+// /player/char/:serial and keep their own in-page back link.
+const TITLES = {
+  '/player': 'Characters',
+  '/account': 'Account',
+}
+
+const navBtnBase = {
+  textAlign: 'left',
+  borderRadius: 8,
+  padding: '10px 14px',
   fontFamily: 'var(--sans)',
-  fontSize: '0.9rem',
+  fontSize: '0.92rem',
-  padding: '8px 4px',
+  textDecoration: 'none',
-  color: isActive ? 'var(--head)' : 'var(--muted)',
+  display: 'flex',
-  borderBottom: `2px solid ${isActive ? 'var(--accent)' : 'transparent'}`,
+  alignItems: 'center',
-})
+  gap: 10,
+  transition: 'background .15s,color .15s',
+}
 
 export default function PlayerPortalLayout() {
   const { user, logout } = useAuth()
   const navigate = useNavigate()
+  const location = useLocation()
+  const title =
+    TITLES[location.pathname] ||
+    (location.pathname.startsWith('/player/char/') ? 'Character' : 'Player Portal')
 
   async function signOut() {
     await logout()
@@ -24,31 +67,94 @@ export default function PlayerPortalLayout() {
   }
 
   return (
-    <main style={{ minHeight: '100vh', background: 'var(--bg-deep)', color: 'var(--ink)' }}>
+    <div className="admin-grid">
-      <header style={{ borderBottom: '1px solid var(--line)' }}>
+      {/* Sidebar */}
-        <div style={{ maxWidth: 820, margin: '0 auto', padding: '16px 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
+      <aside
-          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+        style={{
-            <MoonDot size={12} glow={0.5} />
+          borderRight: '1px solid var(--line)',
+          background: 'var(--bg)',
+          display: 'flex',
+          flexDirection: 'column',
+          position: 'sticky',
+          top: 0,
+          height: '100vh',
+        }}
+      >
+        <div style={{ padding: '22px 22px 18px', borderBottom: '1px solid var(--line-soft)', display: 'flex', alignItems: 'center', gap: 10 }}>
+          <MoonDot />
           <div>
-              <div className="display" style={{ color: 'var(--head)', fontSize: '1.05rem', letterSpacing: '0.04em' }}>UOMysticmoon</div>
+            <div className="display" style={{ fontSize: '1.02rem', color: 'var(--head)', letterSpacing: '0.03em' }}>
-              <div className="sans" style={{ color: 'var(--dim)', fontSize: '0.64rem', letterSpacing: '0.14em', textTransform: 'uppercase' }}>Player Portal</div>
+              UOMysticmoon
+            </div>
+            <div className="sans" style={{ color: 'var(--dim)', fontSize: '0.66rem', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
+              Player Portal
             </div>
           </div>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
-            <span className="sans dim" style={{ fontSize: '0.82rem' }}>{user?.username}</span>
-            <Link to="/" className="sans" style={{ color: 'var(--accent)', fontSize: '0.84rem', textDecoration: 'none' }}>← Site</Link>
-            <button onClick={signOut} className="pill">Sign out</button>
         </div>
-        </div>
+
-        <nav style={{ maxWidth: 820, margin: '0 auto', padding: '0 20px', display: 'flex', gap: 22 }}>
+        <nav style={{ flex: 1, padding: '14px 12px', display: 'flex', flexDirection: 'column', gap: 4, overflowY: 'auto' }}>
-          <NavLink to="/player" end style={tab}>Characters</NavLink>
+          {NAV.map((n) => (
-          <NavLink to="/account" style={tab}>Account</NavLink>
+            <NavLink
+              key={n.to}
+              to={n.to}
+              end={n.end}
+              className="admin-nav-link"
+              style={({ isActive }) => ({
+                ...navBtnBase,
+                background: isActive ? 'var(--blue)' : 'transparent',
+                color: isActive ? 'var(--ink)' : 'var(--muted)',
+                borderLeft: `2px solid ${isActive ? 'var(--accent)' : 'transparent'}`,
+              })}
+            >
+              <n.icon />
+              <span>{n.label}</span>
+            </NavLink>
+          ))}
         </nav>
+
+        <div style={{ padding: '14px 16px', borderTop: '1px solid var(--line-soft)' }}>
+          <div className="sans" style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12, fontSize: '0.78rem', color: 'var(--muted)' }}>
+            <span style={{ width: 9, height: 9, borderRadius: '50%', background: 'var(--mode-live)', boxShadow: '0 0 8px var(--mode-live)' }} />
+            Signed in as&nbsp;<strong style={{ color: 'var(--ink)' }}>{user?.username}</strong>
+          </div>
+          <button
+            onClick={signOut}
+            className="sans"
+            style={{ display: 'block', width: '100%', textAlign: 'center', border: '1px solid var(--line)', borderRadius: 8, padding: 9, color: 'var(--muted)', background: 'transparent', fontSize: '0.84rem', cursor: 'pointer' }}
+          >
+            Sign out
+          </button>
+        </div>
+      </aside>
+
+      {/* Main */}
+      <main style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
+        <header
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: 16,
+            padding: '20px 32px',
+            borderBottom: '1px solid var(--line-soft)',
+            background: 'var(--bg)',
+            position: 'sticky',
+            top: 0,
+            zIndex: 10,
+          }}
+        >
+          <h1 className="display" style={{ margin: 0, fontSize: '1.5rem', color: 'var(--head)' }}>
+            {title}
+          </h1>
+          <a href="/" style={{ color: 'var(--accent)', textDecoration: 'none', fontSize: '0.84rem', fontFamily: 'var(--sans)' }}>
+            ← Site
+          </a>
         </header>
 
-      <div style={{ maxWidth: 820, margin: '0 auto', padding: '28px 20px 60px' }}>
+        <div style={{ flex: 1, padding: '30px 32px 60px', maxWidth: 900, width: '100%' }}>
           <Outlet />
         </div>
       </main>
+    </div>
   )
 }