Performance, SEO, a11y, and code quality improvements

1. Performance: 25 pages switched from force-dynamic to revalidate=300 (ISR);
   2 pages (community, developers) now fully static (SSG)
2. DB indexes: Added @@index on foreign keys for WebsiteArticles,
   WebsiteArticleReactions, WebsiteArticleComments, WebsiteHelpCenterTickets,
   WebsiteShopArticles, RadioSongRequests, StaffActivities
3. SEO: Added robots.ts, sitemap.ts, canonical URLs, Open Graph + Twitter
   Card metadata on root layout and news articles
4. A11Y: Replaced <details>/<summary> dropdowns with accessible button-based
   NavDropdown (aria-expanded, aria-haspopup, role=menu). MobileNav now
   uses translated aria-label, aria-expanded, aria-controls, role=menu
5. Code quality: Added try/catch to updateArticle/deleteArticle; deleteArticle
   now uses prisma. for atomicity
6. CI/CD: Added GitHub Actions workflow (typecheck + test)
7. i18n: Added openMenu/closeMenu keys to all 6 locales
8. Observability: Health endpoint now checks SMTP reachability when configured
9. Loading states: Added loading.tsx for root, admin, and news sections
10. Word filter cache: Added 60s TTL auto-refresh instead of manual cache bust

.github/workflows/ci.yml

@@ -0,0 +1,34 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - run: pnpm install --frozen-lockfile
+
+      - run: pnpm typecheck
+
+      - run: pnpm test
+        env:
+          SKIP_ENV_VALIDATION: true

prisma/schema.prisma

@@ -1569,6 +1569,7 @@ model WebsiteArticles {
   createdAt DateTime? @map("created_at") @db.Timestamp(0)
   updatedAt DateTime? @map("updated_at") @db.Timestamp(0)
 
+  @@index([userId])
   @@map("website_articles")
 }
 
@@ -1662,6 +1663,8 @@ model WebsiteArticleReactions {
   reaction  String   @db.VarChar(50)
   active    Boolean  @default(true)
 
+  @@index([articleId])
+  @@index([userId])
   @@map("website_article_reactions")
 }
 
@@ -1753,6 +1756,8 @@ model WebsiteArticleComments {
   createdAt DateTime? @map("created_at") @db.Timestamp(0)
   updatedAt DateTime? @map("updated_at") @db.Timestamp(0)
 
+  @@index([articleId])
+  @@index([userId])
   @@map("website_article_comments")
 }
 
@@ -1841,6 +1846,8 @@ model WebsiteHelpCenterTickets {
   createdAt DateTime? @map("created_at") @db.Timestamp(0)
   updatedAt DateTime? @map("updated_at") @db.Timestamp(0)
 
+  @@index([userId])
+  @@index([categoryId])
   @@map("website_help_center_tickets")
 }
 
@@ -1877,6 +1884,7 @@ model WebsiteShopArticles {
   createdAt DateTime? @map("created_at") @db.Timestamp(0)
   updatedAt DateTime? @map("updated_at") @db.Timestamp(0)
 
+  @@index([categoryId])
   @@map("website_shop_articles")
 }
 
@@ -2151,6 +2159,7 @@ model RadioSongRequests {
   createdAt  DateTime? @map("created_at") @db.Timestamp(0)
   updatedAt  DateTime? @map("updated_at") @db.Timestamp(0)
 
+  @@index([userId])
   @@map("radio_song_requests")
 }
 
@@ -2361,9 +2370,11 @@ model StaffActivities {
   description String  @db.Text
   ipAddress  String?  @map("ip_address") @db.VarChar(45)
   metadata   Json?    @db.Json
-  createdAt DateTime  @default(now()) @map("created_at") @db.Timestamp(0)
+  createdAt  DateTime  @default(now()) @map("created_at") @db.Timestamp(0)
   updatedAt DateTime? @map("updated_at") @db.Timestamp(0)
 
+  @@index([userId])
+  @@index([action])
   @@map("staff_activities")
 }
 

src/actions/admin-articles.ts

@@ -48,16 +48,20 @@ export async function createArticle(formData: FormData): Promise<void> {
 export async function updateArticle(formData: FormData): Promise<void> {
   await requireStaff();
   const id = BigInt(String(formData.get("id")));
-  await prisma.websiteArticles.update({
-    where: { id },
-    data: {
-      title: String(formData.get("title") ?? "").trim().slice(0, 255),
-      shortStory: String(formData.get("shortStory") ?? "").trim().slice(0, 255),
-      fullStory: String(formData.get("fullStory") ?? "").trim(),
-      image: String(formData.get("image") ?? "").trim().slice(0, 255),
-      updatedAt: new Date(),
-    },
-  });
+  try {
+    await prisma.websiteArticles.update({
+      where: { id },
+      data: {
+        title: String(formData.get("title") ?? "").trim().slice(0, 255),
+        shortStory: String(formData.get("shortStory") ?? "").trim().slice(0, 255),
+        fullStory: String(formData.get("fullStory") ?? "").trim(),
+        image: String(formData.get("image") ?? "").trim().slice(0, 255),
+        updatedAt: new Date(),
+      },
+    });
+  } catch {
+    redirect("/admin/articles?error=Update failed");
+  }
   revalidatePath(`/admin/articles/${id}`);
   redirect("/admin/articles");
 }
@@ -65,8 +69,14 @@ export async function updateArticle(formData: FormData): Promise<void> {
 export async function deleteArticle(formData: FormData): Promise<void> {
   await requireStaff();
   const id = BigInt(String(formData.get("id")));
-  await prisma.websiteArticleReactions.deleteMany({ where: { articleId: id } });
-  await prisma.websiteArticleComments.deleteMany({ where: { articleId: id } });
-  await prisma.websiteArticles.delete({ where: { id } });
+  try {
+    await prisma.$transaction([
+      prisma.websiteArticleReactions.deleteMany({ where: { articleId: id } }),
+      prisma.websiteArticleComments.deleteMany({ where: { articleId: id } }),
+      prisma.websiteArticles.delete({ where: { id } }),
+    ]);
+  } catch {
+    redirect("/admin/articles?error=Delete failed");
+  }
   redirect("/admin/articles");
 }

src/app/admin/loading.tsx

@@ -0,0 +1,7 @@
+export default function AdminLoading() {
+  return (
+    <div style={{ display: "flex", justifyContent: "center", padding: "4rem 0" }}>
+      <div className="animate-spin w-8 h-8 border-4 rounded-full" style={{ borderColor: "var(--color-primary)", borderTopColor: "transparent" }} />
+    </div>
+  );
+}

src/app/api/health/route.ts

@@ -1,24 +1,42 @@
 import { apiJson } from "@/lib/api";
 import { prisma } from "@/lib/prisma";
 import { rcon } from "@/lib/services/rcon";
+import { env } from "@/env";
 
 export const dynamic = "force-dynamic";
 
 /**
- * Ops health probe: database reachability, emulator RCON reachability, and
- * runtime info. Returns HTTP 200 always (read the `status`/`database` fields),
- * so it's safe for uptime monitors that only care about reachability.
+ * Ops health probe: database reachability, emulator RCON reachability, SMTP
+ * (when configured), and runtime info. Returns HTTP 200 always (read the
+ * `status`/`database` fields), so it's safe for uptime monitors that only care
+ * about reachability.
  */
 export async function GET() {
   const database = await prisma
     .$queryRaw`SELECT 1`.then(() => true)
     .catch(() => false);
+
   const emulator = await rcon.send("ping", null).catch(() => false);
 
+  let smtp = null;
+  if (env.SMTP_HOST) {
+    const nodemailer = await import("nodemailer");
+    const test = nodemailer.createTransport({
+      host: env.SMTP_HOST,
+      port: env.SMTP_PORT,
+      secure: env.SMTP_SECURE,
+      auth: env.SMTP_USER
+        ? { user: env.SMTP_USER, pass: env.SMTP_PASSWORD ?? "" }
+        : undefined,
+    });
+    smtp = await test.verify().then(() => true).catch(() => false);
+  }
+
   return apiJson({
     status: database ? "ok" : "degraded",
     database,
     emulator,
+    smtp,
     node: process.version,
     uptime: Math.round(process.uptime()),
     time: new Date().toISOString(),

src/app/badges/page.tsx

@@ -2,7 +2,7 @@ import { getTranslations } from "next-intl/server";
 import { ContentCard, EmptyState } from "@/components/public/ui";
 import { prisma } from "@/lib/prisma";
 
-export const dynamic = "force-dynamic";
+export const revalidate = 300;
 
 export const metadata = { title: "Badges" };
 

src/app/community/page.tsx

@@ -2,8 +2,6 @@ import { useTranslations } from "next-intl";
 import Link from "next/link";
 import { ContentCard } from "@/components/public/ui";
 
-export const dynamic = "force-dynamic";
-
 export const metadata = { title: "Community" };
 
 const LINKS = [

src/app/developers/page.tsx

@@ -2,7 +2,6 @@ import { ContentCard } from "@/components/public/ui";
 
 // Public API documentation. Static, hand-maintained from the routes that
 // actually exist under src/app/api — keep this in sync when endpoints change.
-export const dynamic = "force-dynamic";
 
 export const metadata = { title: "API" };
 

src/app/guilds/[id]/forum/page.tsx

@@ -4,7 +4,7 @@ import { notFound } from "next/navigation";
 import { ContentCard, EmptyState } from "@/components/public/ui";
 import { prisma } from "@/lib/prisma";
 
-export const dynamic = "force-dynamic";
+export const revalidate = 300;
 
 type ThreadRow = {
   id: number;

src/app/guilds/[id]/page.tsx

@@ -6,7 +6,7 @@ import { avatarImageUrl } from "@/lib/format";
 import { prisma } from "@/lib/prisma";
 import { siteSettings } from "@/lib/services/site-settings";
 
-export const dynamic = "force-dynamic";
+export const revalidate = 300;
 
 type GuildView = {
   id: number;

src/app/guilds/page.tsx

@@ -4,7 +4,7 @@ import { ContentCard, EmptyState } from "@/components/public/ui";
 import { excerpt } from "@/lib/format";
 import { prisma } from "@/lib/prisma";
 
-export const dynamic = "force-dynamic";
+export const revalidate = 300;
 
 export const metadata = { title: "Guilds" };
 

src/app/help/[category]/page.tsx

@@ -6,7 +6,7 @@ import { prisma } from "@/lib/prisma";
 import { sanitize } from "@/lib/sanitize";
 import { siteSettings } from "@/lib/services/site-settings";
 
-export const dynamic = "force-dynamic";
+export const revalidate = 300;
 
 // Asset path matches AtomCMS's Blade view: asset('/assets/images/help-center/<image_url>').
 const HELP_IMAGE_BASE = "/assets/images/help-center";

src/app/help/page.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 import { ContentCard, EmptyState } from "@/components/public/ui";
 import { prisma } from "@/lib/prisma";
 
-export const dynamic = "force-dynamic";
+export const revalidate = 300;
 
 type HelpCategory = {
   id: bigint;

src/app/layout.tsx

@@ -30,10 +30,20 @@ const pixelFont = Pixelify_Sans({
 });
 
 export async function generateMetadata(): Promise<Metadata> {
+  const appUrl = process.env.APP_URL ?? "http://localhost:3000";
   const hotel = (await siteSettings.get("hotel_name", "Atom")) ?? "Atom";
   return {
     title: { default: `${hotel} - Hotel`, template: `%s · ${hotel}` },
     description: `${hotel} — a Habbo retro hotel. Hang out, collect furni and meet friends.`,
+    metadataBase: new URL(appUrl),
+    alternates: { canonical: appUrl },
+    openGraph: {
+      title: `${hotel} - Hotel`,
+      description: `${hotel} — a Habbo retro hotel. Hang out, collect furni and meet friends.`,
+      type: "website",
+      siteName: hotel,
+    },
+    twitter: { card: "summary_large_image", title: `${hotel} - Hotel` },
   };
 }
 

src/app/leaderboard/page.tsx

@@ -5,7 +5,7 @@ import { avatarImageUrl } from "@/lib/format";
 import { prisma } from "@/lib/prisma";
 import { siteSettings } from "@/lib/services/site-settings";
 
-export const dynamic = "force-dynamic";
+export const revalidate = 300;
 
 export const metadata = { title: "Leaderboard" };
 

src/app/loading.tsx

@@ -0,0 +1,7 @@
+export default function RootLoading() {
+  return (
+    <div style={{ display: "flex", justifyContent: "center", padding: "4rem 0" }}>
+      <div className="animate-spin w-8 h-8 border-4 rounded-full" style={{ borderColor: "var(--color-primary)", borderTopColor: "transparent" }} />
+    </div>
+  );
+}

src/app/maintenance/page.tsx

@@ -2,7 +2,7 @@ import { getTranslations } from "next-intl/server";
 import { ContentCard } from "@/components/public/ui";
 import { siteSettings } from "@/lib/services/site-settings";
 
-export const dynamic = "force-dynamic";
+export const revalidate = 300;
 
 export default async function MaintenancePage() {
   const t = await getTranslations("pages.maintenance");

src/app/marketplace/page.tsx

@@ -2,7 +2,7 @@ import { getTranslations } from "next-intl/server";
 import { ContentCard, EmptyState, StatBlock } from "@/components/public/ui";
 import { prisma } from "@/lib/prisma";
 
-export const dynamic = "force-dynamic";
+export const revalidate = 300;
 
 export const metadata = { title: "Marketplace" };
 

src/app/news/[slug]/page.tsx

@@ -17,12 +17,24 @@ export async function generateMetadata({
 }: {
   params: Promise<{ slug: string }>;
 }): Promise<Metadata> {
+  const appUrl = process.env.APP_URL ?? "http://localhost:3000";
   const { slug } = await params;
   const article = await prisma.websiteArticles
     .findUnique({ where: { slug }, select: { title: true, shortStory: true } })
     .catch(() => null);
   if (!article) return { title: "Article" };
-  return { title: article.title, description: excerpt(article.shortStory, 160) };
+  return {
+    title: article.title,
+    description: excerpt(article.shortStory, 160),
+    alternates: { canonical: `${appUrl}/news/${slug}` },
+    openGraph: {
+      title: article.title,
+      description: excerpt(article.shortStory, 160),
+      type: "article",
+      url: `${appUrl}/news/${slug}`,
+    },
+    twitter: { card: "summary", title: article.title },
+  };
 }
 
 // The reaction set offered by the voting UI. Must stay in sync with

src/app/news/loading.tsx

@@ -0,0 +1,7 @@
+export default function NewsLoading() {
+  return (
+    <div style={{ display: "flex", justifyContent: "center", padding: "4rem 0" }}>
+      <div className="animate-spin w-8 h-8 border-4 rounded-full" style={{ borderColor: "var(--color-primary)", borderTopColor: "transparent" }} />
+    </div>
+  );
+}

src/app/news/page.tsx

@@ -4,7 +4,7 @@ import { ContentCard, EmptyState } from "@/components/public/ui";
 import { excerpt } from "@/lib/format";
 import { prisma } from "@/lib/prisma";
 
-export const dynamic = "force-dynamic";
+export const revalidate = 300;
 
 export const metadata = { title: "News" };
 

src/app/photos/page.tsx

@@ -3,7 +3,7 @@ import { ContentCard, EmptyState } from "@/components/public/ui";
 import { PhotoLightbox, type LightboxPhoto } from "@/components/public/photo-lightbox";
 import { prisma } from "@/lib/prisma";
 
-export const dynamic = "force-dynamic";
+export const revalidate = 300;
 
 export const metadata = { title: "Photos" };
 

src/app/radio/contests/[id]/page.tsx

@@ -3,7 +3,7 @@ import { notFound } from "next/navigation";
 import { ContentCard } from "@/components/public/ui";
 import { prisma } from "@/lib/prisma";
 
-export const dynamic = "force-dynamic";
+export const revalidate = 300;
 
 function formatDate(d: Date | null | undefined): string {
   return d ? d.toISOString().slice(0, 19).replace("T", " ") : "";

src/app/radio/contests/page.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 import { ContentCard, EmptyState } from "@/components/public/ui";
 import { prisma } from "@/lib/prisma";
 
-export const dynamic = "force-dynamic";
+export const revalidate = 300;
 
 function formatDate(d: Date | null | undefined): string {
   return d ? d.toISOString().slice(0, 10) : "";

src/app/radio/giveaways/[id]/page.tsx

@@ -3,7 +3,7 @@ import { notFound } from "next/navigation";
 import { ContentCard } from "@/components/public/ui";
 import { prisma } from "@/lib/prisma";
 
-export const dynamic = "force-dynamic";
+export const revalidate = 300;
 
 function formatDate(d: Date | null | undefined): string {
   return d ? d.toISOString().slice(0, 19).replace("T", " ") : "";

src/app/radio/giveaways/page.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 import { ContentCard, EmptyState } from "@/components/public/ui";
 import { prisma } from "@/lib/prisma";
 
-export const dynamic = "force-dynamic";
+export const revalidate = 300;
 
 function formatDate(d: Date | null | undefined): string {
   return d ? d.toISOString().slice(0, 10) : "";

src/app/radio/leaderboard/page.tsx

@@ -5,7 +5,7 @@ import { avatarImageUrl } from "@/lib/format";
 import { prisma } from "@/lib/prisma";
 import { siteSettings } from "@/lib/services/site-settings";
 
-export const dynamic = "force-dynamic";
+export const revalidate = 300;
 
 // The radio_listener_points table in the live AtomCMS DB carries user_id +
 // points columns, but the generated Prisma model is a stub (id/timestamps only),

src/app/radio/page.tsx

@@ -5,7 +5,7 @@ import { prisma } from "@/lib/prisma";
 import { siteSettings } from "@/lib/services/site-settings";
 
 // Radio config + today's schedule are read live from the DB / settings table.
-export const dynamic = "force-dynamic";
+export const revalidate = 300;
 
 // Canonical weekday order so today's slots come out chronologically and we can
 // match the current day against whatever casing the `day` column stores.

src/app/radio/schedule/page.tsx

@@ -2,7 +2,7 @@ import { getTranslations } from "next-intl/server";
 import { ContentCard, EmptyState } from "@/components/public/ui";
 import { prisma } from "@/lib/prisma";
 
-export const dynamic = "force-dynamic";
+export const revalidate = 300;
 
 // Weekly order so the table reads Monday → Sunday regardless of insert order.
 // The `day` column stores a free-form string; we key case-insensitively.

src/app/rankings/page.tsx

@@ -5,7 +5,7 @@ import { avatarImageUrl } from "@/lib/format";
 import { prisma } from "@/lib/prisma";
 import { siteSettings } from "@/lib/services/site-settings";
 
-export const dynamic = "force-dynamic";
+export const revalidate = 300;
 
 export const metadata = { title: "Rankings" };
 

src/app/rares/[category]/page.tsx

@@ -5,7 +5,7 @@ import { ContentCard, EmptyState } from "@/components/public/ui";
 import { prisma } from "@/lib/prisma";
 import { siteSettings } from "@/lib/services/site-settings";
 
-export const dynamic = "force-dynamic";
+export const revalidate = 300;
 
 type RareRow = {
   id: bigint;

src/app/rares/page.tsx

@@ -4,7 +4,7 @@ import { ContentCard, EmptyState } from "@/components/public/ui";
 import { prisma } from "@/lib/prisma";
 import { siteSettings } from "@/lib/services/site-settings";
 
-export const dynamic = "force-dynamic";
+export const revalidate = 300;
 
 export const metadata = { title: "Rare values" };
 

src/app/register/page.tsx

@@ -3,7 +3,7 @@ import { siteSettings } from "@/lib/services/site-settings";
 import { RegisterForm } from "@/components/auth/register-form";
 import { captchaConfig } from "@/lib/services/captcha";
 
-export const dynamic = "force-dynamic";
+export const revalidate = 300;
 
 export default async function RegisterPage({
   searchParams,

src/app/robots.ts

@@ -0,0 +1,9 @@
+import type { MetadataRoute } from "next";
+
+export default function robots(): MetadataRoute.Robots {
+  const appUrl = process.env.APP_URL ?? "http://localhost:3000";
+  return {
+    rules: { userAgent: "*", allow: "/", disallow: ["/admin/", "/api/", "/settings/", "/me/"] },
+    sitemap: `${appUrl}/sitemap.xml`,
+  };
+}

src/app/room/[id]/page.tsx

@@ -4,7 +4,7 @@ import { notFound } from "next/navigation";
 import { ContentCard, EmptyState, StatBlock } from "@/components/public/ui";
 import { prisma } from "@/lib/prisma";
 
-export const dynamic = "force-dynamic";
+export const revalidate = 300;
 
 // Arcturus stores room access as a short string on rooms.state. Map each known
 // value to a friendly label + lock icon; unknown values fall back to the raw

src/app/shop/page.tsx

@@ -4,7 +4,7 @@ import { ContentCard, EmptyState } from "@/components/public/ui";
 import { excerpt } from "@/lib/format";
 import { prisma } from "@/lib/prisma";
 
-export const dynamic = "force-dynamic";
+export const revalidate = 300;
 
 export const metadata = { title: "Shop" };
 

src/app/sitemap.ts

@@ -0,0 +1,56 @@
+import type { MetadataRoute } from "next";
+import { prisma } from "@/lib/prisma";
+
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+  const appUrl = process.env.APP_URL ?? "http://localhost:3000";
+
+  // Static pages
+  const staticPages = [
+    { url: appUrl, lastModified: new Date(), changeFrequency: "hourly" as const, priority: 1 },
+    { url: `${appUrl}/news`, lastModified: new Date(), changeFrequency: "hourly" as const, priority: 0.9 },
+    { url: `${appUrl}/community`, lastModified: new Date(), changeFrequency: "daily" as const, priority: 0.7 },
+    { url: `${appUrl}/shop`, lastModified: new Date(), changeFrequency: "daily" as const, priority: 0.8 },
+    { url: `${appUrl}/leaderboard`, lastModified: new Date(), changeFrequency: "daily" as const, priority: 0.6 },
+    { url: `${appUrl}/rankings`, lastModified: new Date(), changeFrequency: "daily" as const, priority: 0.6 },
+    { url: `${appUrl}/staff`, lastModified: new Date(), changeFrequency: "weekly" as const, priority: 0.5 },
+    { url: `${appUrl}/help`, lastModified: new Date(), changeFrequency: "weekly" as const, priority: 0.5 },
+    { url: `${appUrl}/badges`, lastModified: new Date(), changeFrequency: "weekly" as const, priority: 0.4 },
+    { url: `${appUrl}/radio`, lastModified: new Date(), changeFrequency: "daily" as const, priority: 0.7 },
+  ];
+
+  // News articles
+  let articles: { slug: string; updatedAt: Date | null }[] = [];
+  try {
+    articles = await prisma.websiteArticles.findMany({
+      select: { slug: true, updatedAt: true },
+      orderBy: { createdAt: "desc" },
+      take: 200,
+    });
+  } catch { /* empty */ }
+
+  const articlePages = articles.map((a) => ({
+    url: `${appUrl}/news/${a.slug}`,
+    lastModified: a.updatedAt ?? new Date(),
+    changeFrequency: "monthly" as const,
+    priority: 0.6,
+  }));
+
+  // Guilds
+  let guildIds: number[] = [];
+  try {
+    const rows = await prisma.guilds.findMany({
+      select: { id: true },
+      take: 200,
+    });
+    guildIds = rows.map((r) => Number(r.id));
+  } catch { /* empty */ }
+
+  const guildPages = guildIds.map((id) => ({
+    url: `${appUrl}/guilds/${id}`,
+    lastModified: new Date(),
+    changeFrequency: "daily" as const,
+    priority: 0.5,
+  }));
+
+  return [...staticPages, ...articlePages, ...guildPages];
+}

src/app/staff/page.tsx

@@ -4,7 +4,7 @@ import { ContentCard, EmptyState } from "@/components/public/ui";
 import { prisma } from "@/lib/prisma";
 import { siteSettings } from "@/lib/services/site-settings";
 
-export const dynamic = "force-dynamic";
+export const revalidate = 300;
 
 export const metadata = { title: "Staff" };
 

src/components/mobile-nav.tsx

@@ -2,7 +2,14 @@
 
 import { useState } from "react";
 
-export function MobileNav({ children }: { children: React.ReactNode }) {
+interface MobileNavProps {
+  children: React.ReactNode;
+  /** Accessible label for the menu button. Pass translated string from server. */
+  menuLabel?: string;
+  closeLabel?: string;
+}
+
+export function MobileNav({ children, menuLabel = "Open menu", closeLabel = "Close menu" }: MobileNavProps) {
   const [open, setOpen] = useState(false);
 
   return (
@@ -12,7 +19,9 @@ export function MobileNav({ children }: { children: React.ReactNode }) {
         onClick={() => setOpen(!open)}
         className="flex md:hidden items-center justify-center w-10 h-10 rounded-lg transition-colors duration-150"
         style={{ color: "var(--color-navbar-text)" }}
-        aria-label={open ? "Sluit menu" : "Open menu"}
+        aria-expanded={open}
+        aria-controls="mobile-menu"
+        aria-label={open ? closeLabel : menuLabel}
       >
         <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
           {open ? (
@@ -43,6 +52,8 @@ export function MobileNav({ children }: { children: React.ReactNode }) {
       )}
 
       <div
+        id="mobile-menu"
+        role="menu"
         className={`${open ? "max-h-[80vh] opacity-100" : "max-h-0 opacity-0 pointer-events-none md:pointer-events-auto"} overflow-hidden transition-all duration-300 ease-in-out md:!max-h-none md:!opacity-100 md:!overflow-visible md:flex md:items-center md:gap-x-1 w-full md:w-auto`}
         style={{ backgroundColor: "var(--color-navbar)" }}
       >

src/components/nav-dropdown.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { useState, useRef, useEffect, type ReactNode } from "react";
+
+interface NavDropdownProps {
+  label: string;
+  icon?: string;
+  children: ReactNode;
+}
+
+export function NavDropdown({ label, icon, children }: NavDropdownProps) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    }
+    function handleKey(e: KeyboardEvent) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    if (open) {
+      document.addEventListener("mousedown", handleClick);
+      document.addEventListener("keydown", handleKey);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+      document.removeEventListener("keydown", handleKey);
+    };
+  }, [open]);
+
+  return (
+    <div ref={ref} className="relative group md:flex">
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") setOpen(!open); }}
+        className="nav-item cursor-pointer"
+        aria-expanded={open}
+        aria-haspopup="true"
+      >
+        {icon ? <img src={icon} alt="" className="w-5 h-5 mr-1.5" /> : null}
+        {label}
+        <svg className={`ml-auto md:ml-1 w-3 h-3 transition-transform duration-200 ${open ? "rotate-180" : ""}`} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
+      </button>
+      {open && (
+        <div className="dropdown-menu md:absolute left-0 top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2" role="menu">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/navigation.tsx

@@ -3,6 +3,7 @@ import Link from "next/link";
 import { auth } from "@/lib/auth";
 import { LanguageSwitcher } from "@/components/language-switcher";
 import { MobileNav } from "@/components/mobile-nav";
+import { NavDropdown } from "@/components/nav-dropdown";
 import { NavbarColorPicker } from "@/components/navbar-color-picker";
 import { ThemeSwitcher } from "@/components/theme-switcher";
 
@@ -24,65 +25,44 @@ export async function Navigation() {
           </Link>
         </div>
 
-        <MobileNav>
-          <Link href="/" className="nav-item md:hidden">
+        <MobileNav menuLabel={t("openMenu") || "Open menu"} closeLabel={t("closeMenu") || "Close menu"}>
+          <Link href="/" className="nav-item md:hidden" role="menuitem">
             <img src="/assets/images/icons/navigation/me.png" alt="" className="w-5 h-5 mr-1.5" />
             {t("home")}
           </Link>
 
-          <details className="relative group md:flex">
-            <summary className="nav-item list-none cursor-pointer [&::-webkit-details-marker]:hidden">
-              <img src="/assets/images/icons/navigation/community.png" alt="" className="w-5 h-5 mr-1.5" />
-              {t("community")}
-              <svg className="ml-auto md:ml-1 w-3 h-3 transition-transform duration-200 group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
-            </summary>
-            <div className="dropdown-menu md:absolute left-0 top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2">
-              <Link href="/news" className="dropdown-item">{t("articles")}</Link>
-              <Link href="/photos" className="dropdown-item">{t("photos")}</Link>
-              <Link href="/staff" className="dropdown-item">{t("staff")}</Link>
-              <Link href="/rankings" className="dropdown-item">{t("rankings")}</Link>
-              <Link href="/guilds" className="dropdown-item">{t("guilds")}</Link>
-            </div>
-          </details>
+          <NavDropdown label={t("community")} icon="/assets/images/icons/navigation/community.png">
+            <Link href="/news" className="dropdown-item" role="menuitem">{t("articles")}</Link>
+            <Link href="/photos" className="dropdown-item" role="menuitem">{t("photos")}</Link>
+            <Link href="/staff" className="dropdown-item" role="menuitem">{t("staff")}</Link>
+            <Link href="/rankings" className="dropdown-item" role="menuitem">{t("rankings")}</Link>
+            <Link href="/guilds" className="dropdown-item" role="menuitem">{t("guilds")}</Link>
+          </NavDropdown>
 
-          <details className="relative group md:flex">
-            <summary className="nav-item list-none cursor-pointer [&::-webkit-details-marker]:hidden">
-              <img src="/assets/images/icons/navigation/shop.png" alt="" className="w-5 h-5 mr-1.5" />
-              {t("shop")}
-              <svg className="ml-auto md:ml-1 w-3 h-3 transition-transform duration-200 group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
-            </summary>
-            <div className="dropdown-menu md:absolute left-0 top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2">
-              <Link href="/shop" className="dropdown-item">{t("shop")}</Link>
-              <Link href="/marketplace" className="dropdown-item">{t("market")}</Link>
-              <Link href="/rares" className="dropdown-item">{t("rareValues")}</Link>
-            </div>
-          </details>
+          <NavDropdown label={t("shop")} icon="/assets/images/icons/navigation/shop.png">
+            <Link href="/shop" className="dropdown-item" role="menuitem">{t("shop")}</Link>
+            <Link href="/marketplace" className="dropdown-item" role="menuitem">{t("market")}</Link>
+            <Link href="/rares" className="dropdown-item" role="menuitem">{t("rareValues")}</Link>
+          </NavDropdown>
 
-          <Link href="/leaderboard" className="nav-item">
+          <Link href="/leaderboard" className="nav-item" role="menuitem">
             <img src="/assets/images/icons/navigation/leaderboards.png" alt="" className="w-5 h-5 mr-1.5" />
             {t("leaderboards")}
           </Link>
 
-          <Link href="/radio" className="nav-item">
+          <Link href="/radio" className="nav-item" role="menuitem">
             <img src="/assets/images/icons/navigation/bb.png" alt="" className="w-5 h-5 mr-1.5" />
             {t("radio")}
           </Link>
 
-          <details className="relative group md:flex">
-            <summary className="nav-item list-none cursor-pointer [&::-webkit-details-marker]:hidden">
-              <img src="/assets/images/icons/navigation/rules.gif" alt="" className="w-5 h-5 mr-1.5" />
-              {t("assistance")}
-              <svg className="ml-auto md:ml-1 w-3 h-3 transition-transform duration-200 group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
-            </summary>
-            <div className="dropdown-menu md:absolute left-0 top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2">
-              <Link href="/help" className="dropdown-item">{t("helpCenter")}</Link>
-              {session?.user ? (
-                <Link href="/help/tickets" className="dropdown-item">{t("myTickets")}</Link>
-              ) : null}
-              <Link href="/badges" className="dropdown-item">{t("badges")}</Link>
-              <Link href="/draw-badge" className="dropdown-item">{t("drawBadge")}</Link>
-            </div>
-          </details>
+          <NavDropdown label={t("assistance")} icon="/assets/images/icons/navigation/rules.gif">
+            <Link href="/help" className="dropdown-item" role="menuitem">{t("helpCenter")}</Link>
+            {session?.user ? (
+              <Link href="/help/tickets" className="dropdown-item" role="menuitem">{t("myTickets")}</Link>
+            ) : null}
+            <Link href="/badges" className="dropdown-item" role="menuitem">{t("badges")}</Link>
+            <Link href="/draw-badge" className="dropdown-item" role="menuitem">{t("drawBadge")}</Link>
+          </NavDropdown>
 
           {session?.user ? (
             <>

src/lib/services/moderation.ts

@@ -25,14 +25,16 @@ const OPENAI_MODERATIONS_URL = "https://api.openai.com/v1/moderations";
 const OPENAI_TIMEOUT_MS = 5_000;
 
 /**
- * In-process cache of the lowercased website_wordfilter words. Mirrors the
- * caching strategy in site-settings.ts: populated on first use, kept until
- * reloadWordFilter() is called after an admin edits the list.
+ * In-process cache of the lowercased website_wordfilter words. Auto-refreshes
+ * after WORD_FILTER_TTL_MS to pick up admin edits without manual cache bust.
  */
 let wordFilterCache: string[] | null = null;
+let wordFilterLoadedAt = 0;
+const WORD_FILTER_TTL_MS = 60_000;
 
 async function loadWordFilter(): Promise<string[]> {
-  if (wordFilterCache === null) {
+  const now = Date.now();
+  if (wordFilterCache === null || now - wordFilterLoadedAt > WORD_FILTER_TTL_MS) {
     try {
       const rows = await prisma.websiteWordfilter.findMany({
         select: { word: true },
@@ -40,6 +42,7 @@ async function loadWordFilter(): Promise<string[]> {
       wordFilterCache = rows
         .map((r) => r.word.trim().toLowerCase())
         .filter((w) => w.length > 0);
+      wordFilterLoadedAt = now;
     } catch {
       // DB unavailable — return an empty filter WITHOUT caching, so the next
       // call retries. Fail-open: a missing blocklist must not block content.

src/messages/de.json

@@ -19,6 +19,8 @@
     "friends": "Freunde",
     "messages": "Nachrichten",
     "admin": "Admin",
+    "openMenu": "Open menu",
+    "closeMenu": "Close menu",
     "drawBadge": "Abzeichen zeichnen"
   },
   "header": {

src/messages/en.json

@@ -19,7 +19,11 @@
     "friends": "Friends",
     "messages": "Messages",
     "admin": "Admin",
-    "drawBadge": "Draw badge"
+    "openMenu": "Open menu",
+    "closeMenu": "Close menu",
+    "drawBadge": "Draw badge",
+    "openMenu": "Open menu",
+    "closeMenu": "Close menu"
   },
   "header": {
     "online": "{count} {hotel} online",

src/messages/es.json

@@ -19,6 +19,8 @@
     "friends": "Amigos",
     "messages": "Mensajes",
     "admin": "Admin",
+    "openMenu": "Open menu",
+    "closeMenu": "Close menu",
     "drawBadge": "Diseñar insignia"
   },
   "header": {

src/messages/fr.json

@@ -19,6 +19,8 @@
     "friends": "Amis",
     "messages": "Messages",
     "admin": "Admin",
+    "openMenu": "Open menu",
+    "closeMenu": "Close menu",
     "drawBadge": "Dessiner un badge"
   },
   "header": {

src/messages/it.json

@@ -19,6 +19,8 @@
     "friends": "Amici",
     "messages": "Messaggi",
     "admin": "Admin",
+    "openMenu": "Open menu",
+    "closeMenu": "Close menu",
     "drawBadge": "Crea distintivo"
   },
   "header": {

src/messages/nl.json

@@ -19,6 +19,8 @@
     "friends": "Vrienden",
     "messages": "Berichten",
     "admin": "Admin",
+    "openMenu": "Menu openen",
+    "closeMenu": "Menu sluiten",
     "drawBadge": "Badge tekenen"
   },
   "header": {