feat: refactor play area into sidebar layout with buttplug, recordings, and leaderboard sub-pages

- Add /play sidebar layout (mobile nav + desktop sidebar) with SexyBackground - Move buttplug device control to /play/buttplug with Empty component and scan button - Move recordings from /me/recordings to /play/recordings - Move leaderboard to /play/leaderboard; redirect /leaderboard → /play/leaderboard - Redirect /me/recordings → /play/recordings and /play → /play/buttplug - Remove recordings entry from /me sidebar nav - Rename "SexyPlay" → "Play", swap bluetooth icon for rocket, remove subtitle - Add play.nav i18n keys (play, recordings, leaderboard, back_to_site, back_mobile) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-09 19:33:28 +01:00
parent 66179d7ba8
commit a9e4ed6049
14 changed files with 738 additions and 364 deletions
--- a/packages/frontend/src/lib/i18n/locales/en.ts
+++ b/packages/frontend/src/lib/i18n/locales/en.ts
@@ -822,11 +822,19 @@ export default {
    questions_email: "support@pivoine.art",
  },
  play: {
-    title: "SexyPlay",
+    title: "Play",
    description: "Bring your toys.",
    scan: "Start Scan",
    scanning: "Scanning...",
-    no_results: "No Devices founds",
+    no_results: "No devices found",
+    no_results_description: "Start a scan to discover nearby Bluetooth devices",
+    nav: {
+      play: "Play",
+      recordings: "Recordings",
+      leaderboard: "Leaderboard",
+      back_to_site: "Back to site",
+      back_mobile: "Site",
+    },
  },
  error: {
    not_found: "Oops! Page Not Found",
--- a/packages/frontend/src/routes/leaderboard/+page.server.ts
+++ b/packages/frontend/src/routes/leaderboard/+page.server.ts
@@ -1,66 +1,5 @@
 import { redirect } from "@sveltejs/kit";
-import type { PageServerLoad } from "./$types";
-import { gql } from "graphql-request";
-import { getGraphQLClient } from "$lib/api";

-const LEADERBOARD_QUERY = gql`
-  query Leaderboard($limit: Int, $offset: Int) {
-    leaderboard(limit: $limit, offset: $offset) {
-      user_id
-      display_name
-      avatar
-      total_weighted_points
-      total_raw_points
-      recordings_count
-      playbacks_count
-      achievements_count
-      rank
-    }
-  }
-`;
-
-export const load: PageServerLoad = async ({ fetch, url, locals }) => {
-  // Guard: Redirect to login if not authenticated
-  if (!locals.authStatus.authenticated) {
-    throw redirect(302, "/login");
-  }
-
-  try {
-    const limit = parseInt(url.searchParams.get("limit") || "100");
-    const offset = parseInt(url.searchParams.get("offset") || "0");
-
-    const client = getGraphQLClient(fetch);
-    const data = await client.request<{
-      leaderboard: {
-        user_id: string;
-        display_name: string | null;
-        avatar: string | null;
-        total_weighted_points: number | null;
-        total_raw_points: number | null;
-        recordings_count: number | null;
-        playbacks_count: number | null;
-        achievements_count: number | null;
-        rank: number;
-      }[];
-    }>(LEADERBOARD_QUERY, { limit, offset });
-
-    return {
-      leaderboard: data.leaderboard || [],
-      pagination: {
-        limit,
-        offset,
-        hasMore: data.leaderboard?.length === limit,
-      },
-    };
-  } catch (error) {
-    console.error("Leaderboard load error:", error);
-    return {
-      leaderboard: [],
-      pagination: {
-        limit: 100,
-        offset: 0,
-        hasMore: false,
-      },
-    };
-  }
-};
+export function load() {
+  throw redirect(301, "/play/leaderboard");
+}
--- a/packages/frontend/src/routes/me/+layout.svelte
+++ b/packages/frontend/src/routes/me/+layout.svelte
@@ -10,11 +10,6 @@
  const navLinks = $derived([
    { name: $_("me.nav.profile"), href: "/me/profile", icon: "icon-[ri--user-line]" },
    { name: $_("me.nav.security"), href: "/me/security", icon: "icon-[ri--shield-keyhole-line]" },
-    {
-      name: $_("me.nav.recordings"),
-      href: "/me/recordings",
-      icon: "icon-[ri--play-list-2-line]",
-    },
    ...(data.isModel
      ? [
          {
--- a/packages/frontend/src/routes/me/recordings/+page.server.ts
+++ b/packages/frontend/src/routes/me/recordings/+page.server.ts
@@ -1,7 +1,5 @@
-import { getRecordings } from "$lib/services";
+import { redirect } from "@sveltejs/kit";

-export async function load({ fetch }) {
-  return {
-    recordings: await getRecordings(fetch).catch(() => []),
-  };
+export function load() {
+  throw redirect(301, "/play/recordings");
 }
--- a/packages/frontend/src/routes/play/+layout.server.ts
+++ b/packages/frontend/src/routes/play/+layout.server.ts
@@ -0,0 +1,8 @@
+import { redirect } from "@sveltejs/kit";
+
+export async function load({ locals }) {
+  if (!locals.authStatus.authenticated) {
+    throw redirect(302, "/login");
+  }
+  return { authStatus: locals.authStatus };
+}
--- a/packages/frontend/src/routes/play/+layout.svelte
+++ b/packages/frontend/src/routes/play/+layout.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+  import { page } from "$app/state";
+  import { _ } from "svelte-i18n";
+  import { Avatar, AvatarImage, AvatarFallback } from "$lib/components/ui/avatar";
+  import { getUserInitials } from "$lib/utils";
+  import { getAssetUrl } from "$lib/api";
+  import SexyBackground from "$lib/components/background/background.svelte";
+
+  const { children, data } = $props();
+
+  const navLinks = $derived([
+    { name: $_("play.nav.play"), href: "/play/buttplug", icon: "icon-[ri--rocket-line]", exact: false },
+    { name: $_("play.nav.recordings"), href: "/play/recordings", icon: "icon-[ri--play-list-2-line]", exact: false },
+    { name: $_("play.nav.leaderboard"), href: "/play/leaderboard", icon: "icon-[ri--trophy-line]", exact: false },
+  ]);
+
+  function isActive(link: { href: string; exact: boolean }) {
+    if (link.exact) return page.url.pathname === link.href;
+    return page.url.pathname.startsWith(link.href);
+  }
+
+  const user = $derived(data.authStatus.user!);
+  const avatarUrl = $derived(
+    user.avatar ? (getAssetUrl(user.avatar, "thumbnail") ?? undefined) : undefined,
+  );
+  const displayName = $derived(user.artist_name ?? user.email);
+</script>
+
+<div class="min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5 relative">
+  <SexyBackground />
+
+  <div class="container mx-auto px-4 relative z-10">
+    <!-- Mobile top nav -->
+    <div class="lg:hidden border-b border-border/40">
+      <div class="flex items-center gap-1 overflow-x-auto py-2 scrollbar-none">
+        <a
+          href="/"
+          class="shrink-0 flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors px-2"
+        >
+          <span class="icon-[ri--arrow-left-line] h-4 w-4"></span>
+          <span class="hidden sm:inline">{$_("play.nav.back_mobile")}</span>
+        </a>
+        {#each navLinks as link (link.href)}
+          <a
+            href={link.href}
+            class={`shrink-0 flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-sm font-medium transition-colors ${
+              isActive(link)
+                ? "bg-primary/10 text-primary"
+                : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
+            }`}
+          >
+            <span class={`${link.icon} h-4 w-4 shrink-0`}></span>
+            <span class="hidden sm:inline">{link.name}</span>
+          </a>
+        {/each}
+      </div>
+    </div>
+
+    <!-- Desktop layout -->
+    <div class="flex min-h-screen">
+      <!-- Sidebar (desktop only) -->
+      <aside class="hidden lg:flex w-56 shrink-0 flex-col border-r border-border/40">
+        <div class="px-4 py-5 border-b border-border/40">
+          <a
+            href="/"
+            class="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <span class="icon-[ri--arrow-left-line] h-3.5 w-3.5"></span>
+            {$_("play.nav.back_to_site")}
+          </a>
+          <div class="mt-3 flex items-center gap-3">
+            <Avatar class="h-9 w-9 shrink-0">
+              <AvatarImage src={avatarUrl} alt={displayName} />
+              <AvatarFallback class="text-xs">
+                {getUserInitials(displayName)}
+              </AvatarFallback>
+            </Avatar>
+            <div class="min-w-0">
+              <p class="text-sm font-semibold text-foreground truncate">{displayName}</p>
+              <p class="text-xs text-primary">{$_("play.title")}</p>
+            </div>
+          </div>
+        </div>
+
+        <nav class="flex-1 p-3 space-y-1">
+          {#each navLinks as link (link.href)}
+            <a
+              href={link.href}
+              class={`flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
+                isActive(link)
+                  ? "bg-primary/10 text-primary"
+                  : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
+              }`}
+            >
+              <span class={`${link.icon} h-4 w-4`}></span>
+              {link.name}
+            </a>
+          {/each}
+        </nav>
+      </aside>
+
+      <!-- Main content -->
+      <main class="flex-1 min-w-0">
+        {@render children()}
+      </main>
+    </div>
+  </div>
+</div>
--- a/packages/frontend/src/routes/play/+page.server.ts
+++ b/packages/frontend/src/routes/play/+page.server.ts
@@ -1,20 +1,5 @@
-import { getRecording } from "$lib/services";
-import type { Recording } from "$lib/types";
+import { redirect } from "@sveltejs/kit";

-export async function load({ locals, url, fetch }) {
-  const recordingId = url.searchParams.get("recording");
-
-  let recording: Recording | null = null;
-  if (recordingId && locals.authStatus.authenticated) {
-    try {
-      recording = await getRecording(recordingId, fetch);
-    } catch (error) {
-      console.error("Failed to load recording:", error);
-    }
-  }
-
-  return {
-    authStatus: locals.authStatus,
-    recording,
-  };
+export function load() {
+  throw redirect(302, "/play/buttplug");
 }
--- a/packages/frontend/src/routes/play/buttplug/+page.server.ts
+++ b/packages/frontend/src/routes/play/buttplug/+page.server.ts
@@ -0,0 +1,19 @@
+import { getRecording } from "$lib/services";
+import type { Recording } from "$lib/types";
+
+export async function load({ url, fetch }) {
+  const recordingId = url.searchParams.get("recording");
+
+  let recording: Recording | null = null;
+  if (recordingId) {
+    try {
+      recording = await getRecording(recordingId, fetch);
+    } catch (error) {
+      console.error("Failed to load recording:", error);
+    }
+  }
+
+  return {
+    recording,
+  };
+}
--- a/packages/frontend/src/routes/play/buttplug/+page.svelte
+++ b/packages/frontend/src/routes/play/buttplug/+page.svelte
@@ -4,14 +4,13 @@
  import type * as ButtplugTypes from "@sexy.pivoine.art/buttplug";
  import Button from "$lib/components/ui/button/button.svelte";
  import { onMount } from "svelte";
-  import { goto } from "$app/navigation";
  import DeviceCard from "$lib/components/device-card/device-card.svelte";
-  import RecordingSaveDialog from "./components/recording-save-dialog.svelte";
-  import DeviceMappingDialog from "./components/device-mapping-dialog.svelte";
+  import RecordingSaveDialog from "../components/recording-save-dialog.svelte";
+  import DeviceMappingDialog from "../components/device-mapping-dialog.svelte";
  import type { BluetoothDevice, RecordedEvent, DeviceInfo } from "$lib/types";
  import { toast } from "svelte-sonner";
  import { createRecording } from "$lib/services";
-  import SexyBackground from "$lib/components/background/background.svelte";
+  import * as Empty from "$lib/components/ui/empty";

  // Runtime buttplug values — loaded dynamically from the buttplug nginx container
  let client: ButtplugTypes.ButtplugClient;
@@ -41,7 +40,6 @@

  async function init() {
    const connector = new ButtplugWasmClientConnector();
-    // await ButtplugWasmClientConnector.activateLogging("info");
    await client.connect(connector);
    client.on("deviceadded", onDeviceAdded);
    client.on("deviceremoved", (dev: ButtplugTypes.ButtplugClientDevice) => {
@@ -62,7 +60,6 @@
    const device = convertDevice(dev);
    devices.push(device);

-    // Try to read battery level — access through the reactive array so Svelte detects the mutation
    const idx = devices.length - 1;
    if (device.hasBattery) {
      try {
@@ -95,16 +92,13 @@
    const outputType = actuator.outputType as typeof ButtplugTypes.OutputType;
    await feature.runOutput(new DeviceOutputValueConstructor(outputType).steps(value));

-    // Capture event if recording
    if (isRecording && recordingStartTime) {
      captureEvent(device, actuatorIdx, value);
    }
  }

  function startRecording() {
-    if (devices.length === 0) {
-      return;
-    }
+    if (devices.length === 0) return;
    isRecording = true;
    recordingStartTime = performance.now();
    recordedEvents = [];
@@ -131,7 +125,7 @@
      device_name: device.name,
      actuator_index: actuatorIdx,
      actuator_type: actuator.outputType,
-      value: (value / actuator.maxSteps) * 100, // Normalize to 0-100
+      value: (value / actuator.maxSteps) * 100,
    });
  }

@@ -166,7 +160,11 @@
    };
  }

-  async function handleSaveRecording(data: { title: string; description: string; tags: string[] }) {
+  async function handleSaveRecording(saveData: {
+    title: string;
+    description: string;
+    tags: string[];
+  }) {
    const deviceInfo: DeviceInfo[] = devices.map((d) => ({
      name: d.name,
      index: d.info.index,
@@ -175,12 +173,12 @@

    try {
      await createRecording({
-        title: data.title,
-        description: data.description,
+        title: saveData.title,
+        description: saveData.description,
        duration: Math.round(recordingDuration),
        events: recordedEvents,
        device_info: deviceInfo,
-        tags: data.tags,
+        tags: saveData.tags,
        status: "draft",
      });

@@ -188,9 +186,6 @@
      showSaveDialog = false;
      recordedEvents = [];
      recordingDuration = 0;
-
-      // Optionally navigate to dashboard
-      // goto("/me?tab=recordings");
    } catch (error) {
      console.error("Failed to save recording:", error);
      toast.error("Failed to save recording. Please try again.");
@@ -203,24 +198,19 @@
    recordingDuration = 0;
  }

-  // Playback functions
  function startPlayback() {
-    if (!data.recording) {
-      return;
-    }
+    if (!data.recording) return;

    if (devices.length === 0) {
      toast.error("Please connect devices before playing recording");
      return;
    }

-    // Check if we need to map devices
    if (deviceMappings.size === 0 && (data.recording.device_info?.length ?? 0) > 0) {
      showMappingDialog = true;
      return;
    }

-    // Start playback with existing mappings
    beginPlayback();
  }

@@ -250,8 +240,6 @@
    }
    playbackProgress = 0;
    currentEventIndex = 0;
-
-    // Stop all devices
    devices.forEach((device) => handleStop(device));
  }

@@ -265,7 +253,6 @@

  function resumePlayback() {
    if (!data.recording) return;
-
    isPlaying = true;
    playbackStartTime = performance.now() - playbackProgress;
    scheduleNextEvent();
@@ -286,12 +273,10 @@
    const delay = event.timestamp - currentTime;

    if (delay <= 0) {
-      // Execute event immediately
      executeEvent(event);
      currentEventIndex++;
      scheduleNextEvent();
    } else {
-      // Schedule event
      playbackTimeoutId = setTimeout(() => {
        executeEvent(event);
        currentEventIndex++;
@@ -302,31 +287,25 @@
  }

  function executeEvent(event: RecordedEvent) {
-    // Get mapped device
    const device = deviceMappings.get(event.device_name);
    if (!device) {
      console.warn(`No device mapping for: ${event.device_name}`);
      return;
    }

-    // Find matching actuator by type
    const actuator = device.actuators.find((a) => a.outputType === event.actuator_type);
    if (!actuator) {
      console.warn(`Actuator type ${event.actuator_type} not found on ${device.name}`);
      return;
    }

-    // Convert normalized value (0-100) back to device scale
    const deviceValue = Math.round((event.value / 100) * actuator.maxSteps);
-
-    // Send command to device via feature
    const feature = device.info.features.get(actuator.featureIndex);
    if (feature) {
      const outputType = actuator.outputType as typeof ButtplugTypes.OutputType;
      feature.runOutput(new DeviceOutputValueConstructor(outputType).steps(deviceValue));
    }

-    // Update UI
    actuator.value = deviceValue;
  }

@@ -336,7 +315,6 @@
    const targetTime = (percentage / 100) * data.recording.duration;
    playbackProgress = targetTime;

-    // Find the event index at this time
    const seekEvents = (data.recording.events ?? []) as RecordedEvent[];
    currentEventIndex = seekEvents.findIndex((e) => e.timestamp >= targetTime);
    if (currentEventIndex === -1) {
@@ -355,10 +333,6 @@
  const { data } = $props();

  onMount(async () => {
-    if (!data.authStatus.authenticated) {
-      goto("/login");
-      return;
-    }
    // Concatenation prevents Rollup from statically resolving this URL at build time
    const buttplugUrl = "/buttplug/" + "dist/index.js";
    const bp = await import(/* @vite-ignore */ buttplugUrl);
@@ -373,240 +347,203 @@

 <Meta title={$_("play.title")} description={$_("play.description")} />

-<div
-  class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5 overflow-hidden"
->
-  <SexyBackground />
+<div class="py-3 sm:py-6 lg:pl-6">
+  <!-- Header -->
+  <div class="mb-6">
+    <h1 class="text-2xl font-bold">{$_("play.title")}</h1>
+  </div>

-  <div class="container mx-auto py-20 relative px-4">
-    <div class="max-w-4xl mx-auto">
-      <!-- Header -->
-      <div class="text-center mb-12">
-        <h1
-          class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent"
+  <!-- Recording controls (only when devices are connected) -->
+  {#if devices.length > 0 && !data.recording}
+    <div class="flex flex-wrap items-center gap-3 mb-6">
+      {#if !isRecording}
+        <Button
+          variant="outline"
+          onclick={startRecording}
+          class="cursor-pointer border-primary/30 hover:bg-primary/10"
        >
-          {$_("play.title")}
-        </h1>
-        <p class="text-lg text-muted-foreground mb-6">
-          {$_("play.description")}
-        </p>
-        <div class="flex justify-center gap-3 mb-10">
-          <Button
-            variant="outline"
-            size="sm"
-            href="/leaderboard"
-            class="border-primary/30 hover:bg-primary/10"
-          >
-            <span class="icon-[ri--trophy-line] w-4 h-4 mr-2"></span>
-            {$_("gamification.leaderboard")}
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            href="/me"
-            class="border-primary/30 hover:bg-primary/10"
-          >
-            <span class="icon-[ri--user-line] w-4 h-4 mr-2"></span>
-            {$_("common.my_profile")}
-          </Button>
-        </div>
-        <div class="flex justify-center gap-4 items-center">
-          <Button
-            size="lg"
-            disabled={!connected || scanning}
-            onclick={startScanning}
-            class="cursor-pointer bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
-          >
-            {#if scanning}
-              <div
-                class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"
-              ></div>
-              {$_("play.scanning")}
-            {:else}
-              {$_("play.scan")}
-            {/if}
-          </Button>
-
-          {#if devices.length > 0 && !data.recording}
-            {#if !isRecording}
-              <Button
-                size="lg"
-                variant="outline"
-                onclick={startRecording}
-                class="cursor-pointer border-primary/30 hover:bg-primary/10"
-              >
-                <span class="icon-[ri--record-circle-line] w-5 h-5 mr-2"></span>
-                Start Recording
-              </Button>
-            {:else}
-              <Button
-                size="lg"
-                onclick={stopRecording}
-                class="cursor-pointer bg-red-500 hover:bg-red-600 text-white"
-              >
-                <span class="icon-[ri--stop-circle-fill] w-5 h-5 mr-2 animate-pulse"></span>
-                Stop Recording ({recordedEvents.length} events)
-              </Button>
-            {/if}
-          {/if}
-        </div>
-      </div>
-
-      <!-- Playback Controls (only shown when recording is loaded) -->
-      {#if data.recording}
-        <div class="bg-card/50 border border-primary/20 rounded-lg p-6 backdrop-blur-sm">
-          <div class="mb-4">
-            <h2 class="text-xl font-semibold text-card-foreground mb-2">
-              {data.recording.title}
-            </h2>
-            {#if data.recording.description}
-              <p class="text-sm text-muted-foreground">
-                {data.recording.description}
-              </p>
-            {/if}
-          </div>
-
-          <!-- Progress Bar -->
-          <div class="mb-4">
-            <div class="flex items-center gap-3 mb-2">
-              <span class="text-sm text-muted-foreground min-w-[50px]">
-                {Math.floor(playbackProgress / 1000 / 60)}:{(
-                  Math.floor(playbackProgress / 1000) % 60
-                )
-                  .toString()
-                  .padStart(2, "0")}
-              </span>
-              <div
-                role="slider"
-                tabindex="0"
-                aria-label="Seek"
-                aria-valuemin={0}
-                aria-valuemax={data.recording.duration}
-                aria-valuenow={playbackProgress}
-                class="flex-1 h-2 bg-muted rounded-full overflow-hidden cursor-pointer relative"
-                onclick={(e) => {
-                  const rect = e.currentTarget.getBoundingClientRect();
-                  const percentage = ((e.clientX - rect.left) / rect.width) * 100;
-                  seek(percentage);
-                }}
-                onkeydown={(e) => {
-                  if (e.key === "ArrowRight")
-                    seek(((playbackProgress + 1) / data.recording.duration) * 100);
-                  else if (e.key === "ArrowLeft")
-                    seek(((playbackProgress - 1) / data.recording.duration) * 100);
-                }}
-              >
-                <div
-                  class="absolute inset-0 bg-gradient-to-r from-primary to-accent transition-all duration-150"
-                  style="width: {(playbackProgress / data.recording.duration) * 100}%"
-                ></div>
-              </div>
-              <span class="text-sm text-muted-foreground min-w-[50px] text-right">
-                {Math.floor(data.recording.duration / 1000 / 60)}:{(
-                  Math.floor(data.recording.duration / 1000) % 60
-                )
-                  .toString()
-                  .padStart(2, "0")}
-              </span>
-            </div>
-          </div>
-
-          <!-- Playback Buttons -->
-          <div class="flex gap-2 justify-center">
-            <Button
-              size="lg"
-              variant="outline"
-              onclick={stopPlayback}
-              disabled={!isPlaying && playbackProgress === 0}
-              class="cursor-pointer border-primary/30 hover:bg-primary/10"
-            >
-              <span class="icon-[ri--stop-fill] w-5 h-5"></span>
-            </Button>
-            {#if !isPlaying}
-              <Button
-                size="lg"
-                onclick={playbackProgress > 0 ? resumePlayback : startPlayback}
-                disabled={devices.length === 0}
-                class="cursor-pointer bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 min-w-[120px]"
-              >
-                <span class="icon-[ri--play-fill] w-5 h-5 mr-2"></span>
-                {playbackProgress > 0 ? "Resume" : "Play"}
-              </Button>
-            {:else}
-              <Button
-                size="lg"
-                onclick={pausePlayback}
-                class="cursor-pointer bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 min-w-[120px]"
-              >
-                <span class="icon-[ri--pause-fill] w-5 h-5 mr-2"></span>
-                Pause
-              </Button>
-            {/if}
-          </div>
-
-          <!-- Recording Info -->
-          <div class="mt-4 pt-4 border-t border-border/50 grid grid-cols-3 gap-4 text-center">
-            <div>
-              <p class="text-xs text-muted-foreground">Events</p>
-              <p class="text-sm font-medium">{data.recording.events?.length ?? 0}</p>
-            </div>
-            <div>
-              <p class="text-xs text-muted-foreground">Devices</p>
-              <p class="text-sm font-medium">{data.recording.device_info?.length ?? 0}</p>
-            </div>
-            <div>
-              <p class="text-xs text-muted-foreground">Status</p>
-              <p class="text-sm font-medium capitalize">{data.recording.status}</p>
-            </div>
-          </div>
-        </div>
-      {/if}
-    </div>
-  </div>
-  <div class="container mx-auto px-4 py-12">
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-      {#if devices}
-        {#each devices as device (device.name)}
-          <DeviceCard
-            {device}
-            onChange={(scalarIndex, val) => handleChange(device, scalarIndex, val)}
-            onStop={() => handleStop(device)}
-          />
-        {/each}
+          <span class="icon-[ri--record-circle-line] w-4 h-4 mr-2"></span>
+          Start Recording
+        </Button>
+      {:else}
+        <Button
+          onclick={stopRecording}
+          class="cursor-pointer bg-red-500 hover:bg-red-600 text-white"
+        >
+          <span class="icon-[ri--stop-circle-fill] w-4 h-4 mr-2 animate-pulse"></span>
+          Stop Recording ({recordedEvents.length} events)
+        </Button>
      {/if}
    </div>
+  {/if}

-    {#if devices?.length === 0}
-      <div class="text-center py-12">
-        <p class="text-muted-foreground text-lg mb-4">
-          {$_("play.no_results")}
-        </p>
-      </div>
-    {/if}
-  </div>
-
-  <!-- Recording Save Dialog -->
-  <RecordingSaveDialog
-    open={showSaveDialog}
-    events={recordedEvents}
-    deviceInfo={devices.map((d) => ({
-      name: d.name,
-      index: d.info.index,
-      capabilities: d.actuators.map((a) => a.outputType),
-    }))}
-    duration={recordingDuration}
-    onSave={handleSaveRecording}
-    onCancel={handleCancelSave}
-  />
-
-  <!-- Device Mapping Dialog -->
+  <!-- Playback Controls (only shown when recording is loaded) -->
  {#if data.recording}
-    <DeviceMappingDialog
-      open={showMappingDialog}
-      recordedDevices={(data.recording.device_info ?? []) as DeviceInfo[]}
-      connectedDevices={devices}
-      onConfirm={handleMappingConfirm}
-      onCancel={handleMappingCancel}
-    />
+    <div class="bg-card/50 border border-primary/20 rounded-lg p-6 mb-6">
+      <div class="mb-4">
+        <h2 class="text-xl font-semibold text-card-foreground mb-1">
+          {data.recording.title}
+        </h2>
+        {#if data.recording.description}
+          <p class="text-sm text-muted-foreground">
+            {data.recording.description}
+          </p>
+        {/if}
+      </div>
+
+      <!-- Progress Bar -->
+      <div class="mb-4">
+        <div class="flex items-center gap-3 mb-2">
+          <span class="text-sm text-muted-foreground min-w-[50px]">
+            {Math.floor(playbackProgress / 1000 / 60)}:{(Math.floor(playbackProgress / 1000) % 60)
+              .toString()
+              .padStart(2, "0")}
+          </span>
+          <div
+            role="slider"
+            tabindex="0"
+            aria-label="Seek"
+            aria-valuemin={0}
+            aria-valuemax={data.recording.duration}
+            aria-valuenow={playbackProgress}
+            class="flex-1 h-2 bg-muted rounded-full overflow-hidden cursor-pointer relative"
+            onclick={(e) => {
+              const rect = e.currentTarget.getBoundingClientRect();
+              const percentage = ((e.clientX - rect.left) / rect.width) * 100;
+              seek(percentage);
+            }}
+            onkeydown={(e) => {
+              if (e.key === "ArrowRight")
+                seek(((playbackProgress + 1) / data.recording.duration) * 100);
+              else if (e.key === "ArrowLeft")
+                seek(((playbackProgress - 1) / data.recording.duration) * 100);
+            }}
+          >
+            <div
+              class="absolute inset-0 bg-gradient-to-r from-primary to-accent transition-all duration-150"
+              style="width: {(playbackProgress / data.recording.duration) * 100}%"
+            ></div>
+          </div>
+          <span class="text-sm text-muted-foreground min-w-[50px] text-right">
+            {Math.floor(data.recording.duration / 1000 / 60)}:{(
+              Math.floor(data.recording.duration / 1000) % 60
+            )
+              .toString()
+              .padStart(2, "0")}
+          </span>
+        </div>
+      </div>
+
+      <!-- Playback Buttons -->
+      <div class="flex gap-2 justify-center">
+        <Button
+          variant="outline"
+          onclick={stopPlayback}
+          disabled={!isPlaying && playbackProgress === 0}
+          class="cursor-pointer border-primary/30 hover:bg-primary/10"
+        >
+          <span class="icon-[ri--stop-fill] w-5 h-5"></span>
+        </Button>
+        {#if !isPlaying}
+          <Button
+            onclick={playbackProgress > 0 ? resumePlayback : startPlayback}
+            disabled={devices.length === 0}
+            class="cursor-pointer bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 min-w-[120px]"
+          >
+            <span class="icon-[ri--play-fill] w-5 h-5 mr-2"></span>
+            {playbackProgress > 0 ? "Resume" : "Play"}
+          </Button>
+        {:else}
+          <Button
+            onclick={pausePlayback}
+            class="cursor-pointer bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 min-w-[120px]"
+          >
+            <span class="icon-[ri--pause-fill] w-5 h-5 mr-2"></span>
+            Pause
+          </Button>
+        {/if}
+      </div>
+
+      <!-- Recording Info -->
+      <div class="mt-4 pt-4 border-t border-border/50 grid grid-cols-3 gap-4 text-center">
+        <div>
+          <p class="text-xs text-muted-foreground">Events</p>
+          <p class="text-sm font-medium">{data.recording.events?.length ?? 0}</p>
+        </div>
+        <div>
+          <p class="text-xs text-muted-foreground">Devices</p>
+          <p class="text-sm font-medium">{data.recording.device_info?.length ?? 0}</p>
+        </div>
+        <div>
+          <p class="text-xs text-muted-foreground">Status</p>
+          <p class="text-sm font-medium capitalize">{data.recording.status}</p>
+        </div>
+      </div>
+    </div>
+  {/if}
+
+  <!-- Devices grid or empty state -->
+  {#if devices.length > 0}
+    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+      {#each devices as device (device.name)}
+        <DeviceCard
+          {device}
+          onChange={(scalarIndex, val) => handleChange(device, scalarIndex, val)}
+          onStop={() => handleStop(device)}
+        />
+      {/each}
+    </div>
+  {:else}
+    <Empty.Root>
+      <Empty.Header>
+        <Empty.Media>
+          <span class="icon-[ri--rocket-line] w-8 h-8"></span>
+        </Empty.Media>
+        <Empty.Title>{$_("play.no_results")}</Empty.Title>
+        <Empty.Description>{$_("play.no_results_description")}</Empty.Description>
+      </Empty.Header>
+      <Empty.Content>
+        <Button
+          disabled={!connected || scanning}
+          onclick={startScanning}
+          class="cursor-pointer bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
+        >
+          {#if scanning}
+            <div
+              class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"
+            ></div>
+            {$_("play.scanning")}
+          {:else}
+            <span class="icon-[ri--rocket-line] w-4 h-4 mr-2"></span>
+            {$_("play.scan")}
+          {/if}
+        </Button>
+      </Empty.Content>
+    </Empty.Root>
  {/if}
 </div>
+
+<!-- Recording Save Dialog -->
+<RecordingSaveDialog
+  open={showSaveDialog}
+  events={recordedEvents}
+  deviceInfo={devices.map((d) => ({
+    name: d.name,
+    index: d.info.index,
+    capabilities: d.actuators.map((a) => a.outputType),
+  }))}
+  duration={recordingDuration}
+  onSave={handleSaveRecording}
+  onCancel={handleCancelSave}
+/>
+
+<!-- Device Mapping Dialog -->
+{#if data.recording}
+  <DeviceMappingDialog
+    open={showMappingDialog}
+    recordedDevices={(data.recording.device_info ?? []) as DeviceInfo[]}
+    connectedDevices={devices}
+    onConfirm={handleMappingConfirm}
+    onCancel={handleMappingCancel}
+  />
+{/if}
--- a/packages/frontend/src/routes/play/leaderboard/+page.server.ts
+++ b/packages/frontend/src/routes/play/leaderboard/+page.server.ts
@@ -0,0 +1,60 @@
+import type { PageServerLoad } from "./$types";
+import { gql } from "graphql-request";
+import { getGraphQLClient } from "$lib/api";
+
+const LEADERBOARD_QUERY = gql`
+  query Leaderboard($limit: Int, $offset: Int) {
+    leaderboard(limit: $limit, offset: $offset) {
+      user_id
+      display_name
+      avatar
+      total_weighted_points
+      total_raw_points
+      recordings_count
+      playbacks_count
+      achievements_count
+      rank
+    }
+  }
+`;
+
+export const load: PageServerLoad = async ({ fetch, url }) => {
+  try {
+    const limit = parseInt(url.searchParams.get("limit") || "100");
+    const offset = parseInt(url.searchParams.get("offset") || "0");
+
+    const client = getGraphQLClient(fetch);
+    const data = await client.request<{
+      leaderboard: {
+        user_id: string;
+        display_name: string | null;
+        avatar: string | null;
+        total_weighted_points: number | null;
+        total_raw_points: number | null;
+        recordings_count: number | null;
+        playbacks_count: number | null;
+        achievements_count: number | null;
+        rank: number;
+      }[];
+    }>(LEADERBOARD_QUERY, { limit, offset });
+
+    return {
+      leaderboard: data.leaderboard || [],
+      pagination: {
+        limit,
+        offset,
+        hasMore: data.leaderboard?.length === limit,
+      },
+    };
+  } catch (error) {
+    console.error("Leaderboard load error:", error);
+    return {
+      leaderboard: [],
+      pagination: {
+        limit: 100,
+        offset: 0,
+        hasMore: false,
+      },
+    };
+  }
+};
--- a/packages/frontend/src/routes/play/leaderboard/+page.svelte
+++ b/packages/frontend/src/routes/play/leaderboard/+page.svelte
@@ -0,0 +1,188 @@
+<script lang="ts">
+  import { _, locale } from "svelte-i18n";
+  import { Button } from "$lib/components/ui/button";
+  import { Card, CardContent, CardHeader, CardTitle } from "$lib/components/ui/card";
+  import { Avatar, AvatarImage, AvatarFallback } from "$lib/components/ui/avatar";
+  import { getAssetUrl } from "$lib/api";
+  import Meta from "$lib/components/meta/meta.svelte";
+
+  const { data } = $props();
+
+  function formatPoints(points: number | null | undefined): string {
+    return Math.round(points ?? 0).toLocaleString($locale || "en");
+  }
+
+  function getMedalEmoji(rank: number): string {
+    switch (rank) {
+      case 1:
+        return "🥇";
+      case 2:
+        return "🥈";
+      case 3:
+        return "🥉";
+      default:
+        return "";
+    }
+  }
+
+  function getUserInitials(name: string | null | undefined): string {
+    if (!name) return "?";
+    const parts = name.split(" ");
+    if (parts.length >= 2) {
+      return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
+    }
+    return name.substring(0, 2).toUpperCase();
+  }
+</script>
+
+<Meta
+  title={$_("gamification.leaderboard")}
+  description={$_("gamification.leaderboard_description")}
+/>
+
+<div class="py-3 sm:py-6 lg:pl-6">
+  <div class="flex items-center justify-between mb-6">
+    <div>
+      <h1 class="text-2xl font-bold">{$_("gamification.leaderboard")}</h1>
+      <p class="text-sm text-muted-foreground mt-0.5">{$_("gamification.leaderboard_subtitle")}</p>
+    </div>
+  </div>
+
+  <Card class="bg-card/50 border-border/50">
+    <CardHeader>
+      <CardTitle class="flex items-center gap-2">
+        <span class="icon-[ri--trophy-line] w-5 h-5 text-primary"></span>
+        {$_("gamification.top_players")}
+      </CardTitle>
+    </CardHeader>
+    <CardContent>
+      {#if data.leaderboard.length === 0}
+        <div class="text-center py-12 text-muted-foreground">
+          <span class="icon-[ri--trophy-line] w-12 h-12 mx-auto mb-4 opacity-50 block"></span>
+          <p>{$_("gamification.no_rankings_yet")}</p>
+        </div>
+      {:else}
+        <div class="space-y-2">
+          {#each data.leaderboard as entry (entry.user_id)}
+            <a
+              href="/users/{entry.user_id}"
+              class="flex items-center gap-4 p-4 rounded-lg hover:bg-accent/10 transition-colors group"
+            >
+              <!-- Rank Badge -->
+              <div class="flex-shrink-0 w-14 text-center">
+                {#if entry.rank <= 3}
+                  <span class="text-3xl">{getMedalEmoji(entry.rank)}</span>
+                {:else}
+                  <span
+                    class="text-xl font-bold text-muted-foreground group-hover:text-foreground transition-colors"
+                  >
+                    #{entry.rank}
+                  </span>
+                {/if}
+              </div>
+
+              <!-- Avatar -->
+              <Avatar
+                class="h-12 w-12 ring-2 ring-accent/20 group-hover:ring-primary/40 transition-all"
+              >
+                {#if entry.avatar}
+                  <AvatarImage src={getAssetUrl(entry.avatar, "mini")} alt={entry.display_name} />
+                {/if}
+                <AvatarFallback
+                  class="bg-gradient-to-br from-primary to-accent text-primary-foreground font-semibold"
+                >
+                  {getUserInitials(entry.display_name)}
+                </AvatarFallback>
+              </Avatar>
+
+              <!-- User Info -->
+              <div class="flex-1 min-w-0">
+                <div class="font-semibold truncate group-hover:text-primary transition-colors">
+                  {entry.display_name || $_("common.anonymous")}
+                </div>
+                <div class="text-sm text-muted-foreground flex items-center gap-3">
+                  <span title={$_("gamification.recordings")}>
+                    <span class="icon-[ri--video-line] w-3.5 h-3.5 inline mr-1"></span>
+                    {entry.recordings_count}
+                  </span>
+                  <span title={$_("gamification.plays")}>
+                    <span class="icon-[ri--play-line] w-3.5 h-3.5 inline mr-1"></span>
+                    {entry.playbacks_count}
+                  </span>
+                  <span title={$_("gamification.achievements")}>
+                    <span class="icon-[ri--trophy-line] w-3.5 h-3.5 inline mr-1"></span>
+                    {entry.achievements_count}
+                  </span>
+                </div>
+              </div>
+
+              <!-- Score -->
+              <div class="text-right flex-shrink-0">
+                <div class="text-2xl font-bold text-primary">
+                  {formatPoints(entry.total_weighted_points)}
+                </div>
+                <div class="text-xs text-muted-foreground">
+                  {$_("gamification.points")}
+                </div>
+              </div>
+
+              <!-- Arrow indicator -->
+              <div class="flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
+                <span class="icon-[ri--arrow-right-s-line] w-5 h-5 text-muted-foreground"></span>
+              </div>
+            </a>
+          {/each}
+        </div>
+
+        {#if data.pagination.hasMore}
+          <div class="mt-6 text-center">
+            <Button
+              variant="outline"
+              href="/play/leaderboard?offset={data.pagination.offset +
+                data.pagination.limit}&limit={data.pagination.limit}"
+            >
+              {$_("common.load_more")}
+            </Button>
+          </div>
+        {/if}
+      {/if}
+    </CardContent>
+  </Card>
+
+  <!-- Info Card -->
+  <Card class="mt-6 bg-card/50 border-border/50">
+    <CardContent class="p-6">
+      <h3 class="font-semibold mb-2 flex items-center gap-2">
+        <span class="icon-[ri--information-line] w-4 h-4 text-primary"></span>
+        {$_("gamification.how_it_works")}
+      </h3>
+      <p class="text-sm text-muted-foreground mb-4">
+        {$_("gamification.how_it_works_description")}
+      </p>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
+        <div class="flex items-start gap-2">
+          <span class="icon-[ri--video-add-line] w-5 h-5 text-primary flex-shrink-0 mt-0.5"></span>
+          <div>
+            <div class="font-medium">{$_("gamification.earn_by_creating")}</div>
+            <div class="text-muted-foreground">{$_("gamification.earn_by_creating_desc")}</div>
+          </div>
+        </div>
+        <div class="flex items-start gap-2">
+          <span class="icon-[ri--play-circle-line] w-5 h-5 text-primary flex-shrink-0 mt-0.5"
+          ></span>
+          <div>
+            <div class="font-medium">{$_("gamification.earn_by_playing")}</div>
+            <div class="text-muted-foreground">{$_("gamification.earn_by_playing_desc")}</div>
+          </div>
+        </div>
+        <div class="flex items-start gap-2">
+          <span class="icon-[ri--time-line] w-5 h-5 text-primary flex-shrink-0 mt-0.5"></span>
+          <div>
+            <div class="font-medium">{$_("gamification.stay_active")}</div>
+            <div class="text-muted-foreground">{$_("gamification.stay_active_desc")}</div>
+          </div>
+        </div>
+      </div>
+    </CardContent>
+  </Card>
+</div>
--- a/packages/frontend/src/routes/play/recordings/+page.server.ts
+++ b/packages/frontend/src/routes/play/recordings/+page.server.ts
@@ -0,0 +1,7 @@
+import { getRecordings } from "$lib/services";
+
+export async function load({ fetch }) {
+  return {
+    recordings: await getRecordings(fetch).catch(() => []),
+  };
+}
--- a/packages/frontend/src/routes/play/recordings/+page.svelte
+++ b/packages/frontend/src/routes/play/recordings/+page.svelte
@@ -0,0 +1,122 @@
+<script lang="ts">
+  import { untrack } from "svelte";
+  import { _ } from "svelte-i18n";
+  import { goto } from "$app/navigation";
+  import { toast } from "svelte-sonner";
+  import { deleteRecording, updateRecording } from "$lib/services";
+  import { Button } from "$lib/components/ui/button";
+  import * as Empty from "$lib/components/ui/empty";
+  import * as Dialog from "$lib/components/ui/dialog";
+  import RecordingCard from "$lib/components/recording-card/recording-card.svelte";
+  import Meta from "$lib/components/meta/meta.svelte";
+
+  const { data } = $props();
+
+  let recordings = $state(untrack(() => data.recordings));
+  let deleteTarget = $state<string | null>(null);
+  let deleteOpen = $state(false);
+  let deleting = $state(false);
+
+  function handleDeleteRecording(id: string) {
+    deleteTarget = id;
+    deleteOpen = true;
+  }
+
+  async function confirmDeleteRecording() {
+    if (!deleteTarget) return;
+    deleting = true;
+    try {
+      await deleteRecording(deleteTarget);
+      recordings = recordings.filter((r) => r.id !== deleteTarget);
+      toast.success($_("me.recordings.delete_success"));
+      deleteOpen = false;
+      deleteTarget = null;
+    } catch {
+      toast.error($_("me.recordings.delete_error"));
+    } finally {
+      deleting = false;
+    }
+  }
+
+  async function handlePublishRecording(id: string) {
+    try {
+      await updateRecording(id, { status: "published" });
+      recordings = recordings.map((r) => (r.id === id ? { ...r, status: "published" } : r));
+      toast.success($_("me.recordings.publish_success"));
+    } catch {
+      toast.error($_("me.recordings.publish_error"));
+    }
+  }
+
+  async function handleUnpublishRecording(id: string) {
+    try {
+      await updateRecording(id, { status: "draft" });
+      recordings = recordings.map((r) => (r.id === id ? { ...r, status: "draft" } : r));
+      toast.success($_("me.recordings.unpublish_success"));
+    } catch {
+      toast.error($_("me.recordings.unpublish_error"));
+    }
+  }
+
+  function handlePlayRecording(id: string) {
+    goto(`/play/buttplug?recording=${id}`);
+  }
+</script>
+
+<Meta title={$_("me.recordings.title")} />
+
+<div class="py-3 sm:py-6 lg:pl-6">
+  <div class="mb-6">
+    <h1 class="text-2xl font-bold">{$_("me.recordings.title")}</h1>
+  </div>
+
+  {#if recordings.length === 0}
+    <Empty.Root>
+      <Empty.Header>
+        <Empty.Media>
+          <span class="icon-[ri--play-list-2-line] w-8 h-8"></span>
+        </Empty.Media>
+        <Empty.Title>{$_("me.recordings.no_recordings")}</Empty.Title>
+        <Empty.Description>{$_("me.recordings.no_recordings_description")}</Empty.Description>
+      </Empty.Header>
+      <Empty.Content>
+        <Button
+          href="/play/buttplug"
+          class="cursor-pointer bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
+        >
+          <span class="icon-[ri--rocket-line] w-4 h-4 mr-2"></span>
+          {$_("me.recordings.go_to_play")}
+        </Button>
+      </Empty.Content>
+    </Empty.Root>
+  {:else}
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      {#each recordings as recording (recording.id)}
+        <RecordingCard
+          {recording}
+          onPlay={handlePlayRecording}
+          onPublish={handlePublishRecording}
+          onUnpublish={handleUnpublishRecording}
+          onDelete={handleDeleteRecording}
+        />
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<Dialog.Root bind:open={deleteOpen}>
+  <Dialog.Content>
+    <Dialog.Header>
+      <Dialog.Title>{$_("me.recordings.delete_confirm")}</Dialog.Title>
+      <Dialog.Description>This cannot be undone.</Dialog.Description>
+    </Dialog.Header>
+    <Dialog.Footer>
+      <Button variant="outline" onclick={() => (deleteOpen = false)}>
+        {$_("common.cancel")}
+      </Button>
+      <Button variant="destructive" disabled={deleting} onclick={confirmDeleteRecording}>
+        {deleting ? "Deleting…" : $_("common.delete")}
+      </Button>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>
--- a/packages/frontend/src/routes/users/[id]/+page.svelte
+++ b/packages/frontend/src/routes/users/[id]/+page.svelte
@@ -131,7 +131,7 @@
              <span class="icon-[ri--trophy-line] w-6 h-6 text-primary"></span>
              {$_("gamification.stats")}
            </h2>
-            <Button variant="outline" size="sm" href="/leaderboard">
+            <Button variant="outline" size="sm" href="/play/leaderboard">
              <span class="icon-[ri--bar-chart-line] w-4 h-4 mr-2"></span>
              {$_("gamification.leaderboard")}
            </Button>