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 \
@@ -55,7 +55,7 @@ COPY --from=builder --chown=node:node /app/package.json ./package.json
 COPY --from=builder --chown=node:node /app/packages/backend/dist ./packages/backend/dist
 COPY --from=builder --chown=node:node /app/packages/backend/node_modules ./packages/backend/node_modules
 COPY --from=builder --chown=node:node /app/packages/backend/package.json ./packages/backend/package.json
-COPY --from=builder --chown=node:node /app/packages/backend/src/migrations ./packages/backend/migrations
+COPY --from=builder --chown=node:node /app/packages/backend/src/migrations ./packages/backend/dist/migrations
 
 RUN mkdir -p /data/uploads && chown node:node /data/uploads
 

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

@@ -33,8 +33,6 @@ export default ts.config(
         "error",
         { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
       ],
-      // Allow explicit any sparingly — we're adults here
-      "@typescript-eslint/no-explicit-any": "warn",
       // Enforce consistent type imports
       "@typescript-eslint/consistent-type-imports": [
         "error",
@@ -53,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/db/schema/recordings.ts

@@ -12,7 +12,7 @@ import {
 import { users } from "./users";
 import { videos } from "./videos";
 
-export const recordingStatusEnum = pgEnum("recording_status", ["draft", "published", "archived"]);
+export const recordingStatusEnum = pgEnum("recording_status", ["draft", "published"]);
 
 export const recordings = pgTable(
   "recordings",

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

@@ -29,6 +29,7 @@ export const users = pgTable(
     role: roleEnum("role").notNull().default("viewer"),
     avatar: text("avatar").references(() => files.id, { onDelete: "set null" }),
     banner: text("banner").references(() => files.id, { onDelete: "set null" }),
+    photo: text("photo").references(() => files.id, { onDelete: "set null" }),
     is_admin: boolean("is_admin").notNull().default(false),
     email_verified: boolean("email_verified").notNull().default(false),
     email_verify_token: text("email_verify_token"),

packages/backend/src/graphql/context.ts

@@ -1,9 +1,11 @@
 import type { YogaInitialContext } from "graphql-yoga";
 import type { FastifyRequest, FastifyReply } from "fastify";
 import type { Context } from "./builder";
-import { getSession } from "../lib/auth";
+import { getSession, setSession } from "../lib/auth";
 import { db } from "../db/connection";
 import { redis } from "../lib/auth";
+import { users } from "../db/schema/index";
+import { eq } from "drizzle-orm";
 
 type ServerContext = {
   req: FastifyRequest;
@@ -25,7 +27,34 @@ export async function buildContext(ctx: YogaInitialContext & ServerContext): Pro
   );
 
   const token = cookies["session_token"];
-  const currentUser = token ? await getSession(token) : null;
+  let currentUser = null;
+
+  if (token) {
+    const session = await getSession(token); // also slides TTL
+    if (session) {
+      const dbInstance = ctx.db || db;
+      const [dbUser] = await dbInstance
+        .select()
+        .from(users)
+        .where(eq(users.id, session.id))
+        .limit(1);
+      if (dbUser) {
+        currentUser = {
+          id: dbUser.id,
+          email: dbUser.email,
+          role: (dbUser.role === "admin" ? "viewer" : dbUser.role) as "model" | "viewer",
+          is_admin: dbUser.is_admin,
+          first_name: dbUser.first_name,
+          last_name: dbUser.last_name,
+          artist_name: dbUser.artist_name,
+          slug: dbUser.slug,
+          avatar: dbUser.avatar,
+        };
+        // Refresh cached session with up-to-date data
+        await setSession(token, currentUser);
+      }
+    }
+  }
 
   return {
     db: ctx.db || db,

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/articles.ts

@@ -1,10 +1,11 @@
 import { builder } from "../builder";
-import { ArticleType } from "../types/index";
+import { ArticleType, ArticleListType, AdminArticleListType } from "../types/index";
 import { articles, users } from "../../db/schema/index";
-import { eq, and, lte, desc } from "drizzle-orm";
+import { eq, and, lte, desc, asc, ilike, or, count, arrayContains, type SQL } from "drizzle-orm";
 import { requireAdmin } from "../../lib/acl";
+import type { DB } from "../../db/connection";
 
-async function enrichArticle(db: any, article: any) {
+async function enrichArticle(db: DB, article: typeof articles.$inferSelect) {
   let author = null;
   if (article.author) {
     const authorUser = await db
@@ -13,6 +14,7 @@ async function enrichArticle(db: any, article: any) {
         artist_name: users.artist_name,
         slug: users.slug,
         avatar: users.avatar,
+        description: users.description,
       })
       .from(users)
       .where(eq(users.id, article.author))
@@ -24,30 +26,50 @@ async function enrichArticle(db: any, article: any) {
 
 builder.queryField("articles", (t) =>
   t.field({
-    type: [ArticleType],
+    type: ArticleListType,
     args: {
       featured: t.arg.boolean(),
       limit: t.arg.int(),
+      search: t.arg.string(),
+      category: t.arg.string(),
+      offset: t.arg.int(),
+      sortBy: t.arg.string(),
+      tag: t.arg.string(),
     },
     resolve: async (_root, args, ctx) => {
-      const dateFilter = lte(articles.publish_date, new Date());
+      const pageSize = args.limit ?? 24;
-      const whereCondition =
+      const offset = args.offset ?? 0;
-        args.featured !== null && args.featured !== undefined
-          ? and(dateFilter, eq(articles.featured, args.featured))
-          : dateFilter;
 
-      let query = ctx.db
+      const conditions: SQL<unknown>[] = [lte(articles.publish_date, new Date())];
-        .select()
+      if (args.featured !== null && args.featured !== undefined) {
-        .from(articles)
+        conditions.push(eq(articles.featured, args.featured));
-        .where(whereCondition)
+      }
-        .orderBy(desc(articles.publish_date));
+      if (args.category) conditions.push(eq(articles.category, args.category));
-
+      if (args.tag) conditions.push(arrayContains(articles.tags, [args.tag]));
-      if (args.limit) {
+      if (args.search) {
-        query = (query as any).limit(args.limit);
+        conditions.push(
+          or(
+            ilike(articles.title, `%${args.search}%`),
+            ilike(articles.excerpt, `%${args.search}%`),
+          ) as SQL<unknown>,
+        );
       }
 
-      const articleList = await query;
+      const where = and(...conditions);
-      return Promise.all(articleList.map((article: any) => enrichArticle(ctx.db, article)));
+      const baseQuery = ctx.db.select().from(articles).where(where);
+      const ordered =
+        args.sortBy === "name"
+          ? baseQuery.orderBy(asc(articles.title))
+          : args.sortBy === "featured"
+            ? baseQuery.orderBy(desc(articles.featured), desc(articles.publish_date))
+            : baseQuery.orderBy(desc(articles.publish_date));
+
+      const [articleList, totalRows] = await Promise.all([
+        ordered.limit(pageSize).offset(offset),
+        ctx.db.select({ total: count() }).from(articles).where(where),
+      ]);
+      const items = await Promise.all(articleList.map((article) => enrichArticle(ctx.db, article)));
+      return { items, total: totalRows[0]?.total ?? 0 };
     },
   }),
 );
@@ -72,15 +94,65 @@ builder.queryField("article", (t) =>
   }),
 );
 
+builder.queryField("adminGetArticle", (t) =>
+  t.field({
+    type: ArticleType,
+    nullable: true,
+    args: {
+      id: t.arg.string({ required: true }),
+    },
+    resolve: async (_root, args, ctx) => {
+      requireAdmin(ctx);
+      const article = await ctx.db.select().from(articles).where(eq(articles.id, args.id)).limit(1);
+      if (!article[0]) return null;
+      return enrichArticle(ctx.db, article[0]);
+    },
+  }),
+);
+
 // ─── Admin queries & mutations ────────────────────────────────────────────────
 
 builder.queryField("adminListArticles", (t) =>
   t.field({
-    type: [ArticleType],
+    type: AdminArticleListType,
-    resolve: async (_root, _args, ctx) => {
+    args: {
+      search: t.arg.string(),
+      category: t.arg.string(),
+      featured: t.arg.boolean(),
+      limit: t.arg.int(),
+      offset: t.arg.int(),
+    },
+    resolve: async (_root, args, ctx) => {
       requireAdmin(ctx);
-      const articleList = await ctx.db.select().from(articles).orderBy(desc(articles.publish_date));
+      const limit = args.limit ?? 50;
-      return Promise.all(articleList.map((article: any) => enrichArticle(ctx.db, article)));
+      const offset = args.offset ?? 0;
+
+      const conditions: SQL<unknown>[] = [];
+      if (args.search) {
+        conditions.push(
+          or(
+            ilike(articles.title, `%${args.search}%`),
+            ilike(articles.excerpt, `%${args.search}%`),
+          ) as SQL<unknown>,
+        );
+      }
+      if (args.category) conditions.push(eq(articles.category, args.category));
+      if (args.featured !== null && args.featured !== undefined)
+        conditions.push(eq(articles.featured, args.featured));
+
+      const where = conditions.length > 0 ? and(...conditions) : undefined;
+      const [articleList, totalRows] = await Promise.all([
+        ctx.db
+          .select()
+          .from(articles)
+          .where(where)
+          .orderBy(desc(articles.publish_date))
+          .limit(limit)
+          .offset(offset),
+        ctx.db.select({ total: count() }).from(articles).where(where),
+      ]);
+      const items = await Promise.all(articleList.map((article) => enrichArticle(ctx.db, article)));
+      return { items, total: totalRows[0]?.total ?? 0 };
     },
   }),
 );
@@ -155,7 +227,7 @@ builder.mutationField("updateArticle", (t) =>
 
       const updated = await ctx.db
         .update(articles)
-        .set(updates as any)
+        .set(updates as Partial<typeof articles.$inferInsert>)
         .where(eq(articles.id, args.id))
         .returning();
       if (!updated[0]) return null;

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

@@ -3,9 +3,13 @@ import { builder } from "../builder";
 import { CurrentUserType } from "../types/index";
 import { users } from "../../db/schema/index";
 import { eq } from "drizzle-orm";
+
+interface ReplyLike {
+  header?: (name: string, value: string) => void;
+}
 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";
 
@@ -45,13 +49,8 @@ builder.mutationField("login", (t) =>
 
       // Set session cookie
       const isProduction = process.env.NODE_ENV === "production";
-      const cookieValue = `session_token=${token}; HttpOnly; Path=/; SameSite=Lax; Max-Age=86400${isProduction ? "; Secure" : ""}`;
+      const cookieValue = `session_token=${token}; HttpOnly; Path=/; SameSite=Strict; Max-Age=86400${isProduction ? "; Secure" : ""}`;
-      (ctx.reply as any).header?.("Set-Cookie", cookieValue);
+      (ctx.reply as ReplyLike).header?.("Set-Cookie", cookieValue);
-
-      // For graphql-yoga response
-      if ((ctx as any).serverResponse) {
-        (ctx as any).serverResponse.setHeader("Set-Cookie", cookieValue);
-      }
 
       return user[0];
     },
@@ -74,8 +73,9 @@ builder.mutationField("logout", (t) =>
         await deleteSession(token);
       }
       // Clear cookie
-      const cookieValue = "session_token=; HttpOnly; Path=/; Max-Age=0";
+      const isProduction = process.env.NODE_ENV === "production";
-      (ctx.reply as any).header?.("Set-Cookie", cookieValue);
+      const cookieValue = `session_token=; HttpOnly; Path=/; SameSite=Strict; Max-Age=0${isProduction ? "; Secure" : ""}`;
+      (ctx.reply as ReplyLike).header?.("Set-Cookie", cookieValue);
       return true;
     },
   }),
@@ -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

@@ -1,10 +1,10 @@
 import { GraphQLError } from "graphql";
 import { builder } from "../builder";
-import { CommentType } from "../types/index";
+import { CommentType, AdminCommentListType } from "../types/index";
 import { comments, users } from "../../db/schema/index";
-import { eq, and, desc } from "drizzle-orm";
+import { eq, and, desc, ilike, count } from "drizzle-orm";
-import { awardPoints, checkAchievements } from "../../lib/gamification";
+import { requireOwnerOrAdmin, requireAdmin } from "../../lib/acl";
-import { requireOwnerOrAdmin } from "../../lib/acl";
+import { gamificationQueue } from "../../queues/index";
 
 builder.queryField("commentsForVideo", (t) =>
   t.field({
@@ -20,7 +20,7 @@ builder.queryField("commentsForVideo", (t) =>
         .orderBy(desc(comments.date_created));
 
       return Promise.all(
-        commentList.map(async (c: any) => {
+        commentList.map(async (c) => {
           const user = await ctx.db
             .select({
               id: users.id,
@@ -59,9 +59,16 @@ builder.mutationField("createCommentForVideo", (t) =>
         })
         .returning();
 
-      // Gamification
+      await gamificationQueue.add("awardPoints", {
-      await awardPoints(ctx.db, ctx.currentUser.id, "COMMENT_CREATE");
+        job: "awardPoints",
-      await checkAchievements(ctx.db, ctx.currentUser.id, "social");
+        userId: ctx.currentUser.id,
+        action: "COMMENT_CREATE",
+      });
+      await gamificationQueue.add("checkAchievements", {
+        job: "checkAchievements",
+        userId: ctx.currentUser.id,
+        category: "social",
+      });
 
       const user = await ctx.db
         .select({
@@ -91,7 +98,68 @@ 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;
     },
   }),
 );
+
+builder.queryField("adminListComments", (t) =>
+  t.field({
+    type: AdminCommentListType,
+    args: {
+      search: t.arg.string(),
+      limit: t.arg.int(),
+      offset: t.arg.int(),
+    },
+    resolve: async (_root, args, ctx) => {
+      requireAdmin(ctx);
+      const limit = args.limit ?? 50;
+      const offset = args.offset ?? 0;
+
+      const conditions = args.search ? [ilike(comments.comment, `%${args.search}%`)] : [];
+      const where = conditions.length > 0 ? and(...conditions) : undefined;
+
+      const [commentList, totalRows] = await Promise.all([
+        ctx.db
+          .select()
+          .from(comments)
+          .where(where)
+          .orderBy(desc(comments.date_created))
+          .limit(limit)
+          .offset(offset),
+        ctx.db.select({ total: count() }).from(comments).where(where),
+      ]);
+
+      const items = await Promise.all(
+        commentList.map(async (c) => {
+          const user = await ctx.db
+            .select({
+              id: users.id,
+              first_name: users.first_name,
+              last_name: users.last_name,
+              artist_name: users.artist_name,
+              avatar: users.avatar,
+            })
+            .from(users)
+            .where(eq(users.id, c.user_id))
+            .limit(1);
+          return { ...c, user: user[0] || null };
+        }),
+      );
+
+      return { items, total: totalRows[0]?.total ?? 0 };
+    },
+  }),
+);

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

@@ -37,7 +37,7 @@ builder.queryField("leaderboard", (t) =>
         .limit(limit)
         .offset(offset);
 
-      return entries.map((e: any, i: number) => ({ ...e, rank: offset + i + 1 }));
+      return entries.map((e, i) => ({ ...e, rank: offset + i + 1 }));
     },
   }),
 );
@@ -101,8 +101,15 @@ builder.queryField("userGamification", (t) =>
 
       return {
         stats: stats[0] ? { ...stats[0], rank } : null,
-        achievements: userAchievements.map((a: any) => ({
+        achievements: userAchievements.map((a) => ({
-          ...a,
+          id: a.id!,
+          code: a.code!,
+          name: a.name!,
+          description: a.description!,
+          icon: a.icon!,
+          category: a.category!,
+          required_count: a.required_count!,
+          progress: a.progress!,
           date_unlocked: a.date_unlocked!,
         })),
         recent_points: recentPoints,

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

@@ -1,9 +1,10 @@
 import { builder } from "../builder";
-import { ModelType } from "../types/index";
+import { ModelType, ModelListType } from "../types/index";
 import { users, user_photos, files } from "../../db/schema/index";
-import { eq, and, desc } from "drizzle-orm";
+import { eq, and, desc, asc, ilike, count, arrayContains, type SQL } from "drizzle-orm";
+import type { DB } from "../../db/connection";
 
-async function enrichModel(db: any, user: any) {
+async function enrichModel(db: DB, user: typeof users.$inferSelect) {
   // Fetch photos
   const photoRows = await db
     .select({ id: files.id, filename: files.filename })
@@ -12,32 +13,42 @@ async function enrichModel(db: any, user: any) {
     .where(eq(user_photos.user_id, user.id))
     .orderBy(user_photos.sort);
 
-  return {
+  const seen = new Set<string>();
-    ...user,
+  const photos = photoRows
-    photos: photoRows.map((p: any) => ({ id: p.id, filename: p.filename })),
+    .filter((p) => p.id !== null && !seen.has(p.id!) && seen.add(p.id!))
-  };
+    .map((p) => ({ id: p.id!, filename: p.filename! }));
+
+  return { ...user, photos };
 }
 
 builder.queryField("models", (t) =>
   t.field({
-    type: [ModelType],
+    type: ModelListType,
     args: {
       featured: t.arg.boolean(),
       limit: t.arg.int(),
+      search: t.arg.string(),
+      offset: t.arg.int(),
+      sortBy: t.arg.string(),
+      tag: t.arg.string(),
     },
     resolve: async (_root, args, ctx) => {
-      let query = ctx.db
+      const pageSize = args.limit ?? 24;
-        .select()
+      const offset = args.offset ?? 0;
-        .from(users)
-        .where(eq(users.role, "model"))
-        .orderBy(desc(users.date_created));
 
-      if (args.limit) {
+      const conditions: SQL<unknown>[] = [eq(users.role, "model")];
-        query = (query as any).limit(args.limit);
+      if (args.search) conditions.push(ilike(users.artist_name, `%${args.search}%`));
-      }
+      if (args.tag) conditions.push(arrayContains(users.tags, [args.tag]));
 
-      const modelList = await query;
+      const order = args.sortBy === "recent" ? desc(users.date_created) : asc(users.artist_name);
-      return Promise.all(modelList.map((m: any) => enrichModel(ctx.db, m)));
+
+      const where = and(...conditions);
+      const [modelList, totalRows] = await Promise.all([
+        ctx.db.select().from(users).where(where).orderBy(order).limit(pageSize).offset(offset),
+        ctx.db.select({ total: count() }).from(users).where(where),
+      ]);
+      const items = await Promise.all(modelList.map((m) => enrichModel(ctx.db, m)));
+      return { items, total: totalRows[0]?.total ?? 0 };
     },
   }),
 );

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

@@ -1,10 +1,11 @@
 import { GraphQLError } from "graphql";
 import { builder } from "../builder";
-import { RecordingType } from "../types/index";
+import { RecordingType, AdminRecordingListType } from "../types/index";
 import { recordings, recording_plays } from "../../db/schema/index";
-import { eq, and, desc, ne } from "drizzle-orm";
+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({
@@ -20,8 +21,7 @@ builder.queryField("recordings", (t) =>
       if (!ctx.currentUser) throw new GraphQLError("Unauthorized");
 
       const conditions = [eq(recordings.user_id, ctx.currentUser.id)];
-      if (args.status) conditions.push(eq(recordings.status, args.status as any));
+      if (args.status) conditions.push(eq(recordings.status, args.status as "draft" | "published"));
-      else conditions.push(ne(recordings.status, "archived" as any));
       if (args.linkedVideoId) conditions.push(eq(recordings.linked_video, args.linkedVideoId));
 
       const limit = args.limit || 50;
@@ -115,17 +115,25 @@ builder.mutationField("createRecording", (t) =>
           user_id: ctx.currentUser.id,
           tags: args.tags || [],
           linked_video: args.linkedVideoId || null,
-          status: (args.status as any) || "draft",
+          status: (args.status as "draft" | "published") || "draft",
           public: false,
         })
         .returning();
 
       const recording = newRecording[0];
 
-      // Gamification: award points if published
       if (recording.status === "published") {
-        await awardPoints(ctx.db, ctx.currentUser.id, "RECORDING_CREATE", recording.id);
+        await gamificationQueue.add("awardPoints", {
-        await checkAchievements(ctx.db, ctx.currentUser.id, "recordings");
+          job: "awardPoints",
+          userId: ctx.currentUser.id,
+          action: "RECORDING_CREATE",
+          recordingId: recording.id,
+        });
+        await gamificationQueue.add("checkAchievements", {
+          job: "checkAchievements",
+          userId: ctx.currentUser.id,
+          category: "recordings",
+        });
       }
 
       return recording;
@@ -173,20 +181,51 @@ builder.mutationField("updateRecording", (t) =>
 
       const updated = await ctx.db
         .update(recordings)
-        .set(updates as any)
+        .set(updates as Partial<typeof recordings.$inferInsert>)
         .where(eq(recordings.id, args.id))
         .returning();
 
       const recording = updated[0];
 
-      // Gamification: if newly published
       if (args.status === "published" && existing[0].status !== "published") {
-        await awardPoints(ctx.db, ctx.currentUser.id, "RECORDING_CREATE", recording.id);
+        // draft → published: award creation points
-        await checkAchievements(ctx.db, ctx.currentUser.id, "recordings");
+        await gamificationQueue.add("awardPoints", {
-      }
+          job: "awardPoints",
-      if (args.status === "published" && recording.featured && !existing[0].featured) {
+          userId: ctx.currentUser.id,
-        await awardPoints(ctx.db, ctx.currentUser.id, "RECORDING_FEATURED", recording.id);
+          action: "RECORDING_CREATE",
-        await checkAchievements(ctx.db, ctx.currentUser.id, "recordings");
+          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) {
+        // newly featured while published: award featured bonus
+        await gamificationQueue.add("awardPoints", {
+          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;
@@ -212,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;
@@ -288,10 +349,18 @@ builder.mutationField("recordRecordingPlay", (t) =>
         })
         .returning({ id: recording_plays.id });
 
-      // Gamification
       if (ctx.currentUser && recording[0].user_id !== ctx.currentUser.id) {
-        await awardPoints(ctx.db, ctx.currentUser.id, "RECORDING_PLAY", args.recordingId);
+        await gamificationQueue.add("awardPoints", {
-        await checkAchievements(ctx.db, ctx.currentUser.id, "playback");
+          job: "awardPoints",
+          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 };
@@ -327,16 +396,69 @@ builder.mutationField("updateRecordingPlay", (t) =>
         .where(eq(recording_plays.id, args.playId));
 
       if (args.completed && !wasCompleted && ctx.currentUser) {
-        await awardPoints(
+        await gamificationQueue.add("awardPoints", {
-          ctx.db,
+          job: "awardPoints",
-          ctx.currentUser.id,
+          userId: ctx.currentUser.id,
-          "RECORDING_COMPLETE",
+          action: "RECORDING_COMPLETE",
-          existing[0].recording_id,
+          recordingId: existing[0].recording_id,
-        );
+        });
-        await checkAchievements(ctx.db, ctx.currentUser.id, "playback");
+        await gamificationQueue.add("checkAchievements", {
+          job: "checkAchievements",
+          userId: ctx.currentUser.id,
+          category: "playback",
+        });
       }
 
       return true;
     },
   }),
 );
+
+builder.queryField("adminListRecordings", (t) =>
+  t.field({
+    type: AdminRecordingListType,
+    args: {
+      search: t.arg.string(),
+      status: t.arg.string(),
+      limit: t.arg.int(),
+      offset: t.arg.int(),
+    },
+    resolve: async (_root, args, ctx) => {
+      requireAdmin(ctx);
+      const limit = args.limit ?? 50;
+      const offset = args.offset ?? 0;
+
+      const conditions: SQL<unknown>[] = [];
+      if (args.search) conditions.push(ilike(recordings.title, `%${args.search}%`));
+      if (args.status) conditions.push(eq(recordings.status, args.status as "draft" | "published"));
+      const where = conditions.length > 0 ? and(...conditions) : undefined;
+
+      const [rows, totalRows] = await Promise.all([
+        ctx.db
+          .select()
+          .from(recordings)
+          .where(where)
+          .orderBy(desc(recordings.date_created))
+          .limit(limit)
+          .offset(offset),
+        ctx.db.select({ total: count() }).from(recordings).where(where),
+      ]);
+
+      return { items: rows, total: totalRows[0]?.total ?? 0 };
+    },
+  }),
+);
+
+builder.mutationField("adminDeleteRecording", (t) =>
+  t.field({
+    type: "Boolean",
+    args: {
+      id: t.arg.string({ required: true }),
+    },
+    resolve: async (_root, args, ctx) => {
+      requireAdmin(ctx);
+      await ctx.db.delete(recordings).where(eq(recordings.id, args.id));
+      return true;
+    },
+  }),
+);

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

@@ -2,7 +2,7 @@ import { GraphQLError } from "graphql";
 import { builder } from "../builder";
 import { CurrentUserType, UserType, AdminUserListType, AdminUserDetailType } from "../types/index";
 import { users, user_photos, files } from "../../db/schema/index";
-import { eq, ilike, or, count, and } from "drizzle-orm";
+import { eq, ilike, or, count, and, asc, type SQL } from "drizzle-orm";
 import { requireAdmin } from "../../lib/acl";
 
 builder.queryField("me", (t) =>
@@ -45,6 +45,7 @@ builder.mutationField("updateProfile", (t) =>
       artistName: t.arg.string(),
       description: t.arg.string(),
       tags: t.arg.stringList(),
+      avatar: t.arg.string(),
     },
     resolve: async (_root, args, ctx) => {
       if (!ctx.currentUser) throw new GraphQLError("Unauthorized");
@@ -58,10 +59,11 @@ builder.mutationField("updateProfile", (t) =>
       if (args.description !== undefined && args.description !== null)
         updates.description = args.description;
       if (args.tags !== undefined && args.tags !== null) updates.tags = args.tags;
+      if (args.avatar !== undefined) updates.avatar = args.avatar;
 
       await ctx.db
         .update(users)
-        .set(updates as any)
+        .set(updates as Partial<typeof users.$inferInsert>)
         .where(eq(users.id, ctx.currentUser.id));
 
       const updated = await ctx.db
@@ -91,27 +93,27 @@ builder.queryField("adminListUsers", (t) =>
       const limit = args.limit ?? 50;
       const offset = args.offset ?? 0;
 
-      let query = ctx.db.select().from(users);
+      const conditions: SQL<unknown>[] = [];
-      let countQuery = ctx.db.select({ total: count() }).from(users);
-
-      const conditions: any[] = [];
       if (args.role) {
-        conditions.push(eq(users.role, args.role as any));
+        conditions.push(eq(users.role, args.role as "model" | "viewer" | "admin"));
       }
       if (args.search) {
         const pattern = `%${args.search}%`;
-        conditions.push(or(ilike(users.email, pattern), ilike(users.artist_name, pattern)));
+        conditions.push(
-      }
+          or(ilike(users.email, pattern), ilike(users.artist_name, pattern)) as SQL<unknown>,
-
+        );
-      if (conditions.length > 0) {
-        const where = conditions.length === 1 ? conditions[0] : and(...conditions);
-        query = (query as any).where(where);
-        countQuery = (countQuery as any).where(where);
       }
 
+      const where = conditions.length > 0 ? and(...conditions) : undefined;
       const [items, totalRows] = await Promise.all([
-        (query as any).limit(limit).offset(offset),
+        ctx.db
-        countQuery,
+          .select()
+          .from(users)
+          .where(where)
+          .orderBy(asc(users.artist_name))
+          .limit(limit)
+          .offset(offset),
+        ctx.db.select({ total: count() }).from(users).where(where),
       ]);
 
       return { items, total: totalRows[0]?.total ?? 0 };
@@ -132,12 +134,14 @@ builder.mutationField("adminUpdateUser", (t) =>
       artistName: t.arg.string(),
       avatarId: t.arg.string(),
       bannerId: t.arg.string(),
+      photoId: t.arg.string(),
     },
     resolve: async (_root, args, ctx) => {
       requireAdmin(ctx);
 
       const updates: Record<string, unknown> = { date_updated: new Date() };
-      if (args.role !== undefined && args.role !== null) updates.role = args.role as any;
+      if (args.role !== undefined && args.role !== null)
+        updates.role = args.role as "model" | "viewer" | "admin";
       if (args.isAdmin !== undefined && args.isAdmin !== null) updates.is_admin = args.isAdmin;
       if (args.firstName !== undefined && args.firstName !== null)
         updates.first_name = args.firstName;
@@ -146,10 +150,11 @@ builder.mutationField("adminUpdateUser", (t) =>
         updates.artist_name = args.artistName;
       if (args.avatarId !== undefined && args.avatarId !== null) updates.avatar = args.avatarId;
       if (args.bannerId !== undefined && args.bannerId !== null) updates.banner = args.bannerId;
+      if (args.photoId !== undefined && args.photoId !== null) updates.photo = args.photoId;
 
       const updated = await ctx.db
         .update(users)
-        .set(updates as any)
+        .set(updates as Partial<typeof users.$inferInsert>)
         .where(eq(users.id, args.userId))
         .returning();
 
@@ -192,8 +197,8 @@ builder.queryField("adminGetUser", (t) =>
         .orderBy(user_photos.sort);
       const seen = new Set<string>();
       const photos = photoRows
-        .filter((p: any) => p.id && !seen.has(p.id) && seen.add(p.id))
+        .filter((p) => p.id !== null && !seen.has(p.id!) && seen.add(p.id!))
-        .map((p: any) => ({ id: p.id, filename: p.filename }));
+        .map((p) => ({ id: p.id!, filename: p.filename! }));
       return { ...user[0], photos };
     },
   }),

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

@@ -2,6 +2,8 @@ import { GraphQLError } from "graphql";
 import { builder } from "../builder";
 import {
   VideoType,
+  VideoListType,
+  AdminVideoListType,
   VideoLikeResponseType,
   VideoPlayResponseType,
   VideoLikeStatusType,
@@ -14,10 +16,24 @@ import {
   users,
   files,
 } from "../../db/schema/index";
-import { eq, and, lte, desc, inArray, count } from "drizzle-orm";
+import {
+  eq,
+  and,
+  lte,
+  desc,
+  asc,
+  inArray,
+  count,
+  ilike,
+  lt,
+  gte,
+  arrayContains,
+  type SQL,
+} from "drizzle-orm";
 import { requireAdmin } from "../../lib/acl";
+import type { DB } from "../../db/connection";
 
-async function enrichVideo(db: any, video: any) {
+async function enrichVideo(db: DB, video: typeof videos.$inferSelect) {
   // Fetch models
   const modelRows = await db
     .select({
@@ -25,6 +41,7 @@ async function enrichVideo(db: any, video: any) {
       artist_name: users.artist_name,
       slug: users.slug,
       avatar: users.avatar,
+      description: users.description,
     })
     .from(video_models)
     .leftJoin(users, eq(video_models.user_id, users.id))
@@ -47,9 +64,19 @@ async function enrichVideo(db: any, video: any) {
     .from(video_plays)
     .where(eq(video_plays.video_id, video.id));
 
+  const models = modelRows
+    .filter((m) => m.id !== null)
+    .map((m) => ({
+      id: m.id!,
+      artist_name: m.artist_name,
+      slug: m.slug,
+      avatar: m.avatar,
+      description: m.description,
+    }));
+
   return {
     ...video,
-    models: modelRows,
+    models,
     movie_file: movieFile,
     likes_count: likesCount[0]?.count || 0,
     plays_count: playsCount[0]?.count || 0,
@@ -58,67 +85,93 @@ async function enrichVideo(db: any, video: any) {
 
 builder.queryField("videos", (t) =>
   t.field({
-    type: [VideoType],
+    type: VideoListType,
     args: {
       modelId: t.arg.string(),
       featured: t.arg.boolean(),
       limit: t.arg.int(),
+      search: t.arg.string(),
+      offset: t.arg.int(),
+      sortBy: t.arg.string(),
+      duration: t.arg.string(),
+      tag: t.arg.string(),
     },
     resolve: async (_root, args, ctx) => {
-      // Unauthenticated users cannot see premium videos
+      const pageSize = args.limit ?? 24;
-      const premiumFilter = !ctx.currentUser ? eq(videos.premium, false) : undefined;
+      const offset = args.offset ?? 0;
-
-      let query = ctx.db
-        .select({ v: videos })
-        .from(videos)
-        .where(and(lte(videos.upload_date, new Date()), premiumFilter))
-        .orderBy(desc(videos.upload_date));
 
+      const conditions: SQL<unknown>[] = [lte(videos.upload_date, new Date())];
+      if (!ctx.currentUser) conditions.push(eq(videos.premium, false));
+      if (args.featured !== null && args.featured !== undefined) {
+        conditions.push(eq(videos.featured, args.featured));
+      }
+      if (args.search) {
+        conditions.push(ilike(videos.title, `%${args.search}%`));
+      }
+      if (args.tag) {
+        conditions.push(arrayContains(videos.tags, [args.tag]));
+      }
       if (args.modelId) {
         const videoIds = await ctx.db
           .select({ video_id: video_models.video_id })
           .from(video_models)
           .where(eq(video_models.user_id, args.modelId));
-
+        if (videoIds.length === 0) return { items: [], total: 0 };
-        if (videoIds.length === 0) return [];
+        conditions.push(
-
-        query = ctx.db
-          .select({ v: videos })
-          .from(videos)
-          .where(
-            and(
-              lte(videos.upload_date, new Date()),
-              premiumFilter,
           inArray(
             videos.id,
-                videoIds.map((v: any) => v.video_id),
+            videoIds.map((v) => v.video_id),
           ),
-            ),
+        );
-          )
-          .orderBy(desc(videos.upload_date));
       }
 
-      if (args.featured !== null && args.featured !== undefined) {
+      const order =
-        query = ctx.db
+        args.sortBy === "most_liked"
+          ? desc(videos.likes_count)
+          : args.sortBy === "most_played"
+            ? desc(videos.plays_count)
+            : args.sortBy === "name"
+              ? asc(videos.title)
+              : desc(videos.upload_date);
+
+      const where = and(...conditions);
+
+      // Duration filter requires JOIN to files table
+      if (args.duration && args.duration !== "all") {
+        const durationCond =
+          args.duration === "short"
+            ? lt(files.duration, 600)
+            : args.duration === "medium"
+              ? and(gte(files.duration, 600), lt(files.duration, 1200))
+              : gte(files.duration, 1200);
+
+        const fullWhere = and(where, durationCond);
+        const [rows, totalRows] = await Promise.all([
+          ctx.db
             .select({ v: videos })
             .from(videos)
-          .where(
+            .leftJoin(files, eq(videos.movie, files.id))
-            and(
+            .where(fullWhere)
-              lte(videos.upload_date, new Date()),
+            .orderBy(order)
-              premiumFilter,
+            .limit(pageSize)
-              eq(videos.featured, args.featured),
+            .offset(offset),
-            ),
+          ctx.db
-          )
+            .select({ total: count() })
-          .orderBy(desc(videos.upload_date));
+            .from(videos)
+            .leftJoin(files, eq(videos.movie, files.id))
+            .where(fullWhere),
+        ]);
+        const videoList = rows.map((r) => r.v);
+        const items = await Promise.all(videoList.map((v) => enrichVideo(ctx.db, v)));
+        return { items, total: totalRows[0]?.total ?? 0 };
       }
 
-      if (args.limit) {
+      const [rows, totalRows] = await Promise.all([
-        query = (query as any).limit(args.limit);
+        ctx.db.select().from(videos).where(where).orderBy(order).limit(pageSize).offset(offset),
-      }
+        ctx.db.select({ total: count() }).from(videos).where(where),
-
+      ]);
-      const rows = await query;
+      const items = await Promise.all(rows.map((v) => enrichVideo(ctx.db, v)));
-      const videoList = rows.map((r: any) => r.v || r);
+      return { items, total: totalRows[0]?.total ?? 0 };
-      return Promise.all(videoList.map((v: any) => enrichVideo(ctx.db, v)));
     },
   }),
 );
@@ -148,6 +201,22 @@ builder.queryField("video", (t) =>
   }),
 );
 
+builder.queryField("adminGetVideo", (t) =>
+  t.field({
+    type: VideoType,
+    nullable: true,
+    args: {
+      id: t.arg.string({ required: true }),
+    },
+    resolve: async (_root, args, ctx) => {
+      requireAdmin(ctx);
+      const video = await ctx.db.select().from(videos).where(eq(videos.id, args.id)).limit(1);
+      if (!video[0]) return null;
+      return enrichVideo(ctx.db, video[0]);
+    },
+  }),
+);
+
 builder.queryField("videoLikeStatus", (t) =>
   t.field({
     type: VideoLikeStatusType,
@@ -365,7 +434,7 @@ builder.queryField("analytics", (t) =>
         };
       }
 
-      const videoIds = modelVideoIds.map((v: any) => v.video_id);
+      const videoIds = modelVideoIds.map((v) => v.video_id);
       const videoList = await ctx.db.select().from(videos).where(inArray(videos.id, videoIds));
       const plays = await ctx.db
         .select()
@@ -379,14 +448,14 @@ builder.queryField("analytics", (t) =>
       const totalLikes = videoList.reduce((sum, v) => sum + (v.likes_count || 0), 0);
       const totalPlays = videoList.reduce((sum, v) => sum + (v.plays_count || 0), 0);
 
-      const playsByDate = plays.reduce((acc: any, play) => {
+      const playsByDate = plays.reduce((acc: Record<string, number>, play) => {
         const date = new Date(play.date_created).toISOString().split("T")[0];
         if (!acc[date]) acc[date] = 0;
         acc[date]++;
         return acc;
       }, {});
 
-      const likesByDate = likes.reduce((acc: any, like) => {
+      const likesByDate = likes.reduce((acc: Record<string, number>, like) => {
         const date = new Date(like.date_created).toISOString().split("T")[0];
         if (!acc[date]) acc[date] = 0;
         acc[date]++;
@@ -430,11 +499,39 @@ builder.queryField("analytics", (t) =>
 
 builder.queryField("adminListVideos", (t) =>
   t.field({
-    type: [VideoType],
+    type: AdminVideoListType,
-    resolve: async (_root, _args, ctx) => {
+    args: {
+      search: t.arg.string(),
+      premium: t.arg.boolean(),
+      featured: t.arg.boolean(),
+      limit: t.arg.int(),
+      offset: t.arg.int(),
+    },
+    resolve: async (_root, args, ctx) => {
       requireAdmin(ctx);
-      const rows = await ctx.db.select().from(videos).orderBy(desc(videos.upload_date));
+      const limit = args.limit ?? 50;
-      return Promise.all(rows.map((v: any) => enrichVideo(ctx.db, v)));
+      const offset = args.offset ?? 0;
+
+      const conditions: SQL<unknown>[] = [];
+      if (args.search) conditions.push(ilike(videos.title, `%${args.search}%`));
+      if (args.premium !== null && args.premium !== undefined)
+        conditions.push(eq(videos.premium, args.premium));
+      if (args.featured !== null && args.featured !== undefined)
+        conditions.push(eq(videos.featured, args.featured));
+
+      const where = conditions.length > 0 ? and(...conditions) : undefined;
+      const [rows, totalRows] = await Promise.all([
+        ctx.db
+          .select()
+          .from(videos)
+          .where(where)
+          .orderBy(desc(videos.upload_date))
+          .limit(limit)
+          .offset(offset),
+        ctx.db.select({ total: count() }).from(videos).where(where),
+      ]);
+      const items = await Promise.all(rows.map((v) => enrichVideo(ctx.db, v)));
+      return { items, total: totalRows[0]?.total ?? 0 };
     },
   }),
 );
@@ -506,7 +603,7 @@ builder.mutationField("updateVideo", (t) =>
 
       const updated = await ctx.db
         .update(videos)
-        .set(updates as any)
+        .set(updates as Partial<typeof videos.$inferInsert>)
         .where(eq(videos.id, args.id))
         .returning();
       if (!updated[0]) return null;

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

@@ -55,6 +55,7 @@ export const UserType = builder.objectRef<User>("User").implement({
     is_admin: t.exposeBoolean("is_admin"),
     avatar: t.exposeString("avatar", { nullable: true }),
     banner: t.exposeString("banner", { nullable: true }),
+    photo: t.exposeString("photo", { nullable: true }),
     email_verified: t.exposeBoolean("email_verified"),
     date_created: t.expose("date_created", { type: "DateTime" }),
   }),
@@ -75,6 +76,7 @@ export const CurrentUserType = builder.objectRef<User>("CurrentUser").implement(
     is_admin: t.exposeBoolean("is_admin"),
     avatar: t.exposeString("avatar", { nullable: true }),
     banner: t.exposeString("banner", { nullable: true }),
+    photo: t.exposeString("photo", { nullable: true }),
     email_verified: t.exposeBoolean("email_verified"),
     date_created: t.expose("date_created", { type: "DateTime" }),
   }),
@@ -86,6 +88,7 @@ export const VideoModelType = builder.objectRef<VideoModel>("VideoModel").implem
     artist_name: t.exposeString("artist_name", { nullable: true }),
     slug: t.exposeString("slug", { nullable: true }),
     avatar: t.exposeString("avatar", { nullable: true }),
+    description: t.exposeString("description", { nullable: true }),
   }),
 });
 
@@ -132,6 +135,7 @@ export const ModelType = builder.objectRef<Model>("Model").implement({
     description: t.exposeString("description", { nullable: true }),
     avatar: t.exposeString("avatar", { nullable: true }),
     banner: t.exposeString("banner", { nullable: true }),
+    photo: t.exposeString("photo", { nullable: true }),
     tags: t.exposeStringList("tags", { nullable: true }),
     date_created: t.expose("date_created", { type: "DateTime" }),
     photos: t.expose("photos", { type: [ModelPhotoType], nullable: true }),
@@ -329,6 +333,137 @@ 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({
+    fields: (t) => ({
+      items: t.expose("items", { type: [VideoType] }),
+      total: t.exposeInt("total"),
+    }),
+  });
+
+export const ArticleListType = builder
+  .objectRef<{ items: Article[]; total: number }>("ArticleList")
+  .implement({
+    fields: (t) => ({
+      items: t.expose("items", { type: [ArticleType] }),
+      total: t.exposeInt("total"),
+    }),
+  });
+
+export const ModelListType = builder
+  .objectRef<{ items: Model[]; total: number }>("ModelList")
+  .implement({
+    fields: (t) => ({
+      items: t.expose("items", { type: [ModelType] }),
+      total: t.exposeInt("total"),
+    }),
+  });
+
+export const AdminVideoListType = builder
+  .objectRef<{ items: Video[]; total: number }>("AdminVideoList")
+  .implement({
+    fields: (t) => ({
+      items: t.expose("items", { type: [VideoType] }),
+      total: t.exposeInt("total"),
+    }),
+  });
+
+export const AdminArticleListType = builder
+  .objectRef<{ items: Article[]; total: number }>("AdminArticleList")
+  .implement({
+    fields: (t) => ({
+      items: t.expose("items", { type: [ArticleType] }),
+      total: t.exposeInt("total"),
+    }),
+  });
+
+export const AdminCommentListType = builder
+  .objectRef<{ items: Comment[]; total: number }>("AdminCommentList")
+  .implement({
+    fields: (t) => ({
+      items: t.expose("items", { type: [CommentType] }),
+      total: t.exposeInt("total"),
+    }),
+  });
+
+export const AdminRecordingListType = builder
+  .objectRef<{ items: Recording[]; total: number }>("AdminRecordingList")
+  .implement({
+    fields: (t) => ({
+      items: t.expose("items", { type: [RecordingType] }),
+      total: t.exposeInt("total"),
+    }),
+  });
+
 export const AdminUserListType = builder
   .objectRef<{ items: User[]; total: number }>("AdminUserList")
   .implement({
@@ -338,9 +473,7 @@ export const AdminUserListType = builder
     }),
   });
 
-export const AdminUserDetailType = builder
+export const AdminUserDetailType = builder.objectRef<AdminUserDetail>("AdminUserDetail").implement({
-  .objectRef<AdminUserDetail>("AdminUserDetail")
-  .implement({
   fields: (t) => ({
     id: t.exposeString("id"),
     email: t.exposeString("email"),
@@ -354,8 +487,9 @@ export const AdminUserDetailType = builder
     is_admin: t.exposeBoolean("is_admin"),
     avatar: t.exposeString("avatar", { nullable: true }),
     banner: t.exposeString("banner", { nullable: true }),
+    photo: t.exposeString("photo", { nullable: true }),
     email_verified: t.exposeBoolean("email_verified"),
     date_created: t.expose("date_created", { type: "DateTime" }),
     photos: t.expose("photos", { type: [ModelPhotoType] }),
   }),
-  });
+});

packages/backend/src/index.ts

@@ -7,19 +7,34 @@ import { createYoga } from "graphql-yoga";
 import { eq } from "drizzle-orm";
 import { files } from "./db/schema/index";
 import path from "path";
-import { existsSync } from "fs";
+import { existsSync, mkdirSync } from "fs";
+import { writeFile, rm } from "fs/promises";
 import sharp from "sharp";
 import { schema } from "./graphql/index";
 import { buildContext } from "./graphql/context";
 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";
 const CORS_ORIGIN = process.env.CORS_ORIGIN || "http://localhost:3000";
 
 async function main() {
+  // Run pending DB migrations before starting the server
+  const migrationsFolder = path.join(__dirname, "migrations");
+  logger.info(`Running migrations from ${migrationsFolder}`);
+  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, {
@@ -120,6 +135,54 @@ async function main() {
     return reply.sendFile(path.join(id, filename));
   });
 
+  // Upload a file: POST /upload (multipart, requires session)
+  fastify.post("/upload", async (request, reply) => {
+    const token = request.cookies["session_token"];
+    if (!token) return reply.status(401).send({ error: "Unauthorized" });
+
+    const sessionData = await redis.get(`session:${token}`);
+    if (!sessionData) return reply.status(401).send({ error: "Unauthorized" });
+    const { id: userId } = JSON.parse(sessionData);
+
+    const data = await request.file();
+    if (!data) return reply.status(400).send({ error: "No file provided" });
+
+    const id = crypto.randomUUID();
+    const filename = data.filename;
+    const mime_type = data.mimetype;
+    const dir = path.join(UPLOAD_DIR, id);
+
+    mkdirSync(dir, { recursive: true });
+    const buffer = await data.toBuffer();
+    await writeFile(path.join(dir, filename), buffer);
+
+    const [file] = await db
+      .insert(files)
+      .values({ id, filename, mime_type, filesize: buffer.byteLength, uploaded_by: userId })
+      .returning();
+
+    return reply.status(201).send(file);
+  });
+
+  // Delete a file: DELETE /assets/:id (requires session)
+  fastify.delete("/assets/:id", async (request, reply) => {
+    const token = request.cookies["session_token"];
+    if (!token) return reply.status(401).send({ error: "Unauthorized" });
+
+    const sessionData = await redis.get(`session:${token}`);
+    if (!sessionData) return reply.status(401).send({ error: "Unauthorized" });
+
+    const { id } = request.params as { id: string };
+    const result = await db.select().from(files).where(eq(files.id, id)).limit(1);
+    if (!result[0]) return reply.status(404).send({ error: "File not found" });
+
+    await db.delete(files).where(eq(files.id, id));
+    const dir = path.join(UPLOAD_DIR, id);
+    await rm(dir, { recursive: true, force: true });
+
+    return reply.status(200).send({ ok: true });
+  });
+
   fastify.get("/health", async (_request, reply) => {
     return reply.send({ status: "ok", timestamp: new Date().toISOString() });
   });

packages/backend/src/lib/auth.ts

@@ -21,6 +21,8 @@ export async function setSession(token: string, user: SessionUser): Promise<void
 export async function getSession(token: string): Promise<SessionUser | null> {
   const data = await redis.get(`session:${token}`);
   if (!data) return null;
+  // Slide the expiration window on every access
+  await redis.expire(`session:${token}`, 86400);
   return JSON.parse(data) as SessionUser;
 }
 

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,26 +28,62 @@ 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}
   `);
-  return parseFloat((result.rows[0] as any)?.weighted_score || "0");
+  return parseFloat((result.rows[0] as { weighted_score?: string })?.weighted_score || "0");
 }
 
 export async function updateUserStats(db: DB, userId: string): Promise<void> {
@@ -84,7 +120,7 @@ export async function updateUserStats(db: DB, userId: string): Promise<void> {
         sql`, `,
       )})
     `);
-    playbacksCount = parseInt((playbacksResult.rows[0] as any)?.count || "0");
+    playbacksCount = parseInt((playbacksResult.rows[0] as { count?: string })?.count || "0");
   } else {
     const playbacksResult = await db
       .select({ count: count() })
@@ -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(
@@ -242,7 +280,7 @@ async function getAchievementProgress(
       WHERE rp.user_id = ${userId}
       AND r.user_id != ${userId}
     `);
-    return parseInt((result.rows[0] as any)?.count || "0");
+    return parseInt((result.rows[0] as { count?: string })?.count || "0");
   }
 
   if (["completionist_10", "completionist_100"].includes(code)) {
@@ -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;
   }
 
@@ -293,7 +331,7 @@ async function getAchievementProgress(
       WHERE rp.user_id = ${userId} AND r.user_id != ${userId}
     `);
     const rc = recordingsResult[0]?.count || 0;
-    const pc = parseInt((playsResult.rows[0] as any)?.count || "0");
+    const pc = parseInt((playsResult.rows[0] as { count?: string })?.count || "0");
     return rc >= 50 && pc >= 100 ? 1 : 0;
   }
 

packages/backend/src/migrations/0002_remove_archived_recording_status.sql

@@ -0,0 +1,8 @@
+-- Update any archived recordings to draft before removing the status
+UPDATE "recordings" SET "status" = 'draft' WHERE "status" = 'archived';--> statement-breakpoint
+
+-- Recreate enum without 'archived'
+ALTER TYPE "public"."recording_status" RENAME TO "recording_status_old";--> statement-breakpoint
+CREATE TYPE "public"."recording_status" AS ENUM('draft', 'published');--> statement-breakpoint
+ALTER TABLE "recordings" ALTER COLUMN "status" TYPE "public"."recording_status" USING "status"::text::"public"."recording_status";--> statement-breakpoint
+DROP TYPE "public"."recording_status_old";

packages/backend/src/migrations/0003_model_photo.sql

@@ -0,0 +1 @@
+ALTER TABLE "users" ADD COLUMN "photo" text REFERENCES "files"("id") ON DELETE set null;

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/migrations/meta/_journal.json

@@ -15,6 +15,20 @@
       "when": 1772645674514,
       "tag": "0001_is_admin",
       "breakpoints": true
+    },
+    {
+      "idx": 2,
+      "version": "7",
+      "when": 1741337600000,
+      "tag": "0002_remove_archived_recording_status",
+      "breakpoints": true
+    },
+    {
+      "idx": 3,
+      "version": "7",
+      "when": 1741420000000,
+      "tag": "0003_model_photo",
+      "breakpoints": true
     }
   ]
 }

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/app.css

@@ -3,6 +3,13 @@
 
 @plugin "@iconify/tailwind4";
 
+@utility scrollbar-none {
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
 @custom-variant dark (&:where(.dark, .dark *));
 
 @custom-variant hover (&:hover);
@@ -194,7 +201,7 @@
   --card-foreground: oklch(0.95 0.01 280);
   --border: oklch(0.2 0.05 280);
   --input: oklch(1 0 0 / 0.15);
-  --primary: oklch(0.65 0.25 320);
+  --primary: oklch(65.054% 0.25033 319.934);
   --primary-foreground: oklch(0.98 0.01 320);
   --secondary: oklch(0.15 0.05 260);
   --secondary-foreground: oklch(0.9 0.02 260);

packages/frontend/src/app.html

@@ -9,7 +9,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
       rel="stylesheet"
     />
 

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

@@ -6,7 +6,8 @@
   import { logout } from "$lib/services";
   import { goto } from "$app/navigation";
   import { getAssetUrl } from "$lib/api";
-  import LogoutButton from "../logout-button/logout-button.svelte";
+  import { Avatar, AvatarFallback, AvatarImage } from "$lib/components/ui/avatar";
+  import { getUserInitials } from "$lib/utils";
   import Separator from "../ui/separator/separator.svelte";
   import BurgerMenuButton from "../burger-menu-button/burger-menu-button.svelte";
   import Logo from "../logo/logo.svelte";
@@ -37,7 +38,7 @@
     isMobileMenuOpen = false;
   }
 
-  function isActiveLink(link: any) {
+  function isActiveLink(link: { name?: string; href: string }) {
     return (
       (page.url.pathname === "/" && link === navLinks[0]) ||
       (page.url.pathname.startsWith(link.href) && link !== navLinks[0])
@@ -46,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">
@@ -55,7 +56,7 @@
         href="/"
         class="flex w-full items-center gap-3 hover:scale-105 transition-all duration-300"
       >
-        <Logo hideName={true} />
+        <Logo />
       </a>
 
       <!-- Desktop Navigation -->
@@ -75,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")}
             >
@@ -111,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"
               >
@@ -123,32 +110,38 @@
               </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" />
 
-            <LogoutButton
+            <a href="/me" class="flex items-center gap-2 px-1 hover:opacity-80 transition-opacity">
-              user={{
+              <Avatar class="h-7 w-7 ring-2 ring-primary/20">
-                name:
+                <AvatarImage
-                  authStatus.user!.artist_name || authStatus.user!.email.split("@")[0] || "User",
+                  src={getAssetUrl(authStatus.user!.avatar, "mini")!}
-                avatar: getAssetUrl(authStatus.user!.avatar, "mini")!,
+                  alt={authStatus.user!.artist_name || authStatus.user!.email}
-                email: authStatus.user!.email,
-              }}
-              onLogout={handleLogout}
                 />
-          </div>
+                <AvatarFallback
-        </div>
+                  class="bg-gradient-to-br from-primary to-accent text-primary-foreground text-xs font-semibold"
-      {: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>
+                  {getUserInitials(authStatus.user!.artist_name || authStatus.user!.email)}
-      {/if}
+                </AvatarFallback>
+              </Avatar>
+              <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>
 
-      <!-- Burger button — mobile/tablet only -->
+            <Button
-      <div class="lg:hidden ml-auto">
+              variant="link"
+              size="icon"
+              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 class="lg:hidden ml-2">
             <BurgerMenuButton
               label={$_("header.navigation")}
               bind:isMobileMenuOpen
@@ -156,11 +149,31 @@
             />
           </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>
 
 <!-- Backdrop -->
-<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions a11y_no_noninteractive_element_interactions -->
 <div
   role="presentation"
   class={`fixed inset-0 z-40 bg-black/60 backdrop-blur-sm transition-opacity duration-300 lg:hidden ${isMobileMenuOpen ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"}`}
@@ -174,21 +187,40 @@
 >
   <!-- Panel header -->
   <div class="flex items-center px-5 h-16 shrink-0 border-b border-border/30">
-    <Logo hideName={true} />
+    <Logo />
   </div>
 
   <div class="flex-1 py-6 px-5 space-y-6">
-    <!-- User logout slider -->
+    <!-- User card -->
     {#if authStatus.authenticated}
-      <LogoutButton
+      <div class="flex items-center gap-3 rounded-xl border border-border/40 bg-card/50 px-4 py-3">
-        user={{
+        <Avatar class="h-10 w-10 ring-2 ring-primary/20 shrink-0">
-          name: authStatus.user!.artist_name || authStatus.user!.email.split("@")[0] || "User",
+          <AvatarImage
-          avatar: getAssetUrl(authStatus.user!.avatar, "mini")!,
+            src={getAssetUrl(authStatus.user!.avatar, "mini")!}
-          email: authStatus.user!.email,
+            alt={authStatus.user!.artist_name || authStatus.user!.email}
-        }}
-        onLogout={handleLogout}
-        class="w-full"
           />
+          <AvatarFallback
+            class="bg-gradient-to-br from-primary to-accent text-primary-foreground text-sm font-semibold"
+          >
+            {getUserInitials(authStatus.user!.artist_name || authStatus.user!.email)}
+          </AvatarFallback>
+        </Avatar>
+        <div class="flex flex-col min-w-0 flex-1">
+          <span class="text-sm font-semibold text-foreground truncate">
+            {authStatus.user!.artist_name || authStatus.user!.email.split("@")[0]}
+          </span>
+          <span class="text-xs text-muted-foreground truncate">{authStatus.user!.email}</span>
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          class="h-8 w-8 rounded-full text-muted-foreground hover:text-destructive hover:bg-destructive/10 shrink-0"
+          onclick={handleLogout}
+          title={$_("header.logout")}
+        >
+          <span class="icon-[ri--logout-circle-r-line] h-4 w-4"></span>
+        </Button>
+      </div>
     {/if}
 
     <!-- Navigation -->
@@ -320,6 +352,5 @@
         {/if}
       </div>
     </div>
-
   </div>
 </div>

packages/frontend/src/lib/components/image-viewer/image-viewer.svelte

@@ -145,7 +145,12 @@
 {#if isViewerOpen}
   <div class="fixed inset-0 z-50 flex items-center justify-center animate-fade-in">
     <!-- Backdrop -->
-    <div class="absolute inset-0 bg-black/95 backdrop-blur-xl" onclick={closeViewer}></div>
+    <button
+      type="button"
+      class="absolute inset-0 bg-black/95 backdrop-blur-xl cursor-default"
+      onclick={closeViewer}
+      aria-label="Close viewer"
+    ></button>
 
     <!-- Viewer Content -->
     <div class="relative w-[90vw] h-[90vh] flex flex-col animate-slide-up">

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

@@ -1,21 +1,5 @@
 <script lang="ts">
-  import { _ } from "svelte-i18n";
   import SexyIcon from "../icon/icon.svelte";
-
-  const { hideName = false } = $props();
 </script>
 
-<div class="relative">
+<SexyIcon class="w-12 h-12" />
-  <SexyIcon class="w-8 h-8 text-primary" />
-</div>
-<span
-  class={`logo text-3xl text-foreground opacity-90 tracking-wide font-extrabold drop-shadow-x ${hideName ? "hidden sm:inline-block" : ""}`}
->
-  {$_("brand.name")}
-</span>
-
-<style>
-  .logo {
-    font-family: "Dancing Script", cursive;
-  }
-</style>

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

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    title: string;
+    description?: string;
+    children?: Snippet;
+  }
+
+  let { title, description, children }: Props = $props();
+</script>
+
+<section class="relative py-12 md:py-20 overflow-hidden">
+  <div class="relative container mx-auto px-4 text-center">
+    <div class="max-w-5xl mx-auto">
+      <h1
+        class="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent"
+      >
+        {title}
+      </h1>
+      {#if description}
+        <p
+          class="text-xl md:text-2xl text-muted-foreground mb-10 leading-relaxed max-w-4xl mx-auto"
+        >
+          {description}
+        </p>
+      {/if}
+      {#if children}
+        {@render children()}
+      {/if}
+    </div>
+  </div>
+</section>

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,19 +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";
-      case "archived":
-        return "text-red-400 bg-red-400/20";
-      default:
-        return "text-gray-400 bg-gray-400/20";
-    }
-  }
 </script>
 
 <Card
@@ -44,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">
@@ -151,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/badge/badge.svelte

@@ -5,8 +5,7 @@
     base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
     variants: {
       variant: {
-				default:
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
-					"bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
         secondary:
           "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent",
         destructive:

packages/frontend/src/lib/components/ui/calendar/calendar-cell.svelte

@@ -13,7 +13,7 @@
   bind:ref
   class={cn(
     "relative size-(--cell-size) p-0 text-center text-sm focus-within:z-20 [&:first-child[data-selected]_[data-bits-day]]:rounded-s-md [&:last-child[data-selected]_[data-bits-day]]:rounded-e-md",
-		className
+    className,
   )}
   {...restProps}
 />

packages/frontend/src/lib/components/ui/calendar/calendar-day.svelte

@@ -29,7 +29,7 @@
     "focus:border-ring focus:ring-ring/50 focus:relative",
     // inner spans
     "[&>span]:text-xs [&>span]:opacity-70",
-		className
+    className,
   )}
   {...restProps}
 />

packages/frontend/src/lib/components/ui/calendar/calendar-head-cell.svelte

@@ -13,7 +13,7 @@
   bind:ref
   class={cn(
     "text-muted-foreground w-(--cell-size) rounded-md text-[0.8rem] font-normal",
-		className
+    className,
   )}
   {...restProps}
 />

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

@@ -13,7 +13,7 @@
   bind:ref
   class={cn(
     "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
-		className
+    className,
   )}
   {...restProps}
 />

packages/frontend/src/lib/components/ui/calendar/calendar-month-select.svelte

@@ -15,7 +15,7 @@
 <span
   class={cn(
     "has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]",
-		className
+    className,
   )}
 >
   <CalendarPrimitive.MonthSelect

packages/frontend/src/lib/components/ui/calendar/calendar-next-button.svelte

@@ -24,7 +24,7 @@
   class={cn(
     buttonVariants({ variant }),
     "size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180",
-		className
+    className,
   )}
   children={children || Fallback}
   {...restProps}

packages/frontend/src/lib/components/ui/calendar/calendar-prev-button.svelte

@@ -24,7 +24,7 @@
   class={cn(
     buttonVariants({ variant }),
     "size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180",
-		className
+    className,
   )}
   children={children || Fallback}
   {...restProps}

packages/frontend/src/lib/components/ui/calendar/calendar-year-select.svelte

@@ -14,7 +14,7 @@
 <span
   class={cn(
     "has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]",
-		className
+    className,
   )}
 >
   <CalendarPrimitive.YearSelect

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

@@ -51,7 +51,7 @@ get along, so we shut typescript up by casting `value` to `never`.
   {disableDaysOutsideMonth}
   class={cn(
     "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
-		className
+    className,
   )}
   {locale}
   {monthFormat}

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/components/ui/file-drop-zone/file-drop-zone.svelte

@@ -23,11 +23,13 @@
     ...rest
   }: FileDropZoneProps = $props();
 
+  $effect(() => {
     if (maxFiles !== undefined && fileCount === undefined) {
       console.warn(
         "Make sure to provide FileDropZone with `fileCount` when using the `maxFiles` prompt",
       );
     }
+  });
 
   let uploading = $state(false);
 

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

@@ -24,7 +24,7 @@
     {align}
     class={cn(
       "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--bits-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
-			className
+      className,
     )}
     {...restProps}
   />

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

@@ -23,6 +23,8 @@ export default {
     my_profile: "My Profile",
     anonymous: "Anonymous",
     load_more: "Load More",
+    page_of: "Page {page} of {total}",
+    total_results: "{total} results",
   },
   header: {
     home: "Home",
@@ -48,7 +50,7 @@ export default {
     account: "Account",
   },
   brand: {
-    name: "SexyArt",
+    name: "Sexy",
     tagline: "Where Love Meets Artistry",
     description:
       "The premier destination for artistic adult content, intimate storytelling, and creative expression through video and magazine content.",
@@ -89,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",
@@ -132,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: {
@@ -141,8 +164,9 @@ export default {
     created: "Created",
     status_draft: "Draft",
     status_published: "Published",
-    status_archived: "Archived",
     play: "Play",
+    publish: "Publish",
+    unpublish: "Unpublish",
     edit: "Edit",
     delete: "Delete",
     public: "Public",
@@ -251,6 +275,7 @@ export default {
       rating: "Highest Rated",
       videos: "Most Videos",
       name: "A-Z",
+      recent: "Newest",
     },
     online: "Online",
     followers: "followers",
@@ -300,13 +325,15 @@ export default {
     show: "Show",
     add_comment_placeholder: "Add a comment...",
     toast_comment: "Your comment has been sent",
+    comment_deleted: "Comment deleted",
+    comment_delete_error: "Failed to delete comment",
     comment: "Comment",
     commenting: "Commenting...",
     error: "Heads Up!",
     back: "Back to Videos",
   },
   magazine: {
-    title: "SexyArt Magazine",
+    title: "Sexy Magazine",
     description:
       "Insights, stories, and inspiration from the world of love, art, and intimate expression",
     search_placeholder: "Search articles...",
@@ -383,7 +410,7 @@ export default {
     },
   },
   about: {
-    title: "About SexyArt",
+    title: "About Sexy",
     subtitle:
       "Where passion meets artistry, and intimate storytelling becomes a celebration of human connection.",
     join_community: "Join Our Community",
@@ -399,11 +426,11 @@ export default {
       subtitle:
         "Born from a vision to transform how intimate content is created, shared, and appreciated",
       description_part1:
-        "SexyArt was founded in 2019 with a simple yet powerful mission: to create a platform where intimate content could be appreciated as an art form, where creators could express their authentic selves, and where viewers could connect with content that celebrates love, passion, and human connection.",
+        "Sexy was founded in 2019 with a simple yet powerful mission: to create a platform where intimate content could be appreciated as an art form, where creators could express their authentic selves, and where viewers could connect with content that celebrates love, passion, and human connection.",
       description_part2:
         "We recognized that the adult content industry needed a platform that prioritized artistic expression, creator empowerment, and community building. Our founders, coming from backgrounds in photography, digital media, and community management, set out to build something different.",
       description_part3:
-        "Today, SexyArt is home to hundreds of talented creators and thousands of passionate community members who share our vision of elevating intimate content to new artistic heights.",
+        "Today, Sexy is home to hundreds of talented creators and thousands of passionate community members who share our vision of elevating intimate content to new artistic heights.",
     },
     values: {
       title: "Our Values",
@@ -443,7 +470,7 @@ export default {
         image: "/img/valknar.gif",
         bio: "DJ and visual storyteller specializing in diffusion AI art.",
       },
-      subtitle: "The passionate individuals behind SexyArt's success",
+      subtitle: "The passionate individuals behind Sexy's success",
     },
     mission: {
       title: "Our Mission",
@@ -470,7 +497,7 @@ export default {
   },
   faq: {
     title: "Frequently Asked Questions",
-    description: "Find answers to common questions about SexyArt, our platform, and services",
+    description: "Find answers to common questions about Sexy, our platform, and services",
     search_placeholder: "Search frequently asked questions...",
     search_results: "Search Results ({count})",
     no_results: "No questions found matching your search.",
@@ -479,24 +506,24 @@ export default {
       title: "Getting Started",
       questions: [
         {
-          question: "How do I create an account on SexyArt?",
+          question: "How do I create an account on Sexy?",
           answer:
             "Creating an account is simple! Click the 'Join Now' button in the top navigation, fill out the registration form with your email and basic information, verify you're 18+, and agree to our terms. You'll receive a confirmation email to activate your account.",
         },
         {
-          question: "What types of content can I find on SexyArt?",
+          question: "What types of content can I find on Sexy?",
           answer:
-            "SexyArt features high-quality artistic adult content including intimate photography, romantic videos, artistic nude content, and creative adult entertainment. All content is created by verified models and creators who focus on artistic expression and storytelling.",
+            "Sexy features high-quality artistic adult content including intimate photography, romantic videos, artistic nude content, and creative adult entertainment. All content is created by verified models and creators who focus on artistic expression and storytelling.",
         },
         {
-          question: "Is SexyArt safe and secure?",
+          question: "Is Sexy safe and secure?",
           answer:
             "Yes! We use industry-standard encryption, secure payment processing, and strict privacy measures. All creators are verified, and we have comprehensive content moderation. Your personal information and viewing habits are kept completely private.",
         },
         {
-          question: "Can I access SexyArt on mobile devices?",
+          question: "Can I access Sexy on mobile devices?",
           answer:
-            "Absolutely! SexyArt is fully responsive and works perfectly on smartphones, tablets, and desktop computers. You can enjoy the same high-quality experience across all your devices.",
+            "Absolutely! Sexy is fully responsive and works perfectly on smartphones, tablets, and desktop computers. You can enjoy the same high-quality experience across all your devices.",
         },
       ],
     },
@@ -504,7 +531,7 @@ export default {
       title: "For Creators & Models",
       questions: [
         {
-          question: "How do I become a creator on SexyArt?",
+          question: "How do I become a creator on Sexy?",
           answer:
             "To become a creator, sign up for a Creator account during registration or upgrade your existing account. You'll need to verify your identity, provide tax information, and agree to our creator terms. Once approved, you can start uploading content and building your audience.",
         },
@@ -593,7 +620,7 @@ export default {
     company_information: "Company Information",
     company_name: {
       title: "Company Name",
-      value: "SexyArt",
+      value: "Sexy",
     },
     legal_form: {
       title: "Legal Form",
@@ -610,7 +637,7 @@ export default {
     contact_information: "Contact Information",
     registered_address: "Registered Address",
     address: {
-      company: "SexyArt",
+      company: "Sexy",
       name: "Sebastian Krüger",
       street: "Berlingerstraße 48",
       city: "78333 Stockach",
@@ -684,7 +711,7 @@ export default {
       acceptance: {
         title: "1. Acceptance of Terms",
         text: [
-          "By accessing and using SexyArt, you accept and agree to be bound by the terms and provision of this agreement. If you do  not agree to abide by the above, please do not use this service.",
+          "By accessing and using Sexy, you accept and agree to be bound by the terms and provision of this agreement. If you do  not agree to abide by the above, please do not use this service.",
         ],
       },
       age: {
@@ -728,7 +755,7 @@ export default {
       values: {
         title: "Our Community Values",
         text: [
-          "SexyArt is built on respect, consent, and artistic expression. We believe in creating a space where creators and viewers can connect through shared appreciation for intimate art and storytelling.",
+          "Sexy is built on respect, consent, and artistic expression. We believe in creating a space where creators and viewers can connect through shared appreciation for intimate art and storytelling.",
         ],
       },
       respect: {
@@ -795,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",
@@ -897,22 +932,26 @@ export default {
     },
   },
   head: {
-    title: "SexyArt | {title}",
+    title: "Sexy | {title}",
   },
   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",
       saving: "Saving…",
       creating: "Creating…",
       deleting: "Deleting…",
+      all: "All",
       featured: "Featured",
       premium: "Premium",
       write: "Write",
@@ -920,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",
@@ -944,7 +983,8 @@ export default {
       role_updated: "Role updated to {role}",
       role_update_failed: "Failed to update role",
       delete_title: "Delete user",
-      delete_description: "Are you sure you want to permanently delete {name}? This cannot be undone.",
+      delete_description:
+        "Are you sure you want to permanently delete {name}? This cannot be undone.",
       delete_success: "User deleted",
       delete_error: "Failed to delete user",
     },
@@ -954,6 +994,11 @@ export default {
       artist_name: "Artist name",
       avatar: "Avatar",
       banner: "Banner",
+      model_photo: "Model photo",
+      model_photo_hint:
+        "Used in model cards and on the model profile page. Avatar is used for comments and article authors.",
+      model_photo_uploaded: "Model photo uploaded",
+      model_photo_failed: "Model photo upload failed",
       is_admin: "Administrator",
       is_admin_hint: "Grants full admin access to the dashboard",
       photos: "Photo gallery",
@@ -971,6 +1016,7 @@ export default {
     videos: {
       title: "Videos",
       new_video: "New video",
+      search_placeholder: "Search videos...",
       col_video: "Video",
       col_badges: "Badges",
       col_plays: "Plays",
@@ -1005,6 +1051,8 @@ export default {
     articles: {
       title: "Articles",
       new_article: "New article",
+      search_placeholder: "Search articles...",
+      filter_all_categories: "All categories",
       col_article: "Article",
       col_category: "Category",
       col_published: "Published",
@@ -1014,6 +1062,64 @@ export default {
       delete_success: "Article deleted",
       delete_error: "Failed to delete article",
     },
+    comments: {
+      title: "Comments",
+      search_placeholder: "Search comments…",
+      col_user: "User",
+      col_comment: "Comment",
+      col_on: "On",
+      col_date: "Date",
+      no_results: "No comments found",
+      delete_title: "Delete comment",
+      delete_success: "Comment deleted",
+      delete_error: "Failed to delete comment",
+    },
+    recordings: {
+      title: "Recordings",
+      search_placeholder: "Search recordings…",
+      col_title: "Title",
+      col_status: "Status",
+      col_duration: "Duration",
+      col_date: "Date",
+      no_results: "No recordings found",
+      published: "Published",
+      draft: "Draft",
+      public: "Public",
+      delete_title: "Delete recording",
+      delete_description: 'Permanently delete "{title}"? This cannot be undone.',
+      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

@@ -3,6 +3,7 @@ import { apiUrl, getGraphQLClient } from "$lib/api";
 import type {
   Analytics,
   Article,
+  Comment,
   CurrentUser,
   Model,
   Recording,
@@ -216,8 +217,25 @@ export async function resetPassword(token: string, password: string) {
 // ─── Articles ────────────────────────────────────────────────────────────────
 
 const ARTICLES_QUERY = gql`
-  query GetArticles {
+  query GetArticles(
-    articles {
+    $search: String
+    $category: String
+    $sortBy: String
+    $offset: Int
+    $limit: Int
+    $featured: Boolean
+    $tag: String
+  ) {
+    articles(
+      search: $search
+      category: $category
+      sortBy: $sortBy
+      offset: $offset
+      limit: $limit
+      featured: $featured
+      tag: $tag
+    ) {
+      items {
         id
         slug
         title
@@ -235,12 +253,27 @@ const ARTICLES_QUERY = gql`
           avatar
         }
       }
+      total
+    }
   }
 `;
 
-export async function getArticles(fetchFn?: typeof globalThis.fetch) {
+export async function getArticles(
+  params: {
+    search?: string;
+    category?: string;
+    sortBy?: string;
+    offset?: number;
+    limit?: number;
+    featured?: boolean;
+    tag?: string;
+  } = {},
+  fetchFn?: typeof globalThis.fetch,
+): Promise<{ items: Article[]; total: number }> {
   return loggedApiCall("getArticles", async () => {
-    const data = await getGraphQLClient(fetchFn).request<{ articles: Article[] }>(ARTICLES_QUERY);
+    const data = await getGraphQLClient(fetchFn).request<{
+      articles: { items: Article[]; total: number };
+    }>(ARTICLES_QUERY, params);
     return data.articles;
   });
 }
@@ -263,6 +296,7 @@ const ARTICLE_BY_SLUG_QUERY = gql`
         artist_name
         slug
         avatar
+        description
       }
     }
   }
@@ -286,8 +320,27 @@ export async function getArticleBySlug(slug: string, fetchFn?: typeof globalThis
 // ─── Videos ──────────────────────────────────────────────────────────────────
 
 const VIDEOS_QUERY = gql`
-  query GetVideos($modelId: String, $featured: Boolean, $limit: Int) {
+  query GetVideos(
-    videos(modelId: $modelId, featured: $featured, limit: $limit) {
+    $modelId: String
+    $featured: Boolean
+    $limit: Int
+    $search: String
+    $offset: Int
+    $sortBy: String
+    $duration: String
+    $tag: String
+  ) {
+    videos(
+      modelId: $modelId
+      featured: $featured
+      limit: $limit
+      search: $search
+      offset: $offset
+      sortBy: $sortBy
+      duration: $duration
+      tag: $tag
+    ) {
+      items {
         id
         slug
         title
@@ -313,12 +366,26 @@ const VIDEOS_QUERY = gql`
           duration
         }
       }
+      total
+    }
   }
 `;
 
-export async function getVideos(fetchFn?: typeof globalThis.fetch) {
+export async function getVideos(
+  params: {
+    search?: string;
+    sortBy?: string;
+    duration?: string;
+    offset?: number;
+    limit?: number;
+    tag?: string;
+  } = {},
+  fetchFn?: typeof globalThis.fetch,
+): Promise<{ items: Video[]; total: number }> {
   return loggedApiCall("getVideos", async () => {
-    const data = await getGraphQLClient(fetchFn).request<{ videos: Video[] }>(VIDEOS_QUERY);
+    const data = await getGraphQLClient(fetchFn).request<{
+      videos: { items: Video[]; total: number };
+    }>(VIDEOS_QUERY, params);
     return data.videos;
   });
 }
@@ -327,10 +394,10 @@ export async function getVideosForModel(id: string, fetchFn?: typeof globalThis.
   return loggedApiCall(
     "getVideosForModel",
     async () => {
-      const data = await getGraphQLClient(fetchFn).request<{ videos: Video[] }>(VIDEOS_QUERY, {
+      const data = await getGraphQLClient(fetchFn).request<{
-        modelId: id,
+        videos: { items: Video[]; total: number };
-      });
+      }>(VIDEOS_QUERY, { modelId: id, limit: 10000 });
-      return data.videos;
+      return data.videos.items;
     },
     { modelId: id },
   );
@@ -343,11 +410,10 @@ export async function getFeaturedVideos(
   return loggedApiCall(
     "getFeaturedVideos",
     async () => {
-      const data = await getGraphQLClient(fetchFn).request<{ videos: Video[] }>(VIDEOS_QUERY, {
+      const data = await getGraphQLClient(fetchFn).request<{
-        featured: true,
+        videos: { items: Video[]; total: number };
-        limit,
+      }>(VIDEOS_QUERY, { featured: true, limit });
-      });
+      return data.videos.items;
-      return data.videos;
     },
     { limit },
   );
@@ -402,14 +468,30 @@ export async function getVideoBySlug(slug: string, fetchFn?: typeof globalThis.f
 // ─── Models ──────────────────────────────────────────────────────────────────
 
 const MODELS_QUERY = gql`
-  query GetModels($featured: Boolean, $limit: Int) {
+  query GetModels(
-    models(featured: $featured, limit: $limit) {
+    $featured: Boolean
+    $limit: Int
+    $search: String
+    $offset: Int
+    $sortBy: String
+    $tag: String
+  ) {
+    models(
+      featured: $featured
+      limit: $limit
+      search: $search
+      offset: $offset
+      sortBy: $sortBy
+      tag: $tag
+    ) {
+      items {
         id
         slug
         artist_name
         description
         avatar
         banner
+        photo
         tags
         date_created
         photos {
@@ -417,12 +499,19 @@ const MODELS_QUERY = gql`
           filename
         }
       }
+      total
+    }
   }
 `;
 
-export async function getModels(fetchFn?: typeof globalThis.fetch) {
+export async function getModels(
+  params: { search?: string; sortBy?: string; offset?: number; limit?: number; tag?: string } = {},
+  fetchFn?: typeof globalThis.fetch,
+): Promise<{ items: Model[]; total: number }> {
   return loggedApiCall("getModels", async () => {
-    const data = await getGraphQLClient(fetchFn).request<{ models: Model[] }>(MODELS_QUERY);
+    const data = await getGraphQLClient(fetchFn).request<{
+      models: { items: Model[]; total: number };
+    }>(MODELS_QUERY, params);
     return data.models;
   });
 }
@@ -434,11 +523,10 @@ export async function getFeaturedModels(
   return loggedApiCall(
     "getFeaturedModels",
     async () => {
-      const data = await getGraphQLClient(fetchFn).request<{ models: Model[] }>(MODELS_QUERY, {
+      const data = await getGraphQLClient(fetchFn).request<{
-        featured: true,
+        models: { items: Model[]; total: number };
-        limit,
+      }>(MODELS_QUERY, { featured: true, limit });
-      });
+      return data.models.items;
-      return data.models;
     },
     { limit },
   );
@@ -453,6 +541,7 @@ const MODEL_BY_SLUG_QUERY = gql`
       description
       avatar
       banner
+      photo
       tags
       date_created
       photos {
@@ -487,6 +576,7 @@ const UPDATE_PROFILE_MUTATION = gql`
     $artistName: String
     $description: String
     $tags: [String!]
+    $avatar: String
   ) {
     updateProfile(
       firstName: $firstName
@@ -494,6 +584,7 @@ const UPDATE_PROFILE_MUTATION = gql`
       artistName: $artistName
       description: $description
       tags: $tags
+      avatar: $avatar
     ) {
       id
       email
@@ -523,6 +614,7 @@ export async function updateProfile(user: Partial<User> & { password?: string })
           artistName: user.artist_name,
           description: user.description,
           tags: user.tags,
+          avatar: user.avatar,
         },
       );
       return data.updateProfile;
@@ -566,7 +658,8 @@ export async function removeFile(id: string) {
         method: "DELETE",
         credentials: "include",
       });
-      if (!response.ok) throw new Error(`Failed to delete file: ${response.statusText}`);
+      if (!response.ok && response.status !== 404)
+        throw new Error(`Failed to delete file: ${response.statusText}`);
     },
     { fileId: id },
   );
@@ -668,7 +761,7 @@ export async function countCommentsForModel(
 
 export async function getItemsByTag(
   category: "video" | "article" | "model",
-  _tag: string,
+  tag: string,
   fetchFn?: typeof globalThis.fetch,
 ) {
   return loggedApiCall(
@@ -676,14 +769,14 @@ export async function getItemsByTag(
     async () => {
       switch (category) {
         case "video":
-          return getVideos(fetchFn);
+          return getVideos({ tag, limit: 1000 }, fetchFn).then((r) => r.items);
         case "model":
-          return getModels(fetchFn);
+          return getModels({ tag, limit: 1000 }, fetchFn).then((r) => r.items);
         case "article":
-          return getArticles(fetchFn);
+          return getArticles({ tag, limit: 1000 }, fetchFn).then((r) => r.items);
       }
     },
-    { category },
+    { category, tag },
   );
 }
 
@@ -809,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)
@@ -1060,6 +1173,7 @@ const ADMIN_UPDATE_USER_MUTATION = gql`
     $artistName: String
     $avatarId: String
     $bannerId: String
+    $photoId: String
   ) {
     adminUpdateUser(
       userId: $userId
@@ -1070,6 +1184,7 @@ const ADMIN_UPDATE_USER_MUTATION = gql`
       artistName: $artistName
       avatarId: $avatarId
       bannerId: $bannerId
+      photoId: $photoId
     ) {
       id
       email
@@ -1080,6 +1195,7 @@ const ADMIN_UPDATE_USER_MUTATION = gql`
       is_admin
       avatar
       banner
+      photo
       date_created
     }
   }
@@ -1094,6 +1210,7 @@ export async function adminUpdateUser(input: {
   artistName?: string;
   avatarId?: string;
   bannerId?: string;
+  photoId?: string;
 }) {
   return loggedApiCall(
     "adminUpdateUser",
@@ -1137,6 +1254,7 @@ const ADMIN_GET_USER_QUERY = gql`
       is_admin
       avatar
       banner
+      photo
       description
       tags
       email_verified
@@ -1154,7 +1272,9 @@ export async function adminGetUser(userId: string, token?: string) {
     "adminGetUser",
     async () => {
       const client = token ? getAuthClient(token) : getGraphQLClient();
-      const data = await client.request<{ adminGetUser: any }>(ADMIN_GET_USER_QUERY, { userId });
+      const data = await client.request<{
+        adminGetUser: User & { photos: Array<{ id: string; filename: string }> };
+      }>(ADMIN_GET_USER_QUERY, { userId });
       return data.adminGetUser;
     },
     { userId },
@@ -1188,8 +1308,75 @@ export async function adminRemoveUserPhoto(userId: string, fileId: string) {
 // ─── Admin: Videos ────────────────────────────────────────────────────────────
 
 const ADMIN_LIST_VIDEOS_QUERY = gql`
-  query AdminListVideos {
+  query AdminListVideos(
-    adminListVideos {
+    $search: String
+    $premium: Boolean
+    $featured: Boolean
+    $limit: Int
+    $offset: Int
+  ) {
+    adminListVideos(
+      search: $search
+      premium: $premium
+      featured: $featured
+      limit: $limit
+      offset: $offset
+    ) {
+      items {
+        id
+        slug
+        title
+        description
+        image
+        movie
+        tags
+        upload_date
+        premium
+        featured
+        likes_count
+        plays_count
+        models {
+          id
+          artist_name
+          slug
+          avatar
+        }
+        movie_file {
+          id
+          filename
+          mime_type
+          duration
+        }
+      }
+      total
+    }
+  }
+`;
+
+export async function adminListVideos(
+  opts: {
+    search?: string;
+    premium?: boolean;
+    featured?: boolean;
+    limit?: number;
+    offset?: number;
+  } = {},
+  fetchFn?: typeof globalThis.fetch,
+  token?: string,
+): Promise<{ items: Video[]; total: number }> {
+  return loggedApiCall("adminListVideos", async () => {
+    const client = token ? getAuthClient(token) : getGraphQLClient(fetchFn);
+    const data = await client.request<{ adminListVideos: { items: Video[]; total: number } }>(
+      ADMIN_LIST_VIDEOS_QUERY,
+      opts,
+    );
+    return data.adminListVideos;
+  });
+}
+
+const ADMIN_GET_VIDEO_QUERY = gql`
+  query AdminGetVideo($id: String!) {
+    adminGetVideo(id: $id) {
       id
       slug
       title
@@ -1218,13 +1405,17 @@ const ADMIN_LIST_VIDEOS_QUERY = gql`
   }
 `;
 
-export async function adminListVideos(fetchFn?: typeof globalThis.fetch, token?: string) {
+export async function adminGetVideo(
-  return loggedApiCall("adminListVideos", async () => {
+  id: string,
+  fetchFn?: typeof globalThis.fetch,
+  token?: string,
+): Promise<Video | null> {
+  return loggedApiCall("adminGetVideo", async () => {
     const client = token ? getAuthClient(token) : getGraphQLClient(fetchFn);
-    const data = await client.request<{ adminListVideos: Video[] }>(
+    const data = await client.request<{ adminGetVideo: Video | null }>(ADMIN_GET_VIDEO_QUERY, {
-      ADMIN_LIST_VIDEOS_QUERY,
+      id,
-    );
+    });
-    return data.adminListVideos;
+    return data.adminGetVideo;
   });
 }
 
@@ -1374,8 +1565,21 @@ export async function setVideoModels(videoId: string, userIds: string[]) {
 // ─── Admin: Articles ──────────────────────────────────────────────────────────
 
 const ADMIN_LIST_ARTICLES_QUERY = gql`
-  query AdminListArticles {
+  query AdminListArticles(
-    adminListArticles {
+    $search: String
+    $category: String
+    $featured: Boolean
+    $limit: Int
+    $offset: Int
+  ) {
+    adminListArticles(
+      search: $search
+      category: $category
+      featured: $featured
+      limit: $limit
+      offset: $offset
+    ) {
+      items {
         id
         slug
         title
@@ -1393,19 +1597,70 @@ const ADMIN_LIST_ARTICLES_QUERY = gql`
           avatar
         }
       }
+      total
+    }
   }
 `;
 
-export async function adminListArticles(fetchFn?: typeof globalThis.fetch, token?: string) {
+export async function adminListArticles(
+  opts: {
+    search?: string;
+    category?: string;
+    featured?: boolean;
+    limit?: number;
+    offset?: number;
+  } = {},
+  fetchFn?: typeof globalThis.fetch,
+  token?: string,
+): Promise<{ items: Article[]; total: number }> {
   return loggedApiCall("adminListArticles", async () => {
     const client = token ? getAuthClient(token) : getGraphQLClient(fetchFn);
-    const data = await client.request<{ adminListArticles: Article[] }>(
+    const data = await client.request<{ adminListArticles: { items: Article[]; total: number } }>(
       ADMIN_LIST_ARTICLES_QUERY,
+      opts,
     );
     return data.adminListArticles;
   });
 }
 
+const ADMIN_GET_ARTICLE_QUERY = gql`
+  query AdminGetArticle($id: String!) {
+    adminGetArticle(id: $id) {
+      id
+      slug
+      title
+      excerpt
+      content
+      image
+      tags
+      publish_date
+      category
+      featured
+      author {
+        id
+        artist_name
+        slug
+        avatar
+      }
+    }
+  }
+`;
+
+export async function adminGetArticle(
+  id: string,
+  fetchFn?: typeof globalThis.fetch,
+  token?: string,
+): Promise<Article | null> {
+  return loggedApiCall("adminGetArticle", async () => {
+    const client = token ? getAuthClient(token) : getGraphQLClient(fetchFn);
+    const data = await client.request<{ adminGetArticle: Article | null }>(
+      ADMIN_GET_ARTICLE_QUERY,
+      { id },
+    );
+    return data.adminGetArticle;
+  });
+}
+
 const CREATE_ARTICLE_MUTATION = gql`
   mutation CreateArticle(
     $title: String!
@@ -1556,3 +1811,235 @@ export async function getAnalytics(fetchFn?: typeof globalThis.fetch) {
     {},
   );
 }
+
+// ─── Admin: Comments ──────────────────────────────────────────────────────────
+
+const ADMIN_LIST_COMMENTS_QUERY = gql`
+  query AdminListComments($search: String, $limit: Int, $offset: Int) {
+    adminListComments(search: $search, limit: $limit, offset: $offset) {
+      items {
+        id
+        collection
+        item_id
+        comment
+        user_id
+        date_created
+        user {
+          id
+          artist_name
+          avatar
+        }
+      }
+      total
+    }
+  }
+`;
+
+export async function adminListComments(
+  opts: { search?: string; limit?: number; offset?: number } = {},
+  fetchFn?: typeof globalThis.fetch,
+  token?: string,
+): Promise<{ items: Comment[]; total: number }> {
+  return loggedApiCall("adminListComments", async () => {
+    const client = token ? getAuthClient(token) : getGraphQLClient(fetchFn);
+    const data = await client.request<{ adminListComments: { items: Comment[]; total: number } }>(
+      ADMIN_LIST_COMMENTS_QUERY,
+      opts,
+    );
+    return data.adminListComments;
+  });
+}
+
+// ─── Admin: Recordings ────────────────────────────────────────────────────────
+
+const ADMIN_LIST_RECORDINGS_QUERY = gql`
+  query AdminListRecordings($search: String, $status: String, $limit: Int, $offset: Int) {
+    adminListRecordings(search: $search, status: $status, limit: $limit, offset: $offset) {
+      items {
+        id
+        title
+        slug
+        status
+        duration
+        public
+        featured
+        user_id
+        date_created
+      }
+      total
+    }
+  }
+`;
+
+export async function adminListRecordings(
+  opts: { search?: string; status?: string; limit?: number; offset?: number } = {},
+  fetchFn?: typeof globalThis.fetch,
+  token?: string,
+): Promise<{ items: Recording[]; total: number }> {
+  return loggedApiCall("adminListRecordings", async () => {
+    const client = token ? getAuthClient(token) : getGraphQLClient(fetchFn);
+    const data = await client.request<{
+      adminListRecordings: { items: Recording[]; total: number };
+    }>(ADMIN_LIST_RECORDINGS_QUERY, opts);
+    return data.adminListRecordings;
+  });
+}
+
+const ADMIN_DELETE_RECORDING_MUTATION = gql`
+  mutation AdminDeleteRecording($id: String!) {
+    adminDeleteRecording(id: $id)
+  }
+`;
+
+export async function adminDeleteRecording(id: string): Promise<void> {
+  return loggedApiCall("adminDeleteRecording", async () => {
+    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/+page.svelte

@@ -5,6 +5,7 @@
   import { getAssetUrl } from "$lib/api";
   import Meta from "$lib/components/meta/meta.svelte";
   import { formatVideoDuration } from "$lib/utils.js";
+  import SexyBackground from "$lib/components/background/background.svelte";
 
   const { data } = $props();
 </script>
@@ -13,10 +14,9 @@
 
 <!-- Hero Section -->
 <section class="relative min-h-screen flex items-center justify-center overflow-hidden">
-  <!-- Background Gradient -->
   <div class="absolute inset-0 bg-gradient-to-br from-primary/20 via-accent/10 to-background"></div>
+  <SexyBackground />
 
-  <!-- Content -->
   <div class="relative z-10 container mx-auto px-4 text-center">
     <div class="max-w-5xl mx-auto space-y-12">
       <h1
@@ -47,14 +47,6 @@
       </div>
     </div>
   </div>
-
-  <!-- Floating Elements -->
-  <div
-    class="absolute top-20 left-10 w-20 h-20 bg-primary/20 rounded-full blur-xl animate-pulse"
-  ></div>
-  <div
-    class="absolute bottom-20 right-10 w-32 h-32 bg-accent/20 rounded-full blur-xl animate-pulse delay-1000"
-  ></div>
 </section>
 
 <!-- Featured Models -->
@@ -71,40 +63,24 @@
 
     <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-3xl mx-auto">
       {#each data.models as model (model.slug)}
+        <a href="/models/{model.slug}" class="block group">
           <Card
-          class="p-0 group hover:shadow-2xl hover:shadow-primary/20 transition-all duration-300 hover:-translate-y-2 bg-gradient-to-br from-card to-card/50 border-primary/20"
+            class="p-0 h-full hover:shadow-2xl hover:shadow-primary/20 transition-all duration-300 hover:-translate-y-2 bg-gradient-to-br from-card to-card/50 border-primary/20"
           >
             <CardContent class="p-6 text-center">
               <div class="relative mb-4">
                 <img
-                src={getAssetUrl(model.avatar, "mini")}
+                  src={getAssetUrl(model.avatar, "thumbnail")}
                   alt={model.artist_name}
-                class="w-24 h-24 rounded-full mx-auto object-cover ring-4 ring-primary/20 group-hover:ring-primary/40 transition-all"
+                  class="w-24 h-24 rounded-full mx-auto object-cover ring-4 ring-primary/20 group-hover:ring-primary/40 transition-all bg-muted"
                 />
-              <!-- <div
-                class="absolute -bottom-2 -right-2 bg-primary text-primary-foreground rounded-full w-8 h-8 flex items-center justify-center text-sm font-bold"
-              >
-                <HeartIcon class="w-4 h-4 fill-current" />
-              </div> -->
               </div>
-            <h3 class="font-semibold text-lg mb-2">{model.artist_name}</h3>
+              <h3 class="font-semibold text-lg group-hover:text-primary transition-colors">
-            <!-- <div
+                {model.artist_name}
-              class="flex items-center justify-center gap-4 text-sm text-muted-foreground"
+              </h3>
-            >
-              <div class="flex items-center gap-1">
-                <StarIcon class="w-4 h-4 text-yellow-500 fill-current" />
-                {model.rating}
-              </div>
-              <div>{model.videos} {$_("home.featured_models.videos")}</div>
-            </div> -->
-            <Button
-              variant="ghost"
-              size="sm"
-              class="mt-4 w-full group-hover:bg-primary/10"
-              href="/models/{model.slug}">{$_("home.featured_models.view_profile")}</Button
-            >
             </CardContent>
           </Card>
+        </a>
       {/each}
     </div>
   </div>
@@ -122,50 +98,44 @@
 
     <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">
       {#each data.videos as video (video.slug)}
+        <a href="/videos/{video.slug}" class="block group">
           <Card
-          class="p-0 group hover:shadow-2xl hover:shadow-accent/20 transition-all duration-300 hover:-translate-y-2 bg-gradient-to-br from-card to-card/50 border-accent/20 overflow-hidden"
+            class="p-0 h-full hover:shadow-2xl hover:shadow-accent/20 transition-all duration-300 hover:-translate-y-2 bg-gradient-to-br from-card to-card/50 border-accent/20 overflow-hidden"
           >
             <div class="relative">
               <img
                 src={getAssetUrl(video.image, "preview")}
                 alt={video.title}
-              class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
+                class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300 bg-muted"
               />
               <div
                 class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent group-hover:scale-105 transition-transform duration-300"
               ></div>
               <div class="absolute bottom-2 left-2 text-white text-sm font-medium">
-              {#if video.movie_file?.duration}{formatVideoDuration(video.movie_file.duration)}{/if}
+                {#if video.movie_file?.duration}{formatVideoDuration(
+                    video.movie_file.duration,
+                  )}{/if}
               </div>
-            <!-- <div
-              class="absolute top-2 right-2 bg-black/50 text-white text-xs px-2 py-1 rounded-full"
-            >
-              {video.views}
-              {$_("home.trending.views")}
-            </div> -->
               <div
                 class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
+                aria-hidden="true"
               >
-              <a
+                <div class="w-16 h-16 bg-primary/90 rounded-full flex items-center justify-center">
-                class="w-16 h-16 bg-primary/90 rounded-full flex items-center justify-center"
-                href="/videos/{video.slug}"
-                aria-label={video.title}
-              >
                   <span class="icon-[ri--play-large-fill] w-8 h-8 text-white"></span>
-              </a>
+                </div>
               </div>
             </div>
             <CardContent class="px-4 pb-4 pt-0">
               <h3 class="font-semibold mb-2 group-hover:text-primary transition-colors">
                 {video.title}
               </h3>
-
               <div class="flex items-center gap-2 text-sm text-muted-foreground">
                 <span class="icon-[ri--fire-line] w-4 h-4"></span>
                 {$_("home.trending.trending")}
               </div>
             </CardContent>
           </Card>
+        </a>
       {/each}
     </div>
   </div>

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

@@ -7,7 +7,7 @@
 
   const { data } = $props();
 
-  const stats = [
+  const stats = $derived([
     {
       icon: "icon-[ri--user-heart-line]",
       value: data.stats.viewers_count,
@@ -28,7 +28,7 @@
       value: $_("about.stats.yearsFormatted", { values: { years: 5 } }),
       label: $_("about.stats.experience"),
     },
-  ];
+  ]);
 
   const team = [
     {

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

@@ -1,13 +1,33 @@
 <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]" },
     { name: $_("admin.nav.videos"), href: "/admin/videos", icon: "icon-[ri--film-line]" },
     { name: $_("admin.nav.articles"), href: "/admin/articles", icon: "icon-[ri--article-line]" },
+    { name: $_("admin.nav.comments"), href: "/admin/comments", icon: "icon-[ri--message-line]" },
+    {
+      name: $_("admin.nav.recordings"),
+      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) {
@@ -15,38 +35,66 @@
   }
 </script>
 
-<div class="min-h-screen bg-background">
+<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 flex items-center gap-2 py-3 border-b border-border/40">
+    <div class="lg:hidden border-b border-border/40">
-      <a href="/" class="text-xs text-muted-foreground hover:text-foreground transition-colors shrink-0 mr-2">
+      <div class="flex items-center gap-1 overflow-x-auto py-2 scrollbar-none">
-        {$_("admin.nav.back_mobile")}
+        <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">{$_("admin.nav.back_mobile")}</span>
         </a>
         {#each navLinks as link (link.href)}
           <a
             href={link.href}
-          class={`flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors ${
+            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`}></span>
+            <span class={`${link.icon} h-4 w-4 shrink-0`}></span>
-          {link.name}
+            <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="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.server.ts

@@ -1,7 +1,19 @@
 import { adminListArticles } from "$lib/services";
 
-export async function load({ fetch, cookies }) {
+export async function load({ fetch, url, cookies }) {
   const token = cookies.get("session_token") || "";
-  const articles = await adminListArticles(fetch, token).catch(() => []);
+  const search = url.searchParams.get("search") || undefined;
-  return { articles };
+  const category = url.searchParams.get("category") || undefined;
+  const featuredParam = url.searchParams.get("featured");
+  const featured = featuredParam !== null ? featuredParam === "true" : undefined;
+  const offset = parseInt(url.searchParams.get("offset") || "0", 10);
+  const limit = 50;
+
+  const result = await adminListArticles(
+    { search, category, featured, limit, offset },
+    fetch,
+    token,
+  ).catch(() => ({ items: [], total: 0 }));
+
+  return { ...result, search, category, featured, offset, limit };
 }

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

@@ -1,13 +1,19 @@
 <script lang="ts">
-  import { invalidateAll } from "$app/navigation";
+  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 { deleteArticle } from "$lib/services";
   import { getAssetUrl } from "$lib/api";
   import { Button } from "$lib/components/ui/button";
+  import { Input } from "$lib/components/ui/input";
+  import { Select, SelectContent, SelectItem, SelectTrigger } from "$lib/components/ui/select";
   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();
 
@@ -16,6 +22,27 @@
   let deleteTarget: Article | null = $state(null);
   let deleteOpen = $state(false);
   let deleting = $state(false);
+  let searchValue = $derived(data.search ?? "");
+  let searchTimeout: ReturnType<typeof setTimeout>;
+
+  function debounceSearch(value: string) {
+    clearTimeout(searchTimeout);
+    searchTimeout = setTimeout(() => {
+      const params = new SvelteURLSearchParams(page.url.searchParams.toString());
+      if (value) params.set("search", value);
+      else params.delete("search");
+      params.delete("offset");
+      goto(`?${params.toString()}`, { keepFocus: true });
+    }, 300);
+  }
+
+  function setFilter(key: string, value: string | null) {
+    const params = new SvelteURLSearchParams(page.url.searchParams.toString());
+    if (value !== null) params.set(key, value);
+    else params.delete(key);
+    params.delete("offset");
+    goto(`?${params.toString()}`);
+  }
 
   function confirmDelete(article: Article) {
     deleteTarget = article;
@@ -39,26 +66,81 @@
   }
 </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>
-    <Button href="/admin/articles/new" class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90">
+    <div class="flex items-center gap-3">
+      <span class="text-sm text-muted-foreground"
+        >{$_("admin.users.total", { values: { total: data.total } })}</span
+      >
+      <Button
+        href="/admin/articles/new"
+        class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
+      >
         <span class="icon-[ri--add-line] h-4 w-4 mr-1"></span>{$_("admin.articles.new_article")}
       </Button>
     </div>
+  </div>
+
+  <!-- Filters -->
+  <div class="flex flex-wrap items-center gap-3 mb-4">
+    <Input
+      placeholder={$_("admin.articles.search_placeholder")}
+      class="max-w-xs"
+      value={searchValue}
+      oninput={(e) => {
+        searchValue = (e.target as HTMLInputElement).value;
+        debounceSearch(searchValue);
+      }}
+    />
+    <Select
+      type="single"
+      value={data.category ?? "all"}
+      onValueChange={(v) => setFilter("category", v === "all" ? null : (v ?? null))}
+    >
+      <SelectTrigger class="w-40 h-9 text-sm">
+        {data.category ?? $_("admin.articles.filter_all_categories")}
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="all">{$_("admin.articles.filter_all_categories")}</SelectItem>
+        <SelectItem value="photography">{$_("magazine.categories.photography")}</SelectItem>
+        <SelectItem value="production">{$_("magazine.categories.production")}</SelectItem>
+        <SelectItem value="interview">{$_("magazine.categories.interview")}</SelectItem>
+        <SelectItem value="psychology">{$_("magazine.categories.psychology")}</SelectItem>
+        <SelectItem value="trends">{$_("magazine.categories.trends")}</SelectItem>
+        <SelectItem value="spotlight">{$_("magazine.categories.spotlight")}</SelectItem>
+      </SelectContent>
+    </Select>
+    <Button
+      variant={data.featured === true ? "default" : "outline"}
+      onclick={() => setFilter("featured", data.featured === true ? null : "true")}
+    >
+      {$_("admin.common.featured")}
+    </Button>
+  </div>
 
   <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.articles.col_article")}</th>
+          <th class="px-4 py-3 text-left font-medium text-muted-foreground"
-          <th class="px-4 py-3 text-left font-medium text-muted-foreground hidden sm:table-cell">{$_("admin.articles.col_category")}</th>
+            >{$_("admin.articles.col_article")}</th
-          <th class="px-4 py-3 text-left font-medium text-muted-foreground hidden sm:table-cell">{$_("admin.articles.col_published")}</th>
+          >
-          <th class="px-4 py-3 text-right font-medium text-muted-foreground">{$_("admin.users.col_actions")}</th>
+          <th class="px-4 py-3 text-left font-medium text-muted-foreground hidden sm:table-cell"
+            >{$_("admin.articles.col_category")}</th
+          >
+          <th class="px-4 py-3 text-left font-medium text-muted-foreground hidden sm:table-cell"
+            >{$_("admin.articles.col_published")}</th
+          >
+          <th class="px-4 py-3 text-right font-medium text-muted-foreground"
+            >{$_("admin.users.col_actions")}</th
+          >
         </tr>
       </thead>
       <tbody class="divide-y divide-border/30">
-        {#each data.articles as article (article.id)}
+        {#each data.items as article (article.id)}
           <tr class="hover:bg-muted/10 transition-colors">
             <td class="px-4 py-3">
               <div class="flex items-center gap-3">
@@ -86,7 +168,9 @@
                 </div>
               </div>
             </td>
-            <td class="px-4 py-3 text-muted-foreground capitalize hidden sm:table-cell">{article.category ?? "—"}</td>
+            <td class="px-4 py-3 text-muted-foreground capitalize hidden sm:table-cell"
+              >{article.category ?? "—"}</td
+            >
             <td class="px-4 py-3 text-muted-foreground hidden sm:table-cell">
               {timeAgo.format(new Date(article.publish_date))}
             </td>
@@ -108,7 +192,7 @@
           </tr>
         {/each}
 
-        {#if data.articles.length === 0}
+        {#if data.items.length === 0}
           <tr>
             <td colspan="4" class="px-4 py-8 text-center text-muted-foreground">
               {$_("admin.articles.no_results")}
@@ -118,6 +202,30 @@
       </tbody>
     </table>
   </div>
+
+  <!-- Pagination -->
+  {#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) => {
+          const params = new SvelteURLSearchParams(page.url.searchParams.toString());
+          params.set("offset", String((p - 1) * data.limit));
+          goto(`?${params.toString()}`);
+        }}
+      />
+    </div>
+  {/if}
 </div>
 
 <Dialog.Root bind:open={deleteOpen}>

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

@@ -1,13 +1,17 @@
-import { adminListArticles, adminListUsers } from "$lib/services";
+import { adminGetArticle, adminListUsers } from "$lib/services";
 import { error } from "@sveltejs/kit";
 
 export async function load({ params, fetch, cookies }) {
   const token = cookies.get("session_token") || "";
-  const [articles, modelsResult] = await Promise.all([
+  const [article, modelsResult] = await Promise.all([
-    adminListArticles(fetch, token).catch(() => []),
+    adminGetArticle(params.id, fetch, token).catch(() => null),
-    adminListUsers({ role: "model", limit: 200 }, fetch, token).catch(() => ({ items: [], total: 0 })),
+    adminListUsers({ role: "model", limit: 200 }, fetch, token).catch(() => ({
+      items: [],
+      total: 0,
+    })),
   ]);
-  const article = articles.find((a) => a.id === params.id);
+
   if (!article) throw error(404, "Article not found");
+
   return { article, authors: modelsResult.items };
 }

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { untrack } from "svelte";
   import { goto } from "$app/navigation";
   import { toast } from "svelte-sonner";
   import { _ } from "svelte-i18n";
@@ -10,24 +11,44 @@
   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();
 
-  let title = $state(data.article.title);
+  let title = $state(untrack(() => data.article.title));
-  let slug = $state(data.article.slug);
+  let slug = $state(untrack(() => data.article.slug));
-  let excerpt = $state(data.article.excerpt ?? "");
+  let excerpt = $state(untrack(() => data.article.excerpt ?? ""));
-  let content = $state(data.article.content ?? "");
+  let content = $state(untrack(() => data.article.content ?? ""));
-  let category = $state(data.article.category ?? "");
+  let category = $state(untrack(() => data.article.category ?? ""));
-  let tags = $state<string[]>(data.article.tags ?? []);
+  let tags = $state<string[]>(untrack(() => data.article.tags ?? []));
-  let featured = $state(data.article.featured ?? false);
+  let featured = $state(untrack(() => data.article.featured ?? false));
   let publishDate = $state(
-    data.article.publish_date ? new Date(data.article.publish_date).toISOString().slice(0, 16) : "",
+    untrack(() =>
+      data.article.publish_date
+        ? new Date(data.article.publish_date).toISOString().slice(0, 16)
+        : "",
+    ),
   );
-  let imageId = $state<string | null>(data.article.image ?? null);
+  let imageId = $state<string | null>(untrack(() => data.article.image ?? null));
-  let authorId = $state(data.article.author?.id ?? "");
+  let authorId = $state(untrack(() => data.article.author?.id ?? ""));
+  $effect(() => {
+    title = data.article.title;
+    slug = data.article.slug;
+    excerpt = data.article.excerpt ?? "";
+    content = data.article.content ?? "";
+    category = data.article.category ?? "";
+    tags = data.article.tags ?? [];
+    featured = data.article.featured ?? false;
+    publishDate = data.article.publish_date
+      ? new Date(data.article.publish_date).toISOString().slice(0, 16)
+      : "";
+    imageId = data.article.image ?? null;
+    authorId = data.article.author?.id ?? "";
+  });
   let selectedAuthor = $derived(data.authors.find((a) => a.id === authorId) ?? null);
   let saving = $state(false);
   let editorTab = $state<"write" | "preview">("write");
@@ -66,37 +87,56 @@
       });
       toast.success($_("admin.article_form.update_success"));
       goto("/admin/articles");
-    } catch (e: any) {
+    } catch (e) {
-      toast.error(e?.message ?? $_("admin.article_form.update_error"));
+      toast.error((e instanceof Error ? e.message : null) ?? $_("admin.article_form.update_error"));
     } finally {
       saving = false;
     }
   }
 </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 -->
@@ -104,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")}
+              class={`px-3 py-1 h-auto rounded-none transition-colors ${editorTab === "write" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
-          >{$_("admin.common.write")}</button>
+              onclick={() => (editorTab = "write")}>{$_("admin.common.write")}</Button
-          <button
+            >
-            type="button"
+            <Button
-            class={`px-3 py-1 transition-colors ${editorTab === "preview" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
+              variant="ghost"
-            onclick={() => (editorTab = "preview")}
+              size="sm"
-          >{$_("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" : ""}`}
@@ -127,7 +169,9 @@
             {#if preview}
               {@html preview}
             {:else}
-            <p class="text-muted-foreground italic text-sm">{$_("admin.article_form.preview_placeholder")}</p>
+              <p class="text-muted-foreground italic text-sm">
+                {$_("admin.article_form.preview_placeholder")}
+              </p>
             {/if}
           </div>
         </div>
@@ -145,14 +189,17 @@
         <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 src={getAssetUrl(selectedAuthor.avatar, "mini")} alt="" class="h-5 w-5 rounded-full object-cover shrink-0" />
+                <img
+                  src={getAssetUrl(selectedAuthor.avatar, "mini")}
+                  alt=""
+                  class="h-5 w-5 rounded-full object-cover shrink-0"
+                />
               {/if}
               {selectedAuthor.artist_name}
             {:else}
@@ -164,7 +211,11 @@
             {#each data.authors as author (author.id)}
               <SelectItem value={author.id}>
                 {#if author.avatar}
-                <img src={getAssetUrl(author.avatar, "mini")} alt="" class="h-5 w-5 rounded-full object-cover shrink-0" />
+                  <img
+                    src={getAssetUrl(author.avatar, "mini")}
+                    alt=""
+                    class="h-5 w-5 rounded-full object-cover shrink-0"
+                  />
                 {/if}
                 {author.artist_name}
               </SelectItem>
@@ -176,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>
@@ -186,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">
@@ -194,11 +252,13 @@
         <span class="text-sm">{$_("admin.common.featured")}</span>
       </label>
 
-    <div class="flex gap-3 pt-2">
+      <Button
-      <Button onclick={handleSubmit} disabled={saving} class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90">
+        onclick={handleSubmit}
+        disabled={saving}
+        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("");
@@ -67,23 +69,23 @@
       });
       toast.success($_("admin.article_form.create_success"));
       goto("/admin/articles");
-    } catch (e: any) {
+    } catch (e) {
-      toast.error(e?.message ?? $_("admin.article_form.create_error"));
+      toast.error((e instanceof Error ? e.message : null) ?? $_("admin.article_form.create_error"));
     } finally {
       saving = false;
     }
   }
 </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,17 +96,29 @@
               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">
           <Label for="slug">{$_("admin.common.slug_field")}</Label>
-        <Input id="slug" bind:value={slug} placeholder={$_("admin.article_form.slug_placeholder")} />
+          <Input
+            id="slug"
+            bind:value={slug}
+            placeholder={$_("admin.article_form.slug_placeholder")}
+            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} placeholder={$_("admin.article_form.excerpt_placeholder")} rows={2} />
+        <Textarea
+          id="excerpt"
+          bind:value={excerpt}
+          placeholder={$_("admin.article_form.excerpt_placeholder")}
+          rows={2}
+          class="bg-background/50 border-primary/20 focus:border-primary"
+        />
       </div>
 
       <!-- Markdown editor with live preview -->
@@ -112,16 +126,18 @@
         <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")}
+              class={`px-3 py-1 h-auto rounded-none transition-colors ${editorTab === "write" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
-          >{$_("admin.common.write")}</button>
+              onclick={() => (editorTab = "write")}>{$_("admin.common.write")}</Button
-          <button
+            >
-            type="button"
+            <Button
-            class={`px-3 py-1 transition-colors ${editorTab === "preview" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
+              variant="ghost"
-            onclick={() => (editorTab = "preview")}
+              size="sm"
-          >{$_("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>
         <!-- Mobile: single pane toggled; Desktop: side by side -->
@@ -129,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" : ""}`}
@@ -137,7 +153,9 @@
             {#if preview}
               {@html preview}
             {:else}
-            <p class="text-muted-foreground italic text-sm">{$_("admin.article_form.preview_placeholder")}</p>
+              <p class="text-muted-foreground italic text-sm">
+                {$_("admin.article_form.preview_placeholder")}
+              </p>
             {/if}
           </div>
         </div>
@@ -146,13 +164,20 @@
       <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">{$_("admin.common.image_uploaded")} ✓</p>{/if}
+        {#if imageId}
+          <p class="text-xs text-green-600 mt-1">{$_("admin.common.image_uploaded")} ✓</p>
+        {/if}
       </div>
 
       <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} placeholder={$_("admin.article_form.category_placeholder")} />
+          <Input
+            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">
           <Label>{$_("admin.common.publish_date")}</Label>
@@ -162,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">
@@ -170,11 +198,13 @@
         <span class="text-sm">{$_("admin.common.featured")}</span>
       </label>
 
-    <div class="flex gap-3 pt-2">
+      <Button
-      <Button onclick={handleSubmit} disabled={saving} class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90">
+        onclick={handleSubmit}
+        disabled={saving}
+        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.server.ts

@@ -0,0 +1,15 @@
+import { adminListComments } from "$lib/services";
+
+export async function load({ fetch, url, cookies }) {
+  const token = cookies.get("session_token") || "";
+  const search = url.searchParams.get("search") || undefined;
+  const offset = parseInt(url.searchParams.get("offset") || "0", 10);
+  const limit = 50;
+
+  const result = await adminListComments({ search, limit, offset }, fetch, token).catch(() => ({
+    items: [],
+    total: 0,
+  }));
+
+  return { ...result, search, offset, limit };
+}

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

@@ -0,0 +1,195 @@
+<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 { deleteComment } from "$lib/services";
+  import { getAssetUrl } from "$lib/api";
+  import { Button } from "$lib/components/ui/button";
+  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");
+
+  let deleteTarget: { id: number; comment: string } | null = $state(null);
+  let deleteOpen = $state(false);
+  let deleting = $state(false);
+  let searchValue = $derived(data.search ?? "");
+  let searchTimeout: ReturnType<typeof setTimeout>;
+
+  function debounceSearch(value: string) {
+    clearTimeout(searchTimeout);
+    searchTimeout = setTimeout(() => {
+      const params = new SvelteURLSearchParams(page.url.searchParams.toString());
+      if (value) params.set("search", value);
+      else params.delete("search");
+      params.delete("offset");
+      goto(`?${params.toString()}`, { keepFocus: true });
+    }, 300);
+  }
+
+  function confirmDelete(id: number, comment: string) {
+    deleteTarget = { id, comment };
+    deleteOpen = true;
+  }
+
+  async function handleDelete() {
+    if (!deleteTarget) return;
+    deleting = true;
+    try {
+      await deleteComment(deleteTarget.id);
+      toast.success($_("admin.comments.delete_success"));
+      deleteOpen = false;
+      deleteTarget = null;
+      await invalidateAll();
+    } catch {
+      toast.error($_("admin.comments.delete_error"));
+    } finally {
+      deleting = false;
+    }
+  }
+</script>
+
+<Meta title={$_("admin.comments.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.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">
+    <Input
+      placeholder={$_("admin.comments.search_placeholder")}
+      class="max-w-xs"
+      value={searchValue}
+      oninput={(e) => {
+        searchValue = (e.target as HTMLInputElement).value;
+        debounceSearch(searchValue);
+      }}
+    />
+  </div>
+
+  <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.comments.col_user")}</th
+          >
+          <th class="px-4 py-3 text-left font-medium text-muted-foreground"
+            >{$_("admin.comments.col_comment")}</th
+          >
+          <th class="px-4 py-3 text-left font-medium text-muted-foreground hidden sm:table-cell"
+            >{$_("admin.comments.col_on")}</th
+          >
+          <th class="px-4 py-3 text-left font-medium text-muted-foreground hidden sm:table-cell"
+            >{$_("admin.comments.col_date")}</th
+          >
+          <th class="px-4 py-3 text-right font-medium text-muted-foreground"
+            >{$_("admin.users.col_actions")}</th
+          >
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-border/30">
+        {#each data.items as comment (comment.id)}
+          <tr class="hover:bg-muted/10 transition-colors">
+            <td class="px-4 py-3">
+              <div class="flex items-center gap-2">
+                {#if comment.user?.avatar}
+                  <img
+                    src={getAssetUrl(comment.user.avatar, "mini")}
+                    alt=""
+                    class="h-7 w-7 rounded-full object-cover"
+                  />
+                {:else}
+                  <div
+                    class="h-7 w-7 rounded-full bg-muted/50 flex items-center justify-center text-muted-foreground"
+                  >
+                    <span class="icon-[ri--user-line] h-4 w-4"></span>
+                  </div>
+                {/if}
+                <span class="font-medium text-sm">{comment.user?.artist_name ?? "—"}</span>
+              </div>
+            </td>
+            <td class="px-4 py-3 max-w-sm">
+              <p class="truncate text-sm">{comment.comment}</p>
+            </td>
+            <td class="px-4 py-3 text-muted-foreground hidden sm:table-cell capitalize text-sm">
+              {comment.collection} /
+              <span class="font-mono text-xs">{comment.item_id.slice(0, 8)}…</span>
+            </td>
+            <td class="px-4 py-3 text-muted-foreground hidden sm:table-cell text-sm">
+              {timeAgo.format(new Date(comment.date_created))}
+            </td>
+            <td class="px-4 py-3 text-right">
+              <Button
+                size="sm"
+                variant="ghost"
+                class="text-destructive hover:text-destructive hover:bg-destructive/10"
+                onclick={() => confirmDelete(comment.id, comment.comment)}
+              >
+                <span class="icon-[ri--delete-bin-line] h-4 w-4"></span>
+              </Button>
+            </td>
+          </tr>
+        {/each}
+
+        {#if data.items.length === 0}
+          <tr>
+            <td colspan="5" class="px-4 py-8 text-center text-muted-foreground">
+              {$_("admin.comments.no_results")}
+            </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) => {
+          const params = new SvelteURLSearchParams(page.url.searchParams.toString());
+          params.set("offset", String((p - 1) * data.limit));
+          goto(`?${params.toString()}`);
+        }}
+      />
+    </div>
+  {/if}
+</div>
+
+<Dialog.Root bind:open={deleteOpen}>
+  <Dialog.Content>
+    <Dialog.Header>
+      <Dialog.Title>{$_("admin.comments.delete_title")}</Dialog.Title>
+      <Dialog.Description>
+        "{deleteTarget?.comment.slice(0, 80)}{(deleteTarget?.comment.length ?? 0) > 80 ? "…" : ""}"
+      </Dialog.Description>
+    </Dialog.Header>
+    <Dialog.Footer>
+      <Button variant="outline" onclick={() => (deleteOpen = false)}>{$_("common.cancel")}</Button>
+      <Button variant="destructive" disabled={deleting} onclick={handleDelete}>
+        {deleting ? $_("admin.common.deleting") : $_("common.delete")}
+      </Button>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>

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.server.ts

@@ -0,0 +1,15 @@
+import { adminListRecordings } from "$lib/services";
+
+export async function load({ fetch, url, cookies }) {
+  const token = cookies.get("session_token") || "";
+  const search = url.searchParams.get("search") || undefined;
+  const status = url.searchParams.get("status") || undefined;
+  const offset = parseInt(url.searchParams.get("offset") || "0", 10);
+  const limit = 50;
+
+  const result = await adminListRecordings({ search, status, limit, offset }, fetch, token).catch(
+    () => ({ items: [], total: 0 }),
+  );
+
+  return { ...result, search, status, offset, limit };
+}