UI gaps: radio player widget, logo generator, public room page

Phase D of the parity push:
- Radio player: fixed bottom-right widget (port of atom's radio-player.blade)
  that streams the hotel radio via <audio>, with play/pause, volume, current
  DJ / now-playing and live listener count, polling the public API every 15s.
  A server gate (RadioPlayerGate) only mounts it when radio is enabled + a
  stream URL is set, so no widget JS ships when off. Mounted in the layout.
- Logo generator (/logo): client tool — hotel name + font/colour/size pickers
  with a live preview and "download PNG" via canvas.
- Public room page (/room/[id]): renders an emulator room (name, owner,
  users/max, state, category) in a ContentCard.

Verified live (prod, amx_test): /logo renders the generator, /room/50 shows
the real room "Dark Elegant Bundle", and with radio enabled the player
mounts fixed bottom-right (audio + play/pause + Test FM); reverted the test
settings. tsc 0, vitest 49/49, next build 0.

src/app/layout.tsx

@@ -4,6 +4,7 @@ import { getLocale, getMessages } from "next-intl/server";
 import { Nunito } from "next/font/google";
 import type { ReactNode } from "react";
 import { Navigation } from "@/components/navigation";
+import RadioPlayerGate from "@/components/public/radio-player-gate";
 import { SiteFooter } from "@/components/site-footer";
 import { SiteHeader } from "@/components/site-header";
 import { ThemeVars } from "@/components/theme-vars";
@@ -57,6 +58,7 @@ export default async function RootLayout({ children }: { children: ReactNode })
             </div>
           </main>
           <SiteFooter />
+          <RadioPlayerGate />
         </NextIntlClientProvider>
       </body>
     </html>

src/app/logo/page.tsx

@@ -0,0 +1,24 @@
+import { ContentCard } from "@/components/public/ui";
+import LogoGenerator from "@/components/public/logo-generator";
+
+export const metadata = { title: "Logo generator" };
+
+/**
+ * Public logo generator (AtomCMS logo-generator.blade). Server wrapper that
+ * renders the atom-styled ContentCard header and hands off to the fully
+ * client-side <LogoGenerator>, which does all styling, live preview, and PNG
+ * export in the browser (no server data, no DB).
+ */
+export default function LogoPage() {
+  return (
+    <main style={{ display: "grid", gap: "1.5rem", maxWidth: 920, margin: "0 auto" }}>
+      <ContentCard
+        icon="🎨"
+        title="Logo generator"
+        subtitle="Design a logo for your hotel — pick a font, colours and size, then download it as a PNG."
+      />
+
+      <LogoGenerator />
+    </main>
+  );
+}

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

@@ -0,0 +1,158 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { ContentCard, EmptyState, StatBlock } from "@/components/public/ui";
+import { prisma } from "@/lib/prisma";
+
+export const dynamic = "force-dynamic";
+
+// 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
+// string so we never hide a real (future) state from the visitor.
+const STATE_LABELS: Record<string, { label: string; icon: string }> = {
+  open: { label: "Open", icon: "🔓" },
+  locked: { label: "Locked (doorbell)", icon: "🔒" },
+  password: { label: "Password", icon: "🔑" },
+  invisible: { label: "Invisible", icon: "👻" },
+};
+
+function describeState(state: string): { label: string; icon: string } {
+  return STATE_LABELS[state] ?? { label: state || "Unknown", icon: "🚪" };
+}
+
+/** Parse a route id to a positive integer, or null when it isn't numeric. */
+function parseRoomId(raw: string): number | null {
+  if (!/^\d+$/.test(raw)) return null;
+  const id = Number(raw);
+  return Number.isSafeInteger(id) && id > 0 ? id : null;
+}
+
+async function getRoom(raw: string) {
+  const id = parseRoomId(raw);
+  if (id === null) return null;
+  return prisma.rooms
+    .findUnique({
+      where: { id },
+      select: {
+        id: true,
+        ownerId: true,
+        ownerName: true,
+        name: true,
+        description: true,
+        state: true,
+        users: true,
+        usersMax: true,
+        category: true,
+        score: true,
+        tags: true,
+      },
+    })
+    .catch(() => null);
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}): Promise<Metadata> {
+  const { id } = await params;
+  const room = await getRoom(id);
+  if (!room) return { title: "Room" };
+  return {
+    title: room.name || `Room #${room.id}`,
+    description: room.description || `Visit ${room.name || "this room"} in the hotel.`,
+  };
+}
+
+export default async function RoomPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+
+  // Guard non-numeric / absent ids before touching the DB.
+  if (parseRoomId(id) === null) notFound();
+
+  const room = await getRoom(id);
+  if (!room) notFound();
+
+  // Resolve the live owner username by id; fall back to the room's denormalised
+  // owner_name column if the account row is missing or the query degrades.
+  const owner =
+    room.ownerId > 0
+      ? await prisma.user
+          .findUnique({ where: { id: room.ownerId }, select: { username: true } })
+          .catch(() => null)
+      : null;
+  const ownerName = owner?.username || room.ownerName || "Unknown";
+
+  const state = describeState(room.state);
+  const tags = room.tags
+    .split(/[,;\s]+/)
+    .map((t) => t.trim())
+    .filter(Boolean);
+
+  return (
+    <main style={{ display: "grid", gap: "1.5rem" }}>
+      <p style={{ margin: 0 }}>
+        <Link href="/" className="btn btn-outline">
+          ← Back to the hotel
+        </Link>
+      </p>
+
+      <ContentCard
+        icon="🚪"
+        title={room.name || `Room #${room.id}`}
+        subtitle={
+          <>
+            Owned by{" "}
+            <Link href={`/u/${encodeURIComponent(ownerName)}`}>{ownerName}</Link>
+          </>
+        }
+      >
+        {room.description ? (
+          <p style={{ margin: "0 0 1rem" }}>{room.description}</p>
+        ) : (
+          <p className="muted" style={{ margin: "0 0 1rem" }}>
+            This room has no description.
+          </p>
+        )}
+
+        <div className="stat-grid">
+          <StatBlock
+            icon="👥"
+            value={`${room.users.toLocaleString()} / ${room.usersMax.toLocaleString()}`}
+            label="Users"
+          />
+          <StatBlock icon={state.icon} value={state.label} label="Access" />
+          <StatBlock icon="⭐" value={room.score.toLocaleString()} label="Rating" />
+          <StatBlock icon="🏷️" value={`#${room.category}`} label="Category" />
+        </div>
+
+        {tags.length > 0 ? (
+          <div
+            style={{
+              display: "flex",
+              flexWrap: "wrap",
+              gap: "0.5rem",
+              marginTop: "1rem",
+            }}
+          >
+            {tags.map((tag) => (
+              <span key={tag} className="online-badge">
+                #{tag}
+              </span>
+            ))}
+          </div>
+        ) : null}
+      </ContentCard>
+
+      <ContentCard icon="ℹ️" title="About this room">
+        <EmptyState icon="🎮">
+          Enter the hotel to visit {room.name || `room #${room.id}`} in 3D.
+        </EmptyState>
+      </ContentCard>
+    </main>
+  );
+}