ci: validate auto-deploy after CI hardening (runners + SSH remote)

Empty commit to exercise the full pipeline end-to-end: a freshly re-registered runner picks up the job, deploy.sh fetches origin over the new read-only SSH deploy key, and force_pull:false reuses the cached job image.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

.env.prod.example

@@ -1,14 +1,14 @@
-# Copy to `.env.prod` on the deploy host (CT502) and fill with real secrets.
-# `.env.prod` is gitignored — never commit real credentials.
-
-# Database
-POSTGRES_DB=xip
-POSTGRES_USER=xip
-POSTGRES_PASSWORD=change-me-to-a-strong-secret
-
-# Public origin (baked into the frontend build + used by the WS URL)
-PUBLIC_URL=https://xip.kerboul.me
-
-# Paywall: "true" = open bar (everything free for everyone), "false" = paywall on
-# (free only on localhost, per the README).
-XIP_OPEN_BAR=true
+# Copy to `.env.prod` on the deploy host (CT502) and fill with real secrets.
+# `.env.prod` is gitignored — never commit real credentials.
+
+# Database
+POSTGRES_DB=xip
+POSTGRES_USER=xip
+POSTGRES_PASSWORD=change-me-to-a-strong-secret
+
+# Public origin (baked into the frontend build + used by the WS URL)
+PUBLIC_URL=https://xip.kerboul.me
+
+# Paywall: "true" = open bar (everything free for everyone), "false" = paywall on
+# (free only on localhost, per the README).
+XIP_OPEN_BAR=true

.gitattributes

@@ -1,3 +1,3 @@
-# Shell scripts must keep LF endings or they break with "bad interpreter" on Linux.
-*.sh text eol=lf
-docker-entrypoint.sh text eol=lf
+# Shell scripts must keep LF endings or they break with "bad interpreter" on Linux.
+*.sh text eol=lf
+docker-entrypoint.sh text eol=lf

.gitea/workflows/deploy.yml

@@ -1,35 +1,35 @@
-name: Deploy XIP
-
-# Auto-deploy on every push to main. The runner SSHes into the xip-app CT
-# (Echelon CT502) and runs scripts/deploy.sh, which pulls + rebuilds the stack.
-on:
-  push:
-    branches: [main]
-  workflow_dispatch:
-
-# Serialize deploys: never run two deploys against the CT at the same time
-# (concurrent `docker compose up --build` on the same project races and fails).
-concurrency:
-  group: deploy-xip-prod
-  cancel-in-progress: false
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Deploy over SSH to xip-app
-        env:
-          # Secrets via env (not inlined in the script) so the multi-line key
-          # keeps its newlines and never breaks shell quoting.
-          DEPLOY_HOST: ${{ secrets.XIP_DEPLOY_HOST }}
-          DEPLOY_USER: ${{ secrets.XIP_DEPLOY_USER }}
-          DEPLOY_KEY: ${{ secrets.XIP_DEPLOY_KEY }}
-        run: |
-          set -e
-          command -v ssh >/dev/null 2>&1 || (apt-get update && apt-get install -y --no-install-recommends openssh-client)
-          mkdir -p ~/.ssh
-          printf '%s\n' "$DEPLOY_KEY" > ~/.ssh/id_ed25519
-          chmod 600 ~/.ssh/id_ed25519
-          ssh -i ~/.ssh/id_ed25519 \
-            -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null \
-            "$DEPLOY_USER@$DEPLOY_HOST" 'bash /opt/xip/scripts/deploy.sh'
+name: Deploy XIP
+
+# Auto-deploy on every push to main. The runner SSHes into the xip-app CT
+# (Echelon CT502) and runs scripts/deploy.sh, which pulls + rebuilds the stack.
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+# Serialize deploys: never run two deploys against the CT at the same time
+# (concurrent `docker compose up --build` on the same project races and fails).
+concurrency:
+  group: deploy-xip-prod
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy over SSH to xip-app
+        env:
+          # Secrets via env (not inlined in the script) so the multi-line key
+          # keeps its newlines and never breaks shell quoting.
+          DEPLOY_HOST: ${{ secrets.XIP_DEPLOY_HOST }}
+          DEPLOY_USER: ${{ secrets.XIP_DEPLOY_USER }}
+          DEPLOY_KEY: ${{ secrets.XIP_DEPLOY_KEY }}
+        run: |
+          set -e
+          command -v ssh >/dev/null 2>&1 || (apt-get update && apt-get install -y --no-install-recommends openssh-client)
+          mkdir -p ~/.ssh
+          printf '%s\n' "$DEPLOY_KEY" > ~/.ssh/id_ed25519
+          chmod 600 ~/.ssh/id_ed25519
+          ssh -i ~/.ssh/id_ed25519 \
+            -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null \
+            "$DEPLOY_USER@$DEPLOY_HOST" 'bash /opt/xip/scripts/deploy.sh'

.gitignore

@@ -1,8 +1,8 @@
-node_modules/
-dist/
-.env
-.env.local
-.env.prod
-*.log
-.DS_Store
-Thumbs.db
+node_modules/
+dist/
+.env
+.env.local
+.env.prod
+*.log
+.DS_Store
+Thumbs.db

DEPLOY.md

@@ -1,64 +1,64 @@
-# Déploiement XIP
-
-Production : **https://xip.kerboul.me** — déploiement continu sur push `main`.
-
-## Architecture (pattern Vireli, cluster SENTINEL)
-
-```
-Cloudflare (*.kerboul.me) ─► VPS WireGuard ─► Traefik (CT102, Cerberus)
-                                                  │ Host(`xip.kerboul.me`) → http://192.168.1.242:80
-                                                  ▼
-                                   CT502 « xip-app » (Echelon, Docker host)
-                                   ┌───────────────────────────────────────┐
-                                   │ web (nginx:80)                        │
-                                   │   ├── /          → SPA Vue (statique)  │
-                                   │   ├── /api/      → backend:3000        │
-                                   │   └── /ws        → backend:3000 (WS)   │
-                                   │ backend (bun:3000, Hono + Prisma)      │
-                                   │ postgres:16   redis:7                  │
-                                   └───────────────────────────────────────┘
-```
-
-Origine unique : le front (buildé avec `VITE_API_URL=https://xip.kerboul.me`)
-appelle `/api` et `wss://xip.kerboul.me/ws`, nginx proxifie vers le backend.
-Traefik termine le TLS (Let's Encrypt, DNS challenge Cloudflare).
-
-## CI/CD (Gitea Actions)
-
-`.gitea/workflows/deploy.yml` se déclenche sur push `main` (+ `workflow_dispatch`).
-Le runner (CT121) se connecte en SSH au CT502 et exécute `scripts/deploy.sh`
-(`git reset --hard origin/main` + `docker compose up -d --build`).
-
-Migrations Prisma + seed (idempotent) tournent au démarrage du conteneur backend
-(`backend/docker-entrypoint.sh`).
-
-### Secrets du repo (Gitea → Settings → Actions → Secrets)
-| Secret | Rôle |
-|--------|------|
-| `XIP_DEPLOY_HOST` | IP du CT502 (192.168.1.242) |
-| `XIP_DEPLOY_USER` | utilisateur de déploiement (`deploy`) |
-| `XIP_DEPLOY_KEY`  | clé privée SSH autorisée sur le CT502 |
-
-## Fichiers
-
-| Fichier | Rôle |
-|---------|------|
-| `docker-compose.prod.yml` | stack prod (postgres, redis, backend, web) |
-| `backend/Dockerfile` + `docker-entrypoint.sh` | image backend, migrate+seed au boot |
-| `frontend/Dockerfile` | build Vite → nginx |
-| `deploy/nginx.conf` | reverse proxy single-origin |
-| `scripts/deploy.sh` | script de (re)déploiement sur le CT |
-| `.env.prod` (non commité) | secrets : voir `.env.prod.example` |
-
-## Paywall
-
-`XIP_OPEN_BAR=true` (dans `.env.prod`) = **open bar** : toutes les fonctionnalités
-payantes gratuites pour tout le monde. Mettre `false` pour réactiver le paywall
-(gratuit uniquement en localhost). Logique centralisée dans `backend/src/lib/ip.ts`
-(`isFree()`).
-
-## Redéploiement manuel
-
-```bash
-ssh deploy@192.168.1.242 'bash /opt/xip/scripts/deploy.sh'
-```
+# Déploiement XIP
+
+Production : **https://xip.kerboul.me** — déploiement continu sur push `main`.
+
+## Architecture (pattern Vireli, cluster SENTINEL)
+
+```
+Cloudflare (*.kerboul.me) ─► VPS WireGuard ─► Traefik (CT102, Cerberus)
+                                                  │ Host(`xip.kerboul.me`) → http://192.168.1.242:80
+                                                  ▼
+                                   CT502 « xip-app » (Echelon, Docker host)
+                                   ┌───────────────────────────────────────┐
+                                   │ web (nginx:80)                        │
+                                   │   ├── /          → SPA Vue (statique)  │
+                                   │   ├── /api/      → backend:3000        │
+                                   │   └── /ws        → backend:3000 (WS)   │
+                                   │ backend (bun:3000, Hono + Prisma)      │
+                                   │ postgres:16   redis:7                  │
+                                   └───────────────────────────────────────┘
+```
+
+Origine unique : le front (buildé avec `VITE_API_URL=https://xip.kerboul.me`)
+appelle `/api` et `wss://xip.kerboul.me/ws`, nginx proxifie vers le backend.
+Traefik termine le TLS (Let's Encrypt, DNS challenge Cloudflare).
+
+## CI/CD (Gitea Actions)
+
+`.gitea/workflows/deploy.yml` se déclenche sur push `main` (+ `workflow_dispatch`).
+Le runner (CT121) se connecte en SSH au CT502 et exécute `scripts/deploy.sh`
+(`git reset --hard origin/main` + `docker compose up -d --build`).
+
+Migrations Prisma + seed (idempotent) tournent au démarrage du conteneur backend
+(`backend/docker-entrypoint.sh`).
+
+### Secrets du repo (Gitea → Settings → Actions → Secrets)
+| Secret | Rôle |
+|--------|------|
+| `XIP_DEPLOY_HOST` | IP du CT502 (192.168.1.242) |
+| `XIP_DEPLOY_USER` | utilisateur de déploiement (`deploy`) |
+| `XIP_DEPLOY_KEY`  | clé privée SSH autorisée sur le CT502 |
+
+## Fichiers
+
+| Fichier | Rôle |
+|---------|------|
+| `docker-compose.prod.yml` | stack prod (postgres, redis, backend, web) |
+| `backend/Dockerfile` + `docker-entrypoint.sh` | image backend, migrate+seed au boot |
+| `frontend/Dockerfile` | build Vite → nginx |
+| `deploy/nginx.conf` | reverse proxy single-origin |
+| `scripts/deploy.sh` | script de (re)déploiement sur le CT |
+| `.env.prod` (non commité) | secrets : voir `.env.prod.example` |
+
+## Paywall
+
+`XIP_OPEN_BAR=true` (dans `.env.prod`) = **open bar** : toutes les fonctionnalités
+payantes gratuites pour tout le monde. Mettre `false` pour réactiver le paywall
+(gratuit uniquement en localhost). Logique centralisée dans `backend/src/lib/ip.ts`
+(`isFree()`).
+
+## Redéploiement manuel
+
+```bash
+ssh deploy@192.168.1.242 'bash /opt/xip/scripts/deploy.sh'
+```

LICENSE

@@ -1,11 +1,11 @@
-DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
-Version 2, December 2004
-
-Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
-
-Everyone is permitted to copy and distribute verbatim or modified copies of this license document, and changing it is allowed as long as the name is changed.
-
-DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
-TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
-
-  0. You just DO WHAT THE FUCK YOU WANT TO.
+DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+Version 2, December 2004
+
+Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
+
+Everyone is permitted to copy and distribute verbatim or modified copies of this license document, and changing it is allowed as long as the name is changed.
+
+DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+  0. You just DO WHAT THE FUCK YOU WANT TO.

README.md

@@ -1,35 +1,106 @@
-# XIP
+# XIP — Réseau social « sans modération »
 
-Réseau social à consommer sans modération
+SPA satirique : un chat public en temps réel où **ton pseudo = ton adresse IP**,
+noyé sous les pubs et le merchandising. Catalogue de messages distant, liste
+perso de favoris, statistiques dérivées, marketplace à crédits fictifs, thèmes
+(dont WhatsApp).
 
-## Concept
+🌐 **Application déployée : https://xip.kerboul.me**
 
-Faire un réseau social open sans contrôles ni modération.
-Pas de compte, Pseudo = IP.
-Merchandising à fond.
-Envahit par des Pubs.
+---
+
+## Stack
+
+| Couche | Technologies |
+|--------|--------------|
+| Frontend | Vue 3 (`<script setup>`, Composition API), Vite, TypeScript, vue-router |
+| Backend | Bun, Hono, Prisma, PostgreSQL, Redis (WebSocket temps réel) |
+| Tests | Vitest, @vue/test-utils, happy-dom |
+| Déploiement | Docker, nginx, Traefik, CI Gitea Actions (auto-deploy sur push `main`) |
+
+Pas de framework de composants prêts-à-l'emploi : tout le découpage et le CSS
+sont faits à la main.
+
+---
 
 ## Fonctionnalités
 
-**Gratuit :**
-- Envoyer des messages
-    - contenant du texte (267 charactères)
-    - contenant des fichiers (JPEG, .exe, ...) 1 Mo max
-- Répondre à un message (sous forme de sous-thread)
-- Récupérer mes messages
+- **Chat temps réel** (WebSocket) : messages, réponses en thread, présence,
+  stats live qui défilent.
+- **Explorer** (`/explorer`) : catalogue distant paginé (défilement infini),
+  **recherche debouncée et annulable** (AbortController), filtre.
+- **Détail** d'un message (`/message/:id`) et d'un produit (`/shop/p/:id`) par
+  identifiant d'URL.
+- **Favoris** (`/favoris`) : liste personnelle persistée en localStorage,
+  notation (note + statut + commentaire), reflétée partout (★).
+- **Mes stats** (`/mes-stats`) : synthèse dérivée des favoris (note moyenne,
+  répartition par pays, top auteurs…), mise à jour automatique ; page gardée
+  (inaccessible si aucun favori).
+- **Marketplace** à crédits fictifs : cosmétiques (couleur d'IP, pets, skin du
+  bouton d'envoi), abonnement NoAds, messages riches (HTML/CSS, et JS en iframe
+  sandbox), pièces jointes.
+- **Thèmes** dynamiques (Classique, Bulles, Compact, **WhatsApp**), persistés.
+- **Géolocalisation** des IP (drapeau + ville) sur chaque message.
 
-**Payant :**
-- Acheter des fonctionnalités (Marketplace)
-    - mettre du CSS & HTML dans les messages (taille fixe), pas de script
-    - pas de limite de taille de fichiers
-    - mettre du javascript (très très cher)
-    - "Skins" de ton IP
-    - "Skins" des éléments (boutons, text area, encadré pub, ...)
-    - Choisir sa pub
-    - Retirer les pubs
-    - payer alerte audio générale (consommable, cooldown, durée max mais volume à fond, possibilité de fournir le mp3)
+---
 
-**Si localhost :**
-- Pas de paywall (tout gratuit)
+## Lancer en local
 
+Prérequis : [Bun](https://bun.sh) + Docker (pour Postgres/Redis).
 
+```bash
+bun install
+bun run dev:stack
+```
+
+`dev:stack` lève Postgres + Redis (docker compose), applique les migrations
+Prisma, seede la base, puis démarre le backend (http://localhost:3000) et le
+frontend (http://localhost:5173).
+
+En local, le **paywall est désactivé** (tout gratuit).
+
+---
+
+## Tests
+
+```bash
+bun run --cwd frontend test       # exécution
+bun run --cwd frontend test:cov   # avec couverture
+```
+
+Couvre la logique d'état (favoris, wallet, perks), des fonctions réutilisables
+(parseMeta, debounce, couleur d'IP) et l'interaction de composants (ThemePicker,
+SearchBox). **Couverture ≈ 86 %** sur le code métier ciblé.
+
+## Vérifications
+
+```bash
+bun run --cwd frontend typecheck  # vue-tsc, 0 erreur
+bun run --cwd frontend build      # build de production
+bun run --cwd backend typecheck   # tsc, 0 erreur
+```
+
+---
+
+## Configuration / secrets
+
+Aucun secret dans le code. Copier les exemples committés et renseigner les vraies
+valeurs (les `.env` réels sont gitignorés) :
+
+- `backend/.env.example` → `backend/.env` (dév local)
+- `.env.prod.example` → `.env.prod` (production)
+
+---
+
+## Déploiement
+
+Déploiement continu : tout push sur `main` déclenche la CI Gitea qui rebuild et
+redéploie la stack Docker derrière Traefik. Détails dans **[DEPLOY.md](DEPLOY.md)**.
+
+---
+
+## Auteurs
+
+- Ethan Puyaubreau
+- Raphaël Thieffry
+- Antonin Russac

backend/.env.example

@@ -1,4 +1,4 @@
-DATABASE_URL="postgresql://USER:PASSWORD@localhost:5432/xip"
-REDIS_URL="redis://localhost:6379"
-PORT=3000
-NODE_ENV=development
+DATABASE_URL="postgresql://USER:PASSWORD@localhost:5432/xip"
+REDIS_URL="redis://localhost:6379"
+PORT=3000
+NODE_ENV=development

backend/.gitignore

@@ -1 +1 @@
-uploads/
+uploads/

backend/Dockerfile

@@ -1,22 +1,22 @@
-# XIP backend — Bun + Hono + Prisma.
-# Build context is the repo ROOT (see docker-compose.prod.yml) so we can copy backend/.
-FROM oven/bun:1-debian AS deps
-WORKDIR /app
-COPY backend/package.json ./
-RUN bun install
-
-FROM oven/bun:1-debian AS runtime
-WORKDIR /app
-ENV NODE_ENV=production
-# Prisma's query engine needs openssl + CA certs (generate downloads it over HTTPS).
-RUN apt-get update \
- && apt-get install -y --no-install-recommends openssl ca-certificates \
- && rm -rf /var/lib/apt/lists/*
-COPY --from=deps /app/node_modules ./node_modules
-COPY backend/ ./
-# Generate the Prisma client from the schema (no DB connection required).
-RUN bunx prisma generate \
- && chmod +x docker-entrypoint.sh
-EXPOSE 3000
-# Entrypoint applies migrations + seeds (idempotent) then starts the server.
-ENTRYPOINT ["/app/docker-entrypoint.sh"]
+# XIP backend — Bun + Hono + Prisma.
+# Build context is the repo ROOT (see docker-compose.prod.yml) so we can copy backend/.
+FROM oven/bun:1-debian AS deps
+WORKDIR /app
+COPY backend/package.json ./
+RUN bun install
+
+FROM oven/bun:1-debian AS runtime
+WORKDIR /app
+ENV NODE_ENV=production
+# Prisma's query engine needs openssl + CA certs (generate downloads it over HTTPS).
+RUN apt-get update \
+ && apt-get install -y --no-install-recommends openssl ca-certificates \
+ && rm -rf /var/lib/apt/lists/*
+COPY --from=deps /app/node_modules ./node_modules
+COPY backend/ ./
+# Generate the Prisma client from the schema (no DB connection required).
+RUN bunx prisma generate \
+ && chmod +x docker-entrypoint.sh
+EXPOSE 3000
+# Entrypoint applies migrations + seeds (idempotent) then starts the server.
+ENTRYPOINT ["/app/docker-entrypoint.sh"]

backend/package.json

@@ -1,20 +1,21 @@
-{
-  "name": "xip-backend",
-  "version": "0.0.1",
-  "private": true,
-  "scripts": {
-    "dev": "bun --hot run src/index.ts",
-    "start": "bun run src/index.ts",
-    "build": "bun build src/index.ts --outdir dist --target bun"
-  },
-  "dependencies": {
-    "@prisma/client": "^5.22.0",
-    "hono": "^4.6.0",
-    "ioredis": "^5.4.0"
-  },
-  "devDependencies": {
-    "@types/bun": "latest",
-    "prisma": "^5.22.0",
-    "typescript": "^5.6.0"
-  }
-}
+{
+  "name": "xip-backend",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "bun --hot run src/index.ts",
+    "start": "bun run src/index.ts",
+    "build": "bun build src/index.ts --outdir dist --target bun",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@prisma/client": "^5.22.0",
+    "hono": "^4.6.0",
+    "ioredis": "^5.4.0"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "prisma": "^5.22.0",
+    "typescript": "^5.6.0"
+  }
+}

backend/prisma/migrations/20260529094703_init/migration.sql

@@ -1,13 +1,13 @@
--- CreateTable
-CREATE TABLE "messages" (
-    "id" TEXT NOT NULL,
-    "content" VARCHAR(267) NOT NULL,
-    "authorIp" TEXT NOT NULL,
-    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
-    "parentId" TEXT,
-
-    CONSTRAINT "messages_pkey" PRIMARY KEY ("id")
-);
-
--- AddForeignKey
-ALTER TABLE "messages" ADD CONSTRAINT "messages_parentId_fkey" FOREIGN KEY ("parentId") REFERENCES "messages"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+-- CreateTable
+CREATE TABLE "messages" (
+    "id" TEXT NOT NULL,
+    "content" VARCHAR(267) NOT NULL,
+    "authorIp" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "parentId" TEXT,
+
+    CONSTRAINT "messages_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "messages" ADD CONSTRAINT "messages_parentId_fkey" FOREIGN KEY ("parentId") REFERENCES "messages"("id") ON DELETE SET NULL ON UPDATE CASCADE;

backend/prisma/migrations/20260530194607_economy_ads_attachments_rich/migration.sql

@@ -1,112 +1,112 @@
--- AlterTable
-ALTER TABLE "messages" ADD COLUMN     "richContent" TEXT,
-ADD COLUMN     "richMode" TEXT NOT NULL DEFAULT 'none';
-
--- CreateTable
-CREATE TABLE "wallets" (
-    "ip" TEXT NOT NULL,
-    "balance" INTEGER NOT NULL DEFAULT 0,
-    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
-    "updatedAt" TIMESTAMP(3) NOT NULL,
-
-    CONSTRAINT "wallets_pkey" PRIMARY KEY ("ip")
-);
-
--- CreateTable
-CREATE TABLE "products" (
-    "id" TEXT NOT NULL,
-    "category" TEXT NOT NULL,
-    "name" TEXT NOT NULL,
-    "subtitle" TEXT,
-    "kind" TEXT NOT NULL,
-    "basePrice" INTEGER NOT NULL,
-    "promoPrice" INTEGER,
-    "badge" TEXT,
-    "stockLimit" INTEGER,
-    "stockSold" INTEGER NOT NULL DEFAULT 0,
-    "active" BOOLEAN NOT NULL DEFAULT true,
-    "sortOrder" INTEGER NOT NULL DEFAULT 0,
-    "metaJson" TEXT,
-
-    CONSTRAINT "products_pkey" PRIMARY KEY ("id")
-);
-
--- CreateTable
-CREATE TABLE "purchases" (
-    "id" TEXT NOT NULL,
-    "ip" TEXT NOT NULL,
-    "productId" TEXT,
-    "type" TEXT NOT NULL,
-    "amount" INTEGER NOT NULL,
-    "metaJson" TEXT,
-    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
-
-    CONSTRAINT "purchases_pkey" PRIMARY KEY ("id")
-);
-
--- CreateTable
-CREATE TABLE "entitlements" (
-    "id" TEXT NOT NULL,
-    "ip" TEXT NOT NULL,
-    "kind" TEXT NOT NULL,
-    "active" BOOLEAN NOT NULL DEFAULT true,
-    "expiresAt" TIMESTAMP(3),
-    "metaJson" TEXT,
-    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
-
-    CONSTRAINT "entitlements_pkey" PRIMARY KEY ("id")
-);
-
--- CreateTable
-CREATE TABLE "ads" (
-    "id" TEXT NOT NULL,
-    "brand" TEXT NOT NULL,
-    "subtitle" TEXT,
-    "url" TEXT,
-    "cta" TEXT,
-    "icon" TEXT,
-    "tone" TEXT NOT NULL,
-    "kind" TEXT NOT NULL,
-    "weight" INTEGER NOT NULL DEFAULT 1,
-    "active" BOOLEAN NOT NULL DEFAULT true,
-    "ownerIp" TEXT,
-    "format" TEXT,
-    "imageUrl" TEXT,
-    "expiresAt" TIMESTAMP(3),
-    "impressions" INTEGER NOT NULL DEFAULT 0,
-    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
-
-    CONSTRAINT "ads_pkey" PRIMARY KEY ("id")
-);
-
--- CreateTable
-CREATE TABLE "attachments" (
-    "id" TEXT NOT NULL,
-    "messageId" TEXT,
-    "ip" TEXT NOT NULL,
-    "filename" TEXT NOT NULL,
-    "mimeType" TEXT NOT NULL,
-    "size" INTEGER NOT NULL,
-    "storagePath" TEXT NOT NULL,
-    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
-
-    CONSTRAINT "attachments_pkey" PRIMARY KEY ("id")
-);
-
--- CreateIndex
-CREATE INDEX "purchases_ip_idx" ON "purchases"("ip");
-
--- CreateIndex
-CREATE INDEX "entitlements_ip_idx" ON "entitlements"("ip");
-
--- CreateIndex
-CREATE INDEX "entitlements_ip_kind_idx" ON "entitlements"("ip", "kind");
-
--- CreateIndex
-CREATE INDEX "ads_kind_active_idx" ON "ads"("kind", "active");
-
--- CreateIndex
-CREATE INDEX "attachments_messageId_idx" ON "attachments"("messageId");
-
--- AddForeignKey
-ALTER TABLE "attachments" ADD CONSTRAINT "attachments_messageId_fkey" FOREIGN KEY ("messageId") REFERENCES "messages"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+-- AlterTable
+ALTER TABLE "messages" ADD COLUMN     "richContent" TEXT,
+ADD COLUMN     "richMode" TEXT NOT NULL DEFAULT 'none';
+
+-- CreateTable
+CREATE TABLE "wallets" (
+    "ip" TEXT NOT NULL,
+    "balance" INTEGER NOT NULL DEFAULT 0,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "wallets_pkey" PRIMARY KEY ("ip")
+);
+
+-- CreateTable
+CREATE TABLE "products" (
+    "id" TEXT NOT NULL,
+    "category" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "subtitle" TEXT,
+    "kind" TEXT NOT NULL,
+    "basePrice" INTEGER NOT NULL,
+    "promoPrice" INTEGER,
+    "badge" TEXT,
+    "stockLimit" INTEGER,
+    "stockSold" INTEGER NOT NULL DEFAULT 0,
+    "active" BOOLEAN NOT NULL DEFAULT true,
+    "sortOrder" INTEGER NOT NULL DEFAULT 0,
+    "metaJson" TEXT,
+
+    CONSTRAINT "products_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "purchases" (
+    "id" TEXT NOT NULL,
+    "ip" TEXT NOT NULL,
+    "productId" TEXT,
+    "type" TEXT NOT NULL,
+    "amount" INTEGER NOT NULL,
+    "metaJson" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "purchases_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "entitlements" (
+    "id" TEXT NOT NULL,
+    "ip" TEXT NOT NULL,
+    "kind" TEXT NOT NULL,
+    "active" BOOLEAN NOT NULL DEFAULT true,
+    "expiresAt" TIMESTAMP(3),
+    "metaJson" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "entitlements_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "ads" (
+    "id" TEXT NOT NULL,
+    "brand" TEXT NOT NULL,
+    "subtitle" TEXT,
+    "url" TEXT,
+    "cta" TEXT,
+    "icon" TEXT,
+    "tone" TEXT NOT NULL,
+    "kind" TEXT NOT NULL,
+    "weight" INTEGER NOT NULL DEFAULT 1,
+    "active" BOOLEAN NOT NULL DEFAULT true,
+    "ownerIp" TEXT,
+    "format" TEXT,
+    "imageUrl" TEXT,
+    "expiresAt" TIMESTAMP(3),
+    "impressions" INTEGER NOT NULL DEFAULT 0,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "ads_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "attachments" (
+    "id" TEXT NOT NULL,
+    "messageId" TEXT,
+    "ip" TEXT NOT NULL,
+    "filename" TEXT NOT NULL,
+    "mimeType" TEXT NOT NULL,
+    "size" INTEGER NOT NULL,
+    "storagePath" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "attachments_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "purchases_ip_idx" ON "purchases"("ip");
+
+-- CreateIndex
+CREATE INDEX "entitlements_ip_idx" ON "entitlements"("ip");
+
+-- CreateIndex
+CREATE INDEX "entitlements_ip_kind_idx" ON "entitlements"("ip", "kind");
+
+-- CreateIndex
+CREATE INDEX "ads_kind_active_idx" ON "ads"("kind", "active");
+
+-- CreateIndex
+CREATE INDEX "attachments_messageId_idx" ON "attachments"("messageId");
+
+-- AddForeignKey
+ALTER TABLE "attachments" ADD CONSTRAINT "attachments_messageId_fkey" FOREIGN KEY ("messageId") REFERENCES "messages"("id") ON DELETE CASCADE ON UPDATE CASCADE;

backend/prisma/schema.prisma

@@ -1,130 +1,130 @@
-// This is your Prisma schema file
-// Learn more: https://pris.ly/d/prisma-schema
-
-generator client {
-  provider = "prisma-client-js"
-}
-
-datasource db {
-  provider = "postgresql"
-  url      = env("DATABASE_URL")
-}
-
-model Message {
-  id          String       @id @default(uuid())
-  content     String       @db.VarChar(267)
-  authorIp    String
-  createdAt   DateTime     @default(now())
-  parentId    String?
-  // Rich-message tiers (paid): "none" | "htmlcss" | "js". richContent holds the raw
-  // markup/script, rendered ONLY inside a sandboxed iframe on the client.
-  richMode    String       @default("none")
-  richContent String?      @db.Text
-
-  parent      Message?     @relation("ThreadReplies", fields: [parentId], references: [id])
-  replies     Message[]    @relation("ThreadReplies")
-  attachments Attachment[]
-
-  @@map("messages")
-}
-
-// ── Economy: fictional "crédits XIP", keyed on IP (no accounts) ──────────────
-
-model Wallet {
-  ip        String   @id
-  balance   Int      @default(0) // centi-credits (9.99 "€" => 999)
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
-
-  @@map("wallets")
-}
-
-// Seeded catalogue of purchasable features (faithful to the shop mockups).
-model Product {
-  id         String  @id // slug: "cadre-pub","noads","style-dore","pet","bundle-cosmetic","rich-htmlcss","rich-js","no-file-limit","audio-alert"
-  category   String // "publicite" | "abonnements" | "cosmetiques" | "promotions" | "premium"
-  name       String
-  subtitle   String?
-  kind       String // "ad-frame" | "subscription" | "ip-skin" | "pet" | "bundle" | "rich" | "unlock" | "consumable"
-  basePrice  Int // centi-credits
-  promoPrice Int?
-  badge      String?
-  stockLimit Int? // e.g. 50 for style-dore; null = unlimited
-  stockSold  Int     @default(0)
-  active     Boolean @default(true)
-  sortOrder  Int     @default(0)
-  metaJson   String? @db.Text // options config (durations, formats, pet designs, plans…)
-
-  @@map("products")
-}
-
-// Append-only ledger: every credit movement (top-up, purchase, grant).
-model Purchase {
-  id        String   @id @default(uuid())
-  ip        String
-  productId String?
-  type      String // "topup" | "purchase" | "grant"
-  amount    Int // signed centi-credits: negative = spend, positive = grant
-  metaJson  String?  @db.Text
-  createdAt DateTime @default(now())
-
-  @@index([ip])
-  @@map("purchases")
-}
-
-// What an IP owns. Drives perks (skin/pets/noads), rich unlocks, ad frames, etc.
-model Entitlement {
-  id        String    @id @default(uuid())
-  ip        String
-  kind      String // "noads" | "style-dore" | "pet" | "rich-htmlcss" | "rich-js" | "no-file-limit" | "ad-frame" | "audio-alert" | "element-skin"
-  active    Boolean   @default(true)
-  expiresAt DateTime? // subscriptions / ad-frame duration; null = permanent
-  metaJson  String?   @db.Text // pet: {design,position}; ad-frame: {format,url,days}; etc.
-  createdAt DateTime  @default(now())
-
-  @@index([ip])
-  @@index([ip, kind])
-  @@map("entitlements")
-}
-
-// ── Real ad inventory (replaces the hardcoded AdBand / InlineCasinoAd) ───────
-
-model Ad {
-  id          String    @id @default(uuid())
-  brand       String
-  subtitle    String?
-  url         String?
-  cta         String?
-  icon        String?
-  tone        String // "blue" | "green" | "purple" | "casino" | "user"
-  kind        String // "band" | "casino"
-  weight      Int       @default(1)
-  active      Boolean   @default(true)
-  ownerIp     String? // set when bought via "Cadre de Pub"
-  format      String? // "static" | "gif"
-  imageUrl    String?
-  expiresAt   DateTime?
-  impressions Int       @default(0)
-  createdAt   DateTime  @default(now())
-
-  @@index([kind, active])
-  @@map("ads")
-}
-
-// ── File attachments (free <=1 Mo; paid "no-file-limit" lifts the cap) ───────
-
-model Attachment {
-  id          String   @id @default(uuid())
-  messageId   String?
-  ip          String
-  filename    String
-  mimeType    String
-  size        Int
-  storagePath String
-  createdAt   DateTime @default(now())
-
-  message Message? @relation(fields: [messageId], references: [id], onDelete: Cascade)
-
-  @@index([messageId])
-  @@map("attachments")
-}
+// This is your Prisma schema file
+// Learn more: https://pris.ly/d/prisma-schema
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+model Message {
+  id          String       @id @default(uuid())
+  content     String       @db.VarChar(267)
+  authorIp    String
+  createdAt   DateTime     @default(now())
+  parentId    String?
+  // Rich-message tiers (paid): "none" | "htmlcss" | "js". richContent holds the raw
+  // markup/script, rendered ONLY inside a sandboxed iframe on the client.
+  richMode    String       @default("none")
+  richContent String?      @db.Text
+
+  parent      Message?     @relation("ThreadReplies", fields: [parentId], references: [id])
+  replies     Message[]    @relation("ThreadReplies")
+  attachments Attachment[]
+
+  @@map("messages")
+}
+
+// ── Economy: fictional "crédits XIP", keyed on IP (no accounts) ──────────────
+
+model Wallet {
+  ip        String   @id
+  balance   Int      @default(0) // centi-credits (9.99 "€" => 999)
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  @@map("wallets")
+}
+
+// Seeded catalogue of purchasable features (faithful to the shop mockups).
+model Product {
+  id         String  @id // slug: "cadre-pub","noads","style-dore","pet","bundle-cosmetic","rich-htmlcss","rich-js","no-file-limit","audio-alert"
+  category   String // "publicite" | "abonnements" | "cosmetiques" | "promotions" | "premium"
+  name       String
+  subtitle   String?
+  kind       String // "ad-frame" | "subscription" | "ip-skin" | "pet" | "bundle" | "rich" | "unlock" | "consumable"
+  basePrice  Int // centi-credits
+  promoPrice Int?
+  badge      String?
+  stockLimit Int? // e.g. 50 for style-dore; null = unlimited
+  stockSold  Int     @default(0)
+  active     Boolean @default(true)
+  sortOrder  Int     @default(0)
+  metaJson   String? @db.Text // options config (durations, formats, pet designs, plans…)
+
+  @@map("products")
+}
+
+// Append-only ledger: every credit movement (top-up, purchase, grant).
+model Purchase {
+  id        String   @id @default(uuid())
+  ip        String
+  productId String?
+  type      String // "topup" | "purchase" | "grant"
+  amount    Int // signed centi-credits: negative = spend, positive = grant
+  metaJson  String?  @db.Text
+  createdAt DateTime @default(now())
+
+  @@index([ip])
+  @@map("purchases")
+}
+
+// What an IP owns. Drives perks (skin/pets/noads), rich unlocks, ad frames, etc.
+model Entitlement {
+  id        String    @id @default(uuid())
+  ip        String
+  kind      String // "noads" | "style-dore" | "pet" | "rich-htmlcss" | "rich-js" | "no-file-limit" | "ad-frame" | "audio-alert" | "element-skin"
+  active    Boolean   @default(true)
+  expiresAt DateTime? // subscriptions / ad-frame duration; null = permanent
+  metaJson  String?   @db.Text // pet: {design,position}; ad-frame: {format,url,days}; etc.
+  createdAt DateTime  @default(now())
+
+  @@index([ip])
+  @@index([ip, kind])
+  @@map("entitlements")
+}
+
+// ── Real ad inventory (replaces the hardcoded AdBand / InlineCasinoAd) ───────
+
+model Ad {
+  id          String    @id @default(uuid())
+  brand       String
+  subtitle    String?
+  url         String?
+  cta         String?
+  icon        String?
+  tone        String // "blue" | "green" | "purple" | "casino" | "user"
+  kind        String // "band" | "casino"
+  weight      Int       @default(1)
+  active      Boolean   @default(true)
+  ownerIp     String? // set when bought via "Cadre de Pub"
+  format      String? // "static" | "gif"
+  imageUrl    String?
+  expiresAt   DateTime?
+  impressions Int       @default(0)
+  createdAt   DateTime  @default(now())
+
+  @@index([kind, active])
+  @@map("ads")
+}
+
+// ── File attachments (free <=1 Mo; paid "no-file-limit" lifts the cap) ───────
+
+model Attachment {
+  id          String   @id @default(uuid())
+  messageId   String?
+  ip          String
+  filename    String
+  mimeType    String
+  size        Int
+  storagePath String
+  createdAt   DateTime @default(now())
+
+  message Message? @relation(fields: [messageId], references: [id], onDelete: Cascade)
+
+  @@index([messageId])
+  @@map("attachments")
+}

backend/prisma/seed.ts

@@ -1,282 +1,282 @@
-import { PrismaClient } from "@prisma/client";
-
-const prisma = new PrismaClient();
-
-// ── Marketplace catalogue (faithful to the shop mockups) ────────────────────
-// Prices are centi-credits (mockup € → credits): 9.99 → 999.
-const PRODUCTS = [
-  {
-    id: "cadre-pub",
-    category: "publicite",
-    name: "Cadre de Pub",
-    subtitle: "1 000 impressions garanties · 130×180 px · lien cliquable",
-    kind: "ad-frame",
-    basePrice: 1500,
-    promoPrice: 999,
-    badge: "-33% FLASH PROMO",
-    sortOrder: 10,
-    metaJson: JSON.stringify({
-      durations: [
-        { days: 7, extra: 0 },
-        { days: 14, extra: 800 },
-        { days: 30, extra: 2000 },
-      ],
-      formats: [
-        { id: "static", label: "Image statique", extra: 0 },
-        { id: "gif", label: "GIF animé", extra: 300 },
-      ],
-    }),
-  },
-  {
-    id: "noads",
-    category: "abonnements",
-    name: "Abonnement NoAds",
-    subtitle: "Supprime toutes les pubs du chat",
-    kind: "subscription",
-    basePrice: 499,
-    badge: "POPULAIRE",
-    sortOrder: 20,
-    metaJson: JSON.stringify({
-      plans: [
-        { id: "monthly", label: "Mensuel", price: 499 },
-        { id: "annual", label: "Annuel", price: 3999 },
-      ],
-    }),
-  },
-  {
-    id: "style-dore",
-    category: "cosmetiques",
-    name: "Style Doré",
-    subtitle: "Ton IP en or brillant, visible de tous",
-    kind: "ip-skin",
-    basePrice: 999,
-    badge: "LIMITÉ 50 ex.",
-    stockLimit: 50,
-    sortOrder: 30,
-    metaJson: JSON.stringify({ variant: "gold" }),
-  },
-  {
-    id: "pet",
-    category: "cosmetiques",
-    name: "Pet de Nom",
-    subtitle: "Un petit élément décoratif autour de ton IP",
-    kind: "pet",
-    basePrice: 799,
-    badge: "NOUVEAU",
-    sortOrder: 40,
-    metaJson: JSON.stringify({
-      designs: [
-        { id: "coeur", char: "♥" },
-        { id: "etoile", char: "★" },
-        { id: "diamant", char: "♦" },
-        { id: "trefle", char: "♣" },
-        { id: "couronne", char: "♚" },
-        { id: "crane", char: "☠" },
-        { id: "eclair", char: "⚡" },
-        { id: "fleur", char: "✿" },
-        { id: "note", char: "♫" },
-        { id: "feu", char: "🔥" },
-      ],
-      positions: ["left", "right", "both"],
-    }),
-  },
-  {
-    id: "bundle-cosmetic",
-    category: "promotions",
-    name: "Pack Cosmétique",
-    subtitle: "Style Doré + 1 Pet au choix",
-    kind: "bundle",
-    basePrice: 1798,
-    promoPrice: 1499,
-    badge: "-3 CR",
-    sortOrder: 50,
-    metaJson: JSON.stringify({ includes: ["style-dore", "pet"] }),
-  },
-  {
-    // id == entitlement kind, so the "unlock" branch grants "element-skin".
-    id: "element-skin",
-    category: "cosmetiques",
-    name: "Skin d'éléments",
-    subtitle: "Relooke ta barre de saisie et ton bouton d'envoi",
-    kind: "unlock",
-    basePrice: 599,
-    sortOrder: 45,
-    metaJson: JSON.stringify({}),
-  },
-  {
-    id: "rich-htmlcss",
-    category: "premium",
-    name: "Messages HTML / CSS",
-    subtitle: "Mets en forme tes messages (sans script)",
-    kind: "rich",
-    basePrice: 2999,
-    sortOrder: 60,
-    metaJson: JSON.stringify({}),
-  },
-  {
-    id: "rich-js",
-    category: "premium",
-    name: "Messages JavaScript",
-    subtitle: "Scripts interactifs (isolés). TRÈS cher.",
-    kind: "rich",
-    basePrice: 19999,
-    badge: "TRÈS TRÈS CHER",
-    sortOrder: 70,
-    metaJson: JSON.stringify({}),
-  },
-  {
-    id: "no-file-limit",
-    category: "premium",
-    name: "Fichiers illimités",
-    subtitle: "Plus de limite de 1 Mo sur tes pièces jointes",
-    kind: "unlock",
-    basePrice: 1499,
-    sortOrder: 80,
-    metaJson: JSON.stringify({}),
-  },
-  {
-    id: "audio-alert",
-    category: "premium",
-    name: "Alerte audio générale",
-    subtitle: "Fais hurler un son chez tout le monde (cooldown)",
-    kind: "consumable",
-    basePrice: 999,
-    badge: "CONSOMMABLE",
-    sortOrder: 90,
-    metaJson: JSON.stringify({ cooldownMs: 60000, maxDurationMs: 5000 }),
-  },
-  // ── Cosmetics: IP color + send button skins ──────────────────────────────
-  {
-    id: "ip-colors",
-    category: "cosmetiques",
-    name: "Palette IP",
-    subtitle: "Personnalise la couleur de ton adresse IP dans le chat",
-    kind: "unlock",
-    basePrice: 299,
-    sortOrder: 46,
-    metaJson: JSON.stringify({}),
-  },
-  {
-    id: "send-skin-honker",
-    category: "cosmetiques",
-    name: "Doigt d'honneur",
-    subtitle: "Bouton d'envoi qui exprime tout",
-    kind: "send-skin",
-    basePrice: 149,
-    sortOrder: 47,
-    metaJson: JSON.stringify({ char: "🖕", label: "Doigt d'honneur" }),
-  },
-  {
-    id: "send-skin-skull",
-    category: "cosmetiques",
-    name: "Crâne",
-    subtitle: "Envoyer avec style... macabre",
-    kind: "send-skin",
-    basePrice: 149,
-    sortOrder: 48,
-    metaJson: JSON.stringify({ char: "💀", label: "Crâne" }),
-  },
-  {
-    id: "send-skin-rocket",
-    category: "cosmetiques",
-    name: "Fusée",
-    subtitle: "Tes messages décollent",
-    kind: "send-skin",
-    basePrice: 149,
-    sortOrder: 49,
-    metaJson: JSON.stringify({ char: "🚀", label: "Fusée" }),
-  },
-  {
-    id: "send-skin-ghost",
-    category: "cosmetiques",
-    name: "Fantôme",
-    subtitle: "Boo !",
-    kind: "send-skin",
-    basePrice: 149,
-    sortOrder: 50,
-    metaJson: JSON.stringify({ char: "👻", label: "Fantôme" }),
-  },
-  {
-    id: "send-skin-bomb",
-    category: "cosmetiques",
-    name: "Bombe",
-    subtitle: "Message explosif",
-    kind: "send-skin",
-    basePrice: 149,
-    sortOrder: 51,
-    metaJson: JSON.stringify({ char: "💣", label: "Bombe" }),
-  },
-  {
-    id: "send-skin-sword",
-    category: "cosmetiques",
-    name: "Épée",
-    subtitle: "Tranche le silence",
-    kind: "send-skin",
-    basePrice: 149,
-    sortOrder: 52,
-    metaJson: JSON.stringify({ char: "⚔️", label: "Épée" }),
-  },
-] as const;
-
-// ── Ad inventory (the 4 hardcoded joke ads, now real data) ──────────────────
-const ADS = [
-  { brand: "NOVA", subtitle: "STORE 2026", url: "https://nova-store.io", cta: "DÉCOUVRIR", icon: "🛒", tone: "blue", kind: "band", weight: 1 },
-  { brand: "APEX GEAR", subtitle: "Gaming Setup", url: "https://apex-gear.com", cta: "ACHETER", icon: "🎮", tone: "green", kind: "band", weight: 1 },
-  { brand: "SHIELDVPN", subtitle: "Sécurité totale", url: "https://shieldvpn.net", cta: "ESSAI GRATUIT", icon: "🔒", tone: "purple", kind: "band", weight: 1 },
-  { brand: "CASINO LUCKY", subtitle: "OFFRE EXCLUSIVE · +200% · 500€ max", url: "https://casino-lucky.bet", cta: "JOUER MAINTENANT", icon: "♠", tone: "casino", kind: "casino", weight: 1 },
-] as const;
-
-async function seedProducts() {
-  for (const p of PRODUCTS) {
-    await prisma.product.upsert({
-      where: { id: p.id },
-      create: p as any,
-      update: p as any,
-    });
-  }
-  console.log(`✅  ${PRODUCTS.length} produits upsertés.`);
-}
-
-async function seedAds() {
-  for (const a of ADS) {
-    // Idempotent on brand: only seed the canonical (non-user) ads once.
-    const existing = await prisma.ad.findFirst({ where: { brand: a.brand, ownerIp: null } });
-    if (existing) {
-      await prisma.ad.update({ where: { id: existing.id }, data: a as any });
-    } else {
-      await prisma.ad.create({ data: a as any });
-    }
-  }
-  console.log(`✅  ${ADS.length} pubs upsertées.`);
-}
-
-async function seedMessages() {
-  const count = await prisma.message.count();
-  if (count > 0) {
-    console.log("⏭️  Messages déjà présents, seed messages ignoré.");
-    return;
-  }
-  const root1 = await prisma.message.create({
-    data: {
-      content: "Bienvenue sur XIP — le réseau social sans filtre ni compte.",
-      authorIp: "1.2.3.4",
-    },
-  });
-  await prisma.message.create({
-    data: { content: "Pas de compte, ton IP c'est toi.", authorIp: "5.6.7.8" },
-  });
-  await prisma.message.create({
-    data: { content: "Réponse au premier message !", authorIp: "9.10.11.12", parentId: root1.id },
-  });
-  console.log("✅  3 messages de démo créés.");
-}
-
-async function main() {
-  await seedProducts();
-  await seedAds();
-  await seedMessages();
-}
-
-main()
-  .catch(console.error)
-  .finally(() => prisma.$disconnect());
+import { PrismaClient } from "@prisma/client";
+
+const prisma = new PrismaClient();
+
+// ── Marketplace catalogue (faithful to the shop mockups) ────────────────────
+// Prices are centi-credits (mockup € → credits): 9.99 → 999.
+const PRODUCTS = [
+  {
+    id: "cadre-pub",
+    category: "publicite",
+    name: "Cadre de Pub",
+    subtitle: "1 000 impressions garanties · 130×180 px · lien cliquable",
+    kind: "ad-frame",
+    basePrice: 1500,
+    promoPrice: 999,
+    badge: "-33% FLASH PROMO",
+    sortOrder: 10,
+    metaJson: JSON.stringify({
+      durations: [
+        { days: 7, extra: 0 },
+        { days: 14, extra: 800 },
+        { days: 30, extra: 2000 },
+      ],
+      formats: [
+        { id: "static", label: "Image statique", extra: 0 },
+        { id: "gif", label: "GIF animé", extra: 300 },
+      ],
+    }),
+  },
+  {
+    id: "noads",
+    category: "abonnements",
+    name: "Abonnement NoAds",
+    subtitle: "Supprime toutes les pubs du chat",
+    kind: "subscription",
+    basePrice: 499,
+    badge: "POPULAIRE",
+    sortOrder: 20,
+    metaJson: JSON.stringify({
+      plans: [
+        { id: "monthly", label: "Mensuel", price: 499 },
+        { id: "annual", label: "Annuel", price: 3999 },
+      ],
+    }),
+  },
+  {
+    id: "style-dore",
+    category: "cosmetiques",
+    name: "Style Doré",
+    subtitle: "Ton IP en or brillant, visible de tous",
+    kind: "ip-skin",
+    basePrice: 999,
+    badge: "LIMITÉ 50 ex.",
+    stockLimit: 50,
+    sortOrder: 30,
+    metaJson: JSON.stringify({ variant: "gold" }),
+  },
+  {
+    id: "pet",
+    category: "cosmetiques",
+    name: "Pet de Nom",
+    subtitle: "Un petit élément décoratif autour de ton IP",
+    kind: "pet",
+    basePrice: 799,
+    badge: "NOUVEAU",
+    sortOrder: 40,
+    metaJson: JSON.stringify({
+      designs: [
+        { id: "coeur", char: "♥" },
+        { id: "etoile", char: "★" },
+        { id: "diamant", char: "♦" },
+        { id: "trefle", char: "♣" },
+        { id: "couronne", char: "♚" },
+        { id: "crane", char: "☠" },
+        { id: "eclair", char: "⚡" },
+        { id: "fleur", char: "✿" },
+        { id: "note", char: "♫" },
+        { id: "feu", char: "🔥" },
+      ],
+      positions: ["left", "right", "both"],
+    }),
+  },
+  {
+    id: "bundle-cosmetic",
+    category: "promotions",
+    name: "Pack Cosmétique",
+    subtitle: "Style Doré + 1 Pet au choix",
+    kind: "bundle",
+    basePrice: 1798,
+    promoPrice: 1499,
+    badge: "-3 CR",
+    sortOrder: 50,
+    metaJson: JSON.stringify({ includes: ["style-dore", "pet"] }),
+  },
+  {
+    // id == entitlement kind, so the "unlock" branch grants "element-skin".
+    id: "element-skin",
+    category: "cosmetiques",
+    name: "Skin d'éléments",
+    subtitle: "Relooke ta barre de saisie et ton bouton d'envoi",
+    kind: "unlock",
+    basePrice: 599,
+    sortOrder: 45,
+    metaJson: JSON.stringify({}),
+  },
+  {
+    id: "rich-htmlcss",
+    category: "premium",
+    name: "Messages HTML / CSS",
+    subtitle: "Mets en forme tes messages (sans script)",
+    kind: "rich",
+    basePrice: 2999,
+    sortOrder: 60,
+    metaJson: JSON.stringify({}),
+  },
+  {
+    id: "rich-js",
+    category: "premium",
+    name: "Messages JavaScript",
+    subtitle: "Scripts interactifs (isolés). TRÈS cher.",
+    kind: "rich",
+    basePrice: 19999,
+    badge: "TRÈS TRÈS CHER",
+    sortOrder: 70,
+    metaJson: JSON.stringify({}),
+  },
+  {
+    id: "no-file-limit",
+    category: "premium",
+    name: "Fichiers illimités",
+    subtitle: "Plus de limite de 1 Mo sur tes pièces jointes",
+    kind: "unlock",
+    basePrice: 1499,
+    sortOrder: 80,
+    metaJson: JSON.stringify({}),
+  },
+  {
+    id: "audio-alert",
+    category: "premium",
+    name: "Alerte audio générale",
+    subtitle: "Fais hurler un son chez tout le monde (cooldown)",
+    kind: "consumable",
+    basePrice: 999,
+    badge: "CONSOMMABLE",
+    sortOrder: 90,
+    metaJson: JSON.stringify({ cooldownMs: 60000, maxDurationMs: 5000 }),
+  },
+  // ── Cosmetics: IP color + send button skins ──────────────────────────────
+  {
+    id: "ip-colors",
+    category: "cosmetiques",
+    name: "Palette IP",
+    subtitle: "Personnalise la couleur de ton adresse IP dans le chat",
+    kind: "unlock",
+    basePrice: 299,
+    sortOrder: 46,
+    metaJson: JSON.stringify({}),
+  },
+  {
+    id: "send-skin-honker",
+    category: "cosmetiques",
+    name: "Doigt d'honneur",
+    subtitle: "Bouton d'envoi qui exprime tout",
+    kind: "send-skin",
+    basePrice: 149,
+    sortOrder: 47,
+    metaJson: JSON.stringify({ char: "🖕", label: "Doigt d'honneur" }),
+  },
+  {
+    id: "send-skin-skull",
+    category: "cosmetiques",
+    name: "Crâne",
+    subtitle: "Envoyer avec style... macabre",
+    kind: "send-skin",
+    basePrice: 149,
+    sortOrder: 48,
+    metaJson: JSON.stringify({ char: "💀", label: "Crâne" }),
+  },
+  {
+    id: "send-skin-rocket",
+    category: "cosmetiques",
+    name: "Fusée",
+    subtitle: "Tes messages décollent",
+    kind: "send-skin",
+    basePrice: 149,
+    sortOrder: 49,
+    metaJson: JSON.stringify({ char: "🚀", label: "Fusée" }),
+  },
+  {
+    id: "send-skin-ghost",
+    category: "cosmetiques",
+    name: "Fantôme",
+    subtitle: "Boo !",
+    kind: "send-skin",
+    basePrice: 149,
+    sortOrder: 50,
+    metaJson: JSON.stringify({ char: "👻", label: "Fantôme" }),
+  },
+  {
+    id: "send-skin-bomb",
+    category: "cosmetiques",
+    name: "Bombe",
+    subtitle: "Message explosif",
+    kind: "send-skin",
+    basePrice: 149,
+    sortOrder: 51,
+    metaJson: JSON.stringify({ char: "💣", label: "Bombe" }),
+  },
+  {
+    id: "send-skin-sword",
+    category: "cosmetiques",
+    name: "Épée",
+    subtitle: "Tranche le silence",
+    kind: "send-skin",
+    basePrice: 149,
+    sortOrder: 52,
+    metaJson: JSON.stringify({ char: "⚔️", label: "Épée" }),
+  },
+] as const;
+
+// ── Ad inventory (the 4 hardcoded joke ads, now real data) ──────────────────
+const ADS = [
+  { brand: "NOVA", subtitle: "STORE 2026", url: "https://nova-store.io", cta: "DÉCOUVRIR", icon: "🛒", tone: "blue", kind: "band", weight: 1 },
+  { brand: "APEX GEAR", subtitle: "Gaming Setup", url: "https://apex-gear.com", cta: "ACHETER", icon: "🎮", tone: "green", kind: "band", weight: 1 },
+  { brand: "SHIELDVPN", subtitle: "Sécurité totale", url: "https://shieldvpn.net", cta: "ESSAI GRATUIT", icon: "🔒", tone: "purple", kind: "band", weight: 1 },
+  { brand: "CASINO LUCKY", subtitle: "OFFRE EXCLUSIVE · +200% · 500€ max", url: "https://casino-lucky.bet", cta: "JOUER MAINTENANT", icon: "♠", tone: "casino", kind: "casino", weight: 1 },
+] as const;
+
+async function seedProducts() {
+  for (const p of PRODUCTS) {
+    await prisma.product.upsert({
+      where: { id: p.id },
+      create: p as any,
+      update: p as any,
+    });
+  }
+  console.log(`✅  ${PRODUCTS.length} produits upsertés.`);
+}
+
+async function seedAds() {
+  for (const a of ADS) {
+    // Idempotent on brand: only seed the canonical (non-user) ads once.
+    const existing = await prisma.ad.findFirst({ where: { brand: a.brand, ownerIp: null } });
+    if (existing) {
+      await prisma.ad.update({ where: { id: existing.id }, data: a as any });
+    } else {
+      await prisma.ad.create({ data: a as any });
+    }
+  }
+  console.log(`✅  ${ADS.length} pubs upsertées.`);
+}
+
+async function seedMessages() {
+  const count = await prisma.message.count();
+  if (count > 0) {
+    console.log("⏭️  Messages déjà présents, seed messages ignoré.");
+    return;
+  }
+  const root1 = await prisma.message.create({
+    data: {
+      content: "Bienvenue sur XIP — le réseau social sans filtre ni compte.",
+      authorIp: "1.2.3.4",
+    },
+  });
+  await prisma.message.create({
+    data: { content: "Pas de compte, ton IP c'est toi.", authorIp: "5.6.7.8" },
+  });
+  await prisma.message.create({
+    data: { content: "Réponse au premier message !", authorIp: "9.10.11.12", parentId: root1.id },
+  });
+  console.log("✅  3 messages de démo créés.");
+}
+
+async function main() {
+  await seedProducts();
+  await seedAds();
+  await seedMessages();
+}
+
+main()
+  .catch(console.error)
+  .finally(() => prisma.$disconnect());

backend/src/index.ts

@@ -1,57 +1,57 @@
-import { Hono } from "hono";
-import { cors } from "hono/cors";
-import { logger } from "hono/logger";
-import messagesRoute from "./routes/messages";
-import walletRoute from "./routes/wallet";
-import shopRoute from "./routes/shop";
-import perksRoute from "./routes/perks";
-import uploadsRoute from "./routes/uploads";
-import adsRoute from "./routes/ads";
-import alertRoute from "./routes/alert";
-import { wsHandler, websocket } from "./realtime";
-import { recordIp, initStats } from "./lib/stats";
-import { initImpressionTotal, reconcileImpressions } from "./lib/ads";
-import { getClientIp } from "./lib/ip";
-
-const app = new Hono();
-
-// Backfill persistent counters from the DB on first boot (idempotent).
-void initStats();
-void initImpressionTotal();
-// Periodically fold Redis impression counters into the DB.
-setInterval(() => void reconcileImpressions(), 30_000);
-
-app.use("*", logger());
-app.use(
-  "*",
-  cors({
-    origin: (origin) => origin ?? "*",
-    allowMethods: ["GET", "POST", "OPTIONS"],
-    allowHeaders: ["Content-Type"],
-  })
-);
-
-// Count every IP that passes through the server (HyperLogLog, approximate).
-app.use("*", async (c, next) => {
-  void recordIp(getClientIp(c));
-  await next();
-});
-
-app.get("/health", (c) => c.json({ status: "ok" }));
-
-// Realtime stats + live message feed.
-app.get("/ws", wsHandler);
-
-app.route("/api/messages", messagesRoute);
-app.route("/api/wallet", walletRoute);
-app.route("/api/shop", shopRoute);
-app.route("/api/perks", perksRoute);
-app.route("/api/uploads", uploadsRoute);
-app.route("/api/ads", adsRoute);
-app.route("/api/alert", alertRoute);
-
-export default {
-  port: Number(process.env.PORT) || 3000,
-  fetch: app.fetch,
-  websocket,
-};
+import { Hono } from "hono";
+import { cors } from "hono/cors";
+import { logger } from "hono/logger";
+import messagesRoute from "./routes/messages";
+import walletRoute from "./routes/wallet";
+import shopRoute from "./routes/shop";
+import perksRoute from "./routes/perks";
+import uploadsRoute from "./routes/uploads";
+import adsRoute from "./routes/ads";
+import alertRoute from "./routes/alert";
+import { wsHandler, websocket } from "./realtime";
+import { recordIp, initStats } from "./lib/stats";
+import { initImpressionTotal, reconcileImpressions } from "./lib/ads";
+import { getClientIp } from "./lib/ip";
+
+const app = new Hono();
+
+// Backfill persistent counters from the DB on first boot (idempotent).
+void initStats();
+void initImpressionTotal();
+// Periodically fold Redis impression counters into the DB.
+setInterval(() => void reconcileImpressions(), 30_000);
+
+app.use("*", logger());
+app.use(
+  "*",
+  cors({
+    origin: (origin) => origin ?? "*",
+    allowMethods: ["GET", "POST", "OPTIONS"],
+    allowHeaders: ["Content-Type"],
+  })
+);
+
+// Count every IP that passes through the server (HyperLogLog, approximate).
+app.use("*", async (c, next) => {
+  void recordIp(getClientIp(c));
+  await next();
+});
+
+app.get("/health", (c) => c.json({ status: "ok" }));
+
+// Realtime stats + live message feed.
+app.get("/ws", wsHandler);
+
+app.route("/api/messages", messagesRoute);
+app.route("/api/wallet", walletRoute);
+app.route("/api/shop", shopRoute);
+app.route("/api/perks", perksRoute);
+app.route("/api/uploads", uploadsRoute);
+app.route("/api/ads", adsRoute);
+app.route("/api/alert", alertRoute);
+
+export default {
+  port: Number(process.env.PORT) || 3000,
+  fetch: app.fetch,
+  websocket,
+};

backend/src/lib/ads.ts

@@ -1,71 +1,71 @@
-import { prisma } from "./prisma";
-import { redis } from "./redis";
-
-/**
- * Ad inventory access + impression counting.
- *
- * Active, non-expired ads are served by kind ("band" | "casino"). Impressions
- * are counted cheaply in Redis (xip:ad:impressions:<id> + a global total) and
- * periodically reconciled into Ad.impressions for durability.
- */
-
-const IMP_PREFIX = "xip:ad:impressions:";
-const IMP_TOTAL = "xip:money:impressions_total";
-
-export async function listActiveAds(kind: "band" | "casino") {
-  const now = new Date();
-  const ads = await prisma.ad.findMany({
-    where: { kind, active: true },
-    orderBy: { createdAt: "asc" },
-  });
-  return ads.filter((a) => !a.expiresAt || a.expiresAt >= now);
-}
-
-/** Record N impressions for a set of ad ids (best-effort, Redis only). */
-export async function recordImpressions(ids: string[]): Promise<void> {
-  if (!ids.length) return;
-  const pipe = redis.pipeline();
-  for (const id of ids) pipe.incr(IMP_PREFIX + id);
-  pipe.incrby(IMP_TOTAL, ids.length);
-  await pipe.exec().catch(() => {});
-}
-
-/** Total impressions across all ads (for the money counter). */
-export async function getImpressionTotal(): Promise<number> {
-  const v = await redis.get(IMP_TOTAL).catch(() => "0");
-  return Number(v ?? 0);
-}
-
-/**
- * Periodically fold the Redis per-ad impression counters into the DB so the
- * Ad.impressions column stays roughly current (and survives a Redis flush).
- */
-export async function reconcileImpressions(): Promise<void> {
-  try {
-    const ads = await prisma.ad.findMany({ select: { id: true } });
-    for (const { id } of ads) {
-      const key = IMP_PREFIX + id;
-      const v = await redis.get(key).catch(() => null);
-      const n = Number(v ?? 0);
-      if (n > 0) {
-        await prisma.ad.update({ where: { id }, data: { impressions: n } }).catch(() => {});
-      }
-    }
-  } catch {
-    /* best-effort */
-  }
-}
-
-/** Backfill the Redis impression total from the DB on first boot. */
-export async function initImpressionTotal(): Promise<void> {
-  const exists = await redis.exists(IMP_TOTAL).catch(() => 0);
-  if (exists) return;
-  const agg = await prisma.ad.aggregate({ _sum: { impressions: true } }).catch(() => null);
-  const sum = agg?._sum.impressions ?? 0;
-  if (sum > 0) await redis.set(IMP_TOTAL, String(sum)).catch(() => {});
-  // Also seed per-ad keys so reconcile doesn't clobber DB values with 0.
-  const ads = await prisma.ad.findMany({ select: { id: true, impressions: true } }).catch(() => []);
-  for (const a of ads) {
-    if (a.impressions > 0) await redis.set(IMP_PREFIX + a.id, String(a.impressions)).catch(() => {});
-  }
-}
+import { prisma } from "./prisma";
+import { redis } from "./redis";
+
+/**
+ * Ad inventory access + impression counting.
+ *
+ * Active, non-expired ads are served by kind ("band" | "casino"). Impressions
+ * are counted cheaply in Redis (xip:ad:impressions:<id> + a global total) and
+ * periodically reconciled into Ad.impressions for durability.
+ */
+
+const IMP_PREFIX = "xip:ad:impressions:";
+const IMP_TOTAL = "xip:money:impressions_total";
+
+export async function listActiveAds(kind: "band" | "casino") {
+  const now = new Date();
+  const ads = await prisma.ad.findMany({
+    where: { kind, active: true },
+    orderBy: { createdAt: "asc" },
+  });
+  return ads.filter((a) => !a.expiresAt || a.expiresAt >= now);
+}
+
+/** Record N impressions for a set of ad ids (best-effort, Redis only). */
+export async function recordImpressions(ids: string[]): Promise<void> {
+  if (!ids.length) return;
+  const pipe = redis.pipeline();
+  for (const id of ids) pipe.incr(IMP_PREFIX + id);
+  pipe.incrby(IMP_TOTAL, ids.length);
+  await pipe.exec().catch(() => {});
+}
+
+/** Total impressions across all ads (for the money counter). */
+export async function getImpressionTotal(): Promise<number> {
+  const v = await redis.get(IMP_TOTAL).catch(() => "0");
+  return Number(v ?? 0);
+}
+
+/**
+ * Periodically fold the Redis per-ad impression counters into the DB so the
+ * Ad.impressions column stays roughly current (and survives a Redis flush).
+ */
+export async function reconcileImpressions(): Promise<void> {
+  try {
+    const ads = await prisma.ad.findMany({ select: { id: true } });
+    for (const { id } of ads) {
+      const key = IMP_PREFIX + id;
+      const v = await redis.get(key).catch(() => null);
+      const n = Number(v ?? 0);
+      if (n > 0) {
+        await prisma.ad.update({ where: { id }, data: { impressions: n } }).catch(() => {});
+      }
+    }
+  } catch {
+    /* best-effort */
+  }
+}
+
+/** Backfill the Redis impression total from the DB on first boot. */
+export async function initImpressionTotal(): Promise<void> {
+  const exists = await redis.exists(IMP_TOTAL).catch(() => 0);
+  if (exists) return;
+  const agg = await prisma.ad.aggregate({ _sum: { impressions: true } }).catch(() => null);
+  const sum = agg?._sum.impressions ?? 0;
+  if (sum > 0) await redis.set(IMP_TOTAL, String(sum)).catch(() => {});
+  // Also seed per-ad keys so reconcile doesn't clobber DB values with 0.
+  const ads = await prisma.ad.findMany({ select: { id: true, impressions: true } }).catch(() => []);
+  for (const a of ads) {
+    if (a.impressions > 0) await redis.set(IMP_PREFIX + a.id, String(a.impressions)).catch(() => {});
+  }
+}

backend/src/lib/catalog.ts

@@ -1,314 +1,314 @@
-import { prisma } from "./prisma";
-import { spend, getWallet, InsufficientCreditsError } from "./wallet";
-import { isFree } from "./ip";
-import { invalidatePerks, getPerksForIp } from "./perks";
-
-/**
- * Marketplace catalogue + purchase engine.
- *
- * Prices are centi-credits (mockup € → credits). The server is the ONLY
- * authority on price, stock, and per-IP limits — the client never decides.
- */
-
-export interface PurchaseOptions {
-  plan?: "monthly" | "annual"; // subscription
-  durationDays?: number; // ad-frame
-  format?: "static" | "gif"; // ad-frame
-  url?: string; // ad-frame destination
-  petDesign?: string; // pet slug
-  petChar?: string; // pet glyph
-  petPosition?: "left" | "right" | "both";
-}
-
-export interface PurchaseResult {
-  ok: true;
-  productId: string;
-  pricePaid: number;
-  balance: number;
-  entitlementKinds: string[];
-}
-
-export class PurchaseError extends Error {
-  status: number;
-  constructor(message: string, status = 400) {
-    super(message);
-    this.name = "PurchaseError";
-    this.status = status;
-  }
-}
-
-const DAY_MS = 24 * 60 * 60 * 1000;
-
-/** Effective unit price for a product given options (promo + add-ons). */
-function effectivePrice(product: any, options: PurchaseOptions): number {
-  let price = product.promoPrice ?? product.basePrice;
-  let meta: any = {};
-  try {
-    meta = product.metaJson ? JSON.parse(product.metaJson) : {};
-  } catch {
-    meta = {};
-  }
-
-  if (product.kind === "subscription") {
-    const plan = (meta.plans ?? []).find((p: any) => p.id === (options.plan ?? "monthly"));
-    if (plan) price = plan.price;
-  }
-  if (product.kind === "ad-frame") {
-    const dur = (meta.durations ?? []).find(
-      (d: any) => d.days === (options.durationDays ?? 7)
-    );
-    const fmt = (meta.formats ?? []).find(
-      (f: any) => f.id === (options.format ?? "static")
-    );
-    price += (dur?.extra ?? 0) + (fmt?.extra ?? 0);
-  }
-  return price;
-}
-
-export async function listProducts(category?: string) {
-  return prisma.product.findMany({
-    where: { active: true, ...(category ? { category } : {}) },
-    orderBy: [{ sortOrder: "asc" }, { name: "asc" }],
-  });
-}
-
-export function getProduct(id: string) {
-  return prisma.product.findUnique({ where: { id } });
-}
-
-/** All entitlements an IP owns (active), for "Mes achats". */
-export async function getEntitlements(ip: string) {
-  const now = new Date();
-  const rows = await prisma.entitlement.findMany({
-    where: { ip, active: true },
-    orderBy: { createdAt: "desc" },
-  });
-  return rows.filter((e) => !e.expiresAt || e.expiresAt >= now);
-}
-
-async function countActiveEntitlements(ip: string, kind: string): Promise<number> {
-  const now = new Date();
-  const rows = await prisma.entitlement.findMany({ where: { ip, kind, active: true } });
-  return rows.filter((e) => !e.expiresAt || e.expiresAt >= now).length;
-}
-
-/**
- * Buy a product. Enforces per-IP limits + stock, spends credits atomically,
- * grants the entitlement(s). Returns the new balance and granted kinds.
- * Side-effect: caller should bust perks cache + broadcast (done in the route).
- */
-export async function purchase(
-  ip: string,
-  productId: string,
-  options: PurchaseOptions = {}
-): Promise<{ result: PurchaseResult; visiblePerkChanged: boolean; adCreated: boolean }> {
-  const product = await getProduct(productId);
-  if (!product || !product.active) throw new PurchaseError("Produit introuvable", 404);
-
-  const free = isFree(ip);
-  const price = effectivePrice(product, options);
-
-  // Resolve which entitlement kind(s) this grants + per-IP limit checks.
-  const grants: { kind: string; expiresAt?: Date; meta?: any }[] = [];
-  let visiblePerkChanged = false;
-  let adCreated = false;
-
-  switch (product.kind) {
-    case "subscription": {
-      // NoAds: 1 active max.
-      if ((await countActiveEntitlements(ip, "noads")) >= 1)
-        throw new PurchaseError("Tu as déjà un abonnement NoAds actif", 409);
-      const plan = options.plan ?? "monthly";
-      const days = plan === "annual" ? 365 : 30;
-      grants.push({ kind: "noads", expiresAt: new Date(Date.now() + days * DAY_MS), meta: { plan } });
-      break;
-    }
-    case "ip-skin": {
-      // Style Doré: 1 active max + global stock cap.
-      if ((await countActiveEntitlements(ip, "style-dore")) >= 1)
-        throw new PurchaseError("Tu possèdes déjà le Style Doré", 409);
-      grants.push({ kind: "style-dore", meta: { variant: "gold" } });
-      visiblePerkChanged = true;
-      break;
-    }
-    case "pet": {
-      const char = options.petChar ?? "♥";
-      grants.push({
-        kind: "pet",
-        meta: { design: options.petDesign ?? "coeur", char, position: options.petPosition ?? "left" },
-      });
-      visiblePerkChanged = true;
-      break;
-    }
-    case "ad-frame": {
-      if ((await countActiveEntitlements(ip, "ad-frame")) >= 1)
-        throw new PurchaseError("Tu as déjà un cadre de pub actif", 409);
-      const days = options.durationDays ?? 7;
-      grants.push({
-        kind: "ad-frame",
-        expiresAt: new Date(Date.now() + days * DAY_MS),
-        meta: { format: options.format ?? "static", url: options.url ?? "", days },
-      });
-      break;
-    }
-    case "rich": {
-      const kind = product.id === "rich-js" ? "rich-js" : "rich-htmlcss";
-      if ((await countActiveEntitlements(ip, kind)) >= 1)
-        throw new PurchaseError("Déjà débloqué", 409);
-      grants.push({ kind });
-      break;
-    }
-    case "unlock": {
-      // no-file-limit, element-skin, etc. — slug == kind.
-      if ((await countActiveEntitlements(ip, product.id)) >= 1)
-        throw new PurchaseError("Déjà débloqué", 409);
-      grants.push({ kind: product.id });
-      if (product.id === "element-skin" || product.id === "ip-colors") visiblePerkChanged = false; // viewer-scoped
-      break;
-    }
-    case "consumable": {
-      // audio-alert: grant the entitlement once; firing is a separate action.
-      if ((await countActiveEntitlements(ip, "audio-alert")) < 1) {
-        grants.push({ kind: "audio-alert" });
-      } else {
-        // Already owned — buying again is a harmless top-up; just record it.
-        grants.push({ kind: "audio-alert" });
-      }
-      break;
-    }
-    case "send-skin": {
-      if ((await countActiveEntitlements(ip, product.id)) >= 1)
-        throw new PurchaseError("Déjà débloqué", 409);
-      let skinMeta: any = {};
-      try { skinMeta = product.metaJson ? JSON.parse(product.metaJson) : {}; } catch {}
-      grants.push({ kind: product.id, meta: skinMeta });
-      break;
-    }
-    case "bundle": {
-      // Cosmetic bundle: Style Doré + 1 pet.
-      if ((await countActiveEntitlements(ip, "style-dore")) < 1)
-        grants.push({ kind: "style-dore", meta: { variant: "gold" } });
-      if ((await countActiveEntitlements(ip, "pet")) < 3) {
-        const char = options.petChar ?? "★";
-        grants.push({
-          kind: "pet",
-          meta: { design: options.petDesign ?? "etoile", char, position: options.petPosition ?? "left" },
-        });
-      }
-      if (grants.length === 0)
-        throw new PurchaseError("Tu possèdes déjà ce que contient le pack", 409);
-      visiblePerkChanged = true;
-      break;
-    }
-    default:
-      throw new PurchaseError("Type de produit non géré", 400);
-  }
-
-  // Stock check for limited products (Style Doré). Done transactionally with the
-  // spend so we can never oversell the 50-unit cap under concurrency.
-  let balance = 0;
-  try {
-    balance = await prisma.$transaction(async (tx) => {
-      if (product.stockLimit != null) {
-        const fresh = await tx.product.findUnique({ where: { id: product.id } });
-        if (!fresh) throw new PurchaseError("Produit introuvable", 404);
-        if (fresh.stockSold >= fresh.stockLimit)
-          throw new PurchaseError("Stock épuisé", 409);
-        await tx.product.update({
-          where: { id: product.id },
-          data: { stockSold: { increment: 1 } },
-        });
-      }
-
-      // Spend (skips real deduction for localhost free mode).
-      if (!free && price > 0) {
-        const w = await tx.wallet.upsert({
-          where: { ip },
-          create: { ip, balance: 0 },
-          update: {},
-        });
-        if (w.balance < price) throw new InsufficientCreditsError();
-        const updated = await tx.wallet.update({
-          where: { ip },
-          data: { balance: { decrement: price } },
-        });
-        await tx.purchase.create({
-          data: { ip, type: "purchase", amount: -price, productId: product.id, metaJson: JSON.stringify(options) },
-        });
-        // Grant entitlements inside the tx too.
-        for (const g of grants) {
-          await tx.entitlement.create({
-            data: { ip, kind: g.kind, expiresAt: g.expiresAt ?? null, metaJson: g.meta ? JSON.stringify(g.meta) : null },
-          });
-        }
-        return updated.balance;
-      }
-
-      // Free (localhost) or zero-price: record purchase + grants, no deduction.
-      await tx.purchase.create({
-        data: { ip, type: "purchase", amount: 0, productId: product.id, metaJson: JSON.stringify(options) },
-      });
-      for (const g of grants) {
-        await tx.entitlement.create({
-          data: { ip, kind: g.kind, expiresAt: g.expiresAt ?? null, metaJson: g.meta ? JSON.stringify(g.meta) : null },
-        });
-      }
-      const w = await tx.wallet.findUnique({ where: { ip } });
-      return w?.balance ?? 0;
-    });
-  } catch (e) {
-    if (e instanceof InsufficientCreditsError)
-      throw new PurchaseError("Crédits insuffisants", 402);
-    throw e;
-  }
-
-  // Bump the global credits-spent money counter (outside the tx; best-effort).
-  if (!free && price > 0) {
-    const { redis } = await import("./redis");
-    void redis.incrby("xip:money:credits_spent", price).catch(() => {});
-  }
-
-  // Ad-frame purchase => create a real Ad row that enters rotation (Phase 7).
-  const adGrant = grants.find((g) => g.kind === "ad-frame");
-  if (adGrant) {
-    await prisma.ad
-      .create({
-        data: {
-          brand: "VOTRE PUB",
-          subtitle: "Espace acheté",
-          url: adGrant.meta?.url || null,
-          cta: "VOIR",
-          icon: "📣",
-          tone: "user",
-          kind: "band",
-          weight: 3,
-          active: true,
-          ownerIp: ip,
-          format: adGrant.meta?.format ?? "static",
-          expiresAt: adGrant.expiresAt ?? null,
-        },
-      })
-      .catch(() => {});
-    adCreated = true;
-  }
-
-  const balanceView = free ? (await getWallet(ip)).balance : balance;
-
-  return {
-    result: {
-      ok: true,
-      productId: product.id,
-      pricePaid: free ? 0 : price,
-      balance: balanceView,
-      entitlementKinds: grants.map((g) => g.kind),
-    },
-    visiblePerkChanged,
-    adCreated,
-  };
-}
-
-/** Recompute + cache perks after a purchase (caller broadcasts). */
-export async function refreshPerks(ip: string) {
-  await invalidatePerks(ip);
-  return getPerksForIp(ip);
-}
+import { prisma } from "./prisma";
+import { spend, getWallet, InsufficientCreditsError } from "./wallet";
+import { isFree } from "./ip";
+import { invalidatePerks, getPerksForIp } from "./perks";
+
+/**
+ * Marketplace catalogue + purchase engine.
+ *
+ * Prices are centi-credits (mockup € → credits). The server is the ONLY
+ * authority on price, stock, and per-IP limits — the client never decides.
+ */
+
+export interface PurchaseOptions {
+  plan?: "monthly" | "annual"; // subscription
+  durationDays?: number; // ad-frame
+  format?: "static" | "gif"; // ad-frame
+  url?: string; // ad-frame destination
+  petDesign?: string; // pet slug
+  petChar?: string; // pet glyph
+  petPosition?: "left" | "right" | "both";
+}
+
+export interface PurchaseResult {
+  ok: true;
+  productId: string;
+  pricePaid: number;
+  balance: number;
+  entitlementKinds: string[];
+}
+
+export class PurchaseError extends Error {
+  status: number;
+  constructor(message: string, status = 400) {
+    super(message);
+    this.name = "PurchaseError";
+    this.status = status;
+  }
+}
+
+const DAY_MS = 24 * 60 * 60 * 1000;
+
+/** Effective unit price for a product given options (promo + add-ons). */
+function effectivePrice(product: any, options: PurchaseOptions): number {
+  let price = product.promoPrice ?? product.basePrice;
+  let meta: any = {};
+  try {
+    meta = product.metaJson ? JSON.parse(product.metaJson) : {};
+  } catch {
+    meta = {};
+  }
+
+  if (product.kind === "subscription") {
+    const plan = (meta.plans ?? []).find((p: any) => p.id === (options.plan ?? "monthly"));
+    if (plan) price = plan.price;
+  }
+  if (product.kind === "ad-frame") {
+    const dur = (meta.durations ?? []).find(
+      (d: any) => d.days === (options.durationDays ?? 7)
+    );
+    const fmt = (meta.formats ?? []).find(
+      (f: any) => f.id === (options.format ?? "static")
+    );
+    price += (dur?.extra ?? 0) + (fmt?.extra ?? 0);
+  }
+  return price;
+}
+
+export async function listProducts(category?: string) {
+  return prisma.product.findMany({
+    where: { active: true, ...(category ? { category } : {}) },
+    orderBy: [{ sortOrder: "asc" }, { name: "asc" }],
+  });
+}
+
+export function getProduct(id: string) {
+  return prisma.product.findUnique({ where: { id } });
+}
+
+/** All entitlements an IP owns (active), for "Mes achats". */
+export async function getEntitlements(ip: string) {
+  const now = new Date();
+  const rows = await prisma.entitlement.findMany({
+    where: { ip, active: true },
+    orderBy: { createdAt: "desc" },
+  });
+  return rows.filter((e) => !e.expiresAt || e.expiresAt >= now);
+}
+
+async function countActiveEntitlements(ip: string, kind: string): Promise<number> {
+  const now = new Date();
+  const rows = await prisma.entitlement.findMany({ where: { ip, kind, active: true } });
+  return rows.filter((e) => !e.expiresAt || e.expiresAt >= now).length;
+}
+
+/**
+ * Buy a product. Enforces per-IP limits + stock, spends credits atomically,
+ * grants the entitlement(s). Returns the new balance and granted kinds.
+ * Side-effect: caller should bust perks cache + broadcast (done in the route).
+ */
+export async function purchase(
+  ip: string,
+  productId: string,
+  options: PurchaseOptions = {}
+): Promise<{ result: PurchaseResult; visiblePerkChanged: boolean; adCreated: boolean }> {
+  const product = await getProduct(productId);
+  if (!product || !product.active) throw new PurchaseError("Produit introuvable", 404);
+
+  const free = isFree(ip);
+  const price = effectivePrice(product, options);
+
+  // Resolve which entitlement kind(s) this grants + per-IP limit checks.
+  const grants: { kind: string; expiresAt?: Date; meta?: any }[] = [];
+  let visiblePerkChanged = false;
+  let adCreated = false;
+
+  switch (product.kind) {
+    case "subscription": {
+      // NoAds: 1 active max.
+      if ((await countActiveEntitlements(ip, "noads")) >= 1)
+        throw new PurchaseError("Tu as déjà un abonnement NoAds actif", 409);
+      const plan = options.plan ?? "monthly";
+      const days = plan === "annual" ? 365 : 30;
+      grants.push({ kind: "noads", expiresAt: new Date(Date.now() + days * DAY_MS), meta: { plan } });
+      break;
+    }
+    case "ip-skin": {
+      // Style Doré: 1 active max + global stock cap.
+      if ((await countActiveEntitlements(ip, "style-dore")) >= 1)
+        throw new PurchaseError("Tu possèdes déjà le Style Doré", 409);
+      grants.push({ kind: "style-dore", meta: { variant: "gold" } });
+      visiblePerkChanged = true;
+      break;
+    }
+    case "pet": {
+      const char = options.petChar ?? "♥";
+      grants.push({
+        kind: "pet",
+        meta: { design: options.petDesign ?? "coeur", char, position: options.petPosition ?? "left" },
+      });
+      visiblePerkChanged = true;
+      break;
+    }
+    case "ad-frame": {
+      if ((await countActiveEntitlements(ip, "ad-frame")) >= 1)
+        throw new PurchaseError("Tu as déjà un cadre de pub actif", 409);
+      const days = options.durationDays ?? 7;
+      grants.push({
+        kind: "ad-frame",
+        expiresAt: new Date(Date.now() + days * DAY_MS),
+        meta: { format: options.format ?? "static", url: options.url ?? "", days },
+      });
+      break;
+    }
+    case "rich": {
+      const kind = product.id === "rich-js" ? "rich-js" : "rich-htmlcss";
+      if ((await countActiveEntitlements(ip, kind)) >= 1)
+        throw new PurchaseError("Déjà débloqué", 409);
+      grants.push({ kind });
+      break;
+    }
+    case "unlock": {
+      // no-file-limit, element-skin, etc. — slug == kind.
+      if ((await countActiveEntitlements(ip, product.id)) >= 1)
+        throw new PurchaseError("Déjà débloqué", 409);
+      grants.push({ kind: product.id });
+      if (product.id === "element-skin" || product.id === "ip-colors") visiblePerkChanged = false; // viewer-scoped
+      break;
+    }
+    case "consumable": {
+      // audio-alert: grant the entitlement once; firing is a separate action.
+      if ((await countActiveEntitlements(ip, "audio-alert")) < 1) {
+        grants.push({ kind: "audio-alert" });
+      } else {
+        // Already owned — buying again is a harmless top-up; just record it.
+        grants.push({ kind: "audio-alert" });
+      }
+      break;
+    }
+    case "send-skin": {
+      if ((await countActiveEntitlements(ip, product.id)) >= 1)
+        throw new PurchaseError("Déjà débloqué", 409);
+      let skinMeta: any = {};
+      try { skinMeta = product.metaJson ? JSON.parse(product.metaJson) : {}; } catch {}
+      grants.push({ kind: product.id, meta: skinMeta });
+      break;
+    }
+    case "bundle": {
+      // Cosmetic bundle: Style Doré + 1 pet.
+      if ((await countActiveEntitlements(ip, "style-dore")) < 1)
+        grants.push({ kind: "style-dore", meta: { variant: "gold" } });
+      if ((await countActiveEntitlements(ip, "pet")) < 3) {
+        const char = options.petChar ?? "★";
+        grants.push({
+          kind: "pet",
+          meta: { design: options.petDesign ?? "etoile", char, position: options.petPosition ?? "left" },
+        });
+      }
+      if (grants.length === 0)
+        throw new PurchaseError("Tu possèdes déjà ce que contient le pack", 409);
+      visiblePerkChanged = true;
+      break;
+    }
+    default:
+      throw new PurchaseError("Type de produit non géré", 400);
+  }
+
+  // Stock check for limited products (Style Doré). Done transactionally with the
+  // spend so we can never oversell the 50-unit cap under concurrency.
+  let balance = 0;
+  try {
+    balance = await prisma.$transaction(async (tx) => {
+      if (product.stockLimit != null) {
+        const fresh = await tx.product.findUnique({ where: { id: product.id } });
+        if (!fresh) throw new PurchaseError("Produit introuvable", 404);
+        if (fresh.stockLimit != null && fresh.stockSold >= fresh.stockLimit)
+          throw new PurchaseError("Stock épuisé", 409);
+        await tx.product.update({
+          where: { id: product.id },
+          data: { stockSold: { increment: 1 } },
+        });
+      }
+
+      // Spend (skips real deduction for localhost free mode).
+      if (!free && price > 0) {
+        const w = await tx.wallet.upsert({
+          where: { ip },
+          create: { ip, balance: 0 },
+          update: {},
+        });
+        if (w.balance < price) throw new InsufficientCreditsError();
+        const updated = await tx.wallet.update({
+          where: { ip },
+          data: { balance: { decrement: price } },
+        });
+        await tx.purchase.create({
+          data: { ip, type: "purchase", amount: -price, productId: product.id, metaJson: JSON.stringify(options) },
+        });
+        // Grant entitlements inside the tx too.
+        for (const g of grants) {
+          await tx.entitlement.create({
+            data: { ip, kind: g.kind, expiresAt: g.expiresAt ?? null, metaJson: g.meta ? JSON.stringify(g.meta) : null },
+          });
+        }
+        return updated.balance;
+      }
+
+      // Free (localhost) or zero-price: record purchase + grants, no deduction.
+      await tx.purchase.create({
+        data: { ip, type: "purchase", amount: 0, productId: product.id, metaJson: JSON.stringify(options) },
+      });
+      for (const g of grants) {
+        await tx.entitlement.create({
+          data: { ip, kind: g.kind, expiresAt: g.expiresAt ?? null, metaJson: g.meta ? JSON.stringify(g.meta) : null },
+        });
+      }
+      const w = await tx.wallet.findUnique({ where: { ip } });
+      return w?.balance ?? 0;
+    });
+  } catch (e) {
+    if (e instanceof InsufficientCreditsError)
+      throw new PurchaseError("Crédits insuffisants", 402);
+    throw e;
+  }
+
+  // Bump the global credits-spent money counter (outside the tx; best-effort).
+  if (!free && price > 0) {
+    const { redis } = await import("./redis");
+    void redis.incrby("xip:money:credits_spent", price).catch(() => {});
+  }
+
+  // Ad-frame purchase => create a real Ad row that enters rotation (Phase 7).
+  const adGrant = grants.find((g) => g.kind === "ad-frame");
+  if (adGrant) {
+    await prisma.ad
+      .create({
+        data: {
+          brand: "VOTRE PUB",
+          subtitle: "Espace acheté",
+          url: adGrant.meta?.url || null,
+          cta: "VOIR",
+          icon: "📣",
+          tone: "user",
+          kind: "band",
+          weight: 3,
+          active: true,
+          ownerIp: ip,
+          format: adGrant.meta?.format ?? "static",
+          expiresAt: adGrant.expiresAt ?? null,
+        },
+      })
+      .catch(() => {});
+    adCreated = true;
+  }
+
+  const balanceView = free ? (await getWallet(ip)).balance : balance;
+
+  return {
+    result: {
+      ok: true,
+      productId: product.id,
+      pricePaid: free ? 0 : price,
+      balance: balanceView,
+      entitlementKinds: grants.map((g) => g.kind),
+    },
+    visiblePerkChanged,
+    adCreated,
+  };
+}
+
+/** Recompute + cache perks after a purchase (caller broadcasts). */
+export async function refreshPerks(ip: string) {
+  await invalidatePerks(ip);
+  return getPerksForIp(ip);
+}

backend/src/lib/geo.ts

@@ -0,0 +1,95 @@
+/**
+ * Best-effort IP geolocation using ip-api.com (free, no key required).
+ * Results are cached in Redis for 24 h so repeated lookups don't burn the
+ * rate-limit (45 req/min on the free tier).
+ *
+ * Private / loopback addresses always resolve to "Local" without a network call.
+ */
+import { redis } from "./redis";
+import { isLocalhost } from "./ip";
+
+export interface GeoInfo {
+  country: string;
+  countryCode: string; // ISO 3166-1 alpha-2, or "" for local
+  city: string;
+  lat?: number;
+  lon?: number;
+}
+
+const GEO_TTL = 60 * 60 * 24; // 24 h
+const geoKey = (ip: string) => `xip:geo:v2:${ip}`;
+
+function isPrivate(ip: string): boolean {
+  if (isLocalhost(ip)) return true;
+  // RFC-1918 private ranges and link-local
+  return (
+    ip.startsWith("10.") ||
+    ip.startsWith("192.168.") ||
+    /^172\.(1[6-9]|2\d|3[01])\./.test(ip) ||
+    ip.startsWith("169.254.") ||
+    ip.startsWith("fc") ||
+    ip.startsWith("fd")
+  );
+}
+
+/** Resolve geo for a batch of IPs. Uses the ip-api.com /batch endpoint.
+ *  Private IPs are resolved locally; real IPs are fetched and cached. */
+export async function getGeoForIps(ips: string[]): Promise<Record<string, GeoInfo | null>> {
+  const result: Record<string, GeoInfo | null> = {};
+  const toFetch: string[] = [];
+
+  for (const ip of ips) {
+    if (isPrivate(ip)) {
+      result[ip] = { country: "Local", countryCode: "", city: "" };
+      continue;
+    }
+    const cached = await redis.get(geoKey(ip)).catch(() => null);
+    if (cached) {
+      try {
+        result[ip] = JSON.parse(cached) as GeoInfo;
+        continue;
+      } catch { /* fall through */ }
+    }
+    toFetch.push(ip);
+  }
+
+  if (toFetch.length === 0) return result;
+
+  // Batch lookup via ip-api.com
+  try {
+    const res = await fetch("http://ip-api.com/batch?fields=status,query,country,countryCode,city,lat,lon", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(toFetch.map((ip) => ({ query: ip }))),
+      signal: AbortSignal.timeout(5000),
+    });
+    if (res.ok) {
+      const list = (await res.json()) as any[];
+      for (const item of list) {
+        if (item.status === "success") {
+          const info: GeoInfo = {
+            country: item.country ?? "",
+            countryCode: item.countryCode ?? "",
+            city: item.city ?? "",
+            lat: item.lat,
+            lon: item.lon,
+          };
+          result[item.query] = info;
+          await redis.set(geoKey(item.query), JSON.stringify(info), "EX", GEO_TTL).catch(() => {});
+        } else {
+          result[item.query] = null;
+        }
+      }
+    }
+  } catch {
+    for (const ip of toFetch) if (!(ip in result)) result[ip] = null;
+  }
+
+  return result;
+}
+
+/** Single-IP variant used by the POST /messages broadcast path. */
+export async function getGeoForIp(ip: string): Promise<GeoInfo | null> {
+  const batch = await getGeoForIps([ip]);
+  return batch[ip] ?? null;
+}

backend/src/lib/ip.ts

@@ -1,48 +1,48 @@
-import type { Context } from "hono";
-import { getConnInfo } from "hono/bun";
-
-/**
- * Best-effort client IP.
- * Prefer x-forwarded-for (set when behind a proxy), fall back to the raw socket
- * address from Bun. In local dev (frontend:5173 → backend:3000, no proxy) this
- * is typically 127.0.0.1 / ::1.
- */
-export function getClientIp(c: Context): string {
-  const fwd = c.req.header("x-forwarded-for");
-  if (fwd) {
-    const first = fwd.split(",")[0]?.trim();
-    if (first) return first;
-  }
-  try {
-    const addr = getConnInfo(c).remote.address;
-    if (addr) return addr;
-  } catch {
-    /* getConnInfo only works under the Bun adapter */
-  }
-  return "127.0.0.1";
-}
-
-/**
- * Is this IP the local machine? Drives the README rule "si localhost: pas de
- * paywall (tout gratuit)". Covers IPv4 loopback, IPv6 loopback, and the
- * IPv4-mapped-IPv6 form Bun sometimes reports.
- */
-export function isLocalhost(ip: string): boolean {
-  return (
-    ip === "127.0.0.1" ||
-    ip === "::1" ||
-    ip === "::ffff:127.0.0.1" ||
-    ip === "localhost" ||
-    ip.startsWith("127.")
-  );
-}
-
-/**
- * Free mode: the paywall is OFF. True on localhost (README rule "si localhost:
- * pas de paywall"), OR whenever the deployment sets XIP_OPEN_BAR=true — the prod
- * "open bar" where every paid feature is free for everyone. Every paywall gate
- * in the app routes through this single helper.
- */
-export function isFree(ip: string): boolean {
-  return process.env.XIP_OPEN_BAR === "true" || isLocalhost(ip);
-}
+import type { Context } from "hono";
+import { getConnInfo } from "hono/bun";
+
+/**
+ * Best-effort client IP.
+ * Prefer x-forwarded-for (set when behind a proxy), fall back to the raw socket
+ * address from Bun. In local dev (frontend:5173 → backend:3000, no proxy) this
+ * is typically 127.0.0.1 / ::1.
+ */
+export function getClientIp(c: Context): string {
+  const fwd = c.req.header("x-forwarded-for");
+  if (fwd) {
+    const first = fwd.split(",")[0]?.trim();
+    if (first) return first;
+  }
+  try {
+    const addr = getConnInfo(c).remote.address;
+    if (addr) return addr;
+  } catch {
+    /* getConnInfo only works under the Bun adapter */
+  }
+  return "127.0.0.1";
+}
+
+/**
+ * Is this IP the local machine? Drives the README rule "si localhost: pas de
+ * paywall (tout gratuit)". Covers IPv4 loopback, IPv6 loopback, and the
+ * IPv4-mapped-IPv6 form Bun sometimes reports.
+ */
+export function isLocalhost(ip: string): boolean {
+  return (
+    ip === "127.0.0.1" ||
+    ip === "::1" ||
+    ip === "::ffff:127.0.0.1" ||
+    ip === "localhost" ||
+    ip.startsWith("127.")
+  );
+}
+
+/**
+ * Free mode: the paywall is OFF. True on localhost (README rule "si localhost:
+ * pas de paywall"), OR whenever the deployment sets XIP_OPEN_BAR=true — the prod
+ * "open bar" where every paid feature is free for everyone. Every paywall gate
+ * in the app routes through this single helper.
+ */
+export function isFree(ip: string): boolean {
+  return process.env.XIP_OPEN_BAR === "true" || isLocalhost(ip);
+}

backend/src/lib/perks.ts

@@ -1,111 +1,130 @@
-import { prisma } from "./prisma";
-import { redis } from "./redis";
-
-/**
- * Perks = the visible/functional consequences of an IP's active entitlements.
- *
- *  - skin:  'gold'                       (Style Doré — everyone sees it)
- *  - pets:  [{char, position}]           (Pets de Nom — everyone sees them)
- *  - noads: true                         (NoAds subscription — viewer-scoped)
- *  - badge: true                         (annual NoAds — exclusive badge)
- *  - elementSkin: true                   (one cosmetic element variant — viewer-scoped)
- *  - richHtmlcss / richJs / noFileLimit  (unlocks the composer / upload gate)
- *
- * Cached in Redis (short TTL) and busted on purchase so the feed updates live.
- */
-
-export type PetPosition = "left" | "right" | "both";
-
-export interface Perks {
-  skin?: "gold";
-  pets?: { char: string; position: PetPosition }[];
-  noads?: boolean;
-  badge?: boolean;
-  elementSkin?: boolean;
-  richHtmlcss?: boolean;
-  richJs?: boolean;
-  noFileLimit?: boolean;
-}
-
-const perksKey = (ip: string) => `xip:perks:${ip}`;
-const TTL_SEC = 60;
-
-/** Drop the cached perks for an IP. Call BEFORE broadcasting a perks change. */
-export async function invalidatePerks(ip: string): Promise<void> {
-  await redis.del(perksKey(ip)).catch(() => {});
-}
-
-/** Compute perks for one IP from its active, non-expired entitlements. */
-export async function getPerksForIp(ip: string): Promise<Perks> {
-  // Fast path: cache.
-  const cached = await redis.get(perksKey(ip)).catch(() => null);
-  if (cached) {
-    try {
-      return JSON.parse(cached) as Perks;
-    } catch {
-      /* fall through to recompute */
-    }
-  }
-
-  const now = new Date();
-  const rows = await prisma.entitlement
-    .findMany({ where: { ip, active: true } })
-    .catch(() => []);
-
-  const perks: Perks = {};
-  const pets: { char: string; position: PetPosition }[] = [];
-
-  for (const e of rows) {
-    // Skip expired (subscriptions / ad-frames).
-    if (e.expiresAt && e.expiresAt < now) continue;
-    let meta: any = {};
-    try {
-      meta = e.metaJson ? JSON.parse(e.metaJson) : {};
-    } catch {
-      meta = {};
-    }
-
-    switch (e.kind) {
-      case "style-dore":
-        perks.skin = "gold";
-        break;
-      case "pet":
-        if (meta.char) pets.push({ char: meta.char, position: meta.position ?? "left" });
-        break;
-      case "noads":
-        perks.noads = true;
-        if (meta.plan === "annual") perks.badge = true;
-        break;
-      case "element-skin":
-        perks.elementSkin = true;
-        break;
-      case "rich-htmlcss":
-        perks.richHtmlcss = true;
-        break;
-      case "rich-js":
-        perks.richJs = true;
-        break;
-      case "no-file-limit":
-        perks.noFileLimit = true;
-        break;
-    }
-  }
-  if (pets.length) perks.pets = pets.slice(0, 3);
-
-  await redis.set(perksKey(ip), JSON.stringify(perks), "EX", TTL_SEC).catch(() => {});
-  return perks;
-}
-
-/** Batch perks for several IPs (used to annotate message lists). */
-export async function getPerksForIps(
-  ips: string[]
-): Promise<Record<string, Perks>> {
-  const uniq = [...new Set(ips.filter(Boolean))];
-  const out: Record<string, Perks> = {};
-  await Promise.all(
-    uniq.map(async (ip) => {
-      out[ip] = await getPerksForIp(ip);
-    })
-  );
-  return out;
-}
+import { prisma } from "./prisma";
+import { redis } from "./redis";
+
+/**
+ * Perks = the visible/functional consequences of an IP's active entitlements.
+ *
+ *  - skin:  'gold'                       (Style Doré — everyone sees it)
+ *  - pets:  [{char, position}]           (Pets de Nom — everyone sees them)
+ *  - noads: true                         (NoAds subscription — viewer-scoped)
+ *  - badge: true                         (annual NoAds — exclusive badge)
+ *  - elementSkin: true                   (one cosmetic element variant — viewer-scoped)
+ *  - richHtmlcss / richJs / noFileLimit  (unlocks the composer / upload gate)
+ *
+ * Cached in Redis (short TTL) and busted on purchase so the feed updates live.
+ */
+
+export type PetPosition = "left" | "right" | "both";
+
+export interface Perks {
+  skin?: "gold";
+  pets?: { char: string; position: PetPosition }[];
+  noads?: boolean;
+  badge?: boolean;
+  elementSkin?: boolean;
+  richHtmlcss?: boolean;
+  richJs?: boolean;
+  noFileLimit?: boolean;
+  ipColors?: boolean;
+  audioAlert?: boolean;
+  sendSkins?: { id: string; char: string; label?: string }[];
+}
+
+const perksKey = (ip: string) => `xip:perks:${ip}`;
+const TTL_SEC = 60;
+
+/** Drop the cached perks for an IP. Call BEFORE broadcasting a perks change. */
+export async function invalidatePerks(ip: string): Promise<void> {
+  await redis.del(perksKey(ip)).catch(() => {});
+}
+
+/** Compute perks for one IP from its active, non-expired entitlements. */
+export async function getPerksForIp(ip: string): Promise<Perks> {
+  // Fast path: cache.
+  const cached = await redis.get(perksKey(ip)).catch(() => null);
+  if (cached) {
+    try {
+      return JSON.parse(cached) as Perks;
+    } catch {
+      /* fall through to recompute */
+    }
+  }
+
+  const now = new Date();
+  const rows = await prisma.entitlement
+    .findMany({ where: { ip, active: true } })
+    .catch(() => []);
+
+  const perks: Perks = {};
+  const pets: { char: string; position: PetPosition }[] = [];
+
+  for (const e of rows) {
+    // Skip expired (subscriptions / ad-frames).
+    if (e.expiresAt && e.expiresAt < now) continue;
+    let meta: any = {};
+    try {
+      meta = e.metaJson ? JSON.parse(e.metaJson) : {};
+    } catch {
+      meta = {};
+    }
+
+    switch (e.kind) {
+      case "style-dore":
+        perks.skin = "gold";
+        break;
+      case "pet":
+        if (meta.char) pets.push({ char: meta.char, position: meta.position ?? "left" });
+        break;
+      case "noads":
+        perks.noads = true;
+        if (meta.plan === "annual") perks.badge = true;
+        break;
+      case "element-skin":
+        perks.elementSkin = true;
+        break;
+      case "rich-htmlcss":
+        perks.richHtmlcss = true;
+        break;
+      case "rich-js":
+        perks.richJs = true;
+        break;
+      case "no-file-limit":
+        perks.noFileLimit = true;
+        break;
+      case "ip-colors":
+        perks.ipColors = true;
+        break;
+      case "audio-alert":
+        perks.audioAlert = true;
+        break;
+    }
+
+    // Send-button skins use a prefixed kind (send-skin-rocket, …), so they
+    // can't be matched by the switch above.
+    if (e.kind.startsWith("send-skin-")) {
+      (perks.sendSkins ??= []).push({
+        id: e.kind,
+        char: meta.char ?? "?",
+        label: meta.label,
+      });
+    }
+  }
+  if (pets.length) perks.pets = pets.slice(0, 3);
+
+  await redis.set(perksKey(ip), JSON.stringify(perks), "EX", TTL_SEC).catch(() => {});
+  return perks;
+}
+
+/** Batch perks for several IPs (used to annotate message lists). */
+export async function getPerksForIps(
+  ips: string[]
+): Promise<Record<string, Perks>> {
+  const uniq = [...new Set(ips.filter(Boolean))];
+  const out: Record<string, Perks> = {};
+  await Promise.all(
+    uniq.map(async (ip) => {
+      out[ip] = await getPerksForIp(ip);
+    })
+  );
+  return out;
+}

backend/src/lib/prisma.ts

@@ -1,10 +1,10 @@
-import { PrismaClient } from "@prisma/client";
-
-const globalForPrisma = globalThis as unknown as { prisma: PrismaClient };
-
-export const prisma =
-  globalForPrisma.prisma ?? new PrismaClient({ log: ["error", "warn"] });
-
-if (process.env.NODE_ENV !== "production") {
-  globalForPrisma.prisma = prisma;
-}
+import { PrismaClient } from "@prisma/client";
+
+const globalForPrisma = globalThis as unknown as { prisma: PrismaClient };
+
+export const prisma =
+  globalForPrisma.prisma ?? new PrismaClient({ log: ["error", "warn"] });
+
+if (process.env.NODE_ENV !== "production") {
+  globalForPrisma.prisma = prisma;
+}

backend/src/lib/stats.ts

@@ -1,207 +1,207 @@
-import { redis } from "./redis";
-import { prisma } from "./prisma";
-
-/**
- * XIP live stats.
- *
- * Two kinds of metrics:
- *  - PERSISTENT totals, stored in Redis (survive restarts): messages, replies,
- *    characters sent, letters typed (even if never sent), unique IPs, longest message.
- *  - LIVE metrics, kept in process memory (sliding windows): letters/sec, messages/min.
- *
- * The number of connected tabs and the "currently typing" count are owned by the
- * realtime module and injected when building a snapshot.
- */
-
-const K = {
-  messages: "xip:stat:messages",
-  replies: "xip:stat:replies",
-  charsSent: "xip:stat:chars_sent",
-  lettersTyped: "xip:stat:letters_typed",
-  longest: "xip:stat:longest",
-  ips: "xip:hll:ips",
-  initialized: "xip:stat:initialized",
-  creditsSpent: "xip:money:credits_spent", // centi-credits spent (set by wallet/catalog)
-  impressionsTotal: "xip:money:impressions_total", // ad impressions (set by lib/ads)
-} as const;
-
-// Satirical CPM: "€" earned per 1000 ad impressions.
-const FAKE_CPM = 12.5;
-
-// ── Sliding-window live metrics (per process) ──────────────────────────────
-const LETTERS_WINDOW_MS = 4000; // smoothing window for letters/sec
-const MSGS_WINDOW_MS = 60000; // messages per minute
-
-let letterEvents: { ts: number; n: number }[] = [];
-let messageEvents: number[] = [];
-
-function prune(now: number): void {
-  letterEvents = letterEvents.filter((e) => now - e.ts <= LETTERS_WINDOW_MS);
-  messageEvents = messageEvents.filter((ts) => now - ts <= MSGS_WINDOW_MS);
-}
-
-export function getLettersPerSec(): number {
-  const now = Date.now();
-  prune(now);
-  const total = letterEvents.reduce((sum, e) => sum + e.n, 0);
-  return total / (LETTERS_WINDOW_MS / 1000);
-}
-
-export function getMsgsPerMin(): number {
-  const now = Date.now();
-  prune(now);
-  return messageEvents.length;
-}
-
-// ── First-boot backfill ─────────────────────────────────────────────────────
-
-/**
- * Seed the persistent counters from the database the first time the server runs
- * (guarded by a Redis sentinel, so it's a no-op on hot reloads / restarts).
- * Without this, totals would show 0 while seeded messages are already visible.
- * letters_typed is intentionally NOT backfilled — it has no DB source.
- */
-export async function initStats(): Promise<void> {
-  const first = await redis.set(K.initialized, "1", "NX").catch(() => null);
-  if (first !== "OK") return; // already initialized
-
-  try {
-    const rows = await prisma.$queryRaw<
-      { messages: bigint; replies: bigint; chars: bigint; longest: bigint }[]
-    >`
-      SELECT
-        COUNT(*)                                       AS messages,
-        COUNT(*) FILTER (WHERE "parentId" IS NOT NULL) AS replies,
-        COALESCE(SUM(LENGTH(content)), 0)              AS chars,
-        COALESCE(MAX(LENGTH(content)), 0)              AS longest
-      FROM messages
-    `;
-    const r = rows[0];
-    if (r) {
-      const pipe = redis.pipeline();
-      pipe.set(K.messages, String(Number(r.messages)));
-      pipe.set(K.replies, String(Number(r.replies)));
-      pipe.set(K.charsSent, String(Number(r.chars)));
-      pipe.set(K.longest, String(Number(r.longest)));
-      await pipe.exec();
-    }
-
-    const ips = await prisma.message.findMany({
-      distinct: ["authorIp"],
-      select: { authorIp: true },
-    });
-    if (ips.length > 0) {
-      await redis.pfadd(K.ips, ...ips.map((m) => m.authorIp));
-    }
-    console.log("📊  Stats backfilled from database.");
-  } catch (err) {
-    // Non-fatal: release the sentinel so a later boot can retry.
-    await redis.del(K.initialized).catch(() => {});
-    console.warn("⚠️  Stats backfill failed:", (err as Error).message);
-  }
-}
-
-// ── Mutations ──────────────────────────────────────────────────────────────
-
-/** Record a freshly created message (top-level or reply). */
-export async function recordMessage(
-  contentLength: number,
-  isReply: boolean
-): Promise<void> {
-  messageEvents.push(Date.now());
-  const pipe = redis.pipeline();
-  pipe.incr(K.messages);
-  pipe.incrby(K.charsSent, contentLength);
-  if (isReply) pipe.incr(K.replies);
-  // Track longest message (read-modify-write is fine; contention is negligible).
-  pipe.get(K.longest);
-  const res = await pipe.exec().catch(() => null);
-  if (res) {
-    const current = Number(res[res.length - 1]?.[1] ?? 0);
-    if (contentLength > current) {
-      await redis.set(K.longest, String(contentLength)).catch(() => {});
-    }
-  }
-}
-
-/** Record letters typed (sent or not). Feeds both the persistent total and letters/sec. */
-export async function recordLettersTyped(delta: number): Promise<void> {
-  if (!Number.isFinite(delta) || delta <= 0) return;
-  const n = Math.min(delta, 1000); // guard against bogus client payloads
-  letterEvents.push({ ts: Date.now(), n });
-  await redis.incrby(K.lettersTyped, n).catch(() => {});
-}
-
-/** Register an IP in the HyperLogLog of unique visitors. */
-export async function recordIp(ip: string): Promise<void> {
-  if (!ip) return;
-  await redis.pfadd(K.ips, ip).catch(() => {});
-}
-
-// ── Snapshot ─────────────────────────────────────────────────────────────
-
-export interface StatsSnapshot {
-  // live
-  connectedTabs: number;
-  typingNow: number;
-  lettersPerSec: number;
-  msgsPerMin: number;
-  // totals
-  messages: number;
-  replies: number;
-  charsSent: number;
-  lettersTyped: number;
-  uniqueIps: number;
-  longestMsg: number;
-  // derived
-  abandonRate: number; // % of typed letters that were never sent
-  avgLength: number; // average sent-message length
-  moneyExtorted: number; // fake "€": impressions×CPM + credits spent
-}
-
-export async function buildSnapshot(live: {
-  connectedTabs: number;
-  typingNow: number;
-}): Promise<StatsSnapshot> {
-  const [messages, replies, charsSent, lettersTyped, longest, uniqueIps, creditsSpent, impressions] =
-    await Promise.all([
-      redis.get(K.messages).catch(() => "0"),
-      redis.get(K.replies).catch(() => "0"),
-      redis.get(K.charsSent).catch(() => "0"),
-      redis.get(K.lettersTyped).catch(() => "0"),
-      redis.get(K.longest).catch(() => "0"),
-      redis.pfcount(K.ips).catch(() => 0),
-      redis.get(K.creditsSpent).catch(() => "0"),
-      redis.get(K.impressionsTotal).catch(() => "0"),
-    ]);
-
-  const nMessages = Number(messages ?? 0);
-  const nCharsSent = Number(charsSent ?? 0);
-  const nLettersTyped = Number(lettersTyped ?? 0);
-
-  const abandonRate =
-    nLettersTyped > 0
-      ? Math.max(0, Math.min(100, ((nLettersTyped - nCharsSent) / nLettersTyped) * 100))
-      : 0;
-  const avgLength = nMessages > 0 ? nCharsSent / nMessages : 0;
-
-  // Fake revenue: ad impressions × CPM + credits spent (centi-credits → "€").
-  const moneyExtorted =
-    (Number(impressions ?? 0) / 1000) * FAKE_CPM + Number(creditsSpent ?? 0) / 100;
-
-  return {
-    connectedTabs: live.connectedTabs,
-    typingNow: live.typingNow,
-    lettersPerSec: getLettersPerSec(),
-    msgsPerMin: getMsgsPerMin(),
-    messages: nMessages,
-    replies: Number(replies ?? 0),
-    charsSent: nCharsSent,
-    lettersTyped: nLettersTyped,
-    uniqueIps: Number(uniqueIps ?? 0),
-    longestMsg: Number(longest ?? 0),
-    abandonRate,
-    avgLength,
-    moneyExtorted,
-  };
-}
+import { redis } from "./redis";
+import { prisma } from "./prisma";
+
+/**
+ * XIP live stats.
+ *
+ * Two kinds of metrics:
+ *  - PERSISTENT totals, stored in Redis (survive restarts): messages, replies,
+ *    characters sent, letters typed (even if never sent), unique IPs, longest message.
+ *  - LIVE metrics, kept in process memory (sliding windows): letters/sec, messages/min.
+ *
+ * The number of connected tabs and the "currently typing" count are owned by the
+ * realtime module and injected when building a snapshot.
+ */
+
+const K = {
+  messages: "xip:stat:messages",
+  replies: "xip:stat:replies",
+  charsSent: "xip:stat:chars_sent",
+  lettersTyped: "xip:stat:letters_typed",
+  longest: "xip:stat:longest",
+  ips: "xip:hll:ips",
+  initialized: "xip:stat:initialized",
+  creditsSpent: "xip:money:credits_spent", // centi-credits spent (set by wallet/catalog)
+  impressionsTotal: "xip:money:impressions_total", // ad impressions (set by lib/ads)
+} as const;
+
+// Satirical CPM: "€" earned per 1000 ad impressions.
+const FAKE_CPM = 12.5;
+
+// ── Sliding-window live metrics (per process) ──────────────────────────────
+const LETTERS_WINDOW_MS = 4000; // smoothing window for letters/sec
+const MSGS_WINDOW_MS = 60000; // messages per minute
+
+let letterEvents: { ts: number; n: number }[] = [];
+let messageEvents: number[] = [];
+
+function prune(now: number): void {
+  letterEvents = letterEvents.filter((e) => now - e.ts <= LETTERS_WINDOW_MS);
+  messageEvents = messageEvents.filter((ts) => now - ts <= MSGS_WINDOW_MS);
+}
+
+export function getLettersPerSec(): number {
+  const now = Date.now();
+  prune(now);
+  const total = letterEvents.reduce((sum, e) => sum + e.n, 0);
+  return total / (LETTERS_WINDOW_MS / 1000);
+}
+
+export function getMsgsPerMin(): number {
+  const now = Date.now();
+  prune(now);
+  return messageEvents.length;
+}
+
+// ── First-boot backfill ─────────────────────────────────────────────────────
+
+/**
+ * Seed the persistent counters from the database the first time the server runs
+ * (guarded by a Redis sentinel, so it's a no-op on hot reloads / restarts).
+ * Without this, totals would show 0 while seeded messages are already visible.
+ * letters_typed is intentionally NOT backfilled — it has no DB source.
+ */
+export async function initStats(): Promise<void> {
+  const first = await redis.set(K.initialized, "1", "NX").catch(() => null);
+  if (first !== "OK") return; // already initialized
+
+  try {
+    const rows = await prisma.$queryRaw<
+      { messages: bigint; replies: bigint; chars: bigint; longest: bigint }[]
+    >`
+      SELECT
+        COUNT(*)                                       AS messages,
+        COUNT(*) FILTER (WHERE "parentId" IS NOT NULL) AS replies,
+        COALESCE(SUM(LENGTH(content)), 0)              AS chars,
+        COALESCE(MAX(LENGTH(content)), 0)              AS longest
+      FROM messages
+    `;
+    const r = rows[0];
+    if (r) {
+      const pipe = redis.pipeline();
+      pipe.set(K.messages, String(Number(r.messages)));
+      pipe.set(K.replies, String(Number(r.replies)));
+      pipe.set(K.charsSent, String(Number(r.chars)));
+      pipe.set(K.longest, String(Number(r.longest)));
+      await pipe.exec();
+    }
+
+    const ips = await prisma.message.findMany({
+      distinct: ["authorIp"],
+      select: { authorIp: true },
+    });
+    if (ips.length > 0) {
+      await redis.pfadd(K.ips, ...ips.map((m) => m.authorIp));
+    }
+    console.log("📊  Stats backfilled from database.");
+  } catch (err) {
+    // Non-fatal: release the sentinel so a later boot can retry.
+    await redis.del(K.initialized).catch(() => {});
+    console.warn("⚠️  Stats backfill failed:", (err as Error).message);
+  }
+}
+
+// ── Mutations ──────────────────────────────────────────────────────────────
+
+/** Record a freshly created message (top-level or reply). */
+export async function recordMessage(
+  contentLength: number,
+  isReply: boolean
+): Promise<void> {
+  messageEvents.push(Date.now());
+  const pipe = redis.pipeline();
+  pipe.incr(K.messages);
+  pipe.incrby(K.charsSent, contentLength);
+  if (isReply) pipe.incr(K.replies);
+  // Track longest message (read-modify-write is fine; contention is negligible).
+  pipe.get(K.longest);
+  const res = await pipe.exec().catch(() => null);
+  if (res) {
+    const current = Number(res[res.length - 1]?.[1] ?? 0);
+    if (contentLength > current) {
+      await redis.set(K.longest, String(contentLength)).catch(() => {});
+    }
+  }
+}
+
+/** Record letters typed (sent or not). Feeds both the persistent total and letters/sec. */
+export async function recordLettersTyped(delta: number): Promise<void> {
+  if (!Number.isFinite(delta) || delta <= 0) return;
+  const n = Math.min(delta, 1000); // guard against bogus client payloads
+  letterEvents.push({ ts: Date.now(), n });
+  await redis.incrby(K.lettersTyped, n).catch(() => {});
+}
+
+/** Register an IP in the HyperLogLog of unique visitors. */
+export async function recordIp(ip: string): Promise<void> {
+  if (!ip) return;
+  await redis.pfadd(K.ips, ip).catch(() => {});
+}
+
+// ── Snapshot ─────────────────────────────────────────────────────────────
+
+export interface StatsSnapshot {
+  // live
+  connectedTabs: number;
+  typingNow: number;
+  lettersPerSec: number;
+  msgsPerMin: number;
+  // totals
+  messages: number;
+  replies: number;
+  charsSent: number;
+  lettersTyped: number;
+  uniqueIps: number;
+  longestMsg: number;
+  // derived
+  abandonRate: number; // % of typed letters that were never sent
+  avgLength: number; // average sent-message length
+  moneyExtorted: number; // fake "€": impressions×CPM + credits spent
+}
+
+export async function buildSnapshot(live: {
+  connectedTabs: number;
+  typingNow: number;
+}): Promise<StatsSnapshot> {
+  const [messages, replies, charsSent, lettersTyped, longest, uniqueIps, creditsSpent, impressions] =
+    await Promise.all([
+      redis.get(K.messages).catch(() => "0"),
+      redis.get(K.replies).catch(() => "0"),
+      redis.get(K.charsSent).catch(() => "0"),
+      redis.get(K.lettersTyped).catch(() => "0"),
+      redis.get(K.longest).catch(() => "0"),
+      redis.pfcount(K.ips).catch(() => 0),
+      redis.get(K.creditsSpent).catch(() => "0"),
+      redis.get(K.impressionsTotal).catch(() => "0"),
+    ]);
+
+  const nMessages = Number(messages ?? 0);
+  const nCharsSent = Number(charsSent ?? 0);
+  const nLettersTyped = Number(lettersTyped ?? 0);
+
+  const abandonRate =
+    nLettersTyped > 0
+      ? Math.max(0, Math.min(100, ((nLettersTyped - nCharsSent) / nLettersTyped) * 100))
+      : 0;
+  const avgLength = nMessages > 0 ? nCharsSent / nMessages : 0;
+
+  // Fake revenue: ad impressions × CPM + credits spent (centi-credits → "€").
+  const moneyExtorted =
+    (Number(impressions ?? 0) / 1000) * FAKE_CPM + Number(creditsSpent ?? 0) / 100;
+
+  return {
+    connectedTabs: live.connectedTabs,
+    typingNow: live.typingNow,
+    lettersPerSec: getLettersPerSec(),
+    msgsPerMin: getMsgsPerMin(),
+    messages: nMessages,
+    replies: Number(replies ?? 0),
+    charsSent: nCharsSent,
+    lettersTyped: nLettersTyped,
+    uniqueIps: Number(uniqueIps ?? 0),
+    longestMsg: Number(longest ?? 0),
+    abandonRate,
+    avgLength,
+    moneyExtorted,
+  };
+}

backend/src/lib/storage.ts

@@ -1,48 +1,48 @@
-import { mkdir } from "node:fs/promises";
-import { resolve, extname } from "node:path";
-
-/**
- * Filesystem storage for uploads, under backend/uploads/.
- * Files are stored under a UUID-prefixed name so a malicious client filename
- * can never traverse paths or overwrite another file. The raw bytes are never
- * executed server-side — we only ever read them back to serve downloads.
- */
-
-const UPLOADS_DIR = resolve(import.meta.dir, "../../uploads");
-
-let ensured = false;
-async function ensureDir(): Promise<void> {
-  if (ensured) return;
-  await mkdir(UPLOADS_DIR, { recursive: true });
-  ensured = true;
-}
-
-/** Keep only a safe, short suffix of the original name for readability. */
-function safeSuffix(filename: string): string {
-  const ext = extname(filename).slice(0, 12).replace(/[^a-zA-Z0-9.]/g, "");
-  return ext || "";
-}
-
-export interface StoredFile {
-  storagePath: string; // relative name under uploads/
-  absolutePath: string;
-}
-
-/** Persist a File/Blob, returning its storage path. id should be a fresh uuid. */
-export async function storeFile(id: string, file: File): Promise<StoredFile> {
-  await ensureDir();
-  const name = `${id}${safeSuffix(file.name)}`;
-  const absolutePath = resolve(UPLOADS_DIR, name);
-  // Extra guard: the resolved path must stay inside UPLOADS_DIR.
-  if (!absolutePath.startsWith(UPLOADS_DIR)) {
-    throw new Error("Invalid storage path");
-  }
-  await Bun.write(absolutePath, file);
-  return { storagePath: name, absolutePath };
-}
-
-export function absolutePathFor(storagePath: string): string {
-  const abs = resolve(UPLOADS_DIR, storagePath);
-  if (!abs.startsWith(UPLOADS_DIR)) throw new Error("Invalid storage path");
-  return abs;
-}
+import { mkdir } from "node:fs/promises";
+import { resolve, extname } from "node:path";
+
+/**
+ * Filesystem storage for uploads, under backend/uploads/.
+ * Files are stored under a UUID-prefixed name so a malicious client filename
+ * can never traverse paths or overwrite another file. The raw bytes are never
+ * executed server-side — we only ever read them back to serve downloads.
+ */
+
+const UPLOADS_DIR = resolve(import.meta.dir, "../../uploads");
+
+let ensured = false;
+async function ensureDir(): Promise<void> {
+  if (ensured) return;
+  await mkdir(UPLOADS_DIR, { recursive: true });
+  ensured = true;
+}
+
+/** Keep only a safe, short suffix of the original name for readability. */
+function safeSuffix(filename: string): string {
+  const ext = extname(filename).slice(0, 12).replace(/[^a-zA-Z0-9.]/g, "");
+  return ext || "";
+}
+
+export interface StoredFile {
+  storagePath: string; // relative name under uploads/
+  absolutePath: string;
+}
+
+/** Persist a File/Blob, returning its storage path. id should be a fresh uuid. */
+export async function storeFile(id: string, file: File): Promise<StoredFile> {
+  await ensureDir();
+  const name = `${id}${safeSuffix(file.name)}`;
+  const absolutePath = resolve(UPLOADS_DIR, name);
+  // Extra guard: the resolved path must stay inside UPLOADS_DIR.
+  if (!absolutePath.startsWith(UPLOADS_DIR)) {
+    throw new Error("Invalid storage path");
+  }
+  await Bun.write(absolutePath, file);
+  return { storagePath: name, absolutePath };
+}
+
+export function absolutePathFor(storagePath: string): string {
+  const abs = resolve(UPLOADS_DIR, storagePath);
+  if (!abs.startsWith(UPLOADS_DIR)) throw new Error("Invalid storage path");
+  return abs;
+}

backend/src/lib/wallet.ts

@@ -1,127 +1,127 @@
-import { prisma } from "./prisma";
-import { redis } from "./redis";
-import { isFree } from "./ip";
-
-/**
- * Wallet engine — fictional "crédits XIP", keyed on IP (no accounts).
- *
- * Amounts are integer CENTI-CREDITS to avoid float drift (display divides by 100).
- * So 9.99 "crédits" is stored as 999.
- *
- * `spend()` is the single choke point for every paid action: it enforces the
- * balance and is the one place the localhost "free mode" bypass lives.
- */
-
-// Starting grant on first wallet touch, and the free top-up button amount.
-export const SIGNUP_GRANT = 0;
-export const TOPUP_AMOUNT = 5000; // 50.00 crédits per free top-up
-
-// Sentinel reported as the balance for localhost (rendered as "∞" by the UI).
-export const INFINITE = Number.MAX_SAFE_INTEGER;
-
-// Redis keys (mirror + global money counter).
-const walletKey = (ip: string) => `xip:wallet:${ip}`;
-const CREDITS_SPENT = "xip:money:credits_spent";
-
-export interface WalletView {
-  ip: string;
-  balance: number; // centi-credits (or INFINITE for free mode)
-  freeMode: boolean;
-}
-
-/** Lazily create the wallet row (with the signup grant) the first time we touch an IP. */
-export async function ensureWallet(ip: string): Promise<void> {
-  await prisma.wallet
-    .upsert({
-      where: { ip },
-      create: { ip, balance: SIGNUP_GRANT },
-      update: {},
-    })
-    .catch(() => {});
-}
-
-export async function getWallet(ip: string): Promise<WalletView> {
-  if (isFree(ip)) return { ip, balance: INFINITE, freeMode: true };
-  await ensureWallet(ip);
-  const w = await prisma.wallet.findUnique({ where: { ip } }).catch(() => null);
-  const balance = w?.balance ?? 0;
-  void redis.set(walletKey(ip), String(balance)).catch(() => {});
-  return { ip, balance, freeMode: false };
-}
-
-/** Free, instant, satirical top-up. No-op for localhost (already infinite). */
-export async function topUp(ip: string, amount = TOPUP_AMOUNT): Promise<WalletView> {
-  if (isFree(ip)) return { ip, balance: INFINITE, freeMode: true };
-  await ensureWallet(ip);
-  const w = await prisma.wallet.update({
-    where: { ip },
-    data: { balance: { increment: amount } },
-  });
-  await prisma.purchase
-    .create({ data: { ip, type: "topup", amount } })
-    .catch(() => {});
-  void redis.set(walletKey(ip), String(w.balance)).catch(() => {});
-  return { ip, balance: w.balance, freeMode: false };
-}
-
-export class InsufficientCreditsError extends Error {
-  constructor() {
-    super("Crédits insuffisants");
-    this.name = "InsufficientCreditsError";
-  }
-}
-
-/**
- * Atomically spend credits. Returns the new balance.
- * - localhost => free mode: records nothing, returns INFINITE.
- * - otherwise: transactional re-read + guard + decrement + ledger row.
- * Throws InsufficientCreditsError if the balance can't cover `amount`.
- */
-export async function spend(
-  ip: string,
-  amount: number,
-  reason: string,
-  meta?: Record<string, unknown>
-): Promise<number> {
-  if (isFree(ip)) return INFINITE;
-  if (amount <= 0) {
-    // Free item — still record the (zero) purchase for history, no balance change.
-    const w = await getWallet(ip);
-    await prisma.purchase
-      .create({
-        data: { ip, type: "purchase", amount: 0, productId: reason, metaJson: meta ? JSON.stringify(meta) : null },
-      })
-      .catch(() => {});
-    return w.balance;
-  }
-
-  const newBalance = await prisma.$transaction(async (tx) => {
-    await tx.wallet.upsert({
-      where: { ip },
-      create: { ip, balance: SIGNUP_GRANT },
-      update: {},
-    });
-    const w = await tx.wallet.findUnique({ where: { ip } });
-    const current = w?.balance ?? 0;
-    if (current < amount) throw new InsufficientCreditsError();
-    const updated = await tx.wallet.update({
-      where: { ip },
-      data: { balance: { decrement: amount } },
-    });
-    await tx.purchase.create({
-      data: {
-        ip,
-        type: "purchase",
-        amount: -amount,
-        productId: reason,
-        metaJson: meta ? JSON.stringify(meta) : null,
-      },
-    });
-    return updated.balance;
-  });
-
-  // Mirror to Redis + bump the global "credits spent" money counter.
-  void redis.set(walletKey(ip), String(newBalance)).catch(() => {});
-  void redis.incrby(CREDITS_SPENT, amount).catch(() => {});
-  return newBalance;
-}
+import { prisma } from "./prisma";
+import { redis } from "./redis";
+import { isFree } from "./ip";
+
+/**
+ * Wallet engine — fictional "crédits XIP", keyed on IP (no accounts).
+ *
+ * Amounts are integer CENTI-CREDITS to avoid float drift (display divides by 100).
+ * So 9.99 "crédits" is stored as 999.
+ *
+ * `spend()` is the single choke point for every paid action: it enforces the
+ * balance and is the one place the localhost "free mode" bypass lives.
+ */
+
+// Starting grant on first wallet touch, and the free top-up button amount.
+export const SIGNUP_GRANT = 0;
+export const TOPUP_AMOUNT = 5000; // 50.00 crédits per free top-up
+
+// Sentinel reported as the balance for localhost (rendered as "∞" by the UI).
+export const INFINITE = Number.MAX_SAFE_INTEGER;
+
+// Redis keys (mirror + global money counter).
+const walletKey = (ip: string) => `xip:wallet:${ip}`;
+const CREDITS_SPENT = "xip:money:credits_spent";
+
+export interface WalletView {
+  ip: string;
+  balance: number; // centi-credits (or INFINITE for free mode)
+  freeMode: boolean;
+}
+
+/** Lazily create the wallet row (with the signup grant) the first time we touch an IP. */
+export async function ensureWallet(ip: string): Promise<void> {
+  await prisma.wallet
+    .upsert({
+      where: { ip },
+      create: { ip, balance: SIGNUP_GRANT },
+      update: {},
+    })
+    .catch(() => {});
+}
+
+export async function getWallet(ip: string): Promise<WalletView> {
+  if (isFree(ip)) return { ip, balance: INFINITE, freeMode: true };
+  await ensureWallet(ip);
+  const w = await prisma.wallet.findUnique({ where: { ip } }).catch(() => null);
+  const balance = w?.balance ?? 0;
+  void redis.set(walletKey(ip), String(balance)).catch(() => {});
+  return { ip, balance, freeMode: false };
+}
+
+/** Free, instant, satirical top-up. No-op for localhost (already infinite). */
+export async function topUp(ip: string, amount = TOPUP_AMOUNT): Promise<WalletView> {
+  if (isFree(ip)) return { ip, balance: INFINITE, freeMode: true };
+  await ensureWallet(ip);
+  const w = await prisma.wallet.update({
+    where: { ip },
+    data: { balance: { increment: amount } },
+  });
+  await prisma.purchase
+    .create({ data: { ip, type: "topup", amount } })
+    .catch(() => {});
+  void redis.set(walletKey(ip), String(w.balance)).catch(() => {});
+  return { ip, balance: w.balance, freeMode: false };
+}
+
+export class InsufficientCreditsError extends Error {
+  constructor() {
+    super("Crédits insuffisants");
+    this.name = "InsufficientCreditsError";
+  }
+}
+
+/**
+ * Atomically spend credits. Returns the new balance.
+ * - localhost => free mode: records nothing, returns INFINITE.
+ * - otherwise: transactional re-read + guard + decrement + ledger row.
+ * Throws InsufficientCreditsError if the balance can't cover `amount`.
+ */
+export async function spend(
+  ip: string,
+  amount: number,
+  reason: string,
+  meta?: Record<string, unknown>
+): Promise<number> {
+  if (isFree(ip)) return INFINITE;
+  if (amount <= 0) {
+    // Free item — still record the (zero) purchase for history, no balance change.
+    const w = await getWallet(ip);
+    await prisma.purchase
+      .create({
+        data: { ip, type: "purchase", amount: 0, productId: reason, metaJson: meta ? JSON.stringify(meta) : null },
+      })
+      .catch(() => {});
+    return w.balance;
+  }
+
+  const newBalance = await prisma.$transaction(async (tx) => {
+    await tx.wallet.upsert({
+      where: { ip },
+      create: { ip, balance: SIGNUP_GRANT },
+      update: {},
+    });
+    const w = await tx.wallet.findUnique({ where: { ip } });
+    const current = w?.balance ?? 0;
+    if (current < amount) throw new InsufficientCreditsError();
+    const updated = await tx.wallet.update({
+      where: { ip },
+      data: { balance: { decrement: amount } },
+    });
+    await tx.purchase.create({
+      data: {
+        ip,
+        type: "purchase",
+        amount: -amount,
+        productId: reason,
+        metaJson: meta ? JSON.stringify(meta) : null,
+      },
+    });
+    return updated.balance;
+  });
+
+  // Mirror to Redis + bump the global "credits spent" money counter.
+  void redis.set(walletKey(ip), String(newBalance)).catch(() => {});
+  void redis.incrby(CREDITS_SPENT, amount).catch(() => {});
+  return newBalance;
+}

backend/src/realtime.ts

@@ -1,147 +1,147 @@
-import { createBunWebSocket } from "hono/bun";
-import type { WSContext } from "hono/ws";
-import { buildSnapshot, recordLettersTyped } from "./lib/stats";
-import { getClientIp } from "./lib/ip";
-
-/**
- * Realtime hub: one WebSocket connection = one open tab.
- *
- *  - Broadcasts a throttled stats snapshot to every tab.
- *  - Broadcasts newly created messages so feeds update without polling.
- *  - Tracks "currently typing" presence and feeds the global letters-typed counter.
- *  - Knows each socket's client IP, so it can push wallet/perks frames to just
- *    that IP's tabs (broadcastToIp) or to everyone (broadcast).
- *
- * The Hono Bun adapter calls the events factory with the request Context, so we
- * derive the IP once per connection in the factory and stash it in ClientState.
- */
-
-const { upgradeWebSocket, websocket } = createBunWebSocket();
-
-interface ClientState {
-  lastTypingAt: number;
-  ip: string;
-}
-
-const clients = new Map<WSContext, ClientState>();
-
-const TYPING_TTL_MS = 2500; // a tab counts as "typing" for this long after a keystroke
-const BROADCAST_MIN_INTERVAL_MS = 250; // throttle: at most one stats frame this often
-
-function countTyping(now: number): number {
-  let n = 0;
-  for (const s of clients.values()) {
-    if (now - s.lastTypingAt <= TYPING_TTL_MS) n++;
-  }
-  return n;
-}
-
-function send(ws: WSContext, payload: string): void {
-  // readyState 1 === OPEN
-  if (ws.readyState === 1) {
-    try {
-      ws.send(payload);
-    } catch {
-      /* ignore broken pipe */
-    }
-  }
-}
-
-// ── Throttled stats broadcast ──────────────────────────────────────────────
-let broadcastScheduled = false;
-let lastBroadcastAt = 0;
-
-async function flushStats(): Promise<void> {
-  broadcastScheduled = false;
-  lastBroadcastAt = Date.now();
-  if (clients.size === 0) return;
-  const distinctIps = new Set<string>();
-  for (const s of clients.values()) distinctIps.add(s.ip);
-  const snapshot = await buildSnapshot({
-    connectedTabs: distinctIps.size,
-    typingNow: countTyping(Date.now()),
-  });
-  const payload = JSON.stringify({ type: "stats", data: snapshot });
-  for (const ws of clients.keys()) send(ws, payload);
-}
-
-function scheduleStats(): void {
-  if (broadcastScheduled) return;
-  broadcastScheduled = true;
-  const wait = Math.max(0, BROADCAST_MIN_INTERVAL_MS - (Date.now() - lastBroadcastAt));
-  setTimeout(() => {
-    void flushStats();
-  }, wait);
-}
-
-// Periodic tick so time-decaying metrics (letters/sec, typing expiry, msgs/min)
-// keep updating even when nobody is interacting.
-setInterval(() => {
-  if (clients.size > 0) void flushStats();
-}, 1000);
-
-// Periodic console log of connected IPs (every 10 s).
-setInterval(() => {
-  if (clients.size === 0) return;
-  const ips = new Set<string>();
-  for (const s of clients.values()) ips.add(s.ip);
-  const lines = [...ips].map((ip) => `  ${ip}`).join("\n");
-  console.log(`[connectés] ${ips.size} IP(s):\n${lines}`);
-}, 10_000);
-
-/** Send an arbitrary frame to every connected tab. */
-export function broadcast(payload: object): void {
-  const str = JSON.stringify(payload);
-  for (const ws of clients.keys()) send(ws, str);
-}
-
-/** Send a frame only to the tabs belonging to one IP (e.g. wallet updates). */
-export function broadcastToIp(ip: string, payload: object): void {
-  const str = JSON.stringify(payload);
-  for (const [ws, state] of clients) {
-    if (state.ip === ip) send(ws, str);
-  }
-}
-
-/** Push a freshly created message to every connected tab. */
-export function broadcastNewMessage(message: unknown): void {
-  broadcast({ type: "message", data: message });
-  scheduleStats(); // totals changed too
-}
-
-/** Hono route handler for GET /ws. The factory receives the request Context. */
-export const wsHandler = upgradeWebSocket((c) => {
-  const ip = getClientIp(c);
-  return {
-    onOpen(_evt, ws) {
-      clients.set(ws, { lastTypingAt: 0, ip });
-      scheduleStats();
-    },
-    onMessage(evt, ws) {
-      let msg: { type?: string; delta?: number } | null = null;
-      try {
-        msg = JSON.parse(typeof evt.data === "string" ? evt.data : "{}");
-      } catch {
-        return;
-      }
-      if (!msg || typeof msg !== "object") return;
-
-      if (msg.type === "typing") {
-        const state = clients.get(ws);
-        if (state) state.lastTypingAt = Date.now();
-        const delta = Number(msg.delta) || 0;
-        if (delta > 0) void recordLettersTyped(delta);
-        scheduleStats();
-      }
-    },
-    onClose(_evt, ws) {
-      clients.delete(ws);
-      scheduleStats();
-    },
-    onError(_evt, ws) {
-      clients.delete(ws);
-    },
-  };
-});
-
-export { websocket };
+import { createBunWebSocket } from "hono/bun";
+import type { WSContext } from "hono/ws";
+import { buildSnapshot, recordLettersTyped } from "./lib/stats";
+import { getClientIp } from "./lib/ip";
+
+/**
+ * Realtime hub: one WebSocket connection = one open tab.
+ *
+ *  - Broadcasts a throttled stats snapshot to every tab.
+ *  - Broadcasts newly created messages so feeds update without polling.
+ *  - Tracks "currently typing" presence and feeds the global letters-typed counter.
+ *  - Knows each socket's client IP, so it can push wallet/perks frames to just
+ *    that IP's tabs (broadcastToIp) or to everyone (broadcast).
+ *
+ * The Hono Bun adapter calls the events factory with the request Context, so we
+ * derive the IP once per connection in the factory and stash it in ClientState.
+ */
+
+const { upgradeWebSocket, websocket } = createBunWebSocket();
+
+interface ClientState {
+  lastTypingAt: number;
+  ip: string;
+}
+
+const clients = new Map<WSContext, ClientState>();
+
+const TYPING_TTL_MS = 2500; // a tab counts as "typing" for this long after a keystroke
+const BROADCAST_MIN_INTERVAL_MS = 250; // throttle: at most one stats frame this often
+
+function countTyping(now: number): number {
+  let n = 0;
+  for (const s of clients.values()) {
+    if (now - s.lastTypingAt <= TYPING_TTL_MS) n++;
+  }
+  return n;
+}
+
+function send(ws: WSContext, payload: string): void {
+  // readyState 1 === OPEN
+  if (ws.readyState === 1) {
+    try {
+      ws.send(payload);
+    } catch {
+      /* ignore broken pipe */
+    }
+  }
+}
+
+// ── Throttled stats broadcast ──────────────────────────────────────────────
+let broadcastScheduled = false;
+let lastBroadcastAt = 0;
+
+async function flushStats(): Promise<void> {
+  broadcastScheduled = false;
+  lastBroadcastAt = Date.now();
+  if (clients.size === 0) return;
+  const distinctIps = new Set<string>();
+  for (const s of clients.values()) distinctIps.add(s.ip);
+  const snapshot = await buildSnapshot({
+    connectedTabs: distinctIps.size,
+    typingNow: countTyping(Date.now()),
+  });
+  const payload = JSON.stringify({ type: "stats", data: snapshot });
+  for (const ws of clients.keys()) send(ws, payload);
+}
+
+function scheduleStats(): void {
+  if (broadcastScheduled) return;
+  broadcastScheduled = true;
+  const wait = Math.max(0, BROADCAST_MIN_INTERVAL_MS - (Date.now() - lastBroadcastAt));
+  setTimeout(() => {
+    void flushStats();
+  }, wait);
+}
+
+// Periodic tick so time-decaying metrics (letters/sec, typing expiry, msgs/min)
+// keep updating even when nobody is interacting.
+setInterval(() => {
+  if (clients.size > 0) void flushStats();
+}, 1000);
+
+// Periodic console log of connected IPs (every 10 s).
+setInterval(() => {
+  if (clients.size === 0) return;
+  const ips = new Set<string>();
+  for (const s of clients.values()) ips.add(s.ip);
+  const lines = [...ips].map((ip) => `  ${ip}`).join("\n");
+  console.log(`[connectés] ${ips.size} IP(s):\n${lines}`);
+}, 10_000);
+
+/** Send an arbitrary frame to every connected tab. */
+export function broadcast(payload: object): void {
+  const str = JSON.stringify(payload);
+  for (const ws of clients.keys()) send(ws, str);
+}
+
+/** Send a frame only to the tabs belonging to one IP (e.g. wallet updates). */
+export function broadcastToIp(ip: string, payload: object): void {
+  const str = JSON.stringify(payload);
+  for (const [ws, state] of clients) {
+    if (state.ip === ip) send(ws, str);
+  }
+}
+
+/** Push a freshly created message to every connected tab. */
+export function broadcastNewMessage(message: unknown): void {
+  broadcast({ type: "message", data: message });
+  scheduleStats(); // totals changed too
+}
+
+/** Hono route handler for GET /ws. The factory receives the request Context. */
+export const wsHandler = upgradeWebSocket((c) => {
+  const ip = getClientIp(c);
+  return {
+    onOpen(_evt, ws) {
+      clients.set(ws, { lastTypingAt: 0, ip });
+      scheduleStats();
+    },
+    onMessage(evt, ws) {
+      let msg: { type?: string; delta?: number } | null = null;
+      try {
+        msg = JSON.parse(typeof evt.data === "string" ? evt.data : "{}");
+      } catch {
+        return;
+      }
+      if (!msg || typeof msg !== "object") return;
+
+      if (msg.type === "typing") {
+        const state = clients.get(ws);
+        if (state) state.lastTypingAt = Date.now();
+        const delta = Number(msg.delta) || 0;
+        if (delta > 0) void recordLettersTyped(delta);
+        scheduleStats();
+      }
+    },
+    onClose(_evt, ws) {
+      clients.delete(ws);
+      scheduleStats();
+    },
+    onError(_evt, ws) {
+      clients.delete(ws);
+    },
+  };
+});
+
+export { websocket };

backend/src/routes/ads.ts

@@ -1,40 +1,40 @@
-import { Hono } from "hono";
-import { listActiveAds, recordImpressions } from "../lib/ads";
-
-const ads = new Hono();
-
-// GET /api/ads?kind=band  → active ad set for that slot (client rotates).
-ads.get("/", async (c) => {
-  const kind = c.req.query("kind") === "casino" ? "casino" : "band";
-  const list = await listActiveAds(kind);
-  // Expose only what the UI needs.
-  return c.json(
-    list.map((a) => ({
-      id: a.id,
-      brand: a.brand,
-      subtitle: a.subtitle,
-      url: a.url,
-      cta: a.cta,
-      icon: a.icon,
-      tone: a.tone,
-      kind: a.kind,
-      ownerIp: a.ownerIp,
-      imageUrl: a.imageUrl,
-    }))
-  );
-});
-
-// POST /api/ads/impressions  { ids: [...] }
-ads.post("/impressions", async (c) => {
-  let body: { ids?: string[] } = {};
-  try {
-    body = await c.req.json();
-  } catch {
-    return c.json({ error: "JSON invalide" }, 400);
-  }
-  const ids = Array.isArray(body.ids) ? body.ids.filter((x) => typeof x === "string") : [];
-  await recordImpressions(ids);
-  return c.json({ ok: true, counted: ids.length });
-});
-
-export default ads;
+import { Hono } from "hono";
+import { listActiveAds, recordImpressions } from "../lib/ads";
+
+const ads = new Hono();
+
+// GET /api/ads?kind=band  → active ad set for that slot (client rotates).
+ads.get("/", async (c) => {
+  const kind = c.req.query("kind") === "casino" ? "casino" : "band";
+  const list = await listActiveAds(kind);
+  // Expose only what the UI needs.
+  return c.json(
+    list.map((a) => ({
+      id: a.id,
+      brand: a.brand,
+      subtitle: a.subtitle,
+      url: a.url,
+      cta: a.cta,
+      icon: a.icon,
+      tone: a.tone,
+      kind: a.kind,
+      ownerIp: a.ownerIp,
+      imageUrl: a.imageUrl,
+    }))
+  );
+});
+
+// POST /api/ads/impressions  { ids: [...] }
+ads.post("/impressions", async (c) => {
+  let body: { ids?: string[] } = {};
+  try {
+    body = await c.req.json();
+  } catch {
+    return c.json({ error: "JSON invalide" }, 400);
+  }
+  const ids = Array.isArray(body.ids) ? body.ids.filter((x) => typeof x === "string") : [];
+  await recordImpressions(ids);
+  return c.json({ ok: true, counted: ids.length });
+});
+
+export default ads;

backend/src/routes/alert.ts

@@ -1,67 +1,67 @@
-import { Hono } from "hono";
-import { getClientIp, isFree } from "../lib/ip";
-import { prisma } from "../lib/prisma";
-import { redis } from "../lib/redis";
-import { spend } from "../lib/wallet";
-import { broadcast } from "../realtime";
-
-const alert = new Hono();
-
-const COOLDOWN_MS = 60_000; // server-enforced global cooldown
-const MAX_DURATION_MS = 5_000; // server clamps how long the sound may play
-const ALERT_PRICE = 999; // centi-credits per fire (consumable)
-const COOLDOWN_KEY = "xip:alert:cooldown";
-
-// POST /api/alert  { soundUrl? }
-alert.post("/", async (c) => {
-  const ip = getClientIp(c);
-
-  let body: { soundUrl?: string } = {};
-  try {
-    body = await c.req.json();
-  } catch {
-    /* no body is fine */
-  }
-
-  // Must own the audio-alert entitlement (localhost bypasses).
-  if (!isFree(ip)) {
-    const owned = await prisma.entitlement.findFirst({
-      where: { ip, kind: "audio-alert", active: true },
-    });
-    if (!owned) {
-      return c.json({ error: "Débloque l'alerte audio dans le Shop" }, 402);
-    }
-  }
-
-  // Global cooldown via Redis NX+PX.
-  const ok = await redis
-    .set(COOLDOWN_KEY, ip, "PX", COOLDOWN_MS, "NX")
-    .catch(() => null);
-  if (ok !== "OK") {
-    const ttl = await redis.pttl(COOLDOWN_KEY).catch(() => 0);
-    return c.json({ error: "Cooldown actif", retryInMs: Math.max(0, ttl) }, 429);
-  }
-
-  // Charge the consumable (skipped for localhost free mode).
-  try {
-    await spend(ip, ALERT_PRICE, "audio-alert");
-  } catch {
-    await redis.del(COOLDOWN_KEY).catch(() => {});
-    return c.json({ error: "Crédits insuffisants" }, 402);
-  }
-
-  // Validate a supplied mp3 URL (must be one of our own /api/uploads/ paths).
-  let soundUrl: string | undefined;
-  if (typeof body.soundUrl === "string" && body.soundUrl.includes("/api/uploads/")) {
-    soundUrl = body.soundUrl;
-  }
-
-  broadcast({
-    type: "alert",
-    data: { ip, soundUrl, maxDurationMs: MAX_DURATION_MS, volume: 1 },
-  });
-
-  return c.json({ ok: true });
-});
-
-export default alert;
+import { Hono } from "hono";
+import { getClientIp, isFree } from "../lib/ip";
+import { prisma } from "../lib/prisma";
+import { redis } from "../lib/redis";
+import { spend } from "../lib/wallet";
+import { broadcast } from "../realtime";
+
+const alert = new Hono();
+
+const COOLDOWN_MS = 60_000; // server-enforced global cooldown
+const MAX_DURATION_MS = 5_000; // server clamps how long the sound may play
+const ALERT_PRICE = 999; // centi-credits per fire (consumable)
+const COOLDOWN_KEY = "xip:alert:cooldown";
+
+// POST /api/alert  { soundUrl? }
+alert.post("/", async (c) => {
+  const ip = getClientIp(c);
+
+  let body: { soundUrl?: string } = {};
+  try {
+    body = await c.req.json();
+  } catch {
+    /* no body is fine */
+  }
+
+  // Must own the audio-alert entitlement (localhost bypasses).
+  if (!isFree(ip)) {
+    const owned = await prisma.entitlement.findFirst({
+      where: { ip, kind: "audio-alert", active: true },
+    });
+    if (!owned) {
+      return c.json({ error: "Débloque l'alerte audio dans le Shop" }, 402);
+    }
+  }
+
+  // Global cooldown via Redis NX+PX.
+  const ok = await redis
+    .set(COOLDOWN_KEY, ip, "PX", COOLDOWN_MS, "NX")
+    .catch(() => null);
+  if (ok !== "OK") {
+    const ttl = await redis.pttl(COOLDOWN_KEY).catch(() => 0);
+    return c.json({ error: "Cooldown actif", retryInMs: Math.max(0, ttl) }, 429);
+  }
+
+  // Charge the consumable (skipped for localhost free mode).
+  try {
+    await spend(ip, ALERT_PRICE, "audio-alert");
+  } catch {
+    await redis.del(COOLDOWN_KEY).catch(() => {});
+    return c.json({ error: "Crédits insuffisants" }, 402);
+  }
+
+  // Validate a supplied mp3 URL (must be one of our own /api/uploads/ paths).
+  let soundUrl: string | undefined;
+  if (typeof body.soundUrl === "string" && body.soundUrl.includes("/api/uploads/")) {
+    soundUrl = body.soundUrl;
+  }
+
+  broadcast({
+    type: "alert",
+    data: { ip, soundUrl, maxDurationMs: MAX_DURATION_MS, volume: 1 },
+  });
+
+  return c.json({ ok: true });
+});
+
+export default alert;

backend/src/routes/messages.ts

@@ -1,122 +1,188 @@
-import { Hono } from "hono";
-import { prisma } from "../lib/prisma";
-import { getClientIp, isFree } from "../lib/ip";
-import { recordMessage } from "../lib/stats";
-import { broadcastNewMessage } from "../realtime";
-import { getPerksForIp, getPerksForIps } from "../lib/perks";
-
-const messages = new Hono();
-
-const RICH_MAX = 64 * 1024; // 64 KB cap on rich markup
-
-/** Does this IP own the entitlement needed for a rich tier? */
-async function ownsRich(ip: string, mode: "htmlcss" | "js"): Promise<boolean> {
-  if (isFree(ip)) return true;
-  const kind = mode === "js" ? "rich-js" : "rich-htmlcss";
-  const now = new Date();
-  const rows = await prisma.entitlement.findMany({ where: { ip, kind, active: true } });
-  return rows.some((e) => !e.expiresAt || e.expiresAt >= now);
-}
-
-// GET /api/messages — top-level threads with replies, annotated with author perks.
-messages.get("/", async (c) => {
-  const data = await prisma.message.findMany({
-    where: { parentId: null },
-    orderBy: { createdAt: "desc" },
-    take: 50,
-    include: {
-      attachments: { select: { id: true, filename: true, mimeType: true, size: true } },
-      replies: {
-        orderBy: { createdAt: "asc" },
-        include: {
-          attachments: { select: { id: true, filename: true, mimeType: true, size: true } },
-        },
-      },
-    },
-  });
-
-  // Collect every distinct author IP (threads + replies) and resolve perks once.
-  const ips = new Set<string>();
-  for (const m of data) {
-    ips.add(m.authorIp);
-    for (const r of m.replies) ips.add(r.authorIp);
-  }
-  const perks = await getPerksForIps([...ips]);
-
-  const annotated = data.map((m) => ({
-    ...m,
-    authorPerks: perks[m.authorIp] ?? {},
-    replies: m.replies.map((r) => ({ ...r, authorPerks: perks[r.authorIp] ?? {} })),
-  }));
-
-  return c.json(annotated);
-});
-
-// POST /api/messages — create a message or reply (optionally rich + attachments)
-messages.post("/", async (c) => {
-  const ip = getClientIp(c);
-
-  const body = await c.req.json<{
-    content: string;
-    parentId?: string;
-    richMode?: "htmlcss" | "js";
-    richContent?: string;
-    attachmentIds?: string[];
-  }>();
-
-  if (!body.content || body.content.trim().length === 0) {
-    return c.json({ error: "Content is required" }, 400);
-  }
-  if (body.content.length > 267) {
-    return c.json({ error: "Content exceeds 267 characters" }, 400);
-  }
-
-  // Rich content: validate tier ownership + size.
-  let richMode: "none" | "htmlcss" | "js" = "none";
-  let richContent: string | null = null;
-  if (body.richMode && body.richContent && body.richContent.trim().length > 0) {
-    if (body.richMode !== "htmlcss" && body.richMode !== "js") {
-      return c.json({ error: "richMode invalide" }, 400);
-    }
-    if (!(await ownsRich(ip, body.richMode))) {
-      return c.json({ error: "Fonctionnalité non débloquée" }, 402);
-    }
-    if (body.richContent.length > RICH_MAX) {
-      return c.json({ error: "Contenu riche trop volumineux" }, 413);
-    }
-    richMode = body.richMode;
-    richContent = body.richContent;
-  }
-
-  const content = body.content.trim();
-  const parentId = body.parentId ?? null;
-
-  const message = await prisma.message.create({
-    data: { content, authorIp: ip, parentId, richMode, richContent },
-  });
-
-  // Link any pre-uploaded attachments owned by this IP to the new message.
-  let attachments: any[] = [];
-  if (Array.isArray(body.attachmentIds) && body.attachmentIds.length > 0) {
-    await prisma.attachment.updateMany({
-      where: { id: { in: body.attachmentIds }, ip, messageId: null },
-      data: { messageId: message.id },
-    });
-    attachments = await prisma.attachment.findMany({
-      where: { messageId: message.id },
-      select: { id: true, filename: true, mimeType: true, size: true },
-    });
-  }
-
-  // Update persistent stats and push the message to every connected tab,
-  // annotated with the author's perks so it renders correctly everywhere.
-  void recordMessage(content.length, parentId !== null);
-  const authorPerks = await getPerksForIp(ip);
-  const enriched = { ...message, attachments, authorPerks };
-  const payload = parentId === null ? { ...enriched, replies: [] } : enriched;
-  broadcastNewMessage(payload);
-
-  return c.json(enriched, 201);
-});
-
-export default messages;
+import { Hono } from "hono";
+import { prisma } from "../lib/prisma";
+import { getClientIp, isFree } from "../lib/ip";
+import { recordMessage } from "../lib/stats";
+import { broadcastNewMessage } from "../realtime";
+import { getPerksForIp, getPerksForIps } from "../lib/perks";
+import { getGeoForIp, getGeoForIps } from "../lib/geo";
+
+const messages = new Hono();
+
+const RICH_MAX = 64 * 1024; // 64 KB cap on rich markup
+
+/** Does this IP own the entitlement needed for a rich tier? */
+async function ownsRich(ip: string, mode: "htmlcss" | "js"): Promise<boolean> {
+  if (isFree(ip)) return true;
+  const kind = mode === "js" ? "rich-js" : "rich-htmlcss";
+  const now = new Date();
+  const rows = await prisma.entitlement.findMany({ where: { ip, kind, active: true } });
+  return rows.some((e) => !e.expiresAt || e.expiresAt >= now);
+}
+
+// What we always include with a thread: its attachments + replies (+ their attachments).
+const THREAD_INCLUDE = {
+  attachments: { select: { id: true, filename: true, mimeType: true, size: true } },
+  replies: {
+    orderBy: { createdAt: "asc" as const },
+    include: {
+      attachments: { select: { id: true, filename: true, mimeType: true, size: true } },
+    },
+  },
+} as const;
+
+/** Annotate a list of threads with each author's perks + geo (threads + replies). */
+async function annotateThreads<T extends { authorIp: string; replies: { authorIp: string }[] }>(
+  threads: T[]
+) {
+  const ips = new Set<string>();
+  for (const m of threads) {
+    ips.add(m.authorIp);
+    for (const r of m.replies) ips.add(r.authorIp);
+  }
+  const [perks, geo] = await Promise.all([
+    getPerksForIps([...ips]),
+    getGeoForIps([...ips]),
+  ]);
+  return threads.map((m) => ({
+    ...m,
+    authorPerks: perks[m.authorIp] ?? {},
+    authorGeo: geo[m.authorIp] ?? null,
+    replies: m.replies.map((r) => ({
+      ...r,
+      authorPerks: perks[r.authorIp] ?? {},
+      authorGeo: geo[r.authorIp] ?? null,
+    })),
+  }));
+}
+
+// GET /api/messages — top-level threads with replies, annotated with author perks.
+// Optional query params (all backward-compatible — no params = the original feed):
+//   q      : keyword search on content (case-insensitive)
+//   before : cursor — only threads strictly older than this ISO date (pagination)
+//   limit  : page size (default 50, max 100)
+// Returns { items, nextCursor, hasMore }.
+messages.get("/", async (c) => {
+  const q = c.req.query("q")?.trim();
+  const before = c.req.query("before");
+  const limit = Math.min(Math.max(Number(c.req.query("limit")) || 50, 1), 100);
+
+  const where: any = { parentId: null };
+  if (q) where.content = { contains: q, mode: "insensitive" };
+  if (before) {
+    const d = new Date(before);
+    if (!isNaN(d.getTime())) where.createdAt = { lt: d };
+  }
+
+  // Fetch one extra row to know whether there's a next page.
+  const rows = await prisma.message.findMany({
+    where,
+    orderBy: { createdAt: "desc" },
+    take: limit + 1,
+    include: THREAD_INCLUDE,
+  });
+
+  const hasMore = rows.length > limit;
+  const page = hasMore ? rows.slice(0, limit) : rows;
+  const items = await annotateThreads(page);
+  const nextCursor = hasMore ? page[page.length - 1]!.createdAt.toISOString() : null;
+
+  // Backward-compatible: with no query params, return the bare array the live
+  // chat feed (useMessages) already consumes. The explorer passes params and
+  // gets the paginated envelope.
+  const isLegacy = !q && !before && c.req.query("limit") === undefined;
+  return c.json(isLegacy ? items : { items, nextCursor, hasMore });
+});
+
+// GET /api/messages/:id — a single top-level thread (with its replies), annotated.
+messages.get("/:id", async (c) => {
+  const id = c.req.param("id");
+  const message = await prisma.message.findUnique({
+    where: { id },
+    include: THREAD_INCLUDE,
+  });
+  if (!message || message.parentId !== null) {
+    return c.json({ error: "Message introuvable" }, 404);
+  }
+  const [annotated] = await annotateThreads([message]);
+  return c.json(annotated);
+});
+
+// POST /api/messages — create a message or reply (optionally rich + attachments)
+messages.post("/", async (c) => {
+  const ip = getClientIp(c);
+
+  const body = await c.req.json<{
+    content?: string;
+    parentId?: string;
+    richMode?: "htmlcss" | "js";
+    richContent?: string;
+    attachmentIds?: string[];
+  }>();
+
+  // A message is valid if it has ANY of: plain text, rich content, or attachments.
+  // (Rich-only and file-only messages are legitimate — no need for placeholder text.)
+  const hasContent = typeof body.content === "string" && body.content.trim().length > 0;
+  const hasRich =
+    !!body.richMode && !!body.richContent && body.richContent.trim().length > 0;
+  const hasAttachments =
+    Array.isArray(body.attachmentIds) && body.attachmentIds.length > 0;
+
+  if (!hasContent && !hasRich && !hasAttachments) {
+    return c.json({ error: "Message vide" }, 400);
+  }
+  if (hasContent && body.content!.trim().length > 267) {
+    return c.json({ error: "Content exceeds 267 characters" }, 400);
+  }
+
+  // Rich content: validate tier ownership + size.
+  let richMode: "none" | "htmlcss" | "js" = "none";
+  let richContent: string | null = null;
+  if (body.richMode && body.richContent && body.richContent.trim().length > 0) {
+    if (body.richMode !== "htmlcss" && body.richMode !== "js") {
+      return c.json({ error: "richMode invalide" }, 400);
+    }
+    if (!(await ownsRich(ip, body.richMode))) {
+      return c.json({ error: "Fonctionnalité non débloquée" }, 402);
+    }
+    if (body.richContent.length > RICH_MAX) {
+      return c.json({ error: "Contenu riche trop volumineux" }, 413);
+    }
+    richMode = body.richMode;
+    richContent = body.richContent;
+  }
+
+  const content = (body.content ?? "").trim();
+  const parentId = body.parentId ?? null;
+
+  const message = await prisma.message.create({
+    data: { content, authorIp: ip, parentId, richMode, richContent },
+  });
+
+  // Link any pre-uploaded attachments owned by this IP to the new message.
+  let attachments: any[] = [];
+  if (Array.isArray(body.attachmentIds) && body.attachmentIds.length > 0) {
+    await prisma.attachment.updateMany({
+      where: { id: { in: body.attachmentIds }, ip, messageId: null },
+      data: { messageId: message.id },
+    });
+    attachments = await prisma.attachment.findMany({
+      where: { messageId: message.id },
+      select: { id: true, filename: true, mimeType: true, size: true },
+    });
+  }
+
+  // Update persistent stats and push the message to every connected tab,
+  // annotated with the author's perks so it renders correctly everywhere.
+  void recordMessage(content.length, parentId !== null);
+  const [authorPerks, authorGeo] = await Promise.all([
+    getPerksForIp(ip),
+    getGeoForIp(ip),
+  ]);
+  const enriched = { ...message, attachments, authorPerks, authorGeo };
+  const payload = parentId === null ? { ...enriched, replies: [] } : enriched;
+  broadcastNewMessage(payload);
+
+  return c.json(enriched, 201);
+});
+
+export default messages;

backend/src/routes/perks.ts

@@ -1,14 +1,14 @@
-import { Hono } from "hono";
-import { getPerksForIps } from "../lib/perks";
-
-const perks = new Hono();
-
-// GET /api/perks?ips=a,b,c — batch perk lookup for authors already on screen.
-perks.get("/", async (c) => {
-  const raw = c.req.query("ips") || "";
-  const ips = raw.split(",").map((s) => s.trim()).filter(Boolean);
-  if (ips.length === 0) return c.json({});
-  return c.json(await getPerksForIps(ips));
-});
-
-export default perks;
+import { Hono } from "hono";
+import { getPerksForIps } from "../lib/perks";
+
+const perks = new Hono();
+
+// GET /api/perks?ips=a,b,c — batch perk lookup for authors already on screen.
+perks.get("/", async (c) => {
+  const raw = c.req.query("ips") || "";
+  const ips = raw.split(",").map((s) => s.trim()).filter(Boolean);
+  if (ips.length === 0) return c.json({});
+  return c.json(await getPerksForIps(ips));
+});
+
+export default perks;

backend/src/routes/shop.ts

@@ -1,84 +1,86 @@
-import { Hono } from "hono";
-import { getClientIp } from "../lib/ip";
-import { getWallet } from "../lib/wallet";
-import {
-  listProducts,
-  getProduct,
-  getEntitlements,
-  purchase,
-  refreshPerks,
-  PurchaseError,
-  type PurchaseOptions,
-} from "../lib/catalog";
-import { broadcast, broadcastToIp } from "../realtime";
-
-const shop = new Hono();
-
-// GET /api/shop/products?category=cosmetiques
-shop.get("/products", async (c) => {
-  const category = c.req.query("category") || undefined;
-  return c.json(await listProducts(category));
-});
-
-// GET /api/shop/products/:id
-shop.get("/products/:id", async (c) => {
-  const p = await getProduct(c.req.param("id"));
-  if (!p) return c.json({ error: "Produit introuvable" }, 404);
-  return c.json(p);
-});
-
-// GET /api/shop/me — my balance + owned entitlements
-shop.get("/me", async (c) => {
-  const ip = getClientIp(c);
-  const [wallet, entitlements] = await Promise.all([
-    getWallet(ip),
-    getEntitlements(ip),
-  ]);
-  return c.json({ wallet, entitlements });
-});
-
-// POST /api/shop/purchase  { productId, options }
-shop.post("/purchase", async (c) => {
-  const ip = getClientIp(c);
-  let body: { productId?: string; options?: PurchaseOptions } = {};
-  try {
-    body = await c.req.json();
-  } catch {
-    return c.json({ error: "Corps JSON invalide" }, 400);
-  }
-  if (!body.productId) return c.json({ error: "productId requis" }, 400);
-
-  try {
-    const { result, visiblePerkChanged, adCreated } = await purchase(
-      ip,
-      body.productId,
-      body.options ?? {}
-    );
-
-    // Wallet update → only this IP's tabs.
-    const wallet = await getWallet(ip);
-    broadcastToIp(ip, { type: "wallet", data: wallet });
-
-    // Perks: always tell the buyer; if a *visible* perk changed, tell everyone
-    // so existing messages by this IP re-render with the skin/pet.
-    const perks = await refreshPerks(ip);
-    if (visiblePerkChanged) {
-      broadcast({ type: "perks", data: { ip, perks } });
-    } else {
-      broadcastToIp(ip, { type: "perks", data: { ip, perks } });
-    }
-
-    // New user ad entered rotation → nudge everyone to refetch ads.
-    if (adCreated) broadcast({ type: "ads", data: { reason: "new-user-ad" } });
-
-    return c.json(result, 201);
-  } catch (e) {
-    if (e instanceof PurchaseError) {
-      return c.json({ error: e.message }, e.status as 400);
-    }
-    console.error("purchase error:", (e as Error).message);
-    return c.json({ error: "Achat impossible" }, 500);
-  }
-});
-
-export default shop;
+import { Hono } from "hono";
+import { getClientIp } from "../lib/ip";
+import { getWallet } from "../lib/wallet";
+import {
+  listProducts,
+  getProduct,
+  getEntitlements,
+  purchase,
+  refreshPerks,
+  PurchaseError,
+  type PurchaseOptions,
+} from "../lib/catalog";
+import { broadcast, broadcastToIp } from "../realtime";
+import { getPerksForIp } from "../lib/perks";
+
+const shop = new Hono();
+
+// GET /api/shop/products?category=cosmetiques
+shop.get("/products", async (c) => {
+  const category = c.req.query("category") || undefined;
+  return c.json(await listProducts(category));
+});
+
+// GET /api/shop/products/:id
+shop.get("/products/:id", async (c) => {
+  const p = await getProduct(c.req.param("id"));
+  if (!p) return c.json({ error: "Produit introuvable" }, 404);
+  return c.json(p);
+});
+
+// GET /api/shop/me — my balance + owned entitlements
+shop.get("/me", async (c) => {
+  const ip = getClientIp(c);
+  const [wallet, entitlements, myPerks] = await Promise.all([
+    getWallet(ip),
+    getEntitlements(ip),
+    getPerksForIp(ip),
+  ]);
+  return c.json({ wallet, entitlements, myPerks });
+});
+
+// POST /api/shop/purchase  { productId, options }
+shop.post("/purchase", async (c) => {
+  const ip = getClientIp(c);
+  let body: { productId?: string; options?: PurchaseOptions } = {};
+  try {
+    body = await c.req.json();
+  } catch {
+    return c.json({ error: "Corps JSON invalide" }, 400);
+  }
+  if (!body.productId) return c.json({ error: "productId requis" }, 400);
+
+  try {
+    const { result, visiblePerkChanged, adCreated } = await purchase(
+      ip,
+      body.productId,
+      body.options ?? {}
+    );
+
+    // Wallet update → only this IP's tabs.
+    const wallet = await getWallet(ip);
+    broadcastToIp(ip, { type: "wallet", data: wallet });
+
+    // Perks: always tell the buyer; if a *visible* perk changed, tell everyone
+    // so existing messages by this IP re-render with the skin/pet.
+    const perks = await refreshPerks(ip);
+    if (visiblePerkChanged) {
+      broadcast({ type: "perks", data: { ip, perks } });
+    } else {
+      broadcastToIp(ip, { type: "perks", data: { ip, perks } });
+    }
+
+    // New user ad entered rotation → nudge everyone to refetch ads.
+    if (adCreated) broadcast({ type: "ads", data: { reason: "new-user-ad" } });
+
+    return c.json(result, 201);
+  } catch (e) {
+    if (e instanceof PurchaseError) {
+      return c.json({ error: e.message }, e.status as 400);
+    }
+    console.error("purchase error:", (e as Error).message);
+    return c.json({ error: "Achat impossible" }, 500);
+  }
+});
+
+export default shop;

backend/src/routes/uploads.ts

@@ -1,93 +1,93 @@
-import { Hono } from "hono";
-import { randomUUID } from "node:crypto";
-import { prisma } from "../lib/prisma";
-import { getClientIp, isFree } from "../lib/ip";
-import { storeFile, absolutePathFor } from "../lib/storage";
-
-const uploads = new Hono();
-
-const FREE_LIMIT = 1_000_000; // 1 Mo for the free tier (README)
-const ABSOLUTE_MAX = 50_000_000; // hard cap even for paid, to protect the dev box
-
-async function ownsNoFileLimit(ip: string): Promise<boolean> {
-  if (isFree(ip)) return true;
-  const rows = await prisma.entitlement.findMany({
-    where: { ip, kind: "no-file-limit", active: true },
-  });
-  return rows.length > 0;
-}
-
-// POST /api/uploads (multipart) — store a file, return its metadata.
-uploads.post("/", async (c) => {
-  const ip = getClientIp(c);
-
-  let body: Record<string, unknown>;
-  try {
-    body = await c.req.parseBody();
-  } catch {
-    return c.json({ error: "Upload invalide" }, 400);
-  }
-  const file = body["file"];
-  if (!(file instanceof File)) {
-    return c.json({ error: "Aucun fichier" }, 400);
-  }
-
-  if (file.size > ABSOLUTE_MAX) {
-    return c.json({ error: "Fichier trop volumineux (50 Mo max absolu)" }, 413);
-  }
-  if (file.size > FREE_LIMIT && !(await ownsNoFileLimit(ip))) {
-    return c.json(
-      { error: "Fichier > 1 Mo : débloque « Fichiers illimités » dans le Shop 💸" },
-      413
-    );
-  }
-
-  const id = randomUUID();
-  let stored;
-  try {
-    stored = await storeFile(id, file);
-  } catch {
-    return c.json({ error: "Échec d'écriture" }, 500);
-  }
-
-  const attachment = await prisma.attachment.create({
-    data: {
-      id,
-      ip,
-      filename: file.name || "fichier",
-      mimeType: file.type || "application/octet-stream",
-      size: file.size,
-      storagePath: stored.storagePath,
-    },
-    select: { id: true, filename: true, mimeType: true, size: true },
-  });
-
-  return c.json(attachment, 201);
-});
-
-// GET /uploads/:id — serve the stored bytes. Images inline; everything else is
-// forced to download (never rendered same-origin, never executed).
-uploads.get("/:id", async (c) => {
-  const id = c.req.param("id");
-  const att = await prisma.attachment.findUnique({ where: { id } });
-  if (!att) return c.json({ error: "Introuvable" }, 404);
-
-  let file;
-  try {
-    file = Bun.file(absolutePathFor(att.storagePath));
-  } catch {
-    return c.json({ error: "Introuvable" }, 404);
-  }
-  if (!(await file.exists())) return c.json({ error: "Introuvable" }, 404);
-
-  const isImage = att.mimeType.startsWith("image/");
-  const headers: Record<string, string> = {
-    // Images may render inline; anything else downloads. Never serve as HTML.
-    "Content-Type": isImage ? att.mimeType : "application/octet-stream",
-    "Content-Disposition": `${isImage ? "inline" : "attachment"}; filename="${att.filename.replace(/"/g, "")}"`,
-    "X-Content-Type-Options": "nosniff",
-  };
-  return new Response(file, { headers });
-});
-
-export default uploads;
+import { Hono } from "hono";
+import { randomUUID } from "node:crypto";
+import { prisma } from "../lib/prisma";
+import { getClientIp, isFree } from "../lib/ip";
+import { storeFile, absolutePathFor } from "../lib/storage";
+
+const uploads = new Hono();
+
+const FREE_LIMIT = 1_000_000; // 1 Mo for the free tier (README)
+const ABSOLUTE_MAX = 50_000_000; // hard cap even for paid, to protect the dev box
+
+async function ownsNoFileLimit(ip: string): Promise<boolean> {
+  if (isFree(ip)) return true;
+  const rows = await prisma.entitlement.findMany({
+    where: { ip, kind: "no-file-limit", active: true },
+  });
+  return rows.length > 0;
+}
+
+// POST /api/uploads (multipart) — store a file, return its metadata.
+uploads.post("/", async (c) => {
+  const ip = getClientIp(c);
+
+  let body: Record<string, unknown>;
+  try {
+    body = await c.req.parseBody();
+  } catch {
+    return c.json({ error: "Upload invalide" }, 400);
+  }
+  const file = body["file"];
+  if (!(file instanceof File)) {
+    return c.json({ error: "Aucun fichier" }, 400);
+  }
+
+  if (file.size > ABSOLUTE_MAX) {
+    return c.json({ error: "Fichier trop volumineux (50 Mo max absolu)" }, 413);
+  }
+  if (file.size > FREE_LIMIT && !(await ownsNoFileLimit(ip))) {
+    return c.json(
+      { error: "Fichier > 1 Mo : débloque « Fichiers illimités » dans le Shop 💸" },
+      413
+    );
+  }
+
+  const id = randomUUID();
+  let stored;
+  try {
+    stored = await storeFile(id, file);
+  } catch {
+    return c.json({ error: "Échec d'écriture" }, 500);
+  }
+
+  const attachment = await prisma.attachment.create({
+    data: {
+      id,
+      ip,
+      filename: file.name || "fichier",
+      mimeType: file.type || "application/octet-stream",
+      size: file.size,
+      storagePath: stored.storagePath,
+    },
+    select: { id: true, filename: true, mimeType: true, size: true },
+  });
+
+  return c.json(attachment, 201);
+});
+
+// GET /uploads/:id — serve the stored bytes. Images inline; everything else is
+// forced to download (never rendered same-origin, never executed).
+uploads.get("/:id", async (c) => {
+  const id = c.req.param("id");
+  const att = await prisma.attachment.findUnique({ where: { id } });
+  if (!att) return c.json({ error: "Introuvable" }, 404);
+
+  let file;
+  try {
+    file = Bun.file(absolutePathFor(att.storagePath));
+  } catch {
+    return c.json({ error: "Introuvable" }, 404);
+  }
+  if (!(await file.exists())) return c.json({ error: "Introuvable" }, 404);
+
+  const isImage = att.mimeType.startsWith("image/");
+  const headers: Record<string, string> = {
+    // Images may render inline; anything else downloads. Never serve as HTML.
+    "Content-Type": isImage ? att.mimeType : "application/octet-stream",
+    "Content-Disposition": `${isImage ? "inline" : "attachment"}; filename="${att.filename.replace(/"/g, "")}"`,
+    "X-Content-Type-Options": "nosniff",
+  };
+  return new Response(file, { headers });
+});
+
+export default uploads;

backend/src/routes/wallet.ts

@@ -1,22 +1,22 @@
-import { Hono } from "hono";
-import { getClientIp } from "../lib/ip";
-import { getWallet, topUp } from "../lib/wallet";
-import { broadcastToIp } from "../realtime";
-
-const wallet = new Hono();
-
-// GET /api/wallet — current balance + freeMode for the calling IP.
-wallet.get("/", async (c) => {
-  return c.json(await getWallet(getClientIp(c)));
-});
-
-// POST /api/wallet/topup — free, instant, satirical recharge.
-wallet.post("/topup", async (c) => {
-  const ip = getClientIp(c);
-  const view = await topUp(ip);
-  // Push the new balance to every tab of this IP.
-  broadcastToIp(ip, { type: "wallet", data: view });
-  return c.json(view);
-});
-
-export default wallet;
+import { Hono } from "hono";
+import { getClientIp } from "../lib/ip";
+import { getWallet, topUp } from "../lib/wallet";
+import { broadcastToIp } from "../realtime";
+
+const wallet = new Hono();
+
+// GET /api/wallet — current balance + freeMode for the calling IP.
+wallet.get("/", async (c) => {
+  return c.json(await getWallet(getClientIp(c)));
+});
+
+// POST /api/wallet/topup — free, instant, satirical recharge.
+wallet.post("/topup", async (c) => {
+  const ip = getClientIp(c);
+  const view = await topUp(ip);
+  // Push the new balance to every tab of this IP.
+  broadcastToIp(ip, { type: "wallet", data: view });
+  return c.json(view);
+});
+
+export default wallet;

backend/tsconfig.json

@@ -1,12 +1,12 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "strict": true,
-    "skipLibCheck": true,
-    "noEmit": true,
-    "types": ["bun-types"]
-  },
-  "include": ["src/**/*.ts", "prisma/**/*.ts"]
-}
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "types": ["bun"]
+  },
+  "include": ["src/**/*.ts", "prisma/**/*.ts"]
+}

bun.lock

@@ -23,21 +23,24 @@
       "name": "xip-frontend",
       "version": "0.0.1",
       "dependencies": {
-        "@ionic/vue": "^8.3.0",
-        "@ionic/vue-router": "^8.3.0",
-        "ionicons": "^7.4.0",
         "vue": "^3.5.0",
         "vue-router": "^4.4.0",
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.1.0",
+        "@vitest/coverage-v8": "^2.1.0",
+        "@vue/test-utils": "^2.4.6",
+        "happy-dom": "^15.0.0",
         "typescript": "^5.6.0",
         "vite": "^5.4.0",
+        "vitest": "^2.1.0",
         "vue-tsc": "^2.1.0",
       },
     },
   },
   "packages": {
+    "@ampproject/remapping": ["@ampproject/remapping@2.3.0", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw=="],
+
     "@babel/helper-string-parser": ["@babel/helper-string-parser@7.29.7", "", {}, "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw=="],
 
     "@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.29.7", "", {}, "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg=="],
@@ -46,6 +49,8 @@
 
     "@babel/types": ["@babel/types@7.29.7", "", { "dependencies": { "@babel/helper-string-parser": "^7.29.7", "@babel/helper-validator-identifier": "^7.29.7" } }, "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA=="],
 
+    "@bcoe/v8-coverage": ["@bcoe/v8-coverage@0.2.3", "", {}, "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw=="],
+
     "@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.21.5", "", { "os": "aix", "cpu": "ppc64" }, "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ=="],
 
     "@esbuild/android-arm": ["@esbuild/android-arm@0.21.5", "", { "os": "android", "cpu": "arm" }, "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg=="],
@@ -92,16 +97,24 @@
 
     "@esbuild/win32-x64": ["@esbuild/win32-x64@0.21.5", "", { "os": "win32", "cpu": "x64" }, "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw=="],
 
-    "@ionic/core": ["@ionic/core@8.8.8", "", { "dependencies": { "@stencil/core": "4.43.0", "ionicons": "^8.0.13", "tslib": "^2.1.0" } }, "sha512-GGvYtEzLtn1gBUC1/vb4pvA3gQzYskTNVIsvdTVIgnwLtdt70rwTibrZRSqmkyHeqpjg/u3+9XsM2c0kzc/V3w=="],
-
-    "@ionic/vue": ["@ionic/vue@8.8.8", "", { "dependencies": { "@ionic/core": "8.8.8", "@stencil/vue-output-target": "0.10.7", "ionicons": "^8.0.13" } }, "sha512-7Yfv6HUPpKXqYy9qWtx/8Cntn7DzskooUCSFoIjj35sUXRyTwEUWFnQM0AqGkxH+qtO5PeCPwq9VzBdVzqIgDA=="],
-
-    "@ionic/vue-router": ["@ionic/vue-router@8.8.8", "", { "dependencies": { "@ionic/vue": "8.8.8" } }, "sha512-mdofM1BXUCWO/J5ourldPQxULSV14rJ1ZrRgGHLFZ9UFEjgvYlPF4jq0Kk2j1hsrwuPpau/ehJM4GFmELGecoA=="],
-
     "@ioredis/commands": ["@ioredis/commands@1.10.0", "", {}, "sha512-UmeW7z4LfctwoQ5wkhVzgq8tXkreED2xZGpX+Bg+zA+WJFZCT6c062AfCK/Dfk81xZnnwdhJCUMkitihRaoC2Q=="],
 
+    "@isaacs/cliui": ["@isaacs/cliui@8.0.2", "", { "dependencies": { "string-width": "^5.1.2", "string-width-cjs": "npm:string-width@^4.2.0", "strip-ansi": "^7.0.1", "strip-ansi-cjs": "npm:strip-ansi@^6.0.1", "wrap-ansi": "^8.1.0", "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0" } }, "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA=="],
+
+    "@istanbuljs/schema": ["@istanbuljs/schema@0.1.6", "", {}, "sha512-+Sg6GCR/wy1oSmQDFq4LQDAhm3ETKnorxN+y5nbLULOR3P0c14f2Wurzj3/xqPXtasLFfHd5iRFQ7AJt4KH2cw=="],
+
+    "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
+
+    "@jridgewell/resolve-uri": ["@jridgewell/resolve-uri@3.1.2", "", {}, "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="],
+
     "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.5", "", {}, "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="],
 
+    "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
+
+    "@one-ini/wasm": ["@one-ini/wasm@0.1.1", "", {}, "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw=="],
+
+    "@pkgjs/parseargs": ["@pkgjs/parseargs@0.11.0", "", {}, "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg=="],
+
     "@prisma/client": ["@prisma/client@5.22.0", "", { "peerDependencies": { "prisma": "*" }, "optionalPeers": ["prisma"] }, "sha512-M0SVXfyHnQREBKxCgyo7sffrKttwE6R8PMq330MIUF0pTwjUhLbW84pFDlf06B27XyCR++VtjugEnIHdr07SVA=="],
 
     "@prisma/debug": ["@prisma/debug@5.22.0", "", {}, "sha512-AUt44v3YJeggO2ZU5BkXI7M4hu9BF2zzH2iF2V5pyXT/lRTyWiElZ7It+bRH1EshoMRxHgpYg4VB6rCM+mG5jQ=="],
@@ -164,10 +177,6 @@
 
     "@rollup/rollup-win32-x64-msvc": ["@rollup/rollup-win32-x64-msvc@4.60.4", "", { "os": "win32", "cpu": "x64" }, "sha512-QVTUovf40zgTqlFVrKA1uXMVvU2QWEFWfAH8Wdc48IxLvrJMQVMBRjuQyUpzZCDkakImib9eVazbWlC6ksWtJw=="],
 
-    "@stencil/core": ["@stencil/core@4.43.5", "", { "optionalDependencies": { "@rollup/rollup-darwin-arm64": "4.44.0", "@rollup/rollup-darwin-x64": "4.44.0", "@rollup/rollup-linux-arm64-gnu": "4.44.0", "@rollup/rollup-linux-arm64-musl": "4.44.0", "@rollup/rollup-linux-x64-gnu": "4.44.0", "@rollup/rollup-linux-x64-musl": "4.44.0", "@rollup/rollup-win32-arm64-msvc": "4.44.0", "@rollup/rollup-win32-x64-msvc": "4.44.0" }, "bin": { "stencil": "bin/stencil" } }, "sha512-cgWD+GeuvJpTe1WQn40p02+BJ2j0j1YJ17GdkF2qKIQ23s2e3Zivq5yISXS3dcuV6oUJFN93jprdk+nk/sq99Q=="],
-
-    "@stencil/vue-output-target": ["@stencil/vue-output-target@0.10.7", "", { "peerDependencies": { "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0", "vue": "^3.4.38", "vue-router": "^4.5.0" }, "optionalPeers": ["@stencil/core", "vue-router"] }, "sha512-IYxDe+SLCkwhwsWRdynE31rTK1zN3hVwwojQ/V9lrN8Gnx4PTvrUQHiRno9jFo1dk+EaBZWX9gZSmXta0ZaZew=="],
-
     "@types/bun": ["@types/bun@1.3.14", "", { "dependencies": { "bun-types": "1.3.14" } }, "sha512-h1hFqFVcvAvD9j9K7ZW7vd82aSA+rTdznZa+5bwvCwqSB1jmmfLcbIWhOLx1/+boy/xmjgCs/OMUL8hRJSmnPw=="],
 
     "@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],
@@ -176,6 +185,22 @@
 
     "@vitejs/plugin-vue": ["@vitejs/plugin-vue@5.2.4", "", { "peerDependencies": { "vite": "^5.0.0 || ^6.0.0", "vue": "^3.2.25" } }, "sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA=="],
 
+    "@vitest/coverage-v8": ["@vitest/coverage-v8@2.1.9", "", { "dependencies": { "@ampproject/remapping": "^2.3.0", "@bcoe/v8-coverage": "^0.2.3", "debug": "^4.3.7", "istanbul-lib-coverage": "^3.2.2", "istanbul-lib-report": "^3.0.1", "istanbul-lib-source-maps": "^5.0.6", "istanbul-reports": "^3.1.7", "magic-string": "^0.30.12", "magicast": "^0.3.5", "std-env": "^3.8.0", "test-exclude": "^7.0.1", "tinyrainbow": "^1.2.0" }, "peerDependencies": { "@vitest/browser": "2.1.9", "vitest": "2.1.9" }, "optionalPeers": ["@vitest/browser"] }, "sha512-Z2cOr0ksM00MpEfyVE8KXIYPEcBFxdbLSs56L8PO0QQMxt/6bDj45uQfxoc96v05KW3clk7vvgP0qfDit9DmfQ=="],
+
+    "@vitest/expect": ["@vitest/expect@2.1.9", "", { "dependencies": { "@vitest/spy": "2.1.9", "@vitest/utils": "2.1.9", "chai": "^5.1.2", "tinyrainbow": "^1.2.0" } }, "sha512-UJCIkTBenHeKT1TTlKMJWy1laZewsRIzYighyYiJKZreqtdxSos/S1t+ktRMQWu2CKqaarrkeszJx1cgC5tGZw=="],
+
+    "@vitest/mocker": ["@vitest/mocker@2.1.9", "", { "dependencies": { "@vitest/spy": "2.1.9", "estree-walker": "^3.0.3", "magic-string": "^0.30.12" }, "peerDependencies": { "msw": "^2.4.9", "vite": "^5.0.0" }, "optionalPeers": ["msw", "vite"] }, "sha512-tVL6uJgoUdi6icpxmdrn5YNo3g3Dxv+IHJBr0GXHaEdTcw3F+cPKnsXFhli6nO+f/6SDKPHEK1UN+k+TQv0Ehg=="],
+
+    "@vitest/pretty-format": ["@vitest/pretty-format@2.1.9", "", { "dependencies": { "tinyrainbow": "^1.2.0" } }, "sha512-KhRIdGV2U9HOUzxfiHmY8IFHTdqtOhIzCpd8WRdJiE7D/HUcZVD0EgQCVjm+Q9gkUXWgBvMmTtZgIG48wq7sOQ=="],
+
+    "@vitest/runner": ["@vitest/runner@2.1.9", "", { "dependencies": { "@vitest/utils": "2.1.9", "pathe": "^1.1.2" } }, "sha512-ZXSSqTFIrzduD63btIfEyOmNcBmQvgOVsPNPe0jYtESiXkhd8u2erDLnMxmGrDCwHCCHE7hxwRDCT3pt0esT4g=="],
+
+    "@vitest/snapshot": ["@vitest/snapshot@2.1.9", "", { "dependencies": { "@vitest/pretty-format": "2.1.9", "magic-string": "^0.30.12", "pathe": "^1.1.2" } }, "sha512-oBO82rEjsxLNJincVhLhaxxZdEtV0EFHMK5Kmx5sJ6H9L183dHECjiefOAdnqpIgT5eZwT04PoggUnW88vOBNQ=="],
+
+    "@vitest/spy": ["@vitest/spy@2.1.9", "", { "dependencies": { "tinyspy": "^3.0.2" } }, "sha512-E1B35FwzXXTs9FHNK6bDszs7mtydNi5MIfUWpceJ8Xbfb1gBMscAnwLbEu+B44ed6W3XjL9/ehLPHR1fkf1KLQ=="],
+
+    "@vitest/utils": ["@vitest/utils@2.1.9", "", { "dependencies": { "@vitest/pretty-format": "2.1.9", "loupe": "^3.1.2", "tinyrainbow": "^1.2.0" } }, "sha512-v0psaMSkNJ3A2NMrUEHFRzJtDPFn+/VWZ5WxImB21T9fjucJRmS7xCS3ppEnARb9y11OAzaD+P2Ps+b+BGX5iQ=="],
+
     "@volar/language-core": ["@volar/language-core@2.4.15", "", { "dependencies": { "@volar/source-map": "2.4.15" } }, "sha512-3VHw+QZU0ZG9IuQmzT68IyN4hZNd9GchGPhbD9+pa8CVv7rnoOZwo7T8weIbrRmihqy3ATpdfXFnqRrfPVK6CA=="],
 
     "@volar/source-map": ["@volar/source-map@2.4.15", "", {}, "sha512-CPbMWlUN6hVZJYGcU/GSoHu4EnCHiLaXI9n8c9la6RaI9W5JHX+NqG+GSQcB0JdC2FIBLdZJwGsfKyBB71VlTg=="],
@@ -206,43 +231,119 @@
 
     "@vue/shared": ["@vue/shared@3.5.35", "", {}, "sha512-zSbjL7gRXwks2ZQLRGCajBtBXEOXW9Ddhn/HvSdrGkE2dqGnumzW8XtusRrxrE9LvqtiqDXQ+A60Hp6mvdYxfA=="],
 
+    "@vue/test-utils": ["@vue/test-utils@2.4.10", "", { "dependencies": { "js-beautify": "^1.14.9", "vue-component-type-helpers": "^3.0.0" }, "peerDependencies": { "@vue/compiler-dom": "3.x", "@vue/server-renderer": "3.x", "vue": "3.x" }, "optionalPeers": ["@vue/server-renderer"] }, "sha512-SmoZ5EA1kYiAFs9NkYdiFFQF+cSnUwnvlYEbY+DogWQZUiqOm/Y29eSbc5T6yi75SgSF9863SBeXniIEoPajCA=="],
+
+    "abbrev": ["abbrev@2.0.0", "", {}, "sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ=="],
+
     "alien-signals": ["alien-signals@1.0.13", "", {}, "sha512-OGj9yyTnJEttvzhTUWuscOvtqxq5vrhF7vL9oS0xJ2mK0ItPYP1/y+vCFebfxoEyAz0++1AIwJ5CMr+Fk3nDmg=="],
 
-    "balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
+    "ansi-regex": ["ansi-regex@6.2.2", "", {}, "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg=="],
 
-    "brace-expansion": ["brace-expansion@2.1.1", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-WR1cURNjuvBLMZBMbqM0UoE+WAfdUcEV1ccD8PVBVOI+Z3ND4+SZbN8RsfT2bMuG1qwz5RFvPukSZm5fF2D5eA=="],
+    "ansi-styles": ["ansi-styles@6.2.3", "", {}, "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg=="],
+
+    "assertion-error": ["assertion-error@2.0.1", "", {}, "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA=="],
+
+    "balanced-match": ["balanced-match@4.0.4", "", {}, "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA=="],
+
+    "brace-expansion": ["brace-expansion@5.0.6", "", { "dependencies": { "balanced-match": "^4.0.2" } }, "sha512-kLpxurY4Z4r9sgMsyG0Z9uzsBlgiU/EFKhj/h91/8yHu0edo7XuixOIH3VcJ8kkxs6/jPzoI6U9Vj3WqbMQ94g=="],
 
     "bun-types": ["bun-types@1.3.14", "", { "dependencies": { "@types/node": "*" } }, "sha512-4N0ig0fEomHt5R0KCFWjovxow98rIoRwKolrYdCcknNwMekCXRnWEUvgu5soYV8QXtVsrUD8B95MBOZGPvr6KQ=="],
 
+    "cac": ["cac@6.7.14", "", {}, "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ=="],
+
+    "chai": ["chai@5.3.3", "", { "dependencies": { "assertion-error": "^2.0.1", "check-error": "^2.1.1", "deep-eql": "^5.0.1", "loupe": "^3.1.0", "pathval": "^2.0.0" } }, "sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw=="],
+
+    "check-error": ["check-error@2.1.3", "", {}, "sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA=="],
+
     "cluster-key-slot": ["cluster-key-slot@1.1.1", "", {}, "sha512-rwHwUfXL40Chm1r08yrhU3qpUvdVlgkKNeyeGPOxnW8/SyVDvgRaed/Uz54AqWNaTCAThlj6QAs3TZcKI0xDEw=="],
 
+    "color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="],
+
+    "color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],
+
+    "commander": ["commander@10.0.1", "", {}, "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug=="],
+
+    "config-chain": ["config-chain@1.1.13", "", { "dependencies": { "ini": "^1.3.4", "proto-list": "~1.2.1" } }, "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ=="],
+
+    "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="],
+
     "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
 
     "de-indent": ["de-indent@1.0.2", "", {}, "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg=="],
 
     "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
 
+    "deep-eql": ["deep-eql@5.0.2", "", {}, "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q=="],
+
     "denque": ["denque@2.1.0", "", {}, "sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw=="],
 
-    "entities": ["entities@7.0.1", "", {}, "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA=="],
+    "eastasianwidth": ["eastasianwidth@0.2.0", "", {}, "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="],
+
+    "editorconfig": ["editorconfig@1.0.7", "", { "dependencies": { "@one-ini/wasm": "0.1.1", "commander": "^10.0.0", "minimatch": "^9.0.1", "semver": "^7.5.3" }, "bin": { "editorconfig": "bin/editorconfig" } }, "sha512-e0GOtq/aTQhVdNyDU9e02+wz9oDDM+SIOQxWME2QRjzRX5yyLAuHDE+0aE8vHb9XRC8XD37eO2u57+F09JqFhw=="],
+
+    "emoji-regex": ["emoji-regex@9.2.2", "", {}, "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="],
+
+    "entities": ["entities@4.5.0", "", {}, "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="],
+
+    "es-module-lexer": ["es-module-lexer@1.7.0", "", {}, "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA=="],
 
     "esbuild": ["esbuild@0.21.5", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.21.5", "@esbuild/android-arm": "0.21.5", "@esbuild/android-arm64": "0.21.5", "@esbuild/android-x64": "0.21.5", "@esbuild/darwin-arm64": "0.21.5", "@esbuild/darwin-x64": "0.21.5", "@esbuild/freebsd-arm64": "0.21.5", "@esbuild/freebsd-x64": "0.21.5", "@esbuild/linux-arm": "0.21.5", "@esbuild/linux-arm64": "0.21.5", "@esbuild/linux-ia32": "0.21.5", "@esbuild/linux-loong64": "0.21.5", "@esbuild/linux-mips64el": "0.21.5", "@esbuild/linux-ppc64": "0.21.5", "@esbuild/linux-riscv64": "0.21.5", "@esbuild/linux-s390x": "0.21.5", "@esbuild/linux-x64": "0.21.5", "@esbuild/netbsd-x64": "0.21.5", "@esbuild/openbsd-x64": "0.21.5", "@esbuild/sunos-x64": "0.21.5", "@esbuild/win32-arm64": "0.21.5", "@esbuild/win32-ia32": "0.21.5", "@esbuild/win32-x64": "0.21.5" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw=="],
 
-    "estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
+    "estree-walker": ["estree-walker@3.0.3", "", { "dependencies": { "@types/estree": "^1.0.0" } }, "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g=="],
+
+    "expect-type": ["expect-type@1.3.0", "", {}, "sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA=="],
+
+    "foreground-child": ["foreground-child@3.3.1", "", { "dependencies": { "cross-spawn": "^7.0.6", "signal-exit": "^4.0.1" } }, "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw=="],
 
     "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
 
+    "glob": ["glob@10.5.0", "", { "dependencies": { "foreground-child": "^3.1.0", "jackspeak": "^3.1.2", "minimatch": "^9.0.4", "minipass": "^7.1.2", "package-json-from-dist": "^1.0.0", "path-scurry": "^1.11.1" }, "bin": { "glob": "dist/esm/bin.mjs" } }, "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg=="],
+
+    "happy-dom": ["happy-dom@15.11.7", "", { "dependencies": { "entities": "^4.5.0", "webidl-conversions": "^7.0.0", "whatwg-mimetype": "^3.0.0" } }, "sha512-KyrFvnl+J9US63TEzwoiJOQzZBJY7KgBushJA8X61DMbNsH+2ONkDuLDnCnwUiPTF42tLoEmrPyoqbenVA5zrg=="],
+
+    "has-flag": ["has-flag@4.0.0", "", {}, "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="],
+
     "he": ["he@1.2.0", "", { "bin": { "he": "bin/he" } }, "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="],
 
     "hono": ["hono@4.12.23", "", {}, "sha512-eIaZ9qDgu7XV0pxOCrg7/WhnQ6Ivm22UcxhXx/A3dcbqbbYgBEkc6e/J/s7j2tS96zoB0S9VBdLwQNCWwUo4LA=="],
 
-    "ionicons": ["ionicons@7.4.0", "", { "dependencies": { "@stencil/core": "^4.0.3" } }, "sha512-ZK94MMqgzMCPPMhmk8Ouu6goyVHFIlw/ACP6oe3FrikcI0N7CX0xcwVaEbUc0G/v3W0shI93vo+9ve/KpvcNhQ=="],
+    "html-escaper": ["html-escaper@2.0.2", "", {}, "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg=="],
+
+    "ini": ["ini@1.3.8", "", {}, "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="],
 
     "ioredis": ["ioredis@5.11.0", "", { "dependencies": { "@ioredis/commands": "1.10.0", "cluster-key-slot": "1.1.1", "debug": "4.4.3", "denque": "2.1.0", "redis-errors": "1.2.0", "redis-parser": "3.0.0", "standard-as-callback": "2.1.0" } }, "sha512-EZBErytyVovD8f6pDfG3Kb37N6Y3lmDA9NNj+4+IP13CzzHGeX+OyeRM2Um13khRzoBSzzL+5lVnCX8V2RLeMg=="],
 
+    "is-fullwidth-code-point": ["is-fullwidth-code-point@3.0.0", "", {}, "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="],
+
+    "isexe": ["isexe@2.0.0", "", {}, "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="],
+
+    "istanbul-lib-coverage": ["istanbul-lib-coverage@3.2.2", "", {}, "sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg=="],
+
+    "istanbul-lib-report": ["istanbul-lib-report@3.0.1", "", { "dependencies": { "istanbul-lib-coverage": "^3.0.0", "make-dir": "^4.0.0", "supports-color": "^7.1.0" } }, "sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw=="],
+
+    "istanbul-lib-source-maps": ["istanbul-lib-source-maps@5.0.6", "", { "dependencies": { "@jridgewell/trace-mapping": "^0.3.23", "debug": "^4.1.1", "istanbul-lib-coverage": "^3.0.0" } }, "sha512-yg2d+Em4KizZC5niWhQaIomgf5WlL4vOOjZ5xGCmF8SnPE/mDWWXgvRExdcpCgh9lLRRa1/fSYp2ymmbJ1pI+A=="],
+
+    "istanbul-reports": ["istanbul-reports@3.2.0", "", { "dependencies": { "html-escaper": "^2.0.0", "istanbul-lib-report": "^3.0.0" } }, "sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA=="],
+
+    "jackspeak": ["jackspeak@3.4.3", "", { "dependencies": { "@isaacs/cliui": "^8.0.2" }, "optionalDependencies": { "@pkgjs/parseargs": "^0.11.0" } }, "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw=="],
+
+    "js-beautify": ["js-beautify@1.15.4", "", { "dependencies": { "config-chain": "^1.1.13", "editorconfig": "^1.0.4", "glob": "^10.4.2", "js-cookie": "^3.0.5", "nopt": "^7.2.1" }, "bin": { "css-beautify": "js/bin/css-beautify.js", "html-beautify": "js/bin/html-beautify.js", "js-beautify": "js/bin/js-beautify.js" } }, "sha512-9/KXeZUKKJwqCXUdBxFJ3vPh467OCckSBmYDwSK/EtV090K+iMJ7zx2S3HLVDIWFQdqMIsZWbnaGiba18aWhaA=="],
+
+    "js-cookie": ["js-cookie@3.0.8", "", {}, "sha512-yeJd4aNAdYZQjaon2bpD/Gb0B/omw7HQOsynXXcOiWVCacbBcPlgn8S/d1X6blFSaHao7ozqtW7NZW19xpCtIw=="],
+
+    "loupe": ["loupe@3.2.1", "", {}, "sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ=="],
+
+    "lru-cache": ["lru-cache@10.4.3", "", {}, "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="],
+
     "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
 
-    "minimatch": ["minimatch@9.0.9", "", { "dependencies": { "brace-expansion": "^2.0.2" } }, "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg=="],
+    "magicast": ["magicast@0.3.5", "", { "dependencies": { "@babel/parser": "^7.25.4", "@babel/types": "^7.25.4", "source-map-js": "^1.2.0" } }, "sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ=="],
+
+    "make-dir": ["make-dir@4.0.0", "", { "dependencies": { "semver": "^7.5.3" } }, "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw=="],
+
+    "minimatch": ["minimatch@10.2.5", "", { "dependencies": { "brace-expansion": "^5.0.5" } }, "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg=="],
+
+    "minipass": ["minipass@7.1.3", "", {}, "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A=="],
 
     "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
 
@@ -250,25 +351,73 @@
 
     "nanoid": ["nanoid@3.3.12", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ=="],
 
+    "nopt": ["nopt@7.2.1", "", { "dependencies": { "abbrev": "^2.0.0" }, "bin": { "nopt": "bin/nopt.js" } }, "sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w=="],
+
+    "package-json-from-dist": ["package-json-from-dist@1.0.1", "", {}, "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw=="],
+
     "path-browserify": ["path-browserify@1.0.1", "", {}, "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g=="],
 
+    "path-key": ["path-key@3.1.1", "", {}, "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="],
+
+    "path-scurry": ["path-scurry@1.11.1", "", { "dependencies": { "lru-cache": "^10.2.0", "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0" } }, "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA=="],
+
+    "pathe": ["pathe@1.1.2", "", {}, "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ=="],
+
+    "pathval": ["pathval@2.0.1", "", {}, "sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ=="],
+
     "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
 
     "postcss": ["postcss@8.5.15", "", { "dependencies": { "nanoid": "^3.3.12", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A=="],
 
     "prisma": ["prisma@5.22.0", "", { "dependencies": { "@prisma/engines": "5.22.0" }, "optionalDependencies": { "fsevents": "2.3.3" }, "bin": { "prisma": "build/index.js" } }, "sha512-vtpjW3XuYCSnMsNVBjLMNkTj6OZbudcPPTPYHqX0CJfpcdWciI1dM8uHETwmDxxiqEwCIE6WvXucWUetJgfu/A=="],
 
+    "proto-list": ["proto-list@1.2.4", "", {}, "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA=="],
+
     "redis-errors": ["redis-errors@1.2.0", "", {}, "sha512-1qny3OExCf0UvUV/5wpYKf2YwPcOqXzkwKKSmKHiE6ZMQs5heeE/c8eXK+PNllPvmjgAbfnsbpkGZWy8cBpn9w=="],
 
     "redis-parser": ["redis-parser@3.0.0", "", { "dependencies": { "redis-errors": "^1.0.0" } }, "sha512-DJnGAeenTdpMEH6uAJRK/uiyEIH9WVsUmoLwzudwGJUwZPp80PDBWPHXSAGNPwNvIXAbe7MSUB1zQFugFml66A=="],
 
     "rollup": ["rollup@4.60.4", "", { "dependencies": { "@types/estree": "1.0.8" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.60.4", "@rollup/rollup-android-arm64": "4.60.4", "@rollup/rollup-darwin-arm64": "4.60.4", "@rollup/rollup-darwin-x64": "4.60.4", "@rollup/rollup-freebsd-arm64": "4.60.4", "@rollup/rollup-freebsd-x64": "4.60.4", "@rollup/rollup-linux-arm-gnueabihf": "4.60.4", "@rollup/rollup-linux-arm-musleabihf": "4.60.4", "@rollup/rollup-linux-arm64-gnu": "4.60.4", "@rollup/rollup-linux-arm64-musl": "4.60.4", "@rollup/rollup-linux-loong64-gnu": "4.60.4", "@rollup/rollup-linux-loong64-musl": "4.60.4", "@rollup/rollup-linux-ppc64-gnu": "4.60.4", "@rollup/rollup-linux-ppc64-musl": "4.60.4", "@rollup/rollup-linux-riscv64-gnu": "4.60.4", "@rollup/rollup-linux-riscv64-musl": "4.60.4", "@rollup/rollup-linux-s390x-gnu": "4.60.4", "@rollup/rollup-linux-x64-gnu": "4.60.4", "@rollup/rollup-linux-x64-musl": "4.60.4", "@rollup/rollup-openbsd-x64": "4.60.4", "@rollup/rollup-openharmony-arm64": "4.60.4", "@rollup/rollup-win32-arm64-msvc": "4.60.4", "@rollup/rollup-win32-ia32-msvc": "4.60.4", "@rollup/rollup-win32-x64-gnu": "4.60.4", "@rollup/rollup-win32-x64-msvc": "4.60.4", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-WHeFSbZYsPu3+bLoNRUuAO+wavNlocOPf3wSHTP7hcFKVnJeWsYlCDbr3mTS14FCizf9ccIxXA8sGL8zKeQN3g=="],
 
+    "semver": ["semver@7.8.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-rkVq3IXh+4FDGch+KwzX3aV9W3kO54GyEgpvBzSyctDA6Xtd7RJQV1xmXbeQp5v7+VzLOfVqiutSE6GICgPFvg=="],
+
+    "shebang-command": ["shebang-command@2.0.0", "", { "dependencies": { "shebang-regex": "^3.0.0" } }, "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA=="],
+
+    "shebang-regex": ["shebang-regex@3.0.0", "", {}, "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="],
+
+    "siginfo": ["siginfo@2.0.0", "", {}, "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g=="],
+
+    "signal-exit": ["signal-exit@4.1.0", "", {}, "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw=="],
+
     "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
 
+    "stackback": ["stackback@0.0.2", "", {}, "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw=="],
+
     "standard-as-callback": ["standard-as-callback@2.1.0", "", {}, "sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A=="],
 
-    "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+    "std-env": ["std-env@3.10.0", "", {}, "sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg=="],
+
+    "string-width": ["string-width@5.1.2", "", { "dependencies": { "eastasianwidth": "^0.2.0", "emoji-regex": "^9.2.2", "strip-ansi": "^7.0.1" } }, "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA=="],
+
+    "string-width-cjs": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
+
+    "strip-ansi": ["strip-ansi@7.2.0", "", { "dependencies": { "ansi-regex": "^6.2.2" } }, "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w=="],
+
+    "strip-ansi-cjs": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
+
+    "supports-color": ["supports-color@7.2.0", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="],
+
+    "test-exclude": ["test-exclude@7.0.2", "", { "dependencies": { "@istanbuljs/schema": "^0.1.2", "glob": "^10.4.1", "minimatch": "^10.2.2" } }, "sha512-u9E6A+ZDYdp7a4WnarkXPZOx8Ilz46+kby6p1yZ8zsGTz9gYa6FIS7lj2oezzNKmtdyyJNNmmXDppga5GB7kSw=="],
+
+    "tinybench": ["tinybench@2.9.0", "", {}, "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg=="],
+
+    "tinyexec": ["tinyexec@0.3.2", "", {}, "sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA=="],
+
+    "tinypool": ["tinypool@1.1.1", "", {}, "sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg=="],
+
+    "tinyrainbow": ["tinyrainbow@1.2.0", "", {}, "sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ=="],
+
+    "tinyspy": ["tinyspy@3.0.2", "", {}, "sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q=="],
 
     "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
 
@@ -276,72 +425,76 @@
 
     "vite": ["vite@5.4.21", "", { "dependencies": { "esbuild": "^0.21.3", "postcss": "^8.4.43", "rollup": "^4.20.0" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || >=20.0.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.4.0" }, "optionalPeers": ["@types/node", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser"], "bin": { "vite": "bin/vite.js" } }, "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw=="],
 
+    "vite-node": ["vite-node@2.1.9", "", { "dependencies": { "cac": "^6.7.14", "debug": "^4.3.7", "es-module-lexer": "^1.5.4", "pathe": "^1.1.2", "vite": "^5.0.0" }, "bin": { "vite-node": "vite-node.mjs" } }, "sha512-AM9aQ/IPrW/6ENLQg3AGY4K1N2TGZdR5e4gu/MmmR2xR3Ll1+dib+nook92g4TV3PXVyeyxdWwtaCAiUL0hMxA=="],
+
+    "vitest": ["vitest@2.1.9", "", { "dependencies": { "@vitest/expect": "2.1.9", "@vitest/mocker": "2.1.9", "@vitest/pretty-format": "^2.1.9", "@vitest/runner": "2.1.9", "@vitest/snapshot": "2.1.9", "@vitest/spy": "2.1.9", "@vitest/utils": "2.1.9", "chai": "^5.1.2", "debug": "^4.3.7", "expect-type": "^1.1.0", "magic-string": "^0.30.12", "pathe": "^1.1.2", "std-env": "^3.8.0", "tinybench": "^2.9.0", "tinyexec": "^0.3.1", "tinypool": "^1.0.1", "tinyrainbow": "^1.2.0", "vite": "^5.0.0", "vite-node": "2.1.9", "why-is-node-running": "^2.3.0" }, "peerDependencies": { "@edge-runtime/vm": "*", "@types/node": "^18.0.0 || >=20.0.0", "@vitest/browser": "2.1.9", "@vitest/ui": "2.1.9", "happy-dom": "*", "jsdom": "*" }, "optionalPeers": ["@edge-runtime/vm", "@types/node", "@vitest/browser", "@vitest/ui", "happy-dom", "jsdom"], "bin": { "vitest": "vitest.mjs" } }, "sha512-MSmPM9REYqDGBI8439mA4mWhV5sKmDlBKWIYbA3lRb2PTHACE0mgKwA8yQ2xq9vxDTuk4iPrECBAEW2aoFXY0Q=="],
+
     "vscode-uri": ["vscode-uri@3.1.0", "", {}, "sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ=="],
 
     "vue": ["vue@3.5.35", "", { "dependencies": { "@vue/compiler-dom": "3.5.35", "@vue/compiler-sfc": "3.5.35", "@vue/runtime-dom": "3.5.35", "@vue/server-renderer": "3.5.35", "@vue/shared": "3.5.35" }, "peerDependencies": { "typescript": "*" }, "optionalPeers": ["typescript"] }, "sha512-cx89fnr+0kVGHiNFG6y6s0bdjypJRFNZn6x3WPstNdQR1bi1mbB7h4v5IBGTsPJU3nK1+0Iqj3Zf+hZWMieR4Q=="],
 
+    "vue-component-type-helpers": ["vue-component-type-helpers@3.3.3", "", {}, "sha512-x4nsFpy5Pe8fqPzp/5vkTPeTTDBpAx4WVtV47Ejt0+2FQrq4pRRsJs7JmYRqMFzTu/LW+pCWEjQ3YVCkPV7f9g=="],
+
     "vue-router": ["vue-router@4.6.4", "", { "dependencies": { "@vue/devtools-api": "^6.6.4" }, "peerDependencies": { "vue": "^3.5.0" } }, "sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg=="],
 
     "vue-tsc": ["vue-tsc@2.2.12", "", { "dependencies": { "@volar/typescript": "2.4.15", "@vue/language-core": "2.2.12" }, "peerDependencies": { "typescript": ">=5.0.0" }, "bin": { "vue-tsc": "./bin/vue-tsc.js" } }, "sha512-P7OP77b2h/Pmk+lZdJ0YWs+5tJ6J2+uOQPo7tlBnY44QqQSPYvS0qVT4wqDJgwrZaLe47etJLLQRFia71GYITw=="],
 
+    "webidl-conversions": ["webidl-conversions@7.0.0", "", {}, "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g=="],
+
+    "whatwg-mimetype": ["whatwg-mimetype@3.0.0", "", {}, "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q=="],
+
+    "which": ["which@2.0.2", "", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="],
+
+    "why-is-node-running": ["why-is-node-running@2.3.0", "", { "dependencies": { "siginfo": "^2.0.0", "stackback": "0.0.2" }, "bin": { "why-is-node-running": "cli.js" } }, "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w=="],
+
+    "wrap-ansi": ["wrap-ansi@8.1.0", "", { "dependencies": { "ansi-styles": "^6.1.0", "string-width": "^5.0.1", "strip-ansi": "^7.0.1" } }, "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ=="],
+
+    "wrap-ansi-cjs": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
+
     "xip-backend": ["xip-backend@workspace:backend"],
 
     "xip-frontend": ["xip-frontend@workspace:frontend"],
 
-    "@ionic/core/@stencil/core": ["@stencil/core@4.43.0", "", { "optionalDependencies": { "@rollup/rollup-darwin-arm64": "4.34.9", "@rollup/rollup-darwin-x64": "4.34.9", "@rollup/rollup-linux-arm64-gnu": "4.34.9", "@rollup/rollup-linux-arm64-musl": "4.34.9", "@rollup/rollup-linux-x64-gnu": "4.34.9", "@rollup/rollup-linux-x64-musl": "4.34.9", "@rollup/rollup-win32-arm64-msvc": "4.34.9", "@rollup/rollup-win32-x64-msvc": "4.34.9" }, "bin": { "stencil": "bin/stencil" } }, "sha512-6Uj2Z3lzLuufYAE7asZ6NLKgSwsB9uxl84Eh34PASnUjfj32GkrP4DtKK7fNeh1WFGGyffsTDka3gwtl+4reUg=="],
+    "@vue/compiler-core/entities": ["entities@7.0.1", "", {}, "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA=="],
 
-    "@ionic/core/ionicons": ["ionicons@8.0.13", "", { "dependencies": { "@stencil/core": "^4.35.3" } }, "sha512-2QQVyG2P4wszne79jemMjWYLp0DBbDhr4/yFroPCxvPP1wtMxgdIV3l5n+XZ5E9mgoXU79w7yTWpm2XzJsISxQ=="],
+    "@vue/compiler-core/estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
 
-    "@ionic/vue/ionicons": ["ionicons@8.0.13", "", { "dependencies": { "@stencil/core": "^4.35.3" } }, "sha512-2QQVyG2P4wszne79jemMjWYLp0DBbDhr4/yFroPCxvPP1wtMxgdIV3l5n+XZ5E9mgoXU79w7yTWpm2XzJsISxQ=="],
+    "@vue/compiler-sfc/estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
 
-    "@stencil/core/@rollup/rollup-darwin-arm64": ["@rollup/rollup-darwin-arm64@4.44.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-VGF3wy0Eq1gcEIkSCr8Ke03CWT+Pm2yveKLaDvq51pPpZza3JX/ClxXOCmTYYq3us5MvEuNRTaeyFThCKRQhOA=="],
+    "@vue/language-core/minimatch": ["minimatch@9.0.9", "", { "dependencies": { "brace-expansion": "^2.0.2" } }, "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg=="],
 
-    "@stencil/core/@rollup/rollup-darwin-x64": ["@rollup/rollup-darwin-x64@4.44.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-fBkyrDhwquRvrTxSGH/qqt3/T0w5Rg0L7ZIDypvBPc1/gzjJle6acCpZ36blwuwcKD/u6oCE/sRWlUAcxLWQbQ=="],
+    "editorconfig/minimatch": ["minimatch@9.0.9", "", { "dependencies": { "brace-expansion": "^2.0.2" } }, "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg=="],
 
-    "@stencil/core/@rollup/rollup-linux-arm64-gnu": ["@rollup/rollup-linux-arm64-gnu@4.44.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-ZTR2mxBHb4tK4wGf9b8SYg0Y6KQPjGpR4UWwTFdnmjB4qRtoATZ5dWn3KsDwGa5Z2ZBOE7K52L36J9LueKBdOQ=="],
+    "glob/minimatch": ["minimatch@9.0.9", "", { "dependencies": { "brace-expansion": "^2.0.2" } }, "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg=="],
 
-    "@stencil/core/@rollup/rollup-linux-arm64-musl": ["@rollup/rollup-linux-arm64-musl@4.44.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-GFWfAhVhWGd4r6UxmnKRTBwP1qmModHtd5gkraeW2G490BpFOZkFtem8yuX2NyafIP/mGpRJgTJ2PwohQkUY/Q=="],
+    "string-width-cjs/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
 
-    "@stencil/core/@rollup/rollup-linux-x64-gnu": ["@rollup/rollup-linux-x64-gnu@4.44.0", "", { "os": "linux", "cpu": "x64" }, "sha512-iUVJc3c0o8l9Sa/qlDL2Z9UP92UZZW1+EmQ4xfjTc1akr0iUFZNfxrXJ/R1T90h/ILm9iXEY6+iPrmYB3pXKjw=="],
+    "string-width-cjs/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
 
-    "@stencil/core/@rollup/rollup-linux-x64-musl": ["@rollup/rollup-linux-x64-musl@4.44.0", "", { "os": "linux", "cpu": "x64" }, "sha512-PQUobbhLTQT5yz/SPg116VJBgz+XOtXt8D1ck+sfJJhuEsMj2jSej5yTdp8CvWBSceu+WW+ibVL6dm0ptG5fcA=="],
+    "strip-ansi-cjs/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
 
-    "@stencil/core/@rollup/rollup-win32-arm64-msvc": ["@rollup/rollup-win32-arm64-msvc@4.44.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-M0CpcHf8TWn+4oTxJfh7LQuTuaYeXGbk0eageVjQCKzYLsajWS/lFC94qlRqOlyC2KvRT90ZrfXULYmukeIy7w=="],
+    "wrap-ansi-cjs/ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
 
-    "@stencil/core/@rollup/rollup-win32-x64-msvc": ["@rollup/rollup-win32-x64-msvc@4.44.0", "", { "os": "win32", "cpu": "x64" }, "sha512-Q2Mgwt+D8hd5FIPUuPDsvPR7Bguza6yTkJxspDGkZj7tBRn2y4KSWYuIXpftFSjBra76TbKerCV7rgFPQrn+wQ=="],
+    "wrap-ansi-cjs/string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
 
-    "@ionic/core/@stencil/core/@rollup/rollup-darwin-arm64": ["@rollup/rollup-darwin-arm64@4.34.9", "", { "os": "darwin", "cpu": "arm64" }, "sha512-0CY3/K54slrzLDjOA7TOjN1NuLKERBgk9nY5V34mhmuu673YNb+7ghaDUs6N0ujXR7fz5XaS5Aa6d2TNxZd0OQ=="],
+    "wrap-ansi-cjs/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
 
-    "@ionic/core/@stencil/core/@rollup/rollup-darwin-x64": ["@rollup/rollup-darwin-x64@4.34.9", "", { "os": "darwin", "cpu": "x64" }, "sha512-eOojSEAi/acnsJVYRxnMkPFqcxSMFfrw7r2iD9Q32SGkb/Q9FpUY1UlAu1DH9T7j++gZ0lHjnm4OyH2vCI7l7Q=="],
+    "@vue/language-core/minimatch/brace-expansion": ["brace-expansion@2.1.1", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-WR1cURNjuvBLMZBMbqM0UoE+WAfdUcEV1ccD8PVBVOI+Z3ND4+SZbN8RsfT2bMuG1qwz5RFvPukSZm5fF2D5eA=="],
 
-    "@ionic/core/@stencil/core/@rollup/rollup-linux-arm64-gnu": ["@rollup/rollup-linux-arm64-gnu@4.34.9", "", { "os": "linux", "cpu": "arm64" }, "sha512-6TZjPHjKZUQKmVKMUowF3ewHxctrRR09eYyvT5eFv8w/fXarEra83A2mHTVJLA5xU91aCNOUnM+DWFMSbQ0Nxw=="],
+    "editorconfig/minimatch/brace-expansion": ["brace-expansion@2.1.1", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-WR1cURNjuvBLMZBMbqM0UoE+WAfdUcEV1ccD8PVBVOI+Z3ND4+SZbN8RsfT2bMuG1qwz5RFvPukSZm5fF2D5eA=="],
 
-    "@ionic/core/@stencil/core/@rollup/rollup-linux-arm64-musl": ["@rollup/rollup-linux-arm64-musl@4.34.9", "", { "os": "linux", "cpu": "arm64" }, "sha512-LD2fytxZJZ6xzOKnMbIpgzFOuIKlxVOpiMAXawsAZ2mHBPEYOnLRK5TTEsID6z4eM23DuO88X0Tq1mErHMVq0A=="],
+    "glob/minimatch/brace-expansion": ["brace-expansion@2.1.1", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-WR1cURNjuvBLMZBMbqM0UoE+WAfdUcEV1ccD8PVBVOI+Z3ND4+SZbN8RsfT2bMuG1qwz5RFvPukSZm5fF2D5eA=="],
 
-    "@ionic/core/@stencil/core/@rollup/rollup-linux-x64-gnu": ["@rollup/rollup-linux-x64-gnu@4.34.9", "", { "os": "linux", "cpu": "x64" }, "sha512-FwBHNSOjUTQLP4MG7y6rR6qbGw4MFeQnIBrMe161QGaQoBQLqSUEKlHIiVgF3g/mb3lxlxzJOpIBhaP+C+KP2A=="],
+    "string-width-cjs/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
 
-    "@ionic/core/@stencil/core/@rollup/rollup-linux-x64-musl": ["@rollup/rollup-linux-x64-musl@4.34.9", "", { "os": "linux", "cpu": "x64" }, "sha512-cYRpV4650z2I3/s6+5/LONkjIz8MBeqrk+vPXV10ORBnshpn8S32bPqQ2Utv39jCiDcO2eJTuSlPXpnvmaIgRA=="],
+    "wrap-ansi-cjs/string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
 
-    "@ionic/core/@stencil/core/@rollup/rollup-win32-arm64-msvc": ["@rollup/rollup-win32-arm64-msvc@4.34.9", "", { "os": "win32", "cpu": "arm64" }, "sha512-z4mQK9dAN6byRA/vsSgQiPeuO63wdiDxZ9yg9iyX2QTzKuQM7T4xlBoeUP/J8uiFkqxkcWndWi+W7bXdPbt27Q=="],
+    "wrap-ansi-cjs/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
 
-    "@ionic/core/@stencil/core/@rollup/rollup-win32-x64-msvc": ["@rollup/rollup-win32-x64-msvc@4.34.9", "", { "os": "win32", "cpu": "x64" }, "sha512-AyleYRPU7+rgkMWbEh71fQlrzRfeP6SyMnRf9XX4fCdDPAJumdSBqYEcWPMzVQ4ScAl7E4oFfK0GUVn77xSwbw=="],
+    "@vue/language-core/minimatch/brace-expansion/balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
 
-    "@ionic/core/ionicons/@stencil/core": ["@stencil/core@4.43.5", "", { "optionalDependencies": { "@rollup/rollup-darwin-arm64": "4.44.0", "@rollup/rollup-darwin-x64": "4.44.0", "@rollup/rollup-linux-arm64-gnu": "4.44.0", "@rollup/rollup-linux-arm64-musl": "4.44.0", "@rollup/rollup-linux-x64-gnu": "4.44.0", "@rollup/rollup-linux-x64-musl": "4.44.0", "@rollup/rollup-win32-arm64-msvc": "4.44.0", "@rollup/rollup-win32-x64-msvc": "4.44.0" }, "bin": { "stencil": "bin/stencil" } }, "sha512-cgWD+GeuvJpTe1WQn40p02+BJ2j0j1YJ17GdkF2qKIQ23s2e3Zivq5yISXS3dcuV6oUJFN93jprdk+nk/sq99Q=="],
+    "editorconfig/minimatch/brace-expansion/balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
 
-    "@ionic/core/ionicons/@stencil/core/@rollup/rollup-darwin-arm64": ["@rollup/rollup-darwin-arm64@4.44.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-VGF3wy0Eq1gcEIkSCr8Ke03CWT+Pm2yveKLaDvq51pPpZza3JX/ClxXOCmTYYq3us5MvEuNRTaeyFThCKRQhOA=="],
-
-    "@ionic/core/ionicons/@stencil/core/@rollup/rollup-darwin-x64": ["@rollup/rollup-darwin-x64@4.44.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-fBkyrDhwquRvrTxSGH/qqt3/T0w5Rg0L7ZIDypvBPc1/gzjJle6acCpZ36blwuwcKD/u6oCE/sRWlUAcxLWQbQ=="],
-
-    "@ionic/core/ionicons/@stencil/core/@rollup/rollup-linux-arm64-gnu": ["@rollup/rollup-linux-arm64-gnu@4.44.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-ZTR2mxBHb4tK4wGf9b8SYg0Y6KQPjGpR4UWwTFdnmjB4qRtoATZ5dWn3KsDwGa5Z2ZBOE7K52L36J9LueKBdOQ=="],
-
-    "@ionic/core/ionicons/@stencil/core/@rollup/rollup-linux-arm64-musl": ["@rollup/rollup-linux-arm64-musl@4.44.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-GFWfAhVhWGd4r6UxmnKRTBwP1qmModHtd5gkraeW2G490BpFOZkFtem8yuX2NyafIP/mGpRJgTJ2PwohQkUY/Q=="],
-
-    "@ionic/core/ionicons/@stencil/core/@rollup/rollup-linux-x64-gnu": ["@rollup/rollup-linux-x64-gnu@4.44.0", "", { "os": "linux", "cpu": "x64" }, "sha512-iUVJc3c0o8l9Sa/qlDL2Z9UP92UZZW1+EmQ4xfjTc1akr0iUFZNfxrXJ/R1T90h/ILm9iXEY6+iPrmYB3pXKjw=="],
-
-    "@ionic/core/ionicons/@stencil/core/@rollup/rollup-linux-x64-musl": ["@rollup/rollup-linux-x64-musl@4.44.0", "", { "os": "linux", "cpu": "x64" }, "sha512-PQUobbhLTQT5yz/SPg116VJBgz+XOtXt8D1ck+sfJJhuEsMj2jSej5yTdp8CvWBSceu+WW+ibVL6dm0ptG5fcA=="],
-
-    "@ionic/core/ionicons/@stencil/core/@rollup/rollup-win32-arm64-msvc": ["@rollup/rollup-win32-arm64-msvc@4.44.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-M0CpcHf8TWn+4oTxJfh7LQuTuaYeXGbk0eageVjQCKzYLsajWS/lFC94qlRqOlyC2KvRT90ZrfXULYmukeIy7w=="],
-
-    "@ionic/core/ionicons/@stencil/core/@rollup/rollup-win32-x64-msvc": ["@rollup/rollup-win32-x64-msvc@4.44.0", "", { "os": "win32", "cpu": "x64" }, "sha512-Q2Mgwt+D8hd5FIPUuPDsvPR7Bguza6yTkJxspDGkZj7tBRn2y4KSWYuIXpftFSjBra76TbKerCV7rgFPQrn+wQ=="],
+    "glob/minimatch/brace-expansion/balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
   }
 }

deploy/nginx.conf

@@ -1,42 +1,42 @@
-# Single-origin reverse proxy for XIP (Vireli pattern).
-# nginx serves the built SPA and proxies API + WebSocket to the bun backend.
-server {
-    listen 80;
-    server_name _;
-
-    # Uploads: backend allows up to 50 MB (ABSOLUTE_MAX). Give headroom.
-    client_max_body_size 60m;
-
-    # ── API (REST + uploads) ────────────────────────────────────────────────
-    location /api/ {
-        proxy_pass http://backend:3000;
-        proxy_set_header Host              $host;
-        proxy_set_header X-Real-IP         $remote_addr;
-        proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto $scheme;
-        proxy_read_timeout 120s;
-    }
-
-    # ── WebSocket (live feed + realtime stats) ──────────────────────────────
-    location /ws {
-        proxy_pass http://backend:3000;
-        proxy_http_version 1.1;
-        proxy_set_header Upgrade           $http_upgrade;
-        proxy_set_header Connection        "upgrade";
-        proxy_set_header Host              $host;
-        proxy_set_header X-Real-IP         $remote_addr;
-        proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
-        proxy_read_timeout 3600s;
-    }
-
-    # ── Health passthrough ──────────────────────────────────────────────────
-    location = /health {
-        proxy_pass http://backend:3000;
-    }
-
-    # ── Static SPA (Vue history fallback) ───────────────────────────────────
-    location / {
-        root /usr/share/nginx/html;
-        try_files $uri $uri/ /index.html;
-    }
-}
+# Single-origin reverse proxy for XIP (Vireli pattern).
+# nginx serves the built SPA and proxies API + WebSocket to the bun backend.
+server {
+    listen 80;
+    server_name _;
+
+    # Uploads: backend allows up to 50 MB (ABSOLUTE_MAX). Give headroom.
+    client_max_body_size 60m;
+
+    # ── API (REST + uploads) ────────────────────────────────────────────────
+    location /api/ {
+        proxy_pass http://backend:3000;
+        proxy_set_header Host              $host;
+        proxy_set_header X-Real-IP         $remote_addr;
+        proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_read_timeout 120s;
+    }
+
+    # ── WebSocket (live feed + realtime stats) ──────────────────────────────
+    location /ws {
+        proxy_pass http://backend:3000;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade           $http_upgrade;
+        proxy_set_header Connection        "upgrade";
+        proxy_set_header Host              $host;
+        proxy_set_header X-Real-IP         $remote_addr;
+        proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
+        proxy_read_timeout 3600s;
+    }
+
+    # ── Health passthrough ──────────────────────────────────────────────────
+    location = /health {
+        proxy_pass http://backend:3000;
+    }
+
+    # ── Static SPA (Vue history fallback) ───────────────────────────────────
+    location / {
+        root /usr/share/nginx/html;
+        try_files $uri $uri/ /index.html;
+    }
+}

docker-compose.prod.yml

@@ -1,67 +1,67 @@
-# Production stack for XIP — runs on the dedicated CT (xip-app, Echelon CT502).
-# Postgres + Redis + bun backend + nginx (serves SPA, proxies /api and /ws).
-# Secrets come from .env.prod (gitignored), loaded via `--env-file .env.prod`.
-services:
-  postgres:
-    image: postgres:16
-    restart: unless-stopped
-    environment:
-      POSTGRES_DB: ${POSTGRES_DB:-xip}
-      POSTGRES_USER: ${POSTGRES_USER:-xip}
-      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:?POSTGRES_PASSWORD must be set in .env.prod}
-    volumes:
-      - postgres_data:/var/lib/postgresql/data
-    healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER:-xip}"]
-      interval: 5s
-      timeout: 5s
-      retries: 20
-
-  redis:
-    image: redis:7
-    restart: unless-stopped
-    command: ["redis-server", "--appendonly", "yes"]
-    volumes:
-      - redis_data:/data
-    healthcheck:
-      test: ["CMD", "redis-cli", "ping"]
-      interval: 5s
-      timeout: 5s
-      retries: 20
-
-  backend:
-    build:
-      context: .
-      dockerfile: backend/Dockerfile
-    restart: unless-stopped
-    environment:
-      DATABASE_URL: postgresql://${POSTGRES_USER:-xip}:${POSTGRES_PASSWORD}@postgres:5432/${POSTGRES_DB:-xip}
-      REDIS_URL: redis://redis:6379
-      PORT: "3000"
-      NODE_ENV: production
-      # Prod "open bar": paywall disabled for everyone (see backend/src/lib/ip.ts).
-      XIP_OPEN_BAR: ${XIP_OPEN_BAR:-true}
-    volumes:
-      - uploads_data:/app/uploads
-    depends_on:
-      postgres:
-        condition: service_healthy
-      redis:
-        condition: service_healthy
-
-  web:
-    build:
-      context: .
-      dockerfile: frontend/Dockerfile
-      args:
-        VITE_API_URL: ${PUBLIC_URL:-https://xip.kerboul.me}
-    restart: unless-stopped
-    ports:
-      - "80:80"
-    depends_on:
-      - backend
-
-volumes:
-  postgres_data:
-  redis_data:
-  uploads_data:
+# Production stack for XIP — runs on the dedicated CT (xip-app, Echelon CT502).
+# Postgres + Redis + bun backend + nginx (serves SPA, proxies /api and /ws).
+# Secrets come from .env.prod (gitignored), loaded via `--env-file .env.prod`.
+services:
+  postgres:
+    image: postgres:16
+    restart: unless-stopped
+    environment:
+      POSTGRES_DB: ${POSTGRES_DB:-xip}
+      POSTGRES_USER: ${POSTGRES_USER:-xip}
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:?POSTGRES_PASSWORD must be set in .env.prod}
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER:-xip}"]
+      interval: 5s
+      timeout: 5s
+      retries: 20
+
+  redis:
+    image: redis:7
+    restart: unless-stopped
+    command: ["redis-server", "--appendonly", "yes"]
+    volumes:
+      - redis_data:/data
+    healthcheck:
+      test: ["CMD", "redis-cli", "ping"]
+      interval: 5s
+      timeout: 5s
+      retries: 20
+
+  backend:
+    build:
+      context: .
+      dockerfile: backend/Dockerfile
+    restart: unless-stopped
+    environment:
+      DATABASE_URL: postgresql://${POSTGRES_USER:-xip}:${POSTGRES_PASSWORD}@postgres:5432/${POSTGRES_DB:-xip}
+      REDIS_URL: redis://redis:6379
+      PORT: "3000"
+      NODE_ENV: production
+      # Prod "open bar": paywall disabled for everyone (see backend/src/lib/ip.ts).
+      XIP_OPEN_BAR: ${XIP_OPEN_BAR:-true}
+    volumes:
+      - uploads_data:/app/uploads
+    depends_on:
+      postgres:
+        condition: service_healthy
+      redis:
+        condition: service_healthy
+
+  web:
+    build:
+      context: .
+      dockerfile: frontend/Dockerfile
+      args:
+        VITE_API_URL: ${PUBLIC_URL:-https://xip.kerboul.me}
+    restart: unless-stopped
+    ports:
+      - "80:80"
+    depends_on:
+      - backend
+
+volumes:
+  postgres_data:
+  redis_data:
+  uploads_data:

docker-compose.yml

@@ -1,35 +1,35 @@
-services:
-  postgres:
-    image: postgres:16
-    restart: unless-stopped
-    environment:
-      POSTGRES_DB: xip
-      POSTGRES_USER: xip
-      POSTGRES_PASSWORD: xip
-    ports:
-      - "5432:5432"
-    volumes:
-      - postgres_data:/var/lib/postgresql/data
-    healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U xip"]
-      interval: 5s
-      timeout: 5s
-      retries: 10
-
-  redis:
-    image: redis:7
-    restart: unless-stopped
-    command: ["redis-server", "--appendonly", "yes"]
-    ports:
-      - "6379:6379"
-    volumes:
-      - redis_data:/data
-    healthcheck:
-      test: ["CMD", "redis-cli", "ping"]
-      interval: 5s
-      timeout: 5s
-      retries: 10
-
-volumes:
-  postgres_data:
-  redis_data:
+services:
+  postgres:
+    image: postgres:16
+    restart: unless-stopped
+    environment:
+      POSTGRES_DB: xip
+      POSTGRES_USER: xip
+      POSTGRES_PASSWORD: xip
+    ports:
+      - "5432:5432"
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U xip"]
+      interval: 5s
+      timeout: 5s
+      retries: 10
+
+  redis:
+    image: redis:7
+    restart: unless-stopped
+    command: ["redis-server", "--appendonly", "yes"]
+    ports:
+      - "6379:6379"
+    volumes:
+      - redis_data:/data
+    healthcheck:
+      test: ["CMD", "redis-cli", "ping"]
+      interval: 5s
+      timeout: 5s
+      retries: 10
+
+volumes:
+  postgres_data:
+  redis_data:

frontend/Dockerfile

@@ -1,17 +1,17 @@
-# XIP frontend — Vue 3 + Vite, built to static assets and served by nginx.
-# Build context is the repo ROOT (see docker-compose.prod.yml).
-FROM oven/bun:1-debian AS build
-WORKDIR /app
-COPY frontend/package.json ./
-RUN bun install
-COPY frontend/ ./
-# Baked at build time. Must be the public absolute origin so the WebSocket URL
-# (derived as API_URL.replace(/^http/,'ws') + '/ws') becomes wss://xip.kerboul.me/ws.
-ARG VITE_API_URL=https://xip.kerboul.me
-ENV VITE_API_URL=$VITE_API_URL
-RUN bun run build
-
-FROM nginx:1.27-alpine AS runtime
-COPY deploy/nginx.conf /etc/nginx/conf.d/default.conf
-COPY --from=build /app/dist /usr/share/nginx/html
-EXPOSE 80
+# XIP frontend — Vue 3 + Vite, built to static assets and served by nginx.
+# Build context is the repo ROOT (see docker-compose.prod.yml).
+FROM oven/bun:1-debian AS build
+WORKDIR /app
+COPY frontend/package.json ./
+RUN bun install
+COPY frontend/ ./
+# Baked at build time. Must be the public absolute origin so the WebSocket URL
+# (derived as API_URL.replace(/^http/,'ws') + '/ws') becomes wss://xip.kerboul.me/ws.
+ARG VITE_API_URL=https://xip.kerboul.me
+ENV VITE_API_URL=$VITE_API_URL
+RUN bun run build
+
+FROM nginx:1.27-alpine AS runtime
+COPY deploy/nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /app/dist /usr/share/nginx/html
+EXPOSE 80

frontend/index.html

@@ -1,12 +1,12 @@
-<!DOCTYPE html>
-<html lang="fr">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>XIP</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>XIP</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

frontend/package.json

@@ -4,21 +4,24 @@
   "private": true,
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview",
     "typecheck": "vue-tsc --noEmit",
-    "preview": "vite preview"
+    "test": "vitest run",
+    "test:cov": "vitest run --coverage"
   },
   "dependencies": {
-    "@ionic/vue": "^8.3.0",
-    "@ionic/vue-router": "^8.3.0",
-    "ionicons": "^7.4.0",
     "vue": "^3.5.0",
     "vue-router": "^4.4.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.0",
+    "@vitest/coverage-v8": "^2.1.0",
+    "@vue/test-utils": "^2.4.6",
+    "happy-dom": "^15.0.0",
     "typescript": "^5.6.0",
     "vite": "^5.4.0",
+    "vitest": "^2.1.0",
     "vue-tsc": "^2.1.0"
   }
 }

frontend/src/App.vue

@@ -1,8 +1,72 @@
+<!-- Composant racine : barre de navigation globale + zone de pages routées.
+     L'explorateur est gardé en cache (keep-alive) pour conserver son état
+     (recherche, scroll) lors d'un retour navigation. -->
 <template>
-  <RouterView />
-  <StyleContextMenu />
+  <div class="app-shell">
+    <nav class="app-nav">
+      <RouterLink to="/" class="brand">XIP</RouterLink>
+      <div class="nav-links">
+        <RouterLink to="/" class="nav-link">💬 Chat</RouterLink>
+        <RouterLink to="/explorer" class="nav-link">🔎 Explorer</RouterLink>
+        <RouterLink to="/favoris" class="nav-link">⭐ Favoris</RouterLink>
+        <RouterLink to="/mes-stats" class="nav-link">📊 Mes stats</RouterLink>
+        <RouterLink to="/shop" class="nav-link">🛒 Shop</RouterLink>
+      </div>
+    </nav>
+
+    <main class="app-main">
+      <RouterView v-slot="{ Component }">
+        <keep-alive include="ExplorerPage">
+          <component :is="Component" />
+        </keep-alive>
+      </RouterView>
+    </main>
+  </div>
 </template>
 
-<script setup lang="ts">
-import StyleContextMenu from '@/components/StyleContextMenu.vue';
-</script>
+<style scoped>
+.app-shell {
+  display: flex;
+  flex-direction: column;
+  height: 100dvh;
+  width: 100vw;
+  overflow: hidden;
+}
+
+.app-nav {
+  flex-shrink: 0;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  padding: 0 18px;
+  background: #0a0a12;
+  border-bottom: 1px solid #1a1a2a;
+}
+.brand {
+  font-family: Arial, sans-serif;
+  font-weight: 900;
+  font-size: 16px;
+  color: #00eeff;
+  text-decoration: none;
+  text-shadow: 0 0 10px #00ccff77;
+}
+.nav-links { display: flex; gap: 6px; }
+.nav-link {
+  font-family: Arial, sans-serif;
+  font-size: 12px;
+  color: #7a7a9a;
+  text-decoration: none;
+  padding: 5px 11px;
+  border-radius: 8px;
+  transition: color 0.12s, background 0.12s;
+}
+.nav-link:hover { color: #ccccee; background: #15152480; }
+.nav-link.router-link-exact-active { color: #00ddff; background: #00aaff18; }
+
+.app-main {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+</style>

frontend/src/components/AdBand.vue

@@ -1,163 +1,163 @@
-<!-- Bande publicitaire gauche (130 px) — pilotée par l'inventaire de pubs réel -->
-<template>
-  <aside class="ad-band">
-    <p class="ad-label">PUBLICITÉ</p>
-
-    <component
-      :is="ad.url ? 'a' : 'div'"
-      v-for="ad in ads"
-      :key="ad.id"
-      class="ad-card"
-      :href="ad.url || undefined"
-      :style="cardStyle"
-      target="_blank"
-      rel="noopener noreferrer nofollow"
-      title="Clic droit pour personnaliser le cadre"
-      @contextmenu.prevent="onRightClick"
-    >
-      <div class="ad-header" :class="`ad-header--${ad.tone}`">
-        <p class="ad-brand" :class="`ad-brand--${ad.tone}`">{{ ad.brand }}</p>
-        <p v-if="ad.subtitle" class="ad-sub">{{ ad.subtitle }}</p>
-      </div>
-      <div class="ad-body" :class="`ad-body--${ad.tone}`">
-        <span class="ad-icon">{{ ad.icon || '📢' }}</span>
-      </div>
-      <p v-if="ad.cta" class="ad-cta" :class="`ad-cta--${ad.tone}`">{{ ad.cta }}</p>
-      <p v-if="ad.url" class="ad-url">{{ prettyUrl(ad.url) }}</p>
-    </component>
-  </aside>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted, watch } from 'vue';
-import { useAds } from '@/composables/useAds';
-import { openContextMenu } from '@/composables/useContextMenu';
-import { useCustomStyles, AD_FRAME_PRESETS } from '@/composables/useCustomStyles';
-import { useMyPerks } from '@/composables/useMessages';
-
-const { ads, fetchAds, reportImpression } = useAds('band');
-const { prefs } = useCustomStyles();
-const { myPerks } = useMyPerks();
-
-const cardStyle = computed(() => {
-  const p = AD_FRAME_PRESETS[prefs.adFrame];
-  return { border: p.border, background: p.bg };
-});
-
-function onRightClick(e: MouseEvent): void {
-  if (!myPerks.value.elementSkin) return;
-  e.stopPropagation();
-  openContextMenu({
-    x: e.clientX,
-    y: e.clientY,
-    title: 'Cadre pub',
-    items: Object.entries(AD_FRAME_PRESETS).map(([k, v]) => ({ value: k, label: v.label })),
-    current: prefs.adFrame,
-    onSelect: (v) => { prefs.adFrame = v as typeof prefs.adFrame; },
-  });
-}
-
-function prettyUrl(url: string): string {
-  return url.replace(/^https?:\/\//, '').replace(/\/$/, '');
-}
-
-watch(ads, (list) => {
-  for (const a of list) reportImpression(a.id);
-});
-
-onMounted(fetchAds);
-</script>
-
-<style scoped>
-.ad-band {
-  width: 130px;
-  flex-shrink: 0;
-  background: #0c0c10;
-  border-right: 1px solid #1a1a22;
-  overflow-y: auto;
-  overflow-x: hidden;
-  scrollbar-width: none;
-}
-.ad-band::-webkit-scrollbar { display: none; }
-
-.ad-label {
-  font-family: Arial, sans-serif;
-  font-size: 8px;
-  color: #2a2a38;
-  text-align: center;
-  padding: 5px 0 3px;
-  letter-spacing: 0.5px;
-}
-
-/* ── Carte pub ── */
-.ad-card {
-  margin: 0 4px 4px;
-  background: #121218;
-  border: 1px solid #1e1e2a;
-  border-radius: 3px;
-  text-align: center;
-  padding-bottom: 10px;
-}
-
-.ad-header {
-  padding: 8px 4px 6px;
-  border-radius: 3px 3px 0 0;
-}
-.ad-header--blue   { background: #161620; }
-.ad-header--green  { background: #101614; }
-.ad-header--purple { background: #16101a; }
-.ad-header--user   { background: #1a1606; }
-.ad-header--casino { background: #1a0606; }
-
-.ad-brand {
-  font-family: Arial, sans-serif;
-  font-size: 13px;
-  font-weight: bold;
-  margin: 0;
-}
-.ad-brand--blue   { color: #4455aa; }
-.ad-brand--green  { color: #336644; }
-.ad-brand--purple { color: #6633aa; }
-.ad-brand--user   { color: #998833; }
-.ad-brand--casino { color: #884433; }
-
-.ad-sub {
-  font-family: Arial, sans-serif;
-  font-size: 9px;
-  color: #383870;
-  margin: 2px 0 0;
-}
-
-.ad-body {
-  background: #0e0e16;
-  margin: 6px 10px;
-  border-radius: 2px;
-  padding: 10px 0;
-}
-.ad-body--green  { background: #0e160e; }
-.ad-body--purple { background: #110e16; }
-.ad-body--user   { background: #16140e; }
-.ad-body--casino { background: #160e0e; }
-
-.ad-icon { font-size: 24px; }
-
-.ad-cta {
-  font-family: Arial, sans-serif;
-  font-size: 10px;
-  margin: 6px 0 2px;
-}
-.ad-cta--blue   { color: #3a3a88; }
-.ad-cta--green  { color: #33aa55; }
-.ad-cta--purple { color: #9944dd; }
-.ad-cta--user   { color: #ffcc44; }
-.ad-cta--casino { color: #ff5533; }
-
-.ad-url {
-  font-family: Arial, sans-serif;
-  font-size: 8px;
-  color: #282840;
-}
-
-/* Carte cliquable : pas de soulignement, héritage couleur */
-a.ad-card { text-decoration: none; display: block; }
-</style>
+<!-- Bande publicitaire gauche (130 px) — pilotée par l'inventaire de pubs réel -->
+<template>
+  <aside class="ad-band">
+    <p class="ad-label">PUBLICITÉ</p>
+
+    <component
+      :is="ad.url ? 'a' : 'div'"
+      v-for="ad in ads"
+      :key="ad.id"
+      class="ad-card"
+      :href="ad.url || undefined"
+      :style="cardStyle"
+      target="_blank"
+      rel="noopener noreferrer nofollow"
+      title="Clic droit pour personnaliser le cadre"
+      @contextmenu.prevent="onRightClick"
+    >
+      <div class="ad-header" :class="`ad-header--${ad.tone}`">
+        <p class="ad-brand" :class="`ad-brand--${ad.tone}`">{{ ad.brand }}</p>
+        <p v-if="ad.subtitle" class="ad-sub">{{ ad.subtitle }}</p>
+      </div>
+      <div class="ad-body" :class="`ad-body--${ad.tone}`">
+        <span class="ad-icon">{{ ad.icon || '📢' }}</span>
+      </div>
+      <p v-if="ad.cta" class="ad-cta" :class="`ad-cta--${ad.tone}`">{{ ad.cta }}</p>
+      <p v-if="ad.url" class="ad-url">{{ prettyUrl(ad.url) }}</p>
+    </component>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, watch } from 'vue';
+import { useAds } from '@/composables/useAds';
+import { openContextMenu } from '@/composables/useContextMenu';
+import { useCustomStyles, AD_FRAME_PRESETS } from '@/composables/useCustomStyles';
+import { useMyPerks } from '@/composables/useMessages';
+
+const { ads, fetchAds, reportImpression } = useAds('band');
+const { prefs } = useCustomStyles();
+const { myPerks } = useMyPerks();
+
+const cardStyle = computed(() => {
+  const p = AD_FRAME_PRESETS[prefs.adFrame];
+  return { border: p.border, background: p.bg };
+});
+
+function onRightClick(e: MouseEvent): void {
+  if (!myPerks.value.elementSkin) return;
+  e.stopPropagation();
+  openContextMenu({
+    x: e.clientX,
+    y: e.clientY,
+    title: 'Cadre pub',
+    items: Object.entries(AD_FRAME_PRESETS).map(([k, v]) => ({ value: k, label: v.label })),
+    current: prefs.adFrame,
+    onSelect: (v) => { prefs.adFrame = v as typeof prefs.adFrame; },
+  });
+}
+
+function prettyUrl(url: string): string {
+  return url.replace(/^https?:\/\//, '').replace(/\/$/, '');
+}
+
+watch(ads, (list) => {
+  for (const a of list) reportImpression(a.id);
+});
+
+onMounted(fetchAds);
+</script>
+
+<style scoped>
+.ad-band {
+  width: 130px;
+  flex-shrink: 0;
+  background: #0c0c10;
+  border-right: 1px solid #1a1a22;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: none;
+}
+.ad-band::-webkit-scrollbar { display: none; }
+
+.ad-label {
+  font-family: Arial, sans-serif;
+  font-size: 8px;
+  color: #2a2a38;
+  text-align: center;
+  padding: 5px 0 3px;
+  letter-spacing: 0.5px;
+}
+
+/* ── Carte pub ── */
+.ad-card {
+  margin: 0 4px 4px;
+  background: #121218;
+  border: 1px solid #1e1e2a;
+  border-radius: 3px;
+  text-align: center;
+  padding-bottom: 10px;
+}
+
+.ad-header {
+  padding: 8px 4px 6px;
+  border-radius: 3px 3px 0 0;
+}
+.ad-header--blue   { background: #161620; }
+.ad-header--green  { background: #101614; }
+.ad-header--purple { background: #16101a; }
+.ad-header--user   { background: #1a1606; }
+.ad-header--casino { background: #1a0606; }
+
+.ad-brand {
+  font-family: Arial, sans-serif;
+  font-size: 13px;
+  font-weight: bold;
+  margin: 0;
+}
+.ad-brand--blue   { color: #4455aa; }
+.ad-brand--green  { color: #336644; }
+.ad-brand--purple { color: #6633aa; }
+.ad-brand--user   { color: #998833; }
+.ad-brand--casino { color: #884433; }
+
+.ad-sub {
+  font-family: Arial, sans-serif;
+  font-size: 9px;
+  color: #383870;
+  margin: 2px 0 0;
+}
+
+.ad-body {
+  background: #0e0e16;
+  margin: 6px 10px;
+  border-radius: 2px;
+  padding: 10px 0;
+}
+.ad-body--green  { background: #0e160e; }
+.ad-body--purple { background: #110e16; }
+.ad-body--user   { background: #16140e; }
+.ad-body--casino { background: #160e0e; }
+
+.ad-icon { font-size: 24px; }
+
+.ad-cta {
+  font-family: Arial, sans-serif;
+  font-size: 10px;
+  margin: 6px 0 2px;
+}
+.ad-cta--blue   { color: #3a3a88; }
+.ad-cta--green  { color: #33aa55; }
+.ad-cta--purple { color: #9944dd; }
+.ad-cta--user   { color: #ffcc44; }
+.ad-cta--casino { color: #ff5533; }
+
+.ad-url {
+  font-family: Arial, sans-serif;
+  font-size: 8px;
+  color: #282840;
+}
+
+/* Carte cliquable : pas de soulignement, héritage couleur */
+a.ad-card { text-decoration: none; display: block; }
+</style>

frontend/src/components/AnimatedNumber.vue

@@ -1,50 +1,50 @@
-<!-- Tweened number display (easeOutCubic) for live-updating stats -->
-<template>
-  <span>{{ formatted }}</span>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch, onUnmounted } from 'vue';
-
-const props = withDefaults(
-  defineProps<{ value: number; decimals?: number; duration?: number }>(),
-  { decimals: 0, duration: 600 },
-);
-
-const display = ref(props.value);
-let raf = 0;
-let startVal = props.value;
-let startTime = 0;
-let target = props.value;
-
-function animate(to: number): void {
-  cancelAnimationFrame(raf);
-  startVal = display.value;
-  target = to;
-  startTime = performance.now();
-  const step = (now: number) => {
-    const t = Math.min(1, (now - startTime) / props.duration);
-    const eased = 1 - Math.pow(1 - t, 3); // easeOutCubic
-    display.value = startVal + (target - startVal) * eased;
-    if (t < 1) raf = requestAnimationFrame(step);
-    else display.value = target;
-  };
-  raf = requestAnimationFrame(step);
-}
-
-watch(
-  () => props.value,
-  (v) => {
-    if (Number.isFinite(v)) animate(v);
-  },
-);
-
-const formatted = computed(() =>
-  display.value.toLocaleString('fr-FR', {
-    minimumFractionDigits: props.decimals,
-    maximumFractionDigits: props.decimals,
-  }),
-);
-
-onUnmounted(() => cancelAnimationFrame(raf));
-</script>
+<!-- Tweened number display (easeOutCubic) for live-updating stats -->
+<template>
+  <span>{{ formatted }}</span>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onUnmounted } from 'vue';
+
+const props = withDefaults(
+  defineProps<{ value: number; decimals?: number; duration?: number }>(),
+  { decimals: 0, duration: 600 },
+);
+
+const display = ref(props.value);
+let raf = 0;
+let startVal = props.value;
+let startTime = 0;
+let target = props.value;
+
+function animate(to: number): void {
+  cancelAnimationFrame(raf);
+  startVal = display.value;
+  target = to;
+  startTime = performance.now();
+  const step = (now: number) => {
+    const t = Math.min(1, (now - startTime) / props.duration);
+    const eased = 1 - Math.pow(1 - t, 3); // easeOutCubic
+    display.value = startVal + (target - startVal) * eased;
+    if (t < 1) raf = requestAnimationFrame(step);
+    else display.value = target;
+  };
+  raf = requestAnimationFrame(step);
+}
+
+watch(
+  () => props.value,
+  (v) => {
+    if (Number.isFinite(v)) animate(v);
+  },
+);
+
+const formatted = computed(() =>
+  display.value.toLocaleString('fr-FR', {
+    minimumFractionDigits: props.decimals,
+    maximumFractionDigits: props.decimals,
+  }),
+);
+
+onUnmounted(() => cancelAnimationFrame(raf));
+</script>

frontend/src/components/ChatComposer.vue

@@ -0,0 +1,243 @@
+<!--
+  Barre de composition : texte simple, éditeur riche (HTML/CSS · JS), pièces
+  jointes, alerte audio, bouton d'envoi. Possède son propre état ; lit les
+  composables partagés directement (pas de prop-drilling). La réponse en cours
+  est passée par prop `replyingTo` ; on émet `clear-reply` une fois le message parti.
+-->
+<template>
+  <div class="composer">
+    <!-- Éditeur riche (HTML/CSS ou JS) -->
+    <div v-if="richMode !== 'none'" class="rich-composer">
+      <div class="rich-head">
+        <span class="rich-badge" :class="`rich-badge--${richMode}`">
+          {{ richMode === 'js' ? '⚡ JavaScript' : '🎨 HTML / CSS' }}
+        </span>
+        <button class="rich-close" @click="richMode = 'none'" type="button">✕ texte simple</button>
+      </div>
+      <textarea
+        v-model="richDraft"
+        class="rich-textarea"
+        :placeholder="richMode === 'js' ? '<script>document.body.style.background=&quot;lime&quot;<\/script>' : '<h1 style=&quot;color:#0ff&quot;>Salut</h1>'"
+        rows="4"
+      />
+    </div>
+
+    <!-- Barre de saisie -->
+    <div class="input-bar">
+      <!-- Bouton mode riche (si débloqué) -->
+      <button
+        v-if="myPerks.richHtmlcss || myPerks.richJs"
+        class="icon-btn"
+        :title="richMenuTitle"
+        @click="cycleRichMode"
+        type="button"
+      >{{ richMode === 'js' ? '⚡' : '🎨' }}</button>
+
+      <!-- Bouton pièce jointe -->
+      <button class="icon-btn" title="Joindre un fichier" @click="pickFile" type="button">📎</button>
+      <input ref="fileInput" type="file" hidden @change="onFileSelected" />
+
+      <!-- Bouton alerte audio (si débloqué) -->
+      <button
+        v-if="myPerks.audioAlert"
+        class="icon-btn icon-btn--alert"
+        :title="alertMsg || 'Déclencher l\'alerte audio générale'"
+        @click="triggerAlert"
+        type="button"
+      >🔊</button>
+
+      <div v-show="richMode === 'none'" class="field-wrap">
+        <input
+          v-model="draft"
+          class="input-field"
+          type="text"
+          placeholder="Entrez un message..."
+          :maxlength="267"
+          @input="onInput"
+          @keydown.enter.exact.prevent="submit"
+        />
+        <span class="char-counter" :class="{ warn: draft.length > 240 }">{{ draft.length }}/267</span>
+      </div>
+      <SendButton :disabled="!canSend || sending" @send="submit" />
+    </div>
+
+    <!-- Pièces jointes en attente -->
+    <div v-if="pendingFiles.length" class="pending-files">
+      <span v-for="f in pendingFiles" :key="f.id" class="pending-chip">
+        📎 {{ f.filename }} ({{ kb(f.size) }})
+        <button @click="removePending(f.id)" type="button">✕</button>
+      </span>
+    </div>
+    <div v-if="uploadError" class="upload-error">{{ uploadError }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import SendButton from './SendButton.vue';
+import { useMessages, useMyPerks } from '@/composables/useMessages';
+import { useAttachments } from '@/composables/useAttachments';
+import { useAlert } from '@/composables/useAlert';
+
+const props = defineProps<{ replyingTo: { id: string; authorIp: string } | null }>();
+const emit = defineEmits<{ 'clear-reply': [] }>();
+
+const { sending, postMessage, sendTyping } = useMessages();
+const { myPerks } = useMyPerks();
+const { uploadFile, kb } = useAttachments();
+const { fireAlert } = useAlert();
+
+const draft = ref('');
+
+// ── Alerte audio ──
+const alertMsg = ref('');
+async function triggerAlert(): Promise<void> {
+  const res = await fireAlert();
+  alertMsg.value = res.ok ? '' : res.error || '';
+  if (alertMsg.value) setTimeout(() => { alertMsg.value = ''; }, 3000);
+}
+
+// ── Mode riche ──
+const richMode = ref<'none' | 'htmlcss' | 'js'>('none');
+const richDraft = ref('');
+const richMenuTitle = computed(() =>
+  myPerks.value.richJs ? 'Message riche : texte / HTML-CSS / JS' : 'Message riche : texte / HTML-CSS'
+);
+function cycleRichMode(): void {
+  // Cycle through the tiers the user owns.
+  if (richMode.value === 'none') richMode.value = myPerks.value.richHtmlcss ? 'htmlcss' : 'js';
+  else if (richMode.value === 'htmlcss') richMode.value = myPerks.value.richJs ? 'js' : 'none';
+  else richMode.value = 'none';
+}
+
+// ── Pièces jointes ──
+const fileInput = ref<HTMLInputElement | null>(null);
+const pendingFiles = ref<{ id: string; filename: string; size: number }[]>([]);
+const uploadError = ref<string | null>(null);
+function pickFile(): void {
+  uploadError.value = null;
+  fileInput.value?.click();
+}
+async function onFileSelected(e: Event): Promise<void> {
+  const input = e.target as HTMLInputElement;
+  const file = input.files?.[0];
+  input.value = '';
+  if (!file) return;
+  const res = await uploadFile(file);
+  if (res.ok) {
+    pendingFiles.value.push({ id: res.attachment.id, filename: res.attachment.filename, size: res.attachment.size });
+  } else {
+    uploadError.value = res.error;
+  }
+}
+function removePending(id: string): void {
+  pendingFiles.value = pendingFiles.value.filter((f) => f.id !== id);
+}
+
+// ── Frappe (stats) ──
+let prevLen = 0;
+function onInput(): void {
+  const len = draft.value.length;
+  const delta = len - prevLen;
+  prevLen = len;
+  sendTyping(delta > 0 ? delta : 0);
+}
+
+// ── Envoi ──
+const canSend = computed(() =>
+  !!draft.value.trim() || (richMode.value !== 'none' && !!richDraft.value.trim()) || pendingFiles.value.length > 0
+);
+
+async function submit(): Promise<void> {
+  if (!canSend.value) return;
+  const ok = await postMessage(draft.value, {
+    parentId: props.replyingTo?.id,
+    richMode: richMode.value !== 'none' && richDraft.value.trim() ? richMode.value : undefined,
+    richContent: richMode.value !== 'none' && richDraft.value.trim() ? richDraft.value : undefined,
+    attachmentIds: pendingFiles.value.map((f) => f.id),
+  });
+  if (ok) {
+    draft.value = '';
+    richDraft.value = '';
+    richMode.value = 'none';
+    pendingFiles.value = [];
+    uploadError.value = null;
+    prevLen = 0;
+    emit('clear-reply');
+  }
+}
+</script>
+
+<style scoped>
+/* ── Éditeur riche ── */
+.rich-composer {
+  flex-shrink: 0;
+  background: #0c0c16;
+  border-top: 1px solid #1a1a26;
+  padding: 8px 20px;
+}
+.rich-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
+.rich-badge { font-size: 11px; font-weight: bold; padding: 2px 8px; border-radius: 8px; }
+.rich-badge--htmlcss { color: #00ddaa; background: #062019; }
+.rich-badge--js { color: #ffcc44; background: #201a06; }
+.rich-close { background: none; border: none; color: #557; cursor: pointer; font-size: 11px; }
+.rich-close:hover { color: #aac; }
+.rich-textarea {
+  width: 100%; box-sizing: border-box; resize: vertical;
+  background: #141420; border: 1px solid #222234; border-radius: 8px;
+  color: #aaccbb; font-family: 'Courier New', monospace; font-size: 12px; padding: 8px 10px; outline: none;
+}
+
+/* ── Barre de saisie ── */
+.input-bar {
+  min-height: 70px;
+  flex-shrink: 0;
+  background: #0e0e16;
+  border-top: 1px solid #1a1a26;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  gap: 10px;
+}
+.icon-btn {
+  flex-shrink: 0;
+  width: 36px; height: 36px;
+  background: #141420; border: 1px solid #222234; border-radius: 50%;
+  font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
+  transition: background 0.15s;
+}
+.icon-btn:hover { background: #1c1c2e; }
+.icon-btn--alert { border-color: #aa3344; }
+.icon-btn--alert:hover { background: #1e1218; }
+
+.field-wrap { flex: 1; position: relative; display: flex; align-items: center; }
+.input-field {
+  flex: 1;
+  background: #141420;
+  border: 1px solid #222234;
+  border-radius: 23px;
+  padding: 12px 60px 12px 22px;
+  color: #aaaacc;
+  font-family: Arial, sans-serif;
+  font-size: 13px;
+  outline: none;
+  transition: border-color 0.15s;
+}
+.input-field::placeholder { color: #2a2a44; }
+.input-field:focus         { border-color: #333355; }
+.char-counter {
+  position: absolute; right: 16px;
+  font-family: 'Courier New', monospace; font-size: 10px; color: #33334d; pointer-events: none;
+}
+.char-counter.warn { color: #ff8844; }
+
+/* ── Pièces jointes en attente ── */
+.pending-files { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 20px 10px; }
+.pending-chip {
+  display: inline-flex; align-items: center; gap: 6px;
+  background: #141420; border: 1px solid #222234; border-radius: 12px;
+  padding: 4px 10px; font-size: 11px; color: #aaccbb; font-family: Arial, sans-serif;
+}
+.pending-chip button { background: none; border: none; color: #66f; cursor: pointer; }
+.upload-error { flex-shrink: 0; padding: 0 20px 10px; color: #ff7788; font-size: 11px; font-family: Arial, sans-serif; }
+</style>

frontend/src/components/ChatHeader.vue

@@ -1,129 +1,133 @@
-<!-- En-tête du chat -->
-<template>
-  <header class="chat-header">
-    <div class="header-left">
-      <span class="xip-title">XIP</span>
-      <span class="chat-label">Chat</span>
-      <span class="online-dot" aria-hidden="true" />
-      <span class="online-count">{{ connectedCount }} connectés</span>
-    </div>
-
-    <div class="header-right">
-      <span v-if="ip" class="me-ip" :title="'Ton pseudo = ton IP'">{{ ip }}</span>
-      <span class="balance" :class="{ 'balance--free': freeMode }" title="Tes crédits XIP">
-        <span class="balance-coin">◈</span>
-        <span class="balance-val">{{ displayBalance() }}</span>
-        <span class="balance-unit">cr</span>
-      </span>
-      <router-link to="/shop" class="shop-link">🛒 Shop</router-link>
-      <span class="channel-badge"># général</span>
-    </div>
-  </header>
-</template>
-
-<script setup lang="ts">
-import { useWallet } from '@/composables/useWallet';
-
-defineProps<{ connectedCount: number }>();
-
-const { ip, freeMode, displayBalance } = useWallet();
-</script>
-
-<style scoped>
-.chat-header {
-  height: 52px;
-  flex-shrink: 0;
-  background: #0e0e16;
-  border-bottom: 1px solid #1a1a2a;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 16px 0 20px;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.xip-title {
-  font-family: Arial, sans-serif;
-  font-size: 18px;
-  font-weight: bold;
-  color: #7ab8cc;
-}
-
-.chat-label {
-  font-family: Arial, sans-serif;
-  font-size: 14px;
-  font-weight: bold;
-  color: #aaaacc;
-}
-
-.online-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: #44aa66;
-}
-
-.online-count {
-  font-family: Arial, sans-serif;
-  font-size: 11px;
-  color: #557766;
-}
-
-.me-ip {
-  font-family: 'Courier New', monospace;
-  font-size: 11px;
-  color: #5566aa;
-}
-
-.balance {
-  display: inline-flex;
-  align-items: baseline;
-  gap: 4px;
-  background: #131322;
-  border: 1px solid #2a2a44;
-  border-radius: 12px;
-  padding: 3px 10px;
-  font-family: 'Courier New', monospace;
-}
-.balance-coin { color: #aa8833; font-size: 11px; }
-.balance-val { color: #ccaa44; font-size: 13px; font-weight: bold; }
-.balance-unit { color: #886633; font-size: 9px; }
-.balance--free .balance-val { color: #44aa77; }
-.balance--free .balance-coin { color: #44aa77; }
-
-.shop-link {
-  font-family: Arial, sans-serif;
-  font-size: 12px;
-  font-weight: bold;
-  color: #6699aa;
-  text-decoration: none;
-  border: 1px solid #33445566;
-  border-radius: 12px;
-  padding: 4px 12px;
-  transition: background 0.15s;
-}
-.shop-link:hover {
-  background: #1a2530;
-}
-
-.channel-badge {
-  background: #131320;
-  border: 1px solid #222233;
-  border-radius: 12px;
-  padding: 4px 14px;
-  font-family: Arial, sans-serif;
-  font-size: 10px;
-  color: #5555aa;
-}
-</style>
+<!-- En-tête du chat -->
+<template>
+  <header class="chat-header">
+    <div class="header-left">
+      <span class="xip-title">XIP</span>
+      <span class="chat-label">Chat</span>
+      <span class="online-dot" aria-hidden="true" />
+      <span class="online-count">{{ connectedCount }} connectés</span>
+    </div>
+
+    <div class="header-right">
+      <ThemePicker v-model="theme" />
+      <span v-if="ip" class="me-ip" :title="'Ton pseudo = ton IP'">{{ ip }}</span>
+      <span class="balance" :class="{ 'balance--free': freeMode }" title="Tes crédits XIP">
+        <span class="balance-coin">◈</span>
+        <span class="balance-val">{{ displayBalance() }}</span>
+        <span class="balance-unit">cr</span>
+      </span>
+      <router-link to="/shop" class="shop-link">🛒 Shop</router-link>
+      <span class="channel-badge"># général</span>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { useWallet } from '@/composables/useWallet';
+import { useTheme } from '@/composables/useTheme';
+import ThemePicker from './ThemePicker.vue';
+
+defineProps<{ connectedCount: number }>();
+
+const { ip, freeMode, displayBalance } = useWallet();
+const { theme } = useTheme();
+</script>
+
+<style scoped>
+.chat-header {
+  height: 52px;
+  flex-shrink: 0;
+  background: var(--xip-header-bg);
+  border-bottom: 1px solid var(--xip-header-border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px 0 20px;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.xip-title {
+  font-family: Arial, sans-serif;
+  font-size: 18px;
+  font-weight: bold;
+  color: #7ab8cc;
+}
+
+.chat-label {
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+  font-weight: bold;
+  color: #aaaacc;
+}
+
+.online-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #44aa66;
+}
+
+.online-count {
+  font-family: Arial, sans-serif;
+  font-size: 11px;
+  color: #557766;
+}
+
+.me-ip {
+  font-family: 'Courier New', monospace;
+  font-size: 11px;
+  color: #5566aa;
+}
+
+.balance {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 4px;
+  background: #131322;
+  border: 1px solid #2a2a44;
+  border-radius: 12px;
+  padding: 3px 10px;
+  font-family: 'Courier New', monospace;
+}
+.balance-coin { color: #aa8833; font-size: 11px; }
+.balance-val { color: #ccaa44; font-size: 13px; font-weight: bold; }
+.balance-unit { color: #886633; font-size: 9px; }
+.balance--free .balance-val { color: #44aa77; }
+.balance--free .balance-coin { color: #44aa77; }
+
+.shop-link {
+  font-family: Arial, sans-serif;
+  font-size: 12px;
+  font-weight: bold;
+  color: #6699aa;
+  text-decoration: none;
+  border: 1px solid #33445566;
+  border-radius: 12px;
+  padding: 4px 12px;
+  transition: background 0.15s;
+}
+.shop-link:hover {
+  background: #1a2530;
+}
+
+.channel-badge {
+  background: #131320;
+  border: 1px solid #222233;
+  border-radius: 12px;
+  padding: 4px 14px;
+  font-family: Arial, sans-serif;
+  font-size: 10px;
+  color: #5555aa;
+}
+</style>

frontend/src/components/FavButton.vue

@@ -0,0 +1,41 @@
+<!-- Bouton favori réutilisable : ⭐ partout (chat, explorateur, détail).
+     Reflète et bascule l'état de la liste perso centralisée (useFavorites). -->
+<template>
+  <button
+    class="fav-btn"
+    :class="{ 'fav-btn--on': active }"
+    :title="active ? 'Retirer des favoris' : 'Ajouter aux favoris'"
+    :aria-pressed="active"
+    type="button"
+    @click.stop="onClick"
+  >{{ active ? '★' : '☆' }}</button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useFavorites, type FavoriteSource } from '@/composables/useFavorites';
+
+const props = defineProps<{ message: FavoriteSource }>();
+
+const { isFav, toggle } = useFavorites();
+const active = computed(() => isFav(props.message.id));
+
+function onClick(): void {
+  toggle(props.message);
+}
+</script>
+
+<style scoped>
+.fav-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  font-size: 13px;
+  line-height: 1;
+  color: #44446a;
+  transition: color 0.12s, transform 0.12s;
+}
+.fav-btn:hover { color: #ffcc44; transform: scale(1.15); }
+.fav-btn--on { color: #ffcc44; }
+</style>

frontend/src/components/InlineCasinoAd.vue

@@ -1,152 +1,152 @@
-<!-- Pub casino néon : overlay dans le feed, pilotée par l'inventaire de pubs -->
-<template>
-  <div v-if="ad" class="casino">
-    <div class="casino-head">
-      <p class="casino-title">♠ {{ ad.brand }} ♠</p>
-      <p class="casino-subtitle">OFFRE EXCLUSIVE</p>
-    </div>
-
-    <div class="casino-body">
-      <p class="bonus">+200%</p>
-      <p class="bonus-sub">{{ ad.subtitle || 'sur votre 1er dépôt • 500€ max' }}</p>
-
-      <div class="slots">
-        <span class="suit suit--diamond">♦</span>
-        <span class="seven">7</span>
-        <span class="seven">7</span>
-        <span class="seven">7</span>
-        <span class="suit suit--spade">♠</span>
-      </div>
-
-      <a class="casino-cta" :href="ad.url || '#'" target="_blank" rel="noopener noreferrer nofollow">
-        {{ ad.cta || 'JOUER MAINTENANT' }} &rarr;
-      </a>
-      <p class="disclaimer">18+ &bull; Jeu responsable &bull; {{ prettyUrl(ad.url) }}</p>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted, watch } from 'vue';
-import { useAds } from '@/composables/useAds';
-
-const { ads, fetchAds, reportImpression } = useAds('casino');
-const ad = computed(() => ads.value[0] ?? null);
-
-function prettyUrl(url?: string | null): string {
-  return (url || 'casino-lucky.bet').replace(/^https?:\/\//, '').replace(/\/$/, '');
-}
-
-watch(ad, (a) => { if (a) reportImpression(a.id); });
-onMounted(fetchAds);
-</script>
-
-<style scoped>
-.casino {
-  width: 248px;
-  background: #100400;
-  border: 2px solid #ff2200;
-  border-radius: 6px;
-  box-shadow: none;
-}
-
-/* ── En-tête rouge ── */
-.casino-head {
-  background: #1a0400;
-  border-radius: 4px 4px 0 0;
-  border-bottom: 1px solid #440000;
-  padding: 10px 8px;
-  text-align: center;
-}
-
-.casino-title {
-  font-family: Arial, sans-serif;
-  font-size: 15px;
-  font-weight: bold;
-  color: #ff5533;
-
-  margin: 0;
-}
-
-.casino-subtitle {
-  font-family: Arial, sans-serif;
-  font-size: 9px;
-  letter-spacing: 2px;
-  color: #882200;
-  margin: 4px 0 0;
-}
-
-/* ── Corps ── */
-.casino-body {
-  padding: 12px;
-  text-align: center;
-}
-
-.bonus {
-  font-family: Arial, sans-serif;
-  font-size: 32px;
-  font-weight: bold;
-  color: #ffdd00;
-
-  margin: 0;
-}
-
-.bonus-sub {
-  font-family: Arial, sans-serif;
-  font-size: 11px;
-  color: #cc6600;
-  margin: 4px 0 10px;
-}
-
-/* ── Machines à sous ── */
-.slots {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 12px;
-}
-
-.suit {
-  font-size: 24px;
-}
-.suit--diamond { color: #ffaa44; }
-.suit--spade   { color: #ffaa44; }
-
-.seven {
-  font-size: 30px;
-  font-weight: bold;
-  color: #ffffff;
-
-}
-
-/* ── CTA ── */
-.casino-cta {
-  display: block;
-  width: 100%;
-  box-sizing: border-box;
-  padding: 8px 0;
-  background: #220000;
-  border: 1.5px solid #ff2200;
-  border-radius: 19px;
-  color: #ff4422;
-  font-family: Arial, sans-serif;
-  font-size: 13px;
-  font-weight: bold;
-  cursor: pointer;
-  text-align: center;
-  text-decoration: none;
-  transition: background 0.15s;
-}
-
-.casino-cta:hover {
-
-}
-
-.disclaimer {
-  font-family: Arial, sans-serif;
-  font-size: 7px;
-  color: #440000;
-  margin-top: 8px;
-}
-</style>
+<!-- Pub casino néon : overlay dans le feed, pilotée par l'inventaire de pubs -->
+<template>
+  <div v-if="ad" class="casino">
+    <div class="casino-head">
+      <p class="casino-title">♠ {{ ad.brand }} ♠</p>
+      <p class="casino-subtitle">OFFRE EXCLUSIVE</p>
+    </div>
+
+    <div class="casino-body">
+      <p class="bonus">+200%</p>
+      <p class="bonus-sub">{{ ad.subtitle || 'sur votre 1er dépôt • 500€ max' }}</p>
+
+      <div class="slots">
+        <span class="suit suit--diamond">♦</span>
+        <span class="seven">7</span>
+        <span class="seven">7</span>
+        <span class="seven">7</span>
+        <span class="suit suit--spade">♠</span>
+      </div>
+
+      <a class="casino-cta" :href="ad.url || '#'" target="_blank" rel="noopener noreferrer nofollow">
+        {{ ad.cta || 'JOUER MAINTENANT' }} &rarr;
+      </a>
+      <p class="disclaimer">18+ &bull; Jeu responsable &bull; {{ prettyUrl(ad.url) }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, watch } from 'vue';
+import { useAds } from '@/composables/useAds';
+
+const { ads, fetchAds, reportImpression } = useAds('casino');
+const ad = computed(() => ads.value[0] ?? null);
+
+function prettyUrl(url?: string | null): string {
+  return (url || 'casino-lucky.bet').replace(/^https?:\/\//, '').replace(/\/$/, '');
+}
+
+watch(ad, (a) => { if (a) reportImpression(a.id); });
+onMounted(fetchAds);
+</script>
+
+<style scoped>
+.casino {
+  width: 248px;
+  background: #100400;
+  border: 2px solid #ff2200;
+  border-radius: 6px;
+  box-shadow: none;
+}
+
+/* ── En-tête rouge ── */
+.casino-head {
+  background: #1a0400;
+  border-radius: 4px 4px 0 0;
+  border-bottom: 1px solid #440000;
+  padding: 10px 8px;
+  text-align: center;
+}
+
+.casino-title {
+  font-family: Arial, sans-serif;
+  font-size: 15px;
+  font-weight: bold;
+  color: #ff5533;
+
+  margin: 0;
+}
+
+.casino-subtitle {
+  font-family: Arial, sans-serif;
+  font-size: 9px;
+  letter-spacing: 2px;
+  color: #882200;
+  margin: 4px 0 0;
+}
+
+/* ── Corps ── */
+.casino-body {
+  padding: 12px;
+  text-align: center;
+}
+
+.bonus {
+  font-family: Arial, sans-serif;
+  font-size: 32px;
+  font-weight: bold;
+  color: #ffdd00;
+
+  margin: 0;
+}
+
+.bonus-sub {
+  font-family: Arial, sans-serif;
+  font-size: 11px;
+  color: #cc6600;
+  margin: 4px 0 10px;
+}
+
+/* ── Machines à sous ── */
+.slots {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.suit {
+  font-size: 24px;
+}
+.suit--diamond { color: #ffaa44; }
+.suit--spade   { color: #ffaa44; }
+
+.seven {
+  font-size: 30px;
+  font-weight: bold;
+  color: #ffffff;
+
+}
+
+/* ── CTA ── */
+.casino-cta {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 8px 0;
+  background: #220000;
+  border: 1.5px solid #ff2200;
+  border-radius: 19px;
+  color: #ff4422;
+  font-family: Arial, sans-serif;
+  font-size: 13px;
+  font-weight: bold;
+  cursor: pointer;
+  text-align: center;
+  text-decoration: none;
+  transition: background 0.15s;
+}
+
+.casino-cta:hover {
+
+}
+
+.disclaimer {
+  font-family: Arial, sans-serif;
+  font-size: 7px;
+  color: #440000;
+  margin-top: 8px;
+}
+</style>

frontend/src/components/MessageAttachments.vue

@@ -1,80 +1,80 @@
-<!-- Renders a message's attachments: image previews inline, everything else as a download link -->
-<template>
-  <div class="attachments">
-    <template v-for="a in attachments" :key="a.id">
-      <a
-        v-if="isImage(a)"
-        class="att-image"
-        :href="urlFor(a.id)"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <img :src="urlFor(a.id)" :alt="a.filename" loading="lazy" />
-      </a>
-      <a
-        v-else
-        class="att-file"
-        :href="urlFor(a.id)"
-        target="_blank"
-        rel="noopener noreferrer"
-        :download="a.filename"
-      >
-        <span class="att-icon">{{ isExe(a) ? '⚠️' : '📎' }}</span>
-        <span class="att-name">{{ a.filename }}</span>
-        <span class="att-size">{{ kb(a.size) }}</span>
-        <span v-if="isExe(a)" class="att-warn">exécutable</span>
-      </a>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { Attachment } from '@/composables/useMessages';
-import { useAttachments } from '@/composables/useAttachments';
-
-defineProps<{ attachments: Attachment[] }>();
-
-const { kb, urlFor } = useAttachments();
-
-function isImage(a: Attachment): boolean {
-  return a.mimeType.startsWith('image/');
-}
-function isExe(a: Attachment): boolean {
-  return /\.(exe|bat|cmd|msi|sh|app)$/i.test(a.filename) || a.mimeType === 'application/x-msdownload';
-}
-</script>
-
-<style scoped>
-.attachments {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  padding: 6px 25px 0;
-}
-.att-image img {
-  max-width: 220px;
-  max-height: 160px;
-  border-radius: 8px;
-  border: 1px solid #222234;
-  display: block;
-}
-.att-file {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  background: #141420;
-  border: 1px solid #222234;
-  border-radius: 10px;
-  padding: 7px 12px;
-  text-decoration: none;
-  font-family: Arial, sans-serif;
-}
-.att-file:hover { background: #1c1c2e; }
-.att-icon { font-size: 14px; }
-.att-name { font-size: 12px; color: #aaccdd; }
-.att-size { font-size: 10px; color: #555577; }
-.att-warn {
-  font-size: 8px; font-weight: bold; color: #ff5544;
-  background: #2a0a08; border: 1px solid #662211; border-radius: 4px; padding: 1px 5px;
-}
-</style>
+<!-- Renders a message's attachments: image previews inline, everything else as a download link -->
+<template>
+  <div class="attachments">
+    <template v-for="a in attachments" :key="a.id">
+      <a
+        v-if="isImage(a)"
+        class="att-image"
+        :href="urlFor(a.id)"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <img :src="urlFor(a.id)" :alt="a.filename" loading="lazy" />
+      </a>
+      <a
+        v-else
+        class="att-file"
+        :href="urlFor(a.id)"
+        target="_blank"
+        rel="noopener noreferrer"
+        :download="a.filename"
+      >
+        <span class="att-icon">{{ isExe(a) ? '⚠️' : '📎' }}</span>
+        <span class="att-name">{{ a.filename }}</span>
+        <span class="att-size">{{ kb(a.size) }}</span>
+        <span v-if="isExe(a)" class="att-warn">exécutable</span>
+      </a>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Attachment } from '@/composables/useMessages';
+import { useAttachments } from '@/composables/useAttachments';
+
+defineProps<{ attachments: Attachment[] }>();
+
+const { kb, urlFor } = useAttachments();
+
+function isImage(a: Attachment): boolean {
+  return a.mimeType.startsWith('image/');
+}
+function isExe(a: Attachment): boolean {
+  return /\.(exe|bat|cmd|msi|sh|app)$/i.test(a.filename) || a.mimeType === 'application/x-msdownload';
+}
+</script>
+
+<style scoped>
+.attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 6px 25px 0;
+}
+.att-image img {
+  max-width: 220px;
+  max-height: 160px;
+  border-radius: 8px;
+  border: 1px solid #222234;
+  display: block;
+}
+.att-file {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: #141420;
+  border: 1px solid #222234;
+  border-radius: 10px;
+  padding: 7px 12px;
+  text-decoration: none;
+  font-family: Arial, sans-serif;
+}
+.att-file:hover { background: #1c1c2e; }
+.att-icon { font-size: 14px; }
+.att-name { font-size: 12px; color: #aaccdd; }
+.att-size { font-size: 10px; color: #555577; }
+.att-warn {
+  font-size: 8px; font-weight: bold; color: #ff5544;
+  background: #2a0a08; border: 1px solid #662211; border-radius: 4px; padding: 1px 5px;
+}
+</style>

frontend/src/components/MessageItem.vue

@@ -1,237 +1,240 @@
-<!-- Un message avec ses éventuelles réponses, perks d'auteur, rich content et pièces jointes -->
-<template>
-  <div class="message-item">
-    <!-- Auteur + horodatage -->
-    <div class="message-meta">
-      <span class="ip-wrap" @contextmenu.prevent="openIpMenu($event, message.authorIp)" :title="message.authorIp === myIp ? 'Clic droit pour personnaliser' : undefined">
-        <span v-if="petsLeft(message)" class="pet">{{ petsLeft(message) }}</span>
-        <span class="ip" :style="ipStyle(message)">{{ message.authorIp }}</span>
-        <span v-if="petsRight(message)" class="pet">{{ petsRight(message) }}</span>
-        <span v-if="message.authorPerks?.badge" class="vip-badge">VIP</span>
-      </span>
-      <span class="ts">{{ fmt(message.createdAt) }}</span>
-      <button class="reply-btn" @click="$emit('reply', { id: message.id, authorIp: message.authorIp })" type="button">↩ répondre</button>
-    </div>
-
-    <!-- Contenu : riche (iframe sandbox) ou texte simple -->
-    <RichContent
-      v-if="message.richMode && message.richMode !== 'none' && message.richContent"
-      :mode="message.richMode"
-      :content="message.richContent"
-    />
-    <p v-else class="message-body">{{ message.content }}</p>
-
-    <!-- Pièces jointes -->
-    <MessageAttachments v-if="message.attachments?.length" :attachments="message.attachments" />
-
-    <!-- Réponses -->
-    <div
-      v-for="reply in message.replies"
-      :key="reply.id"
-      class="reply"
-    >
-      <span class="ip-wrap" @contextmenu.prevent="openIpMenu($event, reply.authorIp)" :title="reply.authorIp === myIp ? 'Clic droit pour personnaliser' : undefined">
-        <span v-if="petsLeft(reply)" class="pet pet--sm">{{ petsLeft(reply) }}</span>
-        <span class="ip reply-ip" :style="ipStyle(reply)">{{ reply.authorIp }}</span>
-        <span v-if="petsRight(reply)" class="pet pet--sm">{{ petsRight(reply) }}</span>
-      </span>
-      <span class="ts">{{ fmt(reply.createdAt) }}</span>
-      <button class="reply-btn" @click="$emit('reply', { id: message.id, authorIp: reply.authorIp })" type="button">↩</button>
-      <RichContent
-        v-if="reply.richMode && reply.richMode !== 'none' && reply.richContent"
-        :mode="reply.richMode"
-        :content="reply.richContent"
-      />
-      <p v-else class="message-body reply-body">{{ reply.content }}</p>
-      <MessageAttachments v-if="reply.attachments?.length" :attachments="reply.attachments" />
-    </div>
-
-    <div class="divider" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { Message, Reply } from '@/composables/useMessages';
-import { getIpColorWithPerks, getIpGlowWithPerks, getIpColor, getIpGlow } from '@/composables/ipColor';
-import { usePerks } from '@/composables/usePerks';
-import { openContextMenu } from '@/composables/useContextMenu';
-import { useCustomStyles, IP_COLOR_OPTIONS } from '@/composables/useCustomStyles';
-import { useMyPerks } from '@/composables/useMessages';
-import RichContent from './RichContent.vue';
-import MessageAttachments from './MessageAttachments.vue';
-
-const props = defineProps<{ message: Message; myIp?: string }>();
-defineEmits<{ reply: [payload: { id: string; authorIp: string }] }>();
-
-const { perksFor } = usePerks();
-const { myPerks } = useMyPerks();
-const { prefs } = useCustomStyles();
-
-function perksOf(m: Reply): any {
-  return m.authorPerks ?? perksFor(m.authorIp);
-}
-
-function ipStyle(m: Reply) {
-  const ip = m.authorIp;
-  const colorOverride = prefs.ipColors[ip];
-  if (colorOverride && colorOverride !== 'auto') {
-    return { color: colorOverride, textShadow: getIpGlow(colorOverride) };
-  }
-  const p = perksOf(m);
-  return {
-    color: getIpColorWithPerks(ip, p),
-    textShadow: getIpGlowWithPerks(ip, p),
-  };
-}
-
-function petsLeft(m: Reply): string {
-  const ip = m.authorIp;
-  if (ip in prefs.ipPets) return prefs.ipPets[ip]; // '' = aucun pet
-  const pets = perksOf(m)?.pets ?? [];
-  return pets
-    .filter((x: any) => x.position === 'left' || x.position === 'both')
-    .map((x: any) => x.char)
-    .join('');
-}
-function petsRight(m: Reply): string {
-  const ip = m.authorIp;
-  if (ip in prefs.ipPets) return ''; // override = pet gauche uniquement
-  const pets = perksOf(m)?.pets ?? [];
-  return pets
-    .filter((x: any) => x.position === 'right' || x.position === 'both')
-    .map((x: any) => x.char)
-    .join('');
-}
-
-function openIpMenu(e: MouseEvent, ip: string): void {
-  if (ip !== props.myIp) return;
-
-  const hasElementSkin = !!myPerks.value.elementSkin;
-  const ownedPets = myPerks.value.pets ?? [];
-  const hasPets = ownedPets.length > 0;
-
-  // Nothing to show if no perk unlocks customization.
-  if (!hasElementSkin && !hasPets) return;
-
-  const currentColor = prefs.ipColors[ip] ?? 'auto';
-  const currentPet   = ip in prefs.ipPets ? prefs.ipPets[ip] : '__inherit__';
-
-  const items: import('@/composables/useContextMenu').ContextMenuItem[] = [];
-
-  if (hasElementSkin) {
-    items.push({ value: '__h_color', label: 'Couleur', isHeader: true });
-    items.push(...IP_COLOR_OPTIONS.map((o) => ({ value: `color:${o.value}`, label: o.label, swatch: o.swatch })));
-  }
-
-  if (hasPets) {
-    items.push({ value: '__h_pet', label: 'Pet', isHeader: true });
-    items.push({ value: 'pet:__inherit__', label: '↩ défaut' });
-    // Show only the pets the user actually owns.
-    const seen = new Set<string>();
-    for (const p of ownedPets) {
-      if (!seen.has(p.char)) {
-        seen.add(p.char);
-        items.push({ value: `pet:${p.char}`, label: p.char });
-      }
-    }
-  }
-
-  openContextMenu({
-    x: e.clientX,
-    y: e.clientY,
-    title: ip,
-    items,
-    current: currentColor !== 'auto' ? `color:${currentColor}` : `pet:${currentPet}`,
-    onSelect: (v) => {
-      if (v.startsWith('color:')) {
-        prefs.ipColors[ip] = v.slice(6);
-      } else if (v.startsWith('pet:')) {
-        const pet = v.slice(4);
-        if (pet === '__inherit__') {
-          delete prefs.ipPets[ip];
-        } else {
-          prefs.ipPets[ip] = pet;
-        }
-      }
-    },
-  });
-}
-
-function fmt(date: string): string {
-  return new Date(date).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
-}
-</script>
-
-<style scoped>
-.message-item {
-  padding: 4px 0;
-}
-
-.message-meta {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-  padding: 0 25px;
-}
-
-.ip-wrap { display: inline-flex; align-items: baseline; gap: 4px; }
-.pet { font-size: 12px; filter: drop-shadow(0 0 3px currentColor); }
-.pet--sm { font-size: 11px; }
-.vip-badge {
-  font-family: Arial, sans-serif; font-size: 8px; font-weight: bold;
-  color: #ffcc44; background: #2a2206; border: 1px solid #665511; border-radius: 4px;
-  padding: 0 4px; margin-left: 4px; letter-spacing: 0.5px;
-}
-
-.ip {
-  font-family: 'Courier New', monospace;
-  font-size: 12px;
-  font-weight: bold;
-}
-
-.ts {
-  font-family: 'Courier New', monospace;
-  font-size: 10px;
-  color: #303030;
-}
-
-.reply-btn {
-  background: none; border: none; cursor: pointer;
-  font-family: Arial, sans-serif; font-size: 10px; color: #33335a;
-  padding: 0; opacity: 0; transition: opacity 0.12s, color 0.12s;
-}
-.message-item:hover .reply-btn,
-.reply:hover .reply-btn { opacity: 1; }
-.reply-btn:hover { color: #00ccff; }
-
-.message-body {
-  font-family: Arial, sans-serif;
-  font-size: 13px;
-  color: #c0c0c0;
-  padding: 3px 25px 0;
-  margin: 0;
-  word-break: break-word;
-}
-
-.divider {
-  height: 1px;
-  background: #141420;
-  margin: 8px 25px 0;
-}
-
-/* ── Réponses ── */
-.reply {
-  margin: 6px 25px 0 45px;
-  border-left: 2px solid #1a1a2a;
-  padding-left: 10px;
-}
-
-.reply-ip {
-  font-size: 11px;
-}
-
-.reply-body {
-  font-size: 12px;
-  padding-left: 0;
-}
-</style>
+<!-- Un message avec ses éventuelles réponses, perks d'auteur, rich content et pièces jointes -->
+<template>
+  <div class="message-item">
+    <!-- Auteur + horodatage -->
+    <div class="message-meta">
+      <span class="ip-wrap" @contextmenu.prevent="openIpMenu($event, message.authorIp)" :title="message.authorIp === myIp ? 'Clic droit pour personnaliser' : undefined">
+        <span v-if="petsLeft(message)" class="pet">{{ petsLeft(message) }}</span>
+        <span class="ip" :style="ipStyle(message)">{{ message.authorIp }}</span>
+        <span v-if="petsRight(message)" class="pet">{{ petsRight(message) }}</span>
+        <span v-if="message.authorPerks?.badge" class="vip-badge">VIP</span>
+      </span>
+      <span v-if="message.authorGeo && geoLabel(message.authorGeo)" class="geo-tag">
+        <a :href="geoLink(message.authorGeo)" target="_blank" rel="noopener noreferrer" class="geo-link">
+          <img v-if="message.authorGeo.countryCode" :src="`https://flagcdn.com/16x12/${message.authorGeo.countryCode.toLowerCase()}.png`" :alt="message.authorGeo.countryCode" class="geo-flag" />
+          <span v-else>🏠</span>
+          {{ geoLabel(message.authorGeo) }}
+        </a>
+      </span>
+      <span class="ts">{{ fmt(message.createdAt) }}</span>
+      <button class="reply-btn" @click="$emit('reply', { id: message.id, authorIp: message.authorIp })" type="button">↩ répondre</button>
+      <FavButton :message="message" />
+    </div>
+
+    <!-- Contenu : riche (iframe sandbox) ou texte simple -->
+    <RichContent
+      v-if="message.richMode && message.richMode !== 'none' && message.richContent"
+      :mode="message.richMode"
+      :content="message.richContent"
+    />
+    <p v-else class="message-body">{{ message.content }}</p>
+
+    <!-- Pièces jointes -->
+    <MessageAttachments v-if="message.attachments?.length" :attachments="message.attachments" />
+
+    <!-- Réponses -->
+    <div
+      v-for="reply in message.replies"
+      :key="reply.id"
+      class="reply"
+    >
+      <span class="ip-wrap" @contextmenu.prevent="openIpMenu($event, reply.authorIp)" :title="reply.authorIp === myIp ? 'Clic droit pour personnaliser' : undefined">
+        <span v-if="petsLeft(reply)" class="pet pet--sm">{{ petsLeft(reply) }}</span>
+        <span class="ip reply-ip" :style="ipStyle(reply)">{{ reply.authorIp }}</span>
+        <span v-if="petsRight(reply)" class="pet pet--sm">{{ petsRight(reply) }}</span>
+      </span>
+      <span v-if="reply.authorGeo && geoLabel(reply.authorGeo)" class="geo-tag geo-tag--sm">
+        <a :href="geoLink(reply.authorGeo)" target="_blank" rel="noopener noreferrer" class="geo-link">
+          <img v-if="reply.authorGeo.countryCode" :src="`https://flagcdn.com/16x12/${reply.authorGeo.countryCode.toLowerCase()}.png`" :alt="reply.authorGeo.countryCode" class="geo-flag" />
+          <span v-else>🏠</span>
+          {{ geoLabel(reply.authorGeo) }}
+        </a>
+      </span>
+      <span class="ts">{{ fmt(reply.createdAt) }}</span>
+      <button class="reply-btn" @click="$emit('reply', { id: message.id, authorIp: reply.authorIp })" type="button">↩</button>
+      <RichContent
+        v-if="reply.richMode && reply.richMode !== 'none' && reply.richContent"
+        :mode="reply.richMode"
+        :content="reply.richContent"
+      />
+      <p v-else class="message-body reply-body">{{ reply.content }}</p>
+      <MessageAttachments v-if="reply.attachments?.length" :attachments="reply.attachments" />
+    </div>
+
+    <div class="divider" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Message } from '@/composables/useMessages';
+import { openContextMenu } from '@/composables/useContextMenu';
+import { IP_COLOR_OPTIONS } from '@/composables/useCustomStyles';
+import { useMessageItem } from '@/composables/useMessageItem';
+import RichContent from './RichContent.vue';
+import MessageAttachments from './MessageAttachments.vue';
+import FavButton from './FavButton.vue';
+
+const props = defineProps<{ message: Message; myIp?: string }>();
+defineEmits<{ reply: [payload: { id: string; authorIp: string }] }>();
+
+const { ipStyle, petsLeft, petsRight, fmt, geoLabel, geoLink, myPerks, prefs } = useMessageItem();
+
+function openIpMenu(e: MouseEvent, ip: string): void {
+  if (ip !== props.myIp) return;
+
+  const hasElementSkin = !!myPerks.value.elementSkin;
+  const ownedPets = myPerks.value.pets ?? [];
+  const hasPets = ownedPets.length > 0;
+
+  // Nothing to show if no perk unlocks customization.
+  if (!hasElementSkin && !hasPets) return;
+
+  const currentColor = prefs.ipColors[ip] ?? 'auto';
+  const currentPet   = ip in prefs.ipPets ? prefs.ipPets[ip] : '__inherit__';
+
+  const items: import('@/composables/useContextMenu').ContextMenuItem[] = [];
+
+  if (hasElementSkin) {
+    items.push({ value: '__h_color', label: 'Couleur', isHeader: true });
+    items.push(...IP_COLOR_OPTIONS.map((o) => ({ value: `color:${o.value}`, label: o.label, swatch: o.swatch })));
+  }
+
+  if (hasPets) {
+    items.push({ value: '__h_pet', label: 'Pet', isHeader: true });
+    items.push({ value: 'pet:__inherit__', label: '↩ défaut' });
+    // Show only the pets the user actually owns.
+    const seen = new Set<string>();
+    for (const p of ownedPets) {
+      if (!seen.has(p.char)) {
+        seen.add(p.char);
+        items.push({ value: `pet:${p.char}`, label: p.char });
+      }
+    }
+  }
+
+  openContextMenu({
+    x: e.clientX,
+    y: e.clientY,
+    title: ip,
+    items,
+    current: currentColor !== 'auto' ? `color:${currentColor}` : `pet:${currentPet}`,
+    onSelect: (v) => {
+      if (v.startsWith('color:')) {
+        prefs.ipColors[ip] = v.slice(6);
+      } else if (v.startsWith('pet:')) {
+        const pet = v.slice(4);
+        if (pet === '__inherit__') {
+          delete prefs.ipPets[ip];
+        } else {
+          prefs.ipPets[ip] = pet;
+        }
+      }
+    },
+  });
+}
+
+</script>
+
+<style scoped>
+.message-item {
+  padding: 4px 0;
+}
+
+.message-meta {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 0 25px;
+}
+
+.ip-wrap { display: inline-flex; align-items: baseline; gap: 4px; }
+.pet { font-size: 12px; filter: drop-shadow(0 0 3px currentColor); }
+.pet--sm { font-size: 11px; }
+.vip-badge {
+  font-family: Arial, sans-serif; font-size: 8px; font-weight: bold;
+  color: #ffcc44; background: #2a2206; border: 1px solid #665511; border-radius: 4px;
+  padding: 0 4px; margin-left: 4px; letter-spacing: 0.5px;
+}
+
+.ip {
+  font-family: 'Courier New', monospace;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.ts {
+  font-family: 'Courier New', monospace;
+  font-size: 10px;
+  color: #303030;
+}
+
+.reply-btn {
+  background: none; border: none; cursor: pointer;
+  font-family: Arial, sans-serif; font-size: 10px; color: #33335a;
+  padding: 0; opacity: 0; transition: opacity 0.12s, color 0.12s;
+}
+.message-item:hover .reply-btn,
+.reply:hover .reply-btn { opacity: 1; }
+.reply-btn:hover { color: #00ccff; }
+
+.message-body {
+  font-family: Arial, sans-serif;
+  font-size: 13px;
+  color: #c0c0c0;
+  padding: 3px 25px 0;
+  margin: 0;
+  word-break: break-word;
+}
+
+.divider {
+  height: 1px;
+  background: #141420;
+  margin: 8px 25px 0;
+}
+
+/* ── Réponses ── */
+.reply {
+  margin: 6px 25px 0 45px;
+  border-left: 2px solid #1a1a2a;
+  padding-left: 10px;
+}
+
+.reply-ip {
+  font-size: 11px;
+}
+
+.reply-body {
+  font-size: 12px;
+  padding-left: 0;
+}
+
+.geo-tag {
+  font-family: Arial, sans-serif;
+  font-size: 10px;
+  color: #44445a;
+  white-space: nowrap;
+}
+.geo-tag--sm { font-size: 9px; }
+.geo-link {
+  color: inherit;
+  text-decoration: none;
+  opacity: 0.7;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  transition: opacity 0.12s, color 0.12s;
+}
+.geo-link:hover {
+  color: #5588cc;
+  opacity: 1;
+  text-decoration: underline;
+}
+.geo-flag {
+  width: 16px;
+  height: 12px;
+  object-fit: cover;
+  border-radius: 2px;
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+</style>

frontend/src/components/MessageItemBubble.vue

@@ -0,0 +1,159 @@
+<!-- Variante "bulles" du message — style chat mobile -->
+<template>
+  <div class="bubble-item" :class="{ 'bubble-item--mine': isMine }">
+    <div class="bubble-header">
+      <span class="bubble-ip" :style="ipStyle(message)">
+        <span v-if="petsLeft(message)" class="pet">{{ petsLeft(message) }}</span>
+        {{ message.authorIp }}
+        <span v-if="petsRight(message)" class="pet">{{ petsRight(message) }}</span>
+        <span v-if="message.authorPerks?.badge" class="vip-badge">VIP</span>
+      </span>
+      <span class="bubble-ts">{{ fmt(message.createdAt) }}</span>
+      <a
+        v-if="message.authorGeo && geoLabel(message.authorGeo)"
+        :href="geoLink(message.authorGeo)"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="geo-link"
+      >
+        <img
+          v-if="message.authorGeo.countryCode"
+          :src="`https://flagcdn.com/16x12/${message.authorGeo.countryCode.toLowerCase()}.png`"
+          :alt="message.authorGeo.countryCode"
+          class="geo-flag"
+        />
+        <span v-else>🏠</span>
+      </a>
+    </div>
+
+    <!-- Contenu -->
+    <div class="bubble" :class="{ 'bubble--mine': isMine }">
+      <RichContent
+        v-if="message.richMode && message.richMode !== 'none' && message.richContent"
+        :mode="message.richMode"
+        :content="message.richContent"
+      />
+      <span v-else>{{ message.content }}</span>
+    </div>
+
+    <MessageAttachments v-if="message.attachments?.length" :attachments="message.attachments" />
+
+    <!-- Réponses en thread -->
+    <div v-if="message.replies?.length" class="bubble-thread">
+      <div v-for="reply in message.replies" :key="reply.id" class="bubble-reply">
+        <span class="bubble-reply-ip" :style="ipStyle(reply)">{{ reply.authorIp }}</span>
+        <span class="bubble-reply-ts">{{ fmt(reply.createdAt) }}</span>
+        <RichContent
+          v-if="reply.richMode && reply.richMode !== 'none' && reply.richContent"
+          :mode="reply.richMode"
+          :content="reply.richContent"
+        />
+        <span v-else class="bubble-reply-body">{{ reply.content }}</span>
+      </div>
+    </div>
+
+    <div class="bubble-actions">
+      <button
+        class="bubble-reply-btn"
+        type="button"
+        @click="$emit('reply', { id: message.id, authorIp: message.authorIp })"
+      >↩</button>
+      <FavButton :message="message" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Message } from '@/composables/useMessages';
+import { useMessageItem } from '@/composables/useMessageItem';
+import RichContent from './RichContent.vue';
+import MessageAttachments from './MessageAttachments.vue';
+import FavButton from './FavButton.vue';
+
+const props = defineProps<{ message: Message; myIp?: string }>();
+defineEmits<{ reply: [payload: { id: string; authorIp: string }] }>();
+
+const { ipStyle, petsLeft, petsRight, fmt, geoLabel, geoLink } = useMessageItem();
+
+const isMine = computed(() => props.message.authorIp === props.myIp);
+</script>
+
+<style scoped>
+.bubble-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 4px 12px;
+  gap: 3px;
+  position: relative;
+}
+.bubble-item--mine { align-items: flex-end; }
+
+.bubble-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-family: 'Courier New', monospace;
+  font-size: 10px;
+}
+.bubble-ip { font-weight: bold; font-size: 11px; }
+.bubble-ts { color: #303040; }
+.pet { font-size: 11px; }
+.vip-badge {
+  font-family: Arial, sans-serif; font-size: 8px; font-weight: bold;
+  color: #ffcc44; background: #2a2206; border: 1px solid #665511;
+  border-radius: 4px; padding: 0 4px; margin-left: 2px;
+}
+
+.bubble {
+  background: var(--xip-bubble-other);
+  border: 1px solid var(--xip-bubble-other-border);
+  border-radius: 14px 14px 14px 4px;
+  padding: 7px 13px;
+  font-family: Arial, sans-serif;
+  font-size: 13px;
+  color: #e0e0e8;
+  max-width: 72%;
+  word-break: break-word;
+  line-height: 1.4;
+}
+.bubble--mine {
+  background: var(--xip-bubble-sent);
+  border-color: var(--xip-bubble-sent-border);
+  border-radius: 14px 14px 4px 14px;
+  color: #eef4f0;
+}
+
+.bubble-thread {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding-left: 12px;
+  border-left: 2px solid #1a1a2e;
+  margin-top: 2px;
+}
+.bubble-reply {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  font-family: Arial, sans-serif;
+  font-size: 11px;
+  color: #888;
+}
+.bubble-reply-ip { font-family: 'Courier New', monospace; font-size: 10px; font-weight: bold; }
+.bubble-reply-ts  { font-family: 'Courier New', monospace; font-size: 9px; color: #303040; }
+.bubble-reply-body { color: #888; }
+
+.bubble-actions { display: flex; align-items: center; gap: 8px; }
+.bubble-reply-btn {
+  background: none; border: none; cursor: pointer;
+  font-size: 10px; color: #33335a;
+  padding: 0; opacity: 0; transition: opacity 0.12s;
+}
+.bubble-item:hover .bubble-reply-btn { opacity: 1; }
+.bubble-reply-btn:hover { color: #00ccff; }
+
+.geo-link { color: #44445a; text-decoration: none; display: inline-flex; align-items: center; }
+.geo-flag { width: 14px; height: 10px; object-fit: cover; border-radius: 2px; }
+</style>

frontend/src/components/MessageItemCompact.vue

@@ -0,0 +1,97 @@
+<!-- Variante "compact" du message — une ligne dense (IP + contenu inline) -->
+<template>
+  <div class="compact-item">
+    <div class="compact-line">
+      <span class="compact-ip" :style="ipStyle(message)">
+        <span v-if="petsLeft(message)" class="pet">{{ petsLeft(message) }}</span>{{ message.authorIp }}<span v-if="petsRight(message)" class="pet">{{ petsRight(message) }}</span>
+      </span>
+      <img
+        v-if="message.authorGeo?.countryCode"
+        :src="`https://flagcdn.com/16x12/${message.authorGeo.countryCode.toLowerCase()}.png`"
+        :alt="message.authorGeo.countryCode"
+        class="compact-flag"
+      />
+      <RichContent
+        v-if="message.richMode && message.richMode !== 'none' && message.richContent"
+        :mode="message.richMode"
+        :content="message.richContent"
+      />
+      <span v-else class="compact-body">{{ message.content }}</span>
+      <span class="compact-ts">{{ fmt(message.createdAt) }}</span>
+      <button
+        class="compact-reply-btn"
+        type="button"
+        @click="$emit('reply', { id: message.id, authorIp: message.authorIp })"
+      >↩</button>
+      <FavButton :message="message" />
+    </div>
+
+    <MessageAttachments v-if="message.attachments?.length" :attachments="message.attachments" />
+
+    <!-- Réponses, inline et indentées -->
+    <div
+      v-for="reply in message.replies"
+      :key="reply.id"
+      class="compact-line compact-line--reply"
+    >
+      <span class="compact-ip" :style="ipStyle(reply)">{{ reply.authorIp }}</span>
+      <RichContent
+        v-if="reply.richMode && reply.richMode !== 'none' && reply.richContent"
+        :mode="reply.richMode"
+        :content="reply.richContent"
+      />
+      <span v-else class="compact-body">{{ reply.content }}</span>
+      <span class="compact-ts">{{ fmt(reply.createdAt) }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Message } from '@/composables/useMessages';
+import { useMessageItem } from '@/composables/useMessageItem';
+import RichContent from './RichContent.vue';
+import MessageAttachments from './MessageAttachments.vue';
+import FavButton from './FavButton.vue';
+
+defineProps<{ message: Message; myIp?: string }>();
+defineEmits<{ reply: [payload: { id: string; authorIp: string }] }>();
+
+const { ipStyle, petsLeft, petsRight, fmt } = useMessageItem();
+</script>
+
+<style scoped>
+.compact-item {
+  padding: 1px 14px;
+  border-bottom: 1px solid #0e0e18;
+}
+.compact-line {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  font-family: 'Courier New', monospace;
+  font-size: 12px;
+  line-height: 1.7;
+}
+.compact-line--reply { padding-left: 24px; opacity: 0.85; }
+
+.compact-ip { font-weight: bold; flex-shrink: 0; }
+.pet { font-size: 11px; }
+.compact-flag { width: 14px; height: 10px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
+
+.compact-body {
+  font-family: 'Lato', Arial, sans-serif;
+  color: #c0c0c0;
+  flex: 1;
+  min-width: 0;
+  word-break: break-word;
+}
+.compact-ts { color: #303040; font-size: 10px; flex-shrink: 0; }
+
+.compact-reply-btn {
+  background: none; border: none; cursor: pointer;
+  font-size: 11px; color: #33335a; padding: 0; flex-shrink: 0;
+  opacity: 0; transition: opacity 0.12s;
+}
+.compact-item:hover .compact-reply-btn { opacity: 1; }
+.compact-reply-btn:hover { color: var(--xip-accent); }
+</style>

frontend/src/components/MessageList.vue

@@ -1,82 +1,98 @@
-<!-- Zone de messages scrollable avec la pub casino en overlay -->
-<template>
-  <div class="feed-wrapper">
-    <!-- Messages -->
-    <div ref="listEl" class="feed-scroll">
-      <MessageItem
-        v-for="msg in messages"
-        :key="msg.id"
-        :message="msg"
-        :my-ip="myIp"
-        @reply="$emit('reply', $event)"
-      />
-      <div v-if="messages.length === 0" class="feed-empty">
-        Aucun message pour l'instant.
-      </div>
-    </div>
-
-    <!-- Pub casino : overlay absolu sur la droite du feed (masqué si NoAds) -->
-    <InlineCasinoAd v-if="!hideAds" class="casino-overlay" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, watch, nextTick } from 'vue';
-import type { Message } from '@/composables/useMessages';
-import MessageItem from './MessageItem.vue';
-import InlineCasinoAd from './InlineCasinoAd.vue';
-
-const props = defineProps<{ messages: Message[]; hideAds?: boolean; myIp?: string }>();
-defineEmits<{ reply: [payload: { id: string; authorIp: string }] }>();
-
-const listEl = ref<HTMLElement | null>(null);
-
-// Auto-scroll vers le bas à chaque nouveau message
-watch(
-  () => props.messages.length,
-  async () => {
-    await nextTick();
-    if (listEl.value) {
-      listEl.value.scrollTop = listEl.value.scrollHeight;
-    }
-  },
-);
-</script>
-
-<style scoped>
-.feed-wrapper {
-  flex: 1;
-  position: relative;
-  overflow: hidden;
-  min-height: 0;
-}
-
-.feed-scroll {
-  height: 100%;
-  overflow-y: auto;
-  padding: 8px 0;
-  scrollbar-width: thin;
-  scrollbar-color: #252535 #080810;
-}
-.feed-scroll::-webkit-scrollbar       { width: 8px; }
-.feed-scroll::-webkit-scrollbar-track { background: #080810; }
-.feed-scroll::-webkit-scrollbar-thumb { background: #252535; border-radius: 3px; }
-
-.feed-empty {
-  padding: 48px 25px;
-  color: #2a2a44;
-  font-family: Arial, sans-serif;
-  font-size: 13px;
-}
-
-/* Positionné en absolu sur la droite du wrapper */
-.casino-overlay {
-  position: absolute;
-  right: 30px;
-  top: 20px;
-  pointer-events: none;
-}
-.casino-overlay :deep(.casino-cta) {
-  pointer-events: all;
-}
-</style>
+<!-- Zone de messages scrollable avec la pub casino en overlay -->
+<template>
+  <div class="feed-wrapper">
+    <div ref="listEl" class="feed-scroll">
+      <TransitionGroup name="msg" tag="div">
+        <component
+          :is="messageComponent"
+          v-for="msg in messages"
+          :key="msg.id"
+          :message="msg"
+          :my-ip="myIp"
+          @reply="$emit('reply', $event)"
+        />
+      </TransitionGroup>
+      <div v-if="messages.length === 0" class="feed-empty">
+        Aucun message pour l'instant.
+      </div>
+    </div>
+
+    <!-- Pub casino : overlay absolu sur la droite du feed (masqué si NoAds) -->
+    <InlineCasinoAd v-if="!hideAds" class="casino-overlay" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, nextTick } from 'vue';
+import type { Message } from '@/composables/useMessages';
+import { useTheme, THEME_LAYOUT, type Layout } from '@/composables/useTheme';
+import MessageItem from './MessageItem.vue';
+import MessageItemBubble from './MessageItemBubble.vue';
+import MessageItemCompact from './MessageItemCompact.vue';
+import InlineCasinoAd from './InlineCasinoAd.vue';
+
+const props = defineProps<{ messages: Message[]; hideAds?: boolean; myIp?: string }>();
+defineEmits<{ reply: [payload: { id: string; authorIp: string }] }>();
+
+const { theme } = useTheme();
+
+// One component per layout family. The `?? MessageItem` fallback guarantees a
+// missing/unknown layout can never produce `<component :is="undefined">`.
+const LAYOUT_COMPONENT: Record<Layout, typeof MessageItem> = {
+  classic: MessageItem,
+  bubble: MessageItemBubble,
+  compact: MessageItemCompact,
+};
+const messageComponent = computed(
+  () => LAYOUT_COMPONENT[THEME_LAYOUT[theme.value]] ?? MessageItem,
+);
+
+const listEl = ref<HTMLElement | null>(null);
+
+watch(
+  () => props.messages.length,
+  async () => {
+    await nextTick();
+    listEl.value?.scrollTo({ top: listEl.value.scrollHeight, behavior: 'smooth' });
+  },
+);
+</script>
+
+<style scoped>
+.feed-wrapper {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.feed-scroll {
+  height: 100%;
+  overflow-y: auto;
+  padding: 8px 0;
+  scrollbar-width: thin;
+  scrollbar-color: #252535 #080810;
+}
+.feed-scroll::-webkit-scrollbar       { width: 8px; }
+.feed-scroll::-webkit-scrollbar-track { background: #080810; }
+.feed-scroll::-webkit-scrollbar-thumb { background: #252535; border-radius: 3px; }
+
+.feed-empty {
+  padding: 48px 25px;
+  color: #2a2a44;
+  font-family: Arial, sans-serif;
+  font-size: 13px;
+}
+
+.casino-overlay {
+  position: absolute;
+  right: 30px;
+  top: 20px;
+  pointer-events: none;
+}
+.casino-overlay :deep(.casino-cta) { pointer-events: all; }
+
+/* Transition d'entrée des nouveaux messages */
+.msg-enter-active { transition: opacity 0.2s ease, transform 0.2s ease; }
+.msg-enter-from   { opacity: 0; transform: translateY(6px); }
+</style>

frontend/src/components/Modal.vue

@@ -0,0 +1,64 @@
+<!-- Modale réutilisable rendue HORS de l'arbre DOM courant (Teleport to body).
+     Contenu injecté par le parent via slots (défaut = corps, #title = en-tête).
+     Ferme au clic extérieur (v-click-outside) ou sur Échap. -->
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div v-if="open" class="modal-backdrop">
+        <div class="modal-card" v-click-outside="close" role="dialog" aria-modal="true">
+          <header class="modal-head">
+            <h3 class="modal-title"><slot name="title">{{ title }}</slot></h3>
+            <button class="modal-x" type="button" title="Fermer" @click="close">✕</button>
+          </header>
+          <div class="modal-body">
+            <slot />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { watch, onBeforeUnmount } from 'vue';
+import { vClickOutside } from '@/directives/clickOutside';
+
+const props = defineProps<{ open: boolean; title?: string }>();
+const emit = defineEmits<{ 'update:open': [v: boolean] }>();
+
+function close(): void { emit('update:open', false); }
+
+function onKey(e: KeyboardEvent): void {
+  if (e.key === 'Escape') close();
+}
+watch(() => props.open, (v) => {
+  if (v) document.addEventListener('keydown', onKey);
+  else document.removeEventListener('keydown', onKey);
+});
+onBeforeUnmount(() => document.removeEventListener('keydown', onKey));
+</script>
+
+<style scoped>
+.modal-backdrop {
+  position: fixed; inset: 0; z-index: 1000;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex; align-items: center; justify-content: center;
+  padding: 20px;
+}
+.modal-card {
+  width: 100%; max-width: 460px; max-height: 85vh; overflow-y: auto;
+  background: #101018; border: 1px solid #2a2a44; border-radius: 12px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
+}
+.modal-head {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 14px 18px; border-bottom: 1px solid #20203a;
+}
+.modal-title { font-family: Arial, sans-serif; font-size: 15px; font-weight: bold; color: #ccccee; margin: 0; }
+.modal-x { background: none; border: none; color: #55557a; cursor: pointer; font-size: 15px; }
+.modal-x:hover { color: #aaa; }
+.modal-body { padding: 18px; }
+
+.modal-enter-active, .modal-leave-active { transition: opacity 0.18s ease; }
+.modal-enter-from, .modal-leave-to { opacity: 0; }
+</style>

frontend/src/components/RichContent.vue

@@ -1,85 +1,108 @@
-<!--
-  Rich message renderer — SECURITY CRITICAL.
-
-  Renders paid HTML/CSS or JS messages inside a FIXED-SIZE sandboxed iframe.
-
-  Sandbox policy (never deviate):
-   - htmlcss tier: sandbox="" (empty) → scripts are INERT (honours README "pas de script").
-   - js tier:      sandbox="allow-scripts" ONLY → script runs in a NULL origin and
-                   cannot touch the parent (no allow-same-origin, ever).
-
-  We NEVER combine allow-scripts with allow-same-origin (that would re-grant parent
-  access and defeat isolation). A runtime assertion below guards against it.
--->
-<template>
-  <div class="rich-frame-wrap">
-    <span class="rich-tag" :class="`rich-tag--${mode}`">
-      {{ mode === 'js' ? '⚡ JS' : '🎨 HTML/CSS' }} · bac à sable
-    </span>
-    <iframe
-      class="rich-frame"
-      :sandbox="sandboxTokens"
-      :srcdoc="srcdoc"
-      referrerpolicy="no-referrer"
-      loading="lazy"
-      title="Message riche (isolé)"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-
-const props = defineProps<{ mode: 'htmlcss' | 'js'; content: string }>();
-
-// htmlcss → no scripts at all; js → scripts only, NEVER same-origin.
-const sandboxTokens = computed(() => (props.mode === 'js' ? 'allow-scripts' : ''));
-
-// Defense-in-depth assertion: the iframe must never get allow-same-origin alongside scripts.
-if (import.meta.env.DEV) {
-  const t = props.mode === 'js' ? 'allow-scripts' : '';
-  if (t.includes('allow-same-origin') && t.includes('allow-scripts')) {
-    throw new Error('SECURITY: rich iframe must never combine allow-scripts + allow-same-origin');
-  }
-}
-
-const srcdoc = computed(() => {
-  // In-document CSP as a second layer (the sandbox is the primary boundary).
-  const csp =
-    props.mode === 'js'
-      ? "default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data: https:; font-src data:;"
-      : "default-src 'none'; script-src 'none'; style-src 'unsafe-inline'; img-src data: https:; font-src data:;";
-  return `<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="Content-Security-Policy" content="${csp}"><style>html,body{margin:0;padding:8px;color:#ddd;font-family:Arial,sans-serif;background:#0a0a12;overflow:auto;height:100%;box-sizing:border-box}</style></head><body>${props.content}</body></html>`;
-});
-</script>
-
-<style scoped>
-.rich-frame-wrap {
-  position: relative;
-  margin: 6px 25px 0;
-}
-.rich-tag {
-  position: absolute;
-  top: -7px;
-  left: 8px;
-  z-index: 1;
-  font-family: Arial, sans-serif;
-  font-size: 8px;
-  font-weight: bold;
-  padding: 1px 6px;
-  border-radius: 6px;
-}
-.rich-tag--htmlcss { color: #00ddaa; background: #062019; border: 1px solid #0a4435; }
-.rich-tag--js { color: #ffcc44; background: #201a06; border: 1px solid #443a0a; }
-
-/* Fixed size per README ("taille fixe") — contains any layout-breaking CSS. */
-.rich-frame {
-  width: 480px;
-  max-width: 100%;
-  height: 270px;
-  border: 1px solid #222234;
-  border-radius: 8px;
-  background: #0a0a12;
-  display: block;
-}
-</style>
+<!--
+  Rich message renderer.
+
+  Sandbox policy:
+   - htmlcss: sandbox="" (empty) + meta CSP → scripts totalement inertes
+   - js:      sandbox avec tous les tokens SAUF allow-same-origin
+              → scripts libres, fetch vers l'extérieur OK, accès parent impossible
+              (null origin = isolation réelle sans allow-same-origin)
+-->
+<template>
+  <div class="rich-frame-wrap">
+    <span class="rich-tag" :class="`rich-tag--${mode}`">
+      {{ mode === 'js' ? '⚡ JS' : '🎨 HTML/CSS' }} · bac à sable
+    </span>
+    <iframe
+      ref="frameRef"
+      class="rich-frame"
+      :sandbox="sandboxTokens"
+      :srcdoc="srcdoc"
+      referrerpolicy="no-referrer"
+      loading="lazy"
+      title="Message riche (isolé)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useTemplateRef, watchEffect } from 'vue';
+
+const props = defineProps<{ mode: 'htmlcss' | 'js'; content: string }>();
+
+const frameRef = useTemplateRef<HTMLIFrameElement>('frameRef');
+
+// htmlcss → aucun script ; js → tout permis sauf accès au parent (pas de allow-same-origin)
+const sandboxTokens = computed(() =>
+  props.mode === 'js'
+    ? 'allow-scripts allow-forms allow-modals allow-downloads allow-popups allow-presentation allow-pointer-lock'
+    : ''
+);
+
+// Garde de sécurité réactive — allow-scripts + allow-same-origin = catastrophe
+watchEffect(() => {
+  const tokens = sandboxTokens.value;
+  if (tokens.includes('allow-scripts') && tokens.includes('allow-same-origin')) {
+    throw new Error('SECURITY: rich iframe must never combine allow-scripts + allow-same-origin');
+  }
+});
+
+const srcdoc = computed(() => {
+  // htmlcss : meta CSP en second couche (le sandbox="" bloque déjà les scripts)
+  // js      : pas de meta CSP — le sandbox null-origin est la vraie frontière
+  const metaCsp = props.mode === 'htmlcss'
+    ? `<meta http-equiv="Content-Security-Policy"
+         content="default-src 'none'; style-src 'unsafe-inline'; img-src data: https:; font-src data:;">`
+    : '';
+
+  return `<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  ${metaCsp}
+  <style>
+    html, body {
+      margin: 0;
+      padding: 8px;
+      color: #ddd;
+      font-family: Arial, sans-serif;
+      background: #0a0a12;
+      overflow: auto;
+      height: 100%;
+      box-sizing: border-box;
+    }
+  </style>
+</head>
+<body>${props.content}</body>
+</html>`;
+});
+</script>
+
+<style scoped>
+.rich-frame-wrap {
+  position: relative;
+  margin: 6px 25px 0;
+}
+.rich-tag {
+  position: absolute;
+  top: -7px;
+  left: 8px;
+  z-index: 1;
+  font-family: Arial, sans-serif;
+  font-size: 8px;
+  font-weight: bold;
+  padding: 1px 6px;
+  border-radius: 6px;
+}
+.rich-tag--htmlcss { color: #00ddaa; background: #062019; border: 1px solid #0a4435; }
+.rich-tag--js      { color: #ffcc44; background: #201a06; border: 1px solid #443a0a; }
+
+.rich-frame {
+  width: 480px;
+  max-width: 100%;
+  height: 270px;
+  border: 1px solid #222234;
+  border-radius: 8px;
+  background: #0a0a12;
+  display: block;
+}
+</style>

frontend/src/components/SearchBox.spec.ts

@@ -0,0 +1,34 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import SearchBox from './SearchBox.vue';
+
+describe('SearchBox (interaction composant + v-model debouncé)', () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  it('n’émet la valeur qu’après le délai de debounce', async () => {
+    const wrapper = mount(SearchBox, { props: { modelValue: '', delay: 300 } });
+    const input = wrapper.find('input');
+
+    await input.setValue('vue');
+    // Avant le délai : rien n'est émis vers le parent.
+    expect(wrapper.emitted('update:modelValue')).toBeFalsy();
+
+    vi.advanceTimersByTime(300);
+    await wrapper.vm.$nextTick();
+
+    const emitted = wrapper.emitted('update:modelValue');
+    expect(emitted).toBeTruthy();
+    expect(emitted![emitted!.length - 1]).toEqual(['vue']);
+  });
+
+  it('le bouton clear vide la valeur immédiatement', async () => {
+    const wrapper = mount(SearchBox, { props: { modelValue: 'déjà', delay: 300 } });
+    await wrapper.find('input').setValue('texte');
+    await wrapper.find('.search-clear').trigger('click');
+
+    const emitted = wrapper.emitted('update:modelValue');
+    expect(emitted).toBeTruthy();
+    expect(emitted![emitted!.length - 1]).toEqual(['']);
+  });
+});

frontend/src/components/SearchBox.vue

@@ -0,0 +1,83 @@
+<!-- Champ de recherche réutilisable avec liaison bidirectionnelle personnalisée
+     (v-model) + debounce interne. Se branche comme un input natif :
+     <SearchBox v-model="query" placeholder="…" />. Le parent ne reçoit la
+     nouvelle valeur qu'après une pause de frappe. -->
+<template>
+  <div class="search-box">
+    <span class="search-icon">🔎</span>
+    <input
+      ref="inputEl"
+      class="search-input"
+      type="text"
+      :value="text"
+      :placeholder="placeholder"
+      @input="onInput"
+      @keydown.escape="clearNow"
+    />
+    <button v-if="text" class="search-clear" type="button" title="Effacer" @click="clearNow">✕</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onBeforeUnmount } from 'vue';
+import { debounce } from '@/composables/useDebounce';
+
+const props = withDefaults(
+  defineProps<{ placeholder?: string; delay?: number }>(),
+  { placeholder: 'Rechercher…', delay: 350 },
+);
+
+// Liaison bidirectionnelle personnalisée : la prop modelValue + l'event update.
+const model = defineModel<string>({ default: '' });
+
+// Copie locale réactive pour un affichage immédiat ; le modèle parent n'est
+// mis à jour qu'après le debounce.
+const text = ref(model.value);
+
+// Si le parent change la valeur (ex. reset), refléter dans le champ.
+watch(model, (v) => { if (v !== text.value) text.value = v; });
+
+const pushModel = debounce((v: string) => { model.value = v; }, props.delay);
+
+function onInput(e: Event): void {
+  text.value = (e.target as HTMLInputElement).value;
+  pushModel(text.value);
+}
+
+function clearNow(): void {
+  pushModel.cancel();
+  text.value = '';
+  model.value = '';
+}
+
+onBeforeUnmount(() => pushModel.cancel());
+</script>
+
+<style scoped>
+.search-box {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: #141420;
+  border: 1px solid #222234;
+  border-radius: 23px;
+  padding: 8px 16px;
+}
+.search-box:focus-within { border-color: #333355; }
+.search-icon { font-size: 13px; opacity: 0.6; }
+.search-input {
+  flex: 1;
+  background: none;
+  border: none;
+  outline: none;
+  color: #aaaacc;
+  font-family: Arial, sans-serif;
+  font-size: 13px;
+}
+.search-input::placeholder { color: #2a2a44; }
+.search-clear {
+  background: none; border: none; cursor: pointer;
+  color: #55557a; font-size: 12px;
+}
+.search-clear:hover { color: #aaa; }
+</style>

frontend/src/components/SendButton.vue

@@ -1,75 +1,97 @@
-<!-- Bouton d'envoi — clic gauche : envoyer / clic droit : personnaliser le style -->
-<template>
-  <button
-    class="send-btn"
-    :disabled="disabled"
-    :style="btnStyle"
-    aria-label="Envoyer"
-    title="Clic droit pour personnaliser"
-    @click="$emit('send')"
-    @contextmenu.prevent="onRightClick"
-  >
-    <span v-if="activeSkinChar" class="skin-char">{{ activeSkinChar }}</span>
-    <svg v-else width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
-      <polygon points="4,5 15,9 4,13 7,9" fill="currentColor" />
-    </svg>
-  </button>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { openContextMenu } from '@/composables/useContextMenu';
-import { useCustomStyles, SEND_BUTTON_PRESETS } from '@/composables/useCustomStyles';
-import { useMyPerks } from '@/composables/useMessages';
-
-defineProps<{ disabled?: boolean }>();
-defineEmits<{ send: [] }>();
-
-const { prefs } = useCustomStyles();
-const { myPerks } = useMyPerks();
-
-const activeSkinChar = computed(() => {
-  const skinId = prefs.sendSkin;
-  if (!skinId) return null;
-  return myPerks.value.sendSkins?.find((s) => s.id === skinId)?.char ?? null;
-});
-
-const btnStyle = computed(() => {
-  const p = SEND_BUTTON_PRESETS[prefs.sendButton];
-  return { background: p.bg, color: p.color, borderRadius: p.radius };
-});
-
-function onRightClick(e: MouseEvent): void {
-  if (!myPerks.value.elementSkin) return;
-  openContextMenu({
-    x: e.clientX,
-    y: e.clientY,
-    title: 'Bouton d\'envoi',
-    items: Object.entries(SEND_BUTTON_PRESETS).map(([k, v]) => ({
-      value: k,
-      label: v.label,
-      swatch: v.color,
-    })),
-    current: prefs.sendButton,
-    onSelect: (v) => { prefs.sendButton = v as typeof prefs.sendButton; },
-  });
-}
-</script>
-
-<style scoped>
-.send-btn {
-  width: 42px;
-  height: 42px;
-  flex-shrink: 0;
-  border: 1px solid #ffffff10;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: filter 0.15s;
-}
-.send-btn:hover:not(:disabled) { filter: brightness(1.3); }
-.send-btn:active:not(:disabled) { filter: brightness(0.85); }
-.send-btn:disabled { opacity: 0.35; cursor: not-allowed; }
-.skin-char { font-size: 18px; line-height: 1; }
-</style>
+<!-- Bouton d'envoi — clic gauche : envoyer / clic droit : personnaliser le style -->
+<template>
+  <button
+    class="send-btn"
+    :disabled="disabled"
+    :style="btnStyle"
+    aria-label="Envoyer"
+    title="Clic droit pour personnaliser"
+    @click="$emit('send')"
+    @contextmenu.prevent="onRightClick"
+  >
+    <span v-if="activeSkinChar" class="skin-char">{{ activeSkinChar }}</span>
+    <svg v-else width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
+      <polygon points="4,5 15,9 4,13 7,9" fill="currentColor" />
+    </svg>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { openContextMenu } from '@/composables/useContextMenu';
+import { useCustomStyles, SEND_BUTTON_PRESETS } from '@/composables/useCustomStyles';
+import { useMyPerks } from '@/composables/useMessages';
+
+defineProps<{ disabled?: boolean }>();
+defineEmits<{ send: [] }>();
+
+const { prefs } = useCustomStyles();
+const { myPerks } = useMyPerks();
+
+const activeSkinChar = computed(() => {
+  const skinId = prefs.sendSkin;
+  if (!skinId) return null;
+  return myPerks.value.sendSkins?.find((s) => s.id === skinId)?.char ?? null;
+});
+
+const btnStyle = computed(() => {
+  // On the default preset, defer to the theme's CSS variables (so e.g. the
+  // WhatsApp theme tints the button green). A chosen preset overrides the theme.
+  if (prefs.sendButton === 'default') return {};
+  const p = SEND_BUTTON_PRESETS[prefs.sendButton];
+  return { background: p.bg, color: p.color, borderRadius: p.radius };
+});
+
+function onRightClick(e: MouseEvent): void {
+  const skins = myPerks.value.sendSkins ?? [];
+  const items: import('@/composables/useContextMenu').ContextMenuItem[] = [
+    ...Object.entries(SEND_BUTTON_PRESETS).map(([k, v]) => ({
+      value: k,
+      label: v.label,
+      swatch: v.color,
+      checked: prefs.sendButton === k,
+    })),
+  ];
+  if (skins.length > 0) {
+    items.push({ value: '__skin_header__', label: 'Skin', isHeader: true });
+    items.push({ value: '__default_skin__', label: 'Défaut', emoji: '▶', checked: prefs.sendSkin === '' });
+    for (const s of skins) {
+      items.push({ value: s.id, label: s.label ?? s.id.replace('send-skin-', ''), emoji: s.char, checked: prefs.sendSkin === s.id });
+    }
+  }
+  openContextMenu({
+    x: e.clientX,
+    y: e.clientY,
+    title: 'Bouton d\'envoi',
+    items,
+    current: '',
+    onSelect: (v) => {
+      if (v === '__default_skin__') { prefs.sendSkin = ''; }
+      else if (v.startsWith('send-skin-')) { prefs.sendSkin = v; }
+      else { prefs.sendButton = v as typeof prefs.sendButton; }
+    },
+  });
+}
+</script>
+
+<style scoped>
+.send-btn {
+  width: 42px;
+  height: 42px;
+  flex-shrink: 0;
+  border: 1px solid #ffffff10;
+  border-radius: 50%;
+  /* Defaults from the theme palette; a chosen preset overrides via inline style. */
+  background: var(--xip-send-bg);
+  color: var(--xip-send-fg);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: filter 0.15s;
+}
+.send-btn:hover:not(:disabled) { filter: brightness(1.3); }
+.send-btn:active:not(:disabled) { filter: brightness(0.85); }
+.send-btn:disabled { opacity: 0.35; cursor: not-allowed; }
+.skin-char { font-size: 18px; line-height: 1; }
+</style>

frontend/src/components/StatsTicker.vue

@@ -1,216 +1,216 @@
-<!-- Bandeau de stats permanent façon téléscripteur néon (casino / bourse). -->
-<template>
-  <div class="ticker" :class="{ 'is-off': !connected }">
-    <!-- Badge LIVE fixe à gauche -->
-    <div class="ticker-badge">
-      <span class="ticker-dot" />
-      <span class="ticker-badge-txt">{{ connected ? 'LIVE' : '···' }}</span>
-    </div>
-
-    <!-- Piste défilante (2 groupes identiques pour une boucle sans couture) -->
-    <div class="ticker-viewport">
-      <div class="ticker-track">
-        <div
-          v-for="copy in 2"
-          :key="copy"
-          class="ticker-group"
-          :aria-hidden="copy === 2 ? 'true' : undefined"
-        >
-          <span
-            v-for="item in items"
-            :key="item.key + '-' + copy"
-            class="chip"
-            :class="`chip--${item.tone}`"
-          >
-            <span class="chip-val">
-              <AnimatedNumber :value="item.value" :decimals="item.decimals ?? 0" />
-              <span v-if="item.unit" class="chip-unit">{{ item.unit }}</span>
-            </span>
-            <span class="chip-label">{{ item.label }}</span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import AnimatedNumber from './AnimatedNumber.vue';
-import type { Stats } from '@/composables/useRealtime';
-
-const props = defineProps<{ stats: Stats | null; connected: boolean }>();
-
-type Tone = 'cyan' | 'green' | 'magenta' | 'orange' | 'plain';
-interface Chip {
-  key: string;
-  label: string;
-  value: number;
-  tone: Tone;
-  unit?: string;
-  decimals?: number;
-}
-
-const ZERO: Stats = {
-  connectedTabs: 0,
-  typingNow: 0,
-  lettersPerSec: 0,
-  msgsPerMin: 0,
-  messages: 0,
-  replies: 0,
-  charsSent: 0,
-  lettersTyped: 0,
-  uniqueIps: 0,
-  longestMsg: 0,
-  abandonRate: 0,
-  avgLength: 0,
-  moneyExtorted: 0,
-};
-
-const items = computed<Chip[]>(() => {
-  const s = props.stats ?? ZERO;
-  return [
-    { key: 'tabs', label: 'onglets connectés', value: s.connectedTabs, tone: 'cyan' },
-    { key: 'typing', label: 'écrivent là', value: s.typingNow, tone: 'green' },
-    { key: 'lps', label: 'lettres / s', value: s.lettersPerSec, decimals: 1, tone: 'green' },
-    { key: 'mpm', label: 'messages / min', value: s.msgsPerMin, tone: 'green' },
-    { key: 'msgs', label: 'messages', value: s.messages, tone: 'cyan' },
-    { key: 'replies', label: 'réponses', value: s.replies, tone: 'plain' },
-    { key: 'chars', label: 'caractères envoyés', value: s.charsSent, tone: 'plain' },
-    { key: 'letters', label: 'lettres tapées', value: s.lettersTyped, tone: 'magenta' },
-    { key: 'ips', label: 'IP uniques', value: s.uniqueIps, tone: 'cyan' },
-    { key: 'longest', label: 'le + long', value: s.longestMsg, unit: ' car', tone: 'plain' },
-    { key: 'abandon', label: "taux d'abandon", value: s.abandonRate, decimals: 1, unit: ' %', tone: 'orange' },
-    { key: 'avg', label: 'longueur moy.', value: s.avgLength, decimals: 1, unit: ' car', tone: 'plain' },
-    { key: 'money', label: 'argent extorqué', value: s.moneyExtorted, decimals: 2, unit: ' €', tone: 'orange' },
-  ];
-});
-</script>
-
-<style scoped>
-.ticker {
-  position: relative;
-  flex-shrink: 0;
-  height: 40px;
-  display: flex;
-  align-items: stretch;
-  background: #0a0a12;
-  border-bottom: 1px solid #1a1a2a;
-  box-shadow: 0 2px 8px #00000066;
-  overflow: hidden;
-}
-
-/* ── Badge LIVE fixe ── */
-.ticker-badge {
-  position: relative;
-  z-index: 2;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  padding: 0 14px;
-  background: #0e0e18;
-  border-right: 1px solid #1a1a2a;
-  box-shadow: 4px 0 8px #0a0a12;
-}
-.ticker-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: #44996655;
-  animation: blink 1.5s ease-in-out infinite;
-}
-.ticker-badge-txt {
-  font-family: 'Courier New', monospace;
-  font-size: 11px;
-  font-weight: bold;
-  letter-spacing: 2px;
-  color: #448866;
-}
-.ticker.is-off .ticker-dot {
-  background: #884444;
-  animation: none;
-}
-.ticker.is-off .ticker-badge-txt {
-  color: #885555;
-}
-@keyframes blink {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.3; }
-}
-
-/* ── Piste défilante ── */
-.ticker-viewport {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-}
-.ticker-track {
-  display: inline-flex;
-  white-space: nowrap;
-  will-change: transform;
-  animation: ticker-scroll 48s linear infinite;
-}
-.ticker:hover .ticker-track {
-  animation-play-state: paused;
-}
-.ticker-group {
-  display: inline-flex;
-  align-items: center;
-}
-@keyframes ticker-scroll {
-  from { transform: translateX(0); }
-  to   { transform: translateX(-50%); }
-}
-
-/* ── Chips ── */
-.chip {
-  position: relative;
-  display: inline-flex;
-  align-items: baseline;
-  gap: 7px;
-  padding: 0 22px;
-}
-.chip::after {
-  content: '';
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  height: 16px;
-  width: 1px;
-  background: #ffffff14;
-}
-.chip-val {
-  font-family: 'Courier New', monospace;
-  font-size: 15px;
-  font-weight: bold;
-  color: #d8d8e8;
-}
-.chip-unit {
-  font-size: 10px;
-  font-weight: normal;
-  opacity: 0.6;
-}
-.chip-label {
-  font-family: Arial, sans-serif;
-  font-size: 10px;
-  letter-spacing: 0.5px;
-  text-transform: uppercase;
-  color: #50506e;
-}
-
-.chip--cyan .chip-val { color: #5599aa; }
-.chip--green .chip-val { color: #447755; }
-.chip--magenta .chip-val { color: #885588; }
-.chip--orange .chip-val { color: #997744; }
-
-/* Accessibilité : pas de défilement si l'utilisateur le refuse */
-@media (prefers-reduced-motion: reduce) {
-  .ticker-track { animation: none; }
-  .ticker-viewport { overflow-x: auto; scrollbar-width: none; }
-  .ticker-viewport::-webkit-scrollbar { display: none; }
-}
-</style>
+<!-- Bandeau de stats permanent façon téléscripteur néon (casino / bourse). -->
+<template>
+  <div class="ticker" :class="{ 'is-off': !connected }">
+    <!-- Badge LIVE fixe à gauche -->
+    <div class="ticker-badge">
+      <span class="ticker-dot" />
+      <span class="ticker-badge-txt">{{ connected ? 'LIVE' : '···' }}</span>
+    </div>
+
+    <!-- Piste défilante (2 groupes identiques pour une boucle sans couture) -->
+    <div class="ticker-viewport">
+      <div class="ticker-track">
+        <div
+          v-for="copy in 2"
+          :key="copy"
+          class="ticker-group"
+          :aria-hidden="copy === 2 ? 'true' : undefined"
+        >
+          <span
+            v-for="item in items"
+            :key="item.key + '-' + copy"
+            class="chip"
+            :class="`chip--${item.tone}`"
+          >
+            <span class="chip-val">
+              <AnimatedNumber :value="item.value" :decimals="item.decimals ?? 0" />
+              <span v-if="item.unit" class="chip-unit">{{ item.unit }}</span>
+            </span>
+            <span class="chip-label">{{ item.label }}</span>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import AnimatedNumber from './AnimatedNumber.vue';
+import type { Stats } from '@/composables/useRealtime';
+
+const props = defineProps<{ stats: Stats | null; connected: boolean }>();
+
+type Tone = 'cyan' | 'green' | 'magenta' | 'orange' | 'plain';
+interface Chip {
+  key: string;
+  label: string;
+  value: number;
+  tone: Tone;
+  unit?: string;
+  decimals?: number;
+}
+
+const ZERO: Stats = {
+  connectedTabs: 0,
+  typingNow: 0,
+  lettersPerSec: 0,
+  msgsPerMin: 0,
+  messages: 0,
+  replies: 0,
+  charsSent: 0,
+  lettersTyped: 0,
+  uniqueIps: 0,
+  longestMsg: 0,
+  abandonRate: 0,
+  avgLength: 0,
+  moneyExtorted: 0,
+};
+
+const items = computed<Chip[]>(() => {
+  const s = props.stats ?? ZERO;
+  return [
+    { key: 'tabs', label: 'onglets connectés', value: s.connectedTabs, tone: 'cyan' },
+    { key: 'typing', label: 'écrivent là', value: s.typingNow, tone: 'green' },
+    { key: 'lps', label: 'lettres / s', value: s.lettersPerSec, decimals: 1, tone: 'green' },
+    { key: 'mpm', label: 'messages / min', value: s.msgsPerMin, tone: 'green' },
+    { key: 'msgs', label: 'messages', value: s.messages, tone: 'cyan' },
+    { key: 'replies', label: 'réponses', value: s.replies, tone: 'plain' },
+    { key: 'chars', label: 'caractères envoyés', value: s.charsSent, tone: 'plain' },
+    { key: 'letters', label: 'lettres tapées', value: s.lettersTyped, tone: 'magenta' },
+    { key: 'ips', label: 'IP uniques', value: s.uniqueIps, tone: 'cyan' },
+    { key: 'longest', label: 'le + long', value: s.longestMsg, unit: ' car', tone: 'plain' },
+    { key: 'abandon', label: "taux d'abandon", value: s.abandonRate, decimals: 1, unit: ' %', tone: 'orange' },
+    { key: 'avg', label: 'longueur moy.', value: s.avgLength, decimals: 1, unit: ' car', tone: 'plain' },
+    { key: 'money', label: 'argent extorqué', value: s.moneyExtorted, decimals: 2, unit: ' €', tone: 'orange' },
+  ];
+});
+</script>
+
+<style scoped>
+.ticker {
+  position: relative;
+  flex-shrink: 0;
+  height: 40px;
+  display: flex;
+  align-items: stretch;
+  background: #0a0a12;
+  border-bottom: 1px solid #1a1a2a;
+  box-shadow: 0 2px 8px #00000066;
+  overflow: hidden;
+}
+
+/* ── Badge LIVE fixe ── */
+.ticker-badge {
+  position: relative;
+  z-index: 2;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 0 14px;
+  background: #0e0e18;
+  border-right: 1px solid #1a1a2a;
+  box-shadow: 4px 0 8px #0a0a12;
+}
+.ticker-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #44996655;
+  animation: blink 1.5s ease-in-out infinite;
+}
+.ticker-badge-txt {
+  font-family: 'Courier New', monospace;
+  font-size: 11px;
+  font-weight: bold;
+  letter-spacing: 2px;
+  color: #448866;
+}
+.ticker.is-off .ticker-dot {
+  background: #884444;
+  animation: none;
+}
+.ticker.is-off .ticker-badge-txt {
+  color: #885555;
+}
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+
+/* ── Piste défilante ── */
+.ticker-viewport {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+.ticker-track {
+  display: inline-flex;
+  white-space: nowrap;
+  will-change: transform;
+  animation: ticker-scroll 48s linear infinite;
+}
+.ticker:hover .ticker-track {
+  animation-play-state: paused;
+}
+.ticker-group {
+  display: inline-flex;
+  align-items: center;
+}
+@keyframes ticker-scroll {
+  from { transform: translateX(0); }
+  to   { transform: translateX(-50%); }
+}
+
+/* ── Chips ── */
+.chip {
+  position: relative;
+  display: inline-flex;
+  align-items: baseline;
+  gap: 7px;
+  padding: 0 22px;
+}
+.chip::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 16px;
+  width: 1px;
+  background: #ffffff14;
+}
+.chip-val {
+  font-family: 'Courier New', monospace;
+  font-size: 15px;
+  font-weight: bold;
+  color: #d8d8e8;
+}
+.chip-unit {
+  font-size: 10px;
+  font-weight: normal;
+  opacity: 0.6;
+}
+.chip-label {
+  font-family: Arial, sans-serif;
+  font-size: 10px;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  color: #50506e;
+}
+
+.chip--cyan .chip-val { color: #5599aa; }
+.chip--green .chip-val { color: #447755; }
+.chip--magenta .chip-val { color: #885588; }
+.chip--orange .chip-val { color: #997744; }
+
+/* Accessibilité : pas de défilement si l'utilisateur le refuse */
+@media (prefers-reduced-motion: reduce) {
+  .ticker-track { animation: none; }
+  .ticker-viewport { overflow-x: auto; scrollbar-width: none; }
+  .ticker-viewport::-webkit-scrollbar { display: none; }
+}
+</style>

frontend/src/components/StyleContextMenu.vue

@@ -1,130 +1,138 @@
-<!-- Generic right-click style picker. Mounted once in App.vue via Teleport. -->
-<template>
-  <Teleport to="body">
-    <div
-      v-if="state.visible"
-      ref="menuEl"
-      class="style-ctx-menu"
-      :style="menuPos"
-      @click.stop
-    >
-      <div class="ctx-title">{{ state.title }}</div>
-      <template v-for="item in state.items" :key="item.value">
-        <div v-if="item.isHeader" class="ctx-header">{{ item.label }}</div>
-        <button
-          v-else
-          class="ctx-item"
-          :class="{ 'ctx-item--active': item.value === state.current }"
-          @click="pick(item.value)"
-        >
-          <span v-if="item.swatch" class="ctx-swatch" :style="{ background: item.swatch }" />
-          {{ item.label }}
-        </button>
-      </template>
-    </div>
-  </Teleport>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue';
-import { useContextMenu, closeContextMenu } from '@/composables/useContextMenu';
-
-const { state } = useContextMenu();
-const menuEl = ref<HTMLElement | null>(null);
-
-const menuPos = computed(() => ({
-  top:  `${Math.min(state.y, window.innerHeight - 260)}px`,
-  left: `${Math.min(state.x, window.innerWidth  - 175)}px`,
-}));
-
-function pick(value: string): void {
-  state.onSelect(value);
-  closeContextMenu();
-}
-
-function onMouseDown(e: MouseEvent): void {
-  if (state.visible && menuEl.value && !menuEl.value.contains(e.target as Node)) {
-    closeContextMenu();
-  }
-}
-function onKeyDown(e: KeyboardEvent): void {
-  if (e.key === 'Escape') closeContextMenu();
-}
-
-onMounted(() => {
-  document.addEventListener('mousedown', onMouseDown);
-  document.addEventListener('keydown', onKeyDown);
-});
-onUnmounted(() => {
-  document.removeEventListener('mousedown', onMouseDown);
-  document.removeEventListener('keydown', onKeyDown);
-});
-</script>
-
-<style>
-.style-ctx-menu {
-  position: fixed;
-  z-index: 9999;
-  min-width: 160px;
-  background: #111118;
-  border: 1px solid #2a2a3a;
-  border-radius: 6px;
-  box-shadow: 0 8px 32px #000a, 0 0 0 1px #ffffff08;
-  padding: 4px 0;
-  font-family: Arial, sans-serif;
-}
-
-.ctx-title {
-  font-size: 10px;
-  color: #44445a;
-  padding: 4px 12px 3px;
-  letter-spacing: 0.5px;
-  text-transform: uppercase;
-  border-bottom: 1px solid #1e1e2a;
-  margin-bottom: 3px;
-}
-
-.ctx-header {
-  font-size: 9px;
-  color: #33334a;
-  padding: 6px 12px 2px;
-  letter-spacing: 0.5px;
-  text-transform: uppercase;
-}
-
-.ctx-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 5px 12px;
-  background: none;
-  border: none;
-  color: #9999bb;
-  font-family: Arial, sans-serif;
-  font-size: 12px;
-  cursor: pointer;
-  text-align: left;
-  transition: background 0.1s, color 0.1s;
-}
-.ctx-item:hover {
-  background: #1a1a28;
-  color: #ffffff;
-}
-.ctx-item--active {
-  color: #00ddff;
-}
-.ctx-item--active::after {
-  content: '✓';
-  margin-left: auto;
-  font-size: 10px;
-}
-
-.ctx-swatch {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  flex-shrink: 0;
-  border: 1px solid #ffffff22;
-}
-</style>
+<!-- Generic right-click style picker. Mounted once in App.vue via Teleport. -->
+<template>
+  <Teleport to="body">
+    <div
+      v-if="state.visible"
+      ref="menuEl"
+      class="style-ctx-menu"
+      :style="menuPos"
+      @click.stop
+    >
+      <div class="ctx-title">{{ state.title }}</div>
+      <template v-for="item in state.items" :key="item.value">
+        <div v-if="item.isHeader" class="ctx-header">{{ item.label }}</div>
+        <button
+          v-else
+          class="ctx-item"
+          :class="{ 'ctx-item--active': item.checked || item.value === state.current }"
+          @click="pick(item.value)"
+        >
+          <span v-if="item.emoji" class="ctx-emoji">{{ item.emoji }}</span>
+          <span v-else-if="item.swatch" class="ctx-swatch" :style="{ background: item.swatch }" />
+          {{ item.label }}
+        </button>
+      </template>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { useContextMenu, closeContextMenu } from '@/composables/useContextMenu';
+
+const { state } = useContextMenu();
+const menuEl = ref<HTMLElement | null>(null);
+
+const menuPos = computed(() => ({
+  top:  `${Math.min(state.y, window.innerHeight - 260)}px`,
+  left: `${Math.min(state.x, window.innerWidth  - 175)}px`,
+}));
+
+function pick(value: string): void {
+  state.onSelect(value);
+  closeContextMenu();
+}
+
+function onMouseDown(e: MouseEvent): void {
+  if (state.visible && menuEl.value && !menuEl.value.contains(e.target as Node)) {
+    closeContextMenu();
+  }
+}
+function onKeyDown(e: KeyboardEvent): void {
+  if (e.key === 'Escape') closeContextMenu();
+}
+
+onMounted(() => {
+  document.addEventListener('mousedown', onMouseDown);
+  document.addEventListener('keydown', onKeyDown);
+});
+onUnmounted(() => {
+  document.removeEventListener('mousedown', onMouseDown);
+  document.removeEventListener('keydown', onKeyDown);
+});
+</script>
+
+<style>
+.style-ctx-menu {
+  position: fixed;
+  z-index: 9999;
+  min-width: 160px;
+  background: #111118;
+  border: 1px solid #2a2a3a;
+  border-radius: 6px;
+  box-shadow: 0 8px 32px #000a, 0 0 0 1px #ffffff08;
+  padding: 4px 0;
+  font-family: Arial, sans-serif;
+}
+
+.ctx-title {
+  font-size: 10px;
+  color: #44445a;
+  padding: 4px 12px 3px;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  border-bottom: 1px solid #1e1e2a;
+  margin-bottom: 3px;
+}
+
+.ctx-header {
+  font-size: 9px;
+  color: #33334a;
+  padding: 6px 12px 2px;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
+
+.ctx-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 5px 12px;
+  background: none;
+  border: none;
+  color: #9999bb;
+  font-family: Arial, sans-serif;
+  font-size: 12px;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.1s, color 0.1s;
+}
+.ctx-item:hover {
+  background: #1a1a28;
+  color: #ffffff;
+}
+.ctx-item--active {
+  color: #00ddff;
+}
+.ctx-item--active::after {
+  content: '✓';
+  margin-left: auto;
+  font-size: 10px;
+}
+
+.ctx-swatch {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  border: 1px solid #ffffff22;
+}
+.ctx-emoji {
+  font-size: 14px;
+  line-height: 1;
+  width: 16px;
+  text-align: center;
+  flex-shrink: 0;
+}
+</style>

frontend/src/components/ThemePicker.spec.ts

@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import ThemePicker from './ThemePicker.vue';
+import { THEMES } from '@/composables/useTheme';
+
+describe('ThemePicker (interaction composant + v-model custom)', () => {
+  it('rend un bouton par thème disponible', () => {
+    const wrapper = mount(ThemePicker, { props: { modelValue: 'default' } });
+    expect(wrapper.findAll('button')).toHaveLength(Object.keys(THEMES).length);
+  });
+
+  it('émet update:modelValue avec le thème cliqué (WhatsApp)', async () => {
+    const wrapper = mount(ThemePicker, { props: { modelValue: 'default' } });
+    const keys = Object.keys(THEMES);
+    const idx = keys.indexOf('whatsapp');
+    await wrapper.findAll('button')[idx].trigger('click');
+
+    const emitted = wrapper.emitted('update:modelValue');
+    expect(emitted).toBeTruthy();
+    expect(emitted![0]).toEqual(['whatsapp']);
+  });
+
+  it('marque le thème actif', () => {
+    const wrapper = mount(ThemePicker, { props: { modelValue: 'bubble' } });
+    expect(wrapper.find('.theme-btn--active').exists()).toBe(true);
+  });
+});

frontend/src/components/ThemePicker.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { THEMES, type Theme } from '@/composables/useTheme';
+
+const model = defineModel<Theme>({ required: true });
+</script>
+
+<template>
+  <div class="theme-picker">
+    <button
+      v-for="(info, key) in THEMES"
+      :key="key"
+      class="theme-btn"
+      :class="{ 'theme-btn--active': model === key }"
+      :title="info.label"
+      type="button"
+      @click="model = key"
+    >{{ info.emoji }}</button>
+  </div>
+</template>
+
+<style scoped>
+.theme-picker {
+  display: flex;
+  gap: 4px;
+}
+.theme-btn {
+  background: #131320;
+  border: 1px solid #222233;
+  border-radius: 8px;
+  padding: 3px 7px;
+  cursor: pointer;
+  font-size: 14px;
+  opacity: 0.5;
+  transition: opacity 0.15s, border-color 0.15s;
+}
+.theme-btn:hover { opacity: 0.8; }
+.theme-btn--active {
+  opacity: 1;
+  border-color: #5577aa;
+}
+</style>

frontend/src/components/shop/MesPersos.vue

@@ -1,191 +1,21 @@
-<!-- Mes Personnalisations — visible depuis le shop, onglet "Mes Persos" -->
+<!-- Mes Personnalisations — onglet "Mes Persos" du shop.
+     Assemble les sections de préférences (chacune autonome, lit ses composables). -->
 <template>
   <div class="persos">
-
-    <!-- ── Image de fond du chat ─────────────────────────────────── -->
-    <section class="section">
-      <h2 class="section-title">🖼️ Fond du chat</h2>
-      <p class="section-sub">URL d'une image (jpg, png, gif, webp…) ou laisse vide pour le fond par défaut.</p>
-      <div class="bg-row">
-        <input
-          v-model="bgDraft"
-          class="bg-input"
-          type="text"
-          placeholder="https://example.com/image.jpg"
-          @keydown.enter="applyBg"
-        />
-        <button class="btn-apply" @click="applyBg" type="button">Appliquer</button>
-        <button v-if="prefs.chatBgUrl" class="btn-reset" @click="resetBg" type="button">✕ Retirer</button>
-      </div>
-      <div v-if="prefs.chatBgUrl" class="bg-preview" :style="{ backgroundImage: `url(${prefs.chatBgUrl})` }" />
-    </section>
-
-    <!-- ── Bouton d'envoi ─────────────────────────────────────────── -->
-    <section class="section" :class="{ locked: !myPerks.elementSkin }">
-      <h2 class="section-title">
-        ➤ Bouton d'envoi
-        <span v-if="!myPerks.elementSkin" class="lock-badge">🔒 Skin d'éléments requis</span>
-      </h2>
-      <div class="style-grid">
-        <button
-          v-for="[k, p] in Object.entries(SEND_BUTTON_PRESETS)"
-          :key="k"
-          class="style-tile"
-          :class="{ 'style-tile--active': prefs.sendButton === k }"
-          :disabled="!myPerks.elementSkin"
-          @click="prefs.sendButton = k as SendButtonKey"
-          type="button"
-        >
-          <span class="style-swatch" :style="{ background: p.bg, color: p.color, borderRadius: p.radius }">➤</span>
-          <span class="style-label">{{ p.label }}</span>
-        </button>
-      </div>
-    </section>
-
-    <!-- ── Skin du bouton d'envoi ───────────────────────────────────── -->
-    <section class="section" :class="{ locked: !hasSendSkins }">
-      <h2 class="section-title">
-        🖱️ Skin du bouton d'envoi
-        <span v-if="!hasSendSkins" class="lock-badge">Achetez un skin dans le shop</span>
-      </h2>
-      <template v-if="hasSendSkins">
-        <div class="style-grid">
-          <button
-            class="style-tile"
-            :class="{ 'style-tile--active': prefs.sendSkin === '' }"
-            @click="prefs.sendSkin = ''"
-            type="button"
-          >
-            <span class="style-swatch" style="font-size:14px">►</span>
-            <span class="style-label">Défaut</span>
-          </button>
-          <button
-            v-for="s in myPerks.sendSkins"
-            :key="s.id"
-            class="style-tile"
-            :class="{ 'style-tile--active': prefs.sendSkin === s.id }"
-            @click="prefs.sendSkin = s.id"
-            type="button"
-          >
-            <span class="style-swatch" style="font-size:20px">{{ s.char }}</span>
-            <span class="style-label">{{ s.label ?? s.id.replace('send-skin-', '') }}</span>
-          </button>
-        </div>
-      </template>
-      <p v-else class="section-sub">Aucun skin possédé pour l'instant.</p>
-    </section>
-
-    <!-- ── Couleur de l'IP ─────────────────────────────────────── -->
-    <section class="section" :class="{ locked: !myPerks.ipColors }">
-      <h2 class="section-title">
-        🎨 Couleur de mon IP
-        <span v-if="!myPerks.ipColors" class="lock-badge">🔒 Palette IP requise</span>
-      </h2>
-      <p v-if="myIp" class="section-sub">IP&nbsp;: <code class="code-ip" :style="ipPreviewStyle">{{ myIp }}</code></p>
-      <div class="style-grid">
-        <button
-          v-for="opt in IP_COLOR_OPTIONS"
-          :key="opt.value"
-          class="style-tile"
-          :class="{ 'style-tile--active': currentIpColor === opt.value }"
-          :disabled="!myPerks.ipColors"
-          @click="setIpColor(opt.value)"
-          type="button"
-        >
-          <span v-if="opt.swatch" class="color-dot" :style="{ background: opt.swatch }" />
-          <span v-else class="color-dot color-dot--auto" />
-          <span class="style-label">{{ opt.label }}</span>
-        </button>
-      </div>
-    </section>
-
-    <!-- ── Pets ───────────────────────────────────────────────────── -->
-    <section class="section" :class="{ locked: !hasPets }">
-      <h2 class="section-title">
-        ✨ Mes pets
-        <span v-if="!hasPets" class="lock-badge">Achetez un Pet dans le shop</span>
-      </h2>
-      <template v-if="hasPets">
-        <div class="pet-grid">
-          <button
-            v-for="pet in ownedPets"
-            :key="pet.char"
-            class="pet-cell"
-            :class="{ 'pet-cell--active': activePet === pet.char }"
-            @click="togglePet(pet.char)"
-            type="button"
-          >{{ pet.char }}</button>
-          <button
-            class="pet-cell pet-cell--none"
-            :class="{ 'pet-cell--active': activePet === '' }"
-            @click="togglePet('')"
-            type="button"
-          >✕ Aucun</button>
-        </div>
-        <p class="section-sub" style="margin-top:6px">
-          Actif&nbsp;: <strong>{{ activePet || 'aucun' }}</strong>
-          — s'affiche à gauche de ton IP dans le chat.
-        </p>
-      </template>
-      <p v-else class="section-sub">Aucun pet possédé pour l'instant.</p>
-    </section>
-
+    <BgPrefsSection />
+    <SendButtonPrefsSection />
+    <SendSkinPrefsSection />
+    <IpColorPrefsSection />
+    <PetsPrefsSection />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue';
-import { useCustomStyles, SEND_BUTTON_PRESETS, IP_COLOR_OPTIONS, type SendButtonKey } from '@/composables/useCustomStyles';
-import { useMyPerks } from '@/composables/useMessages';
-import { getIpColorWithPerks, getIpGlow } from '@/composables/ipColor';
-import { useWallet } from '@/composables/useWallet';
-
-const { prefs } = useCustomStyles();
-const { myPerks } = useMyPerks();
-const { ip: myIp } = useWallet();
-
-// ── Background ──────────────────────────────────────────────────────────────
-const bgDraft = ref(prefs.chatBgUrl);
-watch(() => prefs.chatBgUrl, (v) => { bgDraft.value = v; });
-
-function applyBg(): void  { prefs.chatBgUrl = bgDraft.value.trim(); }
-function resetBg(): void  { prefs.chatBgUrl = ''; bgDraft.value = ''; }
-
-// ── IP color ────────────────────────────────────────────────────────────────
-const currentIpColor = computed(() => prefs.ipColors[myIp.value] ?? 'auto');
-
-function setIpColor(value: string): void {
-  if (!myIp.value) return;
-  prefs.ipColors[myIp.value] = value;
-}
-
-const ipPreviewStyle = computed(() => {
-  if (!myIp.value) return {};
-  const color = currentIpColor.value === 'auto'
-    ? getIpColorWithPerks(myIp.value, myPerks.value)
-    : currentIpColor.value;
-  return { color, textShadow: getIpGlow(color) };
-});
-
-// ── Pets ────────────────────────────────────────────────────────────────────
-const ownedPets = computed(() => {
-  const seen = new Set<string>();
-  return (myPerks.value.pets ?? []).filter((p) => {
-    if (seen.has(p.char)) return false;
-    seen.add(p.char);
-    return true;
-  });
-});
-const hasPets = computed(() => ownedPets.value.length > 0);
-const hasSendSkins = computed(() => (myPerks.value.sendSkins?.length ?? 0) > 0);
-const activePet = computed(() =>
-  myIp.value && myIp.value in prefs.ipPets ? prefs.ipPets[myIp.value] : (ownedPets.value[0]?.char ?? '')
-);
-
-function togglePet(char: string): void {
-  if (!myIp.value) return;
-  prefs.ipPets[myIp.value] = char;
-}
+import BgPrefsSection from './persos/BgPrefsSection.vue';
+import SendButtonPrefsSection from './persos/SendButtonPrefsSection.vue';
+import SendSkinPrefsSection from './persos/SendSkinPrefsSection.vue';
+import IpColorPrefsSection from './persos/IpColorPrefsSection.vue';
+import PetsPrefsSection from './persos/PetsPrefsSection.vue';
 </script>
 
 <style scoped>
@@ -196,152 +26,4 @@ function togglePet(char: string): void {
   padding: 4px 0;
   max-width: 640px;
 }
-
-.section {
-  background: #101018;
-  border: 1px solid #20203a;
-  border-radius: 10px;
-  padding: 18px 20px;
-}
-.section.locked {
-  opacity: 0.6;
-}
-
-.section-title {
-  font-size: 14px;
-  font-weight: bold;
-  color: #ccccee;
-  margin: 0 0 6px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-.section-sub {
-  font-size: 11px;
-  color: #5a5a80;
-  margin: 0 0 12px;
-}
-
-.lock-badge {
-  font-size: 10px;
-  font-weight: normal;
-  color: #886644;
-  background: #1a1408;
-  border: 1px solid #44330066;
-  border-radius: 8px;
-  padding: 2px 8px;
-}
-
-/* Background */
-.bg-row {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  margin-bottom: 12px;
-}
-.bg-input {
-  flex: 1;
-  background: #141420;
-  border: 1px solid #222234;
-  border-radius: 6px;
-  color: #aaaacc;
-  font-family: Arial, sans-serif;
-  font-size: 12px;
-  padding: 8px 12px;
-  outline: none;
-}
-.bg-input:focus { border-color: #333355; }
-.btn-apply {
-  background: #1a2a1a; border: 1px solid #33aa55; color: #44dd77;
-  font-size: 12px; font-weight: bold; padding: 7px 14px; border-radius: 14px; cursor: pointer;
-}
-.btn-apply:hover { background: #234a23; }
-.btn-reset {
-  background: #2a1010; border: 1px solid #882222; color: #ff6655;
-  font-size: 11px; padding: 7px 12px; border-radius: 14px; cursor: pointer;
-}
-.btn-reset:hover { background: #3a1818; }
-
-.bg-preview {
-  width: 100%;
-  height: 80px;
-  background-size: cover;
-  background-position: center;
-  border-radius: 6px;
-  border: 1px solid #222234;
-}
-
-/* Style tiles */
-.style-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-.style-tile {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-  background: #141420;
-  border: 1px solid #222234;
-  border-radius: 8px;
-  padding: 10px 14px;
-  cursor: pointer;
-  transition: border-color 0.1s, background 0.1s;
-}
-.style-tile:hover:not(:disabled) { background: #1a1a2e; border-color: #333355; }
-.style-tile--active { border-color: #00ddff; background: #0a1a20; }
-.style-tile:disabled { cursor: not-allowed; opacity: 0.5; }
-
-.style-swatch {
-  width: 34px; height: 34px;
-  border-radius: inherit;
-  display: flex; align-items: center; justify-content: center;
-  font-size: 14px; font-weight: bold;
-  border: 1px solid #ffffff10;
-}
-.style-label {
-  font-size: 10px;
-  color: #8888aa;
-  white-space: nowrap;
-}
-.style-tile--active .style-label { color: #00ddff; }
-
-/* Color dots */
-.color-dot {
-  width: 20px; height: 20px;
-  border-radius: 50%;
-  border: 1px solid #ffffff22;
-}
-.color-dot--auto {
-  background: conic-gradient(#00ddff, #ff00cc, #00ee77, #ffdd44, #00ddff);
-}
-
-/* IP code */
-.code-ip {
-  font-family: 'Courier New', monospace;
-  font-size: 12px;
-  font-weight: bold;
-}
-
-/* Pet grid */
-.pet-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-.pet-cell {
-  width: 42px; height: 42px;
-  background: #141420;
-  border: 1px solid #222234;
-  border-radius: 8px;
-  font-size: 20px;
-  cursor: pointer;
-  transition: border-color 0.1s, background 0.1s;
-  display: flex; align-items: center; justify-content: center;
-}
-.pet-cell:hover { background: #1a1a2e; border-color: #333355; }
-.pet-cell--active { border-color: #00ddff; background: #0a1a20; }
-.pet-cell--none { font-size: 11px; color: #666; width: auto; padding: 0 10px; }
-.pet-cell--none.pet-cell--active { color: #00ddff; }
 </style>

frontend/src/components/shop/PrefSection.vue

@@ -0,0 +1,16 @@
+<!-- Conteneur de section « Mes Persos ». Démontre l'injection de contenu depuis
+     le parent : un slot par défaut (corps de la section) + un slot nommé #lock
+     (badge optionnel quand la fonctionnalité n'est pas débloquée). -->
+<template>
+  <section class="pf-section" :class="{ 'pf-locked': locked }">
+    <h2 class="pf-title">
+      {{ title }}
+      <slot name="lock" />
+    </h2>
+    <slot />
+  </section>
+</template>
+
+<script setup lang="ts">
+defineProps<{ title: string; locked?: boolean }>();
+</script>

frontend/src/components/shop/ProductCard.vue

@@ -1,332 +1,331 @@
-<!-- One marketplace product card — handles per-kind options inline (faithful to shop mockups) -->
-<template>
-  <div class="card" :class="{ 'card--owned': ownedAlready }">
-    <div v-if="product.badge" class="card-badge">{{ product.badge }}</div>
-
-    <div class="card-head">
-      <span class="card-icon">{{ icon }}</span>
-      <div>
-        <p class="card-name">{{ product.name }}</p>
-        <p v-if="product.subtitle" class="card-sub">{{ product.subtitle }}</p>
-      </div>
-    </div>
-
-    <!-- Aperçu cosmétique : avant / après -->
-    <div v-if="product.kind === 'ip-skin' || product.id === 'bundle-cosmetic'" class="preview">
-      <span class="prev-ip prev-plain">192.168.1.45</span>
-      <span class="prev-arrow">→</span>
-      <span class="prev-ip prev-gold">192.168.1.45</span>
-    </div>
-
-    <!-- Options : abonnement NoAds -->
-    <div v-if="product.kind === 'subscription'" class="opts">
-      <label v-for="p in plans" :key="p.id" class="opt-radio" :class="{ active: plan === p.id }">
-        <input type="radio" :value="p.id" v-model="plan" />
-        <span>{{ p.label }}</span>
-        <span class="opt-price">{{ fmt(p.price) }} cr{{ p.id === 'monthly' ? '/mois' : '/an' }}</span>
-      </label>
-    </div>
-
-    <!-- Options : Cadre de Pub -->
-    <div v-if="product.kind === 'ad-frame'" class="opts">
-      <div class="opt-row">
-        <span class="opt-label">Durée</span>
-        <select v-model.number="durationDays" class="opt-select">
-          <option v-for="d in durations" :key="d.days" :value="d.days">
-            {{ d.days }} j{{ d.extra ? ` (+${fmt(d.extra)})` : '' }}
-          </option>
-        </select>
-      </div>
-      <div class="opt-row">
-        <span class="opt-label">Format</span>
-        <select v-model="format" class="opt-select">
-          <option v-for="f in formats" :key="f.id" :value="f.id">
-            {{ f.label }}{{ f.extra ? ` (+${fmt(f.extra)})` : '' }}
-          </option>
-        </select>
-      </div>
-      <input v-model="url" class="opt-input" type="text" placeholder="URL de destination (optionnel)" />
-    </div>
-
-    <!-- Options : Pet (grille des designs non encore possédés) -->
-    <div v-if="product.kind === 'pet'" class="opts">
-      <div class="pet-grid">
-        <button
-          v-for="d in availableDesigns"
-          :key="d.id"
-          class="pet-cell"
-          :class="{ active: petDesign === d.id }"
-          @click="petDesign = d.id"
-          type="button"
-        >{{ d.char }}</button>
-      </div>
-    </div>
-
-    <!-- Preview : Skin de bouton -->
-    <div v-if="product.kind === 'send-skin'" class="send-skin-preview">
-      <div class="skin-btn-demo">{{ meta.char }}</div>
-    </div>
-
-    <!-- Stock limité -->
-    <div v-if="product.stockLimit" class="stock">
-      <div class="stock-bar"><div class="stock-fill" :style="{ width: stockPct + '%' }" /></div>
-      <span class="stock-txt">{{ product.stockSold }} / {{ product.stockLimit }} vendus</span>
-    </div>
-
-    <!-- Prix + CTA -->
-    <div class="card-foot">
-      <div class="price">
-        <span v-if="product.promoPrice != null" class="price-old">{{ fmt(product.basePrice) }}</span>
-        <span class="price-now">{{ fmt(effectivePrice) }}</span>
-        <span class="price-unit">cr</span>
-      </div>
-      <!-- Pets: bouton acheter + lien Mes Persos -->
-      <template v-if="product.kind === 'pet'">
-        <button
-          class="buy"
-          :disabled="disabled"
-          @click="onBuy"
-          type="button"
-        >{{ buyLabel }}</button>
-        <button
-          class="buy buy--perso"
-          @click="$emit('goPerso')"
-          type="button"
-        >✨ Mes Persos</button>
-      </template>
-      <button
-        v-else
-        class="buy"
-        :disabled="disabled"
-        @click="onBuy"
-        type="button"
-      >{{ buyLabel }}</button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue';
-import type { Product, PurchaseOptions } from '@/composables/useShop';
-
-const props = defineProps<{
-  product: Product;
-  buying: boolean;
-  owns: (kind: string) => boolean;
-  ownedPetChars: string[];
-  petCount: number;
-  freeMode: boolean;
-}>();
-
-const emit = defineEmits<{
-  buy: [productId: string, options: PurchaseOptions];
-  goPerso: [];
-}>();
-
-const meta = computed<any>(() => {
-  try { return props.product.metaJson ? JSON.parse(props.product.metaJson) : {}; }
-  catch { return {}; }
-});
-
-// Subscription
-const plans = computed(() => meta.value.plans ?? []);
-const plan = ref<'monthly' | 'annual'>('monthly');
-
-// Ad-frame
-const durations = computed(() => meta.value.durations ?? []);
-const formats = computed(() => meta.value.formats ?? []);
-const durationDays = ref<number>(7);
-const format = ref<'static' | 'gif'>('static');
-const url = ref('');
-
-// Pet
-const designs = computed(() => meta.value.designs ?? []);
-const petDesign = ref<string>('');
-const availableDesigns = computed(() =>
-  designs.value.filter((d: any) => !props.ownedPetChars.includes(d.char))
-);
-watch(availableDesigns, (ds) => {
-  if (ds.length > 0 && !ds.find((d: any) => d.id === petDesign.value)) {
-    petDesign.value = (ds[0] as any).id;
-  }
-}, { immediate: true });
-
-const icon = computed(() => {
-  if (props.product.id === 'ip-colors') return '🎨';
-  if (props.product.kind === 'send-skin') return meta.value.char ?? '🖱️';
-  switch (props.product.kind) {
-    case 'ad-frame': return '📣';
-    case 'subscription': return '🚫';
-    case 'ip-skin': return '👑';
-    case 'pet': return '✨';
-    case 'bundle': return '🎁';
-    case 'rich': return props.product.id === 'rich-js' ? '⚡' : '🎨';
-    case 'consumable': return '🔊';
-    default: return '🛍️';
-  }
-});
-
-const effectivePrice = computed(() => {
-  let price = props.product.promoPrice ?? props.product.basePrice;
-  if (props.product.kind === 'subscription') {
-    const p = plans.value.find((x: any) => x.id === plan.value);
-    if (p) price = p.price;
-  }
-  if (props.product.kind === 'ad-frame') {
-    const d = durations.value.find((x: any) => x.days === durationDays.value);
-    const f = formats.value.find((x: any) => x.id === format.value);
-    price += (d?.extra ?? 0) + (f?.extra ?? 0);
-  }
-  return price;
-});
-
-// Ownership / limits → disable & label.
-const ownedAlready = computed(() => {
-  const k = props.product.kind;
-  if (k === 'ip-skin') return props.owns('style-dore');
-  if (k === 'subscription') return props.owns('noads');
-  if (k === 'rich') return props.owns(props.product.id);
-  if (k === 'unlock') return props.owns(props.product.id);
-  if (k === 'ad-frame') return props.owns('ad-frame');
-  if (k === 'send-skin') return props.owns(props.product.id);
-  return false;
-});
-
-const soldOut = computed(() => props.product.stockLimit != null && props.product.stockSold >= props.product.stockLimit);
-
-const disabled = computed(() => props.buying || ownedAlready.value || soldOut.value);
-
-const buyLabel = computed(() => {
-  if (props.buying) return '...';
-  if (soldOut.value) return 'Épuisé';
-  if (ownedAlready.value) return 'Possédé ✓';
-  return props.freeMode ? 'Obtenir (gratuit)' : 'Acheter';
-});
-
-const stockPct = computed(() =>
-  props.product.stockLimit ? Math.round((props.product.stockSold / props.product.stockLimit) * 100) : 0
-);
-
-function fmt(centi: number): string {
-  return (centi / 100).toLocaleString('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
-}
-
-function onBuy(): void {
-  const options: PurchaseOptions = {};
-  if (props.product.kind === 'subscription') options.plan = plan.value;
-  if (props.product.kind === 'ad-frame') {
-    options.durationDays = durationDays.value;
-    options.format = format.value;
-    options.url = url.value || undefined;
-  }
-  if (props.product.kind === 'pet' || props.product.id === 'bundle-cosmetic') {
-    const d = availableDesigns.value.find((x: any) => x.id === petDesign.value) ?? availableDesigns.value[0];
-    if (d) { options.petDesign = (d as any).id; options.petChar = (d as any).char; }
-  }
-  emit('buy', props.product.id, options);
-}
-</script>
-
-<style scoped>
-.card {
-  position: relative;
-  background: #101018;
-  border: 1px solid #20203a;
-  border-radius: 10px;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  font-family: Arial, sans-serif;
-}
-.card--owned { opacity: 0.7; }
-
-.card-badge {
-  position: absolute;
-  top: -9px;
-  right: 12px;
-  background: #ff2266;
-  color: #fff;
-  font-size: 9px;
-  font-weight: bold;
-  letter-spacing: 0.5px;
-  padding: 3px 9px;
-  border-radius: 8px;
-  box-shadow: none;
-}
-
-.card-head { display: flex; gap: 12px; align-items: flex-start; }
-.card-icon { font-size: 28px; }
-.card-name { font-size: 15px; font-weight: bold; color: #d8d8ee; margin: 0; }
-.card-sub { font-size: 11px; color: #6a6a90; margin: 3px 0 0; line-height: 1.4; }
-
-.preview {
-  display: flex; align-items: center; gap: 10px;
-  background: #0a0a12; border-radius: 6px; padding: 10px; justify-content: center;
-}
-.prev-ip { font-family: 'Courier New', monospace; font-size: 12px; font-weight: bold; }
-.prev-plain { color: #666688; }
-.prev-gold { color: #aa8833; }
-.prev-arrow { color: #444466; }
-
-.opts { display: flex; flex-direction: column; gap: 8px; }
-.opt-radio {
-  display: flex; align-items: center; gap: 8px;
-  background: #0c0c16; border: 1px solid #20203a; border-radius: 6px;
-  padding: 8px 10px; font-size: 12px; color: #aaaacc; cursor: pointer;
-}
-.opt-radio.active { border-color: #00aaff; background: #0a1622; }
-.opt-radio input { accent-color: #00ccff; }
-.opt-radio--sm { padding: 5px 8px; font-size: 11px; flex: 1; justify-content: center; }
-.opt-price { margin-left: auto; color: #ffdd66; font-family: 'Courier New', monospace; }
-.opt-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
-.opt-label { font-size: 11px; color: #8888aa; }
-.opt-select, .opt-input {
-  background: #0c0c16; border: 1px solid #20203a; border-radius: 6px;
-  color: #ccccdd; font-size: 12px; padding: 6px 8px; outline: none;
-}
-.opt-select { flex: 1; }
-.opt-input { width: 100%; }
-
-.pet-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
-.pet-cell {
-  aspect-ratio: 1; background: #0c0c16; border: 1px solid #20203a; border-radius: 6px;
-  font-size: 18px; color: #ccccee; cursor: pointer; display: flex; align-items: center; justify-content: center;
-}
-.pet-cell.active { border-color: #8844aa; }
-.pet-pos { display: flex; gap: 6px; }
-
-.send-skin-preview { display: flex; justify-content: center; padding: 8px 0; }
-.skin-btn-demo {
-  width: 52px; height: 52px; border-radius: 50%;
-  background: #151525; border: 1px solid #30306a;
-  display: flex; align-items: center; justify-content: center;
-  font-size: 24px;
-}
-
-.stock { display: flex; flex-direction: column; gap: 4px; }
-.stock-bar { height: 6px; background: #1a1a2a; border-radius: 3px; overflow: hidden; }
-.stock-fill { height: 100%; background: linear-gradient(90deg, #ffaa00, #ff4444); }
-.stock-txt { font-size: 10px; color: #886644; }
-
-.card-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
-.price { display: flex; align-items: baseline; gap: 6px; }
-.price-old { font-size: 12px; color: #555; text-decoration: line-through; }
-.price-now { font-size: 20px; font-weight: bold; color: #ccaa44; font-family: 'Courier New', monospace; }
-.price-unit { font-size: 11px; color: #886633; }
-
-.buy {
-  background: #004488; border: 1px solid #0066aa; color: #00ddff;
-  font-size: 13px; font-weight: bold; padding: 9px 18px; border-radius: 20px; cursor: pointer;
-  transition: background 0.15s;
-}
-.buy:hover:not(:disabled) { background: #1a4466; }
-.buy:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
-
-.buy--perso {
-  background: #1a1030; border: 1px solid #8844cc; color: #cc88ff;
-  font-size: 13px; font-weight: bold; padding: 9px 18px; border-radius: 20px; cursor: pointer;
-  transition: background 0.15s;
-}
-.buy--perso:hover { background: #261844; }
-</style>
+<!-- One marketplace product card — handles per-kind options inline (faithful to shop mockups) -->
+<template>
+  <div class="card" :class="{ 'card--owned': ownedAlready }">
+    <div v-if="product.badge" class="card-badge">{{ product.badge }}</div>
+
+    <div class="card-head">
+      <span class="card-icon">{{ icon }}</span>
+      <div>
+        <RouterLink :to="`/shop/p/${product.id}`" class="card-name">{{ product.name }}</RouterLink>
+        <p v-if="product.subtitle" class="card-sub">{{ product.subtitle }}</p>
+      </div>
+    </div>
+
+    <!-- Aperçu cosmétique : avant / après -->
+    <div v-if="product.kind === 'ip-skin' || product.id === 'bundle-cosmetic'" class="preview">
+      <span class="prev-ip prev-plain">192.168.1.45</span>
+      <span class="prev-arrow">→</span>
+      <span class="prev-ip prev-gold">192.168.1.45</span>
+    </div>
+
+    <!-- Options : abonnement NoAds -->
+    <div v-if="product.kind === 'subscription'" class="opts">
+      <label v-for="p in plans" :key="p.id" class="opt-radio" :class="{ active: plan === p.id }">
+        <input type="radio" :value="p.id" v-model="plan" />
+        <span>{{ p.label }}</span>
+        <span class="opt-price">{{ fmt(p.price) }} cr{{ p.id === 'monthly' ? '/mois' : '/an' }}</span>
+      </label>
+    </div>
+
+    <!-- Options : Cadre de Pub -->
+    <div v-if="product.kind === 'ad-frame'" class="opts">
+      <div class="opt-row">
+        <span class="opt-label">Durée</span>
+        <select v-model.number="durationDays" class="opt-select">
+          <option v-for="d in durations" :key="d.days" :value="d.days">
+            {{ d.days }} j{{ d.extra ? ` (+${fmt(d.extra)})` : '' }}
+          </option>
+        </select>
+      </div>
+      <div class="opt-row">
+        <span class="opt-label">Format</span>
+        <select v-model="format" class="opt-select">
+          <option v-for="f in formats" :key="f.id" :value="f.id">
+            {{ f.label }}{{ f.extra ? ` (+${fmt(f.extra)})` : '' }}
+          </option>
+        </select>
+      </div>
+      <input v-model="url" class="opt-input" type="text" placeholder="URL de destination (optionnel)" />
+    </div>
+
+    <!-- Options : Pet (grille des designs non encore possédés) -->
+    <div v-if="product.kind === 'pet'" class="opts">
+      <div class="pet-grid">
+        <button
+          v-for="d in availableDesigns"
+          :key="d.id"
+          class="pet-cell"
+          :class="{ active: petDesign === d.id }"
+          @click="petDesign = d.id"
+          type="button"
+        >{{ d.char }}</button>
+      </div>
+    </div>
+
+    <!-- Preview : Skin de bouton -->
+    <div v-if="product.kind === 'send-skin'" class="send-skin-preview">
+      <div class="skin-btn-demo">{{ meta.char }}</div>
+    </div>
+
+    <!-- Stock limité -->
+    <div v-if="product.stockLimit" class="stock">
+      <div class="stock-bar"><div class="stock-fill" :style="{ width: stockPct + '%' }" /></div>
+      <span class="stock-txt">{{ product.stockSold }} / {{ product.stockLimit }} vendus</span>
+    </div>
+
+    <!-- Prix + CTA -->
+    <div class="card-foot">
+      <div class="price">
+        <span v-if="product.promoPrice != null" class="price-old">{{ fmt(product.basePrice) }}</span>
+        <span class="price-now">{{ fmt(effectivePrice) }}</span>
+        <span class="price-unit">cr</span>
+      </div>
+      <!-- Pets: bouton acheter + lien Mes Persos -->
+      <template v-if="product.kind === 'pet'">
+        <button
+          class="buy"
+          :disabled="disabled"
+          @click="onBuy"
+          type="button"
+        >{{ buyLabel }}</button>
+        <button
+          class="buy buy--perso"
+          @click="$emit('goPerso')"
+          type="button"
+        >✨ Mes Persos</button>
+      </template>
+      <button
+        v-else
+        class="buy"
+        :disabled="disabled"
+        @click="onBuy"
+        type="button"
+      >{{ buyLabel }}</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import type { Product, PurchaseOptions } from '@/composables/useShop';
+import { parseMeta, type ProductMeta } from '@/composables/useMeta';
+
+const props = defineProps<{
+  product: Product;
+  buying: boolean;
+  owns: (kind: string) => boolean;
+  ownedPetChars: string[];
+  petCount: number;
+  freeMode: boolean;
+}>();
+
+const emit = defineEmits<{
+  buy: [productId: string, options: PurchaseOptions];
+  goPerso: [];
+}>();
+
+const meta = computed(() => parseMeta<ProductMeta>(props.product.metaJson));
+
+// Subscription
+const plans = computed(() => meta.value.plans ?? []);
+const plan = ref<'monthly' | 'annual'>('monthly');
+
+// Ad-frame
+const durations = computed(() => meta.value.durations ?? []);
+const formats = computed(() => meta.value.formats ?? []);
+const durationDays = ref<number>(7);
+const format = ref<'static' | 'gif'>('static');
+const url = ref('');
+
+// Pet
+const designs = computed(() => meta.value.designs ?? []);
+const petDesign = ref<string>('');
+const availableDesigns = computed(() =>
+  designs.value.filter((d) => !props.ownedPetChars.includes(d.char))
+);
+watch(availableDesigns, (ds) => {
+  if (ds.length > 0 && !ds.find((d) => d.id === petDesign.value)) {
+    petDesign.value = ds[0].id;
+  }
+}, { immediate: true });
+
+const icon = computed(() => {
+  if (props.product.id === 'ip-colors') return '🎨';
+  if (props.product.kind === 'send-skin') return meta.value.char ?? '🖱️';
+  switch (props.product.kind) {
+    case 'ad-frame': return '📣';
+    case 'subscription': return '🚫';
+    case 'ip-skin': return '👑';
+    case 'pet': return '✨';
+    case 'bundle': return '🎁';
+    case 'rich': return props.product.id === 'rich-js' ? '⚡' : '🎨';
+    case 'consumable': return '🔊';
+    default: return '🛍️';
+  }
+});
+
+const effectivePrice = computed(() => {
+  let price = props.product.promoPrice ?? props.product.basePrice;
+  if (props.product.kind === 'subscription') {
+    const p = plans.value.find((x) => x.id === plan.value);
+    if (p) price = p.price;
+  }
+  if (props.product.kind === 'ad-frame') {
+    const d = durations.value.find((x) => x.days === durationDays.value);
+    const f = formats.value.find((x) => x.id === format.value);
+    price += (d?.extra ?? 0) + (f?.extra ?? 0);
+  }
+  return price;
+});
+
+// Ownership / limits → disable & label.
+const ownedAlready = computed(() => {
+  const k = props.product.kind;
+  if (k === 'ip-skin') return props.owns('style-dore');
+  if (k === 'subscription') return props.owns('noads');
+  if (k === 'rich') return props.owns(props.product.id);
+  if (k === 'unlock') return props.owns(props.product.id);
+  if (k === 'ad-frame') return props.owns('ad-frame');
+  if (k === 'send-skin') return props.owns(props.product.id);
+  return false;
+});
+
+const soldOut = computed(() => props.product.stockLimit != null && props.product.stockSold >= props.product.stockLimit);
+
+const disabled = computed(() => props.buying || ownedAlready.value || soldOut.value);
+
+const buyLabel = computed(() => {
+  if (props.buying) return '...';
+  if (soldOut.value) return 'Épuisé';
+  if (ownedAlready.value) return 'Possédé ✓';
+  return props.freeMode ? 'Obtenir (gratuit)' : 'Acheter';
+});
+
+const stockPct = computed(() =>
+  props.product.stockLimit ? Math.round((props.product.stockSold / props.product.stockLimit) * 100) : 0
+);
+
+function fmt(centi: number): string {
+  return (centi / 100).toLocaleString('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+}
+
+function onBuy(): void {
+  const options: PurchaseOptions = {};
+  if (props.product.kind === 'subscription') options.plan = plan.value;
+  if (props.product.kind === 'ad-frame') {
+    options.durationDays = durationDays.value;
+    options.format = format.value;
+    options.url = url.value || undefined;
+  }
+  if (props.product.kind === 'pet' || props.product.id === 'bundle-cosmetic') {
+    const d = availableDesigns.value.find((x) => x.id === petDesign.value) ?? availableDesigns.value[0];
+    if (d) { options.petDesign = d.id; options.petChar = d.char; }
+  }
+  emit('buy', props.product.id, options);
+}
+</script>
+
+<style scoped>
+.card {
+  position: relative;
+  background: #101018;
+  border: 1px solid #20203a;
+  border-radius: 10px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  font-family: Arial, sans-serif;
+}
+.card--owned { opacity: 0.7; }
+
+.card-badge {
+  position: absolute;
+  top: -9px;
+  right: 12px;
+  background: #ff2266;
+  color: #fff;
+  font-size: 9px;
+  font-weight: bold;
+  letter-spacing: 0.5px;
+  padding: 3px 9px;
+  border-radius: 8px;
+  box-shadow: none;
+}
+
+.card-head { display: flex; gap: 12px; align-items: flex-start; }
+.card-icon { font-size: 28px; }
+.card-name { font-size: 15px; font-weight: bold; color: #d8d8ee; margin: 0; text-decoration: none; display: inline-block; }
+.card-name:hover { color: #00ddff; }
+.card-sub { font-size: 11px; color: #6a6a90; margin: 3px 0 0; line-height: 1.4; }
+
+.preview {
+  display: flex; align-items: center; gap: 10px;
+  background: #0a0a12; border-radius: 6px; padding: 10px; justify-content: center;
+}
+.prev-ip { font-family: 'Courier New', monospace; font-size: 12px; font-weight: bold; }
+.prev-plain { color: #666688; }
+.prev-gold { color: #aa8833; }
+.prev-arrow { color: #444466; }
+
+.opts { display: flex; flex-direction: column; gap: 8px; }
+.opt-radio {
+  display: flex; align-items: center; gap: 8px;
+  background: #0c0c16; border: 1px solid #20203a; border-radius: 6px;
+  padding: 8px 10px; font-size: 12px; color: #aaaacc; cursor: pointer;
+}
+.opt-radio.active { border-color: #00aaff; background: #0a1622; }
+.opt-radio input { accent-color: #00ccff; }
+.opt-radio--sm { padding: 5px 8px; font-size: 11px; flex: 1; justify-content: center; }
+.opt-price { margin-left: auto; color: #ffdd66; font-family: 'Courier New', monospace; }
+.opt-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.opt-label { font-size: 11px; color: #8888aa; }
+.opt-select, .opt-input {
+  background: #0c0c16; border: 1px solid #20203a; border-radius: 6px;
+  color: #ccccdd; font-size: 12px; padding: 6px 8px; outline: none;
+}
+.opt-select { flex: 1; }
+.opt-input { width: 100%; }
+
+.pet-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
+.pet-cell {
+  aspect-ratio: 1; background: #0c0c16; border: 1px solid #20203a; border-radius: 6px;
+  font-size: 18px; color: #ccccee; cursor: pointer; display: flex; align-items: center; justify-content: center;
+}
+.pet-cell.active { border-color: #8844aa; }
+.pet-pos { display: flex; gap: 6px; }
+
+.send-skin-preview { display: flex; justify-content: center; padding: 8px 0; }
+.skin-btn-demo {
+  width: 52px; height: 52px; border-radius: 50%;
+  background: #151525; border: 1px solid #30306a;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 24px;
+}
+
+.stock { display: flex; flex-direction: column; gap: 4px; }
+.stock-bar { height: 6px; background: #1a1a2a; border-radius: 3px; overflow: hidden; }
+.stock-fill { height: 100%; background: linear-gradient(90deg, #ffaa00, #ff4444); }
+.stock-txt { font-size: 10px; color: #886644; }
+
+.card-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
+.price { display: flex; align-items: baseline; gap: 6px; }
+.price-old { font-size: 12px; color: #555; text-decoration: line-through; }
+.price-now { font-size: 20px; font-weight: bold; color: #ccaa44; font-family: 'Courier New', monospace; }
+.price-unit { font-size: 11px; color: #886633; }
+
+.buy {
+  background: #004488; border: 1px solid #0066aa; color: #00ddff;
+  font-size: 13px; font-weight: bold; padding: 9px 18px; border-radius: 20px; cursor: pointer;
+  transition: background 0.15s;
+}
+.buy:hover:not(:disabled) { background: #1a4466; }
+.buy:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
+
+.buy--perso {
+  background: #1a1030; border: 1px solid #8844cc; color: #cc88ff;
+  font-size: 13px; font-weight: bold; padding: 9px 18px; border-radius: 20px; cursor: pointer;
+  transition: background 0.15s;
+}
+.buy--perso:hover { background: #261844; }
+</style>

frontend/src/components/shop/persos/BgPrefsSection.vue

@@ -0,0 +1,55 @@
+<!-- Mes Persos › Fond du chat (image de fond personnalisée, viewer-side) -->
+<template>
+  <PrefSection title="🖼️ Fond du chat">
+    <p class="pf-sub">URL d'une image (jpg, png, gif, webp…) ou laisse vide pour le fond par défaut.</p>
+    <div class="bg-row">
+      <input
+        v-model="bgDraft"
+        class="bg-input"
+        type="text"
+        placeholder="https://example.com/image.jpg"
+        @keydown.enter="applyBg"
+      />
+      <button class="btn-apply" @click="applyBg" type="button">Appliquer</button>
+      <button v-if="prefs.chatBgUrl" class="btn-reset" @click="resetBg" type="button">✕ Retirer</button>
+    </div>
+    <div v-if="prefs.chatBgUrl" class="bg-preview" :style="{ backgroundImage: `url(${prefs.chatBgUrl})` }" />
+  </PrefSection>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useCustomStyles } from '@/composables/useCustomStyles';
+import PrefSection from '@/components/shop/PrefSection.vue';
+
+const { prefs } = useCustomStyles();
+
+const bgDraft = ref(prefs.chatBgUrl);
+watch(() => prefs.chatBgUrl, (v) => { bgDraft.value = v; });
+
+function applyBg(): void { prefs.chatBgUrl = bgDraft.value.trim(); }
+function resetBg(): void { prefs.chatBgUrl = ''; bgDraft.value = ''; }
+</script>
+
+<style scoped>
+.bg-row { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
+.bg-input {
+  flex: 1; background: #141420; border: 1px solid #222234; border-radius: 6px;
+  color: #aaaacc; font-family: Arial, sans-serif; font-size: 12px; padding: 8px 12px; outline: none;
+}
+.bg-input:focus { border-color: #333355; }
+.btn-apply {
+  background: #1a2a1a; border: 1px solid #33aa55; color: #44dd77;
+  font-size: 12px; font-weight: bold; padding: 7px 14px; border-radius: 14px; cursor: pointer;
+}
+.btn-apply:hover { background: #234a23; }
+.btn-reset {
+  background: #2a1010; border: 1px solid #882222; color: #ff6655;
+  font-size: 11px; padding: 7px 12px; border-radius: 14px; cursor: pointer;
+}
+.btn-reset:hover { background: #3a1818; }
+.bg-preview {
+  width: 100%; height: 80px; background-size: cover; background-position: center;
+  border-radius: 6px; border: 1px solid #222234;
+}
+</style>

frontend/src/components/shop/persos/IpColorPrefsSection.vue

@@ -0,0 +1,56 @@
+<!-- Mes Persos › Couleur de mon IP (viewer-side, nécessite la Palette IP) -->
+<template>
+  <PrefSection title="🎨 Couleur de mon IP" :locked="!myPerks.ipColors">
+    <template v-if="!myPerks.ipColors" #lock>
+      <span class="pf-lock">🔒 Palette IP requise</span>
+    </template>
+    <p v-if="myIp" class="pf-sub">IP&nbsp;: <code class="code-ip" :style="ipPreviewStyle">{{ myIp }}</code></p>
+    <div class="pf-grid">
+      <button
+        v-for="opt in IP_COLOR_OPTIONS"
+        :key="opt.value"
+        class="pf-tile"
+        :class="{ 'pf-tile--active': currentIpColor === opt.value }"
+        :disabled="!myPerks.ipColors"
+        @click="setIpColor(opt.value)"
+        type="button"
+      >
+        <span v-if="opt.swatch" class="pf-dot" :style="{ background: opt.swatch }" />
+        <span v-else class="pf-dot pf-dot--auto" />
+        <span class="pf-label">{{ opt.label }}</span>
+      </button>
+    </div>
+  </PrefSection>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useCustomStyles, IP_COLOR_OPTIONS } from '@/composables/useCustomStyles';
+import { useMyPerks } from '@/composables/useMessages';
+import { useWallet } from '@/composables/useWallet';
+import { getIpColorWithPerks, getIpGlow } from '@/composables/ipColor';
+import PrefSection from '@/components/shop/PrefSection.vue';
+
+const { prefs } = useCustomStyles();
+const { myPerks } = useMyPerks();
+const { ip: myIp } = useWallet();
+
+const currentIpColor = computed(() => prefs.ipColors[myIp.value] ?? 'auto');
+
+function setIpColor(value: string): void {
+  if (!myIp.value) return;
+  prefs.ipColors[myIp.value] = value;
+}
+
+const ipPreviewStyle = computed(() => {
+  if (!myIp.value) return {};
+  const color = currentIpColor.value === 'auto'
+    ? getIpColorWithPerks(myIp.value, myPerks.value)
+    : currentIpColor.value;
+  return { color, textShadow: getIpGlow(color) };
+});
+</script>
+
+<style scoped>
+.code-ip { font-family: 'Courier New', monospace; font-size: 12px; font-weight: bold; }
+</style>

frontend/src/components/shop/persos/PetsPrefsSection.vue

@@ -0,0 +1,74 @@
+<!-- Mes Persos › Pet actif affiché à gauche de l'IP (parmi les pets possédés) -->
+<template>
+  <PrefSection title="✨ Mes pets" :locked="!hasPets">
+    <template v-if="!hasPets" #lock>
+      <span class="pf-lock">Achetez un Pet dans le shop</span>
+    </template>
+    <template v-if="hasPets">
+      <div class="pf-grid">
+        <button
+          v-for="pet in ownedPets"
+          :key="pet.char"
+          class="pet-cell"
+          :class="{ 'pet-cell--active': activePet === pet.char }"
+          @click="togglePet(pet.char)"
+          type="button"
+        >{{ pet.char }}</button>
+        <button
+          class="pet-cell pet-cell--none"
+          :class="{ 'pet-cell--active': activePet === '' }"
+          @click="togglePet('')"
+          type="button"
+        >✕ Aucun</button>
+      </div>
+      <p class="pf-sub" style="margin-top:6px">
+        Actif&nbsp;: <strong>{{ activePet || 'aucun' }}</strong>
+        — s'affiche à gauche de ton IP dans le chat.
+      </p>
+    </template>
+    <p v-else class="pf-sub">Aucun pet possédé pour l'instant.</p>
+  </PrefSection>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useCustomStyles } from '@/composables/useCustomStyles';
+import { useMyPerks } from '@/composables/useMessages';
+import { useWallet } from '@/composables/useWallet';
+import PrefSection from '@/components/shop/PrefSection.vue';
+
+const { prefs } = useCustomStyles();
+const { myPerks } = useMyPerks();
+const { ip: myIp } = useWallet();
+
+const ownedPets = computed(() => {
+  const seen = new Set<string>();
+  return (myPerks.value.pets ?? []).filter((p) => {
+    if (seen.has(p.char)) return false;
+    seen.add(p.char);
+    return true;
+  });
+});
+const hasPets = computed(() => ownedPets.value.length > 0);
+const activePet = computed(() =>
+  myIp.value && myIp.value in prefs.ipPets ? prefs.ipPets[myIp.value] : (ownedPets.value[0]?.char ?? '')
+);
+
+function togglePet(char: string): void {
+  if (!myIp.value) return;
+  prefs.ipPets[myIp.value] = char;
+}
+</script>
+
+<style scoped>
+.pet-cell {
+  width: 42px; height: 42px;
+  background: #141420; border: 1px solid #222234; border-radius: 8px;
+  font-size: 20px; cursor: pointer; transition: border-color 0.1s, background 0.1s;
+  display: flex; align-items: center; justify-content: center;
+}
+.pet-cell:hover { background: #1a1a2e; border-color: #333355; }
+.pet-cell--active { border-color: #00ddff; background: #0a1a20; }
+.pet-cell--none { font-size: 11px; color: #666; width: auto; padding: 0 10px; }
+.pet-cell--none.pet-cell--active { color: #00ddff; }
+</style>

frontend/src/components/shop/persos/SendButtonPrefsSection.vue

@@ -0,0 +1,33 @@
+<!-- Mes Persos › Couleur du bouton d'envoi (preset, nécessite le skin d'éléments) -->
+<template>
+  <PrefSection title="➤ Bouton d'envoi" :locked="!myPerks.elementSkin">
+    <template v-if="!myPerks.elementSkin" #lock>
+      <span class="pf-lock">🔒 Skin d'éléments requis</span>
+    </template>
+    <div class="pf-grid">
+      <button
+        v-for="[k, p] in presetEntries"
+        :key="k"
+        class="pf-tile"
+        :class="{ 'pf-tile--active': prefs.sendButton === k }"
+        :disabled="!myPerks.elementSkin"
+        @click="prefs.sendButton = k as SendButtonKey"
+        type="button"
+      >
+        <span class="pf-swatch" :style="{ background: p.bg, color: p.color, borderRadius: p.radius }">➤</span>
+        <span class="pf-label">{{ p.label }}</span>
+      </button>
+    </div>
+  </PrefSection>
+</template>
+
+<script setup lang="ts">
+import { useCustomStyles, SEND_BUTTON_PRESETS, type SendButtonKey } from '@/composables/useCustomStyles';
+import { useMyPerks } from '@/composables/useMessages';
+import PrefSection from '@/components/shop/PrefSection.vue';
+
+const { prefs } = useCustomStyles();
+const { myPerks } = useMyPerks();
+
+const presetEntries = Object.entries(SEND_BUTTON_PRESETS);
+</script>

frontend/src/components/shop/persos/SendSkinPrefsSection.vue

@@ -0,0 +1,45 @@
+<!-- Mes Persos › Skin (emoji) du bouton d'envoi, parmi les skins possédés -->
+<template>
+  <PrefSection title="🖱️ Skin du bouton d'envoi" :locked="!hasSendSkins">
+    <template v-if="!hasSendSkins" #lock>
+      <span class="pf-lock">Achetez un skin dans le shop</span>
+    </template>
+    <template v-if="hasSendSkins">
+      <div class="pf-grid">
+        <button
+          class="pf-tile"
+          :class="{ 'pf-tile--active': prefs.sendSkin === '' }"
+          @click="prefs.sendSkin = ''"
+          type="button"
+        >
+          <span class="pf-swatch" style="font-size:14px">►</span>
+          <span class="pf-label">Défaut</span>
+        </button>
+        <button
+          v-for="s in myPerks.sendSkins"
+          :key="s.id"
+          class="pf-tile"
+          :class="{ 'pf-tile--active': prefs.sendSkin === s.id }"
+          @click="prefs.sendSkin = s.id"
+          type="button"
+        >
+          <span class="pf-swatch" style="font-size:20px">{{ s.char }}</span>
+          <span class="pf-label">{{ s.label ?? s.id.replace('send-skin-', '') }}</span>
+        </button>
+      </div>
+    </template>
+    <p v-else class="pf-sub">Aucun skin possédé pour l'instant.</p>
+  </PrefSection>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useCustomStyles } from '@/composables/useCustomStyles';
+import { useMyPerks } from '@/composables/useMessages';
+import PrefSection from '@/components/shop/PrefSection.vue';
+
+const { prefs } = useCustomStyles();
+const { myPerks } = useMyPerks();
+
+const hasSendSkins = computed(() => (myPerks.value.sendSkins?.length ?? 0) > 0);
+</script>

frontend/src/composables/ipColor.spec.ts

@@ -0,0 +1,18 @@
+import { describe, it, expect } from 'vitest';
+import { getIpColor, getIpColorWithPerks } from './ipColor';
+
+describe('ipColor (fonction réutilisable)', () => {
+  it('est déterministe : même IP → même couleur', () => {
+    expect(getIpColor('1.2.3.4')).toBe(getIpColor('1.2.3.4'));
+  });
+
+  it('renvoie une couleur hex de la palette', () => {
+    expect(getIpColor('42.42.42.42')).toMatch(/^#[0-9a-f]{6}$/i);
+  });
+
+  it('le skin gold force la couleur or, sinon palette déterministe', () => {
+    expect(getIpColorWithPerks('1.2.3.4', { skin: 'gold' })).toBe('#ffdd44');
+    expect(getIpColorWithPerks('1.2.3.4', {})).toBe(getIpColor('1.2.3.4'));
+    expect(getIpColorWithPerks('1.2.3.4', null)).toBe(getIpColor('1.2.3.4'));
+  });
+});

frontend/src/composables/ipColor.ts

@@ -1,32 +1,33 @@
-/** Couleurs assignées de façon déterministe à chaque adresse IP */
-const PALETTE = ['#7777aa', '#4499bb', '#aa4499', '#338866', '#aa6633'] as const;
-
-export function getIpColor(ip: string): string {
-  // djb2 hash
-  let hash = 5381;
-  for (let i = 0; i < ip.length; i++) {
-    hash = ((hash << 5) + hash + ip.charCodeAt(i)) & 0xffffffff;
-  }
-  return PALETTE[Math.abs(hash) % PALETTE.length];
-}
-
-export function getIpGlow(color: string): string {
-  return 'none';
-}
-
-/** Gold skin (Style Doré) — overrides the djb2 palette for owners. */
-const GOLD = '#ffdd44';
-
-interface PerkLike {
-  skin?: 'gold';
-}
-
-/** Perk-aware color: gold for Style Doré owners, else the deterministic palette. */
-export function getIpColorWithPerks(ip: string, perks?: PerkLike | null): string {
-  if (perks?.skin === 'gold') return GOLD;
-  return getIpColor(ip);
-}
-
-export function getIpGlowWithPerks(ip: string, perks?: PerkLike | null): string {
-  return 'none';
-}
+/** Couleurs assignées de façon déterministe à chaque adresse IP */
+const PALETTE = ['#7777aa', '#4499bb', '#aa4499', '#338866', '#aa6633'] as const;
+
+export function getIpColor(ip: string): string {
+  // djb2 hash
+  let hash = 5381;
+  for (let i = 0; i < ip.length; i++) {
+    hash = ((hash << 5) + hash + ip.charCodeAt(i)) & 0xffffffff;
+  }
+  return PALETTE[Math.abs(hash) % PALETTE.length];
+}
+
+// Glows are currently disabled globally; params kept for signature stability.
+export function getIpGlow(_color: string): string {
+  return 'none';
+}
+
+/** Gold skin (Style Doré) — overrides the djb2 palette for owners. */
+const GOLD = '#ffdd44';
+
+interface PerkLike {
+  skin?: 'gold';
+}
+
+/** Perk-aware color: gold for Style Doré owners, else the deterministic palette. */
+export function getIpColorWithPerks(ip: string, perks?: PerkLike | null): string {
+  if (perks?.skin === 'gold') return GOLD;
+  return getIpColor(ip);
+}
+
+export function getIpGlowWithPerks(_ip: string, _perks?: PerkLike | null): string {
+  return 'none';
+}

frontend/src/composables/useAds.ts

@@ -1,67 +1,67 @@
-import { ref, watch } from 'vue';
-
-/** Ad inventory client: fetch ads by slot, report impressions (debounced). */
-
-// Shared signal: bumped when the server broadcasts an `ads` frame (e.g. a user
-// bought a Cadre de Pub). All useAds instances refetch when this changes.
-const adsRevision = ref(0);
-export function bumpAdsRevision(): void {
-  adsRevision.value++;
-}
-
-export interface Ad {
-  id: string;
-  brand: string;
-  subtitle?: string | null;
-  url?: string | null;
-  cta?: string | null;
-  icon?: string | null;
-  tone: string; // blue | green | purple | casino | user
-  kind: string; // band | casino
-  ownerIp?: string | null;
-  imageUrl?: string | null;
-}
-
-const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
-
-export function useAds(kind: 'band' | 'casino') {
-  const ads = ref<Ad[]>([]);
-
-  async function fetchAds(): Promise<void> {
-    try {
-      const res = await fetch(`${API_URL}/api/ads?kind=${kind}`);
-      if (res.ok) ads.value = (await res.json()) as Ad[];
-    } catch {
-      /* ignore */
-    }
-  }
-
-  // Refetch whenever the server signals an inventory change.
-  watch(adsRevision, () => void fetchAds());
-
-  // Debounced impression reporting (each ad id at most once per flush).
-  const pending = new Set<string>();
-  let timer: ReturnType<typeof setTimeout> | null = null;
-  function reportImpression(id: string): void {
-    pending.add(id);
-    if (timer) return;
-    timer = setTimeout(flush, 800);
-  }
-  async function flush(): Promise<void> {
-    timer = null;
-    const ids = [...pending];
-    pending.clear();
-    if (!ids.length) return;
-    try {
-      await fetch(`${API_URL}/api/ads/impressions`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ ids }),
-      });
-    } catch {
-      /* ignore */
-    }
-  }
-
-  return { ads, fetchAds, reportImpression };
-}
+import { ref, watch } from 'vue';
+
+/** Ad inventory client: fetch ads by slot, report impressions (debounced). */
+
+// Shared signal: bumped when the server broadcasts an `ads` frame (e.g. a user
+// bought a Cadre de Pub). All useAds instances refetch when this changes.
+const adsRevision = ref(0);
+export function bumpAdsRevision(): void {
+  adsRevision.value++;
+}
+
+export interface Ad {
+  id: string;
+  brand: string;
+  subtitle?: string | null;
+  url?: string | null;
+  cta?: string | null;
+  icon?: string | null;
+  tone: string; // blue | green | purple | casino | user
+  kind: string; // band | casino
+  ownerIp?: string | null;
+  imageUrl?: string | null;
+}
+
+const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
+
+export function useAds(kind: 'band' | 'casino') {
+  const ads = ref<Ad[]>([]);
+
+  async function fetchAds(): Promise<void> {
+    try {
+      const res = await fetch(`${API_URL}/api/ads?kind=${kind}`);
+      if (res.ok) ads.value = (await res.json()) as Ad[];
+    } catch {
+      /* ignore */
+    }
+  }
+
+  // Refetch whenever the server signals an inventory change.
+  watch(adsRevision, () => void fetchAds());
+
+  // Debounced impression reporting (each ad id at most once per flush).
+  const pending = new Set<string>();
+  let timer: ReturnType<typeof setTimeout> | null = null;
+  function reportImpression(id: string): void {
+    pending.add(id);
+    if (timer) return;
+    timer = setTimeout(flush, 800);
+  }
+  async function flush(): Promise<void> {
+    timer = null;
+    const ids = [...pending];
+    pending.clear();
+    if (!ids.length) return;
+    try {
+      await fetch(`${API_URL}/api/ads/impressions`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ ids }),
+      });
+    } catch {
+      /* ignore */
+    }
+  }
+
+  return { ads, fetchAds, reportImpression };
+}

frontend/src/composables/useAlert.ts

@@ -1,86 +1,86 @@
-import { ref } from 'vue';
-
-/**
- * Global audio alert (paid, consumable). On an `alert` WS frame, every tab plays
- * the sound at full volume for at most maxDurationMs. If a custom mp3 URL is
- * provided it's played; otherwise a synthesized siren is used (WebAudio).
- *
- * Browser autoplay policies block sound before a user gesture — we unlock the
- * AudioContext on the first click anywhere.
- */
-
-const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
-
-let audioCtx: AudioContext | null = null;
-const lastFiredAt = ref(0);
-
-function unlock(): void {
-  if (!audioCtx) {
-    const AC = (window as any).AudioContext || (window as any).webkitAudioContext;
-    if (AC) audioCtx = new AC();
-  }
-  if (audioCtx && audioCtx.state === 'suspended') void audioCtx.resume();
-}
-
-// Unlock on the first interaction.
-if (typeof window !== 'undefined') {
-  window.addEventListener('pointerdown', unlock, { once: false });
-}
-
-function playSiren(maxDurationMs: number): void {
-  if (!audioCtx) return;
-  const dur = Math.min(maxDurationMs, 5000) / 1000;
-  const now = audioCtx.currentTime;
-  const osc = audioCtx.createOscillator();
-  const gain = audioCtx.createGain();
-  osc.type = 'sawtooth';
-  // Warble between two pitches like an air-raid siren.
-  osc.frequency.setValueAtTime(440, now);
-  for (let t = 0; t < dur; t += 0.5) {
-    osc.frequency.linearRampToValueAtTime(880, now + t + 0.25);
-    osc.frequency.linearRampToValueAtTime(440, now + t + 0.5);
-  }
-  gain.gain.setValueAtTime(1, now); // volume à fond
-  gain.gain.setValueAtTime(1, now + dur - 0.05);
-  gain.gain.linearRampToValueAtTime(0, now + dur);
-  osc.connect(gain).connect(audioCtx.destination);
-  osc.start(now);
-  osc.stop(now + dur);
-}
-
-function playMp3(url: string, maxDurationMs: number): void {
-  const audio = new Audio(url);
-  audio.volume = 1;
-  void audio.play().catch(() => { /* autoplay blocked */ });
-  setTimeout(() => { audio.pause(); audio.currentTime = 0; }, Math.min(maxDurationMs, 5000));
-}
-
-/** Handle an incoming `alert` frame. */
-export function handleAlertFrame(data: { soundUrl?: string; maxDurationMs?: number }): void {
-  lastFiredAt.value = Date.now();
-  const max = data.maxDurationMs ?? 5000;
-  unlock();
-  if (data.soundUrl) playMp3(data.soundUrl, max);
-  else playSiren(max);
-}
-
-export function useAlert() {
-  async function fireAlert(soundUrl?: string): Promise<{ ok: boolean; error?: string }> {
-    unlock();
-    try {
-      const res = await fetch(`${API_URL}/api/alert`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ soundUrl }),
-      });
-      if (!res.ok) {
-        const d = await res.json().catch(() => ({}));
-        return { ok: false, error: d.error || 'Alerte impossible' };
-      }
-      return { ok: true };
-    } catch {
-      return { ok: false, error: 'Réseau indisponible' };
-    }
-  }
-  return { fireAlert };
-}
+import { ref } from 'vue';
+
+/**
+ * Global audio alert (paid, consumable). On an `alert` WS frame, every tab plays
+ * the sound at full volume for at most maxDurationMs. If a custom mp3 URL is
+ * provided it's played; otherwise a synthesized siren is used (WebAudio).
+ *
+ * Browser autoplay policies block sound before a user gesture — we unlock the
+ * AudioContext on the first click anywhere.
+ */
+
+const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
+
+let audioCtx: AudioContext | null = null;
+const lastFiredAt = ref(0);
+
+function unlock(): void {
+  if (!audioCtx) {
+    const AC = (window as any).AudioContext || (window as any).webkitAudioContext;
+    if (AC) audioCtx = new AC();
+  }
+  if (audioCtx && audioCtx.state === 'suspended') void audioCtx.resume();
+}
+
+// Unlock on the first interaction.
+if (typeof window !== 'undefined') {
+  window.addEventListener('pointerdown', unlock, { once: false });
+}
+
+function playSiren(maxDurationMs: number): void {
+  if (!audioCtx) return;
+  const dur = Math.min(maxDurationMs, 5000) / 1000;
+  const now = audioCtx.currentTime;
+  const osc = audioCtx.createOscillator();
+  const gain = audioCtx.createGain();
+  osc.type = 'sawtooth';
+  // Warble between two pitches like an air-raid siren.
+  osc.frequency.setValueAtTime(440, now);
+  for (let t = 0; t < dur; t += 0.5) {
+    osc.frequency.linearRampToValueAtTime(880, now + t + 0.25);
+    osc.frequency.linearRampToValueAtTime(440, now + t + 0.5);
+  }
+  gain.gain.setValueAtTime(1, now); // volume à fond
+  gain.gain.setValueAtTime(1, now + dur - 0.05);
+  gain.gain.linearRampToValueAtTime(0, now + dur);
+  osc.connect(gain).connect(audioCtx.destination);
+  osc.start(now);
+  osc.stop(now + dur);
+}
+
+function playMp3(url: string, maxDurationMs: number): void {
+  const audio = new Audio(url);
+  audio.volume = 1;
+  void audio.play().catch(() => { /* autoplay blocked */ });
+  setTimeout(() => { audio.pause(); audio.currentTime = 0; }, Math.min(maxDurationMs, 5000));
+}
+
+/** Handle an incoming `alert` frame. */
+export function handleAlertFrame(data: { soundUrl?: string; maxDurationMs?: number }): void {
+  lastFiredAt.value = Date.now();
+  const max = data.maxDurationMs ?? 5000;
+  unlock();
+  if (data.soundUrl) playMp3(data.soundUrl, max);
+  else playSiren(max);
+}
+
+export function useAlert() {
+  async function fireAlert(soundUrl?: string): Promise<{ ok: boolean; error?: string }> {
+    unlock();
+    try {
+      const res = await fetch(`${API_URL}/api/alert`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ soundUrl }),
+      });
+      if (!res.ok) {
+        const d = await res.json().catch(() => ({}));
+        return { ok: false, error: d.error || 'Alerte impossible' };
+      }
+      return { ok: true };
+    } catch {
+      return { ok: false, error: 'Réseau indisponible' };
+    }
+  }
+  return { fireAlert };
+}

frontend/src/composables/useAttachments.ts

@@ -1,43 +1,43 @@
-/** Upload helper: posts a file to /api/uploads, returns its metadata. */
-
-const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
-
-export interface UploadedAttachment {
-  id: string;
-  filename: string;
-  mimeType: string;
-  size: number;
-}
-
-export type UploadResult =
-  | { ok: true; attachment: UploadedAttachment }
-  | { ok: false; error: string };
-
-export function useAttachments() {
-  async function uploadFile(file: File): Promise<UploadResult> {
-    const form = new FormData();
-    form.append('file', file);
-    try {
-      const res = await fetch(`${API_URL}/api/uploads`, { method: 'POST', body: form });
-      const data = await res.json().catch(() => ({}));
-      if (!res.ok) return { ok: false, error: data.error || 'Upload refusé' };
-      return { ok: true, attachment: data as UploadedAttachment };
-    } catch {
-      return { ok: false, error: 'Réseau indisponible' };
-    }
-  }
-
-  /** Human file size. */
-  function kb(bytes: number): string {
-    if (bytes >= 1_000_000) return (bytes / 1_000_000).toFixed(1) + ' Mo';
-    if (bytes >= 1000) return Math.round(bytes / 1000) + ' Ko';
-    return bytes + ' o';
-  }
-
-  /** URL to fetch/download an attachment. */
-  function urlFor(id: string): string {
-    return `${API_URL}/api/uploads/${id}`;
-  }
-
-  return { uploadFile, kb, urlFor };
-}
+/** Upload helper: posts a file to /api/uploads, returns its metadata. */
+
+const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
+
+export interface UploadedAttachment {
+  id: string;
+  filename: string;
+  mimeType: string;
+  size: number;
+}
+
+export type UploadResult =
+  | { ok: true; attachment: UploadedAttachment }
+  | { ok: false; error: string };
+
+export function useAttachments() {
+  async function uploadFile(file: File): Promise<UploadResult> {
+    const form = new FormData();
+    form.append('file', file);
+    try {
+      const res = await fetch(`${API_URL}/api/uploads`, { method: 'POST', body: form });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) return { ok: false, error: data.error || 'Upload refusé' };
+      return { ok: true, attachment: data as UploadedAttachment };
+    } catch {
+      return { ok: false, error: 'Réseau indisponible' };
+    }
+  }
+
+  /** Human file size. */
+  function kb(bytes: number): string {
+    if (bytes >= 1_000_000) return (bytes / 1_000_000).toFixed(1) + ' Mo';
+    if (bytes >= 1000) return Math.round(bytes / 1000) + ' Ko';
+    return bytes + ' o';
+  }
+
+  /** URL to fetch/download an attachment. */
+  function urlFor(id: string): string {
+    return `${API_URL}/api/uploads/${id}`;
+  }
+
+  return { uploadFile, kb, urlFor };
+}

frontend/src/composables/useContextMenu.ts

@@ -1,58 +1,60 @@
-/**
- * Global singleton for the right-click style context menu.
- * Any component calls openContextMenu() to display the floating picker,
- * and StyleContextMenu.vue (mounted once in App.vue) renders it.
- */
-import { reactive } from 'vue';
-
-export interface ContextMenuItem {
-  value: string;
-  label: string;
-  swatch?: string;        // optional color swatch dot
-  isHeader?: boolean;     // non-interactive section heading
-}
-
-interface MenuState {
-  visible: boolean;
-  x: number;
-  y: number;
-  title: string;
-  items: ContextMenuItem[];
-  current: string;
-  onSelect: (value: string) => void;
-}
-
-const state = reactive<MenuState>({
-  visible: false,
-  x: 0,
-  y: 0,
-  title: '',
-  items: [],
-  current: '',
-  onSelect: () => {},
-});
-
-export function openContextMenu(opts: {
-  x: number;
-  y: number;
-  title: string;
-  items: ContextMenuItem[];
-  current: string;
-  onSelect: (value: string) => void;
-}): void {
-  state.visible = true;
-  state.x = opts.x;
-  state.y = opts.y;
-  state.title = opts.title;
-  state.items = opts.items;
-  state.current = opts.current;
-  state.onSelect = opts.onSelect;
-}
-
-export function closeContextMenu(): void {
-  state.visible = false;
-}
-
-export function useContextMenu() {
-  return { state };
-}
+/**
+ * Global singleton for the right-click style context menu.
+ * Any component calls openContextMenu() to display the floating picker,
+ * and StyleContextMenu.vue (mounted once in App.vue) renders it.
+ */
+import { reactive } from 'vue';
+
+export interface ContextMenuItem {
+  value: string;
+  label: string;
+  swatch?: string;        // optional color swatch dot
+  emoji?: string;         // optional emoji shown instead of swatch
+  isHeader?: boolean;     // non-interactive section heading
+  checked?: boolean;      // explicit checkmark (for multi-group menus)
+}
+
+interface MenuState {
+  visible: boolean;
+  x: number;
+  y: number;
+  title: string;
+  items: ContextMenuItem[];
+  current: string;
+  onSelect: (value: string) => void;
+}
+
+const state = reactive<MenuState>({
+  visible: false,
+  x: 0,
+  y: 0,
+  title: '',
+  items: [],
+  current: '',
+  onSelect: () => {},
+});
+
+export function openContextMenu(opts: {
+  x: number;
+  y: number;
+  title: string;
+  items: ContextMenuItem[];
+  current: string;
+  onSelect: (value: string) => void;
+}): void {
+  state.visible = true;
+  state.x = opts.x;
+  state.y = opts.y;
+  state.title = opts.title;
+  state.items = opts.items;
+  state.current = opts.current;
+  state.onSelect = opts.onSelect;
+}
+
+export function closeContextMenu(): void {
+  state.visible = false;
+}
+
+export function useContextMenu() {
+  return { state };
+}

frontend/src/composables/useCustomStyles.ts

@@ -1,80 +1,80 @@
-/**
- * Viewer-side visual customisations, persisted in localStorage.
- * None of these affect other users — they're purely local display overrides.
- */
-import { reactive, watch } from 'vue';
-
-const STORAGE_KEY = 'xip_custom_styles_v1';
-
-// ── Preset catalogues ────────────────────────────────────────────────────────
-
-export const SEND_BUTTON_PRESETS = {
-  default: { bg: '#004488', color: '#00ddff', radius: '50%',  label: 'Cyan (défaut)' },
-  green:   { bg: '#1a4a1a', color: '#00ee77', radius: '50%',  label: 'Vert' },
-  purple:  { bg: '#2a1040', color: '#cc44ff', radius: '50%',  label: 'Violet' },
-  red:     { bg: '#3a0a0a', color: '#ff5533', radius: '50%',  label: 'Rouge' },
-  square:  { bg: '#1a1a1a', color: '#ffffff', radius: '4px',   label: 'Blanc carré' },
-} as const;
-export type SendButtonKey = keyof typeof SEND_BUTTON_PRESETS;
-
-export const AD_FRAME_PRESETS = {
-  default: { border: '1px solid #1e1e2a', bg: '#121218', label: 'Défaut' },
-  neon:    { border: '1px solid #00ddff66', bg: '#0a1220', label: 'Néon bleu' },
-  gold:    { border: '1px solid #ffdd4466', bg: '#141208', label: 'Or' },
-  minimal: { border: '1px solid transparent', bg: '#0c0c10', label: 'Minimal' },
-} as const;
-export type AdFrameKey = keyof typeof AD_FRAME_PRESETS;
-
-export const IP_COLOR_OPTIONS: { value: string; label: string; swatch?: string }[] = [
-  { value: 'auto',    label: 'Auto (palette)' },
-  { value: '#00ddff', label: 'Cyan',   swatch: '#00ddff' },
-  { value: '#ff00cc', label: 'Rose',   swatch: '#ff00cc' },
-  { value: '#00ee77', label: 'Vert',   swatch: '#00ee77' },
-  { value: '#ffdd44', label: 'Or',     swatch: '#ffdd44' },
-  { value: '#ff5533', label: 'Rouge',  swatch: '#ff5533' },
-  { value: '#ffffff', label: 'Blanc',  swatch: '#ffffff' },
-];
-
-export const PET_OPTIONS: { value: string; label: string }[] = [
-  { value: '',   label: 'Aucun' },
-  { value: '🐱', label: '🐱 Chat' },
-  { value: '🐶', label: '🐶 Chien' },
-  { value: '✨', label: '✨ Sparkle' },
-  { value: '🔥', label: '🔥 Feu' },
-  { value: '👾', label: '👾 Ghost' },
-  { value: '⚡', label: '⚡ Éclair' },
-  { value: '🌙', label: '🌙 Lune' },
-];
-
-// ── Preferences shape ────────────────────────────────────────────────────────
-
-export interface CustomStylePrefs {
-  sendButton: SendButtonKey;
-  sendSkin: string;                  // send-skin product id, or '' for default arrow
-  adFrame: AdFrameKey;
-  ipColors: Record<string, string>;  // ip → hex or 'auto'
-  ipPets:   Record<string, string>;  // ip → emoji or ''
-  chatBgUrl: string;                 // URL or '' for no background
-}
-
-function defaults(): CustomStylePrefs {
-  return { sendButton: 'default', sendSkin: '', adFrame: 'default', ipColors: {}, ipPets: {}, chatBgUrl: '' };
-}
-
-function load(): CustomStylePrefs {
-  try {
-    const raw = localStorage.getItem(STORAGE_KEY);
-    if (raw) return { ...defaults(), ...JSON.parse(raw) };
-  } catch { /* ignore */ }
-  return defaults();
-}
-
-const prefs = reactive<CustomStylePrefs>(load());
-
-watch(prefs, (v) => {
-  localStorage.setItem(STORAGE_KEY, JSON.stringify(v));
-}, { deep: true });
-
-export function useCustomStyles() {
-  return { prefs };
-}
+/**
+ * Viewer-side visual customisations, persisted in localStorage.
+ * None of these affect other users — they're purely local display overrides.
+ */
+import { reactive, watch } from 'vue';
+
+const STORAGE_KEY = 'xip_custom_styles_v1';
+
+// ── Preset catalogues ────────────────────────────────────────────────────────
+
+export const SEND_BUTTON_PRESETS = {
+  default: { bg: '#004488', color: '#00ddff', radius: '50%',  label: 'Cyan (défaut)' },
+  green:   { bg: '#1a4a1a', color: '#00ee77', radius: '50%',  label: 'Vert' },
+  purple:  { bg: '#2a1040', color: '#cc44ff', radius: '50%',  label: 'Violet' },
+  red:     { bg: '#3a0a0a', color: '#ff5533', radius: '50%',  label: 'Rouge' },
+  square:  { bg: '#1a1a1a', color: '#ffffff', radius: '4px',   label: 'Blanc carré' },
+} as const;
+export type SendButtonKey = keyof typeof SEND_BUTTON_PRESETS;
+
+export const AD_FRAME_PRESETS = {
+  default: { border: '1px solid #1e1e2a', bg: '#121218', label: 'Défaut' },
+  neon:    { border: '1px solid #00ddff66', bg: '#0a1220', label: 'Néon bleu' },
+  gold:    { border: '1px solid #ffdd4466', bg: '#141208', label: 'Or' },
+  minimal: { border: '1px solid transparent', bg: '#0c0c10', label: 'Minimal' },
+} as const;
+export type AdFrameKey = keyof typeof AD_FRAME_PRESETS;
+
+export const IP_COLOR_OPTIONS: { value: string; label: string; swatch?: string }[] = [
+  { value: 'auto',    label: 'Auto (palette)' },
+  { value: '#00ddff', label: 'Cyan',   swatch: '#00ddff' },
+  { value: '#ff00cc', label: 'Rose',   swatch: '#ff00cc' },
+  { value: '#00ee77', label: 'Vert',   swatch: '#00ee77' },
+  { value: '#ffdd44', label: 'Or',     swatch: '#ffdd44' },
+  { value: '#ff5533', label: 'Rouge',  swatch: '#ff5533' },
+  { value: '#ffffff', label: 'Blanc',  swatch: '#ffffff' },
+];
+
+export const PET_OPTIONS: { value: string; label: string }[] = [
+  { value: '',   label: 'Aucun' },
+  { value: '🐱', label: '🐱 Chat' },
+  { value: '🐶', label: '🐶 Chien' },
+  { value: '✨', label: '✨ Sparkle' },
+  { value: '🔥', label: '🔥 Feu' },
+  { value: '👾', label: '👾 Ghost' },
+  { value: '⚡', label: '⚡ Éclair' },
+  { value: '🌙', label: '🌙 Lune' },
+];
+
+// ── Preferences shape ────────────────────────────────────────────────────────
+
+export interface CustomStylePrefs {
+  sendButton: SendButtonKey;
+  sendSkin: string;                  // send-skin product id, or '' for default arrow
+  adFrame: AdFrameKey;
+  ipColors: Record<string, string>;  // ip → hex or 'auto'
+  ipPets:   Record<string, string>;  // ip → emoji or ''
+  chatBgUrl: string;                 // URL or '' for no background
+}
+
+function defaults(): CustomStylePrefs {
+  return { sendButton: 'default', sendSkin: '', adFrame: 'default', ipColors: {}, ipPets: {}, chatBgUrl: '' };
+}
+
+function load(): CustomStylePrefs {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw) return { ...defaults(), ...JSON.parse(raw) };
+  } catch { /* ignore */ }
+  return defaults();
+}
+
+const prefs = reactive<CustomStylePrefs>(load());
+
+watch(prefs, (v) => {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(v));
+}, { deep: true });
+
+export function useCustomStyles() {
+  return { prefs };
+}

frontend/src/composables/useDebounce.spec.ts

@@ -0,0 +1,26 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { debounce } from './useDebounce';
+
+describe('debounce (fonction réutilisable)', () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  it('ne déclenche qu’une fois après la pause', () => {
+    const spy = vi.fn();
+    const d = debounce(spy, 300);
+    d('a'); d('b'); d('c');
+    expect(spy).not.toHaveBeenCalled();
+    vi.advanceTimersByTime(300);
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith('c'); // garde le dernier appel
+  });
+
+  it('cancel() annule l’appel en attente', () => {
+    const spy = vi.fn();
+    const d = debounce(spy, 200);
+    d('x');
+    d.cancel();
+    vi.advanceTimersByTime(500);
+    expect(spy).not.toHaveBeenCalled();
+  });
+});

frontend/src/composables/useDebounce.ts

@@ -0,0 +1,33 @@
+/**
+ * Petit utilitaire de debounce réutilisable : retourne une version de `fn` qui
+ * n'est appelée qu'après `delay` ms sans nouvel appel. Expose `.cancel()` pour
+ * annuler un appel en attente (utile au démontage d'un composant).
+ */
+export interface Debounced<A extends unknown[]> {
+  (...args: A): void;
+  cancel(): void;
+}
+
+export function debounce<A extends unknown[]>(
+  fn: (...args: A) => void,
+  delay = 300,
+): Debounced<A> {
+  let timer: ReturnType<typeof setTimeout> | null = null;
+
+  const debounced = (...args: A): void => {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      timer = null;
+      fn(...args);
+    }, delay);
+  };
+
+  debounced.cancel = (): void => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  };
+
+  return debounced;
+}

frontend/src/composables/useFavorites.spec.ts

@@ -0,0 +1,71 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useFavorites, type FavoriteSource } from './useFavorites';
+
+const sample: FavoriteSource = {
+  id: 'm1',
+  content: 'Bonjour le monde',
+  authorIp: '1.2.3.4',
+  createdAt: '2026-01-01T10:00:00.000Z',
+  authorGeo: { country: 'France', countryCode: 'FR', city: 'Paris' },
+};
+
+describe('useFavorites (logique d’état)', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    useFavorites().clear();
+  });
+
+  it('ajoute et retire un favori (toggle)', () => {
+    const fav = useFavorites();
+    expect(fav.isFav('m1')).toBe(false);
+
+    const added = fav.toggle(sample);
+    expect(added).toBe(true);
+    expect(fav.isFav('m1')).toBe(true);
+    expect(fav.all.value).toHaveLength(1);
+
+    const removed = fav.toggle(sample);
+    expect(removed).toBe(false);
+    expect(fav.isFav('m1')).toBe(false);
+    expect(fav.all.value).toHaveLength(0);
+  });
+
+  it('stocke un snapshot avec valeurs par défaut', () => {
+    const fav = useFavorites();
+    fav.toggle(sample);
+    const item = fav.all.value[0];
+    expect(item.content).toBe('Bonjour le monde');
+    expect(item.authorGeo?.countryCode).toBe('FR');
+    expect(item.rating).toBe(0);
+    expect(item.status).toBe('a-lire');
+  });
+
+  it('édite note / rating / statut', () => {
+    const fav = useFavorites();
+    fav.toggle(sample);
+    fav.setNote('m1', 'super message');
+    fav.setRating('m1', 4);
+    fav.setStatus('m1', 'top');
+    const item = fav.all.value[0];
+    expect(item.note).toBe('super message');
+    expect(item.rating).toBe(4);
+    expect(item.status).toBe('top');
+  });
+
+  it('borne la note entre 0 et 5', () => {
+    const fav = useFavorites();
+    fav.toggle(sample);
+    fav.setRating('m1', 9);
+    expect(fav.all.value[0].rating).toBe(5);
+    fav.setRating('m1', -3);
+    expect(fav.all.value[0].rating).toBe(0);
+  });
+
+  it('persiste dans localStorage', () => {
+    const fav = useFavorites();
+    fav.toggle(sample);
+    const raw = localStorage.getItem('xip-favoris');
+    expect(raw).toBeTruthy();
+    expect(JSON.parse(raw!).items[0].id).toBe('m1');
+  });
+});

frontend/src/composables/useFavorites.ts

@@ -0,0 +1,124 @@
+import { reactive, computed } from 'vue';
+
+/**
+ * Liste personnelle « Favoris » — état applicatif centralisé (singleton
+ * module-level), persisté en localStorage, sans serveur. Chaque favori est un
+ * SNAPSHOT du message au moment de l'ajout : la page Favoris et la synthèse
+ * restent valides même si le message a quitté le flux temps réel.
+ */
+
+const STORAGE_KEY = 'xip-favoris';
+
+export type FavStatus = 'a-lire' | 'lu' | 'top';
+
+export interface FavoriteGeo {
+  country: string;
+  countryCode: string;
+  city: string;
+}
+
+/** Données minimales d'un message dont on a besoin pour le favori. */
+export interface FavoriteSource {
+  id: string;
+  content: string;
+  authorIp: string;
+  createdAt: string;
+  authorGeo?: FavoriteGeo | null;
+}
+
+export interface FavoriteItem extends FavoriteSource {
+  note: string;        // annotation libre
+  rating: number;      // 0–5
+  status: FavStatus;
+  addedAt: string;     // ISO
+}
+
+interface FavState {
+  items: FavoriteItem[];
+}
+
+function load(): FavState {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw) {
+      const parsed = JSON.parse(raw);
+      if (Array.isArray(parsed?.items)) return { items: parsed.items };
+    }
+  } catch {
+    /* ignore corrupted storage */
+  }
+  return { items: [] };
+}
+
+const state = reactive<FavState>(load());
+
+function persist(): void {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+  } catch {
+    /* quota / unavailable — non-fatal */
+  }
+}
+
+function find(id: string): FavoriteItem | undefined {
+  return state.items.find((f) => f.id === id);
+}
+
+export function useFavorites() {
+  const all = computed(() => state.items);
+  const count = computed(() => state.items.length);
+
+  function isFav(id: string): boolean {
+    return state.items.some((f) => f.id === id);
+  }
+
+  /** Ajoute le message en favori s'il ne l'est pas, sinon le retire. Retourne le nouvel état. */
+  function toggle(msg: FavoriteSource): boolean {
+    const existing = find(msg.id);
+    if (existing) {
+      state.items = state.items.filter((f) => f.id !== msg.id);
+      persist();
+      return false;
+    }
+    state.items.push({
+      id: msg.id,
+      content: msg.content,
+      authorIp: msg.authorIp,
+      createdAt: msg.createdAt,
+      authorGeo: msg.authorGeo ?? null,
+      note: '',
+      rating: 0,
+      status: 'a-lire',
+      addedAt: new Date().toISOString(),
+    });
+    persist();
+    return true;
+  }
+
+  function remove(id: string): void {
+    state.items = state.items.filter((f) => f.id !== id);
+    persist();
+  }
+
+  function setNote(id: string, note: string): void {
+    const f = find(id);
+    if (f) { f.note = note; persist(); }
+  }
+
+  function setRating(id: string, rating: number): void {
+    const f = find(id);
+    if (f) { f.rating = Math.max(0, Math.min(5, Math.round(rating))); persist(); }
+  }
+
+  function setStatus(id: string, status: FavStatus): void {
+    const f = find(id);
+    if (f) { f.status = status; persist(); }
+  }
+
+  function clear(): void {
+    state.items = [];
+    persist();
+  }
+
+  return { all, count, isFav, toggle, remove, setNote, setRating, setStatus, clear };
+}

frontend/src/composables/useMessageItem.ts

@@ -0,0 +1,62 @@
+import { type GeoInfo } from '@/composables/useMessages';
+import { getIpColorWithPerks, getIpGlowWithPerks, getIpGlow } from '@/composables/ipColor';
+import { usePerks } from '@/composables/usePerks';
+import { useCustomStyles } from '@/composables/useCustomStyles';
+import { useMyPerks } from '@/composables/useMessages';
+
+export function useMessageItem() {
+  const { perksFor } = usePerks();
+  const { myPerks } = useMyPerks();
+  const { prefs } = useCustomStyles();
+
+  function perksOf(m: { authorIp: string; authorPerks?: any }) {
+    return m.authorPerks ?? perksFor(m.authorIp);
+  }
+
+  function ipStyle(m: { authorIp: string; authorPerks?: any }) {
+    const ip = m.authorIp;
+    const override = prefs.ipColors[ip];
+    if (override && override !== 'auto') {
+      return { color: override, textShadow: getIpGlow(override) };
+    }
+    const p = perksOf(m);
+    return { color: getIpColorWithPerks(ip, p), textShadow: getIpGlowWithPerks(ip, p) };
+  }
+
+  function petsLeft(m: { authorIp: string; authorPerks?: any }) {
+    const ip = m.authorIp;
+    if (ip in prefs.ipPets) return prefs.ipPets[ip];
+    return (perksOf(m)?.pets ?? [])
+      .filter((x: any) => x.position === 'left' || x.position === 'both')
+      .map((x: any) => x.char).join('');
+  }
+
+  function petsRight(m: { authorIp: string; authorPerks?: any }) {
+    const ip = m.authorIp;
+    if (ip in prefs.ipPets) return '';
+    return (perksOf(m)?.pets ?? [])
+      .filter((x: any) => x.position === 'right' || x.position === 'both')
+      .map((x: any) => x.char).join('');
+  }
+
+  function fmt(date: string) {
+    return new Date(date).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
+  }
+
+  function geoLabel(geo?: GeoInfo | null): string {
+    if (!geo) return '';
+    if (!geo.countryCode) return 'Local';
+    const place = geo.city || geo.country;
+    if (geo.lat != null && geo.lon != null) {
+      return `${place} · ${geo.lat.toFixed(4)}, ${geo.lon.toFixed(4)}`;
+    }
+    return place;
+  }
+
+  function geoLink(geo?: GeoInfo | null): string {
+    if (!geo || geo.lat == null || geo.lon == null) return 'https://maps.google.com';
+    return `https://www.google.com/maps/search/?api=1&query=${geo.lat},${geo.lon}`;
+  }
+
+  return { perksOf, ipStyle, petsLeft, petsRight, fmt, geoLabel, geoLink, myPerks, prefs };
+}

frontend/src/composables/useMessages.ts

@@ -1,219 +1,212 @@
-import { ref, onMounted } from 'vue';
-import { useRealtime } from './useRealtime';
-import { useWallet, applyWalletFrame } from './useWallet';
-import { setPerks, applyPerksFrame, type Perks } from './usePerks';
-import { bumpAdsRevision } from './useAds';
-import { handleAlertFrame } from './useAlert';
-
-// Module-level singleton so any component can read the viewer's own perks
-// without prop-drilling (e.g. SendButton, AdBand).
-export const myPerks = ref<Perks>({});
-
-export function useMyPerks() {
-  return { myPerks };
-}
-
-export interface Reply {
-  id: string;
-  content: string;
-  authorIp: string;
-  createdAt: string;
-  parentId?: string | null;
-  authorPerks?: Perks;
-  richMode?: 'none' | 'htmlcss' | 'js';
-  richContent?: string | null;
-  attachments?: Attachment[];
-}
-
-export interface Attachment {
-  id: string;
-  filename: string;
-  mimeType: string;
-  size: number;
-}
-
-export interface Message extends Reply {
-  parentId: string | null;
-  replies: Reply[];
-}
-
-const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
-
-/** Refresh the viewer's own perks from the server (callable from anywhere). */
-export async function refreshMyPerks(): Promise<void> {
-  try {
-    const res = await fetch(`${API_URL}/api/shop/me`);
-    if (!res.ok) return;
-    const { entitlements } = (await res.json()) as {
-      entitlements: { kind: string; metaJson?: string | null }[];
-    };
-    const p: Perks = {};
-    const pets: { char: string; position: 'left' | 'right' | 'both' }[] = [];
-    for (const e of entitlements) {
-      let meta: any = {};
-      try { meta = e.metaJson ? JSON.parse(e.metaJson) : {}; } catch { /* */ }
-      if (e.kind === 'noads') { p.noads = true; if (meta.plan === 'annual') p.badge = true; }
-      if (e.kind === 'style-dore') p.skin = 'gold';
-      if (e.kind === 'pet' && meta.char) pets.push({ char: meta.char, position: meta.position ?? 'left' });
-      if (e.kind === 'element-skin') p.elementSkin = true;        if (e.kind === 'ip-colors') p.ipColors = true;
-        if (e.kind.startsWith('send-skin-')) {
-          let meta2: any = {};
-          try { meta2 = e.metaJson ? JSON.parse(e.metaJson) : {}; } catch {}
-          if (!p.sendSkins) p.sendSkins = [];
-          p.sendSkins.push({ id: e.kind, char: meta2.char ?? '?', label: meta2.label });
-        }      if (e.kind === 'rich-htmlcss') p.richHtmlcss = true;
-      if (e.kind === 'rich-js') p.richJs = true;
-      if (e.kind === 'no-file-limit') p.noFileLimit = true;
-      if (e.kind === 'audio-alert') p.audioAlert = true;
-    }
-    if (pets.length) p.pets = pets;
-    myPerks.value = p;
-    const { ip } = useWallet();
-    if (ip.value) setPerks(ip.value, p);
-  } catch {
-    /* ignore */
-  }
-}
-
-export function useMessages() {
-  const messages = ref<Message[]>([]);
-  const loading = ref(false);
-  const sending = ref(false);
-
-  /** Seed the perks store from a message + its replies. */
-  function harvestPerks(m: Message): void {
-    setPerks(m.authorIp, m.authorPerks);
-    for (const r of m.replies ?? []) setPerks(r.authorIp, r.authorPerks);
-  }
-
-  async function fetchMessages(): Promise<void> {
-    loading.value = true;
-    try {
-      const res = await fetch(`${API_URL}/api/messages`);
-      if (res.ok) {
-        // API returns newest→oldest; reverse for chronological display.
-        const list = ((await res.json()) as Message[]).reverse();
-        list.forEach(harvestPerks);
-        messages.value = list;
-      }
-    } finally {
-      loading.value = false;
-    }
-  }
-
-  /** Add a message pushed over the WebSocket (new thread or reply), with dedup. */
-  function addIncoming(raw: Message & { parentId: string | null }): void {
-    if (!raw || !raw.id) return;
-
-    // Always record the author's perks, even for replies.
-    setPerks(raw.authorIp, raw.authorPerks);
-
-    if (raw.parentId == null) {
-      // New top-level thread.
-      if (messages.value.some((m) => m.id === raw.id)) return;
-      messages.value.push({ ...raw, replies: raw.replies ?? [] });
-      return;
-    }
-
-    // Reply: attach to its parent thread if we have it.
-    const parent = messages.value.find((m) => m.id === raw.parentId);
-    if (!parent) return; // thread not loaded; reconnect-resync will reconcile
-    if (parent.replies.some((r) => r.id === raw.id)) return;
-    parent.replies.push({
-      id: raw.id,
-      content: raw.content,
-      authorIp: raw.authorIp,
-      createdAt: raw.createdAt,
-      parentId: raw.parentId,
-      authorPerks: raw.authorPerks,
-      richMode: raw.richMode,
-      richContent: raw.richContent,
-      attachments: raw.attachments,
-    });
-  }
-
-  const { fetchWallet, ip: myIp } = useWallet();
-
-  // The viewer's own perks (drives NoAds gating, rich-composer unlocks, etc.).
-  // myPerks is module-level; this ref is the same reference.
-
-  async function fetchMyPerks(): Promise<void> {
-    return refreshMyPerks();
-  }
-
-  const { stats, connected, sendTyping } = useRealtime({
-    onMessage: addIncoming,
-    onReconnect: () => {
-      fetchMessages();
-      fetchWallet();
-      fetchMyPerks();
-    },
-    onWallet: applyWalletFrame,
-    onPerks: (data: { ip: string; perks: Perks }) => {
-      applyPerksFrame(data);
-      // If it's about us, update myPerks too (viewer-scoped perks like NoAds).
-      if (myIp.value && data.ip === myIp.value) myPerks.value = data.perks ?? {};
-    },
-    onAds: () => bumpAdsRevision(), // a user ad entered rotation → refetch
-    onAlert: (data) => handleAlertFrame(data), // paid global audio alert
-  });
-
-  interface PostExtras {
-    parentId?: string;
-    richMode?: 'htmlcss' | 'js';
-    richContent?: string;
-    attachmentIds?: string[];
-  }
-
-  async function postMessage(content: string, extras: PostExtras = {}): Promise<boolean> {
-    const hasRich = !!extras.richContent && !!extras.richMode;
-    const hasFiles = !!extras.attachmentIds?.length;
-    // Allow empty text only when there's rich content or an attachment.
-    if (!content.trim() && !hasRich && !hasFiles) return false;
-    sending.value = true;
-    try {
-      const res = await fetch(`${API_URL}/api/messages`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          content: content.trim() || ' ',
-          parentId: extras.parentId,
-          richMode: extras.richMode,
-          richContent: extras.richContent,
-          attachmentIds: extras.attachmentIds,
-        }),
-      });
-      if (!res.ok) return false;
-      // The created message comes back via the WebSocket broadcast, so no
-      // re-fetch here. Fallback: if the socket is down, add it locally.
-      if (!connected.value) {
-        const created = (await res.json()) as Message;
-        addIncoming(
-          created.parentId == null ? { ...created, replies: [] } : created
-        );
-      }
-      return true;
-    } finally {
-      sending.value = false;
-    }
-  }
-
-  onMounted(() => {
-    fetchMessages();
-    fetchWallet();
-    fetchMyPerks();
-  });
-
-  return {
-    messages,
-    loading,
-    sending,
-    postMessage,
-    stats,
-    connected,
-    sendTyping,
-    get myPerks() { return myPerks; },
-    myIp,
-    fetchMyPerks,
-  };
-}
+import { ref, onMounted } from 'vue';
+import { useRealtime } from './useRealtime';
+import { useWallet, applyWalletFrame } from './useWallet';
+import { setPerks, applyPerksFrame, type Perks } from './usePerks';
+import { bumpAdsRevision } from './useAds';
+import { handleAlertFrame } from './useAlert';
+
+// Module-level singleton so any component can read the viewer's own perks
+// without prop-drilling (e.g. SendButton, AdBand).
+export const myPerks = ref<Perks>({});
+
+export function useMyPerks() {
+  return { myPerks };
+}
+
+export interface GeoInfo {
+  country: string;
+  countryCode: string;
+  city: string;
+  lat?: number;
+  lon?: number;
+}
+
+export interface Reply {
+  id: string;
+  content: string;
+  authorIp: string;
+  createdAt: string;
+  parentId?: string | null;
+  authorPerks?: Perks;
+  authorGeo?: GeoInfo | null;
+  richMode?: 'none' | 'htmlcss' | 'js';
+  richContent?: string | null;
+  attachments?: Attachment[];
+}
+
+export interface Attachment {
+  id: string;
+  filename: string;
+  mimeType: string;
+  size: number;
+}
+
+export interface Message extends Reply {
+  parentId: string | null;
+  replies: Reply[];
+}
+
+const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
+
+/**
+ * Refresh the viewer's own perks from the server (callable from anywhere).
+ * The backend computes the perks (entitlement.kind → Perks) and returns them
+ * precomputed as `myPerks`, so we just adopt them — no client-side re-derivation.
+ */
+export async function refreshMyPerks(): Promise<void> {
+  try {
+    const res = await fetch(`${API_URL}/api/shop/me`);
+    if (!res.ok) return;
+    const { myPerks: p } = (await res.json()) as { myPerks?: Perks };
+    myPerks.value = p ?? {};
+    const { ip } = useWallet();
+    if (ip.value) setPerks(ip.value, myPerks.value);
+  } catch {
+    /* ignore */
+  }
+}
+
+export function useMessages() {
+  const messages = ref<Message[]>([]);
+  const loading = ref(false);
+  const sending = ref(false);
+
+  /** Seed the perks store from a message + its replies. */
+  function harvestPerks(m: Message): void {
+    setPerks(m.authorIp, m.authorPerks);
+    for (const r of m.replies ?? []) setPerks(r.authorIp, r.authorPerks);
+  }
+
+  async function fetchMessages(): Promise<void> {
+    loading.value = true;
+    try {
+      const res = await fetch(`${API_URL}/api/messages`);
+      if (res.ok) {
+        // API returns newest→oldest; reverse for chronological display.
+        const list = ((await res.json()) as Message[]).reverse();
+        list.forEach(harvestPerks);
+        messages.value = list;
+      }
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  /** Add a message pushed over the WebSocket (new thread or reply), with dedup. */
+  function addIncoming(raw: Message & { parentId: string | null }): void {
+    if (!raw || !raw.id) return;
+
+    // Always record the author's perks, even for replies.
+    setPerks(raw.authorIp, raw.authorPerks);
+
+    if (raw.parentId == null) {
+      // New top-level thread.
+      if (messages.value.some((m) => m.id === raw.id)) return;
+      messages.value.push({ ...raw, replies: raw.replies ?? [] });
+      return;
+    }
+
+    // Reply: attach to its parent thread if we have it.
+    const parent = messages.value.find((m) => m.id === raw.parentId);
+    if (!parent) return; // thread not loaded; reconnect-resync will reconcile
+    if (parent.replies.some((r) => r.id === raw.id)) return;
+    parent.replies.push({
+      id: raw.id,
+      content: raw.content,
+      authorIp: raw.authorIp,
+      createdAt: raw.createdAt,
+      parentId: raw.parentId,
+      authorPerks: raw.authorPerks,
+      authorGeo: raw.authorGeo,
+      richMode: raw.richMode,
+      richContent: raw.richContent,
+      attachments: raw.attachments,
+    });
+  }
+
+  const { fetchWallet, ip: myIp } = useWallet();
+
+  // The viewer's own perks (drives NoAds gating, rich-composer unlocks, etc.).
+  // myPerks is module-level; this ref is the same reference.
+
+  async function fetchMyPerks(): Promise<void> {
+    return refreshMyPerks();
+  }
+
+  const { stats, connected, sendTyping } = useRealtime({
+    onMessage: addIncoming,
+    onReconnect: () => {
+      fetchMessages();
+      fetchWallet();
+      fetchMyPerks();
+    },
+    onWallet: applyWalletFrame,
+    onPerks: (data: { ip: string; perks: Perks }) => {
+      applyPerksFrame(data);
+      // If it's about us, update myPerks too (viewer-scoped perks like NoAds).
+      if (myIp.value && data.ip === myIp.value) myPerks.value = data.perks ?? {};
+    },
+    onAds: () => bumpAdsRevision(), // a user ad entered rotation → refetch
+    onAlert: (data) => handleAlertFrame(data), // paid global audio alert
+  });
+
+  interface PostExtras {
+    parentId?: string;
+    richMode?: 'htmlcss' | 'js';
+    richContent?: string;
+    attachmentIds?: string[];
+  }
+
+  async function postMessage(content: string, extras: PostExtras = {}): Promise<boolean> {
+    const hasRich = !!extras.richContent && !!extras.richMode;
+    const hasFiles = !!extras.attachmentIds?.length;
+    // Allow empty text only when there's rich content or an attachment.
+    if (!content.trim() && !hasRich && !hasFiles) return false;
+    sending.value = true;
+    try {
+      const res = await fetch(`${API_URL}/api/messages`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          content: content.trim(),
+          parentId: extras.parentId,
+          richMode: extras.richMode,
+          richContent: extras.richContent,
+          attachmentIds: extras.attachmentIds,
+        }),
+      });
+      if (!res.ok) return false;
+      // The created message comes back via the WebSocket broadcast, so no
+      // re-fetch here. Fallback: if the socket is down, add it locally.
+      if (!connected.value) {
+        const created = (await res.json()) as Message;
+        addIncoming(
+          created.parentId == null ? { ...created, replies: [] } : created
+        );
+      }
+      return true;
+    } finally {
+      sending.value = false;
+    }
+  }
+
+  onMounted(() => {
+    fetchMessages();
+    fetchWallet();
+    fetchMyPerks();
+  });
+
+  // Note: viewer-own perks live in the module-level `myPerks` singleton; read
+  // them via `useMyPerks()` rather than off this return (consistency rule).
+  return {
+    messages,
+    loading,
+    sending,
+    postMessage,
+    stats,
+    connected,
+    sendTyping,
+    myIp,
+    fetchMyPerks,
+  };
+}

frontend/src/composables/useMeta.spec.ts

@@ -0,0 +1,20 @@
+import { describe, it, expect } from 'vitest';
+import { parseMeta, type ProductMeta } from './useMeta';
+
+describe('parseMeta (fonction réutilisable)', () => {
+  it('parse un JSON valide', () => {
+    const meta = parseMeta<ProductMeta>('{"plans":[{"id":"m","label":"Mensuel","price":499}]}');
+    expect(meta.plans?.[0].price).toBe(499);
+  });
+
+  it('renvoie le fallback sur null/undefined', () => {
+    expect(parseMeta(null)).toEqual({});
+    expect(parseMeta(undefined)).toEqual({});
+    expect(parseMeta(null, { plans: [] })).toEqual({ plans: [] });
+  });
+
+  it('renvoie le fallback sur JSON invalide (sans lever)', () => {
+    expect(parseMeta('{ pas du json }')).toEqual({});
+    expect(() => parseMeta('oops')).not.toThrow();
+  });
+});

frontend/src/composables/useMeta.ts

@@ -0,0 +1,28 @@
+/**
+ * Safe JSON parser for the `metaJson` strings carried by products and
+ * entitlements. Returns the fallback on any parse error instead of throwing,
+ * so callers can drop their repetitive try/catch + `any` casts.
+ */
+export function parseMeta<T = Record<string, unknown>>(
+  json: string | null | undefined,
+  fallback: T = {} as T,
+): T {
+  if (!json) return fallback;
+  try {
+    return JSON.parse(json) as T;
+  } catch {
+    return fallback;
+  }
+}
+
+/** Shape of a product's metaJson (all fields optional — depends on kind). */
+export interface ProductMeta {
+  designs?: { id: string; char: string }[];
+  positions?: string[];
+  plans?: { id: string; label: string; price: number }[];
+  durations?: { days: number; extra: number }[];
+  formats?: { id: string; label: string; extra: number }[];
+  char?: string;
+  label?: string;
+  includes?: string[];
+}

frontend/src/composables/usePerks.spec.ts

@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest';
+import { usePerks, setPerks, applyPerksFrame, type Perks } from './usePerks';
+
+describe('usePerks (logique d’état)', () => {
+  it('renvoie un objet vide pour une IP inconnue', () => {
+    expect(usePerks().perksFor('0.0.0.0')).toEqual({});
+  });
+
+  it('enregistre et relit les perks d’une IP', () => {
+    const perks: Perks = { skin: 'gold', pets: [{ char: '🔥', position: 'left' }] };
+    setPerks('1.1.1.1', perks);
+    expect(usePerks().perksFor('1.1.1.1')).toEqual(perks);
+  });
+
+  it('ignore un setPerks sans IP ou sans perks', () => {
+    setPerks('', { skin: 'gold' });
+    setPerks('2.2.2.2', null);
+    expect(usePerks().perksFor('2.2.2.2')).toEqual({});
+  });
+
+  it('applique un frame WS perks { ip, perks }', () => {
+    applyPerksFrame({ ip: '3.3.3.3', perks: { noads: true } });
+    expect(usePerks().perksFor('3.3.3.3')).toEqual({ noads: true });
+  });
+});

frontend/src/composables/usePerks.ts

@@ -1,43 +1,43 @@
-import { reactive } from 'vue';
-
-/**
- * Perks store (module-level singleton): maps an author IP → its visible perks.
- * Seeded from message payloads (authorPerks), updated live by WS `perks` frames,
- * and read by MessageItem to colour names / render pets for every author.
- */
-
-export type PetPosition = 'left' | 'right' | 'both';
-
-export interface Perks {
-  skin?: 'gold';
-  pets?: { char: string; position: PetPosition }[];
-  noads?: boolean;
-  badge?: boolean;
-  elementSkin?: boolean;
-  richHtmlcss?: boolean;
-  richJs?: boolean;
-  ipColors?: boolean;
-  sendSkins?: { id: string; char: string; label?: string }[];
-  noFileLimit?: boolean;
-  audioAlert?: boolean;
-}
-
-const map = reactive<Record<string, Perks>>({});
-
-/** Merge perks for one IP (from a message payload or a perks frame). */
-export function setPerks(ip: string, perks: Perks | undefined | null): void {
-  if (!ip || !perks) return;
-  map[ip] = perks;
-}
-
-/** Apply a WS `perks` frame: { ip, perks }. */
-export function applyPerksFrame(data: { ip: string; perks: Perks }): void {
-  if (data?.ip) map[data.ip] = data.perks ?? {};
-}
-
-export function usePerks() {
-  function perksFor(ip: string): Perks {
-    return map[ip] ?? {};
-  }
-  return { perksFor, setPerks };
-}
+import { reactive } from 'vue';
+
+/**
+ * Perks store (module-level singleton): maps an author IP → its visible perks.
+ * Seeded from message payloads (authorPerks), updated live by WS `perks` frames,
+ * and read by MessageItem to colour names / render pets for every author.
+ */
+
+export type PetPosition = 'left' | 'right' | 'both';
+
+export interface Perks {
+  skin?: 'gold';
+  pets?: { char: string; position: PetPosition }[];
+  noads?: boolean;
+  badge?: boolean;
+  elementSkin?: boolean;
+  richHtmlcss?: boolean;
+  richJs?: boolean;
+  ipColors?: boolean;
+  sendSkins?: { id: string; char: string; label?: string }[];
+  noFileLimit?: boolean;
+  audioAlert?: boolean;
+}
+
+const map = reactive<Record<string, Perks>>({});
+
+/** Merge perks for one IP (from a message payload or a perks frame). */
+export function setPerks(ip: string, perks: Perks | undefined | null): void {
+  if (!ip || !perks) return;
+  map[ip] = perks;
+}
+
+/** Apply a WS `perks` frame: { ip, perks }. */
+export function applyPerksFrame(data: { ip: string; perks: Perks }): void {
+  if (data?.ip) map[data.ip] = data.perks ?? {};
+}
+
+export function usePerks() {
+  function perksFor(ip: string): Perks {
+    return map[ip] ?? {};
+  }
+  return { perksFor, setPerks };
+}

frontend/src/composables/useRealtime.ts

@@ -1,125 +1,125 @@
-import { ref, onMounted, onUnmounted } from 'vue';
-
-/** Mirror of the backend StatsSnapshot. */
-export interface Stats {
-  // live
-  connectedTabs: number;
-  typingNow: number;
-  lettersPerSec: number;
-  msgsPerMin: number;
-  // totals
-  messages: number;
-  replies: number;
-  charsSent: number;
-  lettersTyped: number;
-  uniqueIps: number;
-  longestMsg: number;
-  // derived
-  abandonRate: number;
-  avgLength: number;
-  moneyExtorted: number;
-}
-
-const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
-const WS_URL = API_URL.replace(/^http/, 'ws') + '/ws';
-
-const TYPING_FLUSH_MS = 400; // batch keystroke deltas before sending
-const RECONNECT_DELAY_MS = 1500;
-
-interface RealtimeHooks {
-  onMessage?: (raw: any) => void;
-  /** Called when the socket reconnects after a drop — use to resync state. */
-  onReconnect?: () => void;
-  /** Wallet update for THIS tab's IP (balance changed). */
-  onWallet?: (data: any) => void;
-  /** A visible perk changed for some IP (skin/pet) — update that author everywhere. */
-  onPerks?: (data: any) => void;
-  /** Ad inventory changed (e.g. a user bought a Cadre de Pub). */
-  onAds?: (data: any) => void;
-  /** A paid global audio alert was fired. */
-  onAlert?: (data: any) => void;
-}
-
-export function useRealtime(hooks: RealtimeHooks = {}) {
-  const stats = ref<Stats | null>(null);
-  const connected = ref(false);
-
-  let ws: WebSocket | null = null;
-  let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
-  let typingTimer: ReturnType<typeof setTimeout> | null = null;
-  let typingBuffer = 0;
-  let everConnected = false;
-  let closedByUs = false;
-
-  function connect(): void {
-    try {
-      ws = new WebSocket(WS_URL);
-    } catch {
-      scheduleReconnect();
-      return;
-    }
-
-    ws.onopen = () => {
-      connected.value = true;
-      if (everConnected) hooks.onReconnect?.();
-      everConnected = true;
-    };
-
-    ws.onmessage = (ev) => {
-      let msg: { type?: string; data?: any };
-      try {
-        msg = JSON.parse(ev.data);
-      } catch {
-        return;
-      }
-      if (msg.type === 'stats') stats.value = msg.data as Stats;
-      else if (msg.type === 'message') hooks.onMessage?.(msg.data);
-      else if (msg.type === 'wallet') hooks.onWallet?.(msg.data);
-      else if (msg.type === 'perks') hooks.onPerks?.(msg.data);
-      else if (msg.type === 'ads') hooks.onAds?.(msg.data);
-      else if (msg.type === 'alert') hooks.onAlert?.(msg.data);
-    };
-
-    ws.onclose = () => {
-      connected.value = false;
-      if (!closedByUs) scheduleReconnect();
-    };
-
-    ws.onerror = () => {
-      ws?.close();
-    };
-  }
-
-  function scheduleReconnect(): void {
-    if (reconnectTimer || closedByUs) return;
-    reconnectTimer = setTimeout(() => {
-      reconnectTimer = null;
-      connect();
-    }, RECONNECT_DELAY_MS);
-  }
-
-  /** Report keystrokes (delta ≥ 0). Marks this tab as "typing" and feeds the global counter. */
-  function sendTyping(delta: number): void {
-    typingBuffer += Math.max(0, delta);
-    if (typingTimer) return;
-    typingTimer = setTimeout(flushTyping, TYPING_FLUSH_MS);
-  }
-
-  function flushTyping(): void {
-    typingTimer = null;
-    if (ws && ws.readyState === WebSocket.OPEN) {
-      ws.send(JSON.stringify({ type: 'typing', delta: typingBuffer }));
-    }
-    typingBuffer = 0;
-  }
-
-  onMounted(connect);
-  onUnmounted(() => {
-    closedByUs = true;
-    if (reconnectTimer) clearTimeout(reconnectTimer);
-    if (typingTimer) clearTimeout(typingTimer);
-    ws?.close();
-  });
-
-  return { stats, connected, sendTyping };
-}
+import { ref, onMounted, onUnmounted } from 'vue';
+
+/** Mirror of the backend StatsSnapshot. */
+export interface Stats {
+  // live
+  connectedTabs: number;
+  typingNow: number;
+  lettersPerSec: number;
+  msgsPerMin: number;
+  // totals
+  messages: number;
+  replies: number;
+  charsSent: number;
+  lettersTyped: number;
+  uniqueIps: number;
+  longestMsg: number;
+  // derived
+  abandonRate: number;
+  avgLength: number;
+  moneyExtorted: number;
+}
+
+const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
+const WS_URL = API_URL.replace(/^http/, 'ws') + '/ws';
+
+const TYPING_FLUSH_MS = 400; // batch keystroke deltas before sending
+const RECONNECT_DELAY_MS = 1500;
+
+interface RealtimeHooks {
+  onMessage?: (raw: any) => void;
+  /** Called when the socket reconnects after a drop — use to resync state. */
+  onReconnect?: () => void;
+  /** Wallet update for THIS tab's IP (balance changed). */
+  onWallet?: (data: any) => void;
+  /** A visible perk changed for some IP (skin/pet) — update that author everywhere. */
+  onPerks?: (data: any) => void;
+  /** Ad inventory changed (e.g. a user bought a Cadre de Pub). */
+  onAds?: (data: any) => void;
+  /** A paid global audio alert was fired. */
+  onAlert?: (data: any) => void;
+}
+
+export function useRealtime(hooks: RealtimeHooks = {}) {
+  const stats = ref<Stats | null>(null);
+  const connected = ref(false);
+
+  let ws: WebSocket | null = null;
+  let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+  let typingTimer: ReturnType<typeof setTimeout> | null = null;
+  let typingBuffer = 0;
+  let everConnected = false;
+  let closedByUs = false;
+
+  function connect(): void {
+    try {
+      ws = new WebSocket(WS_URL);
+    } catch {
+      scheduleReconnect();
+      return;
+    }
+
+    ws.onopen = () => {
+      connected.value = true;
+      if (everConnected) hooks.onReconnect?.();
+      everConnected = true;
+    };
+
+    ws.onmessage = (ev) => {
+      let msg: { type?: string; data?: any };
+      try {
+        msg = JSON.parse(ev.data);
+      } catch {
+        return;
+      }
+      if (msg.type === 'stats') stats.value = msg.data as Stats;
+      else if (msg.type === 'message') hooks.onMessage?.(msg.data);
+      else if (msg.type === 'wallet') hooks.onWallet?.(msg.data);
+      else if (msg.type === 'perks') hooks.onPerks?.(msg.data);
+      else if (msg.type === 'ads') hooks.onAds?.(msg.data);
+      else if (msg.type === 'alert') hooks.onAlert?.(msg.data);
+    };
+
+    ws.onclose = () => {
+      connected.value = false;
+      if (!closedByUs) scheduleReconnect();
+    };
+
+    ws.onerror = () => {
+      ws?.close();
+    };
+  }
+
+  function scheduleReconnect(): void {
+    if (reconnectTimer || closedByUs) return;
+    reconnectTimer = setTimeout(() => {
+      reconnectTimer = null;
+      connect();
+    }, RECONNECT_DELAY_MS);
+  }
+
+  /** Report keystrokes (delta ≥ 0). Marks this tab as "typing" and feeds the global counter. */
+  function sendTyping(delta: number): void {
+    typingBuffer += Math.max(0, delta);
+    if (typingTimer) return;
+    typingTimer = setTimeout(flushTyping, TYPING_FLUSH_MS);
+  }
+
+  function flushTyping(): void {
+    typingTimer = null;
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify({ type: 'typing', delta: typingBuffer }));
+    }
+    typingBuffer = 0;
+  }
+
+  onMounted(connect);
+  onUnmounted(() => {
+    closedByUs = true;
+    if (reconnectTimer) clearTimeout(reconnectTimer);
+    if (typingTimer) clearTimeout(typingTimer);
+    ws?.close();
+  });
+
+  return { stats, connected, sendTyping };
+}

frontend/src/composables/useShop.ts

@@ -1,135 +1,133 @@
-import { ref } from 'vue';
-import { useWallet } from './useWallet';
-import { refreshMyPerks } from './useMessages';
-
-/** Marketplace client: catalogue, my entitlements, purchase flow. */
-
-export interface Product {
-  id: string;
-  category: string;
-  name: string;
-  subtitle?: string | null;
-  kind: string;
-  basePrice: number; // centi-credits
-  promoPrice?: number | null;
-  badge?: string | null;
-  stockLimit?: number | null;
-  stockSold: number;
-  sortOrder: number;
-  metaJson?: string | null;
-}
-
-export interface Entitlement {
-  id: string;
-  ip: string;
-  kind: string;
-  active: boolean;
-  expiresAt?: string | null;
-  metaJson?: string | null;
-  createdAt: string;
-}
-
-export interface PurchaseOptions {
-  plan?: 'monthly' | 'annual';
-  durationDays?: number;
-  format?: 'static' | 'gif';
-  url?: string;
-  petDesign?: string;
-  petChar?: string;
-  petPosition?: 'left' | 'right' | 'both';
-}
-
-const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
-
-export function useShop() {
-  const products = ref<Product[]>([]);
-  const entitlements = ref<Entitlement[]>([]);
-  const loading = ref(false);
-  const buying = ref<string | null>(null); // productId currently being purchased
-  const lastError = ref<string | null>(null);
-  const lastSuccess = ref<string | null>(null);
-
-  const { fetchWallet } = useWallet();
-
-  async function fetchProducts(): Promise<void> {
-    loading.value = true;
-    try {
-      const res = await fetch(`${API_URL}/api/shop/products`);
-      if (res.ok) products.value = (await res.json()) as Product[];
-    } finally {
-      loading.value = false;
-    }
-  }
-
-  async function fetchMe(): Promise<void> {
-    try {
-      const res = await fetch(`${API_URL}/api/shop/me`);
-      if (res.ok) {
-        const data = await res.json();
-        entitlements.value = data.entitlements ?? [];
-      }
-    } catch {
-      /* ignore */
-    }
-  }
-
-  function owns(kind: string): boolean {
-    return entitlements.value.some((e) => e.kind === kind && e.active);
-  }
-
-  function petCount(): number {
-    return entitlements.value.filter((e) => e.kind === 'pet' && e.active).length;
-  }
-
-  function ownedPetChars(): string[] {
-    return entitlements.value
-      .filter((e) => e.kind === 'pet' && e.active)
-      .map((e) => {
-        try { return (JSON.parse(e.metaJson ?? '{}') as any).char ?? ''; }
-        catch { return ''; }
-      })
-      .filter(Boolean);
-  }
-
-  async function purchase(productId: string, options: PurchaseOptions = {}): Promise<boolean> {
-    buying.value = productId;
-    lastError.value = null;
-    lastSuccess.value = null;
-    try {
-      const res = await fetch(`${API_URL}/api/shop/purchase`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ productId, options }),
-      });
-      const data = await res.json().catch(() => ({}));
-      if (!res.ok) {
-        lastError.value = data.error || 'Achat impossible';
-        return false;
-      }
-      lastSuccess.value = `Acheté : ${productId}`;
-      // Refresh wallet + my entitlements + myPerks (WS also pushes wallet, this is belt-and-braces).
-      await Promise.all([fetchWallet(), fetchMe(), fetchProducts(), refreshMyPerks()]);
-      return true;
-    } catch {
-      lastError.value = 'Réseau indisponible';
-      return false;
-    } finally {
-      buying.value = null;
-    }
-  }
-
-  return {
-    products,
-    entitlements,
-    loading,
-    buying,
-    lastError,
-    lastSuccess,
-    fetchProducts,
-    fetchMe,
-    owns,
-    petCount,
-    ownedPetChars,
-    purchase,
-  };
-}
+import { ref } from 'vue';
+import { useWallet } from './useWallet';
+import { refreshMyPerks } from './useMessages';
+import { parseMeta, type ProductMeta } from './useMeta';
+
+/** Marketplace client: catalogue, my entitlements, purchase flow. */
+
+export interface Product {
+  id: string;
+  category: string;
+  name: string;
+  subtitle?: string | null;
+  kind: string;
+  basePrice: number; // centi-credits
+  promoPrice?: number | null;
+  badge?: string | null;
+  stockLimit?: number | null;
+  stockSold: number;
+  sortOrder: number;
+  metaJson?: string | null;
+}
+
+export interface Entitlement {
+  id: string;
+  ip: string;
+  kind: string;
+  active: boolean;
+  expiresAt?: string | null;
+  metaJson?: string | null;
+  createdAt: string;
+}
+
+export interface PurchaseOptions {
+  plan?: 'monthly' | 'annual';
+  durationDays?: number;
+  format?: 'static' | 'gif';
+  url?: string;
+  petDesign?: string;
+  petChar?: string;
+  petPosition?: 'left' | 'right' | 'both';
+}
+
+const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
+
+export function useShop() {
+  const products = ref<Product[]>([]);
+  const entitlements = ref<Entitlement[]>([]);
+  const loading = ref(false);
+  const buying = ref<string | null>(null); // productId currently being purchased
+  const lastError = ref<string | null>(null);
+  const lastSuccess = ref<string | null>(null);
+
+  const { fetchWallet } = useWallet();
+
+  async function fetchProducts(): Promise<void> {
+    loading.value = true;
+    try {
+      const res = await fetch(`${API_URL}/api/shop/products`);
+      if (res.ok) products.value = (await res.json()) as Product[];
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function fetchMe(): Promise<void> {
+    try {
+      const res = await fetch(`${API_URL}/api/shop/me`);
+      if (res.ok) {
+        const data = await res.json();
+        entitlements.value = data.entitlements ?? [];
+      }
+    } catch {
+      /* ignore */
+    }
+  }
+
+  function owns(kind: string): boolean {
+    return entitlements.value.some((e) => e.kind === kind && e.active);
+  }
+
+  function petCount(): number {
+    return entitlements.value.filter((e) => e.kind === 'pet' && e.active).length;
+  }
+
+  function ownedPetChars(): string[] {
+    return entitlements.value
+      .filter((e) => e.kind === 'pet' && e.active)
+      .map((e) => parseMeta<ProductMeta>(e.metaJson).char ?? '')
+      .filter(Boolean);
+  }
+
+  async function purchase(productId: string, options: PurchaseOptions = {}): Promise<boolean> {
+    buying.value = productId;
+    lastError.value = null;
+    lastSuccess.value = null;
+    try {
+      const res = await fetch(`${API_URL}/api/shop/purchase`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ productId, options }),
+      });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        lastError.value = data.error || 'Achat impossible';
+        return false;
+      }
+      lastSuccess.value = `Acheté : ${productId}`;
+      // Refresh wallet + my entitlements + myPerks (WS also pushes wallet, this is belt-and-braces).
+      await Promise.all([fetchWallet(), fetchMe(), fetchProducts(), refreshMyPerks()]);
+      return true;
+    } catch {
+      lastError.value = 'Réseau indisponible';
+      return false;
+    } finally {
+      buying.value = null;
+    }
+  }
+
+  return {
+    products,
+    entitlements,
+    loading,
+    buying,
+    lastError,
+    lastSuccess,
+    fetchProducts,
+    fetchMe,
+    owns,
+    petCount,
+    ownedPetChars,
+    purchase,
+  };
+}

frontend/src/composables/useTheme.ts

@@ -0,0 +1,55 @@
+import { ref, provide, inject, type InjectionKey, type Ref } from 'vue';
+
+export type Theme = 'default' | 'bubble' | 'compact' | 'whatsapp';
+
+/** Which message layout a theme uses (drives the dynamic <component :is>). */
+export type Layout = 'classic' | 'bubble' | 'compact';
+
+export interface ThemeContext {
+  theme: Ref<Theme>;
+  setTheme: (t: Theme) => void;
+}
+
+export const THEME_KEY: InjectionKey<ThemeContext> = Symbol('xip-theme');
+
+const THEMES: Record<Theme, { label: string; emoji: string }> = {
+  default:  { label: 'Classique', emoji: '📋' },
+  bubble:   { label: 'Bulles',    emoji: '💬' },
+  compact:  { label: 'Compact',   emoji: '📐' },
+  whatsapp: { label: 'WhatsApp',  emoji: '💚' },
+};
+
+/**
+ * A theme = a message layout (component) + a CSS-variable palette (applied via a
+ * `data-theme` attribute on the app root). WhatsApp reuses the bubble layout with
+ * a green palette — no dedicated message component needed.
+ */
+const THEME_LAYOUT: Record<Theme, Layout> = {
+  default:  'classic',
+  bubble:   'bubble',
+  compact:  'compact',
+  whatsapp: 'bubble',
+};
+
+export function provideTheme() {
+  const saved = (localStorage.getItem('xip-theme') ?? 'default') as Theme;
+  const theme = ref<Theme>(THEMES[saved] ? saved : 'default');
+
+  function setTheme(t: Theme) {
+    theme.value = t;
+    localStorage.setItem('xip-theme', t);
+  }
+
+  const ctx: ThemeContext = { theme, setTheme };
+  provide(THEME_KEY, ctx);
+  return ctx;
+}
+
+export function useTheme(): ThemeContext {
+  return inject(THEME_KEY, {
+    theme: ref<Theme>('default'),
+    setTheme: () => {},
+  });
+}
+
+export { THEMES, THEME_LAYOUT };

frontend/src/composables/useWallet.spec.ts

@@ -0,0 +1,26 @@
+import { describe, it, expect } from 'vitest';
+import { useWallet, applyWalletFrame } from './useWallet';
+
+describe('useWallet (logique d’état)', () => {
+  it('affiche un solde réel converti depuis les centi-crédits', () => {
+    applyWalletFrame({ ip: '8.8.8.8', balance: 5000, freeMode: false });
+    const { displayBalance, freeMode, balanceRaw } = useWallet();
+    expect(freeMode.value).toBe(false);
+    expect(balanceRaw.value).toBe(5000);
+    // 5000 centi-crédits = 50,00 — séparateur dépendant de la locale ICU.
+    expect(displayBalance()).not.toBe('∞');
+    expect(displayBalance()).toContain('50');
+  });
+
+  it('affiche ∞ en mode gratuit (localhost / open bar)', () => {
+    applyWalletFrame({ ip: '::1', balance: Number.MAX_SAFE_INTEGER, freeMode: true });
+    const { displayBalance, freeMode } = useWallet();
+    expect(freeMode.value).toBe(true);
+    expect(displayBalance()).toBe('∞');
+  });
+
+  it('met à jour l’IP courante via le frame WS', () => {
+    applyWalletFrame({ ip: '9.9.9.9', balance: 0, freeMode: false });
+    expect(useWallet().ip.value).toBe('9.9.9.9');
+  });
+});

frontend/src/composables/useWallet.ts

@@ -1,72 +1,72 @@
-import { ref } from 'vue';
-
-/**
- * Wallet store (module-level singleton so the header, shop, and composer all
- * share one balance). Credits are CENTI-CREDITS server-side; `displayBalance`
- * converts to a human "crédits" number. Live updates arrive via the WS `wallet`
- * frame, routed here through useMessages' realtime hook (applyWalletFrame).
- */
-
-export interface WalletView {
-  ip: string;
-  balance: number; // centi-credits, or a huge sentinel in free mode
-  freeMode: boolean;
-}
-
-const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
-
-const ip = ref<string>('');
-const balanceRaw = ref<number>(0); // centi-credits
-const freeMode = ref<boolean>(false);
-const loaded = ref<boolean>(false);
-
-function apply(view: WalletView): void {
-  ip.value = view.ip;
-  balanceRaw.value = view.balance;
-  freeMode.value = view.freeMode;
-  loaded.value = true;
-}
-
-/** Called by the realtime `wallet` frame handler. */
-export function applyWalletFrame(data: WalletView): void {
-  apply(data);
-}
-
-async function fetchWallet(): Promise<void> {
-  try {
-    const res = await fetch(`${API_URL}/api/wallet`);
-    if (res.ok) apply((await res.json()) as WalletView);
-  } catch {
-    /* offline — keep last known */
-  }
-}
-
-async function topUp(): Promise<void> {
-  try {
-    const res = await fetch(`${API_URL}/api/wallet/topup`, { method: 'POST' });
-    if (res.ok) apply((await res.json()) as WalletView);
-  } catch {
-    /* ignore */
-  }
-}
-
-/** Human-readable balance ("∞" in free mode, else credits with 2 decimals). */
-function displayBalance(): string {
-  if (freeMode.value) return '∞';
-  return (balanceRaw.value / 100).toLocaleString('fr-FR', {
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2,
-  });
-}
-
-export function useWallet() {
-  return {
-    ip,
-    balanceRaw,
-    freeMode,
-    loaded,
-    fetchWallet,
-    topUp,
-    displayBalance,
-  };
-}
+import { ref } from 'vue';
+
+/**
+ * Wallet store (module-level singleton so the header, shop, and composer all
+ * share one balance). Credits are CENTI-CREDITS server-side; `displayBalance`
+ * converts to a human "crédits" number. Live updates arrive via the WS `wallet`
+ * frame, routed here through useMessages' realtime hook (applyWalletFrame).
+ */
+
+export interface WalletView {
+  ip: string;
+  balance: number; // centi-credits, or a huge sentinel in free mode
+  freeMode: boolean;
+}
+
+const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
+
+const ip = ref<string>('');
+const balanceRaw = ref<number>(0); // centi-credits
+const freeMode = ref<boolean>(false);
+const loaded = ref<boolean>(false);
+
+function apply(view: WalletView): void {
+  ip.value = view.ip;
+  balanceRaw.value = view.balance;
+  freeMode.value = view.freeMode;
+  loaded.value = true;
+}
+
+/** Called by the realtime `wallet` frame handler. */
+export function applyWalletFrame(data: WalletView): void {
+  apply(data);
+}
+
+async function fetchWallet(): Promise<void> {
+  try {
+    const res = await fetch(`${API_URL}/api/wallet`);
+    if (res.ok) apply((await res.json()) as WalletView);
+  } catch {
+    /* offline — keep last known */
+  }
+}
+
+async function topUp(): Promise<void> {
+  try {
+    const res = await fetch(`${API_URL}/api/wallet/topup`, { method: 'POST' });
+    if (res.ok) apply((await res.json()) as WalletView);
+  } catch {
+    /* ignore */
+  }
+}
+
+/** Human-readable balance ("∞" in free mode, else credits with 2 decimals). */
+function displayBalance(): string {
+  if (freeMode.value) return '∞';
+  return (balanceRaw.value / 100).toLocaleString('fr-FR', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  });
+}
+
+export function useWallet() {
+  return {
+    ip,
+    balanceRaw,
+    freeMode,
+    loaded,
+    fetchWallet,
+    topUp,
+    displayBalance,
+  };
+}

frontend/src/directives/clickOutside.ts

@@ -0,0 +1,28 @@
+import type { Directive } from 'vue';
+
+/**
+ * Directive `v-click-outside` : exécute le handler fourni quand un clic se
+ * produit en dehors de l'élément. Utile pour fermer modales / menus.
+ * Usage : <div v-click-outside="onClose">…</div>
+ */
+type Handler = (e: MouseEvent) => void;
+
+const map = new WeakMap<HTMLElement, (e: MouseEvent) => void>();
+
+export const vClickOutside: Directive<HTMLElement, Handler> = {
+  mounted(el, binding) {
+    const listener = (e: MouseEvent) => {
+      if (!el.contains(e.target as Node)) binding.value?.(e);
+    };
+    map.set(el, listener);
+    // `capture` + microtask delay évite de capter le clic qui a ouvert l'élément.
+    setTimeout(() => document.addEventListener('click', listener, true), 0);
+  },
+  unmounted(el) {
+    const listener = map.get(el);
+    if (listener) {
+      document.removeEventListener('click', listener, true);
+      map.delete(el);
+    }
+  },
+};

frontend/src/main.ts

@@ -2,16 +2,34 @@ import { createApp } from 'vue';
 import { createRouter, createWebHistory } from 'vue-router';
 import App from './App.vue';
 import HomePage from './views/HomePage.vue';
-import ShopPage from './views/ShopPage.vue';
+import { useFavorites } from './composables/useFavorites';
+import { vClickOutside } from './directives/clickOutside';
 import './style.css';
 
 const router = createRouter({
   history: createWebHistory(),
   routes: [
+    // Chat : page d'accueil, chargée d'emblée (premier rendu rapide).
     { path: '/', component: HomePage },
-    { path: '/shop', component: ShopPage },
-    { path: '/shop/p/:id', component: ShopPage },
+    // Vues secondaires : chargées à la demande (code-splitting) pour ne pas
+    // pénaliser le premier rendu.
+    { path: '/explorer', component: () => import('./views/ExplorerPage.vue') },
+    { path: '/message/:id', component: () => import('./views/MessageDetailPage.vue') },
+    { path: '/favoris', component: () => import('./views/FavorisPage.vue') },
+    {
+      path: '/mes-stats',
+      component: () => import('./views/MesStatsPage.vue'),
+      // Garde : pas de stats tant que la liste perso est vide.
+      beforeEnter: () => (useFavorites().all.value.length > 0 ? true : '/favoris'),
+    },
+    { path: '/shop', component: () => import('./views/ShopPage.vue') },
+    { path: '/shop/p/:id', component: () => import('./views/ProductDetailPage.vue') },
+    // Repli : toute URL inconnue renvoie au chat.
+    { path: '/:pathMatch(.*)*', redirect: '/' },
   ],
 });
 
-createApp(App).use(router).mount('#app');
+createApp(App)
+  .use(router)
+  .directive('click-outside', vClickOutside)
+  .mount('#app');

frontend/src/style.css

@@ -1,47 +1,116 @@
-/* latin-ext */
-@font-face {
-  font-family: 'Lato';
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/lato/v25/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Lato';
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/lato/v25/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Lato';
-  font-style: normal;
-  font-weight: 700;
-  src: url(https://fonts.gstatic.com/s/lato/v25/S6u9w4BMUTPHh6UVSwaPGR_p.woff2) format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Lato';
-  font-style: normal;
-  font-weight: 700;
-  src: url(https://fonts.gstatic.com/s/lato/v25/S6u9w4BMUTPHh6UVSwiPGQ.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-*, *::before, *::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html,
-body,
-#app {
-  height: 100%;
-  overflow: hidden;
-  background: #080808;
-  font-family: 'Lato', sans-serif;
-}
+/* latin-ext */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/lato/v25/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/lato/v25/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 700;
+  src: url(https://fonts.gstatic.com/s/lato/v25/S6u9w4BMUTPHh6UVSwaPGR_p.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 700;
+  src: url(https://fonts.gstatic.com/s/lato/v25/S6u9w4BMUTPHh6UVSwiPGQ.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* ── Thèmes : palette par variables CSS, basculée via [data-theme] sur la racine app ──
+   Le défaut = palette XIP sombre/néon. Chaque thème ne redéfinit que les surfaces
+   à fort impact (fond, header, bulles, bouton d'envoi). */
+:root {
+  --xip-app-bg: #080808;
+  --xip-bg: #090910;
+  --xip-header-bg: #0e0e16;
+  --xip-header-border: #1a1a2a;
+  --xip-bubble-other: #141422;
+  --xip-bubble-other-border: #222236;
+  --xip-bubble-sent: #0e1f30;
+  --xip-bubble-sent-border: #1a3a55;
+  --xip-accent: #00ddff;
+  --xip-send-bg: #004488;
+  --xip-send-fg: #00ddff;
+}
+
+[data-theme="whatsapp"] {
+  --xip-app-bg: #0b141a;
+  --xip-bg: #0b141a;
+  --xip-header-bg: #202c33;
+  --xip-header-border: #2a3942;
+  --xip-bubble-other: #202c33;
+  --xip-bubble-other-border: #2a3942;
+  --xip-bubble-sent: #005c4b;          /* vert sortant signature WhatsApp */
+  --xip-bubble-sent-border: #047857;
+  --xip-accent: #00a884;
+  --xip-send-bg: #00a884;
+  --xip-send-fg: #ffffff;
+}
+
+html,
+body,
+#app {
+  height: 100%;
+  overflow: hidden;
+  background: var(--xip-app-bg);
+  font-family: 'Lato', sans-serif;
+}
+
+/* ── Styles partagés des sections « Mes Persos » (shop/persos/*) ──
+   Globaux (non scopés) pour être réutilisés par chaque sous-section sans
+   dupliquer le CSS. Préfixe .pf- (persos-form) pour éviter les collisions. */
+.pf-section {
+  background: #101018;
+  border: 1px solid #20203a;
+  border-radius: 10px;
+  padding: 18px 20px;
+}
+.pf-section.pf-locked { opacity: 0.6; }
+.pf-title {
+  font-size: 14px; font-weight: bold; color: #ccccee;
+  margin: 0 0 6px; display: flex; align-items: center; gap: 10px;
+}
+.pf-sub { font-size: 11px; color: #5a5a80; margin: 0 0 12px; }
+.pf-lock {
+  font-size: 10px; font-weight: normal; color: #886644;
+  background: #1a1408; border: 1px solid #44330066; border-radius: 8px; padding: 2px 8px;
+}
+.pf-grid { display: flex; flex-wrap: wrap; gap: 8px; }
+.pf-tile {
+  display: flex; flex-direction: column; align-items: center; gap: 6px;
+  background: #141420; border: 1px solid #222234; border-radius: 8px;
+  padding: 10px 14px; cursor: pointer; transition: border-color 0.1s, background 0.1s;
+}
+.pf-tile:hover:not(:disabled) { background: #1a1a2e; border-color: #333355; }
+.pf-tile--active { border-color: #00ddff; background: #0a1a20; }
+.pf-tile:disabled { cursor: not-allowed; opacity: 0.5; }
+.pf-swatch {
+  width: 34px; height: 34px; border-radius: inherit;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 14px; font-weight: bold; border: 1px solid #ffffff10;
+}
+.pf-label { font-size: 10px; color: #8888aa; white-space: nowrap; }
+.pf-tile--active .pf-label { color: #00ddff; }
+.pf-dot { width: 20px; height: 20px; border-radius: 50%; border: 1px solid #ffffff22; }
+.pf-dot--auto { background: conic-gradient(#00ddff, #ff00cc, #00ee77, #ffdd44, #00ddff); }

frontend/src/views/ExplorerPage.vue

@@ -0,0 +1,192 @@
+<!-- Explorateur du catalogue distant de messages : recherche debouncée +
+     annulable (AbortController), filtre, défilement infini par curseur.
+     Gardé en cache (keep-alive) pour conserver recherche + scroll au retour. -->
+<template>
+  <div class="explorer">
+    <header class="exp-head">
+      <h1 class="exp-title">🔎 Explorer les messages</h1>
+      <div class="exp-controls">
+        <SearchBox v-model="query" placeholder="Rechercher dans les messages…" class="exp-search" />
+        <select v-model="filter" class="exp-filter" title="Filtrer">
+          <option value="all">Tous</option>
+          <option value="rich">Messages riches</option>
+          <option value="files">Avec pièce jointe</option>
+          <option value="geo">Géolocalisés</option>
+        </select>
+      </div>
+    </header>
+
+    <div class="exp-scroll">
+      <p v-if="error" class="exp-msg exp-msg--err">{{ error }}</p>
+
+      <ul class="exp-list">
+        <li v-for="m in visible" :key="m.id" class="exp-card">
+          <RouterLink :to="`/message/${m.id}`" class="exp-card-link">
+            <div class="exp-card-head">
+              <span class="exp-ip" :style="{ color: ipColor(m.authorIp) }">{{ m.authorIp }}</span>
+              <img
+                v-if="m.authorGeo?.countryCode"
+                :src="`https://flagcdn.com/16x12/${m.authorGeo.countryCode.toLowerCase()}.png`"
+                :alt="m.authorGeo.countryCode"
+                class="exp-flag"
+              />
+              <span class="exp-ts">{{ fmtDate(m.createdAt) }}</span>
+            </div>
+            <p class="exp-content">{{ preview(m) }}</p>
+            <div class="exp-tags">
+              <span v-if="m.richMode && m.richMode !== 'none'" class="exp-tag">riche</span>
+              <span v-if="m.attachments?.length" class="exp-tag">📎 {{ m.attachments.length }}</span>
+              <span v-if="m.replies?.length" class="exp-tag">↩ {{ m.replies.length }}</span>
+            </div>
+          </RouterLink>
+          <FavButton :message="m" class="exp-fav" />
+        </li>
+      </ul>
+
+      <p v-if="loading" class="exp-msg">Chargement…</p>
+      <p v-if="!loading && visible.length === 0" class="exp-msg">Aucun message trouvé.</p>
+
+      <!-- Sentinelle de défilement infini -->
+      <div ref="sentinel" class="exp-sentinel" />
+      <p v-if="!hasMore && visible.length > 0" class="exp-msg exp-end">— fin du catalogue —</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onActivated, onDeactivated, nextTick } from 'vue';
+import type { Message } from '@/composables/useMessages';
+import { getIpColor } from '@/composables/ipColor';
+import SearchBox from '@/components/SearchBox.vue';
+import FavButton from '@/components/FavButton.vue';
+
+// Nom requis pour le keep-alive (App.vue `include="ExplorerPage"`).
+defineOptions({ name: 'ExplorerPage' });
+
+const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
+const PAGE = 20;
+
+const query = ref('');
+const filter = ref<'all' | 'rich' | 'files' | 'geo'>('all');
+const items = ref<Message[]>([]);
+const cursor = ref<string | null>(null);
+const hasMore = ref(true);
+const loading = ref(false);
+const error = ref<string | null>(null);
+
+let controller: AbortController | null = null;
+
+/** Filtre client appliqué par-dessus la recherche serveur. */
+const visible = computed(() => {
+  switch (filter.value) {
+    case 'rich': return items.value.filter((m) => m.richMode && m.richMode !== 'none');
+    case 'files': return items.value.filter((m) => (m.attachments?.length ?? 0) > 0);
+    case 'geo': return items.value.filter((m) => !!m.authorGeo?.countryCode);
+    default: return items.value;
+  }
+});
+
+async function load(reset: boolean): Promise<void> {
+  // Annule toute requête en vol (recherche/page précédente).
+  controller?.abort();
+  controller = new AbortController();
+  const mine = controller;
+
+  if (reset) { items.value = []; cursor.value = null; hasMore.value = true; }
+  if (!hasMore.value && !reset) return;
+
+  loading.value = true;
+  error.value = null;
+  try {
+    const params = new URLSearchParams({ limit: String(PAGE) });
+    if (query.value.trim()) params.set('q', query.value.trim());
+    if (cursor.value && !reset) params.set('before', cursor.value);
+
+    const res = await fetch(`${API_URL}/api/messages?${params}`, { signal: mine.signal });
+    if (!res.ok) throw new Error('Erreur réseau');
+    const data = (await res.json()) as { items: Message[]; nextCursor: string | null; hasMore: boolean };
+
+    // Si une requête plus récente a démarré entre-temps, on ignore ce résultat.
+    if (mine.signal.aborted) return;
+
+    items.value = reset ? data.items : [...items.value, ...data.items];
+    cursor.value = data.nextCursor;
+    hasMore.value = data.hasMore;
+  } catch (e) {
+    if ((e as Error).name !== 'AbortError') error.value = 'Impossible de charger les messages.';
+  } finally {
+    if (mine === controller) loading.value = false;
+  }
+}
+
+// Nouvelle recherche → on repart de zéro (la valeur arrive déjà debouncée du SearchBox).
+watch(query, () => { void load(true); });
+
+// ── Défilement infini ──
+const sentinel = ref<HTMLElement | null>(null);
+let observer: IntersectionObserver | null = null;
+
+function setupObserver(): void {
+  if (observer || !sentinel.value) return;
+  observer = new IntersectionObserver((entries) => {
+    if (entries[0]?.isIntersecting && !loading.value && hasMore.value) void load(false);
+  }, { rootMargin: '200px' });
+  observer.observe(sentinel.value);
+}
+
+onMounted(async () => {
+  await load(true);
+  await nextTick();
+  setupObserver();
+});
+onActivated(() => setupObserver());
+onDeactivated(() => { observer?.disconnect(); observer = null; });
+
+function ipColor(ip: string): string { return getIpColor(ip); }
+function fmtDate(d: string): string {
+  return new Date(d).toLocaleString('fr-FR', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' });
+}
+function preview(m: Message): string {
+  if (m.richMode && m.richMode !== 'none') return m.content?.trim() || '[message riche]';
+  return m.content || '[vide]';
+}
+</script>
+
+<style scoped>
+.explorer { height: 100%; display: flex; flex-direction: column; background: var(--xip-app-bg, #08080e); }
+.exp-head { flex-shrink: 0; padding: 16px 20px 12px; border-bottom: 1px solid #1a1a2a; }
+.exp-title { font-family: Arial, sans-serif; font-size: 17px; color: #ccccee; margin: 0 0 12px; }
+.exp-controls { display: flex; gap: 10px; }
+.exp-search { flex: 1; }
+.exp-filter {
+  background: #141420; border: 1px solid #222234; border-radius: 23px;
+  color: #aaaacc; font-size: 12px; padding: 0 14px; outline: none; cursor: pointer;
+}
+
+.exp-scroll { flex: 1; overflow-y: auto; padding: 14px 20px; }
+.exp-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
+.exp-card {
+  position: relative;
+  background: #101018; border: 1px solid #20203a; border-radius: 10px; padding: 12px 14px;
+}
+.exp-card-link { text-decoration: none; display: block; }
+.exp-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
+.exp-ip { font-family: 'Courier New', monospace; font-size: 12px; font-weight: bold; }
+.exp-flag { width: 16px; height: 12px; object-fit: cover; border-radius: 2px; }
+.exp-ts { margin-left: auto; font-size: 10px; color: #44445a; font-family: 'Courier New', monospace; }
+.exp-content {
+  font-family: Arial, sans-serif; font-size: 13px; color: #c0c0c0; margin: 0;
+  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
+}
+.exp-tags { display: flex; gap: 6px; margin-top: 8px; }
+.exp-tag {
+  font-family: Arial, sans-serif; font-size: 9px; color: #6688aa;
+  background: #0c1622; border: 1px solid #16324a; border-radius: 6px; padding: 1px 6px;
+}
+.exp-fav { position: absolute; top: 10px; right: 10px; font-size: 15px; }
+
+.exp-msg { text-align: center; color: #55557a; font-family: Arial, sans-serif; font-size: 12px; padding: 16px; }
+.exp-msg--err { color: #ff7788; }
+.exp-end { color: #33334d; }
+.exp-sentinel { height: 1px; }
+</style>

frontend/src/views/FavorisPage.vue

@@ -0,0 +1,162 @@
+<!-- Liste personnelle « Favoris » : éléments enregistrés (localStorage),
+     éditables (note, commentaire, statut) via une modale, retirables. -->
+<template>
+  <div class="favs">
+    <header class="favs-head">
+      <h1 class="favs-title">⭐ Mes favoris <span class="favs-count">{{ all.length }}</span></h1>
+      <div class="favs-actions">
+        <RouterLink v-if="all.length" to="/mes-stats" class="btn-stats">📊 Voir mes stats</RouterLink>
+        <button v-if="all.length" class="btn-clear" type="button" @click="clear">Tout vider</button>
+      </div>
+    </header>
+
+    <div class="favs-scroll">
+      <div v-if="all.length === 0" class="favs-empty">
+        <p>Aucun favori pour l'instant.</p>
+        <RouterLink to="/explorer" class="btn-explore">🔎 Explorer des messages</RouterLink>
+      </div>
+
+      <ul v-else class="favs-list">
+        <li v-for="f in all" :key="f.id" class="fav-card">
+          <div class="fav-main">
+            <div class="fav-meta">
+              <RouterLink :to="`/message/${f.id}`" class="fav-ip" :style="{ color: ipColor(f.authorIp) }">{{ f.authorIp }}</RouterLink>
+              <span class="fav-status" :class="`fav-status--${f.status}`">{{ statusLabel(f.status) }}</span>
+              <span v-if="f.rating" class="fav-rating">{{ '★'.repeat(f.rating) }}<span class="dim">{{ '★'.repeat(5 - f.rating) }}</span></span>
+            </div>
+            <p class="fav-content">{{ f.content }}</p>
+            <p v-if="f.note" class="fav-note">📝 {{ f.note }}</p>
+          </div>
+          <div class="fav-buttons">
+            <button class="fav-edit" type="button" @click="openEdit(f.id)">✏️</button>
+            <button class="fav-del" type="button" @click="remove(f.id)">🗑️</button>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <!-- Modale d'édition (Teleport + slots) -->
+    <Modal v-model:open="editOpen" :title="`Annoter ${editing?.authorIp ?? ''}`">
+      <div v-if="editing" class="edit">
+        <p class="edit-content">« {{ editing.content }} »</p>
+
+        <label class="edit-label">Note</label>
+        <div class="stars">
+          <button
+            v-for="n in 5"
+            :key="n"
+            class="star"
+            :class="{ on: n <= draftRating }"
+            type="button"
+            @click="draftRating = n === draftRating ? 0 : n"
+          >★</button>
+        </div>
+
+        <label class="edit-label">Statut</label>
+        <select v-model="draftStatus" class="edit-select">
+          <option value="a-lire">À lire</option>
+          <option value="lu">Lu</option>
+          <option value="top">Coup de cœur</option>
+        </select>
+
+        <label class="edit-label">Commentaire</label>
+        <textarea v-model="draftNote" class="edit-note" rows="3" placeholder="Ton annotation…" />
+
+        <div class="edit-foot">
+          <button class="btn-save" type="button" @click="save">Enregistrer</button>
+        </div>
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useFavorites, type FavStatus } from '@/composables/useFavorites';
+import { getIpColor } from '@/composables/ipColor';
+import Modal from '@/components/Modal.vue';
+
+const { all, remove, clear, setNote, setRating, setStatus } = useFavorites();
+
+const editOpen = ref(false);
+const editingId = ref<string | null>(null);
+const editing = computed(() => all.value.find((f) => f.id === editingId.value) ?? null);
+
+const draftNote = ref('');
+const draftRating = ref(0);
+const draftStatus = ref<FavStatus>('a-lire');
+
+function openEdit(id: string): void {
+  const f = all.value.find((x) => x.id === id);
+  if (!f) return;
+  editingId.value = id;
+  draftNote.value = f.note;
+  draftRating.value = f.rating;
+  draftStatus.value = f.status;
+  editOpen.value = true;
+}
+
+function save(): void {
+  if (!editingId.value) return;
+  setNote(editingId.value, draftNote.value);
+  setRating(editingId.value, draftRating.value);
+  setStatus(editingId.value, draftStatus.value);
+  editOpen.value = false;
+}
+
+function ipColor(ip: string): string { return getIpColor(ip); }
+function statusLabel(s: FavStatus): string {
+  return s === 'lu' ? 'Lu' : s === 'top' ? 'Coup de cœur' : 'À lire';
+}
+</script>
+
+<style scoped>
+.favs { height: 100%; display: flex; flex-direction: column; background: var(--xip-app-bg, #08080e); }
+.favs-head {
+  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
+  padding: 16px 20px; border-bottom: 1px solid #1a1a2a;
+}
+.favs-title { font-family: Arial, sans-serif; font-size: 17px; color: #ccccee; margin: 0; }
+.favs-count { font-size: 13px; color: #ffcc44; margin-left: 6px; }
+.favs-actions { display: flex; gap: 10px; }
+.btn-stats { font-size: 12px; color: #00ddff; text-decoration: none; border: 1px solid #00aaff44; border-radius: 14px; padding: 6px 12px; }
+.btn-stats:hover { background: #00aaff14; }
+.btn-clear { font-size: 12px; color: #ff6655; background: #2a1010; border: 1px solid #882222; border-radius: 14px; padding: 6px 12px; cursor: pointer; }
+
+.favs-scroll { flex: 1; overflow-y: auto; padding: 16px 20px; }
+.favs-empty { text-align: center; color: #55557a; font-family: Arial, sans-serif; padding: 50px 0; }
+.btn-explore { display: inline-block; margin-top: 14px; color: #00ddff; text-decoration: none; border: 1px solid #00aaff44; border-radius: 16px; padding: 8px 18px; }
+.btn-explore:hover { background: #00aaff14; }
+
+.favs-list { list-style: none; display: flex; flex-direction: column; gap: 10px; max-width: 720px; margin: 0 auto; }
+.fav-card {
+  display: flex; gap: 12px; align-items: flex-start;
+  background: #101018; border: 1px solid #20203a; border-radius: 10px; padding: 12px 14px;
+}
+.fav-main { flex: 1; min-width: 0; }
+.fav-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; flex-wrap: wrap; }
+.fav-ip { font-family: 'Courier New', monospace; font-size: 12px; font-weight: bold; text-decoration: none; }
+.fav-status { font-size: 9px; padding: 1px 7px; border-radius: 6px; font-family: Arial, sans-serif; }
+.fav-status--a-lire { color: #8888aa; background: #16162a; }
+.fav-status--lu { color: #33aa77; background: #0e2018; }
+.fav-status--top { color: #ffcc44; background: #2a2206; }
+.fav-rating { font-size: 11px; color: #ffcc44; }
+.fav-rating .dim { color: #333; }
+.fav-content { font-family: Arial, sans-serif; font-size: 13px; color: #c0c0c0; margin: 0; word-break: break-word; }
+.fav-note { font-family: Arial, sans-serif; font-size: 11px; color: #6688aa; margin: 6px 0 0; font-style: italic; }
+.fav-buttons { display: flex; flex-direction: column; gap: 6px; }
+.fav-edit, .fav-del { background: #141420; border: 1px solid #222234; border-radius: 8px; cursor: pointer; padding: 4px 8px; font-size: 13px; }
+.fav-edit:hover, .fav-del:hover { background: #1c1c2e; }
+
+/* Modale d'édition */
+.edit-content { font-family: Arial, sans-serif; font-size: 12px; color: #8899aa; font-style: italic; margin: 0 0 16px; }
+.edit-label { display: block; font-family: Arial, sans-serif; font-size: 11px; color: #6a6a90; margin: 12px 0 5px; text-transform: uppercase; letter-spacing: 0.5px; }
+.stars { display: flex; gap: 4px; }
+.star { background: none; border: none; cursor: pointer; font-size: 22px; color: #333; padding: 0; }
+.star.on { color: #ffcc44; }
+.edit-select { width: 100%; background: #141420; border: 1px solid #222234; border-radius: 6px; color: #ccccdd; font-size: 13px; padding: 8px 10px; outline: none; }
+.edit-note { width: 100%; box-sizing: border-box; background: #141420; border: 1px solid #222234; border-radius: 6px; color: #ccccdd; font-family: Arial, sans-serif; font-size: 13px; padding: 8px 10px; outline: none; resize: vertical; }
+.edit-foot { margin-top: 18px; text-align: right; }
+.btn-save { background: #004488; border: 1px solid #0066aa; color: #00ddff; font-size: 13px; font-weight: bold; padding: 8px 18px; border-radius: 18px; cursor: pointer; }
+.btn-save:hover { background: #005599; }
+</style>

frontend/src/views/HomePage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="xip-app">
+  <div class="xip-app" :data-theme="theme">
     <!-- Bandeau de stats temps réel, toujours visible -->
     <StatsTicker :stats="stats" :connected="connected" />
 
@@ -17,69 +17,8 @@
           <button class="reply-cancel" @click="cancelReply" type="button">✕</button>
         </div>
 
-        <!-- Composer riche (HTML/CSS ou JS) -->
-        <div v-if="richMode !== 'none'" class="rich-composer">
-          <div class="rich-head">
-            <span class="rich-badge" :class="`rich-badge--${richMode}`">
-              {{ richMode === 'js' ? '⚡ JavaScript' : '🎨 HTML / CSS' }}
-            </span>
-            <button class="rich-close" @click="richMode = 'none'" type="button">✕ texte simple</button>
-          </div>
-          <textarea
-            v-model="richDraft"
-            class="rich-textarea"
-            :placeholder="richMode === 'js' ? '<script>document.body.style.background=&quot;lime&quot;<\/script>' : '<h1 style=&quot;color:#0ff&quot;>Salut</h1>'"
-            rows="4"
-          />
-        </div>
-
-        <!-- Barre de saisie -->
-        <div class="input-bar">
-          <!-- Bouton mode riche (si débloqué) -->
-          <button
-            v-if="myPerks.richHtmlcss || myPerks.richJs"
-            class="icon-btn"
-            :title="richMenuTitle"
-            @click="cycleRichMode"
-            type="button"
-          >{{ richMode === 'none' ? '🎨' : richMode === 'htmlcss' ? '🎨' : '⚡' }}</button>
-
-          <!-- Bouton pièce jointe -->
-          <button class="icon-btn" title="Joindre un fichier" @click="pickFile" type="button">📎</button>
-          <input ref="fileInput" type="file" hidden @change="onFileSelected" />
-
-          <!-- Bouton alerte audio (si débloqué) -->
-          <button
-            v-if="myPerks.audioAlert"
-            class="icon-btn icon-btn--alert"
-            :title="alertMsg || 'Déclencher l\'alerte audio générale'"
-            @click="triggerAlert"
-            type="button"
-          >🔊</button>
-
-          <div class="field-wrap">
-            <input
-              v-model="draft"
-              class="input-field"
-              type="text"
-              placeholder="Entrez un message..."
-              :maxlength="267"
-              @input="onInput"
-              @keydown.enter.exact.prevent="submit"
-            />
-            <span class="char-counter" :class="{ warn: draft.length > 240 }">{{ draft.length }}/267</span>
-          </div>
-          <SendButton :disabled="!canSend || sending" @send="submit" />
-        </div>
-
-        <!-- Pièces jointes en attente -->
-        <div v-if="pendingFiles.length" class="pending-files">
-          <span v-for="f in pendingFiles" :key="f.id" class="pending-chip">
-            📎 {{ f.filename }} ({{ kb(f.size) }})
-            <button @click="removePending(f.id)" type="button">✕</button>
-          </span>
-        </div>
-        <div v-if="uploadError" class="upload-error">{{ uploadError }}</div>
+        <!-- Composer (texte / riche / pièces jointes / envoi) -->
+        <ChatComposer :replying-to="replyingTo" @clear-reply="cancelReply" />
       </div>
     </div>
   </div>
@@ -87,18 +26,18 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue';
-import ChatHeader  from '@/components/ChatHeader.vue';
-import MessageList from '@/components/MessageList.vue';
-import SendButton  from '@/components/SendButton.vue';
-import StatsTicker from '@/components/StatsTicker.vue';
-import { useMessages } from '@/composables/useMessages';
-import { useAttachments } from '@/composables/useAttachments';
-import { useAlert } from '@/composables/useAlert';
+import ChatHeader   from '@/components/ChatHeader.vue';
+import MessageList  from '@/components/MessageList.vue';
+import ChatComposer from '@/components/ChatComposer.vue';
+import StatsTicker  from '@/components/StatsTicker.vue';
+import { useMessages, useMyPerks } from '@/composables/useMessages';
+import { provideTheme } from '@/composables/useTheme';
 import { useCustomStyles } from '@/composables/useCustomStyles';
 
-const { messages, sending, postMessage, stats, connected, sendTyping, myPerks, myIp } = useMessages();
-const { uploadFile, kb } = useAttachments();
-const { fireAlert } = useAlert();
+const { theme } = provideTheme();
+
+const { messages, stats, connected, myIp } = useMessages();
+const { myPerks } = useMyPerks();
 const { prefs: stylePrefs } = useCustomStyles();
 
 const chatBgStyle = computed(() => {
@@ -111,17 +50,7 @@ const chatBgStyle = computed(() => {
   };
 });
 
-const draft = ref('');
-
-// ── Alerte audio ──
-const alertMsg = ref('');
-async function triggerAlert(): Promise<void> {
-  const res = await fireAlert();
-  alertMsg.value = res.ok ? '' : res.error || '';
-  if (alertMsg.value) setTimeout(() => { alertMsg.value = ''; }, 3000);
-}
-
-// ── Réponse ──
+// ── Réponse (la bannière vit ici ; le composer envoie avec parentId) ──
 const replyingTo = ref<{ id: string; authorIp: string } | null>(null);
 function startReply(payload: { id: string; authorIp: string }): void {
   replyingTo.value = payload;
@@ -129,85 +58,15 @@ function startReply(payload: { id: string; authorIp: string }): void {
 function cancelReply(): void {
   replyingTo.value = null;
 }
-
-// ── Mode riche ──
-const richMode = ref<'none' | 'htmlcss' | 'js'>('none');
-const richDraft = ref('');
-const richMenuTitle = computed(() =>
-  myPerks.value.richJs ? 'Message riche : texte / HTML-CSS / JS' : 'Message riche : texte / HTML-CSS'
-);
-function cycleRichMode(): void {
-  // Cycle through the tiers the user owns.
-  if (richMode.value === 'none') richMode.value = myPerks.value.richHtmlcss ? 'htmlcss' : 'js';
-  else if (richMode.value === 'htmlcss') richMode.value = myPerks.value.richJs ? 'js' : 'none';
-  else richMode.value = 'none';
-}
-
-// ── Pièces jointes ──
-const fileInput = ref<HTMLInputElement | null>(null);
-const pendingFiles = ref<{ id: string; filename: string; size: number }[]>([]);
-const uploadError = ref<string | null>(null);
-function pickFile(): void {
-  uploadError.value = null;
-  fileInput.value?.click();
-}
-async function onFileSelected(e: Event): Promise<void> {
-  const input = e.target as HTMLInputElement;
-  const file = input.files?.[0];
-  input.value = '';
-  if (!file) return;
-  const res = await uploadFile(file);
-  if (res.ok) {
-    pendingFiles.value.push({ id: res.attachment.id, filename: res.attachment.filename, size: res.attachment.size });
-  } else {
-    uploadError.value = res.error;
-  }
-}
-function removePending(id: string): void {
-  pendingFiles.value = pendingFiles.value.filter((f) => f.id !== id);
-}
-
-// ── Frappe (stats) ──
-let prevLen = 0;
-function onInput(): void {
-  const len = draft.value.length;
-  const delta = len - prevLen;
-  prevLen = len;
-  sendTyping(delta > 0 ? delta : 0);
-}
-
-// ── Envoi ──
-const canSend = computed(() =>
-  !!draft.value.trim() || (richMode.value !== 'none' && !!richDraft.value.trim()) || pendingFiles.value.length > 0
-);
-
-async function submit(): Promise<void> {
-  if (!canSend.value) return;
-  const ok = await postMessage(draft.value, {
-    parentId: replyingTo.value?.id,
-    richMode: richMode.value !== 'none' && richDraft.value.trim() ? richMode.value : undefined,
-    richContent: richMode.value !== 'none' && richDraft.value.trim() ? richDraft.value : undefined,
-    attachmentIds: pendingFiles.value.map((f) => f.id),
-  });
-  if (ok) {
-    draft.value = '';
-    richDraft.value = '';
-    richMode.value = 'none';
-    pendingFiles.value = [];
-    replyingTo.value = null;
-    uploadError.value = null;
-    prevLen = 0;
-  }
-}
 </script>
 
 <style scoped>
 .xip-app {
   display: flex;
   flex-direction: column;
-  width: 100vw;
-  height: 100dvh;
-  background: #080808;
+  width: 100%;
+  height: 100%;
+  background: var(--xip-app-bg);
   overflow: hidden;
 }
 
@@ -223,7 +82,7 @@ async function submit(): Promise<void> {
   min-width: 0;
   display: flex;
   flex-direction: column;
-  background: #090910;
+  background: var(--xip-bg);
   overflow: hidden;
 }
 
@@ -241,76 +100,4 @@ async function submit(): Promise<void> {
 .reply-ip { font-family: 'Courier New', monospace; color: #00ccff; font-weight: bold; }
 .reply-cancel { background: none; border: none; color: #557; cursor: pointer; font-size: 13px; }
 .reply-cancel:hover { color: #aac; }
-
-/* ── Composer riche ── */
-.rich-composer {
-  flex-shrink: 0;
-  background: #0c0c16;
-  border-top: 1px solid #1a1a26;
-  padding: 8px 20px;
-}
-.rich-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
-.rich-badge { font-size: 11px; font-weight: bold; padding: 2px 8px; border-radius: 8px; }
-.rich-badge--htmlcss { color: #00ddaa; background: #062019; }
-.rich-badge--js { color: #ffcc44; background: #201a06; }
-.rich-close { background: none; border: none; color: #557; cursor: pointer; font-size: 11px; }
-.rich-close:hover { color: #aac; }
-.rich-textarea {
-  width: 100%; box-sizing: border-box; resize: vertical;
-  background: #141420; border: 1px solid #222234; border-radius: 8px;
-  color: #aaccbb; font-family: 'Courier New', monospace; font-size: 12px; padding: 8px 10px; outline: none;
-}
-
-/* ── Barre de saisie ── */
-.input-bar {
-  min-height: 70px;
-  flex-shrink: 0;
-  background: #0e0e16;
-  border-top: 1px solid #1a1a26;
-  display: flex;
-  align-items: center;
-  padding: 0 20px;
-  gap: 10px;
-}
-.icon-btn {
-  flex-shrink: 0;
-  width: 36px; height: 36px;
-  background: #141420; border: 1px solid #222234; border-radius: 50%;
-  font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
-  transition: background 0.15s;
-}
-.icon-btn:hover { background: #1c1c2e; }
-.icon-btn--alert { border-color: #aa3344; }
-.icon-btn--alert:hover { background: #1e1218; }
-
-.field-wrap { flex: 1; position: relative; display: flex; align-items: center; }
-.input-field {
-  flex: 1;
-  background: #141420;
-  border: 1px solid #222234;
-  border-radius: 23px;
-  padding: 12px 60px 12px 22px;
-  color: #aaaacc;
-  font-family: Arial, sans-serif;
-  font-size: 13px;
-  outline: none;
-  transition: border-color 0.15s;
-}
-.input-field::placeholder { color: #2a2a44; }
-.input-field:focus         { border-color: #333355; }
-.char-counter {
-  position: absolute; right: 16px;
-  font-family: 'Courier New', monospace; font-size: 10px; color: #33334d; pointer-events: none;
-}
-.char-counter.warn { color: #ff8844; }
-
-/* ── Pièces jointes en attente ── */
-.pending-files { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 10px; }
-.pending-chip {
-  display: inline-flex; align-items: center; gap: 6px;
-  background: #141420; border: 1px solid #222234; border-radius: 12px;
-  padding: 4px 10px; font-size: 11px; color: #aaccbb; font-family: Arial, sans-serif;
-}
-.pending-chip button { background: none; border: none; color: #66f; cursor: pointer; }
-.upload-error { flex-shrink: 0; padding: 0 20px 10px; color: #ff7788; font-size: 11px; font-family: Arial, sans-serif; }
 </style>

frontend/src/views/MesStatsPage.vue

@@ -0,0 +1,169 @@
+<!-- Synthèse dérivée de la liste personnelle (favoris). Tous les agrégats sont
+     des `computed` sur useFavorites().all → mise à jour automatique à chaque
+     ajout / retrait / modification. Accès gardé : redirige si aucun favori. -->
+<template>
+  <div class="stats">
+    <header class="stats-head">
+      <h1 class="stats-title">📊 Mes statistiques</h1>
+      <RouterLink to="/favoris" class="btn-back">← Mes favoris</RouterLink>
+    </header>
+
+    <div class="stats-scroll">
+      <!-- Cartes chiffres -->
+      <div class="cards">
+        <div class="card">
+          <div class="card-label">Favoris</div>
+          <div class="card-val"><AnimatedNumber :value="total" /></div>
+        </div>
+        <div class="card">
+          <div class="card-label">Note moyenne</div>
+          <div class="card-val card-val--gold"><AnimatedNumber :value="avgRating" :decimals="1" /><span class="unit">/5</span></div>
+        </div>
+        <div class="card">
+          <div class="card-label">Longueur moyenne</div>
+          <div class="card-val"><AnimatedNumber :value="avgLength" :decimals="0" /><span class="unit">car.</span></div>
+        </div>
+        <div class="card">
+          <div class="card-label">Pays distincts</div>
+          <div class="card-val card-val--cyan"><AnimatedNumber :value="countryCount" /></div>
+        </div>
+      </div>
+
+      <!-- Répartition par statut -->
+      <section class="block">
+        <h2 class="block-title">Par statut</h2>
+        <div class="bars">
+          <div v-for="s in statusBreakdown" :key="s.key" class="bar-row">
+            <span class="bar-label">{{ s.label }}</span>
+            <div class="bar-track"><div class="bar-fill" :style="{ width: pct(s.count) + '%', background: s.color }" /></div>
+            <span class="bar-count">{{ s.count }}</span>
+          </div>
+        </div>
+      </section>
+
+      <!-- Top pays -->
+      <section v-if="topCountries.length" class="block">
+        <h2 class="block-title">Top pays</h2>
+        <div class="bars">
+          <div v-for="c in topCountries" :key="c.key" class="bar-row">
+            <span class="bar-label">
+              <img v-if="c.code" :src="`https://flagcdn.com/16x12/${c.code.toLowerCase()}.png`" :alt="c.code" class="flag" />
+              {{ c.label }}
+            </span>
+            <div class="bar-track"><div class="bar-fill" :style="{ width: pct(c.count) + '%' }" /></div>
+            <span class="bar-count">{{ c.count }}</span>
+          </div>
+        </div>
+      </section>
+
+      <!-- Top auteurs -->
+      <section v-if="topAuthors.length" class="block">
+        <h2 class="block-title">Top auteurs (IP)</h2>
+        <ol class="authors">
+          <li v-for="a in topAuthors" :key="a.key" class="author-row">
+            <span class="author-ip" :style="{ color: ipColor(a.key) }">{{ a.key }}</span>
+            <span class="author-count">{{ a.count }} favori(s)</span>
+          </li>
+        </ol>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useFavorites } from '@/composables/useFavorites';
+import { getIpColor } from '@/composables/ipColor';
+import AnimatedNumber from '@/components/AnimatedNumber.vue';
+
+const { all } = useFavorites();
+
+const total = computed(() => all.value.length);
+
+const avgRating = computed(() => {
+  const rated = all.value.filter((f) => f.rating > 0);
+  if (!rated.length) return 0;
+  return rated.reduce((s, f) => s + f.rating, 0) / rated.length;
+});
+
+const avgLength = computed(() => {
+  if (!all.value.length) return 0;
+  return all.value.reduce((s, f) => s + (f.content?.length ?? 0), 0) / all.value.length;
+});
+
+function tally<T extends string>(keyOf: (f: (typeof all.value)[number]) => T | null) {
+  const map = new Map<T, number>();
+  for (const f of all.value) {
+    const k = keyOf(f);
+    if (k == null) continue;
+    map.set(k, (map.get(k) ?? 0) + 1);
+  }
+  return map;
+}
+
+const statusBreakdown = computed(() => {
+  const m = tally((f) => f.status);
+  return [
+    { key: 'a-lire', label: 'À lire', color: '#5566aa', count: m.get('a-lire') ?? 0 },
+    { key: 'lu', label: 'Lu', color: '#33aa77', count: m.get('lu') ?? 0 },
+    { key: 'top', label: 'Coup de cœur', color: '#ffcc44', count: m.get('top') ?? 0 },
+  ];
+});
+
+const countryAgg = computed(() => {
+  const counts = new Map<string, { code: string; count: number }>();
+  for (const f of all.value) {
+    const g = f.authorGeo;
+    const label = g?.country || (g && !g.countryCode ? 'Local' : 'Inconnu');
+    const code = g?.countryCode ?? '';
+    const cur = counts.get(label) ?? { code, count: 0 };
+    cur.count++;
+    counts.set(label, cur);
+  }
+  return [...counts.entries()].map(([label, v]) => ({ key: label, label, code: v.code, count: v.count }));
+});
+const countryCount = computed(() => countryAgg.value.length);
+const topCountries = computed(() => [...countryAgg.value].sort((a, b) => b.count - a.count).slice(0, 5));
+
+const topAuthors = computed(() => {
+  const m = tally((f) => f.authorIp);
+  return [...m.entries()].map(([key, count]) => ({ key, count })).sort((a, b) => b.count - a.count).slice(0, 5);
+});
+
+const maxCount = computed(() => Math.max(1, ...all.value.length ? [total.value] : [1]));
+function pct(n: number): number { return Math.round((n / maxCount.value) * 100); }
+function ipColor(ip: string): string { return getIpColor(ip); }
+</script>
+
+<style scoped>
+.stats { height: 100%; display: flex; flex-direction: column; background: var(--xip-app-bg, #08080e); }
+.stats-head { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #1a1a2a; }
+.stats-title { font-family: Arial, sans-serif; font-size: 17px; color: #ccccee; margin: 0; }
+.btn-back { font-size: 12px; color: #00ddff; text-decoration: none; border: 1px solid #00aaff44; border-radius: 14px; padding: 6px 12px; }
+.btn-back:hover { background: #00aaff14; }
+
+.stats-scroll { flex: 1; overflow-y: auto; padding: 20px; max-width: 760px; margin: 0 auto; width: 100%; }
+.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 24px; }
+.card { background: #101018; border: 1px solid #20203a; border-radius: 10px; padding: 16px; text-align: center; }
+.card-label { font-family: Arial, sans-serif; font-size: 10px; color: #6a6a90; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
+.card-val { font-family: 'Courier New', monospace; font-size: 26px; font-weight: bold; color: #d8d8e8; }
+.card-val--gold { color: #ffcc44; }
+.card-val--cyan { color: #00ddff; }
+.unit { font-size: 12px; color: #55557a; margin-left: 3px; }
+
+.block { background: #101018; border: 1px solid #20203a; border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; }
+.block-title { font-family: Arial, sans-serif; font-size: 13px; color: #aaaacc; margin: 0 0 12px; }
+.bars { display: flex; flex-direction: column; gap: 8px; }
+.bar-row { display: flex; align-items: center; gap: 10px; }
+.bar-label { font-family: Arial, sans-serif; font-size: 12px; color: #9999bb; width: 130px; display: flex; align-items: center; gap: 6px; }
+.flag { width: 16px; height: 12px; object-fit: cover; border-radius: 2px; }
+.bar-track { flex: 1; height: 8px; background: #16162a; border-radius: 4px; overflow: hidden; }
+.bar-fill { height: 100%; background: #00aaff; border-radius: 4px; transition: width 0.3s; }
+.bar-count { font-family: 'Courier New', monospace; font-size: 12px; color: #ccccdd; width: 28px; text-align: right; }
+
+.authors { list-style: none; counter-reset: rank; display: flex; flex-direction: column; gap: 8px; }
+.author-row { display: flex; align-items: center; justify-content: space-between; counter-increment: rank; }
+.author-row::before { content: counter(rank); color: #44445a; font-family: 'Courier New', monospace; font-size: 11px; margin-right: 10px; }
+.author-ip { font-family: 'Courier New', monospace; font-size: 12px; font-weight: bold; flex: 1; }
+.author-count { font-family: Arial, sans-serif; font-size: 11px; color: #6a6a90; }
+</style>

frontend/src/views/MessageDetailPage.vue

@@ -0,0 +1,125 @@
+<!-- Détail d'un message à partir de l'identifiant présent dans l'URL (/message/:id). -->
+<template>
+  <div class="detail">
+    <div class="detail-bar">
+      <button class="back" type="button" @click="goBack">← Retour</button>
+    </div>
+
+    <div class="detail-body">
+      <p v-if="loading" class="state">Chargement…</p>
+      <p v-else-if="error" class="state state--err">{{ error }}</p>
+
+      <article v-else-if="message" class="thread">
+        <header class="thread-head">
+          <span class="thread-ip" :style="{ color: ipColor(message.authorIp) }">{{ message.authorIp }}</span>
+          <span v-if="message.authorGeo" class="thread-geo">
+            <img
+              v-if="message.authorGeo.countryCode"
+              :src="`https://flagcdn.com/16x12/${message.authorGeo.countryCode.toLowerCase()}.png`"
+              :alt="message.authorGeo.countryCode"
+              class="flag"
+            />
+            {{ geoText(message.authorGeo) }}
+          </span>
+          <span class="thread-ts">{{ fmtDate(message.createdAt) }}</span>
+          <FavButton :message="message" class="thread-fav" />
+        </header>
+
+        <RichContent
+          v-if="message.richMode && message.richMode !== 'none' && message.richContent"
+          :mode="message.richMode"
+          :content="message.richContent"
+        />
+        <p v-else class="thread-content">{{ message.content }}</p>
+
+        <MessageAttachments v-if="message.attachments?.length" :attachments="message.attachments" />
+
+        <section v-if="message.replies?.length" class="replies">
+          <h2 class="replies-title">{{ message.replies.length }} réponse(s)</h2>
+          <div v-for="r in message.replies" :key="r.id" class="reply">
+            <span class="reply-ip" :style="{ color: ipColor(r.authorIp) }">{{ r.authorIp }}</span>
+            <span class="reply-ts">{{ fmtDate(r.createdAt) }}</span>
+            <p class="reply-content">{{ r.content }}</p>
+          </div>
+        </section>
+      </article>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import type { Message, GeoInfo } from '@/composables/useMessages';
+import { getIpColor } from '@/composables/ipColor';
+import RichContent from '@/components/RichContent.vue';
+import MessageAttachments from '@/components/MessageAttachments.vue';
+import FavButton from '@/components/FavButton.vue';
+
+const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
+const route = useRoute();
+const router = useRouter();
+
+const message = ref<Message | null>(null);
+const loading = ref(true);
+const error = ref<string | null>(null);
+
+async function fetchMessage(id: string): Promise<void> {
+  loading.value = true;
+  error.value = null;
+  message.value = null;
+  try {
+    const res = await fetch(`${API_URL}/api/messages/${encodeURIComponent(id)}`);
+    if (res.status === 404) { error.value = 'Ce message n’existe pas (ou plus).'; return; }
+    if (!res.ok) throw new Error();
+    message.value = (await res.json()) as Message;
+  } catch {
+    error.value = 'Impossible de charger ce message.';
+  } finally {
+    loading.value = false;
+  }
+}
+
+// Recharge quand l'id de l'URL change (navigation entre détails).
+watch(() => route.params.id, (id) => { if (typeof id === 'string') void fetchMessage(id); }, { immediate: true });
+
+function goBack(): void {
+  if (window.history.length > 1) router.back();
+  else router.push('/explorer');
+}
+function ipColor(ip: string): string { return getIpColor(ip); }
+function fmtDate(d: string): string { return new Date(d).toLocaleString('fr-FR'); }
+function geoText(g: GeoInfo): string {
+  if (!g.countryCode) return 'Local';
+  return [g.city, g.country].filter(Boolean).join(', ');
+}
+</script>
+
+<style scoped>
+.detail { height: 100%; display: flex; flex-direction: column; background: var(--xip-app-bg, #08080e); }
+.detail-bar { flex-shrink: 0; padding: 12px 20px; border-bottom: 1px solid #1a1a2a; }
+.back {
+  background: #141420; border: 1px solid #222234; border-radius: 16px;
+  color: #00ddff; font-size: 12px; padding: 6px 14px; cursor: pointer;
+}
+.back:hover { background: #1c1c2e; }
+.detail-body { flex: 1; overflow-y: auto; padding: 24px 20px; }
+.state { text-align: center; color: #55557a; font-family: Arial, sans-serif; padding: 40px; }
+.state--err { color: #ff7788; }
+
+.thread { max-width: 640px; margin: 0 auto; background: #101018; border: 1px solid #20203a; border-radius: 12px; padding: 20px; }
+.thread-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
+.thread-ip { font-family: 'Courier New', monospace; font-size: 14px; font-weight: bold; }
+.thread-geo { font-family: Arial, sans-serif; font-size: 11px; color: #55557a; display: inline-flex; align-items: center; gap: 4px; }
+.flag { width: 16px; height: 12px; object-fit: cover; border-radius: 2px; }
+.thread-ts { margin-left: auto; font-size: 11px; color: #44445a; font-family: 'Courier New', monospace; }
+.thread-fav { font-size: 17px; }
+.thread-content { font-family: Arial, sans-serif; font-size: 15px; color: #d8d8e8; line-height: 1.5; margin: 0; word-break: break-word; }
+
+.replies { margin-top: 20px; border-top: 1px solid #20203a; padding-top: 14px; }
+.replies-title { font-family: Arial, sans-serif; font-size: 12px; color: #6688aa; margin: 0 0 12px; }
+.reply { border-left: 2px solid #1a1a2a; padding-left: 12px; margin-bottom: 12px; }
+.reply-ip { font-family: 'Courier New', monospace; font-size: 12px; font-weight: bold; }
+.reply-ts { font-size: 10px; color: #44445a; margin-left: 8px; font-family: 'Courier New', monospace; }
+.reply-content { font-family: Arial, sans-serif; font-size: 13px; color: #c0c0c0; margin: 4px 0 0; }
+</style>