Grew /admin/theme from colours-only to a full theme editor, all applied
live via website_settings + ThemeVars:
- Typography: body font (10 web-safe + Google options; Google fonts load
via an injected <link>) and H1/H2/H3 sizes (globals.css now reads
--size-heading-* vars).
- Buttons & links: secondary/danger button colours + link/link-hover.
- Custom CSS: a raw textarea injected after the theme variables (staff-
trusted), for anything the controls don't cover.
- Presets: 6 → 13 (added Galaxy, Royal, Cyberpunk, Neon, Coffee, Arctic,
Christmas). ThemeVars now injects all the new vars + the font link.
Verified live (prod, amx_test): saved font=mono / H1=44px / custom CSS →
the public home reflected --font-family "Courier New", --size-heading-h1
44px and the injected rule; reverted the test settings. tsc 0,
vitest 49/49, next build 0.
Extended the same design-system treatment to the public site, faithful
to AtomCMS's "atom" theme. New src/components/public/ui.tsx provides the
signature atom building blocks + a scoped CSS layer:
- ContentCard: surface card with a primary-tinted header (icon circle +
title + subtitle) and padded body — the atom content-card, used as
every page's header and section wrapper.
- StatBlock / stat-grid, EmptyState, OnlineBadge (online/offline pill),
RankBadge (medals for the top 3), and responsive .card-grid helpers.
Swept ~45 public pages (home/community/rankings hand-built as the
reference; the rest via parallel agents that read the schema and
preserved every query, server action, auth gate and field name):
heroes → ContentCard headers, lists → card-grids in ContentCards,
"no X" → EmptyState, status → OnlineBadge/RankBadge. The leaderboard
gained Credits/Diamonds/Duckets tabs (usersCurrency).
Behaviour unchanged. Verified on the prod server against amx_test: 15+
public pages render the content-cards/grids with real data, no errors;
computed styles confirm the tinted header, icon circle, medal + online
pills. Fixed an undefined --color-golden ref. tsc 0, vitest 49/49,
next build 0.
The Commandocentrum (AtomCMS's verification/diagnostics hub) was just RCON
buttons + an error table. Rebuilt it as a real status dashboard, and gave
the admin home the same treatment, with reusable StatusCard / DiagnosticRow
/ InfoItem components and a scoped CSS layer:
Commandocentrum now shows:
- Live status tiles: players online, emulator (RCON ping), database,
emulator error count — colour-accented by state.
- Server info: Node version, platform, app/host uptime, heap/RSS, load,
CPUs (from node:os / process).
- System diagnostics: DB, emulator RCON, RCON config, APP_KEY (2FA),
SMTP, maintenance mode — each with an ok/warn/error dot + pill.
- Existing RCON controls + hotel alert, a recent staff-activity feed
(staff_activities, now a real table), and the emulator error log.
Admin home: four status tiles (online/articles/active bans/database) +
recent staff activity, replacing the three plain count cards.
Verified in a real authed admin session (prod, amx_test): both pages
render the tiles/diagnostics with live data (Node v22, real memory/uptime,
APP_KEY/SMTP correctly flagged WARN). tsc 0, vitest 49/49, next build 0.
The admin pages used bare inline-styled tables on the default page
background. Rebuilt the admin shell + added a scoped .admin CSS layer so
the whole panel matches the original AtomCMS Filament look:
- Dark #2d2d44 sidebar (the AtomCMS admin navbar colour) with the nav
grouped into Overview / Content / Users & access / Economy / Radio /
System (mirrors the Filament resource groups), an avatar + rank badge
header, and amber active-link highlighting via a client AdminNavLink
(usePathname).
- A topbar ("Housekeeping" + signed-in user) over a light content area.
- Carded tables (surface bg, rounded, shadow, tinted header, row hover)
and a page-title treatment, applied globally so every admin page is
styled without per-page edits.
Verified in a real authenticated admin session (production server,
amx_test): sidebar renders #2d2d44 sticky, active link amber on dark
text, /admin/users table carded with 7 real rows; dev server serves the
admin rules after a cache refresh. tsc 0, vitest 49/49, next build 0.
Security (launch blockers):
- src/middleware.ts (edge): forwards x-pathname + real client IP.
- access-guard.ts (Node, from root layout): routes non-staff to /maintenance
when maintenance mode is on, banned users to /banned. New /banned + /maintenance
pages (the consumers the admin toggle was missing). Admin layout enforces
force_staff_2fa before /admin.
- staff-activity.ts audit log wired into ban/lift/give-currency/set-rank actions.
Infra (parallel agents): alert service (alert_logs + Discord embed + email),
PayPal top-up (create/capture API routes + /shop/topup), cron worker
(scripts/jobs-worker.ts via croner: emulator-ping->alert, maintenance-check,
bans-cleanup), social connections page, admin radio settings/banners/ranks.
Public radio subsystem: /radio (+schedule, shouts+post, contests, giveaways,
apply, leaderboard) and /apply/staff + /apply/team submission forms. Radio nav
link added. .env.example documents the new optional vars.
(radio song-requests dropped: its table is a stub in AtomCMS — columns added by
un-modeled alter-migrations.)
Verified: tsc exit 0, vitest 48/48, next build exit 0 (82 page routes).
Make the template match the atom theme, not just approximate it:
- Add Tailwind v4 (+forms/typography plugins, postcss) and port the real atom
CSS (global.css + atom app.css) into globals.css: nav-item underline, currency
+ navigation icon classes, site-bg, card-base/hover-lift, text utils — asset
paths adapted to /assets.
- Copy the real theme assets (backgrounds, icons/currency/navigation, profile,
leaderboards) into public/assets.
- Rebuild the shell 1:1 from the atom Blade: TopHeader (currency pills +
user/admin dropdowns, auth-only), SiteHeader (header image + black/50 overlay,
logo+online+Nitro client / guest Login+Create-account CTA), Navigation (white
bar, nav-item + Community/Assistance dropdowns), Footer. ThemeVars injects the
DB-driven CSS custom properties into :root like app.blade.php. Layout uses the
atom body/site-bg + grid-cols-12 max-w-7xl content wrapper.
Verified: tsc 0, next build exit 0; curl confirms the atom markup, compiled CSS
references the assets, and background-light.jpg + currency/navigation icons all
serve 200.
Faithful port of AtomCMS's "atom" theme look (light, Habbo-retro, golden
#eeb425 / amber #f59e0b accents, white cards, 12px radii, Nunito-first stack):
- globals.css: full token set + components (.site-header/.nav-item, .btn-*,
.card, .hero, currency pills, article cards, inputs, tables, footer).
- SiteHeader (brand + nav + currency pills + auth box, staff-aware) + SiteFooter;
layout wraps header/content/footer. Removed the bare SiteNav.
- Restyled home (hero + article cards), login (centered card).
- siteSettings now falls back to DEFAULTS on missing key OR DB error, so pages
render without a DB; DATABASE_CONNECT_TIMEOUT_MS env + pool acquireTimeout make
the no-DB fallback fast.
Verified in a real browser (computed styles): header white/sticky, golden logo
gradient, uppercase nav, amber primary button @12px radius, golden outline,
hero gradient — all correct. tsc exit 0, vitest 48/48, next build exit 0.
Real App Router pages reading the converted Prisma models:
- home: latest 4 articles (websiteArticles) + hotel_name from settings
- /news + /news/[slug]: article index and detail
- /u/[username]: profile (avatar via imager helper, motto, rank, credits, online)
- shared SiteNav (reads session via auth() + hotel_name), globals.css
- src/lib/format.ts: avatarImageUrl + excerpt helpers (unit-tested)
Verified: tsc exit 0, vitest 43/43, next build exit 0 (7 routes). Pages render
against a live DB (deferred until DATABASE_URL is provided). i18n to be layered
on next.
Simo