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>

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/package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "dev": "bun --hot run src/index.ts",
     "start": "bun run src/index.ts",
-    "build": "bun build src/index.ts --outdir dist --target bun"
+    "build": "bun build src/index.ts --outdir dist --target bun",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@prisma/client": "^5.22.0",

backend/prisma/seed.ts

@@ -145,6 +145,77 @@ const PRODUCTS = [
     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) ──────────────────

backend/src/lib/catalog.ts

@@ -163,7 +163,7 @@ export async function purchase(
       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") visiblePerkChanged = false; // viewer-scoped
+      if (product.id === "element-skin" || product.id === "ip-colors") visiblePerkChanged = false; // viewer-scoped
       break;
     }
     case "consumable": {
@@ -176,6 +176,14 @@ export async function purchase(
       }
       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)
@@ -204,7 +212,7 @@ export async function purchase(
       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)
+        if (fresh.stockLimit != null && fresh.stockSold >= fresh.stockLimit)
           throw new PurchaseError("Stock épuisé", 409);
         await tx.product.update({
           where: { id: product.id },

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

@@ -25,6 +25,9 @@ export interface Perks {
   richHtmlcss?: boolean;
   richJs?: boolean;
   noFileLimit?: boolean;
+  ipColors?: boolean;
+  audioAlert?: boolean;
+  sendSkins?: { id: string; char: string; label?: string }[];
 }
 
 const perksKey = (ip: string) => `xip:perks:${ip}`;
@@ -88,6 +91,22 @@ export async function getPerksForIp(ip: string): Promise<Perks> {
       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);

backend/src/routes/messages.ts

@@ -4,6 +4,7 @@ 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();
 
@@ -18,37 +19,91 @@ async function ownsRich(ip: string, mode: "htmlcss" | "js"): Promise<boolean> {
   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: {
+// 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" },
+    orderBy: { createdAt: "asc" as const },
     include: {
       attachments: { select: { id: true, filename: true, mimeType: true, size: true } },
     },
   },
-    },
-  });
+} as const;
 
-  // Collect every distinct author IP (threads + replies) and resolve perks once.
+/** 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 data) {
+  for (const m of threads) {
     ips.add(m.authorIp);
     for (const r of m.replies) ips.add(r.authorIp);
   }
-  const perks = await getPerksForIps([...ips]);
-
-  const annotated = data.map((m) => ({
+  const [perks, geo] = await Promise.all([
+    getPerksForIps([...ips]),
+    getGeoForIps([...ips]),
+  ]);
+  return threads.map((m) => ({
     ...m,
     authorPerks: perks[m.authorIp] ?? {},
-    replies: m.replies.map((r) => ({ ...r, authorPerks: perks[r.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);
 });
 
@@ -57,17 +112,25 @@ messages.post("/", async (c) => {
   const ip = getClientIp(c);
 
   const body = await c.req.json<{
-    content: string;
+    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);
+  // 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 (body.content.length > 267) {
+  if (hasContent && body.content!.trim().length > 267) {
     return c.json({ error: "Content exceeds 267 characters" }, 400);
   }
 
@@ -88,7 +151,7 @@ messages.post("/", async (c) => {
     richContent = body.richContent;
   }
 
-  const content = body.content.trim();
+  const content = (body.content ?? "").trim();
   const parentId = body.parentId ?? null;
 
   const message = await prisma.message.create({
@@ -111,8 +174,11 @@ messages.post("/", async (c) => {
   // 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 [authorPerks, authorGeo] = await Promise.all([
+    getPerksForIp(ip),
+    getGeoForIp(ip),
+  ]);
+  const enriched = { ...message, attachments, authorPerks, authorGeo };
   const payload = parentId === null ? { ...enriched, replies: [] } : enriched;
   broadcastNewMessage(payload);
 

backend/src/routes/shop.ts

@@ -11,6 +11,7 @@ import {
   type PurchaseOptions,
 } from "../lib/catalog";
 import { broadcast, broadcastToIp } from "../realtime";
+import { getPerksForIp } from "../lib/perks";
 
 const shop = new Hono();
 
@@ -30,11 +31,12 @@ shop.get("/products/:id", async (c) => {
 // GET /api/shop/me — my balance + owned entitlements
 shop.get("/me", async (c) => {
   const ip = getClientIp(c);
-  const [wallet, entitlements] = await Promise.all([
+  const [wallet, entitlements, myPerks] = await Promise.all([
     getWallet(ip),
     getEntitlements(ip),
+    getPerksForIp(ip),
   ]);
-  return c.json({ wallet, entitlements });
+  return c.json({ wallet, entitlements, myPerks });
 });
 
 // POST /api/shop/purchase  { productId, options }

backend/tsconfig.json

@@ -6,7 +6,7 @@
     "strict": true,
     "skipLibCheck": true,
     "noEmit": true,
-    "types": ["bun-types"]
+    "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=="],
   }
 }

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/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

@@ -9,6 +9,7 @@
     </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>
@@ -23,18 +24,21 @@
 
 <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: #0e0e16;
-  border-bottom: 1px solid #1a1a2a;
+  background: var(--xip-header-bg);
+  border-bottom: 1px solid var(--xip-header-border);
   display: flex;
   align-items: center;
   justify-content: space-between;

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/MessageItem.vue

@@ -9,8 +9,16 @@
         <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 -->
@@ -35,6 +43,13 @@
         <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
@@ -51,57 +66,18 @@
 </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 type { Message } from '@/composables/useMessages';
 import { openContextMenu } from '@/composables/useContextMenu';
-import { useCustomStyles, IP_COLOR_OPTIONS } from '@/composables/useCustomStyles';
-import { useMyPerks } from '@/composables/useMessages';
+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 { 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('');
-}
+const { ipStyle, petsLeft, petsRight, fmt, geoLabel, geoLink, myPerks, prefs } = useMessageItem();
 
 function openIpMenu(e: MouseEvent, ip: string): void {
   if (ip !== props.myIp) return;
@@ -157,9 +133,6 @@ function openIpMenu(e: MouseEvent, ip: string): void {
   });
 }
 
-function fmt(date: string): string {
-  return new Date(date).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
-}
 </script>
 
 <style scoped>
@@ -234,4 +207,34 @@ function fmt(date: string): string {
   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,15 +1,17 @@
 <!-- Zone de messages scrollable avec la pub casino en overlay -->
 <template>
   <div class="feed-wrapper">
-    <!-- Messages -->
     <div ref="listEl" class="feed-scroll">
-      <MessageItem
+      <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>
@@ -21,24 +23,37 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, nextTick } from 'vue';
+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);
 
-// Auto-scroll vers le bas à chaque nouveau message
 watch(
   () => props.messages.length,
   async () => {
     await nextTick();
-    if (listEl.value) {
-      listEl.value.scrollTop = listEl.value.scrollHeight;
-    }
+    listEl.value?.scrollTo({ top: listEl.value.scrollHeight, behavior: 'smooth' });
   },
 );
 </script>
@@ -69,14 +84,15 @@ watch(
   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;
-}
+.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,15 +1,11 @@
 <!--
-  Rich message renderer — SECURITY CRITICAL.
+  Rich message renderer.
 
-  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.
+  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">
@@ -17,6 +13,7 @@
       {{ mode === 'js' ? '⚡ JS' : '🎨 HTML/CSS' }} · bac à sable
     </span>
     <iframe
+      ref="frameRef"
       class="rich-frame"
       :sandbox="sandboxTokens"
       :srcdoc="srcdoc"
@@ -28,28 +25,55 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, useTemplateRef, watchEffect } 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' : ''));
+const frameRef = useTemplateRef<HTMLIFrameElement>('frameRef');
 
-// 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')) {
+// 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(() => {
-  // 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>`;
+  // 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>
 
@@ -72,7 +96,6 @@ const srcdoc = computed(() => {
 .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%;

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

@@ -9,7 +9,8 @@
     @click="$emit('send')"
     @contextmenu.prevent="onRightClick"
   >
-    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
+    <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>
@@ -27,24 +28,48 @@ 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 {
-  if (!myPerks.value.elementSkin) return;
+  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: 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; },
+    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>
@@ -55,6 +80,10 @@ function onRightClick(e: MouseEvent): void {
   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;
@@ -64,4 +93,5 @@ function onRightClick(e: MouseEvent): void {
 .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/StyleContextMenu.vue

@@ -14,10 +14,11 @@
         <button
           v-else
           class="ctx-item"
-          :class="{ 'ctx-item--active': item.value === state.current }"
+          :class="{ 'ctx-item--active': item.checked || item.value === state.current }"
           @click="pick(item.value)"
         >
-          <span v-if="item.swatch" class="ctx-swatch" :style="{ background: item.swatch }" />
+          <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>
@@ -127,4 +128,11 @@ onUnmounted(() => {
   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,157 +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>
-
-    <!-- ── Couleur de l'IP ────────────────────────────────────────── -->
-    <section class="section" :class="{ locked: !myPerks.elementSkin }">
-      <h2 class="section-title">
-        🎨 Couleur de mon IP
-        <span v-if="!myPerks.elementSkin" class="lock-badge">🔒 Skin d'éléments requis</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.elementSkin"
-          @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 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>
@@ -162,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

@@ -6,7 +6,7 @@
     <div class="card-head">
       <span class="card-icon">{{ icon }}</span>
       <div>
-        <p class="card-name">{{ product.name }}</p>
+        <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>
@@ -48,11 +48,11 @@
       <input v-model="url" class="opt-input" type="text" placeholder="URL de destination (optionnel)" />
     </div>
 
-    <!-- Options : Pet (grille + position) -->
+    <!-- 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 designs"
+          v-for="d in availableDesigns"
           :key="d.id"
           class="pet-cell"
           :class="{ active: petDesign === d.id }"
@@ -60,12 +60,11 @@
           type="button"
         >{{ d.char }}</button>
       </div>
-      <div class="pet-pos">
-        <label v-for="pos in positions" :key="pos" class="opt-radio opt-radio--sm" :class="{ active: petPosition === pos }">
-          <input type="radio" :value="pos" v-model="petPosition" />
-          <span>{{ posLabel(pos) }}</span>
-        </label>
     </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é -->
@@ -107,13 +106,15 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+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;
 }>();
@@ -123,10 +124,7 @@ const emit = defineEmits<{
   goPerso: [];
 }>();
 
-const meta = computed<any>(() => {
-  try { return props.product.metaJson ? JSON.parse(props.product.metaJson) : {}; }
-  catch { return {}; }
-});
+const meta = computed(() => parseMeta<ProductMeta>(props.product.metaJson));
 
 // Subscription
 const plans = computed(() => meta.value.plans ?? []);
@@ -141,11 +139,19 @@ const url = ref('');
 
 // Pet
 const designs = computed(() => meta.value.designs ?? []);
-const positions = computed<string[]>(() => meta.value.positions ?? ['left', 'right', 'both']);
 const petDesign = ref<string>('');
-const petPosition = ref<'left' | 'right' | 'both'>('left');
+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 '🚫';
@@ -161,12 +167,12 @@ const icon = computed(() => {
 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);
+    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: any) => x.days === durationDays.value);
-    const f = formats.value.find((x: any) => x.id === format.value);
+    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;
@@ -180,6 +186,7 @@ const ownedAlready = computed(() => {
   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;
 });
 
@@ -201,9 +208,6 @@ const stockPct = computed(() =>
 function fmt(centi: number): string {
   return (centi / 100).toLocaleString('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
 }
-function posLabel(p: string): string {
-  return p === 'left' ? 'Gauche' : p === 'right' ? 'Droite' : 'Les deux';
-}
 
 function onBuy(): void {
   const options: PurchaseOptions = {};
@@ -214,9 +218,8 @@ function onBuy(): void {
     options.url = url.value || undefined;
   }
   if (props.product.kind === 'pet' || props.product.id === 'bundle-cosmetic') {
-    const d = designs.value.find((x: any) => x.id === petDesign.value) ?? designs.value[0];
+    const d = availableDesigns.value.find((x) => x.id === petDesign.value) ?? availableDesigns.value[0];
     if (d) { options.petDesign = d.id; options.petChar = d.char; }
-    options.petPosition = petPosition.value;
   }
   emit('buy', props.product.id, options);
 }
@@ -252,7 +255,8 @@ function onBuy(): void {
 
 .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-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 {
@@ -291,6 +295,14 @@ function onBuy(): void {
 .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); }

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

@@ -10,7 +10,8 @@ export function getIpColor(ip: string): string {
   return PALETTE[Math.abs(hash) % PALETTE.length];
 }
 
-export function getIpGlow(color: string): string {
+// Glows are currently disabled globally; params kept for signature stability.
+export function getIpGlow(_color: string): string {
   return 'none';
 }
 
@@ -27,6 +28,6 @@ export function getIpColorWithPerks(ip: string, perks?: PerkLike | null): string
   return getIpColor(ip);
 }
 
-export function getIpGlowWithPerks(ip: string, perks?: PerkLike | null): string {
+export function getIpGlowWithPerks(_ip: string, _perks?: PerkLike | null): string {
   return 'none';
 }

frontend/src/composables/useContextMenu.ts

@@ -9,7 +9,9 @@ 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 {

frontend/src/composables/useCustomStyles.ts

@@ -50,6 +50,7 @@ export const PET_OPTIONS: { value: string; label: string }[] = [
 
 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 ''
@@ -57,7 +58,7 @@ export interface CustomStylePrefs {
 }
 
 function defaults(): CustomStylePrefs {
-  return { sendButton: 'default', adFrame: 'default', ipColors: {}, ipPets: {}, chatBgUrl: '' };
+  return { sendButton: 'default', sendSkin: '', adFrame: 'default', ipColors: {}, ipPets: {}, chatBgUrl: '' };
 }
 
 function load(): CustomStylePrefs {

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

@@ -13,6 +13,14 @@ 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;
@@ -20,6 +28,7 @@ export interface Reply {
   createdAt: string;
   parentId?: string | null;
   authorPerks?: Perks;
+  authorGeo?: GeoInfo | null;
   richMode?: 'none' | 'htmlcss' | 'js';
   richContent?: string | null;
   attachments?: Attachment[];
@@ -39,32 +48,19 @@ export interface Message extends 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). */
+/**
+ * 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 { 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 === '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 { myPerks: p } = (await res.json()) as { myPerks?: Perks };
+    myPerks.value = p ?? {};
     const { ip } = useWallet();
-    if (ip.value) setPerks(ip.value, p);
+    if (ip.value) setPerks(ip.value, myPerks.value);
   } catch {
     /* ignore */
   }
@@ -121,6 +117,7 @@ export function useMessages() {
       createdAt: raw.createdAt,
       parentId: raw.parentId,
       authorPerks: raw.authorPerks,
+      authorGeo: raw.authorGeo,
       richMode: raw.richMode,
       richContent: raw.richContent,
       attachments: raw.attachments,
@@ -171,7 +168,7 @@ export function useMessages() {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
-          content: content.trim() || ' ',
+          content: content.trim(),
           parentId: extras.parentId,
           richMode: extras.richMode,
           richContent: extras.richContent,
@@ -199,6 +196,8 @@ export function useMessages() {
     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,
@@ -207,7 +206,6 @@ export function useMessages() {
     stats,
     connected,
     sendTyping,
-    get myPerks() { return myPerks; },
     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

@@ -16,6 +16,8 @@ export interface Perks {
   elementSkin?: boolean;
   richHtmlcss?: boolean;
   richJs?: boolean;
+  ipColors?: boolean;
+  sendSkins?: { id: string; char: string; label?: string }[];
   noFileLimit?: boolean;
   audioAlert?: boolean;
 }

frontend/src/composables/useShop.ts

@@ -1,6 +1,7 @@
 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. */
 
@@ -81,6 +82,13 @@ export function useShop() {
     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;
@@ -119,6 +127,7 @@ export function useShop() {
     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/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,13 +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;
 }
 
+/* ── 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: #080808;
+  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>
@@ -89,16 +28,16 @@
 import { ref, computed } from 'vue';
 import ChatHeader   from '@/components/ChatHeader.vue';
 import MessageList  from '@/components/MessageList.vue';
-import SendButton  from '@/components/SendButton.vue';
+import ChatComposer from '@/components/ChatComposer.vue';
 import StatsTicker  from '@/components/StatsTicker.vue';
-import { useMessages } from '@/composables/useMessages';
-import { useAttachments } from '@/composables/useAttachments';
-import { useAlert } from '@/composables/useAlert';
+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>

frontend/src/views/ProductDetailPage.vue

@@ -0,0 +1,78 @@
+<!-- Détail d'un produit du shop à partir de l'identifiant de l'URL (/shop/p/:id). -->
+<template>
+  <div class="pdetail">
+    <div class="pdetail-bar">
+      <RouterLink to="/shop" class="back">← Boutique</RouterLink>
+    </div>
+    <div class="pdetail-body">
+      <p v-if="loading" class="state">Chargement…</p>
+      <p v-else-if="!product" class="state state--err">Produit introuvable.</p>
+      <div v-else class="pdetail-card">
+        <ProductCard
+          :product="product"
+          :buying="buying === product.id"
+          :owns="owns"
+          :owned-pet-chars="ownedPetChars()"
+          :pet-count="petCount()"
+          :free-mode="freeMode"
+          @buy="onBuy"
+          @go-perso="$router.push('/shop')"
+        />
+        <p v-if="lastError" class="toast toast--err">{{ lastError }}</p>
+        <p v-else-if="lastSuccess" class="toast toast--ok">✓ Acheté</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { useShop, type Product, type PurchaseOptions } from '@/composables/useShop';
+import { useWallet } from '@/composables/useWallet';
+import ProductCard from '@/components/shop/ProductCard.vue';
+
+const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
+const route = useRoute();
+
+const { buying, lastError, lastSuccess, fetchMe, owns, petCount, ownedPetChars, purchase } = useShop();
+const { freeMode, fetchWallet } = useWallet();
+
+const product = ref<Product | null>(null);
+const loading = ref(true);
+
+async function load(id: string): Promise<void> {
+  loading.value = true;
+  product.value = null;
+  try {
+    const [res] = await Promise.all([
+      fetch(`${API_URL}/api/shop/products/${encodeURIComponent(id)}`),
+      fetchMe(),
+      fetchWallet(),
+    ]);
+    if (res.ok) product.value = (await res.json()) as Product;
+  } finally {
+    loading.value = false;
+  }
+}
+
+watch(() => route.params.id, (id) => { if (typeof id === 'string') void load(id); }, { immediate: true });
+
+async function onBuy(productId: string, options: PurchaseOptions): Promise<void> {
+  await purchase(productId, options);
+}
+</script>
+
+<style scoped>
+.pdetail { height: 100%; display: flex; flex-direction: column; background: var(--xip-app-bg, #08080e); }
+.pdetail-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; text-decoration: none; }
+.back:hover { background: #1c1c2e; }
+.pdetail-body { flex: 1; overflow-y: auto; padding: 24px 20px; display: flex; justify-content: center; }
+.pdetail-card { width: 100%; max-width: 340px; }
+.state { color: #55557a; font-family: Arial, sans-serif; padding: 40px; text-align: center; }
+.state--err { color: #ff7788; }
+.toast { margin-top: 12px; padding: 8px 12px; border-radius: 8px; font-size: 13px; text-align: center; }
+.toast--err { background: #2a0e12; border: 1px solid #aa3344; color: #ff8899; }
+.toast--ok { background: #0e2a16; border: 1px solid #33aa55; color: #66ffaa; }
+</style>

frontend/src/views/ShopPage.vue

@@ -59,6 +59,7 @@
               :buying="buying === p.id"
               :owns="owns"
               :pet-count="petCount()"
+              :owned-pet-chars="ownedPetChars()"
               :free-mode="freeMode"
               @buy="onBuy"
               @go-perso="activeCat = 'perso'"
@@ -75,14 +76,16 @@
 import { ref, computed, onMounted, onUnmounted } from 'vue';
 import { useShop, type PurchaseOptions } from '@/composables/useShop';
 import { useWallet } from '@/composables/useWallet';
+import { parseMeta, type ProductMeta } from '@/composables/useMeta';
 import ProductCard from '@/components/shop/ProductCard.vue';
 import MesPersos from '@/components/shop/MesPersos.vue';
 
-const { products, loading, buying, lastError, lastSuccess, fetchProducts, fetchMe, owns, petCount, purchase } = useShop();
+const { products, buying, lastError, lastSuccess, fetchProducts, fetchMe, owns, petCount, ownedPetChars, purchase } = useShop();
 const { ip, freeMode, displayBalance, fetchWallet, topUp: walletTopUp } = useWallet();
 
+// Navigation forcée par catégorie : pas de « Tout voir », on entre directement
+// dans une rubrique organisée.
 const categories = [
-  { id: 'all', label: 'Tout voir' },
   { id: 'publicite', label: 'Publicité' },
   { id: 'abonnements', label: 'Abonnements' },
   { id: 'cosmetiques', label: 'Cosmétiques' },
@@ -90,13 +93,18 @@ const categories = [
   { id: 'promotions', label: 'Promotions' },
   { id: 'perso', label: '✨ Mes Persos' },
 ];
-const activeCat = ref('all');
+const activeCat = ref('publicite');
 
-const visibleProducts = computed(() =>
-  activeCat.value === 'all'
-    ? products.value
-    : products.value.filter((p) => p.category === activeCat.value)
-);
+const visibleProducts = computed(() => {
+  const chars = ownedPetChars();
+  return products.value
+    .filter((p) => p.category === activeCat.value)
+    .filter((p) => {
+      if (p.kind !== 'pet') return true;
+      const designs = parseMeta<ProductMeta>(p.metaJson).designs ?? [];
+      return designs.some((d) => !chars.includes(d.char));
+    });
+});
 
 async function onBuy(productId: string, options: PurchaseOptions): Promise<void> {
   await purchase(productId, options);
@@ -130,8 +138,8 @@ onUnmounted(() => { if (timer) clearInterval(timer); });
 
 <style scoped>
 .shop {
-  width: 100vw;
-  height: 100dvh;
+  width: 100%;
+  height: 100%;
   background: #08080e;
   display: flex;
   flex-direction: column;

frontend/src/vite-env.d.ts

@@ -1 +1,9 @@
 /// <reference types="vite/client" />
+
+// Déclaration des modules .vue pour TypeScript / vue-tsc (résolution des
+// imports `import X from './X.vue'` lors du build, y compris en conteneur).
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

frontend/vitest.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig } from 'vitest/config';
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: { '@': path.resolve(__dirname, './src') },
+  },
+  test: {
+    environment: 'happy-dom',
+    globals: true,
+    coverage: {
+      provider: 'v8',
+      // On cible le code métier (état + utilitaires), pas les pages/présentation.
+      include: [
+        'src/composables/useFavorites.ts',
+        'src/composables/useWallet.ts',
+        'src/composables/usePerks.ts',
+        'src/composables/useMeta.ts',
+        'src/composables/useDebounce.ts',
+        'src/composables/ipColor.ts',
+      ],
+      reporter: ['text', 'text-summary'],
+    },
+  },
+});

scripts/deploy.sh

@@ -15,7 +15,20 @@ git fetch --all --prune
 git reset --hard origin/main
 
 echo "==> Building + starting the stack…"
-docker compose -f "$COMPOSE_FILE" --env-file "$ENV_FILE" up -d --build --remove-orphans
+deploy_up() {
+  docker compose -f "$COMPOSE_FILE" --env-file "$ENV_FILE" up -d --build --remove-orphans
+}
+
+# A raced or interrupted previous deploy (e.g. a manual `compose up` overlapping
+# the automated one) can leave a half-removed / renamed container behind, making
+# the next recreate fail with "removal of container ... is already in progress".
+# If the first attempt fails, prune stopped containers and retry once.
+if ! deploy_up; then
+  echo "!! 'compose up' failed — pruning stopped containers, retrying once in 8s…"
+  docker container prune -f >/dev/null 2>&1 || true
+  sleep 8
+  deploy_up
+fi
 
 echo "==> Pruning dangling images…"
 docker image prune -f >/dev/null 2>&1 || true