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>

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",

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`
+export function load() {
-  query Leaderboard($limit: Int, $offset: Int) {
+  throw redirect(301, "/play/leaderboard");
-    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,
-      },
-    };
-  }
-};

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
       ? [
           {

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 }) {
+export function load() {
-  return {
+  throw redirect(301, "/play/recordings");
-    recordings: await getRecordings(fetch).catch(() => []),
-  };
 }

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

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>

packages/frontend/src/routes/play/+page.server.ts

@@ -1,20 +1,5 @@
-import { getRecording } from "$lib/services";
+import { redirect } from "@sveltejs/kit";
-import type { Recording } from "$lib/types";
 
-export async function load({ locals, url, fetch }) {
+export function load() {
-  const recordingId = url.searchParams.get("recording");
+  throw redirect(302, "/play/buttplug");
-
-  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,
-  };
 }

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

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 RecordingSaveDialog from "../components/recording-save-dialog.svelte";
-  import DeviceMappingDialog from "./components/device-mapping-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) {
+    if (devices.length === 0) return;
-      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,
+        title: saveData.title,
-        description: data.description,
+        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) {
+    if (!data.recording) return;
-      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,90 +347,41 @@
 
 <Meta title={$_("play.title")} description={$_("play.description")} />
 
-<div
+<div class="py-3 sm:py-6 lg:pl-6">
-  class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5 overflow-hidden"
->
-  <SexyBackground />
-
-  <div class="container mx-auto py-20 relative px-4">
-    <div class="max-w-4xl mx-auto">
   <!-- Header -->
-      <div class="text-center mb-12">
+  <div class="mb-6">
-        <h1
+    <h1 class="text-2xl font-bold">{$_("play.title")}</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"
-        >
-          {$_("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>
 
+  <!-- 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
-                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>
+          <span class="icon-[ri--record-circle-line] w-4 h-4 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>
+          <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}
-        </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="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-2">
+        <h2 class="text-xl font-semibold text-card-foreground mb-1">
           {data.recording.title}
         </h2>
         {#if data.recording.description}
@@ -470,9 +395,7 @@
       <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)}:{(Math.floor(playbackProgress / 1000) % 60)
-                  Math.floor(playbackProgress / 1000) % 60
-                )
               .toString()
               .padStart(2, "0")}
           </span>
@@ -514,7 +437,6 @@
       <!-- Playback Buttons -->
       <div class="flex gap-2 justify-center">
         <Button
-              size="lg"
           variant="outline"
           onclick={stopPlayback}
           disabled={!isPlaying && playbackProgress === 0}
@@ -524,7 +446,6 @@
         </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]"
@@ -534,7 +455,6 @@
           </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]"
           >
@@ -561,11 +481,10 @@
       </div>
     </div>
   {/if}
-    </div>
+
-  </div>
+  <!-- Devices grid or empty state -->
-  <div class="container mx-auto px-4 py-12">
+  {#if devices.length > 0}
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
-      {#if devices}
       {#each devices as device (device.name)}
         <DeviceCard
           {device}
@@ -573,15 +492,34 @@
           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}
-    </div>
+        </Button>
-
+      </Empty.Content>
-    {#if devices?.length === 0}
+    </Empty.Root>
-      <div class="text-center py-12">
-        <p class="text-muted-foreground text-lg mb-4">
-          {$_("play.no_results")}
-        </p>
-      </div>
   {/if}
 </div>
 
@@ -609,4 +547,3 @@
     onCancel={handleMappingCancel}
   />
 {/if}
-</div>

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

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>

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(() => []),
+  };
+}

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>

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>