wtclaude
c208543044
ENGAGEMENT.md Phase 9, closing gap G16. Two mechanisms decide that somebody in a
rule's audience does not get the mail, and they sit at deliberately different
points in the pipeline.
`engagement_suppressions` is checked at DELIVERY: an outbox row can sit through a
rule's `delay_seconds` grace window and an address can bounce inside it, so the
only correct check is the one taken immediately before the transport call — which
is also what produces the `status='suppressed'` row with no transport call at all.
The Phase 1b verification gate is applied at ENQUEUE, through a new optional
`registerDeliveryChannel({ eligible })` that only `email` declares. Filtering the
shared audience would have silenced the wrong sink: a rule spanning email and
in-app must still put an item in an unverified user's inbox. The excluded counts
reach `summary.ineligible` and the admin reach preview, which until now reported
an audience size that was never the number of people who would be mailed.
`bounceClassify.js` is the only thing that may write a `bounce` row, and it is
deliberately NOT `mailer.PERMANENT_CODES`. That set answers "is retrying
pointless?" and contains EAUTH and 554 — an auth failure and a relay-wide policy
refusal, neither of which is a fact about the recipient. Reusing it would mean one
stale SMTP password suppressing every address the worker touched, silently. The
classifier reads the RFC 3463 enhanced status first, falls back to a phrase match
only past a veto list and only for 550/551/553, and does not suppress anything it
is unsure about.
Scope is engagement rules only: resets, invites, verification and the contact form
still attempt, matching the posture passwordReset.controller.js already stated.
Found on the live rig, against a real MariaDB and a real SMTP conversation: a hard
bounce was being recorded as `failed`, so the Send Log's "Bounced" filter — a
status `engagement_sends` has carried since §4.5 — matched nothing and always
would have. It is now its own outcome; the outbox row stays `failed`, since that
ENUM has no `bounced` and a bounced row is one that finished unsuccessfully.
`address_masked` is this phase's one addition to §4.5's DDL. A hash-only table
cannot be operated — an operator cannot tell three typos from a whole domain
refusing mail — and the domain survives while the local part is destroyed, so the
column can never be read back as an address book.
- schema: `engagement_suppressions` (+ `address_masked`, `created_by`)
- `GET/POST/DELETE /api/v1/admin/engagement/suppressions`, and Admin → Engagement
→ Suppressions, the only way out of the list
- `sendNotification` returns `smtp: { code, responseCode, response }`
- 26 new tests; swagger, routes manifest and guards regenerated
Docs: RunicGateway/docs#191.
Co-Authored-By: Claude <noreply@anthropic.com>
483 lines
23 KiB
JavaScript
483 lines
23 KiB
JavaScript
import { useEffect, useMemo, useState } from 'react'
|
|
import { NavLink, Outlet, useNavigate, useLocation } from 'react-router-dom'
|
|
import MoonDot from '../../components/MoonDot.jsx'
|
|
import BrandLogo from '../../components/BrandLogo.jsx'
|
|
import NotificationBell from '../../components/NotificationBell.jsx'
|
|
import { useAuth } from '../../contexts/AuthContext.jsx'
|
|
import { useSite } from '../../contexts/SiteContext.jsx'
|
|
import { applyNavOverrides } from '../../lib/navOverrides.js'
|
|
import { useNavOverrides } from '../../lib/useNavOverrides.js'
|
|
import { withModuleNav } from '../../modules/nav.js'
|
|
import { useFeatureGate } from '../../modules/features.jsx'
|
|
import { navItemVisibleTo, allowedPathsFor, isAllowedPath } from '../../lib/adminNav.js'
|
|
|
|
// Small inline stroke icons (16px, currentColor) — same style as ProviderIcon.
|
|
// One shared frame keeps them terse; each item just supplies its path(s).
|
|
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 IconHome = () => <Icon><path d="M3 10.5 12 3l9 7.5" /><path d="M5 9.5V21h14V9.5" /></Icon>
|
|
const IconPosts = () => <Icon><path d="M5 3h14v18H5z" /><path d="M8 8h8M8 12h8M8 16h5" /></Icon>
|
|
const IconWiki = () => <Icon><path d="M4 4h9a3 3 0 0 1 3 3v13a2 2 0 0 0-2-2H4z" /><path d="M20 4h-2a2 2 0 0 0-2 2v14a2 2 0 0 1 2-2h2z" /></Icon>
|
|
const IconPages = () => <Icon><path d="M5 3h9l5 5v13H5z" /><path d="M14 3v5h5" /><path d="M8 13h8M8 17h8" /></Icon>
|
|
const IconActivity = () => <Icon><path d="M3 12h4l3 8 4-16 3 8h4" /></Icon>
|
|
const IconShield = () => <Icon><path d="M12 3l7 3v5c0 5-3.5 8-7 10-3.5-2-7-5-7-10V6z" /><path d="M9 12l2 2 4-4" /></Icon>
|
|
const IconUsers = () => <Icon><circle cx="9" cy="8" r="3" /><path d="M3 20a6 6 0 0 1 12 0" /><path d="M16 6a3 3 0 0 1 0 6M17 20a6 6 0 0 0-3-5" /></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 IconHero = () => <Icon><path d="M3 5h18v14H3z" /><circle cx="8" cy="10" r="1.6" /><path d="M4 18l5-5 3 3 3-4 5 6" /></Icon>
|
|
const IconKey = () => <Icon><circle cx="8" cy="12" r="4" /><path d="M12 12h9M18 12v3M15 12v2" /></Icon>
|
|
const IconBot = () => <Icon><rect x="4" y="8" width="16" height="11" rx="2" /><path d="M12 8V4M8 13h.01M16 13h.01M9 17h6" /></Icon>
|
|
const IconPulse = () => <Icon><path d="M3 12h3l2 6 4-14 2 8h7" /></Icon>
|
|
const IconUser = () => <Icon><circle cx="12" cy="8" r="4" /><path d="M4 21a8 8 0 0 1 16 0" /></Icon>
|
|
const IconBell = () => <Icon><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9" /><path d="M13.7 21a2 2 0 01-3.4 0" /></Icon>
|
|
const IconNav = () => <Icon><path d="M4 6h16M4 12h16M4 18h10" /><circle cx="18" cy="18" r="2.5" /></Icon>
|
|
const IconPalette = () => <Icon><path d="M12 3a9 9 0 1 0 0 18 2 2 0 0 0 1.6-3.2 2 2 0 0 1 1.6-3.2H18a3 3 0 0 0 3-3 9 9 0 0 0-9-8.6z" /><circle cx="7.5" cy="11.5" r="1" /><circle cx="10.5" cy="7.5" r="1" /><circle cx="15" cy="8.5" r="1" /></Icon>
|
|
const IconModules = () => <Icon><path d="M12 3l8 4.5-8 4.5-8-4.5z" /><path d="M4 12l8 4.5 8-4.5" /><path d="M4 16.5L12 21l8-4.5" /></Icon>
|
|
const IconMail = () => <Icon><rect x="3" y="5" width="18" height="14" rx="2" /><path d="M3.5 6.5L12 13l8.5-6.5" /></Icon>
|
|
const IconList = () => <Icon><path d="M8 6h13M8 12h13M8 18h13" /><circle cx="4" cy="6" r="1.2" /><circle cx="4" cy="12" r="1.2" /><circle cx="4" cy="18" r="1.2" /></Icon>
|
|
const IconTemplate = () => <Icon><rect x="4" y="3" width="16" height="18" rx="2" /><path d="M8 8h8M8 12h8M8 16h4" /></Icon>
|
|
const IconSpark = () => <Icon><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z" /><path d="M18 16l.9 2.1L21 19l-2.1.9L18 22l-.9-2.1L15 19l2.1-.9z" /></Icon>
|
|
const IconLog = () => <Icon><path d="M4 5h16v14H4z" /><path d="M8 9h8M8 12h8M8 15h5" /></Icon>
|
|
|
|
// Nav is grouped into collapsible categories. A group with no `title` renders
|
|
// its items ungrouped (Dashboard at top, Account at bottom). Each item's `roles`
|
|
// (when present) matches server-side enforcement so the sidebar never shows a
|
|
// link that would 403; an item without `roles` is visible to everyone.
|
|
// Moderators are further confined to just their section + account (see below).
|
|
//
|
|
// Exported because Admin -> Navigation edits this list. It stays declared here:
|
|
// the editor may relabel, reorder, hide and regroup, and `roles` is never its to
|
|
// touch (§7) — navItemVisibleTo below is the filter that still decides.
|
|
export const NAV = [
|
|
{
|
|
items: [
|
|
{ to: '/admin', label: 'Dashboard', end: true, icon: IconHome, roles: ['admin', 'editor', 'moderator'] },
|
|
],
|
|
},
|
|
{
|
|
title: 'Content',
|
|
items: [
|
|
{ to: '/admin/posts', label: 'Posts', icon: IconPosts, roles: ['admin', 'editor'] },
|
|
{ to: '/admin/pages', label: 'Pages', icon: IconPages, roles: ['admin', 'editor'] },
|
|
{ to: '/admin/wiki', label: 'Wiki', icon: IconWiki, roles: ['admin', 'editor'] },
|
|
{ to: '/admin/activity', label: 'Activity', icon: IconActivity, roles: ['admin', 'editor'] },
|
|
],
|
|
},
|
|
{
|
|
title: 'Moderation',
|
|
items: [
|
|
{ to: '/admin/moderation', label: 'Moderation', icon: IconShield, roles: ['admin', 'moderator'] },
|
|
{ to: '/admin/moderation/appeals', label: 'Appeals', icon: IconShield, roles: ['admin', 'moderator'] },
|
|
// Member-raised reports (TEAMS.md §5.6). Here rather than under Teams
|
|
// because a staffer working a queue should have one place to work — and
|
|
// because the queue is deliberately generic, so the next thing that can
|
|
// be reported arrives as a row rather than as another nav entry.
|
|
{ to: '/admin/moderation/reports', label: 'Reports', icon: IconShield, roles: ['admin', 'moderator'] },
|
|
// Moderation rather than System: the screen's daily job is the
|
|
// reserved-name review queue, which is moderator work. The three actions
|
|
// that publish a game-written name are gated to admins server-side, so a
|
|
// moderator reaching this screen is correct — what they do here is file a
|
|
// request (TEAMS.md §2.9).
|
|
{ to: '/admin/teams', label: 'Teams', icon: IconUsers, roles: ['admin', 'moderator'] },
|
|
],
|
|
},
|
|
{
|
|
// Its own top-level group (ENGAGEMENT.md §7.1 Q4), not a section of
|
|
// Settings. Settings is already one long page of sections, and these six
|
|
// screens are two editors, a catalog and two paged tables, none of which is
|
|
// a settings section. Email Delivery stays under Settings: configuring a
|
|
// transport is not the same job as deciding who gets mail.
|
|
title: 'Engagement',
|
|
items: [
|
|
{ to: '/admin/engagement/rules', label: 'Rules', icon: IconMail, roles: ['admin'] },
|
|
{ to: '/admin/engagement/audiences', label: 'Audiences', icon: IconList, roles: ['admin'] },
|
|
{ to: '/admin/engagement/templates', label: 'Templates', icon: IconTemplate, roles: ['admin'] },
|
|
{ to: '/admin/engagement/triggers', label: 'Triggers', icon: IconSpark, roles: ['admin'] },
|
|
{ to: '/admin/engagement/sends', label: 'Send Log', icon: IconLog, roles: ['admin'] },
|
|
// Beside the Send Log rather than inside it (Phase 9): the log answers
|
|
// "did that message go out", and this answers "why is this person not
|
|
// getting any" - and it is the only screen that can lift a suppression.
|
|
{ to: '/admin/engagement/suppressions', label: 'Suppressions', icon: IconLog, roles: ['admin'] },
|
|
],
|
|
},
|
|
{
|
|
title: 'System',
|
|
items: [
|
|
{ to: '/admin/users', label: 'Users', icon: IconUsers, roles: ['admin'] },
|
|
{ to: '/admin/invites', label: 'Invites', icon: IconUsers, roles: ['admin'] },
|
|
{ to: '/admin/settings', label: 'Settings', icon: IconGear, roles: ['admin'] },
|
|
// Admin-only, matching the server: every route under /admin/modules
|
|
// re-gates to `admin` on top of the group's staff gate, because installing
|
|
// a module runs its code in this process.
|
|
{ to: '/admin/modules', label: 'Modules', icon: IconModules, roles: ['admin'] },
|
|
{ to: '/admin/appearance', label: 'Appearance', icon: IconPalette, roles: ['admin'] },
|
|
{ to: '/admin/navigation', label: 'Navigation', icon: IconNav, roles: ['admin'] },
|
|
{ to: '/admin/hero', label: 'Hero Editor', icon: IconHero, roles: ['admin'] },
|
|
{ to: '/admin/auth-providers', label: 'Authentication', icon: IconKey, roles: ['admin'] },
|
|
{ to: '/admin/discord-bot', label: 'Discord Bot', icon: IconBot, roles: ['admin'] },
|
|
{ to: '/admin/bot-activity', label: 'Web Bot Activity', icon: IconPulse, roles: ['admin'] },
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
// No `end`: `allowedPathsFor` turns an `end` row into an EXACT match, so
|
|
// marking this one exact would leave `/admin/notifications/settings`
|
|
// outside the allowlist and bounce a staff member off their own
|
|
// preferences screen. The row covering its sub-routes is the point.
|
|
{ to: '/admin/notifications', label: 'Notifications', icon: IconBell },
|
|
{ to: '/admin/account', label: 'Account', icon: IconUser },
|
|
],
|
|
},
|
|
]
|
|
|
|
const COLLAPSE_KEY = 'admin.nav.collapsed'
|
|
|
|
// The one row an override may never hide: the nav editor itself, which is the
|
|
// only screen that can un-hide anything. The write path already refuses it
|
|
// (server/src/utils/navOverrides.js) and the editor's own toggle is disabled —
|
|
// this is the third guard, and the one that also covers a row edited straight
|
|
// in the database. Cheap, and it makes "cannot be hidden" true without
|
|
// qualification.
|
|
const UNHIDEABLE = '/admin/navigation'
|
|
|
|
function keepEditorReachable(overrides) {
|
|
const entry = overrides?.[UNHIDEABLE]
|
|
if (!entry || entry.hidden !== true) return overrides
|
|
const { hidden, ...rest } = entry
|
|
return { ...overrides, [UNHIDEABLE]: rest }
|
|
}
|
|
|
|
// Who may see a sidebar row, and where that lets them go, both derived from the
|
|
// row's own `roles` — lib/adminNav.js, which is where the two hardcoded path
|
|
// lists this component used to carry went (MODULE_SYSTEM.md §1.4). Re-exported
|
|
// because Admin -> Navigation has always imported it from here.
|
|
export { navItemVisibleTo }
|
|
|
|
const TITLES = {
|
|
'/admin': 'Dashboard',
|
|
'/admin/posts': 'Posts',
|
|
'/admin/pages': 'Pages',
|
|
'/admin/wiki': 'Wiki Pages',
|
|
'/admin/hero': 'Hero Editor',
|
|
'/admin/moderation': 'Moderation',
|
|
'/admin/moderation/appeals': 'Appeals',
|
|
'/admin/moderation/reports': 'Reports',
|
|
'/admin/teams': 'Teams',
|
|
'/admin/settings': 'Site Settings',
|
|
'/admin/appearance': 'Appearance',
|
|
'/admin/navigation': 'Navigation',
|
|
'/admin/activity': 'Activity Log',
|
|
'/admin/bot-activity': 'Web Bot Activity',
|
|
'/admin/discord-bot': 'Discord Bot',
|
|
'/admin/auth-providers': 'Authentication',
|
|
'/admin/users': 'Users',
|
|
'/admin/invites': 'Invites',
|
|
'/admin/account': 'Account Security',
|
|
'/admin/notifications': 'Notifications',
|
|
'/admin/notifications/settings': 'Notification settings',
|
|
'/admin/engagement/rules': 'Engagement Rules',
|
|
'/admin/engagement/audiences': 'Engagement Audiences',
|
|
'/admin/engagement/templates': 'Message Templates',
|
|
'/admin/engagement/triggers': 'Triggers',
|
|
'/admin/engagement/suppressions': 'Suppressions',
|
|
'/admin/engagement/sends': 'Send Log',
|
|
}
|
|
|
|
// An installed module's admin pages are not in TITLES and cannot be — core does
|
|
// not know what they are called. Their nav row does, so the row is the title:
|
|
// the longest matching module row wins, so a detail page under a section titles
|
|
// as that section rather than falling through to a bare "Admin". Restricted to
|
|
// rows a module registered, which is what keeps every core path resolving
|
|
// through TITLES and sectionTitle exactly as it does today.
|
|
function moduleTitle(baseNav, pathname) {
|
|
return baseNav
|
|
.flatMap((g) => g.items)
|
|
.filter((i) => i.moduleId && (pathname === i.to || pathname.startsWith(`${i.to}/`)))
|
|
.sort((a, b) => b.to.length - a.to.length)[0]?.label
|
|
}
|
|
|
|
// Fallback page title for dynamic sub-routes not in the exact-match TITLES map.
|
|
function sectionTitle(pathname) {
|
|
if (pathname.startsWith('/admin/moderation')) return 'Moderation'
|
|
if (pathname.startsWith('/admin/users/')) return 'User'
|
|
if (pathname.startsWith('/admin/engagement')) return 'Engagement'
|
|
return 'Admin'
|
|
}
|
|
|
|
const navBtnBase = {
|
|
textAlign: 'left',
|
|
borderRadius: 8,
|
|
padding: '10px 14px',
|
|
fontFamily: 'var(--sans)',
|
|
fontSize: '0.92rem',
|
|
textDecoration: 'none',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 10,
|
|
transition: 'background .15s,color .15s',
|
|
}
|
|
|
|
export default function AdminLayout() {
|
|
const { user, logout } = useAuth()
|
|
const { mode, siteTitle } = useSite()
|
|
const navOverrides = useNavOverrides()
|
|
const navigate = useNavigate()
|
|
const location = useLocation()
|
|
const isVisible = useFeatureGate()
|
|
|
|
// Core's rows plus every installed module's, before the override merge sees
|
|
// them — so a module row is editable in Admin -> Navigation like any other
|
|
// (modules/nav.js). Computed once: the registry is fixed before the first
|
|
// render and nothing unregisters.
|
|
const baseNav = useMemo(() => withModuleNav(NAV, 'admin'), [])
|
|
const title =
|
|
TITLES[location.pathname] || moduleTitle(baseNav, location.pathname) || sectionTitle(location.pathname)
|
|
// The hero canvas editor needs room — let it use the full content width.
|
|
const wide = location.pathname === '/admin/hero'
|
|
const modeDot = mode === 'live' ? 'var(--mode-live)' : 'var(--mode-maint)'
|
|
|
|
const isModerator = user?.role === 'moderator'
|
|
|
|
// An admin may relabel, reorder, hide and regroup these rows from Admin →
|
|
// Navigation. The merge runs FIRST and the role filter after it, so the filter
|
|
// stays the boundary: an override cannot show a moderator a row their role
|
|
// gate hides, whatever it says. With no stored row applyNavOverrides returns
|
|
// NAV itself and this is exactly the code that ran before the feature.
|
|
const navGroups = useMemo(
|
|
() =>
|
|
applyNavOverrides(baseNav, keepEditorReachable(navOverrides.nav_admin))
|
|
.map((g) => ({
|
|
...g,
|
|
// `isVisible` is a no-op for every core row — none carries a `feature`
|
|
// — and is applied here so that a module row which does carry one is
|
|
// gated on the sidebar rather than silently advertised.
|
|
items: g.items.filter((item) => navItemVisibleTo(item, user?.role) && isVisible(item)),
|
|
}))
|
|
// Drop any now-empty group so an empty category header never renders.
|
|
.filter((g) => g.items.length > 0),
|
|
[baseNav, navOverrides.nav_admin, user?.role, isVisible],
|
|
)
|
|
|
|
// Accordion: track which titled categories are collapsed. Persist across
|
|
// reloads; default all-open. The group holding the active route auto-opens.
|
|
const [collapsed, setCollapsed] = useState(() => {
|
|
try {
|
|
return JSON.parse(localStorage.getItem(COLLAPSE_KEY)) || {}
|
|
} catch {
|
|
return {}
|
|
}
|
|
})
|
|
const toggleGroup = (title) => {
|
|
setCollapsed((prev) => {
|
|
const next = { ...prev, [title]: !prev[title] }
|
|
try {
|
|
localStorage.setItem(COLLAPSE_KEY, JSON.stringify(next))
|
|
} catch {
|
|
/* private mode / quota — collapse is non-essential */
|
|
}
|
|
return next
|
|
})
|
|
}
|
|
const activeGroupTitle = navGroups.find((g) =>
|
|
g.title && g.items.some((i) => (i.end ? location.pathname === i.to : location.pathname.startsWith(i.to)))
|
|
)?.title
|
|
|
|
// Where a moderator may go, from the same `roles` that decide what they see.
|
|
// It used to be a third hardcoded list — a prefix check over three paths —
|
|
// which disagreed with the sidebar's own five-path allowlist: `/admin/houses`
|
|
// was on the sidebar and not in the redirect, so a moderator who clicked
|
|
// Houses in their own nav was bounced straight back to Moderation. One
|
|
// derivation cannot disagree with itself, which is the point of deriving it.
|
|
const allowed = useMemo(() => allowedPathsFor(baseNav, user?.role), [baseNav, user?.role])
|
|
|
|
// Confine a moderator who deep-links (or is redirected to the index) to a page
|
|
// outside their remit — the API would 403 anyway, so send them to their home.
|
|
useEffect(() => {
|
|
if (!isModerator) return
|
|
if (!isAllowedPath(location.pathname, allowed)) {
|
|
navigate('/admin/moderation', { replace: true })
|
|
}
|
|
}, [isModerator, location.pathname, navigate, allowed])
|
|
|
|
// Keep the admin out of search indexes (belt-and-suspenders with robots.txt).
|
|
useEffect(() => {
|
|
const meta = document.createElement('meta')
|
|
meta.name = 'robots'
|
|
meta.content = 'noindex, nofollow'
|
|
document.head.appendChild(meta)
|
|
return () => document.head.removeChild(meta)
|
|
}, [])
|
|
|
|
async function signOut() {
|
|
await logout()
|
|
navigate('/admin/login', { replace: true })
|
|
}
|
|
|
|
return (
|
|
<div className="admin-grid">
|
|
{/* Sidebar */}
|
|
<aside
|
|
style={{
|
|
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 }}>
|
|
<BrandLogo height={24} />
|
|
<MoonDot />
|
|
<div>
|
|
<div className="display" style={{ fontSize: '1.02rem', color: 'var(--head)', letterSpacing: '0.03em' }}>
|
|
{siteTitle}
|
|
</div>
|
|
<div className="sans" style={{ color: 'var(--dim)', fontSize: '0.66rem', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
|
|
Admin
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<nav style={{ flex: 1, padding: '14px 12px', display: 'flex', flexDirection: 'column', gap: 4, overflowY: 'auto' }}>
|
|
{navGroups.map((group) => {
|
|
const links = group.items.map((n) => (
|
|
<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 && <n.icon />}
|
|
<span>{n.label}</span>
|
|
</NavLink>
|
|
))
|
|
|
|
// Untitled groups (Dashboard, Account) render their links directly.
|
|
if (!group.title) {
|
|
return (
|
|
<div key={group.items[0]?.to || 'group'} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
|
{links}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// Titled groups get a collapsible header. The group with the active
|
|
// route stays open regardless of the stored collapse preference.
|
|
const isOpen = group.title === activeGroupTitle || !collapsed[group.title]
|
|
return (
|
|
<div key={group.title} className="admin-nav-group">
|
|
<button
|
|
type="button"
|
|
className="admin-nav-head sans"
|
|
onClick={() => toggleGroup(group.title)}
|
|
aria-expanded={isOpen}
|
|
>
|
|
<span>{group.title}</span>
|
|
<svg
|
|
className="admin-nav-chev"
|
|
width="12"
|
|
height="12"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
style={{ transform: isOpen ? 'rotate(0deg)' : 'rotate(-90deg)' }}
|
|
aria-hidden="true"
|
|
>
|
|
<path d="M6 9l6 6 6-6" />
|
|
</svg>
|
|
</button>
|
|
{isOpen && (
|
|
<div className="admin-nav-items" style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
|
{links}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
})}
|
|
</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: modeDot, boxShadow: `0 0 8px ${modeDot}` }} />
|
|
Site is <strong style={{ color: 'var(--ink)', textTransform: 'capitalize' }}>{mode}</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>
|
|
<div className="sans" style={{ display: 'flex', alignItems: 'center', gap: 14, fontSize: '0.84rem', color: 'var(--muted)' }}>
|
|
{/* Staff have an inbox like anyone else — `/auth/me/notifications`
|
|
is role-agnostic — and `RequirePlayer` keeps them out of the
|
|
player portal, so without this the one place they spend their
|
|
time is the one place the bell is missing. */}
|
|
<NotificationBell />
|
|
<a href="/" target="_blank" rel="noreferrer" style={{ color: 'var(--accent)', textDecoration: 'none' }}>
|
|
View site →
|
|
</a>
|
|
<span
|
|
style={{ width: 30, height: 30, borderRadius: '50%', background: 'linear-gradient(180deg,#2a3a52,#1a2536)', border: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#d8e2ef', fontSize: '0.8rem', textTransform: 'uppercase' }}
|
|
>
|
|
{(user?.username || 'A').charAt(0)}
|
|
</span>
|
|
</div>
|
|
</header>
|
|
|
|
<div style={{ flex: 1, padding: '30px 32px 60px', maxWidth: wide ? 'none' : 1000, width: '100%' }}>
|
|
<Outlet />
|
|
</div>
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|