fix: match pagination button size to admin filter buttons (default size)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.gitea/workflows/docker-build-backend.yml

@@ -7,9 +7,17 @@ on:
       - develop
     tags:
       - "v*.*.*"
+    paths:
+      - "packages/backend/**"
+      - "packages/types/**"
+      - "Dockerfile.backend"
   pull_request:
     branches:
       - main
+    paths:
+      - "packages/backend/**"
+      - "packages/types/**"
+      - "Dockerfile.backend"
   workflow_dispatch:
 
 env:

.gitea/workflows/docker-build-buttplug.yml

@@ -0,0 +1,68 @@
+name: Build and Push Buttplug Image
+
+on:
+  push:
+    branches:
+      - main
+      - develop
+    tags:
+      - "v*.*.*"
+    paths:
+      - "packages/buttplug/**"
+      - "Dockerfile.buttplug"
+      - "nginx.buttplug.conf"
+  pull_request:
+    branches:
+      - main
+    paths:
+      - "packages/buttplug/**"
+      - "Dockerfile.buttplug"
+      - "nginx.buttplug.conf"
+  workflow_dispatch:
+
+env:
+  REGISTRY: dev.pivoine.art
+  IMAGE_NAME: valknar/sexy-buttplug
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          platforms: linux/amd64
+
+      - name: Log in to Gitea Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ gitea.actor }}
+          password: ${{ secrets.REGISTRY_TOKEN }}
+
+      - name: Extract metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=raw,value=latest,enable={{is_default_branch}}
+            type=ref,event=branch
+            type=ref,event=pr
+            type=semver,pattern={{version}}
+            type=sha,prefix={{branch}}-
+
+      - name: Build and push
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: Dockerfile.buttplug
+          platforms: linux/amd64
+          push: ${{ gitea.event_name != 'pull_request' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=registry,ref=${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:buildcache
+          cache-to: type=registry,ref=${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:buildcache,mode=max

.gitea/workflows/docker-build-frontend.yml

@@ -7,9 +7,17 @@ on:
       - develop
     tags:
       - "v*.*.*"
+    paths:
+      - "packages/frontend/**"
+      - "packages/types/**"
+      - "Dockerfile"
   pull_request:
     branches:
       - main
+    paths:
+      - "packages/frontend/**"
+      - "packages/types/**"
+      - "Dockerfile"
   workflow_dispatch:
 
 env:

Dockerfile

@@ -3,7 +3,7 @@
 # ============================================================================
 # Base stage - shared dependencies
 # ============================================================================
-FROM node:22.11.0-slim AS base
+FROM node:22.14.0-slim AS base
 
 # Enable corepack for pnpm
 RUN npm install -g corepack@latest && corepack enable
@@ -20,48 +20,22 @@ RUN mkdir -p ./packages/frontend && \
     printf 'PUBLIC_API_URL=\nPUBLIC_URL=\nPUBLIC_UMAMI_ID=\nPUBLIC_UMAMI_SCRIPT=\n' > ./packages/frontend/.env
 
 # ============================================================================
-# Builder stage - compile application with Rust/WASM support
+# Builder stage - compile frontend
 # ============================================================================
 FROM base AS builder
 ARG CI=false
 ENV CI=$CI
 
-# Install build dependencies for Rust and native modules
-RUN apt-get update && apt-get install -y \
-    curl \
-    build-essential \
-    pkg-config \
-    libssl-dev \
-    ca-certificates \
-    && rm -rf /var/lib/apt/lists/*
-
-# Install Rust toolchain
-RUN curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y \
-    --default-toolchain stable \
-    --profile minimal \
-    --target wasm32-unknown-unknown
-
-# Add Rust to PATH
-ENV PATH="/root/.cargo/bin:${PATH}"
-
-# Install wasm-bindgen-cli
-RUN cargo install wasm-bindgen-cli
-
 # Copy source files
 COPY packages ./packages
 
 # Install all dependencies
 RUN pnpm install --frozen-lockfile
 
-# Build packages in correct order with WASM support
+# Generate SvelteKit type definitions (creates .svelte-kit/tsconfig.json)
-# 1. Build buttplug WASM
+RUN pnpm --filter @sexy.pivoine.art/frontend exec svelte-kit sync
-RUN RUSTFLAGS='--cfg getrandom_backend="wasm_js" --cfg=web_sys_unstable_apis' \
-    pnpm --filter @sexy.pivoine.art/buttplug build:wasm
 
-# 2. Build buttplug TypeScript
+# Build frontend
-RUN pnpm --filter @sexy.pivoine.art/buttplug build
-
-# 3. Build frontend
 RUN pnpm --filter @sexy.pivoine.art/frontend build
 
 # Prune dev dependencies for production
@@ -70,7 +44,7 @@ RUN CI=true pnpm install -rP
 # ============================================================================
 # Runner stage - minimal production image
 # ============================================================================
-FROM node:22.11.0-slim AS runner
+FROM node:22.14.0-slim AS runner
 
 # Install dumb-init for proper signal handling
 RUN apt-get update && apt-get install -y \
@@ -91,19 +65,14 @@ COPY --from=builder --chown=node:node /app/package.json ./package.json
 COPY --from=builder --chown=node:node /app/pnpm-lock.yaml ./pnpm-lock.yaml
 COPY --from=builder --chown=node:node /app/pnpm-workspace.yaml ./pnpm-workspace.yaml
 
-# Create package directories
+# Create package directory
-RUN mkdir -p packages/frontend packages/buttplug
+RUN mkdir -p packages/frontend
 
 # Copy frontend artifacts
 COPY --from=builder --chown=node:node /app/packages/frontend/build ./packages/frontend/build
 COPY --from=builder --chown=node:node /app/packages/frontend/node_modules ./packages/frontend/node_modules
 COPY --from=builder --chown=node:node /app/packages/frontend/package.json ./packages/frontend/package.json
 
-# Copy buttplug artifacts
-COPY --from=builder --chown=node:node /app/packages/buttplug/dist ./packages/buttplug/dist
-COPY --from=builder --chown=node:node /app/packages/buttplug/node_modules ./packages/buttplug/node_modules
-COPY --from=builder --chown=node:node /app/packages/buttplug/package.json ./packages/buttplug/package.json
-
 # Switch to non-root user
 USER node
 

Dockerfile.backend

@@ -3,7 +3,7 @@
 # ============================================================================
 # Builder stage
 # ============================================================================
-FROM node:22.11.0-slim AS builder
+FROM node:22.14.0-slim AS builder
 
 RUN npm install -g corepack@latest && corepack enable
 
@@ -34,7 +34,7 @@ RUN pnpm rebuild argon2 sharp
 # ============================================================================
 # Runner stage
 # ============================================================================
-FROM node:22.11.0-slim AS runner
+FROM node:22.14.0-slim AS runner
 
 RUN apt-get update && apt-get install -y \
     dumb-init \

Dockerfile.buttplug

@@ -0,0 +1,65 @@
+# syntax=docker/dockerfile:1
+
+# ============================================================================
+# Builder stage - compile Rust/WASM and TypeScript
+# ============================================================================
+FROM node:22.14.0-slim AS builder
+
+# Install build dependencies for Rust
+RUN apt-get update && apt-get install -y \
+    curl \
+    build-essential \
+    pkg-config \
+    libssl-dev \
+    ca-certificates \
+    && rm -rf /var/lib/apt/lists/*
+
+# Enable corepack for pnpm
+RUN npm install -g corepack@latest && corepack enable
+
+# Install Rust toolchain
+RUN curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y \
+    --default-toolchain stable \
+    --profile minimal \
+    --target wasm32-unknown-unknown
+
+ENV PATH="/root/.cargo/bin:${PATH}"
+
+# Install wasm-bindgen-cli
+RUN cargo install wasm-bindgen-cli
+
+WORKDIR /app
+
+# Copy workspace configuration
+COPY pnpm-workspace.yaml package.json pnpm-lock.yaml ./
+COPY packages/buttplug ./packages/buttplug
+
+# Install dependencies
+RUN pnpm install --frozen-lockfile --filter @sexy.pivoine.art/buttplug
+
+# Build WASM
+RUN RUSTFLAGS='--cfg getrandom_backend="wasm_js" --cfg=web_sys_unstable_apis' \
+    pnpm --filter @sexy.pivoine.art/buttplug build:wasm
+
+# Build TypeScript
+RUN pnpm --filter @sexy.pivoine.art/buttplug build
+
+# ============================================================================
+# Runner stage - nginx serving dist/ and wasm/
+# ============================================================================
+FROM nginx:1.27-alpine AS runner
+
+# Remove default nginx config
+RUN rm /etc/nginx/conf.d/default.conf
+
+# Copy nginx config
+COPY nginx.buttplug.conf /etc/nginx/conf.d/buttplug.conf
+
+# Copy built artifacts
+COPY --from=builder /app/packages/buttplug/dist /usr/share/nginx/html/dist
+COPY --from=builder /app/packages/buttplug/wasm /usr/share/nginx/html/wasm
+
+EXPOSE 80
+
+HEALTHCHECK --interval=30s --timeout=3s --retries=3 \
+    CMD wget --no-verbose --tries=1 --spider http://localhost/dist/index.js || exit 1

compose.yml

@@ -64,6 +64,21 @@ services:
       timeout: 10s
       retries: 3
       start_period: 20s
+  buttplug:
+    build:
+      context: .
+      dockerfile: Dockerfile.buttplug
+    container_name: sexy_buttplug
+    restart: unless-stopped
+    ports:
+      - "8080:80"
+    healthcheck:
+      test:
+        ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost/dist/index.js"]
+      interval: 30s
+      timeout: 5s
+      retries: 3
+      start_period: 10s
   frontend:
     build:
       context: .
@@ -78,9 +93,12 @@ services:
       HOST: 0.0.0.0
       PUBLIC_API_URL: http://sexy_backend:4000
       PUBLIC_URL: http://localhost:3000
+      BUTTPLUG_URL: http://sexy_buttplug:80
     depends_on:
       backend:
         condition: service_healthy
+      buttplug:
+        condition: service_healthy
 
 volumes:
   uploads_data:

eslint.config.js

@@ -51,7 +51,7 @@ export default ts.config(
       "**/dist/",
       "**/node_modules/",
       "**/migrations/",
-      "packages/buttplug/**",
+      "**/wasm/",
     ],
   },
 );

nginx.buttplug.conf

@@ -0,0 +1,23 @@
+server {
+    listen 80;
+    server_name _;
+
+    root /usr/share/nginx/html;
+
+    # WASM MIME type
+    include /etc/nginx/mime.types;
+    types {
+        application/wasm wasm;
+    }
+
+    # Cache JS and WASM aggressively (content-addressed by build)
+    location ~* \.(js|wasm)$ {
+        add_header Cache-Control "public, max-age=31536000, immutable";
+        add_header Cross-Origin-Resource-Policy "cross-origin";
+        add_header Cross-Origin-Embedder-Policy "require-corp";
+    }
+
+    location / {
+        try_files $uri =404;
+    }
+}

package.json

@@ -5,11 +5,12 @@
   "type": "module",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build:frontend": "git pull && pnpm install && pnpm --filter @sexy.pivoine.art/frontend build",
+    "build:frontend": "pnpm --filter @sexy.pivoine.art/frontend build",
-    "build:backend": "git pull && pnpm install && pnpm --filter @sexy.pivoine.art/backend build",
+    "build:backend": "pnpm --filter @sexy.pivoine.art/backend build",
+    "dev:buttplug": "pnpm --filter @sexy.pivoine.art/buttplug serve",
     "dev:data": "docker compose up -d postgres redis",
     "dev:backend": "pnpm --filter @sexy.pivoine.art/backend dev",
-    "dev": "pnpm dev:data && pnpm dev:backend & pnpm --filter @sexy.pivoine.art/frontend dev",
+    "dev": "pnpm dev:data && pnpm dev:backend & pnpm dev:buttplug & pnpm --filter @sexy.pivoine.art/frontend dev",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "format": "prettier --write .",
@@ -22,7 +23,7 @@
     "email": "valknar@pivoine.art"
   },
   "license": "MIT",
-  "packageManager": "pnpm@10.19.0",
+  "packageManager": "pnpm@10.31.0",
   "pnpm": {
     "onlyBuiltDependencies": [
       "argon2",

packages/backend/package.json

@@ -14,14 +14,15 @@
     "check": "tsc --noEmit"
   },
   "dependencies": {
-    "@sexy.pivoine.art/types": "workspace:*",
     "@fastify/cookie": "^11.0.2",
     "@fastify/cors": "^10.0.2",
     "@fastify/multipart": "^9.0.3",
     "@fastify/static": "^8.1.1",
     "@pothos/core": "^4.4.0",
     "@pothos/plugin-errors": "^4.2.0",
+    "@sexy.pivoine.art/types": "workspace:*",
     "argon2": "^0.43.0",
+    "bullmq": "^5.70.4",
     "drizzle-orm": "^0.44.1",
     "fastify": "^5.4.0",
     "fluent-ffmpeg": "^2.1.3",

packages/backend/src/db/schema/gamification.ts

@@ -8,6 +8,7 @@ import {
   pgEnum,
   uniqueIndex,
 } from "drizzle-orm/pg-core";
+import { sql } from "drizzle-orm";
 import { users } from "./users";
 import { recordings } from "./recordings";
 
@@ -68,6 +69,11 @@ export const user_points = pgTable(
   (t) => [
     index("user_points_user_idx").on(t.user_id),
     index("user_points_date_idx").on(t.date_created),
+    uniqueIndex("user_points_unique_action_recording")
+      .on(t.user_id, t.action, t.recording_id)
+      .where(
+        sql`"action" IN ('RECORDING_CREATE', 'RECORDING_FEATURED') AND "recording_id" IS NOT NULL`,
+      ),
   ],
 );
 

packages/backend/src/graphql/index.ts

@@ -9,6 +9,7 @@ import "./resolvers/recordings.js";
 import "./resolvers/comments.js";
 import "./resolvers/gamification.js";
 import "./resolvers/stats.js";
+import "./resolvers/queues.js";
 import { builder } from "./builder";
 
 export const schema = builder.toSchema();

packages/backend/src/graphql/resolvers/auth.ts

@@ -9,7 +9,7 @@ interface ReplyLike {
 }
 import { hash, verify as verifyArgon } from "../../lib/argon";
 import { setSession, deleteSession } from "../../lib/auth";
-import { sendVerification, sendPasswordReset } from "../../lib/email";
+import { enqueueVerification, enqueuePasswordReset } from "../../lib/email";
 import { slugify } from "../../lib/slugify";
 import { nanoid } from "nanoid";
 
@@ -131,9 +131,9 @@ builder.mutationField("register", (t) =>
       });
 
       try {
-        await sendVerification(args.email, verifyToken);
+        await enqueueVerification(args.email, verifyToken);
       } catch (e) {
-        console.warn("Failed to send verification email:", (e as Error).message);
+        console.warn("Failed to enqueue verification email:", (e as Error).message);
       }
       return true;
     },
@@ -190,9 +190,9 @@ builder.mutationField("requestPasswordReset", (t) =>
         .where(eq(users.id, user[0].id));
 
       try {
-        await sendPasswordReset(args.email, token);
+        await enqueuePasswordReset(args.email, token);
       } catch (e) {
-        console.warn("Failed to send password reset email:", (e as Error).message);
+        console.warn("Failed to enqueue password reset email:", (e as Error).message);
       }
       return true;
     },

packages/backend/src/graphql/resolvers/comments.ts

@@ -3,8 +3,8 @@ import { builder } from "../builder";
 import { CommentType, AdminCommentListType } from "../types/index";
 import { comments, users } from "../../db/schema/index";
 import { eq, and, desc, ilike, count } from "drizzle-orm";
-import { awardPoints, checkAchievements } from "../../lib/gamification";
 import { requireOwnerOrAdmin, requireAdmin } from "../../lib/acl";
+import { gamificationQueue } from "../../queues/index";
 
 builder.queryField("commentsForVideo", (t) =>
   t.field({
@@ -59,10 +59,16 @@ builder.mutationField("createCommentForVideo", (t) =>
         })
         .returning();
 
-      // Gamification (non-blocking)
+      await gamificationQueue.add("awardPoints", {
-      awardPoints(ctx.db, ctx.currentUser.id, "COMMENT_CREATE")
+        job: "awardPoints",
-        .then(() => checkAchievements(ctx.db, ctx.currentUser!.id, "social"))
+        userId: ctx.currentUser.id,
-        .catch((e) => console.error("Gamification error on comment:", e));
+        action: "COMMENT_CREATE",
+      });
+      await gamificationQueue.add("checkAchievements", {
+        job: "checkAchievements",
+        userId: ctx.currentUser.id,
+        category: "social",
+      });
 
       const user = await ctx.db
         .select({
@@ -92,6 +98,18 @@ builder.mutationField("deleteComment", (t) =>
       if (!comment[0]) throw new GraphQLError("Comment not found");
       requireOwnerOrAdmin(ctx, comment[0].user_id);
       await ctx.db.delete(comments).where(eq(comments.id, args.id));
+
+      await gamificationQueue.add("revokePoints", {
+        job: "revokePoints",
+        userId: comment[0].user_id,
+        action: "COMMENT_CREATE",
+      });
+      await gamificationQueue.add("checkAchievements", {
+        job: "checkAchievements",
+        userId: comment[0].user_id,
+        category: "social",
+      });
+
       return true;
     },
   }),

packages/backend/src/graphql/resolvers/queues.ts

@@ -0,0 +1,151 @@
+import { GraphQLError } from "graphql";
+import type { Job } from "bullmq";
+import { builder } from "../builder.js";
+import { JobType, QueueInfoType } from "../types/index.js";
+import { queues } from "../../queues/index.js";
+import { requireAdmin } from "../../lib/acl.js";
+
+const JOB_STATUSES = ["waiting", "active", "completed", "failed", "delayed"] as const;
+type JobStatus = (typeof JOB_STATUSES)[number];
+
+async function toJobData(job: Job, queueName: string) {
+  const status = await job.getState();
+  return {
+    id: job.id ?? "",
+    name: job.name,
+    queue: queueName,
+    status,
+    data: job.data as unknown,
+    result: job.returnvalue as unknown,
+    failedReason: job.failedReason ?? null,
+    attemptsMade: job.attemptsMade,
+    createdAt: new Date(job.timestamp),
+    processedAt: job.processedOn ? new Date(job.processedOn) : null,
+    finishedAt: job.finishedOn ? new Date(job.finishedOn) : null,
+    progress: typeof job.progress === "number" ? job.progress : null,
+  };
+}
+
+builder.queryField("adminQueues", (t) =>
+  t.field({
+    type: [QueueInfoType],
+    resolve: async (_root, _args, ctx) => {
+      requireAdmin(ctx);
+      return Promise.all(
+        Object.entries(queues).map(async ([name, queue]) => {
+          const counts = await queue.getJobCounts(
+            "waiting",
+            "active",
+            "completed",
+            "failed",
+            "delayed",
+            "paused",
+          );
+          const isPaused = await queue.isPaused();
+          return {
+            name,
+            counts: {
+              waiting: counts.waiting ?? 0,
+              active: counts.active ?? 0,
+              completed: counts.completed ?? 0,
+              failed: counts.failed ?? 0,
+              delayed: counts.delayed ?? 0,
+              paused: counts.paused ?? 0,
+            },
+            isPaused,
+          };
+        }),
+      );
+    },
+  }),
+);
+
+builder.queryField("adminQueueJobs", (t) =>
+  t.field({
+    type: [JobType],
+    args: {
+      queue: t.arg.string({ required: true }),
+      status: t.arg.string(),
+      limit: t.arg.int(),
+      offset: t.arg.int(),
+    },
+    resolve: async (_root, args, ctx) => {
+      requireAdmin(ctx);
+      const queue = queues[args.queue];
+      if (!queue) throw new GraphQLError(`Queue "${args.queue}" not found`);
+
+      const limit = args.limit ?? 25;
+      const offset = args.offset ?? 0;
+      const statuses: JobStatus[] = args.status ? [args.status as JobStatus] : [...JOB_STATUSES];
+
+      const jobs = await queue.getJobs(statuses, offset, offset + limit - 1);
+      return Promise.all(jobs.map((job) => toJobData(job, args.queue)));
+    },
+  }),
+);
+
+builder.mutationField("adminRetryJob", (t) =>
+  t.field({
+    type: "Boolean",
+    args: {
+      queue: t.arg.string({ required: true }),
+      jobId: t.arg.string({ required: true }),
+    },
+    resolve: async (_root, args, ctx) => {
+      requireAdmin(ctx);
+      const queue = queues[args.queue];
+      if (!queue) throw new GraphQLError(`Queue "${args.queue}" not found`);
+      const job = await queue.getJob(args.jobId);
+      if (!job) throw new GraphQLError(`Job "${args.jobId}" not found`);
+      await job.retry();
+      return true;
+    },
+  }),
+);
+
+builder.mutationField("adminRemoveJob", (t) =>
+  t.field({
+    type: "Boolean",
+    args: {
+      queue: t.arg.string({ required: true }),
+      jobId: t.arg.string({ required: true }),
+    },
+    resolve: async (_root, args, ctx) => {
+      requireAdmin(ctx);
+      const queue = queues[args.queue];
+      if (!queue) throw new GraphQLError(`Queue "${args.queue}" not found`);
+      const job = await queue.getJob(args.jobId);
+      if (!job) throw new GraphQLError(`Job "${args.jobId}" not found`);
+      await job.remove();
+      return true;
+    },
+  }),
+);
+
+builder.mutationField("adminPauseQueue", (t) =>
+  t.field({
+    type: "Boolean",
+    args: { queue: t.arg.string({ required: true }) },
+    resolve: async (_root, args, ctx) => {
+      requireAdmin(ctx);
+      const queue = queues[args.queue];
+      if (!queue) throw new GraphQLError(`Queue "${args.queue}" not found`);
+      await queue.pause();
+      return true;
+    },
+  }),
+);
+
+builder.mutationField("adminResumeQueue", (t) =>
+  t.field({
+    type: "Boolean",
+    args: { queue: t.arg.string({ required: true }) },
+    resolve: async (_root, args, ctx) => {
+      requireAdmin(ctx);
+      const queue = queues[args.queue];
+      if (!queue) throw new GraphQLError(`Queue "${args.queue}" not found`);
+      await queue.resume();
+      return true;
+    },
+  }),
+);

packages/backend/src/graphql/resolvers/recordings.ts

@@ -4,8 +4,8 @@ import { RecordingType, AdminRecordingListType } from "../types/index";
 import { recordings, recording_plays } from "../../db/schema/index";
 import { eq, and, desc, ilike, count, type SQL } from "drizzle-orm";
 import { slugify } from "../../lib/slugify";
-import { awardPoints, checkAchievements } from "../../lib/gamification";
 import { requireAdmin } from "../../lib/acl";
+import { gamificationQueue } from "../../queues/index";
 
 builder.queryField("recordings", (t) =>
   t.field({
@@ -122,11 +122,18 @@ builder.mutationField("createRecording", (t) =>
 
       const recording = newRecording[0];
 
-      // Gamification (non-blocking)
       if (recording.status === "published") {
-        awardPoints(ctx.db, ctx.currentUser.id, "RECORDING_CREATE", recording.id)
+        await gamificationQueue.add("awardPoints", {
-          .then(() => checkAchievements(ctx.db, ctx.currentUser!.id, "recordings"))
+          job: "awardPoints",
-          .catch((e) => console.error("Gamification error on recording create:", e));
+          userId: ctx.currentUser.id,
+          action: "RECORDING_CREATE",
+          recordingId: recording.id,
+        });
+        await gamificationQueue.add("checkAchievements", {
+          job: "checkAchievements",
+          userId: ctx.currentUser.id,
+          category: "recordings",
+        });
       }
 
       return recording;
@@ -180,15 +187,45 @@ builder.mutationField("updateRecording", (t) =>
 
       const recording = updated[0];
 
-      // Gamification (non-blocking)
       if (args.status === "published" && existing[0].status !== "published") {
-        awardPoints(ctx.db, ctx.currentUser.id, "RECORDING_CREATE", recording.id)
+        // draft → published: award creation points
-          .then(() => checkAchievements(ctx.db, ctx.currentUser!.id, "recordings"))
+        await gamificationQueue.add("awardPoints", {
-          .catch((e) => console.error("Gamification error on recording publish:", e));
+          job: "awardPoints",
+          userId: ctx.currentUser.id,
+          action: "RECORDING_CREATE",
+          recordingId: recording.id,
+        });
+        await gamificationQueue.add("checkAchievements", {
+          job: "checkAchievements",
+          userId: ctx.currentUser.id,
+          category: "recordings",
+        });
+      } else if (args.status === "draft" && existing[0].status === "published") {
+        // published → draft: revoke creation points
+        await gamificationQueue.add("revokePoints", {
+          job: "revokePoints",
+          userId: ctx.currentUser.id,
+          action: "RECORDING_CREATE",
+          recordingId: recording.id,
+        });
+        await gamificationQueue.add("checkAchievements", {
+          job: "checkAchievements",
+          userId: ctx.currentUser.id,
+          category: "recordings",
+        });
       } else if (args.status === "published" && recording.featured && !existing[0].featured) {
-        awardPoints(ctx.db, ctx.currentUser.id, "RECORDING_FEATURED", recording.id)
+        // newly featured while published: award featured bonus
-          .then(() => checkAchievements(ctx.db, ctx.currentUser!.id, "recordings"))
+        await gamificationQueue.add("awardPoints", {
-          .catch((e) => console.error("Gamification error on recording feature:", e));
+          job: "awardPoints",
+          userId: ctx.currentUser.id,
+          action: "RECORDING_FEATURED",
+          recordingId: recording.id,
+        });
+        await gamificationQueue.add("checkAchievements", {
+          job: "checkAchievements",
+          userId: ctx.currentUser.id,
+          category: "recordings",
+        });
       }
 
       return recording;
@@ -214,6 +251,28 @@ builder.mutationField("deleteRecording", (t) =>
       if (!existing[0]) throw new GraphQLError("Recording not found");
       if (existing[0].user_id !== ctx.currentUser.id) throw new GraphQLError("Forbidden");
 
+      if (existing[0].status === "published") {
+        await gamificationQueue.add("revokePoints", {
+          job: "revokePoints",
+          userId: ctx.currentUser.id,
+          action: "RECORDING_CREATE",
+          recordingId: args.id,
+        });
+        if (existing[0].featured) {
+          await gamificationQueue.add("revokePoints", {
+            job: "revokePoints",
+            userId: ctx.currentUser.id,
+            action: "RECORDING_FEATURED",
+            recordingId: args.id,
+          });
+        }
+        await gamificationQueue.add("checkAchievements", {
+          job: "checkAchievements",
+          userId: ctx.currentUser.id,
+          category: "content",
+        });
+      }
+
       await ctx.db.delete(recordings).where(eq(recordings.id, args.id));
 
       return true;
@@ -290,11 +349,18 @@ builder.mutationField("recordRecordingPlay", (t) =>
         })
         .returning({ id: recording_plays.id });
 
-      // Gamification (non-blocking)
       if (ctx.currentUser && recording[0].user_id !== ctx.currentUser.id) {
-        awardPoints(ctx.db, ctx.currentUser.id, "RECORDING_PLAY", args.recordingId)
+        await gamificationQueue.add("awardPoints", {
-          .then(() => checkAchievements(ctx.db, ctx.currentUser!.id, "playback"))
+          job: "awardPoints",
-          .catch((e) => console.error("Gamification error on recording play:", e));
+          userId: ctx.currentUser.id,
+          action: "RECORDING_PLAY",
+          recordingId: args.recordingId,
+        });
+        await gamificationQueue.add("checkAchievements", {
+          job: "checkAchievements",
+          userId: ctx.currentUser.id,
+          category: "playback",
+        });
       }
 
       return { success: true, play_id: play[0].id };
@@ -329,11 +395,18 @@ builder.mutationField("updateRecordingPlay", (t) =>
         })
         .where(eq(recording_plays.id, args.playId));
 
-      // Gamification (non-blocking)
       if (args.completed && !wasCompleted && ctx.currentUser) {
-        awardPoints(ctx.db, ctx.currentUser.id, "RECORDING_COMPLETE", existing[0].recording_id)
+        await gamificationQueue.add("awardPoints", {
-          .then(() => checkAchievements(ctx.db, ctx.currentUser!.id, "playback"))
+          job: "awardPoints",
-          .catch((e) => console.error("Gamification error on recording complete:", e));
+          userId: ctx.currentUser.id,
+          action: "RECORDING_COMPLETE",
+          recordingId: existing[0].recording_id,
+        });
+        await gamificationQueue.add("checkAchievements", {
+          job: "checkAchievements",
+          userId: ctx.currentUser.id,
+          category: "playback",
+        });
       }
 
       return true;

packages/backend/src/graphql/types/index.ts

@@ -333,6 +333,74 @@ export const AchievementType = builder.objectRef<Achievement>("Achievement").imp
   }),
 });
 
+// --- Queue / Job types (admin only, not in shared types package) ---
+
+type JobCounts = {
+  waiting: number;
+  active: number;
+  completed: number;
+  failed: number;
+  delayed: number;
+  paused: number;
+};
+
+type JobData = {
+  id: string;
+  name: string;
+  queue: string;
+  status: string;
+  data: unknown;
+  result: unknown;
+  failedReason: string | null;
+  attemptsMade: number;
+  createdAt: Date;
+  processedAt: Date | null;
+  finishedAt: Date | null;
+  progress: number | null;
+};
+
+type QueueInfoData = {
+  name: string;
+  counts: JobCounts;
+  isPaused: boolean;
+};
+
+export const JobCountsType = builder.objectRef<JobCounts>("JobCounts").implement({
+  fields: (t) => ({
+    waiting: t.exposeInt("waiting"),
+    active: t.exposeInt("active"),
+    completed: t.exposeInt("completed"),
+    failed: t.exposeInt("failed"),
+    delayed: t.exposeInt("delayed"),
+    paused: t.exposeInt("paused"),
+  }),
+});
+
+export const JobType = builder.objectRef<JobData>("Job").implement({
+  fields: (t) => ({
+    id: t.exposeString("id"),
+    name: t.exposeString("name"),
+    queue: t.exposeString("queue"),
+    status: t.exposeString("status"),
+    data: t.expose("data", { type: "JSON" }),
+    result: t.expose("result", { type: "JSON", nullable: true }),
+    failedReason: t.exposeString("failedReason", { nullable: true }),
+    attemptsMade: t.exposeInt("attemptsMade"),
+    createdAt: t.expose("createdAt", { type: "DateTime" }),
+    processedAt: t.expose("processedAt", { type: "DateTime", nullable: true }),
+    finishedAt: t.expose("finishedAt", { type: "DateTime", nullable: true }),
+    progress: t.exposeFloat("progress", { nullable: true }),
+  }),
+});
+
+export const QueueInfoType = builder.objectRef<QueueInfoData>("QueueInfo").implement({
+  fields: (t) => ({
+    name: t.exposeString("name"),
+    counts: t.expose("counts", { type: JobCountsType }),
+    isPaused: t.exposeBoolean("isPaused"),
+  }),
+});
+
 export const VideoListType = builder
   .objectRef<{ items: Video[]; total: number }>("VideoList")
   .implement({

packages/backend/src/index.ts

@@ -16,6 +16,8 @@ import { db } from "./db/connection";
 import { redis } from "./lib/auth";
 import { logger } from "./lib/logger";
 import { migrate } from "drizzle-orm/node-postgres/migrator";
+import { startMailWorker } from "./queues/workers/mail";
+import { startGamificationWorker } from "./queues/workers/gamification";
 
 const PORT = parseInt(process.env.PORT || "4000");
 const UPLOAD_DIR = process.env.UPLOAD_DIR || "/data/uploads";
@@ -28,6 +30,11 @@ async function main() {
   await migrate(db, { migrationsFolder });
   logger.info("Migrations complete");
 
+  // Start background workers
+  startMailWorker();
+  startGamificationWorker();
+  logger.info("Queue workers started");
+
   const fastify = Fastify({ loggerInstance: logger });
 
   await fastify.register(fastifyCookie, {

packages/backend/src/lib/email.ts

@@ -1,4 +1,5 @@
 import nodemailer from "nodemailer";
+import { mailQueue } from "../queues/index.js";
 
 const transporter = nodemailer.createTransport({
   host: process.env.SMTP_HOST || "localhost",
@@ -32,3 +33,13 @@ export async function sendPasswordReset(email: string, token: string): Promise<v
     html: `<p>Click <a href="${BASE_URL}/password/reset?token=${token}">here</a> to reset your password.</p>`,
   });
 }
+
+const jobOpts = { attempts: 3, backoff: { type: "exponential" as const, delay: 5000 } };
+
+export async function enqueueVerification(email: string, token: string): Promise<void> {
+  await mailQueue.add("sendVerification", { email, token }, jobOpts);
+}
+
+export async function enqueuePasswordReset(email: string, token: string): Promise<void> {
+  await mailQueue.add("sendPasswordReset", { email, token }, jobOpts);
+}

packages/backend/src/lib/gamification.ts

@@ -1,4 +1,4 @@
-import { eq, sql, and, gt, isNotNull, count, sum } from "drizzle-orm";
+import { eq, sql, and, gt, isNull, isNotNull, count, sum } from "drizzle-orm";
 import type { DB } from "../db/connection";
 import {
   user_points,
@@ -28,21 +28,57 @@ export async function awardPoints(
   recordingId?: string,
 ): Promise<void> {
   const points = POINT_VALUES[action];
-  await db.insert(user_points).values({
+  await db
+    .insert(user_points)
+    .values({
       user_id: userId,
       action,
       points,
       recording_id: recordingId || null,
       date_created: new Date(),
-  });
+    })
+    .onConflictDoNothing();
+  await updateUserStats(db, userId);
+}
+
+export async function revokePoints(
+  db: DB,
+  userId: string,
+  action: keyof typeof POINT_VALUES,
+  recordingId?: string,
+): Promise<void> {
+  const recordingCondition = recordingId
+    ? eq(user_points.recording_id, recordingId)
+    : isNull(user_points.recording_id);
+
+  // When no recordingId (e.g. COMMENT_CREATE), delete only one row so each
+  // revoke undoes exactly one prior award.
+  if (!recordingId) {
+    const row = await db
+      .select({ id: user_points.id })
+      .from(user_points)
+      .where(
+        and(eq(user_points.user_id, userId), eq(user_points.action, action), recordingCondition),
+      )
+      .limit(1);
+    if (row[0]) {
+      await db.delete(user_points).where(eq(user_points.id, row[0].id));
+    }
+  } else {
+    await db
+      .delete(user_points)
+      .where(
+        and(eq(user_points.user_id, userId), eq(user_points.action, action), recordingCondition),
+      );
+  }
+
   await updateUserStats(db, userId);
 }
 
 export async function calculateWeightedScore(db: DB, userId: string): Promise<number> {
-  const now = new Date();
   const result = await db.execute(sql`
     SELECT SUM(
-      points * EXP(-${DECAY_LAMBDA} * EXTRACT(EPOCH FROM (${now}::timestamptz - date_created)) / 86400)
+      points * EXP(${sql.raw(String(-DECAY_LAMBDA))} * EXTRACT(EPOCH FROM (NOW() - date_created)) / 86400)
     ) as weighted_score
     FROM user_points
     WHERE user_id = ${userId}
@@ -96,7 +132,7 @@ export async function updateUserStats(db: DB, userId: string): Promise<void> {
   const commentsResult = await db
     .select({ count: count() })
     .from(comments)
-    .where(and(eq(comments.user_id, userId), eq(comments.collection, "recordings")));
+    .where(and(eq(comments.user_id, userId), eq(comments.collection, "videos")));
   const commentsCount = commentsResult[0]?.count || 0;
 
   const achievementsResult = await db
@@ -175,7 +211,9 @@ export async function checkAchievements(db: DB, userId: string, category?: strin
         .update(user_achievements)
         .set({
           progress,
-          date_unlocked: isUnlocked ? existing[0].date_unlocked || new Date() : null,
+          date_unlocked: isUnlocked
+            ? (existing[0].date_unlocked ?? new Date())
+            : existing[0].date_unlocked,
         })
         .where(
           and(
@@ -257,7 +295,7 @@ async function getAchievementProgress(
     const result = await db
       .select({ count: count() })
       .from(comments)
-      .where(and(eq(comments.user_id, userId), eq(comments.collection, "recordings")));
+      .where(and(eq(comments.user_id, userId), eq(comments.collection, "videos")));
     return result[0]?.count || 0;
   }
 

packages/backend/src/migrations/0004_gamification_unique.sql

@@ -0,0 +1,6 @@
+-- Partial unique index: prevents duplicate RECORDING_CREATE / RECORDING_FEATURED points
+-- for the same recording. RECORDING_PLAY / RECORDING_COMPLETE are excluded so a user
+-- can earn play points across multiple sessions.
+CREATE UNIQUE INDEX "user_points_unique_action_recording"
+ON "user_points" ("user_id", "action", "recording_id")
+WHERE "action" IN ('RECORDING_CREATE', 'RECORDING_FEATURED') AND "recording_id" IS NOT NULL;

packages/backend/src/queues/connection.ts

@@ -0,0 +1,16 @@
+function parseRedisUrl(url: string): { host: string; port: number; password?: string } {
+  const parsed = new URL(url);
+  return {
+    host: parsed.hostname,
+    port: parseInt(parsed.port) || 6379,
+    password: parsed.password || undefined,
+  };
+}
+
+// BullMQ creates its own IORedis connections from these options.
+// maxRetriesPerRequest: null is required for workers.
+export const redisConnectionOpts = {
+  ...parseRedisUrl(process.env.REDIS_URL || "redis://localhost:6379"),
+  maxRetriesPerRequest: null as null,
+  enableReadyCheck: false,
+};

packages/backend/src/queues/index.ts

@@ -0,0 +1,25 @@
+import { Queue } from "bullmq";
+import { redisConnectionOpts } from "./connection.js";
+import { logger } from "../lib/logger.js";
+
+const log = logger.child({ component: "queues" });
+
+export const mailQueue = new Queue("mail", { connection: redisConnectionOpts });
+mailQueue.on("error", (err) => {
+  log.error({ queue: "mail", err: err.message }, "Queue error");
+});
+
+export const gamificationQueue = new Queue("gamification", {
+  connection: redisConnectionOpts,
+  defaultJobOptions: { attempts: 3, backoff: { type: "exponential", delay: 2000 } },
+});
+gamificationQueue.on("error", (err) => {
+  log.error({ queue: "gamification", err: err.message }, "Queue error");
+});
+
+log.info("Queues initialized");
+
+export const queues: Record<string, Queue> = {
+  mail: mailQueue,
+  gamification: gamificationQueue,
+};

packages/backend/src/queues/workers/gamification.ts

@@ -0,0 +1,52 @@
+import { Worker } from "bullmq";
+import { redisConnectionOpts } from "../connection.js";
+import { awardPoints, revokePoints, checkAchievements } from "../../lib/gamification.js";
+import { db } from "../../db/connection.js";
+import { logger } from "../../lib/logger.js";
+import type { POINT_VALUES } from "../../lib/gamification.js";
+
+const log = logger.child({ component: "gamification-worker" });
+
+export type GamificationJobData =
+  | { job: "awardPoints"; userId: string; action: keyof typeof POINT_VALUES; recordingId?: string }
+  | { job: "revokePoints"; userId: string; action: keyof typeof POINT_VALUES; recordingId?: string }
+  | { job: "checkAchievements"; userId: string; category?: string };
+
+export function startGamificationWorker(): Worker {
+  const worker = new Worker(
+    "gamification",
+    async (bullJob) => {
+      const data = bullJob.data as GamificationJobData;
+      log.info(
+        { jobId: bullJob.id, job: data.job, userId: data.userId },
+        "Processing gamification job",
+      );
+
+      switch (data.job) {
+        case "awardPoints":
+          await awardPoints(db, data.userId, data.action, data.recordingId);
+          break;
+        case "revokePoints":
+          await revokePoints(db, data.userId, data.action, data.recordingId);
+          break;
+        case "checkAchievements":
+          await checkAchievements(db, data.userId, data.category);
+          break;
+        default:
+          throw new Error(`Unknown gamification job: ${(data as GamificationJobData).job}`);
+      }
+
+      log.info({ jobId: bullJob.id, job: data.job }, "Gamification job completed");
+    },
+    { connection: redisConnectionOpts },
+  );
+
+  worker.on("failed", (bullJob, err) => {
+    log.error(
+      { jobId: bullJob?.id, job: (bullJob?.data as GamificationJobData)?.job, err: err.message },
+      "Gamification job failed",
+    );
+  });
+
+  return worker;
+}

packages/backend/src/queues/workers/mail.ts

@@ -0,0 +1,33 @@
+import { Worker } from "bullmq";
+import { redisConnectionOpts } from "../connection.js";
+import { sendVerification, sendPasswordReset } from "../../lib/email.js";
+import { logger } from "../../lib/logger.js";
+
+const log = logger.child({ component: "mail-worker" });
+
+export function startMailWorker(): Worker {
+  const worker = new Worker(
+    "mail",
+    async (job) => {
+      log.info({ jobId: job.id, jobName: job.name }, `Processing mail job`);
+      switch (job.name) {
+        case "sendVerification":
+          await sendVerification(job.data.email as string, job.data.token as string);
+          break;
+        case "sendPasswordReset":
+          await sendPasswordReset(job.data.email as string, job.data.token as string);
+          break;
+        default:
+          throw new Error(`Unknown mail job: ${job.name}`);
+      }
+      log.info({ jobId: job.id, jobName: job.name }, `Mail job completed`);
+    },
+    { connection: redisConnectionOpts },
+  );
+
+  worker.on("failed", (job, err) => {
+    log.error({ jobId: job?.id, jobName: job?.name, err: err.message }, `Mail job failed`);
+  });
+
+  return worker;
+}

packages/buttplug/.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+dist/
+wasm/
+target/
+pkg/

packages/buttplug/package.json

@@ -2,6 +2,7 @@
   "name": "@sexy.pivoine.art/buttplug",
   "version": "1.0.0",
   "type": "module",
+  "private": true,
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -10,7 +11,8 @@
   ],
   "scripts": {
     "build": "vite build",
-    "build:wasm": "wasm-pack build --out-dir wasm --out-name index --target bundler --release"
+    "build:wasm": "wasm-pack build --out-dir wasm --out-name index --target web --release",
+    "serve": "node serve.mjs"
   },
   "dependencies": {
     "eventemitter3": "^5.0.4",

packages/buttplug/serve.mjs

@@ -0,0 +1,39 @@
+#!/usr/bin/env node
+// Simple static server for local development — serves dist/ and wasm/ on port 8080
+import http from "http";
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const PORT = process.env.PORT ?? 8080;
+
+const MIME = {
+  ".js": "application/javascript",
+  ".wasm": "application/wasm",
+  ".ts": "text/plain",
+  ".d.ts": "text/plain",
+};
+
+http
+  .createServer((req, res) => {
+    const filePath = path.join(__dirname, decodeURIComponent(req.url.split("?")[0]));
+    const ext = path.extname(filePath);
+
+    fs.readFile(filePath, (err, data) => {
+      if (err) {
+        res.writeHead(404);
+        res.end("Not found");
+        return;
+      }
+      res.writeHead(200, {
+        "Content-Type": MIME[ext] ?? "application/octet-stream",
+        "Cache-Control": "no-cache",
+        "Cross-Origin-Resource-Policy": "cross-origin",
+      });
+      res.end(data);
+    });
+  })
+  .listen(PORT, () => {
+    console.log(`[buttplug] serving on http://localhost:${PORT}`);
+  });

packages/buttplug/src/client/ButtplugBrowserWebsocketClientConnector.ts

@@ -8,8 +8,8 @@
 
 "use strict";
 
-import { IButtplugClientConnector } from "./IButtplugClientConnector";
+import { type IButtplugClientConnector } from "./IButtplugClientConnector";
-import { ButtplugMessage } from "../core/Messages";
+import { type ButtplugMessage } from "../core/Messages";
 import { ButtplugBrowserWebsocketConnector } from "../utils/ButtplugBrowserWebsocketConnector";
 
 export class ButtplugBrowserWebsocketClientConnector

packages/buttplug/src/client/ButtplugClient.ts

@@ -11,7 +11,7 @@
 import { ButtplugLogger } from "../core/Logging";
 import { EventEmitter } from "eventemitter3";
 import { ButtplugClientDevice } from "./ButtplugClientDevice";
-import { IButtplugClientConnector } from "./IButtplugClientConnector";
+import { type IButtplugClientConnector } from "./IButtplugClientConnector";
 import { ButtplugMessageSorter } from "../utils/ButtplugMessageSorter";
 import * as Messages from "../core/Messages";
 import { ButtplugError, ButtplugInitError, ButtplugMessageError } from "../core/Exceptions";
@@ -158,7 +158,7 @@ export class ButtplugClient extends EventEmitter {
   };
 
   private parseDeviceList = (list: Messages.DeviceList) => {
-    for (let [_, d] of Object.entries(list.Devices)) {
+    for (const [_, d] of Object.entries(list.Devices)) {
       if (!this._devices.has(d.DeviceIndex)) {
         const device = ButtplugClientDevice.fromMsg(d, this.sendMessageClosure);
         this._logger.Debug(`ButtplugClient: Adding Device: ${device}`);
@@ -168,8 +168,8 @@ export class ButtplugClient extends EventEmitter {
         this._logger.Debug(`ButtplugClient: Device already added: ${d}`);
       }
     }
-    for (let [index, device] of this._devices.entries()) {
+    for (const [index, device] of this._devices.entries()) {
-      if (!list.Devices.hasOwnProperty(index.toString())) {
+      if (!Object.prototype.hasOwnProperty.call(list.Devices, index.toString())) {
         this._devices.delete(index);
         this.emit("deviceremoved", device);
       }

packages/buttplug/src/client/ButtplugClientDevice.ts

@@ -11,7 +11,7 @@ import * as Messages from "../core/Messages";
 import { ButtplugDeviceError, ButtplugError, ButtplugMessageError } from "../core/Exceptions";
 import { EventEmitter } from "eventemitter3";
 import { ButtplugClientDeviceFeature } from "./ButtplugClientDeviceFeature";
-import { DeviceOutputCommand } from "./ButtplugClientDeviceCommand";
+import { type DeviceOutputCommand } from "./ButtplugClientDeviceCommand";
 
 /**
  * Represents an abstract device, capable of taking certain kinds of messages.
@@ -105,14 +105,22 @@ export class ButtplugClientDevice extends EventEmitter {
   };
 
   protected isOutputValid(featureIndex: number, type: Messages.OutputType) {
-    if (!this._deviceInfo.DeviceFeatures.hasOwnProperty(featureIndex.toString())) {
+    if (
+      !Object.prototype.hasOwnProperty.call(
+        this._deviceInfo.DeviceFeatures,
+        featureIndex.toString(),
+      )
+    ) {
       throw new ButtplugDeviceError(
         `Feature index ${featureIndex} does not exist for device ${this.name}`,
       );
     }
     if (
       this._deviceInfo.DeviceFeatures[featureIndex.toString()].Outputs !== undefined &&
-      !this._deviceInfo.DeviceFeatures[featureIndex.toString()].Outputs.hasOwnProperty(type)
+      !Object.prototype.hasOwnProperty.call(
+        this._deviceInfo.DeviceFeatures[featureIndex.toString()].Outputs,
+        type,
+      )
     ) {
       throw new ButtplugDeviceError(
         `Feature index ${featureIndex} does not support type ${type} for device ${this.name}`,
@@ -139,8 +147,8 @@ export class ButtplugClientDevice extends EventEmitter {
   }
 
   public async runOutput(cmd: DeviceOutputCommand): Promise<void> {
-    let p: Promise<void>[] = [];
+    const p: Promise<void>[] = [];
-    for (let f of this._features.values()) {
+    for (const f of this._features.values()) {
       if (f.hasOutput(cmd.outputType)) {
         p.push(f.runOutput(cmd));
       }
@@ -164,11 +172,14 @@ export class ButtplugClientDevice extends EventEmitter {
   }
 
   public async battery(): Promise<number> {
-    let p: Promise<void>[] = [];
+    const _p: Promise<void>[] = [];
-    for (let f of this._features.values()) {
+    for (const f of this._features.values()) {
       if (f.hasInput(Messages.InputType.Battery)) {
         // Right now, we only have one battery per device, so assume the first one we find is it.
-        let response = await f.runInput(Messages.InputType.Battery, Messages.InputCommandType.Read);
+        const response = await f.runInput(
+          Messages.InputType.Battery,
+          Messages.InputCommandType.Read,
+        );
         if (response === undefined) {
           throw new ButtplugMessageError("Got incorrect message back.");
         }

packages/buttplug/src/client/ButtplugClientDeviceCommand.ts

@@ -14,7 +14,7 @@ class PercentOrSteps {
   }
 
   public static createSteps(s: number): PercentOrSteps {
-    let v = new PercentOrSteps();
+    const v = new PercentOrSteps();
     v._steps = s;
     return v;
   }
@@ -24,7 +24,7 @@ class PercentOrSteps {
       throw new ButtplugDeviceError(`Percent value ${p} is not in the range 0.0 <= x <= 1.0`);
     }
 
-    let v = new PercentOrSteps();
+    const v = new PercentOrSteps();
     v._percent = p;
     return v;
   }

packages/buttplug/src/client/ButtplugClientDeviceFeature.ts

@@ -1,6 +1,6 @@
 import { ButtplugDeviceError, ButtplugError, ButtplugMessageError } from "../core/Exceptions";
 import * as Messages from "../core/Messages";
-import { DeviceOutputCommand } from "./ButtplugClientDeviceCommand";
+import { type DeviceOutputCommand } from "./ButtplugClientDeviceCommand";
 
 export class ButtplugClientDeviceFeature {
   constructor(
@@ -26,7 +26,10 @@ export class ButtplugClientDeviceFeature {
   };
 
   protected isOutputValid(type: Messages.OutputType) {
-    if (this._feature.Output !== undefined && !this._feature.Output.hasOwnProperty(type)) {
+    if (
+      this._feature.Output !== undefined &&
+      !Object.prototype.hasOwnProperty.call(this._feature.Output, type)
+    ) {
       throw new ButtplugDeviceError(
         `Feature index ${this._feature.FeatureIndex} does not support type ${type} for device ${this._deviceName}`,
       );
@@ -34,7 +37,10 @@ export class ButtplugClientDeviceFeature {
   }
 
   protected isInputValid(type: Messages.InputType) {
-    if (this._feature.Input !== undefined && !this._feature.Input.hasOwnProperty(type)) {
+    if (
+      this._feature.Input !== undefined &&
+      !Object.prototype.hasOwnProperty.call(this._feature.Input, type)
+    ) {
       throw new ButtplugDeviceError(
         `Feature index ${this._feature.FeatureIndex} does not support type ${type} for device ${this._deviceName}`,
       );
@@ -48,7 +54,7 @@ export class ButtplugClientDeviceFeature {
       throw new ButtplugDeviceError(`${command.outputType} requires value defined`);
     }
 
-    let type = command.outputType;
+    const type = command.outputType;
     let duration: undefined | number = undefined;
     if (type == Messages.OutputType.HwPositionWithDuration) {
       if (command.duration === undefined) {
@@ -57,18 +63,18 @@ export class ButtplugClientDeviceFeature {
       duration = command.duration;
     }
     let value: number;
-    let p = command.value;
+    const p = command.value;
     if (p.percent === undefined) {
       // TODO Check step limits here
       value = command.value.steps!;
     } else {
       value = Math.ceil(this._feature.Output[type]!.Value![1] * p.percent);
     }
-    let newCommand: Messages.DeviceFeatureOutput = { Value: value, Duration: duration };
+    const newCommand: Messages.DeviceFeatureOutput = { Value: value, Duration: duration };
-    let outCommand = {};
+    const outCommand = {};
     outCommand[type.toString()] = newCommand;
 
-    let cmd: Messages.ButtplugMessage = {
+    const cmd: Messages.ButtplugMessage = {
       OutputCmd: {
         Id: 1,
         DeviceIndex: this._deviceIndex,
@@ -111,14 +117,14 @@ export class ButtplugClientDeviceFeature {
 
   public hasOutput(type: Messages.OutputType): boolean {
     if (this._feature.Output !== undefined) {
-      return this._feature.Output.hasOwnProperty(type.toString());
+      return Object.prototype.hasOwnProperty.call(this._feature.Output, type.toString());
     }
     return false;
   }
 
   public hasInput(type: Messages.InputType): boolean {
     if (this._feature.Input !== undefined) {
-      return this._feature.Input.hasOwnProperty(type.toString());
+      return Object.prototype.hasOwnProperty.call(this._feature.Input, type.toString());
     }
     return false;
   }
@@ -126,7 +132,7 @@ export class ButtplugClientDeviceFeature {
   public async runOutput(cmd: DeviceOutputCommand): Promise<void> {
     if (
       this._feature.Output !== undefined &&
-      this._feature.Output.hasOwnProperty(cmd.outputType.toString())
+      Object.prototype.hasOwnProperty.call(this._feature.Output, cmd.outputType.toString())
     ) {
       return this.sendOutputCmd(cmd);
     }
@@ -139,7 +145,7 @@ export class ButtplugClientDeviceFeature {
   ): Promise<Messages.InputReading | undefined> {
     // Make sure the requested feature is valid
     this.isInputValid(inputType);
-    let inputAttributes = this._feature.Input[inputType];
+    const inputAttributes = this._feature.Input[inputType];
     console.log(this._feature.Input);
     if (
       inputCommand === Messages.InputCommandType.Unsubscribe &&
@@ -149,7 +155,7 @@ export class ButtplugClientDeviceFeature {
       throw new ButtplugDeviceError(`${inputType} does not support command ${inputCommand}`);
     }
 
-    let cmd: Messages.ButtplugMessage = {
+    const cmd: Messages.ButtplugMessage = {
       InputCmd: {
         Id: 1,
         DeviceIndex: this._deviceIndex,

packages/buttplug/src/client/IButtplugClientConnector.ts

@@ -6,8 +6,8 @@
  * @copyright Copyright (c) Nonpolynomial Labs LLC. All rights reserved.
  */
 
-import { ButtplugMessage } from "../core/Messages";
+import { type ButtplugMessage } from "../core/Messages";
-import { EventEmitter } from "eventemitter3";
+import { type EventEmitter } from "eventemitter3";
 
 export interface IButtplugClientConnector extends EventEmitter {
   connect: () => Promise<void>;

packages/buttplug/src/core/Exceptions.ts

@@ -7,7 +7,7 @@
  */
 
 import * as Messages from "./Messages";
-import { ButtplugLogger } from "./Logging";
+import { type ButtplugLogger } from "./Logging";
 
 export class ButtplugError extends Error {
   public get ErrorClass(): Messages.ErrorClass {

packages/buttplug/src/core/Messages.ts

@@ -36,7 +36,7 @@ export interface ButtplugMessage {
 }
 
 export function msgId(msg: ButtplugMessage): number {
-  for (let [_, entry] of Object.entries(msg)) {
+  for (const [_, entry] of Object.entries(msg)) {
     if (entry != undefined) {
       return entry.Id;
     }
@@ -45,7 +45,7 @@ export function msgId(msg: ButtplugMessage): number {
 }
 
 export function setMsgId(msg: ButtplugMessage, id: number) {
-  for (let [_, entry] of Object.entries(msg)) {
+  for (const [_, entry] of Object.entries(msg)) {
     if (entry != undefined) {
       entry.Id = id;
       return;

packages/buttplug/src/index.ts

@@ -6,8 +6,8 @@
  * @copyright Copyright (c) Nonpolynomial Labs LLC. All rights reserved.
  */
 
-import { ButtplugMessage } from "./core/Messages";
+import { type ButtplugMessage } from "./core/Messages";
-import { IButtplugClientConnector } from "./client/IButtplugClientConnector";
+import { type IButtplugClientConnector } from "./client/IButtplugClientConnector";
 import { EventEmitter } from "eventemitter3";
 
 export * from "./client/ButtplugClient";
@@ -40,7 +40,9 @@ export class ButtplugWasmClientConnector extends EventEmitter implements IButtpl
 
   private static maybeLoadWasm = async () => {
     if (ButtplugWasmClientConnector.wasmInstance == undefined) {
-      ButtplugWasmClientConnector.wasmInstance = await import("../wasm/index.js");
+      const wasmModule = await import("../wasm/index.js");
+      await wasmModule.default(); // --target web requires calling init() before using exports
+      ButtplugWasmClientConnector.wasmInstance = wasmModule;
     }
   };
 

packages/buttplug/src/lib.rs

@@ -23,6 +23,7 @@ type FFICallback = js_sys::Function;
 type FFICallbackContext = u32;
 
 #[derive(Clone, Copy)]
+#[allow(dead_code)]
 pub struct FFICallbackContextWrapper(FFICallbackContext);
 
 unsafe impl Send for FFICallbackContextWrapper {
@@ -50,7 +51,7 @@ pub fn send_server_message(
     let buf = json.as_bytes();
     let this = JsValue::null();
     let uint8buf = unsafe { Uint8Array::new(&Uint8Array::view(buf)) };
-    callback.call1(&this, &JsValue::from(uint8buf));
+    let _ = callback.call1(&this, &JsValue::from(uint8buf));
   }
 }
 
@@ -119,7 +120,7 @@ pub fn buttplug_client_send_json_message(
       let buf = json.as_bytes();
       let this = JsValue::null();
       let uint8buf = unsafe { Uint8Array::new(&Uint8Array::view(buf)) };
-      callback.call1(&this, &JsValue::from(uint8buf));
+      let _ = callback.call1(&this, &JsValue::from(uint8buf));
     }
   });
 }

packages/buttplug/src/utils/ButtplugBrowserWebsocketConnector.ts

@@ -9,7 +9,7 @@
 "use strict";
 
 import { EventEmitter } from "eventemitter3";
-import { ButtplugMessage } from "../core/Messages";
+import { type ButtplugMessage } from "../core/Messages";
 
 export class ButtplugBrowserWebsocketConnector extends EventEmitter {
   protected _ws: WebSocket | undefined;

packages/buttplug/src/utils/ButtplugMessageSorter.ts

@@ -40,7 +40,7 @@ export class ButtplugMessageSorter {
   public ParseIncomingMessages(msgs: Messages.ButtplugMessage[]): Messages.ButtplugMessage[] {
     const noMatch: Messages.ButtplugMessage[] = [];
     for (const x of msgs) {
-      let id = Messages.msgId(x);
+      const id = Messages.msgId(x);
       if (id !== Messages.SYSTEM_MESSAGE_ID && this._waitingMsgs.has(id)) {
         const [res, rej] = this._waitingMsgs.get(id)!;
         this._waitingMsgs.delete(id);

packages/buttplug/src/webbluetooth/webbluetooth_hardware.rs

@@ -184,6 +184,7 @@ impl HardwareSpecializer for WebBluetoothHardwareSpecializer {
 pub enum WebBluetoothEvent {
   // This is the only way we have to get our endpoints back to device creation
   // right now. My god this is a mess.
+  #[allow(dead_code)]
   Connected(Vec<Endpoint>),
   Disconnected,
 }
@@ -201,6 +202,7 @@ pub enum WebBluetoothDeviceCommand {
     HardwareSubscribeCmd,
     oneshot::Sender<Result<(), ButtplugDeviceError>>,
   ),
+  #[allow(dead_code)]
   Unsubscribe(
     HardwareUnsubscribeCmd,
     oneshot::Sender<Result<(), ButtplugDeviceError>>,
@@ -271,7 +273,7 @@ async fn run_webbluetooth_loop(
   //let web_btle_device = WebBluetoothDeviceImpl::new(device, char_map);
   info!("device created!");
   let endpoints = char_map.keys().into_iter().cloned().collect();
-  device_local_event_sender
+  let _ = device_local_event_sender
     .send(WebBluetoothEvent::Connected(endpoints))
     .await;
   while let Some(msg) = device_command_receiver.recv().await {
@@ -337,6 +339,7 @@ async fn run_webbluetooth_loop(
 #[derive(Debug)]
 pub struct WebBluetoothHardware {
   device_command_sender: mpsc::Sender<WebBluetoothDeviceCommand>,
+  #[allow(dead_code)]
   device_event_receiver: mpsc::Receiver<WebBluetoothEvent>,
   event_sender: broadcast::Sender<HardwareEvent>,
 }

packages/frontend/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@sexy.pivoine.art/frontend",
   "version": "1.0.0",
-  "author": "valknarogg",
   "type": "module",
   "private": true,
   "scripts": {
@@ -12,9 +11,10 @@
     "check": "svelte-check --tsconfig ./tsconfig.json --threshold warning"
   },
   "devDependencies": {
+    "@sexy.pivoine.art/buttplug": "workspace:*",
     "@iconify-json/ri": "^1.2.10",
     "@iconify/tailwind4": "^1.2.1",
-    "@internationalized/date": "^3.11.0",
+    "@internationalized/date": "^3.12.0",
     "@lucide/svelte": "^0.561.0",
     "@sveltejs/adapter-node": "^5.5.4",
     "@sveltejs/adapter-static": "^3.0.10",
@@ -29,7 +29,6 @@
     "glob": "^13.0.6",
     "mode-watcher": "^1.1.0",
     "prettier-plugin-svelte": "^3.5.1",
-    "super-sitemap": "^1.0.7",
     "svelte": "^5.53.7",
     "svelte-check": "^4.4.4",
     "svelte-sonner": "^1.0.8",
@@ -38,11 +37,9 @@
     "tailwindcss": "^4.2.1",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3",
-    "vite": "^7.3.1",
+    "vite": "^7.3.1"
-    "vite-plugin-wasm": "3.5.0"
   },
   "dependencies": {
-    "@sexy.pivoine.art/buttplug": "workspace:*",
     "@sexy.pivoine.art/types": "workspace:*",
     "graphql": "^16.11.0",
     "graphql-request": "^7.1.2",

packages/frontend/src/lib/components/burger-menu-button/burger-menu-button.svelte

@@ -10,23 +10,23 @@
       class="flex flex-col justify-between w-[16px] h-[10px] transform transition-all duration-300 origin-center overflow-hidden"
     >
       <div
-        class={`bg-white h-[2px] w-7 transform transition-all duration-300 origin-left ${isMobileMenuOpen ? "translate-x-10" : ""}`}
+        class={`bg-foreground h-[2px] w-7 transform transition-all duration-300 origin-left ${isMobileMenuOpen ? "translate-x-10" : ""}`}
       ></div>
       <div
-        class={`bg-white h-[2px] w-7 rounded transform transition-all duration-300 delay-75 ${isMobileMenuOpen ? "translate-x-10" : ""}`}
+        class={`bg-foreground h-[2px] w-7 rounded transform transition-all duration-300 delay-75 ${isMobileMenuOpen ? "translate-x-10" : ""}`}
       ></div>
       <div
-        class={`bg-white h-[2px] w-7 transform transition-all duration-300 origin-left delay-150 ${isMobileMenuOpen ? "translate-x-10" : ""}`}
+        class={`bg-foreground h-[2px] w-7 transform transition-all duration-300 origin-left delay-150 ${isMobileMenuOpen ? "translate-x-10" : ""}`}
       ></div>
 
       <div
         class={`absolute items-center justify-between transform transition-all duration-500 top-6.5 -translate-x-10 flex w-0 ${isMobileMenuOpen ? "translate-x-0 w-12" : ""}`}
       >
         <div
-          class={`absolute bg-white h-[2px] w-4 transform transition-all duration-500 rotate-0 delay-300 ${isMobileMenuOpen ? "rotate-45" : ""}`}
+          class={`absolute bg-foreground h-[2px] w-4 transform transition-all duration-500 rotate-0 delay-300 ${isMobileMenuOpen ? "rotate-45" : ""}`}
         ></div>
         <div
-          class={`absolute bg-white h-[2px] w-4 transform transition-all duration-500 -rotate-0 delay-300 ${isMobileMenuOpen ? "-rotate-45" : ""}`}
+          class={`absolute bg-foreground h-[2px] w-4 transform transition-all duration-500 -rotate-0 delay-300 ${isMobileMenuOpen ? "-rotate-45" : ""}`}
         ></div>
       </div>
     </div>

packages/frontend/src/lib/components/header/header.svelte

@@ -38,7 +38,7 @@
     isMobileMenuOpen = false;
   }
 
-  function isActiveLink(link: { name: string; href: string }) {
+  function isActiveLink(link: { name?: string; href: string }) {
     return (
       (page.url.pathname === "/" && link === navLinks[0]) ||
       (page.url.pathname.startsWith(link.href) && link !== navLinks[0])
@@ -47,7 +47,7 @@
 </script>
 
 <header
-  class="sticky top-0 z-50 w-full bg-gradient-to-br from-card/85 via-card/90 to-card/80 backdrop-blur-xl shadow-2xl shadow-primary/20"
+  class="sticky top-0 z-50 w-full backdrop-blur-xl shadow-[0_4px_24px_-8px_color-mix(in_oklab,var(--color-primary)_12%,transparent)] bg-card/50"
 >
   <div class="container mx-auto px-4">
     <div class="flex items-center justify-evenly h-16">
@@ -76,28 +76,14 @@
         {/each}
       </nav>
 
-      <!-- Desktop Auth Actions -->
+      <!-- Auth Actions -->
       {#if authStatus.authenticated}
-        <div class="w-full hidden lg:flex items-center justify-end">
+        <div class="w-full flex items-center justify-end">
           <div class="flex items-center gap-2 rounded-full bg-muted/30 p-1">
             <Button
               variant="link"
               size="icon"
-              class={`h-9 w-9 rounded-full p-0 relative text-foreground/80 group ${isActiveLink({ href: "/me" }) ? "text-foreground" : "hover:text-foreground"}`}
+              class={`flex h-9 w-9 rounded-full p-0 relative text-foreground/80 group ${isActiveLink({ href: "/play" }) ? "text-foreground" : "hover:text-foreground"}`}
-              href="/me"
-              title={$_("header.dashboard")}
-            >
-              <span class="icon-[ri--dashboard-2-line] h-4 w-4"></span>
-              <span
-                class={`absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-primary to-accent transition-all duration-300 ${isActiveLink({ href: "/me" }) ? "w-full" : "group-hover:w-full"}`}
-              ></span>
-              <span class="sr-only">{$_("header.dashboard")}</span>
-            </Button>
-
-            <Button
-              variant="link"
-              size="icon"
-              class={`h-9 w-9 rounded-full p-0 relative text-foreground/80 group ${isActiveLink({ href: "/play" }) ? "text-foreground" : "hover:text-foreground"}`}
               href="/play"
               title={$_("header.play")}
             >
@@ -112,7 +98,7 @@
               <Button
                 variant="link"
                 size="icon"
-                class={`h-9 w-9 rounded-full p-0 relative text-foreground/80 group ${isActiveLink({ href: "/admin" }) ? "text-foreground" : "hover:text-foreground"}`}
+                class={`flex h-9 w-9 rounded-full p-0 relative text-foreground/80 group ${isActiveLink({ href: "/admin" }) ? "text-foreground" : "hover:text-foreground"}`}
                 href="/admin/users"
                 title="Admin"
               >
@@ -124,7 +110,7 @@
               </Button>
             {/if}
 
-            <Separator orientation="vertical" class="mx-1 h-6 bg-border/50" />
+            <Separator orientation="vertical" class="hidden lg:block mx-1 h-6 bg-border/50" />
 
             <a href="/me" class="flex items-center gap-2 px-1 hover:opacity-80 transition-opacity">
               <Avatar class="h-7 w-7 ring-2 ring-primary/20">
@@ -138,35 +124,24 @@
                   {getUserInitials(authStatus.user!.artist_name || authStatus.user!.email)}
                 </AvatarFallback>
               </Avatar>
-              <span class="text-sm font-medium text-foreground/90 max-w-24 truncate">
+              <span
+                class="hidden lg:inline text-sm font-medium text-foreground/90 max-w-24 truncate"
+              >
                 {authStatus.user!.artist_name || authStatus.user!.email.split("@")[0]}
               </span>
             </a>
 
             <Button
-              variant="ghost"
+              variant="link"
               size="icon"
-              class="h-8 w-8 rounded-full text-foreground hover:text-destructive hover:bg-destructive/10"
+              class="hidden lg:flex h-9 w-9 rounded-full p-0 relative text-foreground/80 group hover:text-destructive"
               onclick={handleLogout}
               title={$_("header.logout")}
             >
               <span class="icon-[ri--logout-circle-r-line] h-4 w-4"></span>
             </Button>
           </div>
-        </div>
+          <div class="lg:hidden ml-2">
-      {:else}
-        <div class="hidden lg:flex w-full items-center justify-end gap-4">
-          <Button variant="outline" class="font-medium" href="/login">{$_("header.login")}</Button>
-          <Button
-            href="/signup"
-            class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 font-medium"
-            >{$_("header.signup")}</Button
-          >
-        </div>
-      {/if}
-
-      <!-- Burger button — mobile/tablet only -->
-      <div class="lg:hidden ml-auto">
             <BurgerMenuButton
               label={$_("header.navigation")}
               bind:isMobileMenuOpen
@@ -174,6 +149,27 @@
             />
           </div>
         </div>
+      {:else}
+        <div class="w-full flex items-center justify-end gap-2">
+          <div class="flex gap-4">
+            <Button variant="outline" class="font-medium" href="/login">{$_("header.login")}</Button
+            >
+            <Button
+              href="/signup"
+              class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 font-medium"
+              >{$_("header.signup")}</Button
+            >
+          </div>
+          <div class="lg:hidden ml-2">
+            <BurgerMenuButton
+              label={$_("header.navigation")}
+              bind:isMobileMenuOpen
+              onclick={() => (isMobileMenuOpen = !isMobileMenuOpen)}
+            />
+          </div>
+        </div>
+      {/if}
+    </div>
   </div>
 </header>
 

packages/frontend/src/lib/components/icon/icon.svelte

@@ -9,7 +9,7 @@
 
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  class={className}
+  class={`rounded-full ring-2 ring-primary/20 ${className}`}
   width={size}
   height={size}
   viewBox="0 0 10240 10240"

packages/frontend/src/lib/components/page-hero/page-hero.svelte

@@ -11,7 +11,6 @@
 </script>
 
 <section class="relative py-12 md:py-20 overflow-hidden">
-  <div class="absolute inset-0 bg-gradient-to-b from-primary/12 via-accent/6 to-transparent"></div>
   <div class="relative container mx-auto px-4 text-center">
     <div class="max-w-5xl mx-auto">
       <h1

packages/frontend/src/lib/components/pagination/pagination.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { Button } from "$lib/components/ui/button";
+  import { _ } from "svelte-i18n";
+
+  interface Props {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+  }
+
+  let { currentPage, totalPages, onPageChange }: Props = $props();
+
+  const pageNumbers = $derived(() => {
+    const pages: (number | -1)[] = [];
+    if (totalPages <= 7) {
+      for (let i = 1; i <= totalPages; i++) pages.push(i);
+    } else {
+      pages.push(1);
+      if (currentPage > 3) pages.push(-1);
+      for (
+        let i = Math.max(2, currentPage - 1);
+        i <= Math.min(totalPages - 1, currentPage + 1);
+        i++
+      )
+        pages.push(i);
+      if (currentPage < totalPages - 2) pages.push(-1);
+      pages.push(totalPages);
+    }
+    return pages;
+  });
+</script>
+
+{#if totalPages > 1}
+  <div class="flex items-center gap-1">
+    <Button
+      variant="outline"
+      disabled={currentPage <= 1}
+      onclick={() => onPageChange(currentPage - 1)}
+    >
+      {$_("common.previous")}
+    </Button>
+    {#each pageNumbers() as p, i (i)}
+      {#if p === -1}
+        <span class="px-2 text-muted-foreground select-none">…</span>
+      {:else}
+        <Button
+          variant={p === currentPage ? "default" : "outline"}
+          class="min-w-9"
+          onclick={() => onPageChange(p)}
+        >
+          {p}
+        </Button>
+      {/if}
+    {/each}
+    <Button
+      variant="outline"
+      disabled={currentPage >= totalPages}
+      onclick={() => onPageChange(currentPage + 1)}
+    >
+      {$_("common.next")}
+    </Button>
+  </div>
+{/if}

packages/frontend/src/lib/components/recording-card/recording-card.svelte

@@ -2,16 +2,18 @@
   import { _ } from "svelte-i18n";
   import { Card, CardContent, CardHeader } from "$lib/components/ui/card";
   import { Button } from "$lib/components/ui/button";
+  import { Badge } from "$lib/components/ui/badge";
   import type { Recording, DeviceInfo } from "$lib/types";
-  import { cn } from "$lib/utils";
 
   interface Props {
     recording: Recording;
     onPlay?: (id: string) => void;
+    onPublish?: (id: string) => void;
+    onUnpublish?: (id: string) => void;
     onDelete?: (id: string) => void;
   }
 
-  let { recording, onPlay, onDelete }: Props = $props();
+  let { recording, onPlay, onPublish, onUnpublish, onDelete }: Props = $props();
 
   function formatDuration(ms: number): string {
     const totalSeconds = Math.floor(ms / 1000);
@@ -19,17 +21,6 @@
     const seconds = totalSeconds % 60;
     return `${minutes}:${seconds.toString().padStart(2, "0")}`;
   }
-
-  function getStatusColor(status: string): string {
-    switch (status) {
-      case "published":
-        return "text-green-400 bg-green-400/20";
-      case "draft":
-        return "text-yellow-400 bg-yellow-400/20";
-      default:
-        return "text-gray-400 bg-gray-400/20";
-    }
-  }
 </script>
 
 <Card
@@ -42,9 +33,14 @@
           <h3 class="font-semibold text-card-foreground group-hover:text-primary transition-colors">
             {recording.title}
           </h3>
-          <span class={cn("text-xs px-2 py-0.5 rounded-full", getStatusColor(recording.status))}>
+          <Badge
+            variant="outline"
+            class={recording.status === "published"
+              ? "text-green-600 border-green-500/40 bg-green-500/10"
+              : "text-yellow-600 border-yellow-500/40 bg-yellow-500/10"}
+          >
             {$_(`recording_card.status_${recording.status}`)}
-          </span>
+          </Badge>
         </div>
         {#if recording.description}
           <p class="text-sm text-muted-foreground line-clamp-2">
@@ -149,12 +145,35 @@
           {$_("recording_card.play")}
         </Button>
       {/if}
+      {#if onPublish && recording.status === "draft"}
+        <Button
+          size="sm"
+          variant="outline"
+          onclick={() => onPublish?.(recording.id)}
+          class="cursor-pointer border-primary/20 hover:bg-primary/10 hover:text-primary"
+          title={$_("recording_card.publish")}
+        >
+          <span class="icon-[ri--send-plane-line] w-4 h-4"></span>
+        </Button>
+      {/if}
+      {#if onUnpublish && recording.status === "published"}
+        <Button
+          size="sm"
+          variant="outline"
+          onclick={() => onUnpublish?.(recording.id)}
+          class="cursor-pointer border-muted-foreground/20 hover:bg-muted/50 hover:text-muted-foreground"
+          title={$_("recording_card.unpublish")}
+        >
+          <span class="icon-[ri--arrow-go-back-line] w-4 h-4"></span>
+        </Button>
+      {/if}
       {#if onDelete}
         <Button
           size="sm"
           variant="outline"
           onclick={() => onDelete?.(recording.id)}
           class="cursor-pointer border-destructive/20 hover:bg-destructive/10 hover:text-destructive"
+          title={$_("common.delete")}
         >
           <span class="icon-[ri--delete-bin-line] w-4 h-4"></span>
         </Button>

packages/frontend/src/lib/components/ui/empty/empty-content.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from "$lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="empty-content"
+  class={cn(
+    "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
+    className,
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

packages/frontend/src/lib/components/ui/empty/empty-description.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from "$lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="empty-description"
+  class={cn(
+    "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+    className,
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

packages/frontend/src/lib/components/ui/empty/empty-header.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from "$lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="empty-header"
+  class={cn("flex max-w-sm flex-col items-center gap-2 text-center", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

packages/frontend/src/lib/components/ui/empty/empty-media.svelte

@@ -0,0 +1,41 @@
+<script lang="ts" module>
+  import { tv, type VariantProps } from "tailwind-variants";
+
+  export const emptyMediaVariants = tv({
+    base: "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  });
+
+  export type EmptyMediaVariant = VariantProps<typeof emptyMediaVariants>["variant"];
+</script>
+
+<script lang="ts">
+  import { cn, type WithElementRef } from "$lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    variant = "default",
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & { variant?: EmptyMediaVariant } = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="empty-icon"
+  data-variant={variant}
+  class={cn(emptyMediaVariants({ variant }), className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

packages/frontend/src/lib/components/ui/empty/empty-title.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from "$lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="empty-title"
+  class={cn("text-lg font-medium tracking-tight", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

packages/frontend/src/lib/components/ui/empty/empty.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from "$lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="empty"
+  class={cn(
+    "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
+    className,
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

packages/frontend/src/lib/components/ui/empty/index.ts

@@ -0,0 +1,22 @@
+import Root from "./empty.svelte";
+import Header from "./empty-header.svelte";
+import Media from "./empty-media.svelte";
+import Title from "./empty-title.svelte";
+import Description from "./empty-description.svelte";
+import Content from "./empty-content.svelte";
+
+export {
+  Root,
+  Header,
+  Media,
+  Title,
+  Description,
+  Content,
+  //
+  Root as Empty,
+  Header as EmptyHeader,
+  Media as EmptyMedia,
+  Title as EmptyTitle,
+  Description as EmptyDescription,
+  Content as EmptyContent,
+};

packages/frontend/src/lib/i18n/locales/en.ts

@@ -91,6 +91,23 @@ export default {
   me: {
     title: "Dashboard",
     welcome: "Welcome back, {name}",
+    nav: {
+      profile: "Profile",
+      security: "Security",
+      recordings: "Recordings",
+      analytics: "Analytics",
+      back_to_site: "Back to site",
+      back_mobile: "Back",
+    },
+    analytics: {
+      title: "Analytics",
+      description: "Track your content performance and audience engagement",
+      total_videos: "Total Videos",
+      total_likes: "Total Likes",
+      total_plays: "Total Plays",
+      video_performance: "Video Performance",
+      video_performance_description: "Detailed metrics for each video",
+    },
     view_profile: "View Public Profile",
     settings: {
       title: "Settings",
@@ -134,6 +151,10 @@ export default {
       delete_confirm: "Are you sure you want to delete this recording?",
       delete_success: "Recording deleted successfully",
       delete_error: "Failed to delete recording",
+      publish_success: "Recording published successfully",
+      publish_error: "Failed to publish recording",
+      unpublish_success: "Recording unpublished",
+      unpublish_error: "Failed to unpublish recording",
     },
   },
   recording_card: {
@@ -144,6 +165,8 @@ export default {
     status_draft: "Draft",
     status_published: "Published",
     play: "Play",
+    publish: "Publish",
+    unpublish: "Unpublish",
     edit: "Edit",
     delete: "Delete",
     public: "Public",
@@ -799,11 +822,19 @@ export default {
     questions_email: "support@pivoine.art",
   },
   play: {
-    title: "SexyPlay",
+    title: "Play",
-    description: "Bring your toys.",
+    description: "Connect and control your Bluetooth 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",
@@ -905,14 +936,15 @@ export default {
   },
   admin: {
     nav: {
-      back_to_site: "← Back to site",
+      back_to_site: "Back to site",
-      back_mobile: "← Back",
+      back_mobile: "Back",
       title: "Admin",
       users: "Users",
       videos: "Videos",
       articles: "Articles",
       comments: "Comments",
       recordings: "Recordings",
+      queues: "Queues",
     },
     common: {
       save_changes: "Save changes",
@@ -927,8 +959,8 @@ export default {
       cover_image: "Cover image",
       tags: "Tags",
       publish_date: "Publish date",
-      title_field: "Title *",
+      title_field: "Title",
-      slug_field: "Slug *",
+      slug_field: "Slug",
       title_slug_required: "Title and slug are required",
       image_uploaded: "Image uploaded",
       image_upload_failed: "Image upload failed",
@@ -1058,6 +1090,36 @@ export default {
       delete_success: "Recording deleted",
       delete_error: "Failed to delete recording",
     },
+    queues: {
+      title: "Job Queues",
+      pause: "Pause",
+      resume: "Resume",
+      paused_badge: "Paused",
+      retry: "Retry",
+      remove: "Remove",
+      retry_success: "Job retried",
+      retry_error: "Failed to retry job",
+      remove_success: "Job removed",
+      remove_error: "Failed to remove job",
+      pause_success: "Queue paused",
+      pause_error: "Failed to pause queue",
+      resume_success: "Queue resumed",
+      resume_error: "Failed to resume queue",
+      col_id: "ID",
+      col_name: "Name",
+      col_status: "Status",
+      col_attempts: "Attempts",
+      col_created: "Created",
+      col_actions: "Actions",
+      no_jobs: "No jobs found",
+      status_all: "All",
+      status_waiting: "Waiting",
+      status_active: "Active",
+      status_completed: "Completed",
+      status_failed: "Failed",
+      status_delayed: "Delayed",
+      failed_reason: "Reason: {reason}",
+    },
     article_form: {
       new_title: "New article",
       edit_title: "Edit article",

packages/frontend/src/lib/services.ts

@@ -902,6 +902,26 @@ export async function createRecording(
   );
 }
 
+const UPDATE_RECORDING_MUTATION = gql`
+  mutation UpdateRecording($id: String!, $status: String, $public: Boolean) {
+    updateRecording(id: $id, status: $status, public: $public) {
+      id
+      status
+      public
+    }
+  }
+`;
+
+export async function updateRecording(id: string, fields: { status?: string; public?: boolean }) {
+  return loggedApiCall("updateRecording", async () => {
+    const data = await getGraphQLClient().request<{ updateRecording: Recording }>(
+      UPDATE_RECORDING_MUTATION,
+      { id, ...fields },
+    );
+    return data.updateRecording;
+  });
+}
+
 const DELETE_RECORDING_MUTATION = gql`
   mutation DeleteRecording($id: String!) {
     deleteRecording(id: $id)
@@ -1876,3 +1896,150 @@ export async function adminDeleteRecording(id: string): Promise<void> {
     await getGraphQLClient().request(ADMIN_DELETE_RECORDING_MUTATION, { id });
   });
 }
+
+// --- Queues ---
+
+export type JobCounts = {
+  waiting: number;
+  active: number;
+  completed: number;
+  failed: number;
+  delayed: number;
+  paused: number;
+};
+
+export type QueueInfo = {
+  name: string;
+  counts: JobCounts;
+  isPaused: boolean;
+};
+
+export type Job = {
+  id: string;
+  name: string;
+  queue: string;
+  status: string;
+  data: Record<string, unknown>;
+  result: unknown;
+  failedReason: string | null;
+  attemptsMade: number;
+  createdAt: string;
+  processedAt: string | null;
+  finishedAt: string | null;
+  progress: number | null;
+};
+
+const ADMIN_QUEUES_QUERY = gql`
+  query AdminQueues {
+    adminQueues {
+      name
+      isPaused
+      counts {
+        waiting
+        active
+        completed
+        failed
+        delayed
+        paused
+      }
+    }
+  }
+`;
+
+export async function getAdminQueues(
+  fetchFn?: typeof globalThis.fetch,
+  token?: string,
+): Promise<QueueInfo[]> {
+  return loggedApiCall("getAdminQueues", async () => {
+    const client = token ? getAuthClient(token, fetchFn) : getGraphQLClient(fetchFn);
+    const data = await client.request<{ adminQueues: QueueInfo[] }>(ADMIN_QUEUES_QUERY);
+    return data.adminQueues;
+  });
+}
+
+const ADMIN_QUEUE_JOBS_QUERY = gql`
+  query AdminQueueJobs($queue: String!, $status: String, $limit: Int, $offset: Int) {
+    adminQueueJobs(queue: $queue, status: $status, limit: $limit, offset: $offset) {
+      id
+      name
+      queue
+      status
+      data
+      result
+      failedReason
+      attemptsMade
+      createdAt
+      processedAt
+      finishedAt
+      progress
+    }
+  }
+`;
+
+export async function getAdminQueueJobs(
+  queue: string,
+  status?: string,
+  limit?: number,
+  offset?: number,
+  fetchFn?: typeof globalThis.fetch,
+  token?: string,
+): Promise<Job[]> {
+  return loggedApiCall("getAdminQueueJobs", async () => {
+    const client = token ? getAuthClient(token, fetchFn) : getGraphQLClient(fetchFn);
+    const data = await client.request<{ adminQueueJobs: Job[] }>(ADMIN_QUEUE_JOBS_QUERY, {
+      queue,
+      status,
+      limit,
+      offset,
+    });
+    return data.adminQueueJobs;
+  });
+}
+
+const ADMIN_RETRY_JOB_MUTATION = gql`
+  mutation AdminRetryJob($queue: String!, $jobId: String!) {
+    adminRetryJob(queue: $queue, jobId: $jobId)
+  }
+`;
+
+export async function adminRetryJob(queue: string, jobId: string): Promise<void> {
+  return loggedApiCall("adminRetryJob", async () => {
+    await getGraphQLClient().request(ADMIN_RETRY_JOB_MUTATION, { queue, jobId });
+  });
+}
+
+const ADMIN_REMOVE_JOB_MUTATION = gql`
+  mutation AdminRemoveJob($queue: String!, $jobId: String!) {
+    adminRemoveJob(queue: $queue, jobId: $jobId)
+  }
+`;
+
+export async function adminRemoveJob(queue: string, jobId: string): Promise<void> {
+  return loggedApiCall("adminRemoveJob", async () => {
+    await getGraphQLClient().request(ADMIN_REMOVE_JOB_MUTATION, { queue, jobId });
+  });
+}
+
+const ADMIN_PAUSE_QUEUE_MUTATION = gql`
+  mutation AdminPauseQueue($queue: String!) {
+    adminPauseQueue(queue: $queue)
+  }
+`;
+
+const ADMIN_RESUME_QUEUE_MUTATION = gql`
+  mutation AdminResumeQueue($queue: String!) {
+    adminResumeQueue(queue: $queue)
+  }
+`;
+
+export async function adminPauseQueue(queue: string): Promise<void> {
+  return loggedApiCall("adminPauseQueue", async () => {
+    await getGraphQLClient().request(ADMIN_PAUSE_QUEUE_MUTATION, { queue });
+  });
+}
+
+export async function adminResumeQueue(queue: string): Promise<void> {
+  return loggedApiCall("adminResumeQueue", async () => {
+    await getGraphQLClient().request(ADMIN_RESUME_QUEUE_MUTATION, { queue });
+  });
+}

packages/frontend/src/routes/+layout.svelte

@@ -28,7 +28,9 @@
 
 <div class="bg-background text-foreground min-h-screen">
   <!-- Advanced Global Plasma Background -->
-  <div class="fixed inset-0 pointer-events-none overflow-hidden">
+  <div
+    class="fixed inset-0 pointer-events-none overflow-hidden bg-gradient-to-b from-primary/12 via-accent/6 to-transparent"
+  >
     <!-- Large primary blobs -->
     <div
       class="absolute -top-40 -left-40 w-80 h-80 bg-gradient-to-r from-primary/12 via-accent/18 to-primary/8 rounded-full blur-3xl animate-blob-ultra-slow"

packages/frontend/src/routes/admin/+layout.svelte

@@ -1,8 +1,17 @@
 <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";
 
-  const { children } = $props();
+  const { children, data } = $props();
+
+  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);
 
   const navLinks = $derived([
     { name: $_("admin.nav.users"), href: "/admin/users", icon: "icon-[ri--team-line]" },
@@ -14,6 +23,11 @@
       href: "/admin/recordings",
       icon: "icon-[ri--record-circle-line]",
     },
+    {
+      name: $_("admin.nav.queues"),
+      href: "/admin/queues",
+      icon: "icon-[ri--stack-line]",
+    },
   ]);
 
   function isActive(href: string) {
@@ -28,9 +42,10 @@
       <div class="flex items-center gap-1 overflow-x-auto py-2 scrollbar-none">
         <a
           href="/"
-          class="shrink-0 text-xs text-muted-foreground hover:text-foreground transition-colors px-2"
+          class="shrink-0 flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors px-2"
         >
-          {$_("admin.nav.back_mobile")}
+          <span class="icon-[ri--arrow-left-line] h-4 w-4"></span>
+          <span class="hidden sm:inline">{$_("admin.nav.back_mobile")}</span>
         </a>
         {#each navLinks as link (link.href)}
           <a
@@ -53,10 +68,33 @@
       <!-- 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="text-xs text-muted-foreground hover:text-foreground transition-colors">
+          <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>
             {$_("admin.nav.back_to_site")}
           </a>
-          <h1 class="mt-2 text-base font-bold text-foreground">{$_("admin.nav.title")}</h1>
+          <div class="mt-3 flex items-center gap-3">
+            <div class="relative shrink-0">
+              <Avatar class="h-9 w-9">
+                <AvatarImage src={avatarUrl} alt={displayName} />
+                <AvatarFallback class="text-xs">
+                  {getUserInitials(displayName)}
+                </AvatarFallback>
+              </Avatar>
+              <span
+                class="absolute -bottom-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-primary ring-2 ring-background"
+              >
+                <span class="icon-[ri--shield-keyhole-fill] h-2.5 w-2.5 text-primary-foreground"
+                ></span>
+              </span>
+            </div>
+            <div class="min-w-0">
+              <p class="text-sm font-semibold text-foreground truncate">{displayName}</p>
+              <p class="text-xs text-primary font-medium">{$_("admin.nav.title")}</p>
+            </div>
+          </div>
         </div>
 
         <nav class="flex-1 p-3 space-y-1">

packages/frontend/src/routes/admin/articles/+page.svelte

@@ -12,6 +12,8 @@
   import * as Dialog from "$lib/components/ui/dialog";
   import type { Article } from "$lib/types";
   import TimeAgo from "javascript-time-ago";
+  import Meta from "$lib/components/meta/meta.svelte";
+  import Pagination from "$lib/components/pagination/pagination.svelte";
 
   const { data } = $props();
 
@@ -64,8 +66,10 @@
   }
 </script>
 
-<div class="py-3 sm:py-6 sm:pl-6">
+<Meta title={$_("admin.articles.title")} description={null} />
-  <div class="flex items-center justify-between mb-6 px-3 sm:px-0">
+
+<div class="py-3 sm:py-6 lg:pl-6">
+  <div class="flex items-center justify-between mb-6">
     <h1 class="text-2xl font-bold">{$_("admin.articles.title")}</h1>
     <div class="flex items-center gap-3">
       <span class="text-sm text-muted-foreground"
@@ -81,7 +85,7 @@
   </div>
 
   <!-- Filters -->
-  <div class="flex flex-wrap items-center gap-3 mb-4 px-3 sm:px-0">
+  <div class="flex flex-wrap items-center gap-3 mb-4">
     <Input
       placeholder={$_("admin.articles.search_placeholder")}
       class="max-w-xs"
@@ -201,7 +205,7 @@
 
   <!-- Pagination -->
   {#if data.total > data.limit}
-    <div class="flex items-center justify-between mt-4 px-3 sm:px-0">
+    <div class="flex items-center justify-between mt-4 flex-wrap gap-3">
       <span class="text-sm text-muted-foreground">
         {$_("admin.users.showing", {
           values: {
@@ -211,32 +215,15 @@
           },
         })}
       </span>
-      <div class="flex gap-2">
+      <Pagination
-        <Button
+        currentPage={Math.floor(data.offset / data.limit) + 1}
-          size="sm"
+        totalPages={Math.ceil(data.total / data.limit)}
-          variant="outline"
+        onPageChange={(p) => {
-          disabled={data.offset === 0}
-          onclick={() => {
           const params = new SvelteURLSearchParams(page.url.searchParams.toString());
-            params.set("offset", String(Math.max(0, data.offset - data.limit)));
+          params.set("offset", String((p - 1) * data.limit));
           goto(`?${params.toString()}`);
         }}
-        >
+      />
-          {$_("common.previous")}
-        </Button>
-        <Button
-          size="sm"
-          variant="outline"
-          disabled={data.offset + data.limit >= data.total}
-          onclick={() => {
-            const params = new SvelteURLSearchParams(page.url.searchParams.toString());
-            params.set("offset", String(data.offset + data.limit));
-            goto(`?${params.toString()}`);
-          }}
-        >
-          {$_("common.next")}
-        </Button>
-      </div>
     </div>
   {/if}
 </div>

packages/frontend/src/routes/admin/articles/[id]/+page.svelte

@@ -11,9 +11,11 @@
   import { Textarea } from "$lib/components/ui/textarea";
   import { TagsInput } from "$lib/components/ui/tags-input";
   import { FileDropZone, MEGABYTE } from "$lib/components/ui/file-drop-zone";
+  import { Card, CardContent } from "$lib/components/ui/card";
   import { getAssetUrl } from "$lib/api";
   import { Select, SelectContent, SelectItem, SelectTrigger } from "$lib/components/ui/select";
   import { DatePicker } from "$lib/components/ui/date-picker";
+  import Meta from "$lib/components/meta/meta.svelte";
 
   const { data } = $props();
 
@@ -93,29 +95,48 @@
   }
 </script>
 
-<div class="p-3 sm:p-6">
+<Meta title={$_("admin.article_form.edit_title")} description={null} />
-  <div class="flex items-center gap-4 mb-6">
+
-    <Button variant="ghost" href="/admin/articles" size="sm">
+<div class="py-3 sm:py-6 lg:pl-6">
-      <span class="icon-[ri--arrow-left-line] h-4 w-4 mr-1"></span>{$_("common.back")}
+  <div class="mb-6">
-    </Button>
+    <h1 class="text-2xl font-bold">{data.article.title}</h1>
-    <h1 class="text-2xl font-bold">{$_("admin.article_form.edit_title")}</h1>
+    <p class="text-xs text-muted-foreground mt-0.5">
+      {data.article.slug}{data.article.category ? " · " + data.article.category : ""}{data.article
+        .author
+        ? " · " + data.article.author.artist_name
+        : ""}
+    </p>
   </div>
 
-  <div class="space-y-5 max-w-4xl">
+  <Card class="bg-card/50 border-primary/20 max-w-4xl">
+    <CardContent class="space-y-5 pt-6">
       <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
         <div class="space-y-1.5">
           <Label for="title">{$_("admin.common.title_field")}</Label>
-        <Input id="title" bind:value={title} />
+          <Input
+            id="title"
+            bind:value={title}
+            class="bg-background/50 border-primary/20 focus:border-primary"
+          />
         </div>
         <div class="space-y-1.5">
           <Label for="slug">{$_("admin.common.slug_field")}</Label>
-        <Input id="slug" bind:value={slug} />
+          <Input
+            id="slug"
+            bind:value={slug}
+            class="bg-background/50 border-primary/20 focus:border-primary"
+          />
         </div>
       </div>
 
       <div class="space-y-1.5">
         <Label for="excerpt">{$_("admin.article_form.excerpt")}</Label>
-      <Textarea id="excerpt" bind:value={excerpt} rows={2} />
+        <Textarea
+          id="excerpt"
+          bind:value={excerpt}
+          rows={2}
+          class="bg-background/50 border-primary/20 focus:border-primary"
+        />
       </div>
 
       <!-- Markdown editor with live preview -->
@@ -123,22 +144,24 @@
         <div class="flex items-center justify-between">
           <Label>{$_("admin.article_form.content")}</Label>
           <div class="flex rounded-lg border border-border/40 overflow-hidden text-xs sm:hidden">
-          <button
+            <Button
-            type="button"
+              variant="ghost"
-            class={`px-3 py-1 transition-colors ${editorTab === "write" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
+              size="sm"
-            onclick={() => (editorTab = "write")}>{$_("admin.common.write")}</button
+              class={`px-3 py-1 h-auto rounded-none transition-colors ${editorTab === "write" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
+              onclick={() => (editorTab = "write")}>{$_("admin.common.write")}</Button
             >
-          <button
+            <Button
-            type="button"
+              variant="ghost"
-            class={`px-3 py-1 transition-colors ${editorTab === "preview" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
+              size="sm"
-            onclick={() => (editorTab = "preview")}>{$_("admin.common.preview")}</button
+              class={`px-3 py-1 h-auto rounded-none transition-colors ${editorTab === "preview" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
+              onclick={() => (editorTab = "preview")}>{$_("admin.common.preview")}</Button
             >
           </div>
         </div>
         <div class="sm:grid sm:grid-cols-2 sm:gap-4 min-h-96">
           <Textarea
             bind:value={content}
-          class={`h-full min-h-96 font-mono text-sm resize-none ${editorTab === "preview" ? "hidden sm:flex" : ""}`}
+            class={`h-full min-h-96 font-mono text-sm resize-none bg-background/50 border-primary/20 focus:border-primary ${editorTab === "preview" ? "hidden sm:flex" : ""}`}
           />
           <div
             class={`rounded-lg border border-border/40 bg-muted/20 p-4 overflow-auto prose prose-sm max-w-none prose-headings:text-foreground prose-p:text-muted-foreground min-h-96 ${editorTab === "write" ? "hidden sm:block" : ""}`}
@@ -166,11 +189,10 @@
         <FileDropZone accept="image/*" maxFileSize={10 * MEGABYTE} onUpload={handleImageUpload} />
       </div>
 
-    <!-- Author -->
       <div class="space-y-1.5">
         <Label>{$_("admin.article_form.author")}</Label>
         <Select type="single" bind:value={authorId}>
-        <SelectTrigger class="w-full">
+          <SelectTrigger class="w-full bg-background/50 border-primary/20">
             {#if selectedAuthor}
               {#if selectedAuthor.avatar}
                 <img
@@ -205,7 +227,11 @@
       <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
         <div class="space-y-1.5">
           <Label for="category">{$_("admin.article_form.category")}</Label>
-        <Input id="category" bind:value={category} />
+          <Input
+            id="category"
+            bind:value={category}
+            class="bg-background/50 border-primary/20 focus:border-primary"
+          />
         </div>
         <div class="space-y-1.5">
           <Label>{$_("admin.common.publish_date")}</Label>
@@ -215,7 +241,10 @@
 
       <div class="space-y-1.5">
         <Label>{$_("admin.common.tags")}</Label>
-      <TagsInput bind:value={tags} />
+        <TagsInput
+          bind:value={tags}
+          class="bg-background/50 border-primary/20 focus:border-primary"
+        />
       </div>
 
       <label class="flex items-center gap-2 cursor-pointer">
@@ -223,15 +252,13 @@
         <span class="text-sm">{$_("admin.common.featured")}</span>
       </label>
 
-    <div class="flex gap-3 pt-2">
       <Button
         onclick={handleSubmit}
         disabled={saving}
-        class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
+        class="cursor-pointer w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
       >
         {saving ? $_("admin.common.saving") : $_("admin.common.save_changes")}
       </Button>
-      <Button variant="outline" href="/admin/articles">{$_("common.cancel")}</Button>
+    </CardContent>
-    </div>
+  </Card>
-  </div>
 </div>

packages/frontend/src/routes/admin/articles/new/+page.svelte

@@ -11,6 +11,8 @@
   import { TagsInput } from "$lib/components/ui/tags-input";
   import { DatePicker } from "$lib/components/ui/date-picker";
   import { FileDropZone, MEGABYTE } from "$lib/components/ui/file-drop-zone";
+  import { Card, CardContent } from "$lib/components/ui/card";
+  import Meta from "$lib/components/meta/meta.svelte";
 
   let title = $state("");
   let slug = $state("");
@@ -75,15 +77,15 @@
   }
 </script>
 
-<div class="p-3 sm:p-6">
+<Meta title={$_("admin.article_form.new_title")} description={null} />
-  <div class="flex items-center gap-4 mb-6">
+
-    <Button variant="ghost" href="/admin/articles" size="sm">
+<div class="py-3 sm:py-6 lg:pl-6">
-      <span class="icon-[ri--arrow-left-line] h-4 w-4 mr-1"></span>{$_("common.back")}
+  <div class="mb-6">
-    </Button>
     <h1 class="text-2xl font-bold">{$_("admin.article_form.new_title")}</h1>
   </div>
 
-  <div class="space-y-5 max-w-4xl">
+  <Card class="bg-card/50 border-primary/20 max-w-4xl">
+    <CardContent class="space-y-5 pt-6">
       <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
         <div class="space-y-1.5">
           <Label for="title">{$_("admin.common.title_field")}</Label>
@@ -94,6 +96,7 @@
               if (!slug) slug = generateSlug(title);
             }}
             placeholder={$_("admin.article_form.title_placeholder")}
+            class="bg-background/50 border-primary/20 focus:border-primary"
           />
         </div>
         <div class="space-y-1.5">
@@ -102,6 +105,7 @@
             id="slug"
             bind:value={slug}
             placeholder={$_("admin.article_form.slug_placeholder")}
+            class="bg-background/50 border-primary/20 focus:border-primary"
           />
         </div>
       </div>
@@ -113,6 +117,7 @@
           bind:value={excerpt}
           placeholder={$_("admin.article_form.excerpt_placeholder")}
           rows={2}
+          class="bg-background/50 border-primary/20 focus:border-primary"
         />
       </div>
 
@@ -121,15 +126,17 @@
         <div class="flex items-center justify-between">
           <Label>{$_("admin.article_form.content")}</Label>
           <div class="flex rounded-lg border border-border/40 overflow-hidden text-xs sm:hidden">
-          <button
+            <Button
-            type="button"
+              variant="ghost"
-            class={`px-3 py-1 transition-colors ${editorTab === "write" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
+              size="sm"
-            onclick={() => (editorTab = "write")}>{$_("admin.common.write")}</button
+              class={`px-3 py-1 h-auto rounded-none transition-colors ${editorTab === "write" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
+              onclick={() => (editorTab = "write")}>{$_("admin.common.write")}</Button
             >
-          <button
+            <Button
-            type="button"
+              variant="ghost"
-            class={`px-3 py-1 transition-colors ${editorTab === "preview" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
+              size="sm"
-            onclick={() => (editorTab = "preview")}>{$_("admin.common.preview")}</button
+              class={`px-3 py-1 h-auto rounded-none transition-colors ${editorTab === "preview" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
+              onclick={() => (editorTab = "preview")}>{$_("admin.common.preview")}</Button
             >
           </div>
         </div>
@@ -138,7 +145,7 @@
           <Textarea
             bind:value={content}
             placeholder={$_("admin.article_form.content_placeholder")}
-          class={`h-full min-h-96 font-mono text-sm resize-none ${editorTab === "preview" ? "hidden sm:flex" : ""}`}
+            class={`h-full min-h-96 font-mono text-sm resize-none bg-background/50 border-primary/20 focus:border-primary ${editorTab === "preview" ? "hidden sm:flex" : ""}`}
           />
           <div
             class={`rounded-lg border border-border/40 bg-muted/20 p-4 overflow-auto prose prose-sm max-w-none prose-headings:text-foreground prose-p:text-muted-foreground min-h-96 ${editorTab === "write" ? "hidden sm:block" : ""}`}
@@ -157,9 +164,9 @@
       <div class="space-y-1.5">
         <Label>{$_("admin.common.cover_image")}</Label>
         <FileDropZone accept="image/*" maxFileSize={10 * MEGABYTE} onUpload={handleImageUpload} />
-      {#if imageId}<p class="text-xs text-green-600 mt-1">
+        {#if imageId}
-          {$_("admin.common.image_uploaded")} ✓
+          <p class="text-xs text-green-600 mt-1">{$_("admin.common.image_uploaded")} ✓</p>
-        </p>{/if}
+        {/if}
       </div>
 
       <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
@@ -169,6 +176,7 @@
             id="category"
             bind:value={category}
             placeholder={$_("admin.article_form.category_placeholder")}
+            class="bg-background/50 border-primary/20 focus:border-primary"
           />
         </div>
         <div class="space-y-1.5">
@@ -179,7 +187,10 @@
 
       <div class="space-y-1.5">
         <Label>{$_("admin.common.tags")}</Label>
-      <TagsInput bind:value={tags} />
+        <TagsInput
+          bind:value={tags}
+          class="bg-background/50 border-primary/20 focus:border-primary"
+        />
       </div>
 
       <label class="flex items-center gap-2 cursor-pointer">
@@ -187,15 +198,13 @@
         <span class="text-sm">{$_("admin.common.featured")}</span>
       </label>
 
-    <div class="flex gap-3 pt-2">
       <Button
         onclick={handleSubmit}
         disabled={saving}
-        class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
+        class="cursor-pointer w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
       >
         {saving ? $_("admin.common.creating") : $_("admin.article_form.create")}
       </Button>
-      <Button variant="outline" href="/admin/articles">{$_("common.cancel")}</Button>
+    </CardContent>
-    </div>
+  </Card>
-  </div>
 </div>

packages/frontend/src/routes/admin/comments/+page.svelte

@@ -10,6 +10,8 @@
   import { Input } from "$lib/components/ui/input";
   import * as Dialog from "$lib/components/ui/dialog";
   import TimeAgo from "javascript-time-ago";
+  import Meta from "$lib/components/meta/meta.svelte";
+  import Pagination from "$lib/components/pagination/pagination.svelte";
 
   const { data } = $props();
   const timeAgo = new TimeAgo("en");
@@ -53,15 +55,17 @@
   }
 </script>
 
-<div class="py-3 sm:py-6 sm:pl-6">
+<Meta title={$_("admin.comments.title")} description={null} />
-  <div class="flex items-center justify-between mb-6 px-3 sm:px-0">
+
+<div class="py-3 sm:py-6 lg:pl-6">
+  <div class="flex items-center justify-between mb-6">
     <h1 class="text-2xl font-bold">{$_("admin.comments.title")}</h1>
     <span class="text-sm text-muted-foreground"
       >{$_("admin.users.total", { values: { total: data.total } })}</span
     >
   </div>
 
-  <div class="flex flex-wrap gap-3 mb-4 px-3 sm:px-0">
+  <div class="flex flex-wrap gap-3 mb-4">
     <Input
       placeholder={$_("admin.comments.search_placeholder")}
       class="max-w-xs"
@@ -150,7 +154,7 @@
   </div>
 
   {#if data.total > data.limit}
-    <div class="flex items-center justify-between mt-4 px-3 sm:px-0">
+    <div class="flex items-center justify-between mt-4 flex-wrap gap-3">
       <span class="text-sm text-muted-foreground">
         {$_("admin.users.showing", {
           values: {
@@ -160,28 +164,15 @@
           },
         })}
       </span>
-      <div class="flex gap-2">
+      <Pagination
-        <Button
+        currentPage={Math.floor(data.offset / data.limit) + 1}
-          size="sm"
+        totalPages={Math.ceil(data.total / data.limit)}
-          variant="outline"
+        onPageChange={(p) => {
-          disabled={data.offset === 0}
-          onclick={() => {
           const params = new SvelteURLSearchParams(page.url.searchParams.toString());
-            params.set("offset", String(Math.max(0, data.offset - data.limit)));
+          params.set("offset", String((p - 1) * data.limit));
           goto(`?${params.toString()}`);
-          }}>{$_("common.previous")}</Button
+        }}
-        >
+      />
-        <Button
-          size="sm"
-          variant="outline"
-          disabled={data.offset + data.limit >= data.total}
-          onclick={() => {
-            const params = new SvelteURLSearchParams(page.url.searchParams.toString());
-            params.set("offset", String(data.offset + data.limit));
-            goto(`?${params.toString()}`);
-          }}>{$_("common.next")}</Button
-        >
-      </div>
     </div>
   {/if}
 </div>

packages/frontend/src/routes/admin/queues/+page.server.ts

@@ -0,0 +1,35 @@
+import { getAdminQueues, getAdminQueueJobs } from "$lib/services";
+
+const LIMIT = 25;
+
+export async function load({ fetch, cookies, url }) {
+  const token = cookies.get("session_token") || "";
+  const queues = await getAdminQueues(fetch, token).catch(() => []);
+
+  const queueParam = url.searchParams.get("queue") ?? queues[0]?.name ?? null;
+  const status = url.searchParams.get("status") ?? null;
+  const offset = parseInt(url.searchParams.get("offset") ?? "0") || 0;
+
+  let jobs: Awaited<ReturnType<typeof getAdminQueueJobs>> = [];
+  let total = 0;
+
+  if (queueParam) {
+    jobs = await getAdminQueueJobs(
+      queueParam,
+      status ?? undefined,
+      LIMIT,
+      offset,
+      fetch,
+      token,
+    ).catch(() => []);
+
+    const queueInfo = queues.find((q) => q.name === queueParam);
+    if (queueInfo) {
+      const { waiting, active, completed, failed, delayed } = queueInfo.counts;
+      const counts: Record<string, number> = { waiting, active, completed, failed, delayed };
+      total = status ? (counts[status] ?? 0) : Object.values(counts).reduce((a, b) => a + b, 0);
+    }
+  }
+
+  return { queues, queue: queueParam, status, jobs, total, offset, limit: LIMIT };
+}

packages/frontend/src/routes/admin/queues/+page.svelte

@@ -0,0 +1,293 @@
+<script lang="ts">
+  import { goto, invalidateAll } from "$app/navigation";
+  import { page } from "$app/state";
+  import { SvelteURLSearchParams } from "svelte/reactivity";
+  import { toast } from "svelte-sonner";
+  import { _ } from "svelte-i18n";
+  import { adminRetryJob, adminRemoveJob, adminPauseQueue, adminResumeQueue } from "$lib/services";
+  import { Button } from "$lib/components/ui/button";
+  import { Badge } from "$lib/components/ui/badge";
+  import type { Job } from "$lib/services";
+  import Meta from "$lib/components/meta/meta.svelte";
+  import Pagination from "$lib/components/pagination/pagination.svelte";
+
+  const { data } = $props();
+
+  let togglingQueue = $state<string | null>(null);
+
+  const STATUS_FILTERS = [
+    { value: null, label: $_("admin.queues.status_all") },
+    { value: "waiting", label: $_("admin.queues.status_waiting") },
+    { value: "active", label: $_("admin.queues.status_active") },
+    { value: "completed", label: $_("admin.queues.status_completed") },
+    { value: "failed", label: $_("admin.queues.status_failed") },
+    { value: "delayed", label: $_("admin.queues.status_delayed") },
+  ];
+
+  function navigate(overrides: Record<string, string | null>) {
+    const params = new SvelteURLSearchParams(page.url.searchParams.toString());
+    for (const [k, v] of Object.entries(overrides)) {
+      if (v === null) params.delete(k);
+      else params.set(k, v);
+    }
+    goto(`?${params.toString()}`);
+  }
+
+  function selectQueue(name: string) {
+    navigate({ queue: name, status: null, offset: null });
+  }
+
+  function selectStatus(status: string | null) {
+    navigate({ status, offset: null });
+  }
+
+  async function retryJob(job: Job) {
+    try {
+      await adminRetryJob(job.queue, job.id);
+      toast.success($_("admin.queues.retry_success"));
+      await invalidateAll();
+    } catch {
+      toast.error($_("admin.queues.retry_error"));
+    }
+  }
+
+  async function removeJob(job: Job) {
+    try {
+      await adminRemoveJob(job.queue, job.id);
+      toast.success($_("admin.queues.remove_success"));
+      await invalidateAll();
+    } catch {
+      toast.error($_("admin.queues.remove_error"));
+    }
+  }
+
+  async function toggleQueue(queueName: string, isPaused: boolean) {
+    togglingQueue = queueName;
+    try {
+      if (isPaused) {
+        await adminResumeQueue(queueName);
+        toast.success($_("admin.queues.resume_success"));
+      } else {
+        await adminPauseQueue(queueName);
+        toast.success($_("admin.queues.pause_success"));
+      }
+      await invalidateAll();
+    } catch {
+      toast.error(isPaused ? $_("admin.queues.resume_error") : $_("admin.queues.pause_error"));
+    } finally {
+      togglingQueue = null;
+    }
+  }
+
+  function statusColor(status: string): string {
+    switch (status) {
+      case "active":
+        return "text-blue-500 border-blue-500/30 bg-blue-500/10";
+      case "completed":
+        return "text-green-500 border-green-500/30 bg-green-500/10";
+      case "failed":
+        return "text-destructive border-destructive/30 bg-destructive/10";
+      case "delayed":
+        return "text-yellow-500 border-yellow-500/30 bg-yellow-500/10";
+      default:
+        return "text-muted-foreground border-border/40 bg-muted/20";
+    }
+  }
+
+  function formatDate(iso: string | null): string {
+    if (!iso) return "—";
+    return new Date(iso).toLocaleString();
+  }
+</script>
+
+<Meta title={$_("admin.queues.title")} description={null} />
+
+<div class="py-3 sm:py-6 lg:pl-6">
+  <div class="flex items-center justify-between mb-6">
+    <h1 class="text-2xl font-bold">{$_("admin.queues.title")}</h1>
+    {#if data.queue && data.total > 0}
+      <span class="text-sm text-muted-foreground">
+        {$_("admin.users.total", { values: { total: data.total } })}
+      </span>
+    {/if}
+  </div>
+
+  <!-- Queue cards -->
+  <div class="flex flex-wrap gap-3 mb-6">
+    {#each data.queues as queue (queue.name)}
+      {@const isSelected = data.queue === queue.name}
+      <div
+        role="button"
+        tabindex="0"
+        class={`flex-1 min-w-48 rounded-lg border p-4 text-left transition-colors cursor-pointer ${
+          isSelected
+            ? "border-primary/50 bg-primary/5"
+            : "border-border/40 bg-card hover:border-border/70"
+        }`}
+        onclick={() => selectQueue(queue.name)}
+        onkeydown={(e) => e.key === "Enter" && selectQueue(queue.name)}
+        aria-pressed={isSelected}
+      >
+        <div class="flex items-center justify-between mb-3">
+          <span class="font-semibold capitalize">{queue.name}</span>
+          <div class="flex items-center gap-1.5">
+            {#if queue.isPaused}
+              <Badge variant="outline" class="text-yellow-600 border-yellow-500/40 bg-yellow-500/10"
+                >{$_("admin.queues.paused_badge")}</Badge
+              >
+            {/if}
+            <Button
+              size="sm"
+              variant="ghost"
+              class="h-6 px-2 text-xs"
+              disabled={togglingQueue === queue.name}
+              onclick={(e) => {
+                e.stopPropagation();
+                toggleQueue(queue.name, queue.isPaused);
+              }}
+            >
+              {queue.isPaused ? $_("admin.queues.resume") : $_("admin.queues.pause")}
+            </Button>
+          </div>
+        </div>
+        <div class="flex flex-wrap gap-2 text-xs">
+          {#if queue.counts.waiting > 0}
+            <span class="text-muted-foreground">{queue.counts.waiting} waiting</span>
+          {/if}
+          {#if queue.counts.active > 0}
+            <span class="text-blue-500">{queue.counts.active} active</span>
+          {/if}
+          {#if queue.counts.completed > 0}
+            <span class="text-green-500">{queue.counts.completed} completed</span>
+          {/if}
+          {#if queue.counts.failed > 0}
+            <span class="text-destructive font-medium">{queue.counts.failed} failed</span>
+          {/if}
+          {#if queue.counts.delayed > 0}
+            <span class="text-yellow-500">{queue.counts.delayed} delayed</span>
+          {/if}
+          {#if Object.values(queue.counts).every((v) => v === 0)}
+            <span class="text-muted-foreground">empty</span>
+          {/if}
+        </div>
+      </div>
+    {/each}
+  </div>
+
+  {#if data.queue}
+    <!-- Status filter tabs -->
+    <div class="flex gap-1 mb-4 flex-wrap">
+      {#each STATUS_FILTERS as f (f.value ?? "all")}
+        <Button
+          variant={data.status === f.value ? "default" : "outline"}
+          onclick={() => selectStatus(f.value)}
+        >
+          {f.label}
+        </Button>
+      {/each}
+    </div>
+
+    <!-- Jobs table -->
+    <div class="sm:rounded-lg border-y sm:border border-border/40 overflow-x-auto">
+      <table class="w-full text-sm">
+        <thead class="bg-muted/30">
+          <tr>
+            <th class="px-4 py-3 text-left font-medium text-muted-foreground"
+              >{$_("admin.queues.col_id")}</th
+            >
+            <th class="px-4 py-3 text-left font-medium text-muted-foreground"
+              >{$_("admin.queues.col_name")}</th
+            >
+            <th class="px-4 py-3 text-left font-medium text-muted-foreground"
+              >{$_("admin.queues.col_status")}</th
+            >
+            <th class="px-4 py-3 text-left font-medium text-muted-foreground hidden md:table-cell">
+              {$_("admin.queues.col_attempts")}
+            </th>
+            <th class="px-4 py-3 text-left font-medium text-muted-foreground hidden lg:table-cell">
+              {$_("admin.queues.col_created")}
+            </th>
+            <th class="px-4 py-3 text-right font-medium text-muted-foreground"
+              >{$_("admin.queues.col_actions")}</th
+            >
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-border/30">
+          {#each data.jobs as job (job.id)}
+            <tr class="hover:bg-muted/10 transition-colors">
+              <td class="px-4 py-3 font-mono text-xs text-muted-foreground">{job.id}</td>
+              <td class="px-4 py-3">
+                <div>
+                  <p class="font-medium">{job.name}</p>
+                  {#if job.failedReason}
+                    <p class="text-xs text-destructive mt-0.5 max-w-xs truncate">
+                      {$_("admin.queues.failed_reason", { values: { reason: job.failedReason } })}
+                    </p>
+                  {/if}
+                </div>
+              </td>
+              <td class="px-4 py-3">
+                <Badge variant="outline" class={statusColor(job.status)}>{job.status}</Badge>
+              </td>
+              <td class="px-4 py-3 text-muted-foreground hidden md:table-cell"
+                >{job.attemptsMade}</td
+              >
+              <td class="px-4 py-3 text-muted-foreground hidden lg:table-cell text-xs"
+                >{formatDate(job.createdAt)}</td
+              >
+              <td class="px-4 py-3 text-right">
+                <div class="flex items-center justify-end gap-1">
+                  {#if job.status === "failed"}
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      aria-label={$_("admin.queues.retry")}
+                      onclick={() => retryJob(job)}
+                    >
+                      <span class="icon-[ri--restart-line] h-4 w-4"></span>
+                    </Button>
+                  {/if}
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    aria-label={$_("admin.queues.remove")}
+                    class="text-destructive hover:text-destructive hover:bg-destructive/10"
+                    onclick={() => removeJob(job)}
+                  >
+                    <span class="icon-[ri--delete-bin-line] h-4 w-4"></span>
+                  </Button>
+                </div>
+              </td>
+            </tr>
+          {/each}
+          {#if data.jobs.length === 0}
+            <tr>
+              <td colspan="6" class="px-4 py-8 text-center text-muted-foreground"
+                >{$_("admin.queues.no_jobs")}</td
+              >
+            </tr>
+          {/if}
+        </tbody>
+      </table>
+    </div>
+
+    {#if data.total > data.limit}
+      <div class="flex items-center justify-between mt-4 flex-wrap gap-3">
+        <span class="text-sm text-muted-foreground">
+          {$_("admin.users.showing", {
+            values: {
+              start: data.offset + 1,
+              end: Math.min(data.offset + data.limit, data.total),
+              total: data.total,
+            },
+          })}
+        </span>
+        <Pagination
+          currentPage={Math.floor(data.offset / data.limit) + 1}
+          totalPages={Math.ceil(data.total / data.limit)}
+          onPageChange={(p) => navigate({ offset: String((p - 1) * data.limit) })}
+        />
+      </div>
+    {/if}
+  {/if}
+</div>

packages/frontend/src/routes/admin/recordings/+page.svelte

@@ -11,6 +11,8 @@
   import * as Dialog from "$lib/components/ui/dialog";
   import type { Recording } from "$lib/types";
   import TimeAgo from "javascript-time-ago";
+  import Meta from "$lib/components/meta/meta.svelte";
+  import Pagination from "$lib/components/pagination/pagination.svelte";
 
   const { data } = $props();
   const timeAgo = new TimeAgo("en");
@@ -63,15 +65,17 @@
   }
 </script>
 
-<div class="py-3 sm:py-6 sm:pl-6">
+<Meta title={$_("admin.recordings.title")} description={null} />
-  <div class="flex items-center justify-between mb-6 px-3 sm:px-0">
+
+<div class="py-3 sm:py-6 lg:pl-6">
+  <div class="flex items-center justify-between mb-6">
     <h1 class="text-2xl font-bold">{$_("admin.recordings.title")}</h1>
     <span class="text-sm text-muted-foreground"
       >{$_("admin.users.total", { values: { total: data.total } })}</span
     >
   </div>
 
-  <div class="flex flex-wrap items-center gap-3 mb-4 px-3 sm:px-0">
+  <div class="flex flex-wrap items-center gap-3 mb-4">
     <Input
       placeholder={$_("admin.recordings.search_placeholder")}
       class="max-w-xs"
@@ -128,10 +132,12 @@
             <td class="px-4 py-3 hidden sm:table-cell">
               <div class="flex gap-1">
                 <Badge
-                  variant={recording.status === "published" ? "default" : "outline"}
+                  variant="outline"
-                  class={recording.status === "draft" ? "text-muted-foreground" : ""}
+                  class={recording.status === "published"
+                    ? "text-green-600 border-green-500/40 bg-green-500/10"
+                    : "text-yellow-600 border-yellow-500/40 bg-yellow-500/10"}
                 >
-                  {recording.status}
+                  {$_(`recording_card.status_${recording.status}`)}
                 </Badge>
                 {#if recording.public}
                   <Badge variant="outline" class="text-blue-600 border-blue-500/40 bg-blue-500/10"
@@ -174,7 +180,7 @@
   </div>
 
   {#if data.total > data.limit}
-    <div class="flex items-center justify-between mt-4 px-3 sm:px-0">
+    <div class="flex items-center justify-between mt-4 flex-wrap gap-3">
       <span class="text-sm text-muted-foreground">
         {$_("admin.users.showing", {
           values: {
@@ -184,28 +190,15 @@
           },
         })}
       </span>
-      <div class="flex gap-2">
+      <Pagination
-        <Button
+        currentPage={Math.floor(data.offset / data.limit) + 1}
-          size="sm"
+        totalPages={Math.ceil(data.total / data.limit)}
-          variant="outline"
+        onPageChange={(p) => {
-          disabled={data.offset === 0}
-          onclick={() => {
           const params = new SvelteURLSearchParams(page.url.searchParams.toString());
-            params.set("offset", String(Math.max(0, data.offset - data.limit)));
+          params.set("offset", String((p - 1) * data.limit));
           goto(`?${params.toString()}`);
-          }}>{$_("common.previous")}</Button
+        }}
-        >
+      />
-        <Button
-          size="sm"
-          variant="outline"
-          disabled={data.offset + data.limit >= data.total}
-          onclick={() => {
-            const params = new SvelteURLSearchParams(page.url.searchParams.toString());
-            params.set("offset", String(data.offset + data.limit));
-            goto(`?${params.toString()}`);
-          }}>{$_("common.next")}</Button
-        >
-      </div>
     </div>
   {/if}
 </div>

packages/frontend/src/routes/admin/users/+page.svelte

@@ -12,6 +12,8 @@
   import { Badge } from "$lib/components/ui/badge";
   import * as Dialog from "$lib/components/ui/dialog";
   import type { User } from "$lib/types";
+  import Meta from "$lib/components/meta/meta.svelte";
+  import Pagination from "$lib/components/pagination/pagination.svelte";
 
   const { data } = $props();
 
@@ -84,8 +86,10 @@
   }
 </script>
 
-<div class="py-3 sm:py-6 sm:pl-6">
+<Meta title={$_("admin.users.title")} description={null} />
-  <div class="flex items-center justify-between mb-6 px-3 sm:px-0">
+
+<div class="py-3 sm:py-6 lg:pl-6">
+  <div class="flex items-center justify-between mb-6">
     <h1 class="text-2xl font-bold">{$_("admin.users.title")}</h1>
     <span class="text-sm text-muted-foreground"
       >{$_("admin.users.total", { values: { total: data.total } })}</span
@@ -93,7 +97,7 @@
   </div>
 
   <!-- Filters -->
-  <div class="flex flex-wrap items-center gap-3 mb-4 px-3 sm:px-0">
+  <div class="flex flex-wrap items-center gap-3 mb-4">
     <Input
       placeholder={$_("admin.users.search_placeholder")}
       class="max-w-xs"
@@ -225,7 +229,7 @@
 
   <!-- Pagination -->
   {#if data.total > data.limit}
-    <div class="flex items-center justify-between mt-4 px-3 sm:px-0">
+    <div class="flex items-center justify-between mt-4 flex-wrap gap-3">
       <span class="text-sm text-muted-foreground">
         {$_("admin.users.showing", {
           values: {
@@ -235,32 +239,15 @@
           },
         })}
       </span>
-      <div class="flex gap-2">
+      <Pagination
-        <Button
+        currentPage={Math.floor(data.offset / data.limit) + 1}
-          size="sm"
+        totalPages={Math.ceil(data.total / data.limit)}
-          variant="outline"
+        onPageChange={(p) => {
-          disabled={data.offset === 0}
-          onclick={() => {
           const params = new SvelteURLSearchParams(page.url.searchParams.toString());
-            params.set("offset", String(Math.max(0, data.offset - data.limit)));
+          params.set("offset", String((p - 1) * data.limit));
           goto(`?${params.toString()}`);
         }}
-        >
+      />
-          {$_("common.previous")}
-        </Button>
-        <Button
-          size="sm"
-          variant="outline"
-          disabled={data.offset + data.limit >= data.total}
-          onclick={() => {
-            const params = new SvelteURLSearchParams(page.url.searchParams.toString());
-            params.set("offset", String(data.offset + data.limit));
-            goto(`?${params.toString()}`);
-          }}
-        >
-          {$_("common.next")}
-        </Button>
-      </div>
     </div>
   {/if}
 </div>

packages/frontend/src/routes/admin/users/[id]/+page.svelte

@@ -13,7 +13,9 @@
   import { Button } from "$lib/components/ui/button";
   import { Input } from "$lib/components/ui/input";
   import { Label } from "$lib/components/ui/label";
+  import { Card, CardContent } from "$lib/components/ui/card";
   import { FileDropZone, MEGABYTE } from "$lib/components/ui/file-drop-zone";
+  import Meta from "$lib/components/meta/meta.svelte";
 
   const { data } = $props();
 
@@ -125,11 +127,10 @@
   }
 </script>
 
-<div class="p-3 sm:p-6 max-w-2xl">
+<Meta title={data.user.artist_name || data.user.email} description={null} />
-  <div class="flex items-center gap-4 mb-6">
+
-    <Button variant="ghost" href="/admin/users" size="sm">
+<div class="py-3 sm:py-6 lg:pl-6">
-      <span class="icon-[ri--arrow-left-line] h-4 w-4 mr-1"></span>{$_("common.back")}
+  <div class="mb-6">
-    </Button>
     <div>
       <h1 class="text-2xl font-bold">{data.user.artist_name || data.user.email}</h1>
       <p class="text-xs text-muted-foreground">
@@ -140,25 +141,38 @@
     </div>
   </div>
 
-  <div class="space-y-6">
+  <div class="space-y-6 max-w-2xl">
-    <!-- Basic info -->
+    <!-- Profile & files card -->
+    <Card class="bg-card/50 border-primary/20">
+      <CardContent class="space-y-5 pt-6">
         <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
           <div class="space-y-1.5">
             <Label for="firstName">{$_("admin.user_edit.first_name")}</Label>
-        <Input id="firstName" bind:value={firstName} />
+            <Input
+              id="firstName"
+              bind:value={firstName}
+              class="bg-background/50 border-primary/20 focus:border-primary"
+            />
           </div>
           <div class="space-y-1.5">
             <Label for="lastName">{$_("admin.user_edit.last_name")}</Label>
-        <Input id="lastName" bind:value={lastName} />
+            <Input
+              id="lastName"
+              bind:value={lastName}
+              class="bg-background/50 border-primary/20 focus:border-primary"
+            />
           </div>
         </div>
 
         <div class="space-y-1.5">
           <Label for="artistName">{$_("admin.user_edit.artist_name")}</Label>
-      <Input id="artistName" bind:value={artistName} />
+          <Input
+            id="artistName"
+            bind:value={artistName}
+            class="bg-background/50 border-primary/20 focus:border-primary"
+          />
         </div>
 
-    <!-- Avatar -->
         <div class="space-y-1.5">
           <Label>{$_("admin.user_edit.avatar")}</Label>
           {#if avatarId}
@@ -168,10 +182,13 @@
               class="h-20 w-20 rounded-full object-cover mb-2"
             />
           {/if}
-      <FileDropZone accept="image/*" maxFileSize={10 * MEGABYTE} onUpload={handleAvatarUpload} />
+          <FileDropZone
+            accept="image/*"
+            maxFileSize={10 * MEGABYTE}
+            onUpload={handleAvatarUpload}
+          />
         </div>
 
-    <!-- Banner -->
         <div class="space-y-1.5">
           <Label>{$_("admin.user_edit.banner")}</Label>
           {#if bannerId}
@@ -181,10 +198,13 @@
               class="w-full h-24 rounded object-cover mb-2"
             />
           {/if}
-      <FileDropZone accept="image/*" maxFileSize={10 * MEGABYTE} onUpload={handleBannerUpload} />
+          <FileDropZone
+            accept="image/*"
+            maxFileSize={10 * MEGABYTE}
+            onUpload={handleBannerUpload}
+          />
         </div>
 
-    <!-- Model photo (used in cards & model page, not for avatar/comments) -->
         <div class="space-y-1.5">
           <Label>{$_("admin.user_edit.model_photo")}</Label>
           <p class="text-xs text-muted-foreground">{$_("admin.user_edit.model_photo_hint")}</p>
@@ -195,10 +215,13 @@
               class="w-full h-48 rounded object-cover mb-2"
             />
           {/if}
-      <FileDropZone accept="image/*" maxFileSize={10 * MEGABYTE} onUpload={handlePhotoUpload2} />
+          <FileDropZone
+            accept="image/*"
+            maxFileSize={10 * MEGABYTE}
+            onUpload={handlePhotoUpload2}
+          />
         </div>
 
-    <!-- Admin flag -->
         <label
           class="flex items-center gap-3 rounded-lg border border-border/40 px-4 py-3 cursor-pointer hover:bg-muted/20 transition-colors"
         >
@@ -213,18 +236,19 @@
           </div>
         </label>
 
-    <div class="flex gap-3">
         <Button
           onclick={handleSave}
           disabled={saving}
-        class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
+          class="cursor-pointer w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
         >
           {saving ? $_("admin.common.saving") : $_("admin.common.save_changes")}
         </Button>
-    </div>
+      </CardContent>
+    </Card>
 
-    <!-- Photo gallery -->
+    <!-- Photo gallery card -->
-    <div class="space-y-3 pt-4 border-t border-border/40">
+    <Card class="bg-card/50 border-primary/20">
+      <CardContent class="space-y-4 pt-6">
         <Label>{$_("admin.user_edit.photos")}</Label>
 
         {#if data.user.photos && data.user.photos.length > 0}
@@ -236,13 +260,14 @@
                   alt=""
                   class="w-full aspect-square object-cover rounded"
                 />
-              <button
+                <Button
-                class="absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity rounded"
+                  variant="ghost"
+                  class="absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity rounded h-auto p-0"
                   onclick={() => removePhoto(photo.id)}
-                type="button"
+                  aria-label="Remove photo"
                 >
                   <span class="icon-[ri--delete-bin-line] h-5 w-5 text-white"></span>
-              </button>
+                </Button>
               </div>
             {/each}
           </div>
@@ -251,6 +276,7 @@
         {/if}
 
         <FileDropZone accept="image/*" maxFileSize={10 * MEGABYTE} onUpload={handlePhotoUpload} />
-    </div>
+      </CardContent>
+    </Card>
   </div>
 </div>

packages/frontend/src/routes/admin/videos/+page.svelte

@@ -11,6 +11,8 @@
   import { Input } from "$lib/components/ui/input";
   import * as Dialog from "$lib/components/ui/dialog";
   import type { Video } from "$lib/types";
+  import Meta from "$lib/components/meta/meta.svelte";
+  import Pagination from "$lib/components/pagination/pagination.svelte";
 
   const { data } = $props();
 
@@ -61,8 +63,10 @@
   }
 </script>
 
-<div class="py-3 sm:py-6 sm:pl-6">
+<Meta title={$_("admin.videos.title")} description={null} />
-  <div class="flex items-center justify-between mb-6 px-3 sm:px-0">
+
+<div class="py-3 sm:py-6 lg:pl-6">
+  <div class="flex items-center justify-between mb-6">
     <h1 class="text-2xl font-bold">{$_("admin.videos.title")}</h1>
     <div class="flex items-center gap-3">
       <span class="text-sm text-muted-foreground"
@@ -78,7 +82,7 @@
   </div>
 
   <!-- Filters -->
-  <div class="flex flex-wrap items-center gap-3 mb-4 px-3 sm:px-0">
+  <div class="flex flex-wrap items-center gap-3 mb-4">
     <Input
       placeholder={$_("admin.videos.search_placeholder")}
       class="max-w-xs"
@@ -206,7 +210,7 @@
 
   <!-- Pagination -->
   {#if data.total > data.limit}
-    <div class="flex items-center justify-between mt-4 px-3 sm:px-0">
+    <div class="flex items-center justify-between mt-4 flex-wrap gap-3">
       <span class="text-sm text-muted-foreground">
         {$_("admin.users.showing", {
           values: {
@@ -216,32 +220,15 @@
           },
         })}
       </span>
-      <div class="flex gap-2">
+      <Pagination
-        <Button
+        currentPage={Math.floor(data.offset / data.limit) + 1}
-          size="sm"
+        totalPages={Math.ceil(data.total / data.limit)}
-          variant="outline"
+        onPageChange={(p) => {
-          disabled={data.offset === 0}
-          onclick={() => {
           const params = new SvelteURLSearchParams(page.url.searchParams.toString());
-            params.set("offset", String(Math.max(0, data.offset - data.limit)));
+          params.set("offset", String((p - 1) * data.limit));
           goto(`?${params.toString()}`);
         }}
-        >
+      />
-          {$_("common.previous")}
-        </Button>
-        <Button
-          size="sm"
-          variant="outline"
-          disabled={data.offset + data.limit >= data.total}
-          onclick={() => {
-            const params = new SvelteURLSearchParams(page.url.searchParams.toString());
-            params.set("offset", String(data.offset + data.limit));
-            goto(`?${params.toString()}`);
-          }}
-        >
-          {$_("common.next")}
-        </Button>
-      </div>
     </div>
   {/if}
 </div>

packages/frontend/src/routes/admin/videos/[id]/+page.svelte

@@ -10,9 +10,11 @@
   import { Textarea } from "$lib/components/ui/textarea";
   import { TagsInput } from "$lib/components/ui/tags-input";
   import { FileDropZone, MEGABYTE } from "$lib/components/ui/file-drop-zone";
+  import { Card, CardContent } from "$lib/components/ui/card";
   import { getAssetUrl } from "$lib/api";
   import { Select, SelectContent, SelectItem, SelectTrigger } from "$lib/components/ui/select";
   import { DatePicker } from "$lib/components/ui/date-picker";
+  import Meta from "$lib/components/meta/meta.svelte";
 
   const { data } = $props();
 
@@ -102,15 +104,20 @@
   }
 </script>
 
-<div class="p-3 sm:p-6 max-w-2xl">
+<Meta title={$_("admin.video_form.edit_title")} description={null} />
-  <div class="flex items-center gap-4 mb-6">
+
-    <Button variant="ghost" href="/admin/videos" size="sm">
+<div class="py-3 sm:py-6 lg:pl-6">
-      <span class="icon-[ri--arrow-left-line] h-4 w-4 mr-1"></span>{$_("common.back")}
+  <div class="mb-6">
-    </Button>
+    <h1 class="text-2xl font-bold">{data.video.title}</h1>
-    <h1 class="text-2xl font-bold">{$_("admin.video_form.edit_title")}</h1>
+    <p class="text-xs text-muted-foreground mt-0.5">
+      {data.video.slug}{data.video.premium ? " · premium" : ""}{data.video.featured
+        ? " · featured"
+        : ""}
+    </p>
   </div>
 
-  <div class="space-y-5">
+  <Card class="bg-card/50 border-primary/20 max-w-2xl">
+    <CardContent class="space-y-5 pt-6">
       <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
         <div class="space-y-1.5">
           <Label for="title">{$_("admin.common.title_field")}</Label>
@@ -118,11 +125,17 @@
             id="title"
             bind:value={title}
             placeholder={$_("admin.video_form.title_placeholder")}
+            class="bg-background/50 border-primary/20 focus:border-primary"
           />
         </div>
         <div class="space-y-1.5">
           <Label for="slug">{$_("admin.common.slug_field")}</Label>
-        <Input id="slug" bind:value={slug} placeholder={$_("admin.video_form.slug_placeholder")} />
+          <Input
+            id="slug"
+            bind:value={slug}
+            placeholder={$_("admin.video_form.slug_placeholder")}
+            class="bg-background/50 border-primary/20 focus:border-primary"
+          />
         </div>
       </div>
 
@@ -133,6 +146,7 @@
           bind:value={description}
           placeholder={$_("admin.video_form.description_placeholder")}
           rows={3}
+          class="bg-background/50 border-primary/20 focus:border-primary"
         />
       </div>
 
@@ -165,7 +179,10 @@
 
       <div class="space-y-1.5">
         <Label>{$_("admin.common.tags")}</Label>
-      <TagsInput bind:value={tags} />
+        <TagsInput
+          bind:value={tags}
+          class="bg-background/50 border-primary/20 focus:border-primary"
+        />
       </div>
 
       <div class="space-y-1.5">
@@ -192,7 +209,7 @@
         <div class="space-y-1.5">
           <Label>{$_("admin.video_form.models")}</Label>
           <Select type="multiple" bind:value={selectedModelIds}>
-          <SelectTrigger class="w-full">
+            <SelectTrigger class="w-full bg-background/50 border-primary/20">
               {#if selectedModelIds.length}
                 {$_("admin.video_form.models_selected", {
                   values: { count: selectedModelIds.length },
@@ -219,15 +236,13 @@
         </div>
       {/if}
 
-    <div class="flex gap-3 pt-2">
       <Button
         onclick={handleSubmit}
         disabled={saving}
-        class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
+        class="cursor-pointer w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
       >
         {saving ? $_("admin.common.saving") : $_("admin.common.save_changes")}
       </Button>
-      <Button variant="outline" href="/admin/videos">{$_("common.cancel")}</Button>
+    </CardContent>
-    </div>
+  </Card>
-  </div>
 </div>

packages/frontend/src/routes/admin/videos/new/+page.svelte

@@ -10,6 +10,8 @@
   import { TagsInput } from "$lib/components/ui/tags-input";
   import { DatePicker } from "$lib/components/ui/date-picker";
   import { FileDropZone, MEGABYTE } from "$lib/components/ui/file-drop-zone";
+  import { Card, CardContent } from "$lib/components/ui/card";
+  import Meta from "$lib/components/meta/meta.svelte";
 
   const { data } = $props();
 
@@ -97,15 +99,15 @@
   }
 </script>
 
-<div class="p-3 sm:p-6 max-w-2xl">
+<Meta title={$_("admin.video_form.new_title")} description={null} />
-  <div class="flex items-center gap-4 mb-6">
+
-    <Button variant="ghost" href="/admin/videos" size="sm">
+<div class="py-3 sm:py-6 lg:pl-6">
-      <span class="icon-[ri--arrow-left-line] h-4 w-4 mr-1"></span>{$_("common.back")}
+  <div class="mb-6">
-    </Button>
     <h1 class="text-2xl font-bold">{$_("admin.video_form.new_title")}</h1>
   </div>
 
-  <div class="space-y-5">
+  <Card class="bg-card/50 border-primary/20 max-w-2xl">
+    <CardContent class="space-y-5 pt-6">
       <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
         <div class="space-y-1.5">
           <Label for="title">{$_("admin.common.title_field")}</Label>
@@ -116,11 +118,17 @@
               if (!slug) slug = generateSlug(title);
             }}
             placeholder={$_("admin.video_form.title_placeholder")}
+            class="bg-background/50 border-primary/20 focus:border-primary"
           />
         </div>
         <div class="space-y-1.5">
           <Label for="slug">{$_("admin.common.slug_field")}</Label>
-        <Input id="slug" bind:value={slug} placeholder={$_("admin.video_form.slug_placeholder")} />
+          <Input
+            id="slug"
+            bind:value={slug}
+            placeholder={$_("admin.video_form.slug_placeholder")}
+            class="bg-background/50 border-primary/20 focus:border-primary"
+          />
         </div>
       </div>
 
@@ -131,28 +139,32 @@
           bind:value={description}
           placeholder={$_("admin.video_form.description_placeholder")}
           rows={3}
+          class="bg-background/50 border-primary/20 focus:border-primary"
         />
       </div>
 
       <div class="space-y-1.5">
         <Label>{$_("admin.common.cover_image")}</Label>
         <FileDropZone accept="image/*" maxFileSize={10 * MEGABYTE} onUpload={handleImageUpload} />
-      {#if imageId}<p class="text-xs text-green-600 mt-1">
+        {#if imageId}
-          {$_("admin.common.image_uploaded")} ✓
+          <p class="text-xs text-green-600 mt-1">{$_("admin.common.image_uploaded")} ✓</p>
-        </p>{/if}
+        {/if}
       </div>
 
       <div class="space-y-1.5">
         <Label>{$_("admin.video_form.video_file")}</Label>
         <FileDropZone accept="video/*" maxFileSize={2000 * MEGABYTE} onUpload={handleVideoUpload} />
-      {#if movieId}<p class="text-xs text-green-600 mt-1">
+        {#if movieId}
-          {$_("admin.video_form.video_uploaded")} ✓
+          <p class="text-xs text-green-600 mt-1">{$_("admin.video_form.video_uploaded")} ✓</p>
-        </p>{/if}
+        {/if}
       </div>
 
       <div class="space-y-1.5">
         <Label>{$_("admin.common.tags")}</Label>
-      <TagsInput bind:value={tags} />
+        <TagsInput
+          bind:value={tags}
+          class="bg-background/50 border-primary/20 focus:border-primary"
+        />
       </div>
 
       <div class="space-y-1.5">
@@ -177,12 +189,13 @@
 
       {#if data.models.length > 0}
         <div class="space-y-2">
-        <Label>Models</Label>
+          <Label>{$_("admin.video_form.models")}</Label>
           <div class="flex flex-wrap gap-2">
             {#each data.models as model (model.id)}
-            <button
+              <Button
-              type="button"
+                variant="ghost"
-              class={`px-3 py-1.5 rounded-full text-sm border transition-colors ${
+                size="sm"
+                class={`px-3 py-1.5 h-auto rounded-full text-sm border transition-colors ${
                   selectedModelIds.includes(model.id)
                     ? "border-primary bg-primary/10 text-primary"
                     : "border-border/40 text-muted-foreground hover:border-primary/40"
@@ -190,21 +203,19 @@
                 onclick={() => toggleModel(model.id)}
               >
                 {model.artist_name || model.id}
-            </button>
+              </Button>
             {/each}
           </div>
         </div>
       {/if}
 
-    <div class="flex gap-3 pt-2">
       <Button
         onclick={handleSubmit}
         disabled={saving}
-        class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
+        class="cursor-pointer w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
       >
         {saving ? $_("admin.common.creating") : $_("admin.video_form.create")}
       </Button>
-      <Button variant="outline" href="/admin/videos">{$_("common.cancel")}</Button>
+    </CardContent>
-    </div>
+  </Card>
-  </div>
 </div>

packages/frontend/src/routes/faq/+page.svelte

@@ -8,7 +8,8 @@
   import Meta from "$lib/components/meta/meta.svelte";
 
   let searchQuery = $state("");
-  let expandedItems = new SvelteSet<number>();
+  // eslint-disable-next-line svelte/no-unnecessary-state-wrap -- variable is reassigned, $state is required
+  let expandedItems = $state(new SvelteSet<number>());
 
   const faqCategories = [
     {

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/magazine/+page.svelte

@@ -13,6 +13,7 @@
   import Meta from "$lib/components/meta/meta.svelte";
   import SexyBackground from "$lib/components/background/background.svelte";
   import PageHero from "$lib/components/page-hero/page-hero.svelte";
+  import Pagination from "$lib/components/pagination/pagination.svelte";
 
   const timeAgo = new TimeAgo("en");
   const { data } = $props();
@@ -50,22 +51,6 @@
     goto(`?${params.toString()}`);
   }
 
-  const totalPages = $derived(Math.ceil(data.total / data.limit));
-
-  const pageNumbers = $derived(() => {
-    const pages: (number | -1)[] = [];
-    if (totalPages <= 7) {
-      for (let i = 1; i <= totalPages; i++) pages.push(i);
-    } else {
-      pages.push(1);
-      if (data.page > 3) pages.push(-1);
-      for (let i = Math.max(2, data.page - 1); i <= Math.min(totalPages - 1, data.page + 1); i++)
-        pages.push(i);
-      if (data.page < totalPages - 2) pages.push(-1);
-      pages.push(totalPages);
-    }
-    return pages;
-  });
 </script>
 
 <Meta title={$_("magazine.title")} description={$_("magazine.description")} />
@@ -308,38 +293,13 @@
     {/if}
 
     <!-- Pagination -->
-    {#if totalPages > 1}
+    {#if Math.ceil(data.total / data.limit) > 1}
       <div class="flex flex-col items-center gap-3 mt-10">
-        <div class="flex items-center gap-1">
+        <Pagination
-          <Button
+          currentPage={data.page}
-            variant="outline"
+          totalPages={Math.ceil(data.total / data.limit)}
-            size="sm"
+          onPageChange={goToPage}
-            disabled={data.page <= 1}
+        />
-            onclick={() => goToPage(data.page - 1)}
-            class="border-primary/20 hover:bg-primary/10">{$_("common.previous")}</Button
-          >
-          {#each pageNumbers() as p, i (i)}
-            {#if p === -1}
-              <span class="px-2 text-muted-foreground select-none">…</span>
-            {:else}
-              <Button
-                variant={p === data.page ? "default" : "outline"}
-                size="sm"
-                onclick={() => goToPage(p)}
-                class={p === data.page
-                  ? "bg-gradient-to-r from-primary to-accent min-w-9"
-                  : "border-primary/20 hover:bg-primary/10 min-w-9"}>{p}</Button
-              >
-            {/if}
-          {/each}
-          <Button
-            variant="outline"
-            size="sm"
-            disabled={data.page >= totalPages}
-            onclick={() => goToPage(data.page + 1)}
-            class="border-primary/20 hover:bg-primary/10">{$_("common.next")}</Button
-          >
-        </div>
         <p class="text-sm text-muted-foreground">
           {$_("common.total_results", { values: { total: data.total } })}
         </p>

packages/frontend/src/routes/me/+layout.server.ts

@@ -0,0 +1,12 @@
+import { redirect } from "@sveltejs/kit";
+import { isModel } from "$lib/api";
+
+export async function load({ locals }) {
+  if (!locals.authStatus.authenticated) {
+    throw redirect(302, "/login");
+  }
+  return {
+    authStatus: locals.authStatus,
+    isModel: isModel(locals.authStatus.user!),
+  };
+}

packages/frontend/src/routes/me/+layout.svelte

@@ -0,0 +1,112 @@
+<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";
+
+  const { children, data } = $props();
+
+  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]" },
+    ...(data.isModel
+      ? [
+          {
+            name: $_("me.nav.analytics"),
+            href: "/me/analytics",
+            icon: "icon-[ri--line-chart-line]",
+          },
+        ]
+      : []),
+  ]);
+
+  function isActive(href: string) {
+    return page.url.pathname.startsWith(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">
+  <div class="container mx-auto px-4">
+    <!-- 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">{$_("me.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.href)
+                ? "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>
+            {$_("me.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-muted-foreground">{$_("me.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.href)
+                  ? "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/me/+page.server.ts

@@ -1,25 +1,4 @@
 import { redirect } from "@sveltejs/kit";
-import { getAnalytics, getFolders, getRecordings } from "$lib/services";
+export function load() {
-import { isModel } from "$lib/api";
+  throw redirect(302, "/me/profile");
-
-export async function load({ locals, fetch }) {
-  // Redirect to login if not authenticated
-  if (!locals.authStatus.authenticated) {
-    throw redirect(302, "/login");
-  }
-
-  const recordings = await getRecordings(fetch).catch(() => []);
-
-  const analytics = isModel(locals.authStatus.user!)
-    ? await getAnalytics(fetch).catch(() => null)
-    : null;
-
-  const folders = await getFolders(fetch).catch(() => []);
-
-  return {
-    authStatus: locals.authStatus,
-    folders,
-    recordings,
-    analytics,
-  };
 }

packages/frontend/src/routes/me/+page.svelte

@@ -1,690 +0,0 @@
-<script lang="ts">
-  import { _ } from "svelte-i18n";
-  import { Button } from "$lib/components/ui/button";
-  import {
-    Card,
-    CardContent,
-    CardDescription,
-    CardHeader,
-    CardTitle,
-  } from "$lib/components/ui/card";
-  import { Tabs, TabsContent, TabsList, TabsTrigger } from "$lib/components/ui/tabs";
-  import { Input } from "$lib/components/ui/input";
-  import { Label } from "$lib/components/ui/label";
-  import SexyBackground from "$lib/components/background/background.svelte";
-  import { onMount, untrack } from "svelte";
-  import { goto, invalidateAll } from "$app/navigation";
-  import { getAssetUrl, isModel } from "$lib/api";
-  import * as Alert from "$lib/components/ui/alert";
-  import { toast } from "svelte-sonner";
-  import { deleteRecording, removeFile, updateProfile, uploadFile } from "$lib/services";
-  import * as Dialog from "$lib/components/ui/dialog";
-  import { Textarea } from "$lib/components/ui/textarea";
-  import Meta from "$lib/components/meta/meta.svelte";
-  import { TagsInput } from "$lib/components/ui/tags-input";
-  import { FileDropZone, MEGABYTE } from "$lib/components/ui/file-drop-zone";
-  import RecordingCard from "$lib/components/recording-card/recording-card.svelte";
-
-  const { data } = $props();
-
-  let recordings = $state(untrack(() => data.recordings));
-  let deleteTarget = $state<string | null>(null);
-  let deleteOpen = $state(false);
-  let deleting = $state(false);
-
-  let activeTab = $state("settings");
-
-  let firstName = $state(untrack(() => data.authStatus.user!.first_name));
-  let lastName = $state(untrack(() => data.authStatus.user!.last_name));
-  let artistName = $state(untrack(() => data.authStatus.user!.artist_name));
-  let description = $state(untrack(() => data.authStatus.user!.description));
-  let tags = $state(untrack(() => data.authStatus.user!.tags ?? undefined));
-  $effect(() => {
-    recordings = data.recordings;
-    firstName = data.authStatus.user!.first_name;
-    lastName = data.authStatus.user!.last_name;
-    artistName = data.authStatus.user!.artist_name;
-    description = data.authStatus.user!.description;
-    tags = data.authStatus.user!.tags ?? undefined;
-    email = data.authStatus.user!.email;
-  });
-
-  let email = $state(untrack(() => data.authStatus.user!.email));
-  let password = $state("");
-  let confirmPassword = $state("");
-
-  let showPassword = $state(false);
-  let showConfirmPassword = $state(false);
-
-  let isProfileLoading = $state(false);
-  let isProfileError = $state(false);
-  let profileError = $state("");
-
-  let isSecurityLoading = $state(false);
-  let isSecurityError = $state(false);
-  let securityError = $state("");
-
-  async function handleProfileSubmit(e: Event) {
-    e.preventDefault();
-    try {
-      isProfileLoading = true;
-      isProfileError = false;
-      profileError = "";
-
-      let avatarId: string | null | undefined = undefined;
-
-      if (!avatar?.id && data.authStatus.user!.avatar) {
-        // User removed their avatar
-        await removeFile(data.authStatus.user!.avatar);
-        avatarId = null;
-      } else if (avatar?.id) {
-        // Keep existing avatar
-        avatarId = avatar.id;
-      }
-
-      if (avatar?.file) {
-        const formData = new FormData();
-        formData.append("file", avatar.file);
-        const result = await uploadFile(formData);
-        avatarId = result.id;
-      }
-
-      await updateProfile({
-        first_name: firstName,
-        last_name: lastName,
-        artist_name: artistName,
-        description,
-        tags,
-        avatar: avatarId ?? undefined,
-      });
-      toast.success($_("me.settings.toast_update"));
-      invalidateAll();
-    } catch (err) {
-      const e = err as { response?: { errors?: Array<{ message: string }> }; message?: string };
-      profileError = e.response?.errors?.[0]?.message ?? e.message ?? "Unknown error";
-      isProfileError = true;
-    } finally {
-      isProfileLoading = false;
-    }
-  }
-
-  async function handleSecuritySubmit(e: Event) {
-    e.preventDefault();
-    try {
-      if (password !== confirmPassword) {
-        throw new Error($_("me.settings.password_error"));
-      }
-      isSecurityLoading = true;
-      isSecurityError = false;
-      securityError = "";
-      await updateProfile({
-        email,
-        password,
-      });
-      toast.success($_("me.settings.toast_update"));
-      invalidateAll();
-      password = confirmPassword = "";
-    } catch (err) {
-      const e = err as { response?: { errors?: Array<{ message: string }> }; message?: string };
-      securityError = e.response?.errors?.[0]?.message ?? e.message ?? "Unknown error";
-      isSecurityError = true;
-    } finally {
-      isSecurityLoading = false;
-    }
-  }
-
-  let avatar = $state<{
-    id?: string;
-    url: string;
-    name: string;
-    size: number;
-    file?: File;
-  }>();
-
-  async function handleFilesUpload(files: File[]) {
-    const file = files[0];
-    avatar = {
-      name: file.name,
-      size: file.size,
-      url: URL.createObjectURL(file),
-      file,
-    };
-  }
-
-  async function handleAvatarRemove() {
-    if (avatar!.id) {
-      avatar = undefined;
-    } else {
-      setExistingAvatar();
-    }
-  }
-
-  function setExistingAvatar() {
-    if (data.authStatus.user!.avatar) {
-      avatar = {
-        id: data.authStatus.user!.avatar,
-        url: getAssetUrl(data.authStatus.user!.avatar, "thumbnail")!,
-        name: data.authStatus.user!.artist_name ?? "",
-        size: 0,
-      };
-    } else {
-      avatar = undefined;
-    }
-  }
-
-  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;
-    }
-  }
-
-  function handlePlayRecording(id: string) {
-    // Navigate to play page with recording ID
-    goto(`/play?recording=${id}`);
-  }
-
-  onMount(() => {
-    if (data.authStatus.authenticated) {
-      setExistingAvatar();
-      return;
-    }
-    goto("/login");
-  });
-</script>
-
-<Meta
-  title={$_("me.title")}
-  description={$_("me.welcome", {
-    values: { name: data.authStatus.user!.artist_name },
-  })}
-/>
-
-<div
-  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 px-4 py-8">
-    <!-- Header -->
-    <div class="flex items-center justify-between mb-6">
-      <div>
-        <h1 class="text-2xl font-bold">{$_("me.title")}</h1>
-        <p class="text-sm text-muted-foreground mt-0.5">
-          {$_("me.welcome", { values: { name: data.authStatus.user!.artist_name } })}
-        </p>
-      </div>
-      {#if isModel(data.authStatus.user!)}
-        <Button href={`/models/${data.authStatus.user!.slug}`} variant="outline">
-          {$_("me.view_profile")}
-        </Button>
-      {/if}
-    </div>
-
-    <!-- Dashboard Tabs -->
-    <Tabs bind:value={activeTab} class="w-full">
-      <TabsList class="grid w-full {data.analytics ? 'grid-cols-3' : 'grid-cols-2'} max-w-2xl mb-8">
-        <TabsTrigger value="settings" class="flex items-center gap-2">
-          <span class="icon-[ri--settings-4-line] w-4 h-4"></span>
-          {$_("me.settings.title")}
-        </TabsTrigger>
-        <TabsTrigger value="recordings" class="flex items-center gap-2">
-          <span class="icon-[ri--play-list-2-line] w-4 h-4"></span>
-          {$_("me.recordings.title")}
-        </TabsTrigger>
-        {#if data.analytics}
-          <TabsTrigger value="analytics" class="flex items-center gap-2">
-            <span class="icon-[ri--line-chart-line] w-4 h-4"></span>
-            Analytics
-          </TabsTrigger>
-        {/if}
-      </TabsList>
-
-      <!-- Settings Tab -->
-      <TabsContent value="settings" class="space-y-6">
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          <!-- Profile Settings -->
-          <Card class="bg-card/50 border-primary/20">
-            <CardHeader>
-              <CardTitle>{$_("me.settings.profile_title")}</CardTitle>
-              <CardDescription>{$_("me.settings.profile_subtitle")}</CardDescription>
-            </CardHeader>
-            <CardContent class="space-y-4">
-              <form onsubmit={handleProfileSubmit} class="space-y-4">
-                <div class="space-y-2">
-                  <Label>{$_("me.settings.avatar")}</Label>
-                  <div class="flex items-center gap-5">
-                    <FileDropZone
-                      id="avatar"
-                      fileCount={0}
-                      maxFiles={1}
-                      maxFileSize={2 * MEGABYTE}
-                      onUpload={handleFilesUpload}
-                      accept="image/*"
-                      class="h-auto w-auto shrink-0 border-none p-0 rounded-full hover:bg-transparent"
-                    >
-                      <div class="relative group cursor-pointer w-24 h-24">
-                        {#if avatar}
-                          <img
-                            src={avatar.url}
-                            alt={avatar.name}
-                            class="w-24 h-24 rounded-full object-cover ring-4 ring-primary/20 group-hover:ring-primary/50 transition-all"
-                          />
-                          <div
-                            class="absolute inset-0 rounded-full bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
-                          >
-                            <span class="icon-[ri--camera-line] w-7 h-7 text-white"></span>
-                          </div>
-                        {:else}
-                          <div
-                            class="w-24 h-24 rounded-full border-2 border-dashed border-primary/30 group-hover:border-primary/60 bg-primary/5 group-hover:bg-primary/10 transition-all flex flex-col items-center justify-center gap-1"
-                          >
-                            <span
-                              class="icon-[ri--camera-line] w-7 h-7 text-primary/50 group-hover:text-primary/80 transition-colors"
-                            ></span>
-                            <span class="text-xs text-muted-foreground">Upload</span>
-                          </div>
-                        {/if}
-                      </div>
-                    </FileDropZone>
-                    <div class="flex flex-col gap-1">
-                      <p class="text-sm text-muted-foreground">JPG, PNG · max 2 MB</p>
-                      <p class="text-xs text-muted-foreground/70">
-                        Click or drop to {avatar ? "change" : "upload"}
-                      </p>
-                      {#if avatar}
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onclick={handleAvatarRemove}
-                          class="cursor-pointer w-fit mt-1 px-2 h-7 text-xs text-muted-foreground hover:text-destructive hover:bg-destructive/10"
-                        >
-                          <span class="icon-[ri--delete-bin-line] w-3.5 h-3.5 mr-1"></span>
-                          Remove
-                        </Button>
-                      {/if}
-                    </div>
-                  </div>
-                </div>
-                <!-- Name Fields -->
-                <div class="grid grid-cols-2 gap-4">
-                  <div class="space-y-2">
-                    <Label for="firstName">{$_("me.settings.first_name")}</Label>
-                    <Input
-                      id="firstName"
-                      placeholder={$_("me.settings.first_name_placeholder")}
-                      bind:value={firstName}
-                      required
-                      class="bg-background/50 border-primary/20 focus:border-primary"
-                    />
-                  </div>
-                  <div class="space-y-2">
-                    <Label for="lastName">{$_("me.settings.last_name")}</Label>
-                    <Input
-                      id="lastName"
-                      placeholder={$_("me.settings.last_name_placeholder")}
-                      bind:value={lastName}
-                      required
-                      class="bg-background/50 border-primary/20 focus:border-primary"
-                    />
-                  </div>
-                </div>
-                <div class="space-y-2">
-                  <Label for="artistName">{$_("me.settings.artist_name")}</Label>
-                  <Input
-                    id="artistName"
-                    placeholder={$_("me.settings.artist_name_placeholder")}
-                    bind:value={artistName}
-                    required
-                    class="bg-background/50 border-primary/20 focus:border-primary"
-                  />
-                </div>
-                <div class="space-y-2">
-                  <Label for="description">{$_("me.settings.description")}</Label>
-                  <Textarea
-                    id="description"
-                    bind:value={description}
-                    placeholder={$_("me.settings.description_placeholder")}
-                    class="bg-background/50 border-primary/20 focus:border-primary"
-                    rows={3}
-                  />
-                </div>
-                <div class="space-y-2">
-                  <Label for="tags">{$_("me.settings.tags")}</Label>
-                  <TagsInput
-                    id="tags"
-                    bind:value={tags}
-                    placeholder={$_("me.settings.tags_placeholder")}
-                    class="bg-background/50 border-primary/20 focus:border-primary"
-                  />
-                </div>
-                {#if isProfileError}
-                  <div class="grid w-full items-start gap-4">
-                    <Alert.Root variant="destructive">
-                      <Alert.Title class="items-center flex"
-                        ><span class="icon-[ri--alert-line] inline-block w-4 h-4 mr-1"></span>{$_(
-                          "me.settings.error",
-                        )}</Alert.Title
-                      >
-                      <Alert.Description>{profileError}</Alert.Description>
-                    </Alert.Root>
-                  </div>
-                {/if}
-                <Button
-                  type="submit"
-                  class="cursor-pointer w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
-                  disabled={isProfileLoading}
-                >
-                  {#if isProfileLoading}
-                    <div
-                      class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"
-                    ></div>
-                    {$_("me.settings.updating_profile")}
-                  {:else}
-                    {$_("me.settings.update_profile")}
-                  {/if}
-                </Button>
-              </form>
-            </CardContent>
-          </Card>
-
-          <!-- Privacy Settings -->
-          <Card class="bg-card/50 border-primary/20">
-            <CardHeader>
-              <CardTitle>{$_("me.settings.privacy_title")}</CardTitle>
-              <CardDescription>{$_("me.settings.privacy_subtitle")}</CardDescription>
-            </CardHeader>
-            <CardContent class="space-y-4">
-              <form onsubmit={handleSecuritySubmit} class="space-y-4">
-                <!-- Email -->
-                <div class="space-y-2">
-                  <Label for="email">{$_("me.settings.email")}</Label>
-                  <Input
-                    id="email"
-                    type="email"
-                    placeholder={$_("me.settings.email_placeholder")}
-                    bind:value={email}
-                    required
-                    class="bg-background/50 border-primary/20 focus:border-primary"
-                  />
-                </div>
-
-                <!-- Password -->
-                <div class="space-y-2">
-                  <Label for="password">{$_("me.settings.password")}</Label>
-                  <div class="relative">
-                    <Input
-                      id="password"
-                      type={showPassword ? "text" : "password"}
-                      placeholder={$_("me.settings.password_placeholder")}
-                      bind:value={password}
-                      required
-                      class="bg-background/50 border-primary/20 focus:border-primary pr-10"
-                    />
-                    <button
-                      type="button"
-                      onclick={() => (showPassword = !showPassword)}
-                      class="cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-                    >
-                      {#if showPassword}
-                        <span class="icon-[ri--eye-off-line] w-4 h-4"></span>
-                      {:else}
-                        <span class="icon-[ri--eye-line] w-4 h-4"></span>
-                      {/if}
-                    </button>
-                  </div>
-                </div>
-
-                <!-- Confirm Password -->
-                <div class="space-y-2">
-                  <Label for="confirmPassword">{$_("me.settings.confirm_password")}</Label>
-                  <div class="relative">
-                    <Input
-                      id="confirmPassword"
-                      type={showConfirmPassword ? "text" : "password"}
-                      placeholder={$_("me.settings.confirm_password_placeholder")}
-                      bind:value={confirmPassword}
-                      required
-                      class="bg-background/50 border-primary/20 focus:border-primary pr-10"
-                    />
-                    <button
-                      type="button"
-                      onclick={() => (showConfirmPassword = !showConfirmPassword)}
-                      class="cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-                    >
-                      {#if showConfirmPassword}
-                        <span class="icon-[ri--eye-off-line] w-4 h-4"></span>
-                      {:else}
-                        <span class="icon-[ri--eye-line] w-4 h-4"></span>
-                      {/if}
-                    </button>
-                  </div>
-                </div>
-                {#if isSecurityError}
-                  <div class="grid w-full items-start gap-4">
-                    <Alert.Root variant="destructive">
-                      <Alert.Title class="items-center flex"
-                        ><span class="icon-[ri--alert-line] inline-block w-4 h-4 mr-1"></span>{$_(
-                          "me.settings.error",
-                        )}</Alert.Title
-                      >
-                      <Alert.Description>{securityError}</Alert.Description>
-                    </Alert.Root>
-                  </div>
-                {/if}
-                <Button
-                  variant="outline"
-                  type="submit"
-                  class="cursor-pointer w-full border-primary/20 hover:bg-primary/10"
-                  disabled={isSecurityLoading}
-                >
-                  {#if isSecurityLoading}
-                    <div
-                      class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"
-                    ></div>
-                    {$_("me.settings.updating_security")}
-                  {:else}
-                    {$_("me.settings.update_security")}
-                  {/if}
-                </Button>
-              </form>
-            </CardContent>
-          </Card>
-        </div>
-      </TabsContent>
-
-      <!-- Recordings Tab -->
-      <TabsContent value="recordings" class="space-y-6">
-        <div class="mb-6 flex justify-between items-center">
-          <div>
-            <h2 class="text-2xl font-bold text-card-foreground">
-              {$_("me.recordings.title")}
-            </h2>
-            <p class="text-muted-foreground">
-              {$_("me.recordings.description")}
-            </p>
-          </div>
-          <Button
-            href="/play"
-            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>
-        </div>
-
-        {#if recordings.length === 0}
-          <Card class="bg-card/50 border-primary/20">
-            <CardContent class="py-12">
-              <div class="flex flex-col items-center justify-center text-center">
-                <div class="mb-4 p-4 rounded-full bg-muted/30 border border-border/30">
-                  <span class="icon-[ri--play-list-2-line] w-12 h-12 text-muted-foreground"></span>
-                </div>
-                <h3 class="text-xl font-semibold mb-2">
-                  {$_("me.recordings.no_recordings")}
-                </h3>
-                <p class="text-muted-foreground mb-6 max-w-md">
-                  {$_("me.recordings.no_recordings_description")}
-                </p>
-                <Button
-                  href="/play"
-                  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>
-              </div>
-            </CardContent>
-          </Card>
-        {: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}
-                onDelete={handleDeleteRecording}
-              />
-            {/each}
-          </div>
-        {/if}
-      </TabsContent>
-
-      <!-- Analytics Tab -->
-      {#if data.analytics}
-        <TabsContent value="analytics" class="space-y-6">
-          <div class="mb-6">
-            <h2 class="text-2xl font-bold text-card-foreground">Analytics Dashboard</h2>
-            <p class="text-muted-foreground">
-              Track your content performance and audience engagement
-            </p>
-          </div>
-
-          <!-- Overview Stats -->
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-            <Card class="bg-card/50 border-primary/20">
-              <CardHeader>
-                <CardTitle class="flex items-center gap-2">
-                  <span class="icon-[ri--video-line] w-5 h-5 text-primary"></span>
-                  Total Videos
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <p class="text-3xl font-bold">{data.analytics.total_videos}</p>
-              </CardContent>
-            </Card>
-            <Card class="bg-card/50 border-primary/20">
-              <CardHeader>
-                <CardTitle class="flex items-center gap-2">
-                  <span class="icon-[ri--heart-fill] w-5 h-5 text-primary"></span>
-                  Total Likes
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <p class="text-3xl font-bold">{data.analytics.total_likes.toLocaleString()}</p>
-              </CardContent>
-            </Card>
-            <Card class="bg-card/50 border-primary/20">
-              <CardHeader>
-                <CardTitle class="flex items-center gap-2">
-                  <span class="icon-[ri--play-fill] w-5 h-5 text-primary"></span>
-                  Total Plays
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <p class="text-3xl font-bold">{data.analytics.total_plays.toLocaleString()}</p>
-              </CardContent>
-            </Card>
-          </div>
-
-          <!-- Video Performance Table -->
-          <Card class="bg-card/50 border-primary/20">
-            <CardHeader>
-              <CardTitle>Video Performance</CardTitle>
-              <CardDescription>Detailed metrics for each video</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div class="overflow-x-auto">
-                <table class="w-full">
-                  <thead>
-                    <tr class="border-b border-border">
-                      <th class="text-left p-3">Title</th>
-                      <th class="text-right p-3">Likes</th>
-                      <th class="text-right p-3">Plays</th>
-                      <th class="text-right p-3">Completion Rate</th>
-                      <th class="text-right p-3">Avg Watch Time</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {#each data.analytics.videos as video (video.slug)}
-                      <tr class="border-b border-border/50 hover:bg-primary/5 transition-colors">
-                        <td class="p-3">
-                          <a
-                            href="/videos/{video.slug}"
-                            class="hover:text-primary transition-colors"
-                          >
-                            {video.title}
-                          </a>
-                        </td>
-                        <td class="text-right p-3 font-medium">
-                          {video.likes}
-                        </td>
-                        <td class="text-right p-3 font-medium">
-                          {video.plays}
-                        </td>
-                        <td class="text-right p-3">
-                          <span
-                            class="inline-flex items-center px-2 py-1 rounded-full text-xs {video.completion_rate >=
-                            70
-                              ? 'bg-green-500/20 text-green-500'
-                              : video.completion_rate >= 40
-                                ? 'bg-yellow-500/20 text-yellow-500'
-                                : 'bg-red-500/20 text-red-500'}"
-                          >
-                            {video.completion_rate.toFixed(1)}%
-                          </span>
-                        </td>
-                        <td class="text-right p-3 text-muted-foreground">
-                          {Math.floor(video.avg_watch_time / 60)}:{(video.avg_watch_time % 60)
-                            .toString()
-                            .padStart(2, "0")}
-                        </td>
-                      </tr>
-                    {/each}
-                  </tbody>
-                </table>
-              </div>
-            </CardContent>
-          </Card>
-        </TabsContent>
-      {/if}
-    </Tabs>
-  </div>
-</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)}>Cancel</Button>
-      <Button variant="destructive" disabled={deleting} onclick={confirmDeleteRecording}>
-        {deleting ? "Deleting…" : "Delete"}
-      </Button>
-    </Dialog.Footer>
-  </Dialog.Content>
-</Dialog.Root>

packages/frontend/src/routes/me/analytics/+page.server.ts

@@ -0,0 +1,12 @@
+import { redirect } from "@sveltejs/kit";
+import { isModel } from "$lib/api";
+import { getAnalytics } from "$lib/services";
+
+export async function load({ locals, fetch }) {
+  if (!isModel(locals.authStatus.user!)) {
+    throw redirect(302, "/me/profile");
+  }
+  return {
+    analytics: await getAnalytics(fetch).catch(() => null),
+  };
+}

packages/frontend/src/routes/me/analytics/+page.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+  import { _ } from "svelte-i18n";
+  import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+  } from "$lib/components/ui/card";
+  import Meta from "$lib/components/meta/meta.svelte";
+
+  const { data } = $props();
+</script>
+
+<Meta title={$_("me.analytics.title")} />
+
+<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">{$_("me.analytics.title")}</h1>
+      <p class="text-sm text-muted-foreground mt-0.5">{$_("me.analytics.description")}</p>
+    </div>
+  </div>
+
+  <div class="space-y-6">
+    {#if data.analytics}
+      <!-- Overview Stats -->
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <Card class="bg-card/50 border-primary/20">
+          <CardHeader>
+            <CardTitle class="flex items-center gap-2">
+              <span class="icon-[ri--video-line] w-5 h-5 text-primary"></span>
+              {$_("me.analytics.total_videos")}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p class="text-3xl font-bold">{data.analytics.total_videos}</p>
+          </CardContent>
+        </Card>
+
+        <Card class="bg-card/50 border-primary/20">
+          <CardHeader>
+            <CardTitle class="flex items-center gap-2">
+              <span class="icon-[ri--heart-fill] w-5 h-5 text-primary"></span>
+              {$_("me.analytics.total_likes")}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p class="text-3xl font-bold">{data.analytics.total_likes.toLocaleString()}</p>
+          </CardContent>
+        </Card>
+
+        <Card class="bg-card/50 border-primary/20">
+          <CardHeader>
+            <CardTitle class="flex items-center gap-2">
+              <span class="icon-[ri--play-fill] w-5 h-5 text-primary"></span>
+              {$_("me.analytics.total_plays")}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p class="text-3xl font-bold">{data.analytics.total_plays.toLocaleString()}</p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <!-- Video Performance Table -->
+      <Card class="bg-card/50 border-primary/20">
+        <CardHeader>
+          <CardTitle>{$_("me.analytics.video_performance")}</CardTitle>
+          <CardDescription>{$_("me.analytics.video_performance_description")}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div class="overflow-x-auto">
+            <table class="w-full">
+              <thead>
+                <tr class="border-b border-border">
+                  <th class="text-left p-3">Title</th>
+                  <th class="text-right p-3">Likes</th>
+                  <th class="text-right p-3">Plays</th>
+                  <th class="text-right p-3">Completion Rate</th>
+                  <th class="text-right p-3">Avg Watch Time</th>
+                </tr>
+              </thead>
+              <tbody>
+                {#each data.analytics.videos as video (video.slug)}
+                  <tr class="border-b border-border/50 hover:bg-primary/5 transition-colors">
+                    <td class="p-3">
+                      <a href="/videos/{video.slug}" class="hover:text-primary transition-colors">
+                        {video.title}
+                      </a>
+                    </td>
+                    <td class="text-right p-3 font-medium">
+                      {video.likes}
+                    </td>
+                    <td class="text-right p-3 font-medium">
+                      {video.plays}
+                    </td>
+                    <td class="text-right p-3">
+                      <span
+                        class="inline-flex items-center px-2 py-1 rounded-full text-xs {video.completion_rate >=
+                        70
+                          ? 'bg-green-500/20 text-green-500'
+                          : video.completion_rate >= 40
+                            ? 'bg-yellow-500/20 text-yellow-500'
+                            : 'bg-red-500/20 text-red-500'}"
+                      >
+                        {video.completion_rate.toFixed(1)}%
+                      </span>
+                    </td>
+                    <td class="text-right p-3 text-muted-foreground">
+                      {Math.floor(video.avg_watch_time / 60)}:{(video.avg_watch_time % 60)
+                        .toString()
+                        .padStart(2, "0")}
+                    </td>
+                  </tr>
+                {/each}
+              </tbody>
+            </table>
+          </div>
+        </CardContent>
+      </Card>
+    {:else}
+      <Card class="bg-card/50 border-primary/20">
+        <CardContent class="py-12">
+          <div class="flex flex-col items-center justify-center text-center">
+            <div class="mb-4 p-4 rounded-full bg-muted/30 border border-border/30">
+              <span class="icon-[ri--line-chart-line] w-12 h-12 text-muted-foreground"></span>
+            </div>
+            <h3 class="text-xl font-semibold mb-2">No analytics available</h3>
+            <p class="text-muted-foreground max-w-md">
+              Analytics data will appear here once your content starts getting views.
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    {/if}
+  </div>
+</div>

packages/frontend/src/routes/me/profile/+page.svelte

@@ -0,0 +1,284 @@
+<script lang="ts">
+  import { _ } from "svelte-i18n";
+  import { invalidateAll } from "$app/navigation";
+  import { untrack } from "svelte";
+  import { getAssetUrl } from "$lib/api";
+  import { toast } from "svelte-sonner";
+  import { updateProfile, uploadFile, removeFile } from "$lib/services";
+  import { Button } from "$lib/components/ui/button";
+  import { Input } from "$lib/components/ui/input";
+  import { Label } from "$lib/components/ui/label";
+  import { Textarea } from "$lib/components/ui/textarea";
+  import { TagsInput } from "$lib/components/ui/tags-input";
+  import { FileDropZone, MEGABYTE } from "$lib/components/ui/file-drop-zone";
+  import * as Alert from "$lib/components/ui/alert";
+  import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+  } from "$lib/components/ui/card";
+  import Meta from "$lib/components/meta/meta.svelte";
+
+  const { data } = $props();
+
+  let firstName = $state(untrack(() => data.authStatus.user!.first_name));
+  let lastName = $state(untrack(() => data.authStatus.user!.last_name));
+  let artistName = $state(untrack(() => data.authStatus.user!.artist_name));
+  let description = $state(untrack(() => data.authStatus.user!.description));
+  let tags = $state(untrack(() => data.authStatus.user!.tags ?? undefined));
+
+  $effect(() => {
+    firstName = data.authStatus.user!.first_name;
+    lastName = data.authStatus.user!.last_name;
+    artistName = data.authStatus.user!.artist_name;
+    description = data.authStatus.user!.description;
+    tags = data.authStatus.user!.tags ?? undefined;
+  });
+
+  let isProfileLoading = $state(false);
+  let isProfileError = $state(false);
+  let profileError = $state("");
+
+  let avatar = $state<{
+    id?: string;
+    url: string;
+    name: string;
+    size: number;
+    file?: File;
+  }>();
+
+  function setExistingAvatar() {
+    if (data.authStatus.user!.avatar) {
+      avatar = {
+        id: data.authStatus.user!.avatar,
+        url: getAssetUrl(data.authStatus.user!.avatar, "thumbnail")!,
+        name: data.authStatus.user!.artist_name ?? "",
+        size: 0,
+      };
+    } else {
+      avatar = undefined;
+    }
+  }
+
+  $effect(() => {
+    setExistingAvatar();
+  });
+
+  async function handleFilesUpload(files: File[]) {
+    const file = files[0];
+    avatar = {
+      name: file.name,
+      size: file.size,
+      url: URL.createObjectURL(file),
+      file,
+    };
+  }
+
+  async function handleAvatarRemove() {
+    if (avatar!.id) {
+      avatar = undefined;
+    } else {
+      setExistingAvatar();
+    }
+  }
+
+  async function handleProfileSubmit(e: Event) {
+    e.preventDefault();
+    try {
+      isProfileLoading = true;
+      isProfileError = false;
+      profileError = "";
+
+      let avatarId: string | null | undefined = undefined;
+
+      if (!avatar?.id && data.authStatus.user!.avatar) {
+        await removeFile(data.authStatus.user!.avatar);
+        avatarId = null;
+      } else if (avatar?.id) {
+        avatarId = avatar.id;
+      }
+
+      if (avatar?.file) {
+        const formData = new FormData();
+        formData.append("file", avatar.file);
+        const result = await uploadFile(formData);
+        avatarId = result.id;
+      }
+
+      await updateProfile({
+        first_name: firstName,
+        last_name: lastName,
+        artist_name: artistName,
+        description,
+        tags,
+        avatar: avatarId ?? undefined,
+      });
+      toast.success($_("me.settings.toast_update"));
+      invalidateAll();
+    } catch (err) {
+      const e = err as { response?: { errors?: Array<{ message: string }> }; message?: string };
+      profileError = e.response?.errors?.[0]?.message ?? e.message ?? "Unknown error";
+      isProfileError = true;
+    } finally {
+      isProfileLoading = false;
+    }
+  }
+</script>
+
+<Meta title={$_("me.settings.profile_title")} />
+
+<div class="py-3 sm:py-6 lg:pl-6">
+  <div class="mb-6">
+    <h1 class="text-2xl font-bold">{$_("me.settings.profile_title")}</h1>
+  </div>
+
+  <Card class="bg-card/50 border-primary/20 max-w-2xl">
+    <CardHeader>
+      <CardTitle>{$_("me.settings.profile_title")}</CardTitle>
+      <CardDescription>{$_("me.settings.profile_subtitle")}</CardDescription>
+    </CardHeader>
+    <CardContent class="space-y-4">
+      <form onsubmit={handleProfileSubmit} class="space-y-4">
+        <div class="space-y-2">
+          <Label>{$_("me.settings.avatar")}</Label>
+          <div class="flex items-center gap-5">
+            <FileDropZone
+              id="avatar"
+              fileCount={0}
+              maxFiles={1}
+              maxFileSize={2 * MEGABYTE}
+              onUpload={handleFilesUpload}
+              accept="image/*"
+              class="h-auto w-auto shrink-0 border-none p-0 rounded-full hover:bg-transparent"
+            >
+              <div class="relative group cursor-pointer w-24 h-24">
+                {#if avatar}
+                  <img
+                    src={avatar.url}
+                    alt={avatar.name}
+                    class="w-24 h-24 rounded-full object-cover ring-4 ring-primary/20 group-hover:ring-primary/50 transition-all"
+                  />
+                  <div
+                    class="absolute inset-0 rounded-full bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
+                  >
+                    <span class="icon-[ri--camera-line] w-7 h-7 text-white"></span>
+                  </div>
+                {:else}
+                  <div
+                    class="w-24 h-24 rounded-full border-2 border-dashed border-primary/30 group-hover:border-primary/60 bg-primary/5 group-hover:bg-primary/10 transition-all flex flex-col items-center justify-center gap-1"
+                  >
+                    <span
+                      class="icon-[ri--camera-line] w-7 h-7 text-primary/50 group-hover:text-primary/80 transition-colors"
+                    ></span>
+                    <span class="text-xs text-muted-foreground">Upload</span>
+                  </div>
+                {/if}
+              </div>
+            </FileDropZone>
+            <div class="flex flex-col gap-1">
+              <p class="text-sm text-muted-foreground">JPG, PNG · max 2 MB</p>
+              <p class="text-xs text-muted-foreground/70">
+                Click or drop to {avatar ? "change" : "upload"}
+              </p>
+              {#if avatar}
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onclick={handleAvatarRemove}
+                  class="cursor-pointer w-fit mt-1 px-2 h-7 text-xs text-muted-foreground hover:text-destructive hover:bg-destructive/10"
+                >
+                  <span class="icon-[ri--delete-bin-line] w-3.5 h-3.5 mr-1"></span>
+                  Remove
+                </Button>
+              {/if}
+            </div>
+          </div>
+        </div>
+
+        <div class="grid grid-cols-2 gap-4">
+          <div class="space-y-2">
+            <Label for="firstName">{$_("me.settings.first_name")}</Label>
+            <Input
+              id="firstName"
+              placeholder={$_("me.settings.first_name_placeholder")}
+              bind:value={firstName}
+              required
+              class="bg-background/50 border-primary/20 focus:border-primary"
+            />
+          </div>
+          <div class="space-y-2">
+            <Label for="lastName">{$_("me.settings.last_name")}</Label>
+            <Input
+              id="lastName"
+              placeholder={$_("me.settings.last_name_placeholder")}
+              bind:value={lastName}
+              required
+              class="bg-background/50 border-primary/20 focus:border-primary"
+            />
+          </div>
+        </div>
+
+        <div class="space-y-2">
+          <Label for="artistName">{$_("me.settings.artist_name")}</Label>
+          <Input
+            id="artistName"
+            placeholder={$_("me.settings.artist_name_placeholder")}
+            bind:value={artistName}
+            required
+            class="bg-background/50 border-primary/20 focus:border-primary"
+          />
+        </div>
+
+        <div class="space-y-2">
+          <Label for="description">{$_("me.settings.description")}</Label>
+          <Textarea
+            id="description"
+            bind:value={description}
+            placeholder={$_("me.settings.description_placeholder")}
+            class="bg-background/50 border-primary/20 focus:border-primary"
+            rows={3}
+          />
+        </div>
+
+        <div class="space-y-2">
+          <Label for="tags">{$_("me.settings.tags")}</Label>
+          <TagsInput
+            id="tags"
+            bind:value={tags}
+            placeholder={$_("me.settings.tags_placeholder")}
+            class="bg-background/50 border-primary/20 focus:border-primary"
+          />
+        </div>
+
+        {#if isProfileError}
+          <div class="grid w-full items-start gap-4">
+            <Alert.Root variant="destructive">
+              <Alert.Title class="items-center flex">
+                <span class="icon-[ri--alert-line] inline-block w-4 h-4 mr-1"></span>
+                {$_("me.settings.error")}
+              </Alert.Title>
+              <Alert.Description>{profileError}</Alert.Description>
+            </Alert.Root>
+          </div>
+        {/if}
+
+        <Button
+          type="submit"
+          class="cursor-pointer w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
+          disabled={isProfileLoading}
+        >
+          {#if isProfileLoading}
+            <div
+              class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"
+            ></div>
+            {$_("me.settings.updating_profile")}
+          {:else}
+            {$_("me.settings.update_profile")}
+          {/if}
+        </Button>
+      </form>
+    </CardContent>
+  </Card>
+</div>

packages/frontend/src/routes/me/recordings/+page.server.ts

@@ -0,0 +1,5 @@
+import { redirect } from "@sveltejs/kit";
+
+export function load() {
+  throw redirect(301, "/play/recordings");
+}

packages/frontend/src/routes/me/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?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 variant="icon">
+          <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"
+          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/me/security/+page.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">
+  import { _ } from "svelte-i18n";
+  import { invalidateAll } from "$app/navigation";
+  import { untrack } from "svelte";
+  import { toast } from "svelte-sonner";
+  import { updateProfile } from "$lib/services";
+  import { Button } from "$lib/components/ui/button";
+  import { Input } from "$lib/components/ui/input";
+  import { Label } from "$lib/components/ui/label";
+  import * as Alert from "$lib/components/ui/alert";
+  import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+  } from "$lib/components/ui/card";
+  import Meta from "$lib/components/meta/meta.svelte";
+
+  const { data } = $props();
+
+  let email = $state(untrack(() => data.authStatus.user!.email));
+  let password = $state("");
+  let confirmPassword = $state("");
+  let showPassword = $state(false);
+  let showConfirmPassword = $state(false);
+
+  let isSecurityLoading = $state(false);
+  let isSecurityError = $state(false);
+  let securityError = $state("");
+
+  async function handleSecuritySubmit(e: Event) {
+    e.preventDefault();
+    try {
+      if (password !== confirmPassword) {
+        throw new Error($_("me.settings.password_error"));
+      }
+      isSecurityLoading = true;
+      isSecurityError = false;
+      securityError = "";
+      await updateProfile({
+        email,
+        password,
+      });
+      toast.success($_("me.settings.toast_update"));
+      invalidateAll();
+      password = confirmPassword = "";
+    } catch (err) {
+      const e = err as { response?: { errors?: Array<{ message: string }> }; message?: string };
+      securityError = e.response?.errors?.[0]?.message ?? e.message ?? "Unknown error";
+      isSecurityError = true;
+    } finally {
+      isSecurityLoading = false;
+    }
+  }
+</script>
+
+<Meta title={$_("me.settings.privacy_title")} />
+
+<div class="py-3 sm:py-6 lg:pl-6">
+  <div class="flex items-center justify-between mb-6">
+    <h1 class="text-2xl font-bold">{$_("me.settings.privacy_title")}</h1>
+  </div>
+
+  <Card class="bg-card/50 border-primary/20 max-w-2xl">
+    <CardHeader>
+      <CardTitle>{$_("me.settings.privacy_title")}</CardTitle>
+      <CardDescription>{$_("me.settings.privacy_subtitle")}</CardDescription>
+    </CardHeader>
+    <CardContent class="space-y-4">
+      <form onsubmit={handleSecuritySubmit} class="space-y-4">
+        <div class="space-y-2">
+          <Label for="email">{$_("me.settings.email")}</Label>
+          <Input
+            id="email"
+            type="email"
+            placeholder={$_("me.settings.email_placeholder")}
+            bind:value={email}
+            required
+            class="bg-background/50 border-primary/20 focus:border-primary"
+          />
+        </div>
+
+        <div class="space-y-2">
+          <Label for="password">{$_("me.settings.password")}</Label>
+          <div class="relative">
+            <Input
+              id="password"
+              type={showPassword ? "text" : "password"}
+              placeholder={$_("me.settings.password_placeholder")}
+              bind:value={password}
+              required
+              class="bg-background/50 border-primary/20 focus:border-primary pr-10"
+            />
+            <button
+              type="button"
+              onclick={() => (showPassword = !showPassword)}
+              class="cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            >
+              {#if showPassword}
+                <span class="icon-[ri--eye-off-line] w-4 h-4"></span>
+              {:else}
+                <span class="icon-[ri--eye-line] w-4 h-4"></span>
+              {/if}
+            </button>
+          </div>
+        </div>
+
+        <div class="space-y-2">
+          <Label for="confirmPassword">{$_("me.settings.confirm_password")}</Label>
+          <div class="relative">
+            <Input
+              id="confirmPassword"
+              type={showConfirmPassword ? "text" : "password"}
+              placeholder={$_("me.settings.confirm_password_placeholder")}
+              bind:value={confirmPassword}
+              required
+              class="bg-background/50 border-primary/20 focus:border-primary pr-10"
+            />
+            <button
+              type="button"
+              onclick={() => (showConfirmPassword = !showConfirmPassword)}
+              class="cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            >
+              {#if showConfirmPassword}
+                <span class="icon-[ri--eye-off-line] w-4 h-4"></span>
+              {:else}
+                <span class="icon-[ri--eye-line] w-4 h-4"></span>
+              {/if}
+            </button>
+          </div>
+        </div>
+
+        {#if isSecurityError}
+          <div class="grid w-full items-start gap-4">
+            <Alert.Root variant="destructive">
+              <Alert.Title class="items-center flex">
+                <span class="icon-[ri--alert-line] inline-block w-4 h-4 mr-1"></span>
+                {$_("me.settings.error")}
+              </Alert.Title>
+              <Alert.Description>{securityError}</Alert.Description>
+            </Alert.Root>
+          </div>
+        {/if}
+
+        <Button
+          type="submit"
+          class="cursor-pointer w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
+          disabled={isSecurityLoading}
+        >
+          {#if isSecurityLoading}
+            <div
+              class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"
+            ></div>
+            {$_("me.settings.updating_security")}
+          {:else}
+            {$_("me.settings.update_security")}
+          {/if}
+        </Button>
+      </form>
+    </CardContent>
+  </Card>
+</div>

packages/frontend/src/routes/models/+page.svelte

@@ -11,6 +11,7 @@
   import Meta from "$lib/components/meta/meta.svelte";
   import SexyBackground from "$lib/components/background/background.svelte";
   import PageHero from "$lib/components/page-hero/page-hero.svelte";
+  import Pagination from "$lib/components/pagination/pagination.svelte";
 
   const { data } = $props();
 
@@ -43,22 +44,6 @@
     goto(`?${params.toString()}`);
   }
 
-  const totalPages = $derived(Math.ceil(data.total / data.limit));
-
-  const pageNumbers = $derived(() => {
-    const pages: (number | -1)[] = [];
-    if (totalPages <= 7) {
-      for (let i = 1; i <= totalPages; i++) pages.push(i);
-    } else {
-      pages.push(1);
-      if (data.page > 3) pages.push(-1);
-      for (let i = Math.max(2, data.page - 1); i <= Math.min(totalPages - 1, data.page + 1); i++)
-        pages.push(i);
-      if (data.page < totalPages - 2) pages.push(-1);
-      pages.push(totalPages);
-    }
-    return pages;
-  });
 </script>
 
 <Meta title={$_("models.title")} description={$_("models.description")} />
@@ -196,38 +181,13 @@
     {/if}
 
     <!-- Pagination -->
-    {#if totalPages > 1}
+    {#if Math.ceil(data.total / data.limit) > 1}
       <div class="flex flex-col items-center gap-3 mt-10">
-        <div class="flex items-center gap-1">
+        <Pagination
-          <Button
+          currentPage={data.page}
-            variant="outline"
+          totalPages={Math.ceil(data.total / data.limit)}
-            size="sm"
+          onPageChange={goToPage}
-            disabled={data.page <= 1}
+        />
-            onclick={() => goToPage(data.page - 1)}
-            class="border-primary/20 hover:bg-primary/10">{$_("common.previous")}</Button
-          >
-          {#each pageNumbers() as p, i (i)}
-            {#if p === -1}
-              <span class="px-2 text-muted-foreground select-none">…</span>
-            {:else}
-              <Button
-                variant={p === data.page ? "default" : "outline"}
-                size="sm"
-                onclick={() => goToPage(p)}
-                class={p === data.page
-                  ? "bg-gradient-to-r from-primary to-accent min-w-9"
-                  : "border-primary/20 hover:bg-primary/10 min-w-9"}>{p}</Button
-              >
-            {/if}
-          {/each}
-          <Button
-            variant="outline"
-            size="sm"
-            disabled={data.page >= totalPages}
-            onclick={() => goToPage(data.page + 1)}
-            class="border-primary/20 hover:bg-primary/10">{$_("common.next")}</Button
-          >
-        </div>
         <p class="text-sm text-muted-foreground">
           {$_("common.total_results", { values: { total: data.total } })}
         </p>

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,123 @@
+<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/+page.svelte

@@ -1,615 +0,0 @@
-<script lang="ts">
-  import { _ } from "svelte-i18n";
-  import Meta from "$lib/components/meta/meta.svelte";
-  import {
-    ButtplugClient,
-    ButtplugWasmClientConnector,
-    type ButtplugClientDevice,
-    type OutputType,
-    InputType,
-    DeviceOutputValueConstructor,
-  } 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 type { BluetoothDevice, RecordedEvent, DeviceInfo } from "$lib/types";
-  import { toast } from "svelte-sonner";
-  import SexyBackground from "$lib/components/background/background.svelte";
-
-  const client = new ButtplugClient("Sexy.Art");
-  let connected = $state(client.connected);
-  let scanning = $state(false);
-  let devices = $state<BluetoothDevice[]>([]);
-
-  // Recording state
-  let isRecording = $state(false);
-  let recordingStartTime = $state<number | null>(null);
-  let recordedEvents = $state<RecordedEvent[]>([]);
-  let showSaveDialog = $state(false);
-  let recordingDuration = $state(0);
-
-  // Playback state
-  let isPlaying = $state(false);
-  let playbackProgress = $state(0);
-  let playbackStartTime = $state<number | null>(null);
-  let playbackTimeoutId = $state<number | null>(null);
-  let currentEventIndex = $state(0);
-  let showMappingDialog = $state(false);
-  let deviceMappings = $state<Map<string, BluetoothDevice>>(new Map());
-
-  async function init() {
-    const connector = new ButtplugWasmClientConnector();
-    // await ButtplugWasmClientConnector.activateLogging("info");
-    await client.connect(connector);
-    client.on("deviceadded", onDeviceAdded);
-    client.on("deviceremoved", (dev: ButtplugClientDevice) => {
-      const idx = devices.findIndex((d) => d.info.index === dev.index);
-      if (idx !== -1) devices.splice(idx, 1);
-    });
-    client.on("scanningfinished", () => (scanning = false));
-    client.on("inputreading", handleInputReading);
-    connected = client.connected;
-  }
-
-  async function startScanning() {
-    await client.startScanning();
-    scanning = true;
-  }
-
-  async function onDeviceAdded(dev: ButtplugClientDevice) {
-    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 {
-        devices[idx].batteryLevel = await dev.battery();
-      } catch (e) {
-        console.warn(`Failed to read battery for ${dev.name}:`, e);
-      }
-    }
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  function handleInputReading(msg: any) {
-    if (msg.InputReading === undefined) return;
-    const reading = msg.InputReading;
-    const device = devices.find((d) => d.info.index === reading.DeviceIndex);
-    if (!device) return;
-
-    if (reading.Reading[InputType.Battery] !== undefined) {
-      device.batteryLevel = reading.Reading[InputType.Battery].Value;
-    }
-    device.lastSeen = new Date();
-  }
-
-  async function handleChange(device: BluetoothDevice, actuatorIdx: number, value: number) {
-    const actuator = device.actuators[actuatorIdx];
-    const feature = device.info.features.get(actuator.featureIndex);
-    if (!feature) return;
-
-    actuator.value = value;
-    const outputType = actuator.outputType as typeof 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;
-    }
-    isRecording = true;
-    recordingStartTime = performance.now();
-    recordedEvents = [];
-    recordingDuration = 0;
-  }
-
-  function stopRecording() {
-    isRecording = false;
-    if (recordedEvents.length > 0) {
-      recordingDuration = recordedEvents[recordedEvents.length - 1].timestamp;
-      showSaveDialog = true;
-    }
-  }
-
-  function captureEvent(device: BluetoothDevice, actuatorIdx: number, value: number) {
-    if (!recordingStartTime) return;
-
-    const timestamp = performance.now() - recordingStartTime;
-    const actuator = device.actuators[actuatorIdx];
-
-    recordedEvents.push({
-      timestamp,
-      device_index: device.info.index,
-      device_name: device.name,
-      actuator_index: actuatorIdx,
-      actuator_type: actuator.outputType,
-      value: (value / actuator.maxSteps) * 100, // Normalize to 0-100
-    });
-  }
-
-  async function handleStop(device: BluetoothDevice) {
-    await device.info.stop();
-    device.actuators.forEach((a) => (a.value = 0));
-  }
-
-  function convertDevice(device: ButtplugClientDevice): BluetoothDevice {
-    const actuators: import("$lib/types").DeviceActuator[] = []; // eslint-disable-line @typescript-eslint/consistent-type-imports
-    for (const [, feature] of device.features) {
-      for (const outputType of feature.outputTypes) {
-        actuators.push({
-          featureIndex: feature.featureIndex,
-          outputType,
-          maxSteps: feature.outputMaxValue(outputType),
-          descriptor: feature.featureDescriptor,
-          value: 0,
-        });
-      }
-    }
-
-    return {
-      id: String(device.index),
-      name: device.name,
-      actuators,
-      batteryLevel: 0,
-      hasBattery: device.hasInput(InputType.Battery),
-      isConnected: true,
-      lastSeen: new Date(),
-      info: device,
-    };
-  }
-
-  async function handleSaveRecording(data: { title: string; description: string; tags: string[] }) {
-    const deviceInfo: DeviceInfo[] = devices.map((d) => ({
-      name: d.name,
-      index: d.info.index,
-      capabilities: d.actuators.map((a) => a.outputType),
-    }));
-
-    try {
-      const response = await fetch("/api/sexy/recordings", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          title: data.title,
-          description: data.description,
-          duration: recordingDuration,
-          events: recordedEvents,
-          device_info: deviceInfo,
-          tags: data.tags,
-          status: "draft",
-        }),
-      });
-
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
-
-      toast.success("Recording saved successfully!");
-      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.");
-    }
-  }
-
-  function handleCancelSave() {
-    showSaveDialog = false;
-    recordedEvents = [];
-    recordingDuration = 0;
-  }
-
-  // Playback functions
-  function startPlayback() {
-    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();
-  }
-
-  function beginPlayback() {
-    isPlaying = true;
-    playbackStartTime = performance.now();
-    playbackProgress = 0;
-    currentEventIndex = 0;
-    scheduleNextEvent();
-  }
-
-  function handleMappingConfirm(mappings: Map<string, BluetoothDevice>) {
-    deviceMappings = mappings;
-    showMappingDialog = false;
-    beginPlayback();
-  }
-
-  function handleMappingCancel() {
-    showMappingDialog = false;
-  }
-
-  function stopPlayback() {
-    isPlaying = false;
-    if (playbackTimeoutId !== null) {
-      clearTimeout(playbackTimeoutId);
-      playbackTimeoutId = null;
-    }
-    playbackProgress = 0;
-    currentEventIndex = 0;
-
-    // Stop all devices
-    devices.forEach((device) => handleStop(device));
-  }
-
-  function pausePlayback() {
-    isPlaying = false;
-    if (playbackTimeoutId !== null) {
-      clearTimeout(playbackTimeoutId);
-      playbackTimeoutId = null;
-    }
-  }
-
-  function resumePlayback() {
-    if (!data.recording) return;
-
-    isPlaying = true;
-    playbackStartTime = performance.now() - playbackProgress;
-    scheduleNextEvent();
-  }
-
-  function scheduleNextEvent() {
-    if (!data.recording || !isPlaying || !playbackStartTime) return;
-
-    const events = (data.recording.events ?? []) as RecordedEvent[];
-    if (currentEventIndex >= events.length) {
-      stopPlayback();
-      toast.success("Playback finished");
-      return;
-    }
-
-    const event = events[currentEventIndex];
-    const currentTime = performance.now() - playbackStartTime;
-    const delay = event.timestamp - currentTime;
-
-    if (delay <= 0) {
-      // Execute event immediately
-      executeEvent(event);
-      currentEventIndex++;
-      scheduleNextEvent();
-    } else {
-      // Schedule event
-      playbackTimeoutId = setTimeout(() => {
-        executeEvent(event);
-        currentEventIndex++;
-        playbackProgress = event.timestamp;
-        scheduleNextEvent();
-      }, delay) as unknown as number;
-    }
-  }
-
-  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 OutputType;
-      feature.runOutput(new DeviceOutputValueConstructor(outputType).steps(deviceValue));
-    }
-
-    // Update UI
-    actuator.value = deviceValue;
-  }
-
-  function seek(percentage: number) {
-    if (!data.recording) return;
-
-    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) {
-      currentEventIndex = seekEvents.length;
-    }
-
-    if (isPlaying) {
-      if (playbackTimeoutId !== null) {
-        clearTimeout(playbackTimeoutId);
-      }
-      playbackStartTime = performance.now() - targetTime;
-      scheduleNextEvent();
-    }
-  }
-
-  const { data } = $props();
-
-  onMount(() => {
-    if (data.authStatus.authenticated) {
-      init();
-      return;
-    }
-    goto("/login");
-  });
-</script>
-
-<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="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"
-        >
-          {$_("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}
-      {/if}
-    </div>
-
-    {#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 -->
-  {#if data.recording}
-    <DeviceMappingDialog
-      open={showMappingDialog}
-      recordedDevices={(data.recording.device_info ?? []) as DeviceInfo[]}
-      connectedDevices={devices}
-      onConfirm={handleMappingConfirm}
-      onCancel={handleMappingCancel}
-    />
-  {/if}
-</div>

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

@@ -0,0 +1,550 @@
+<script lang="ts">
+  import { _ } from "svelte-i18n";
+  import Meta from "$lib/components/meta/meta.svelte";
+  import type * as ButtplugTypes from "@sexy.pivoine.art/buttplug";
+  import Button from "$lib/components/ui/button/button.svelte";
+  import { onMount } from "svelte";
+  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 type { BluetoothDevice, RecordedEvent, DeviceInfo } from "$lib/types";
+  import { toast } from "svelte-sonner";
+  import { createRecording } from "$lib/services";
+  import * as Empty from "$lib/components/ui/empty";
+
+  // Runtime buttplug values — loaded dynamically from the buttplug nginx container
+  let client: ButtplugTypes.ButtplugClient;
+  let InputType: typeof ButtplugTypes.InputType;
+  let DeviceOutputValueConstructor: typeof ButtplugTypes.DeviceOutputValueConstructor;
+  let ButtplugWasmClientConnector: typeof ButtplugTypes.ButtplugWasmClientConnector;
+
+  let connected = $state(false);
+  let scanning = $state(false);
+  let devices = $state<BluetoothDevice[]>([]);
+
+  // Recording state
+  let isRecording = $state(false);
+  let recordingStartTime = $state<number | null>(null);
+  let recordedEvents = $state<RecordedEvent[]>([]);
+  let showSaveDialog = $state(false);
+  let recordingDuration = $state(0);
+
+  // Playback state
+  let isPlaying = $state(false);
+  let playbackProgress = $state(0);
+  let playbackStartTime = $state<number | null>(null);
+  let playbackTimeoutId = $state<number | null>(null);
+  let currentEventIndex = $state(0);
+  let showMappingDialog = $state(false);
+  let deviceMappings = $state<Map<string, BluetoothDevice>>(new Map());
+
+  async function init() {
+    const connector = new ButtplugWasmClientConnector();
+    await client.connect(connector);
+    client.on("deviceadded", onDeviceAdded);
+    client.on("deviceremoved", (dev: ButtplugTypes.ButtplugClientDevice) => {
+      const idx = devices.findIndex((d) => d.info.index === dev.index);
+      if (idx !== -1) devices.splice(idx, 1);
+    });
+    client.on("scanningfinished", () => (scanning = false));
+    client.on("inputreading", handleInputReading);
+    connected = client.connected;
+  }
+
+  async function startScanning() {
+    await client.startScanning();
+    scanning = true;
+  }
+
+  async function onDeviceAdded(dev: ButtplugTypes.ButtplugClientDevice) {
+    const device = convertDevice(dev);
+    devices.push(device);
+
+    const idx = devices.length - 1;
+    if (device.hasBattery) {
+      try {
+        devices[idx].batteryLevel = await dev.battery();
+      } catch (e) {
+        console.warn(`Failed to read battery for ${dev.name}:`, e);
+      }
+    }
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  function handleInputReading(msg: any) {
+    if (msg.InputReading === undefined) return;
+    const reading = msg.InputReading;
+    const device = devices.find((d) => d.info.index === reading.DeviceIndex);
+    if (!device) return;
+
+    if (reading.Reading[InputType.Battery] !== undefined) {
+      device.batteryLevel = reading.Reading[InputType.Battery].Value;
+    }
+    device.lastSeen = new Date();
+  }
+
+  async function handleChange(device: BluetoothDevice, actuatorIdx: number, value: number) {
+    const actuator = device.actuators[actuatorIdx];
+    const feature = device.info.features.get(actuator.featureIndex);
+    if (!feature) return;
+
+    actuator.value = value;
+    const outputType = actuator.outputType as typeof ButtplugTypes.OutputType;
+    await feature.runOutput(new DeviceOutputValueConstructor(outputType).steps(value));
+
+    if (isRecording && recordingStartTime) {
+      captureEvent(device, actuatorIdx, value);
+    }
+  }
+
+  function startRecording() {
+    if (devices.length === 0) return;
+    isRecording = true;
+    recordingStartTime = performance.now();
+    recordedEvents = [];
+    recordingDuration = 0;
+  }
+
+  function stopRecording() {
+    isRecording = false;
+    if (recordedEvents.length > 0) {
+      recordingDuration = recordedEvents[recordedEvents.length - 1].timestamp;
+      showSaveDialog = true;
+    }
+  }
+
+  function captureEvent(device: BluetoothDevice, actuatorIdx: number, value: number) {
+    if (!recordingStartTime) return;
+
+    const timestamp = performance.now() - recordingStartTime;
+    const actuator = device.actuators[actuatorIdx];
+
+    recordedEvents.push({
+      timestamp,
+      device_index: device.info.index,
+      device_name: device.name,
+      actuator_index: actuatorIdx,
+      actuator_type: actuator.outputType,
+      value: (value / actuator.maxSteps) * 100,
+    });
+  }
+
+  async function handleStop(device: BluetoothDevice) {
+    await device.info.stop();
+    device.actuators.forEach((a) => (a.value = 0));
+  }
+
+  function convertDevice(device: ButtplugTypes.ButtplugClientDevice): BluetoothDevice {
+    const actuators: import("$lib/types").DeviceActuator[] = []; // eslint-disable-line @typescript-eslint/consistent-type-imports
+    for (const [, feature] of device.features) {
+      for (const outputType of feature.outputTypes) {
+        actuators.push({
+          featureIndex: feature.featureIndex,
+          outputType,
+          maxSteps: feature.outputMaxValue(outputType),
+          descriptor: feature.featureDescriptor,
+          value: 0,
+        });
+      }
+    }
+
+    return {
+      id: String(device.index),
+      name: device.name,
+      actuators,
+      batteryLevel: 0,
+      hasBattery: device.hasInput(InputType.Battery),
+      isConnected: true,
+      lastSeen: new Date(),
+      info: device,
+    };
+  }
+
+  async function handleSaveRecording(saveData: {
+    title: string;
+    description: string;
+    tags: string[];
+  }) {
+    const deviceInfo: DeviceInfo[] = devices.map((d) => ({
+      name: d.name,
+      index: d.info.index,
+      capabilities: d.actuators.map((a) => a.outputType),
+    }));
+
+    try {
+      await createRecording({
+        title: saveData.title,
+        description: saveData.description,
+        duration: Math.round(recordingDuration),
+        events: recordedEvents,
+        device_info: deviceInfo,
+        tags: saveData.tags,
+        status: "draft",
+      });
+
+      toast.success("Recording saved successfully!");
+      showSaveDialog = false;
+      recordedEvents = [];
+      recordingDuration = 0;
+    } catch (error) {
+      console.error("Failed to save recording:", error);
+      toast.error("Failed to save recording. Please try again.");
+    }
+  }
+
+  function handleCancelSave() {
+    showSaveDialog = false;
+    recordedEvents = [];
+    recordingDuration = 0;
+  }
+
+  function startPlayback() {
+    if (!data.recording) return;
+
+    if (devices.length === 0) {
+      toast.error("Please connect devices before playing recording");
+      return;
+    }
+
+    if (deviceMappings.size === 0 && (data.recording.device_info?.length ?? 0) > 0) {
+      showMappingDialog = true;
+      return;
+    }
+
+    beginPlayback();
+  }
+
+  function beginPlayback() {
+    isPlaying = true;
+    playbackStartTime = performance.now();
+    playbackProgress = 0;
+    currentEventIndex = 0;
+    scheduleNextEvent();
+  }
+
+  function handleMappingConfirm(mappings: Map<string, BluetoothDevice>) {
+    deviceMappings = mappings;
+    showMappingDialog = false;
+    beginPlayback();
+  }
+
+  function handleMappingCancel() {
+    showMappingDialog = false;
+  }
+
+  function stopPlayback() {
+    isPlaying = false;
+    if (playbackTimeoutId !== null) {
+      clearTimeout(playbackTimeoutId);
+      playbackTimeoutId = null;
+    }
+    playbackProgress = 0;
+    currentEventIndex = 0;
+    devices.forEach((device) => handleStop(device));
+  }
+
+  function pausePlayback() {
+    isPlaying = false;
+    if (playbackTimeoutId !== null) {
+      clearTimeout(playbackTimeoutId);
+      playbackTimeoutId = null;
+    }
+  }
+
+  function resumePlayback() {
+    if (!data.recording) return;
+    isPlaying = true;
+    playbackStartTime = performance.now() - playbackProgress;
+    scheduleNextEvent();
+  }
+
+  function scheduleNextEvent() {
+    if (!data.recording || !isPlaying || !playbackStartTime) return;
+
+    const events = (data.recording.events ?? []) as RecordedEvent[];
+    if (currentEventIndex >= events.length) {
+      stopPlayback();
+      toast.success("Playback finished");
+      return;
+    }
+
+    const event = events[currentEventIndex];
+    const currentTime = performance.now() - playbackStartTime;
+    const delay = event.timestamp - currentTime;
+
+    if (delay <= 0) {
+      executeEvent(event);
+      currentEventIndex++;
+      scheduleNextEvent();
+    } else {
+      playbackTimeoutId = setTimeout(() => {
+        executeEvent(event);
+        currentEventIndex++;
+        playbackProgress = event.timestamp;
+        scheduleNextEvent();
+      }, delay) as unknown as number;
+    }
+  }
+
+  function executeEvent(event: RecordedEvent) {
+    const device = deviceMappings.get(event.device_name);
+    if (!device) {
+      console.warn(`No device mapping for: ${event.device_name}`);
+      return;
+    }
+
+    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;
+    }
+
+    const deviceValue = Math.round((event.value / 100) * actuator.maxSteps);
+    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));
+    }
+
+    actuator.value = deviceValue;
+  }
+
+  function seek(percentage: number) {
+    if (!data.recording) return;
+
+    const targetTime = (percentage / 100) * data.recording.duration;
+    playbackProgress = targetTime;
+
+    const seekEvents = (data.recording.events ?? []) as RecordedEvent[];
+    currentEventIndex = seekEvents.findIndex((e) => e.timestamp >= targetTime);
+    if (currentEventIndex === -1) {
+      currentEventIndex = seekEvents.length;
+    }
+
+    if (isPlaying) {
+      if (playbackTimeoutId !== null) {
+        clearTimeout(playbackTimeoutId);
+      }
+      playbackStartTime = performance.now() - targetTime;
+      scheduleNextEvent();
+    }
+  }
+
+  const { data } = $props();
+
+  onMount(async () => {
+    // Concatenation prevents Rollup from statically resolving this URL at build time
+    const buttplugUrl = "/buttplug/" + "dist/index.js";
+    const bp = await import(/* @vite-ignore */ buttplugUrl);
+    InputType = bp.InputType;
+    DeviceOutputValueConstructor = bp.DeviceOutputValueConstructor;
+    ButtplugWasmClientConnector = bp.ButtplugWasmClientConnector;
+    client = new bp.ButtplugClient("Sexy.Art");
+    connected = client.connected;
+    await init();
+  });
+</script>
+
+<Meta title={$_("play.title")} description={$_("play.description")} />
+
+<div class="py-3 sm:py-6 lg:pl-6">
+  <!-- Header -->
+  <div class="mb-6">
+    <h1 class="text-2xl font-bold">{$_("play.title")}</h1>
+    <p class="text-sm text-muted-foreground mt-1">{$_("play.description")}</p>
+  </div>
+
+  <!-- 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"
+        >
+          <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}
+
+  <!-- Playback Controls (only shown when recording is loaded) -->
+  {#if data.recording}
+    <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}

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,123 @@
+<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>
+    <p class="text-sm text-muted-foreground mt-1">{$_("me.recordings.description")}</p>
+  </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/sitemap.xml/+server.ts

@@ -1,19 +0,0 @@
-import * as sitemap from "super-sitemap";
-import { getArticles, getModels, getVideos } from "$lib/services";
-
-export const GET = async () => {
-  return await sitemap.response({
-    origin: "https://sexy.pivoine.art",
-    excludeRoutePatterns: ["^/signup/verify", "^/password/reset", "^/me", "^/play", "^/tags/.+"],
-    paramValues: {
-      "/magazine/[slug]": (await getArticles(fetch)).map((a) => a.slug),
-      "/models/[slug]": (await getModels(fetch))
-        .map((a) => a.slug)
-        .filter((s): s is string => s !== null),
-      "/videos/[slug]": (await getVideos(fetch)).map((a) => a.slug),
-    },
-    defaultChangefreq: "always",
-    defaultPriority: 0.7,
-    sort: "alpha", // default is false; 'alpha' sorts all paths alphabetically.
-  });
-};

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>

packages/frontend/src/routes/videos/+page.svelte

@@ -11,6 +11,7 @@
   import Meta from "$lib/components/meta/meta.svelte";
   import SexyBackground from "$lib/components/background/background.svelte";
   import PageHero from "$lib/components/page-hero/page-hero.svelte";
+  import Pagination from "$lib/components/pagination/pagination.svelte";
   import TimeAgo from "javascript-time-ago";
   import { formatVideoDuration } from "$lib/utils";
 
@@ -46,22 +47,6 @@
     goto(`?${params.toString()}`);
   }
 
-  const totalPages = $derived(Math.ceil(data.total / data.limit));
-
-  const pageNumbers = $derived(() => {
-    const pages: (number | -1)[] = [];
-    if (totalPages <= 7) {
-      for (let i = 1; i <= totalPages; i++) pages.push(i);
-    } else {
-      pages.push(1);
-      if (data.page > 3) pages.push(-1);
-      for (let i = Math.max(2, data.page - 1); i <= Math.min(totalPages - 1, data.page + 1); i++)
-        pages.push(i);
-      if (data.page < totalPages - 2) pages.push(-1);
-      pages.push(totalPages);
-    }
-    return pages;
-  });
 </script>
 
 <Meta title={$_("videos.title")} description={$_("videos.description")} />
@@ -256,38 +241,13 @@
     {/if}
 
     <!-- Pagination -->
-    {#if totalPages > 1}
+    {#if Math.ceil(data.total / data.limit) > 1}
       <div class="flex flex-col items-center gap-3 mt-10">
-        <div class="flex items-center gap-1">
+        <Pagination
-          <Button
+          currentPage={data.page}
-            variant="outline"
+          totalPages={Math.ceil(data.total / data.limit)}
-            size="sm"
+          onPageChange={goToPage}
-            disabled={data.page <= 1}
+        />
-            onclick={() => goToPage(data.page - 1)}
-            class="border-primary/20 hover:bg-primary/10">{$_("common.previous")}</Button
-          >
-          {#each pageNumbers() as p, i (i)}
-            {#if p === -1}
-              <span class="px-2 text-muted-foreground select-none">…</span>
-            {:else}
-              <Button
-                variant={p === data.page ? "default" : "outline"}
-                size="sm"
-                onclick={() => goToPage(p)}
-                class={p === data.page
-                  ? "bg-gradient-to-r from-primary to-accent min-w-9"
-                  : "border-primary/20 hover:bg-primary/10 min-w-9"}>{p}</Button
-              >
-            {/if}
-          {/each}
-          <Button
-            variant="outline"
-            size="sm"
-            disabled={data.page >= totalPages}
-            onclick={() => goToPage(data.page + 1)}
-            class="border-primary/20 hover:bg-primary/10">{$_("common.next")}</Button
-          >
-        </div>
         <p class="text-sm text-muted-foreground">
           {$_("common.total_results", { values: { total: data.total } })}
         </p>

packages/frontend/static/robots.txt

@@ -1,4 +1,2 @@
 User-agent: *
 Allow: /
-
-Sitemap: https://sexy.pivoine.art/sitemap.xml