Add dark mode, i18n, messenger/moderation/verify, admin CRUD parity

Web-tier features completing the AtomCMS→Next.js conversion (slice 2):

UI/UX:
- Dark mode: html.dark CSS-var overrides + ThemeSwitcher (localStorage,
  no-flash boot script) wired into the nav.
- i18n (next-intl, cookie-based / no URL routing): en + it catalogs,
  request.ts, provider in root layout, LanguageSwitcher; shell (nav,
  header, footer) fully translated. URLs + access-guard unchanged.
- globals.css: --muted/--border aliases used across admin pages.

User features:
- /messages: offline messages + friend-request accept (server action
  re-reads session, two directional rows, idempotent).
- Email verification: signed-token /verify route + sendVerification wired
  into register (best-effort, never blocks signup).
- Article reactions: toggle UI on news/[slug] + server action.
- Content moderation service (website_wordfilter + optional OpenAI
  moderations, fail-open) wired into article comments + guestbook.

Admin CRUD parity (Filament replacement):
- /admin/shop (+ new/[id]) packages CRUD + read-only orders.
- /admin/transactions read-only PayPal log.
- /admin/permissions, /admin/tags, /admin/ads (+ new/[id]),
  /admin/help-questions (+ new/[id]), /admin/radio/history,
  /admin/users/[id]/edit. All gated by requireStaff + logStaffActivity.

Verified: tsc 0, vitest 48/48, next build 0 (all routes incl. new
admin CRUD + /messages + /verify).

src/app/admin/shop/page.tsx

@@ -0,0 +1,105 @@
+import Link from "next/link";
+import { prisma } from "@/lib/prisma";
+
+export const dynamic = "force-dynamic";
+
+export default async function AdminShop() {
+  let packages: Awaited<ReturnType<typeof prisma.websiteShopArticles.findMany>> = [];
+  try {
+    packages = await prisma.websiteShopArticles.findMany({
+      orderBy: [{ position: "asc" }, { name: "asc" }],
+      take: 500,
+    });
+  } catch {
+    packages = [];
+  }
+
+  let orders: Awaited<ReturnType<typeof prisma.websitePaypalTransactions.findMany>> = [];
+  try {
+    orders = await prisma.websitePaypalTransactions.findMany({
+      orderBy: { createdAt: "desc" },
+      take: 50,
+    });
+  } catch {
+    orders = [];
+  }
+
+  return (
+    <main>
+      <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
+        <h1 style={{ flex: 1 }}>Shop</h1>
+        <Link href="/admin/shop/new">+ New package</Link>
+      </div>
+      <p className="muted">
+        Website store packages (<code>website_shop_articles</code>). <code>costs</code> is the price
+        shown in the store; credits/duckets/diamonds/badges are what the buyer receives.
+      </p>
+
+      <table style={{ width: "100%", borderCollapse: "collapse" }}>
+        <thead>
+          <tr style={{ textAlign: "left", color: "var(--muted)" }}>
+            <th>#</th>
+            <th>Name</th>
+            <th>Costs</th>
+            <th>Credits</th>
+            <th>Duckets</th>
+            <th>Diamonds</th>
+            <th>Rank</th>
+            <th>Position</th>
+          </tr>
+        </thead>
+        <tbody>
+          {packages.map((p) => (
+            <tr key={String(p.id)} style={{ borderTop: "1px solid var(--border)" }}>
+              <td className="muted">{String(p.id)}</td>
+              <td>
+                <Link href={`/admin/shop/${p.id}`}>{p.name}</Link>
+              </td>
+              <td>{p.costs}</td>
+              <td className="muted">{p.credits ?? ""}</td>
+              <td className="muted">{p.duckets ?? ""}</td>
+              <td className="muted">{p.diamonds ?? ""}</td>
+              <td className="muted">{p.giveRank ?? ""}</td>
+              <td className="muted">{p.position}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      {packages.length === 0 ? <p className="muted">No shop packages yet.</p> : null}
+
+      <h2 style={{ marginTop: "2rem" }}>Recent orders</h2>
+      <p className="muted">
+        Read-only PayPal transaction log (<code>website_paypal_transactions</code>).
+      </p>
+      <table style={{ width: "100%", borderCollapse: "collapse" }}>
+        <thead>
+          <tr style={{ textAlign: "left", color: "var(--muted)" }}>
+            <th>Transaction</th>
+            <th>User</th>
+            <th>Description</th>
+            <th>Amount</th>
+            <th>Status</th>
+            <th>Date</th>
+          </tr>
+        </thead>
+        <tbody>
+          {orders.map((o) => (
+            <tr key={String(o.id)} style={{ borderTop: "1px solid var(--border)" }}>
+              <td>
+                <code>{o.transactionId}</code>
+              </td>
+              <td className="muted">{o.userId}</td>
+              <td className="muted">{o.description ?? ""}</td>
+              <td>
+                {o.amount} {o.currency}
+              </td>
+              <td className="muted">{o.status ?? ""}</td>
+              <td className="muted">{o.createdAt ? o.createdAt.toISOString().slice(0, 10) : ""}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      {orders.length === 0 ? <p className="muted">No orders recorded.</p> : null}
+    </main>
+  );
+}