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,8 @@ 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"),
     password_reset_token: text("password_reset_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,16 +1,18 @@
 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 { requireRole } from "../../lib/acl";
+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
       .select({
-        first_name: users.first_name,
+        id: users.id,
-        last_name: users.last_name,
+        artist_name: users.artist_name,
+        slug: users.slug,
         avatar: users.avatar,
         description: users.description,
       })
@@ -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: {
-      requireRole(ctx, "admin");
+      search: t.arg.string(),
-      const articleList = await ctx.db.select().from(articles).orderBy(desc(articles.publish_date));
+      category: t.arg.string(),
-      return Promise.all(articleList.map((article: any) => enrichArticle(ctx.db, article)));
+      featured: t.arg.boolean(),
+      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(
+          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 };
     },
   }),
 );
@@ -100,7 +172,7 @@ builder.mutationField("createArticle", (t) =>
       publishDate: t.arg.string(),
     },
     resolve: async (_root, args, ctx) => {
-      requireRole(ctx, "admin");
+      requireAdmin(ctx);
       const inserted = await ctx.db
         .insert(articles)
         .values({
@@ -132,19 +204,21 @@ builder.mutationField("updateArticle", (t) =>
       excerpt: t.arg.string(),
       content: t.arg.string(),
       imageId: t.arg.string(),
+      authorId: t.arg.string(),
       tags: t.arg.stringList(),
       category: t.arg.string(),
       featured: t.arg.boolean(),
       publishDate: t.arg.string(),
     },
     resolve: async (_root, args, ctx) => {
-      requireRole(ctx, "admin");
+      requireAdmin(ctx);
       const updates: Record<string, unknown> = { date_updated: new Date() };
       if (args.title !== undefined && args.title !== null) updates.title = args.title;
       if (args.slug !== undefined && args.slug !== null) updates.slug = args.slug;
       if (args.excerpt !== undefined) updates.excerpt = args.excerpt;
       if (args.content !== undefined) updates.content = args.content;
       if (args.imageId !== undefined) updates.image = args.imageId;
+      if (args.authorId !== undefined) updates.author = args.authorId;
       if (args.tags !== undefined && args.tags !== null) updates.tags = args.tags;
       if (args.category !== undefined) updates.category = args.category;
       if (args.featured !== undefined && args.featured !== null) updates.featured = args.featured;
@@ -153,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;
@@ -169,7 +243,7 @@ builder.mutationField("deleteArticle", (t) =>
       id: t.arg.string({ required: true }),
     },
     resolve: async (_root, args, ctx) => {
-      requireRole(ctx, "admin");
+      requireAdmin(ctx);
       await ctx.db.delete(articles).where(eq(articles.id, args.id));
       return true;
     },

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";
 
@@ -32,7 +36,8 @@ builder.mutationField("login", (t) =>
       const sessionUser = {
         id: user[0].id,
         email: user[0].email,
-        role: user[0].role,
+        role: (user[0].role === "admin" ? "viewer" : user[0].role) as "model" | "viewer",
+        is_admin: user[0].is_admin,
         first_name: user[0].first_name,
         last_name: user[0].last_name,
         artist_name: user[0].artist_name,
@@ -44,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];
     },
@@ -73,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;
     },
   }),
@@ -130,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;
     },
@@ -189,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 } 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,7 +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"));
       if (args.linkedVideoId) conditions.push(eq(recordings.linked_video, args.linkedVideoId));
 
       const limit = args.limit || 50;
@@ -114,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;
@@ -172,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;
@@ -211,10 +251,29 @@ 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");
 
-      await ctx.db
+      if (existing[0].status === "published") {
-        .update(recordings)
+        await gamificationQueue.add("revokePoints", {
-        .set({ status: "archived", date_updated: new Date() })
+          job: "revokePoints",
-        .where(eq(recordings.id, args.id));
+          userId: ctx.currentUser.id,
+          action: "RECORDING_CREATE",
+          recordingId: args.id,
+        });
+        if (existing[0].featured) {
+          await gamificationQueue.add("revokePoints", {
+            job: "revokePoints",
+            userId: ctx.currentUser.id,
+            action: "RECORDING_FEATURED",
+            recordingId: args.id,
+          });
+        }
+        await gamificationQueue.add("checkAchievements", {
+          job: "checkAchievements",
+          userId: ctx.currentUser.id,
+          category: "content",
+        });
+      }
+
+      await ctx.db.delete(recordings).where(eq(recordings.id, args.id));
 
       return true;
     },
@@ -290,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 };
@@ -329,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,8 +2,8 @@ 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 { requireRole } from "../../lib/acl";
+import { requireAdmin } from "../../lib/acl";
 
 builder.queryField("me", (t) =>
   t.field({
@@ -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
@@ -86,32 +88,32 @@ builder.queryField("adminListUsers", (t) =>
       offset: t.arg.int(),
     },
     resolve: async (_root, args, ctx) => {
-      requireRole(ctx, "admin");
+      requireAdmin(ctx);
 
       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 };
@@ -126,17 +128,21 @@ builder.mutationField("adminUpdateUser", (t) =>
     args: {
       userId: t.arg.string({ required: true }),
       role: t.arg.string(),
+      isAdmin: t.arg.boolean(),
       firstName: t.arg.string(),
       lastName: t.arg.string(),
       artistName: t.arg.string(),
       avatarId: t.arg.string(),
       bannerId: t.arg.string(),
+      photoId: t.arg.string(),
     },
     resolve: async (_root, args, ctx) => {
-      requireRole(ctx, "admin");
+      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;
       if (args.lastName !== undefined && args.lastName !== null) updates.last_name = args.lastName;
@@ -144,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();
 
@@ -163,7 +170,7 @@ builder.mutationField("adminDeleteUser", (t) =>
       userId: t.arg.string({ required: true }),
     },
     resolve: async (_root, args, ctx) => {
-      requireRole(ctx, "admin");
+      requireAdmin(ctx);
       if (args.userId === ctx.currentUser!.id) throw new GraphQLError("Cannot delete yourself");
       await ctx.db.delete(users).where(eq(users.id, args.userId));
       return true;
@@ -179,7 +186,7 @@ builder.queryField("adminGetUser", (t) =>
       userId: t.arg.string({ required: true }),
     },
     resolve: async (_root, args, ctx) => {
-      requireRole(ctx, "admin");
+      requireAdmin(ctx);
       const user = await ctx.db.select().from(users).where(eq(users.id, args.userId)).limit(1);
       if (!user[0]) return null;
       const photoRows = await ctx.db
@@ -188,10 +195,11 @@ builder.queryField("adminGetUser", (t) =>
         .leftJoin(files, eq(user_photos.file_id, files.id))
         .where(eq(user_photos.user_id, args.userId))
         .orderBy(user_photos.sort);
-      return {
+      const seen = new Set<string>();
-        ...user[0],
+      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[0], photos };
     },
   }),
 );
@@ -204,7 +212,7 @@ builder.mutationField("adminAddUserPhoto", (t) =>
       fileId: t.arg.string({ required: true }),
     },
     resolve: async (_root, args, ctx) => {
-      requireRole(ctx, "admin");
+      requireAdmin(ctx);
       await ctx.db.insert(user_photos).values({ user_id: args.userId, file_id: args.fileId });
       return true;
     },
@@ -219,7 +227,7 @@ builder.mutationField("adminRemoveUserPhoto", (t) =>
       fileId: t.arg.string({ required: true }),
     },
     resolve: async (_root, args, ctx) => {
-      requireRole(ctx, "admin");
+      requireAdmin(ctx);
       await ctx.db
         .delete(user_photos)
         .where(and(eq(user_photos.user_id, args.userId), eq(user_photos.file_id, args.fileId)));

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 {
-import { requireRole } from "../../lib/acl";
+  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: {
-      requireRole(ctx, "admin");
+      search: t.arg.string(),
-      const rows = await ctx.db.select().from(videos).orderBy(desc(videos.upload_date));
+      premium: t.arg.boolean(),
-      return Promise.all(rows.map((v: any) => enrichVideo(ctx.db, v)));
+      featured: t.arg.boolean(),
+      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(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 };
     },
   }),
 );
@@ -454,7 +551,7 @@ builder.mutationField("createVideo", (t) =>
       uploadDate: t.arg.string(),
     },
     resolve: async (_root, args, ctx) => {
-      requireRole(ctx, "admin");
+      requireAdmin(ctx);
       const inserted = await ctx.db
         .insert(videos)
         .values({
@@ -491,7 +588,7 @@ builder.mutationField("updateVideo", (t) =>
       uploadDate: t.arg.string(),
     },
     resolve: async (_root, args, ctx) => {
-      requireRole(ctx, "admin");
+      requireAdmin(ctx);
       const updates: Record<string, unknown> = {};
       if (args.title !== undefined && args.title !== null) updates.title = args.title;
       if (args.slug !== undefined && args.slug !== null) updates.slug = args.slug;
@@ -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;
@@ -522,7 +619,7 @@ builder.mutationField("deleteVideo", (t) =>
       id: t.arg.string({ required: true }),
     },
     resolve: async (_root, args, ctx) => {
-      requireRole(ctx, "admin");
+      requireAdmin(ctx);
       await ctx.db.delete(videos).where(eq(videos.id, args.id));
       return true;
     },
@@ -537,7 +634,7 @@ builder.mutationField("setVideoModels", (t) =>
       userIds: t.arg.stringList({ required: true }),
     },
     resolve: async (_root, args, ctx) => {
-      requireRole(ctx, "admin");
+      requireAdmin(ctx);
       await ctx.db.delete(video_models).where(eq(video_models.video_id, args.videoId));
       if (args.userIds.length > 0) {
         await ctx.db.insert(video_models).values(

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

@@ -6,7 +6,6 @@ import type {
   Video,
   ModelPhoto,
   Model,
-  ArticleAuthor,
   Article,
   CommentUser,
   Comment,
@@ -53,8 +52,10 @@ export const UserType = builder.objectRef<User>("User").implement({
     description: t.exposeString("description", { nullable: true }),
     tags: t.exposeStringList("tags", { nullable: true }),
     role: t.exposeString("role"),
+    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" }),
   }),
@@ -72,8 +73,10 @@ export const CurrentUserType = builder.objectRef<User>("CurrentUser").implement(
     description: t.exposeString("description", { nullable: true }),
     tags: t.exposeStringList("tags", { nullable: true }),
     role: t.exposeString("role"),
+    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" }),
   }),
@@ -85,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 }),
   }),
 });
 
@@ -131,21 +135,13 @@ 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 }),
   }),
 });
 
-export const ArticleAuthorType = builder.objectRef<ArticleAuthor>("ArticleAuthor").implement({
-  fields: (t) => ({
-    first_name: t.exposeString("first_name", { nullable: true }),
-    last_name: t.exposeString("last_name", { nullable: true }),
-    avatar: t.exposeString("avatar", { nullable: true }),
-    description: t.exposeString("description", { nullable: true }),
-  }),
-});
-
 export const ArticleType = builder.objectRef<Article>("Article").implement({
   fields: (t) => ({
     id: t.exposeString("id"),
@@ -158,7 +154,7 @@ export const ArticleType = builder.objectRef<Article>("Article").implement({
     publish_date: t.expose("publish_date", { type: "DateTime" }),
     category: t.exposeString("category", { nullable: true }),
     featured: t.exposeBoolean("featured", { nullable: true }),
-    author: t.expose("author", { type: ArticleAuthorType, nullable: true }),
+    author: t.expose("author", { type: VideoModelType, nullable: true }),
   }),
 });
 
@@ -337,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({
@@ -346,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"),
@@ -359,10 +484,12 @@ export const AdminUserDetailType = builder
     description: t.exposeString("description", { nullable: true }),
     tags: t.exposeStringList("tags", { nullable: true }),
     role: t.exposeString("role"),
+    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/acl.ts

@@ -1,20 +1,18 @@
 import { GraphQLError } from "graphql";
 import type { Context } from "../graphql/builder";
 
-type UserRole = "viewer" | "model" | "admin";
-
 export function requireAuth(ctx: Context): void {
   if (!ctx.currentUser) throw new GraphQLError("Unauthorized");
 }
 
-export function requireRole(ctx: Context, ...roles: UserRole[]): void {
+export function requireAdmin(ctx: Context): void {
   requireAuth(ctx);
-  if (!roles.includes(ctx.currentUser!.role)) throw new GraphQLError("Forbidden");
+  if (!ctx.currentUser!.is_admin) throw new GraphQLError("Forbidden");
 }
 
 export function requireOwnerOrAdmin(ctx: Context, ownerId: string): void {
   requireAuth(ctx);
-  if (ctx.currentUser!.id !== ownerId && ctx.currentUser!.role !== "admin") {
+  if (ctx.currentUser!.id !== ownerId && !ctx.currentUser!.is_admin) {
     throw new GraphQLError("Forbidden");
   }
 }

packages/backend/src/lib/auth.ts

@@ -3,7 +3,8 @@ import Redis from "ioredis";
 export type SessionUser = {
   id: string;
   email: string;
-  role: "model" | "viewer" | "admin";
+  role: "model" | "viewer";
+  is_admin: boolean;
   first_name: string | null;
   last_name: string | null;
   artist_name: string | null;
@@ -20,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/0001_is_admin.sql

@@ -0,0 +1,3 @@
+ALTER TABLE "users" ADD COLUMN "is_admin" boolean NOT NULL DEFAULT false;--> statement-breakpoint
+UPDATE "users" SET "is_admin" = true WHERE "role" = 'admin';--> statement-breakpoint
+UPDATE "users" SET "role" = 'viewer' WHERE "role" = 'admin';

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

@@ -8,6 +8,27 @@
       "when": 1772645674513,
       "tag": "0000_pale_hellion",
       "breakpoints": true
+    },
+    {
+      "idx": 1,
+      "version": "7",
+      "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,10 +11,11 @@
     "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.577.0",
+    "@lucide/svelte": "^0.561.0",
     "@sveltejs/adapter-node": "^5.5.4",
     "@sveltejs/adapter-static": "^3.0.10",
     "@sveltejs/kit": "^2.53.4",
@@ -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/age-verification-dialog/age-verification-dialog.svelte

@@ -13,7 +13,7 @@
 
   const AGE_VERIFICATION_KEY = "age-verified";
 
-  let isOpen = true;
+  let isOpen = $state(false);
 
   function handleAgeConfirmation() {
     localStorage.setItem(AGE_VERIFICATION_KEY, "true");
@@ -21,9 +21,8 @@
   }
 
   onMount(() => {
-    const storedVerification = localStorage.getItem(AGE_VERIFICATION_KEY);
+    if (localStorage.getItem(AGE_VERIFICATION_KEY) !== "true") {
-    if (storedVerification === "true") {
+      isOpen = true;
-      isOpen = false;
     }
   });
 </script>

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,10 +6,9 @@
   import { logout } from "$lib/services";
   import { goto } from "$app/navigation";
   import { getAssetUrl } from "$lib/api";
-  import LogoutButton from "../logout-button/logout-button.svelte";
-  import Separator from "../ui/separator/separator.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";
 
@@ -39,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])
@@ -48,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">
@@ -57,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 -->
@@ -77,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")}
             >
@@ -109,11 +94,11 @@
               <span class="sr-only">{$_("header.play")}</span>
             </Button>
 
-            {#if authStatus.user?.role === "admin"}
+            {#if authStatus.user?.is_admin}
               <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"
               >
@@ -125,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
@@ -158,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"}`}
@@ -172,41 +183,43 @@
 <!-- Flyout panel -->
 <div
   class={`fixed inset-y-0 left-0 z-50 w-80 max-w-[85vw] bg-card/95 backdrop-blur-xl shadow-2xl shadow-primary/20 border-r border-border/30 transform transition-transform duration-300 ease-in-out lg:hidden overflow-y-auto flex flex-col ${isMobileMenuOpen ? "translate-x-0" : "-translate-x-full"}`}
-  aria-hidden={!isMobileMenuOpen}
+  inert={!isMobileMenuOpen || undefined}
 >
   <!-- 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 Profile Card -->
+    <!-- User card -->
     {#if authStatus.authenticated}
-      <div
+      <div class="flex items-center gap-3 rounded-xl border border-border/40 bg-card/50 px-4 py-3">
-        class="relative overflow-hidden rounded-2xl border border-border/50 bg-gradient-to-br from-card to-card/50 p-4"
+        <Avatar class="h-10 w-10 ring-2 ring-primary/20 shrink-0">
-      >
-        <div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-accent/5"></div>
-        <div class="relative flex items-center gap-3">
-          <Avatar class="h-9 w-9 ring-2 ring-primary/30">
           <AvatarImage
-              src={getAssetUrl(authStatus.user!.avatar, "mini")}
+            src={getAssetUrl(authStatus.user!.avatar, "mini")!}
-              alt={authStatus.user!.artist_name}
+            alt={authStatus.user!.artist_name || authStatus.user!.email}
           />
           <AvatarFallback
-              class="bg-gradient-to-br from-primary to-accent text-primary-foreground font-semibold"
+            class="bg-gradient-to-br from-primary to-accent text-primary-foreground text-sm font-semibold"
           >
-              {getUserInitials(authStatus.user!.artist_name)}
+            {getUserInitials(authStatus.user!.artist_name || authStatus.user!.email)}
           </AvatarFallback>
         </Avatar>
-          <div class="flex flex-1 flex-col min-w-0">
+        <div class="flex flex-col min-w-0 flex-1">
-            <p class="text-sm font-semibold text-foreground truncate">
+          <span class="text-sm font-semibold text-foreground truncate">
             {authStatus.user!.artist_name || authStatus.user!.email.split("@")[0]}
-            </p>
+          </span>
-            <p class="text-xs text-muted-foreground truncate">
+          <span class="text-xs text-muted-foreground truncate">{authStatus.user!.email}</span>
-              {authStatus.user!.email}
-            </p>
-          </div>
         </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}
 
@@ -278,7 +291,7 @@
             <span class="icon-[ri--arrow-right-s-line] h-4 w-4 text-muted-foreground"></span>
           </a>
 
-          {#if authStatus.user?.role === "admin"}
+          {#if authStatus.user?.is_admin}
             <a
               class={`flex items-center gap-3 rounded-xl border px-4 py-3 transition-all duration-200 group hover:border-primary/30 hover:bg-primary/5 ${isActiveLink({ href: "/admin" }) ? "border-primary/40 bg-primary/8" : "border-border/40 bg-card/50"}`}
               href="/admin/users"
@@ -339,22 +352,5 @@
         {/if}
       </div>
     </div>
-
-    {#if authStatus.authenticated}
-      <button
-        class="cursor-pointer flex w-full items-center gap-3 rounded-xl border border-destructive/20 bg-destructive/5 px-4 py-3 transition-all duration-200 hover:bg-destructive/10 hover:border-destructive/30 group"
-        onclick={handleLogout}
-      >
-        <div
-          class="flex h-8 w-8 items-center justify-center rounded-lg bg-destructive/10 group-hover:bg-destructive/20 transition-colors"
-        >
-          <span class="icon-[ri--logout-circle-r-line] h-4 w-4 text-destructive"></span>
-        </div>
-        <div class="flex flex-1 flex-col gap-0.5 text-left">
-          <span class="text-sm font-medium text-foreground">{$_("header.logout")}</span>
-          <span class="text-xs text-muted-foreground">{$_("header.logout_hint")}</span>
-        </div>
-      </button>
-    {/if}
   </div>
 </div>

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

@@ -1,24 +0,0 @@
-<script lang="ts">
-  interface Props {
-    class?: string;
-    size?: string | number;
-  }
-
-  let { class: className = "", size = "24" }: Props = $props();
-</script>
-
-<svg
-  width={size}
-  height={size}
-  viewBox="0 0 512 512"
-  class={className}
-  xmlns="http://www.w3.org/2000/svg"
->
-  <g class="" transform="translate(0,0)" style=""
-    ><path
-      d="M418.813 30.625c-21.178 26.27-49.712 50.982-84.125 70.844-36.778 21.225-75.064 33.62-110.313 38.06a310.317 310.317 0 0 0 6.813 18.25c16.01.277 29.366-.434 36.406-1.5l9.47-1.53 8.436-1.28.22 10.186a307.48 307.48 0 0 1-1.095 18.72l56.625 8.843c.86-.095 1.713-.15 2.563-.157 11.188-.114 21.44 7.29 24.468 18.593.657 2.448.922 4.903.845 7.313 5.972-2.075 11.753-4.305 17.28-6.72l9.595-4.188 2.313 10.22a340.211 340.211 0 0 1 7.375 48.062C438.29 247.836 468.438 225.71 493 197.5c-3.22-36.73-16.154-78.04-39.125-117.813a290.509 290.509 0 0 0-2.22-3.78l-27.56 71.374c5.154.762 10.123 3.158 14.092 7.126 9.81 9.807 9.813 25.69 0 35.5-9.812 9.81-25.722 9.807-35.53 0-8.86-8.858-9.69-22.68-2.532-32.5l38.938-100.844a322.02 322.02 0 0 0-20.25-25.937zM51.842 118.72c-8.46 17.373-15.76 36.198-21.187 56.436-14.108 52.617-13.96 103.682-2.812 143.438 13.3-2.605 26.442-3.96 39.312-4.03 1.855-.012 3.688.02 5.53.06 20.857.48 40.98 4.332 59.97 11.5a355.064 355.064 0 0 1-1.656-34.218c0-27.8 3.135-54.377 9-78.937l2.47-10.407 9.655 4.562c29.467 13.98 66.194 23.424 106.28 25.22 5.136-20.05 8.19-39.78 9.408-58.75-35.198 4.83-75.387 2.766-116.407-8.22-38.363-10.272-72.314-26.78-99.562-46.656zm230.594 82.218c-1.535 10.452-3.615 21.03-6.218 31.687a312.754 312.754 0 0 0 46-3.97 24.98 24.98 0 0 1-1.532-21.748l-38.25-5.97zM105 201.375l4.156 18.22-21.594 4.905c8.75 5.174 13.353 15.703 10.594 26-3.32 12.394-16.045 19.758-28.437 16.438-12.394-3.32-19.76-16.075-16.44-28.47a23.235 23.235 0 0 1 3.126-6.874l-21.062 4.78-4.125-18.218 73.78-16.78zm388.594 22.813c-25.53 25.46-55.306 45.445-86.906 60.5.05 2.397.093 4.8.093 7.218 0 9.188-.354 18.232-1.03 27.125 16.635 1.33 32.045-1.7 45.344-9.374 25.925-14.962 40.608-45.694 42.5-85.47zm-338.844 3c-4.03 19.993-6.33 41.31-6.406 63.593l.125-.342c30.568 10.174 62.622 17.572 95.25 21.375l7.5.875.718 7.5 5.687 60.125-18.625 1.75-2.53-26.75a23.117 23.117 0 0 1-14.845.968c-12.393-3.32-19.76-16.042-16.438-28.436.285-1.06.647-2.08 1.063-3.063a496.627 496.627 0 0 1-57.406-14.53c2.69 49.62 16.154 94.04 36.094 126.656 22.366 36.588 52.13 57.78 83.968 57.78 31.838.003 61.602-21.19 83.97-57.78 19.536-31.96 32.846-75.244 35.905-123.656a499.132 499.132 0 0 1-48.25 11.656c1.914 4.57 2.415 9.78 1.033 14.938-3.322 12.394-16.045 19.758-28.438 16.437a23.01 23.01 0 0 1-2.125-.686l-2.5 26.47-18.594-1.752 5.688-60.125.72-7.5 7.498-.875c29.245-3.407 57.995-9.717 85.657-18.312v-1.594c0-21.573-2.27-42.23-6.064-61.75C351.132 242.653 313.092 250 272.312 250c-43.59 0-83.986-8.658-117.562-22.813zm-87.5 105.968c-10.87.102-21.995 1.22-33.375 3.313 12.695 31.62 33.117 53.07 59 60 16.9 4.523 34.896 2.536 52.813-5.25-4.382-13.89-7.874-28.606-10.344-43.97-21.115-9.623-43.934-14.32-68.094-14.094zm137.5 80.22h130.813c-40.082 44.594-92.623 42.844-130.813 0z"
-      fill-opacity="1"
-      style="fill: currentColor; stroke: #ce47eb; stroke-width: 10px;"
-    ></path></g
-  ></svg
->

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";
-  import PeonyIcon from "../icon/peony-icon.svelte";
-
-  const { hideName = false } = $props();
 </script>
 
-<div class="relative">
+<SexyIcon class="w-12 h-12" />
-  <PeonyIcon class="w-13 h-13 text-black" />
-</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/logout-button/logout-button.svelte

@@ -11,15 +11,17 @@
   interface Props {
     user: User;
     onLogout: () => void;
+    class?: string;
   }
 
-  let { user, onLogout }: Props = $props();
+  let { user, onLogout, class: className = "" }: Props = $props();
 
+  let container: HTMLDivElement;
   let isDragging = $state(false);
   let slidePosition = $state(0);
   let startX = 0;
   let currentX = 0;
-  let maxSlide = 117; // Maximum slide distance
+  let maxSlide = $derived(container ? container.offsetWidth - 40 : 117);
   let threshold = 0.75; // 70% threshold to trigger logout
 
   // Calculate slide progress (0 to 1)
@@ -102,9 +104,10 @@
 </script>
 
 <div
+  bind:this={container}
   class="relative h-10 w-40 rounded-full bg-muted/30 overflow-hidden select-none transition-all duration-300 bg-muted/40 shadow-lg shadow-accent/10 {isDragging
     ? 'cursor-grabbing'
-    : ''}"
+    : ''} {className}"
   style="background: linear-gradient(90deg, 
 		oklch(var(--primary) / 0.3) 0%, 
 		oklch(var(--primary) / 0.3) {(1 - slideProgress) * 100}%, 

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

@@ -0,0 +1,49 @@
+<script lang="ts" module>
+  import { type VariantProps, tv } from "tailwind-variants";
+
+  export const badgeVariants = tv({
+    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: "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:
+          "bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  });
+
+  export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+</script>
+
+<script lang="ts">
+  import type { HTMLAnchorAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "$lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    href,
+    class: className,
+    variant = "default",
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAnchorAttributes> & {
+    variant?: BadgeVariant;
+  } = $props();
+</script>
+
+<svelte:element
+  this={href ? "a" : "span"}
+  bind:this={ref}
+  data-slot="badge"
+  {href}
+  class={cn(badgeVariants({ variant }), className)}
+  {...restProps}
+>
+  {@render children?.()}
+</svelte:element>

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

@@ -0,0 +1,2 @@
+export { default as Badge } from "./badge.svelte";
+export { badgeVariants, type BadgeVariant } from "./badge.svelte";

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

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import type { ComponentProps } from "svelte";
+  import type Calendar from "./calendar.svelte";
+  import CalendarMonthSelect from "./calendar-month-select.svelte";
+  import CalendarYearSelect from "./calendar-year-select.svelte";
+  import { DateFormatter, getLocalTimeZone, type DateValue } from "@internationalized/date";
+
+  let {
+    captionLayout,
+    months,
+    monthFormat,
+    years,
+    yearFormat,
+    month,
+    locale,
+    placeholder = $bindable(),
+    monthIndex = 0,
+  }: {
+    captionLayout: ComponentProps<typeof Calendar>["captionLayout"];
+    months: ComponentProps<typeof CalendarMonthSelect>["months"];
+    monthFormat: ComponentProps<typeof CalendarMonthSelect>["monthFormat"];
+    years: ComponentProps<typeof CalendarYearSelect>["years"];
+    yearFormat: ComponentProps<typeof CalendarYearSelect>["yearFormat"];
+    month: DateValue;
+    placeholder: DateValue | undefined;
+    locale: string;
+    monthIndex: number;
+  } = $props();
+
+  function formatYear(date: DateValue) {
+    const dateObj = date.toDate(getLocalTimeZone());
+    if (typeof yearFormat === "function") return yearFormat(dateObj.getFullYear());
+    return new DateFormatter(locale, { year: yearFormat }).format(dateObj);
+  }
+
+  function formatMonth(date: DateValue) {
+    const dateObj = date.toDate(getLocalTimeZone());
+    if (typeof monthFormat === "function") return monthFormat(dateObj.getMonth() + 1);
+    return new DateFormatter(locale, { month: monthFormat }).format(dateObj);
+  }
+</script>
+
+{#snippet MonthSelect()}
+  <CalendarMonthSelect
+    {months}
+    {monthFormat}
+    value={month.month}
+    onchange={(e) => {
+      if (!placeholder) return;
+      const v = Number.parseInt(e.currentTarget.value);
+      const newPlaceholder = placeholder.set({ month: v });
+      placeholder = newPlaceholder.subtract({ months: monthIndex });
+    }}
+  />
+{/snippet}
+
+{#snippet YearSelect()}
+  <CalendarYearSelect {years} {yearFormat} value={month.year} />
+{/snippet}
+
+{#if captionLayout === "dropdown"}
+  {@render MonthSelect()}
+  {@render YearSelect()}
+{:else if captionLayout === "dropdown-months"}
+  {@render MonthSelect()}
+  {#if placeholder}
+    {formatYear(placeholder)}
+  {/if}
+{:else if captionLayout === "dropdown-years"}
+  {#if placeholder}
+    {formatMonth(placeholder)}
+  {/if}
+  {@render YearSelect()}
+{:else}
+  {formatMonth(month)} {formatYear(month)}
+{/if}

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: CalendarPrimitive.CellProps = $props();
+</script>
+
+<CalendarPrimitive.Cell
+  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,
+  )}
+  {...restProps}
+/>

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

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { buttonVariants } from "$lib/components/ui/button/index.js";
+  import { cn } from "$lib/utils.js";
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: CalendarPrimitive.DayProps = $props();
+</script>
+
+<CalendarPrimitive.Day
+  bind:ref
+  class={cn(
+    buttonVariants({ variant: "ghost" }),
+    "flex size-(--cell-size) flex-col items-center justify-center gap-1 p-0 leading-none font-normal whitespace-nowrap select-none",
+    "[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground [&[data-today][data-disabled]]:text-muted-foreground",
+    "data-[selected]:bg-primary dark:data-[selected]:hover:bg-accent/50 data-[selected]:text-primary-foreground",
+    // Outside months
+    "[&[data-outside-month]:not([data-selected])]:text-muted-foreground [&[data-outside-month]:not([data-selected])]:hover:text-accent-foreground",
+    // Disabled
+    "data-[disabled]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    // Unavailable
+    "data-[unavailable]:text-muted-foreground data-[unavailable]:line-through",
+    // hover
+    "dark:hover:text-accent-foreground",
+    // focus
+    "focus:border-ring focus:ring-ring/50 focus:relative",
+    // inner spans
+    "[&>span]:text-xs [&>span]:opacity-70",
+    className,
+  )}
+  {...restProps}
+/>

packages/frontend/src/lib/components/ui/calendar/calendar-grid-body.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: CalendarPrimitive.GridBodyProps = $props();
+</script>
+
+<CalendarPrimitive.GridBody bind:ref class={cn(className)} {...restProps} />

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: CalendarPrimitive.GridHeadProps = $props();
+</script>
+
+<CalendarPrimitive.GridHead bind:ref class={cn(className)} {...restProps} />

packages/frontend/src/lib/components/ui/calendar/calendar-grid-row.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: CalendarPrimitive.GridRowProps = $props();
+</script>
+
+<CalendarPrimitive.GridRow bind:ref class={cn("flex", className)} {...restProps} />

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: CalendarPrimitive.GridProps = $props();
+</script>
+
+<CalendarPrimitive.Grid
+  bind:ref
+  class={cn("mt-4 flex w-full border-collapse flex-col gap-1", className)}
+  {...restProps}
+/>

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: CalendarPrimitive.HeadCellProps = $props();
+</script>
+
+<CalendarPrimitive.HeadCell
+  bind:ref
+  class={cn(
+    "text-muted-foreground w-(--cell-size) rounded-md text-[0.8rem] font-normal",
+    className,
+  )}
+  {...restProps}
+/>

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: CalendarPrimitive.HeaderProps = $props();
+</script>
+
+<CalendarPrimitive.Header
+  bind:ref
+  class={cn(
+    "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+    className,
+  )}
+  {...restProps}
+/>

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: CalendarPrimitive.HeadingProps = $props();
+</script>
+
+<CalendarPrimitive.Heading
+  bind:ref
+  class={cn("px-(--cell-size) text-sm font-medium", className)}
+  {...restProps}
+/>

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

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+  import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    value,
+    onchange,
+    ...restProps
+  }: WithoutChildrenOrChild<CalendarPrimitive.MonthSelectProps> = $props();
+</script>
+
+<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,
+  )}
+>
+  <CalendarPrimitive.MonthSelect
+    bind:ref
+    class="dark:bg-popover dark:text-popover-foreground absolute inset-0 opacity-0"
+    {...restProps}
+  >
+    {#snippet child({ props, monthItems, selectedMonthItem })}
+      <select {...props} {value} {onchange}>
+        {#each monthItems as monthItem (monthItem.value)}
+          <option
+            value={monthItem.value}
+            selected={value !== undefined
+              ? monthItem.value === value
+              : monthItem.value === selectedMonthItem.value}
+          >
+            {monthItem.label}
+          </option>
+        {/each}
+      </select>
+      <span
+        class="[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
+        aria-hidden="true"
+      >
+        {monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label}
+        <ChevronDownIcon class="size-4" />
+      </span>
+    {/snippet}
+  </CalendarPrimitive.MonthSelect>
+</span>

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { type WithElementRef, cn } from "$lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div {...restProps} bind:this={ref} class={cn("flex flex-col", className)}>
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "$lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  class={cn("relative flex flex-col gap-4 md:flex-row", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,19 @@
+<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<HTMLElement>> = $props();
+</script>
+
+<nav
+  {...restProps}
+  bind:this={ref}
+  class={cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", className)}
+>
+  {@render children?.()}
+</nav>

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

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+  import { buttonVariants, type ButtonVariant } from "$lib/components/ui/button/index.js";
+  import { cn } from "$lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    variant = "ghost",
+    ...restProps
+  }: CalendarPrimitive.NextButtonProps & {
+    variant?: ButtonVariant;
+  } = $props();
+</script>
+
+{#snippet Fallback()}
+  <ChevronRightIcon class="size-4" />
+{/snippet}
+
+<CalendarPrimitive.NextButton
+  bind:ref
+  class={cn(
+    buttonVariants({ variant }),
+    "size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180",
+    className,
+  )}
+  children={children || Fallback}
+  {...restProps}
+/>

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

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
+  import { buttonVariants, type ButtonVariant } from "$lib/components/ui/button/index.js";
+  import { cn } from "$lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    variant = "ghost",
+    ...restProps
+  }: CalendarPrimitive.PrevButtonProps & {
+    variant?: ButtonVariant;
+  } = $props();
+</script>
+
+{#snippet Fallback()}
+  <ChevronLeftIcon class="size-4" />
+{/snippet}
+
+<CalendarPrimitive.PrevButton
+  bind:ref
+  class={cn(
+    buttonVariants({ variant }),
+    "size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180",
+    className,
+  )}
+  children={children || Fallback}
+  {...restProps}
+/>

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

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+  import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    value,
+    ...restProps
+  }: WithoutChildrenOrChild<CalendarPrimitive.YearSelectProps> = $props();
+</script>
+
+<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,
+  )}
+>
+  <CalendarPrimitive.YearSelect
+    bind:ref
+    class="dark:bg-popover dark:text-popover-foreground absolute inset-0 opacity-0"
+    {...restProps}
+  >
+    {#snippet child({ props, yearItems, selectedYearItem })}
+      <select {...props} {value}>
+        {#each yearItems as yearItem (yearItem.value)}
+          <option
+            value={yearItem.value}
+            selected={value !== undefined
+              ? yearItem.value === value
+              : yearItem.value === selectedYearItem.value}
+          >
+            {yearItem.label}
+          </option>
+        {/each}
+      </select>
+      <span
+        class="[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
+        aria-hidden="true"
+      >
+        {yearItems.find((item) => item.value === value)?.label || selectedYearItem.label}
+        <ChevronDownIcon class="size-4" />
+      </span>
+    {/snippet}
+  </CalendarPrimitive.YearSelect>
+</span>

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

@@ -0,0 +1,115 @@
+<script lang="ts">
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import * as Calendar from "./index.js";
+  import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+  import type { ButtonVariant } from "../button/button.svelte";
+  import { isEqualMonth, type DateValue } from "@internationalized/date";
+  import type { Snippet } from "svelte";
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    placeholder = $bindable(),
+    class: className,
+    weekdayFormat = "short",
+    buttonVariant = "ghost",
+    captionLayout = "label",
+    locale = "en-US",
+    months: monthsProp,
+    years,
+    monthFormat: monthFormatProp,
+    yearFormat = "numeric",
+    day,
+    disableDaysOutsideMonth = false,
+    ...restProps
+  }: WithoutChildrenOrChild<CalendarPrimitive.RootProps> & {
+    buttonVariant?: ButtonVariant;
+    captionLayout?: "dropdown" | "dropdown-months" | "dropdown-years" | "label";
+    months?: CalendarPrimitive.MonthSelectProps["months"];
+    years?: CalendarPrimitive.YearSelectProps["years"];
+    monthFormat?: CalendarPrimitive.MonthSelectProps["monthFormat"];
+    yearFormat?: CalendarPrimitive.YearSelectProps["yearFormat"];
+    day?: Snippet<[{ day: DateValue; outsideMonth: boolean }]>;
+  } = $props();
+
+  const monthFormat = $derived.by(() => {
+    if (monthFormatProp) return monthFormatProp;
+    if (captionLayout.startsWith("dropdown")) return "short";
+    return "long";
+  });
+</script>
+
+<!--
+Discriminated Unions + Destructing (required for bindable) do not
+get along, so we shut typescript up by casting `value` to `never`.
+-->
+<CalendarPrimitive.Root
+  bind:value={value as never}
+  bind:ref
+  bind:placeholder
+  {weekdayFormat}
+  {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,
+  )}
+  {locale}
+  {monthFormat}
+  {yearFormat}
+  {...restProps}
+>
+  {#snippet children({ months, weekdays })}
+    <Calendar.Months>
+      <Calendar.Nav>
+        <Calendar.PrevButton variant={buttonVariant} />
+        <Calendar.NextButton variant={buttonVariant} />
+      </Calendar.Nav>
+      {#each months as month, monthIndex (month)}
+        <Calendar.Month>
+          <Calendar.Header>
+            <Calendar.Caption
+              {captionLayout}
+              months={monthsProp}
+              {monthFormat}
+              {years}
+              {yearFormat}
+              month={month.value}
+              bind:placeholder
+              {locale}
+              {monthIndex}
+            />
+          </Calendar.Header>
+          <Calendar.Grid>
+            <Calendar.GridHead>
+              <Calendar.GridRow class="select-none">
+                {#each weekdays as weekday (weekday)}
+                  <Calendar.HeadCell>
+                    {weekday.slice(0, 2)}
+                  </Calendar.HeadCell>
+                {/each}
+              </Calendar.GridRow>
+            </Calendar.GridHead>
+            <Calendar.GridBody>
+              {#each month.weeks as weekDates (weekDates)}
+                <Calendar.GridRow class="mt-2 w-full">
+                  {#each weekDates as date (date)}
+                    <Calendar.Cell {date} month={month.value}>
+                      {#if day}
+                        {@render day({
+                          day: date,
+                          outsideMonth: !isEqualMonth(date, month.value),
+                        })}
+                      {:else}
+                        <Calendar.Day />
+                      {/if}
+                    </Calendar.Cell>
+                  {/each}
+                </Calendar.GridRow>
+              {/each}
+            </Calendar.GridBody>
+          </Calendar.Grid>
+        </Calendar.Month>
+      {/each}
+    </Calendar.Months>
+  {/snippet}
+</CalendarPrimitive.Root>

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

@@ -0,0 +1,40 @@
+import Root from "./calendar.svelte";
+import Cell from "./calendar-cell.svelte";
+import Day from "./calendar-day.svelte";
+import Grid from "./calendar-grid.svelte";
+import Header from "./calendar-header.svelte";
+import Months from "./calendar-months.svelte";
+import GridRow from "./calendar-grid-row.svelte";
+import Heading from "./calendar-heading.svelte";
+import GridBody from "./calendar-grid-body.svelte";
+import GridHead from "./calendar-grid-head.svelte";
+import HeadCell from "./calendar-head-cell.svelte";
+import NextButton from "./calendar-next-button.svelte";
+import PrevButton from "./calendar-prev-button.svelte";
+import MonthSelect from "./calendar-month-select.svelte";
+import YearSelect from "./calendar-year-select.svelte";
+import Month from "./calendar-month.svelte";
+import Nav from "./calendar-nav.svelte";
+import Caption from "./calendar-caption.svelte";
+
+export {
+  Day,
+  Cell,
+  Grid,
+  Header,
+  Months,
+  GridRow,
+  Heading,
+  GridBody,
+  GridHead,
+  HeadCell,
+  NextButton,
+  PrevButton,
+  Nav,
+  Month,
+  YearSelect,
+  MonthSelect,
+  Caption,
+  //
+  Root as Calendar,
+};

packages/frontend/src/lib/components/ui/date-picker/date-picker.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  import { parseDate, type DateValue } from "@internationalized/date";
+  import { Calendar } from "$lib/components/ui/calendar";
+  import * as Popover from "$lib/components/ui/popover";
+  import { Button } from "$lib/components/ui/button";
+
+  let {
+    value = $bindable(""),
+    placeholder = "Pick a date",
+    showTime = true,
+  }: {
+    value?: string;
+    placeholder?: string;
+    showTime?: boolean;
+  } = $props();
+
+  function toCalendarDate(v: string): DateValue | undefined {
+    if (!v) return undefined;
+    try {
+      return parseDate(v.slice(0, 10));
+    } catch {
+      return undefined;
+    }
+  }
+
+  function pad(n: number) {
+    return String(n).padStart(2, "0");
+  }
+
+  let calendarDate = $state<DateValue | undefined>(toCalendarDate(value));
+  let timeStr = $state(value.length >= 16 ? value.slice(11, 16) : "00:00");
+  let open = $state(false);
+
+  $effect(() => {
+    if (calendarDate) {
+      const d = calendarDate;
+      const dateStr = `${d.year}-${pad(d.month)}-${pad(d.day)}`;
+      value = showTime ? `${dateStr}T${timeStr}` : dateStr;
+    } else {
+      value = "";
+    }
+  });
+
+  let displayLabel = $derived.by(() => {
+    if (!calendarDate) return placeholder;
+    const d = calendarDate;
+    const date = new Date(d.year, d.month - 1, d.day);
+    const dateLabel = date.toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    });
+    return showTime ? `${dateLabel} ${timeStr}` : dateLabel;
+  });
+</script>
+
+<Popover.Root bind:open>
+  <Popover.Trigger>
+    {#snippet child({ props })}
+      <Button
+        variant="outline"
+        {...props}
+        class="w-full justify-start font-normal {!calendarDate ? 'text-muted-foreground' : ''}"
+      >
+        <span class="icon-[ri--calendar-line] h-4 w-4 mr-2 shrink-0"></span>
+        {displayLabel}
+      </Button>
+    {/snippet}
+  </Popover.Trigger>
+  <Popover.Content class="w-auto p-0" align="start">
+    <Calendar bind:value={calendarDate} />
+    {#if showTime}
+      <div class="border-t border-border/40 p-3">
+        <input
+          type="time"
+          value={timeStr}
+          oninput={(e) => {
+            timeStr = (e.target as HTMLInputElement).value;
+          }}
+          class="w-full rounded-md border border-input bg-background px-3 py-1.5 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        />
+      </div>
+    {/if}
+  </Popover.Content>
+</Popover.Root>

packages/frontend/src/lib/components/ui/date-picker/index.ts

@@ -0,0 +1 @@
+export { default as DatePicker } from "./date-picker.svelte";

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>