wtclaude
eb167558e3
Found by the live walk, signed in as an admin: /account/events redirected to the dashboard. `GET /player/events/history` is behind requireAuth alone and self-scoped on req.user.id -- staff are a superset of players -- but the WEB has two logged-in shells, and RequirePlayer sends anyone who is not a `player` out of /account. A single mount there is a screen the reviewing admin can never open. Engagement Phase 7 hit this exact wall with the inbox and answered it with two routes, one pair of components and one mapping. `eventHistoryPath` joins `inboxPath` and `notificationSettingsPath` in notificationPaths.js rather than starting a second file with the same comment at the top of it. The staff path is /admin/events/mine, in the Events section of the sidebar, and it is the one row in that group with no `roles`. Also: the eventAnnounce fixture carried no slug, state or `listed`, so `eventUrl` answered undefined in every test in that file and the new code was exercised by none of them. The fixture now looks like a definition row, and three tests cover the link, the unlisted case and the draft case. The run.failed assertion that came with them was reading the wrong layer: `baseFor` assembles eventUrl for every trigger and the SEAM drops the keys a trigger does not declare, so the declaration test is what proves it. Removed, with a note saying where the rule actually lives. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016wDDVXWMDz82WqE1i969r4
528 lines
26 KiB
JavaScript
528 lines
26 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>
|
|
const IconCalendar = () => <Icon><rect x="3" y="5" width="18" height="16" rx="2" /><path d="M3 10h18M8 3v4M16 3v4" /><circle cx="12" cy="15" r="1.4" /></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'] },
|
|
// Last in the group because it is the one screen nobody visits weekly, and
|
|
// beside Suppressions on purpose: it is where the reader is told that the
|
|
// fourth engagement table does NOT expire, which is otherwise a silence
|
|
// that reads as an oversight.
|
|
{ to: '/admin/engagement/retention', label: 'Retention', icon: IconGear, roles: ['admin'] },
|
|
],
|
|
},
|
|
{
|
|
// Its own top-level group rather than a row under Content, and staff-wide
|
|
// rather than admin-only. Both follow EVENTS.md §K: every read here is
|
|
// `staff`, and the moderator's entire power over this feature is the run
|
|
// console — the thing they open when an event is doing something wrong at
|
|
// 2am. Hiding it from them would leave the one role that exists for incident
|
|
// response unable to see the incident. The narrower gates live on the
|
|
// actions: authoring is admin+editor and publish/start are admin only, both
|
|
// enforced server-side and mirrored on the buttons.
|
|
title: 'Events',
|
|
items: [
|
|
{ to: '/admin/events', label: 'Events', icon: IconCalendar, roles: ['admin', 'editor', 'moderator'] },
|
|
// Phase 4. The same staff gate as the list beside it: a calendar is a read,
|
|
// and the arcs it manages are authoring gated on the buttons rather than
|
|
// on the row.
|
|
{ to: '/admin/events/calendar', label: 'Calendar', icon: IconCalendar, roles: ['admin', 'editor', 'moderator'] },
|
|
// Phase 6, and the one row in this group that is NOT staff-wide. §K puts
|
|
// the switchboard in the same row as the world-changing actions it
|
|
// governs: what a deployment permits at all is configuration, not a read,
|
|
// and the server gates both the GET and the PUT on `admin`.
|
|
{ to: '/admin/events/actions', label: 'Actions', icon: IconGear, roles: ['admin'] },
|
|
// Phase 14a, and the one row here that is not about running the
|
|
// deployment: it is this staff member's OWN attendance, the same screen
|
|
// and the same route a player reads at /account/events. It has no `roles`
|
|
// because it needs none — every account has a participation history, and
|
|
// the server scopes it to the caller.
|
|
{ to: '/admin/events/mine', label: 'My participation', icon: IconCalendar },
|
|
],
|
|
},
|
|
{
|
|
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',
|
|
'/admin/engagement/retention': 'Retention',
|
|
'/admin/events': 'Events',
|
|
'/admin/events/calendar': 'Event calendar',
|
|
'/admin/events/actions': 'Event actions',
|
|
'/admin/events/mine': 'My participation',
|
|
'/admin/events/new': 'New event',
|
|
}
|
|
|
|
// 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'
|
|
// /admin/events/:id and /admin/events/runs/:runId are both dynamic, and both
|
|
// belong to the same section as far as the page title is concerned.
|
|
if (pathname.startsWith('/admin/events/runs/')) return 'Event run'
|
|
if (pathname.startsWith('/admin/events/')) return 'Event'
|
|
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>
|
|
)
|
|
}
|