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>
+  );
+}

src/components/public/logo-generator.tsx

@@ -0,0 +1,242 @@
+"use client";
+
+import { useCallback, useMemo, useRef, useState } from "react";
+import { ContentCard } from "@/components/public/ui";
+
+/**
+ * Client-side logo generator. Lets the visitor type a hotel name, pick a fun
+ * font stack, text + (optional) background colour, and a size, with a live
+ * preview. "Download PNG" paints the styled text onto an offscreen <canvas>
+ * and triggers a download via canvas.toBlob -> object URL -> <a download>.
+ *
+ * Pure browser code — no server modules (prisma/siteSettings) are imported.
+ */
+
+type FontOption = { label: string; stack: string };
+
+// ~6 fun, broadly-available stacks (web-safe + a Google-ish first pick).
+const FONTS: FontOption[] = [
+  { label: "Poppins (rounded)", stack: "'Poppins', 'Trebuchet MS', sans-serif" },
+  { label: "Comic Sans (playful)", stack: "'Comic Sans MS', 'Comic Sans', cursive" },
+  { label: "Georgia (classic serif)", stack: "Georgia, 'Times New Roman', serif" },
+  { label: "Impact (bold poster)", stack: "Impact, 'Haettenschweiler', sans-serif" },
+  { label: "Trebuchet (clean)", stack: "'Trebuchet MS', Tahoma, sans-serif" },
+  { label: "Monospace (retro)", stack: "'Courier New', monospace" },
+];
+
+const MIN_SIZE = 16;
+const MAX_SIZE = 160;
+
+export default function LogoGenerator() {
+  const [text, setText] = useState("Atom");
+  const [fontStack, setFontStack] = useState(FONTS[0]!.stack);
+  const [textColor, setTextColor] = useState("#f59e0b");
+  const [bgEnabled, setBgEnabled] = useState(false);
+  const [bgColor, setBgColor] = useState("#0f172a");
+  const [size, setSize] = useState(72);
+  const [bold, setBold] = useState(true);
+
+  const linkRef = useRef<HTMLAnchorElement | null>(null);
+
+  const safeText = text.trim().length > 0 ? text : "Your hotel";
+  const fontWeight = bold ? "bold" : "normal";
+
+  // Inline style for the live preview text, mirroring what the canvas will draw.
+  const previewTextStyle = useMemo<React.CSSProperties>(
+    () => ({
+      fontFamily: fontStack,
+      fontSize: `${size}px`,
+      fontWeight,
+      color: textColor,
+      lineHeight: 1.1,
+      margin: 0,
+      padding: "0.1em 0.15em",
+      whiteSpace: "nowrap",
+      letterSpacing: "0.5px",
+    }),
+    [fontStack, size, fontWeight, textColor],
+  );
+
+  const handleDownload = useCallback(() => {
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    const fontSpec = `${fontWeight} ${size}px ${fontStack}`;
+    // Measure with the chosen font so the canvas fits the text snugly.
+    ctx.font = fontSpec;
+    const metrics = ctx.measureText(safeText);
+    const padX = Math.round(size * 0.4);
+    const padY = Math.round(size * 0.45);
+    const textWidth = Math.max(1, Math.ceil(metrics.width));
+    const width = textWidth + padX * 2;
+    const height = Math.ceil(size * 1.35) + padY * 2;
+
+    // Render crisply on high-DPI screens, then keep CSS-pixel coordinates below.
+    const dpr = Math.min(typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1, 3);
+    canvas.width = Math.round(width * dpr);
+    canvas.height = Math.round(height * dpr);
+    ctx.scale(dpr, dpr);
+
+    if (bgEnabled) {
+      ctx.fillStyle = bgColor;
+      ctx.fillRect(0, 0, width, height);
+    }
+    // else: leave transparent (the default for a fresh canvas).
+
+    ctx.font = fontSpec;
+    ctx.fillStyle = textColor;
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillText(safeText, width / 2, height / 2);
+
+    const fileBase =
+      safeText
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "") || "logo";
+
+    canvas.toBlob((blob) => {
+      if (!blob) return;
+      const url = URL.createObjectURL(blob);
+      const a = linkRef.current ?? document.createElement("a");
+      a.href = url;
+      a.download = `${fileBase}-logo.png`;
+      a.click();
+      // Release the object URL once the download has been kicked off.
+      setTimeout(() => URL.revokeObjectURL(url), 1000);
+    }, "image/png");
+  }, [bgColor, bgEnabled, fontStack, fontWeight, safeText, size, textColor]);
+
+  return (
+    <div className="card-grid md-2" style={{ alignItems: "start" }}>
+      {/* ── Controls ──────────────────────────────── */}
+      <ContentCard icon="⚙️" title="Design" subtitle="Tweak the look of your logo.">
+        <div style={{ display: "grid", gap: "1rem" }}>
+          <label style={{ display: "grid", gap: "0.3rem" }}>
+            <span style={{ fontWeight: 700, fontSize: "0.85rem" }}>Hotel name</span>
+            <input
+              type="text"
+              value={text}
+              onChange={(e) => setText(e.target.value)}
+              placeholder="Your hotel"
+              maxLength={40}
+            />
+          </label>
+
+          <label style={{ display: "grid", gap: "0.3rem" }}>
+            <span style={{ fontWeight: 700, fontSize: "0.85rem" }}>Font</span>
+            <select value={fontStack} onChange={(e) => setFontStack(e.target.value)}>
+              {FONTS.map((f) => (
+                <option key={f.label} value={f.stack}>
+                  {f.label}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <div style={{ display: "flex", gap: "1rem", flexWrap: "wrap" }}>
+            <label style={{ display: "grid", gap: "0.3rem" }}>
+              <span style={{ fontWeight: 700, fontSize: "0.85rem" }}>Text colour</span>
+              <span style={{ display: "inline-flex", alignItems: "center", gap: "0.5rem" }}>
+                <input
+                  type="color"
+                  value={textColor}
+                  onChange={(e) => setTextColor(e.target.value)}
+                  style={{ width: 44, height: 38, padding: 2 }}
+                  aria-label="Text colour"
+                />
+                <code className="muted" style={{ fontSize: "0.78rem" }}>
+                  {textColor}
+                </code>
+              </span>
+            </label>
+
+            <label style={{ display: "grid", gap: "0.3rem" }}>
+              <span style={{ fontWeight: 700, fontSize: "0.85rem" }}>Background</span>
+              <span style={{ display: "inline-flex", alignItems: "center", gap: "0.5rem" }}>
+                <input
+                  type="checkbox"
+                  checked={bgEnabled}
+                  onChange={(e) => setBgEnabled(e.target.checked)}
+                  style={{ width: "auto" }}
+                  aria-label="Enable background colour"
+                />
+                <input
+                  type="color"
+                  value={bgColor}
+                  onChange={(e) => setBgColor(e.target.value)}
+                  disabled={!bgEnabled}
+                  style={{ width: 44, height: 38, padding: 2, opacity: bgEnabled ? 1 : 0.4 }}
+                  aria-label="Background colour"
+                />
+                <code className="muted" style={{ fontSize: "0.78rem" }}>
+                  {bgEnabled ? bgColor : "transparent"}
+                </code>
+              </span>
+            </label>
+          </div>
+
+          <label style={{ display: "grid", gap: "0.3rem" }}>
+            <span style={{ fontWeight: 700, fontSize: "0.85rem" }}>
+              Size — <span className="muted">{size}px</span>
+            </span>
+            <input
+              type="range"
+              min={MIN_SIZE}
+              max={MAX_SIZE}
+              step={1}
+              value={size}
+              onChange={(e) => setSize(Number(e.target.value))}
+              style={{ width: "100%", padding: 0 }}
+            />
+          </label>
+
+          <label style={{ display: "inline-flex", alignItems: "center", gap: "0.5rem" }}>
+            <input
+              type="checkbox"
+              checked={bold}
+              onChange={(e) => setBold(e.target.checked)}
+              style={{ width: "auto" }}
+            />
+            <span style={{ fontWeight: 700, fontSize: "0.85rem" }}>Bold</span>
+          </label>
+
+          <button type="button" className="btn btn-primary" onClick={handleDownload}>
+            ⬇️ Download PNG
+          </button>
+          {/* Reused, hidden anchor used to trigger the file download. */}
+          <a ref={linkRef} style={{ display: "none" }} aria-hidden href="/">
+            download
+          </a>
+        </div>
+      </ContentCard>
+
+      {/* ── Live preview ──────────────────────────── */}
+      <ContentCard icon="👁️" title="Preview" subtitle="Live, exactly as it will export.">
+        <div
+          style={{
+            display: "grid",
+            placeItems: "center",
+            minHeight: 220,
+            padding: "1.25rem",
+            borderRadius: "12px",
+            border: "1px dashed color-mix(in srgb, var(--color-text-muted) 30%, transparent)",
+            overflow: "auto",
+            // Checkerboard so a transparent (no-background) logo is obvious.
+            background: bgEnabled
+              ? bgColor
+              : "repeating-conic-gradient(color-mix(in srgb, var(--color-text-muted) 14%, transparent) 0% 25%, transparent 0% 50%) 50% / 22px 22px",
+          }}
+        >
+          <p style={previewTextStyle}>{safeText}</p>
+        </div>
+        <p className="muted" style={{ marginBottom: 0, marginTop: "0.85rem" }}>
+          Everything runs in your browser — nothing is uploaded. The PNG keeps a
+          {" "}
+          transparent background unless you enable one.
+        </p>
+      </ContentCard>
+    </div>
+  );
+}