feat: conformite enonce - explorer, favoris, stats perso, tests, slots

Fonctionnel
- Backend messages : GET /api/messages/:id (detail) + recherche (q),
  pagination par curseur (before/limit) avec enveloppe { items, nextCursor,
  hasMore } ; le flux temps reel garde l'ancien format quand aucun parametre.
- Explorer (/explorer) : catalogue distant, recherche debouncee + annulable
  (AbortController), filtre, defilement infini, etat garde (keep-alive).
- Details par id : /message/:id et /shop/p/:id (consomment route.params).
- Favoris (/favoris) : liste perso persistee en localStorage, notation
  (note/rating/statut) via modale, refletee partout (bouton favori).
- Mes stats (/mes-stats) : agregats derives des favoris (note moyenne, top
  pays/auteurs, statuts), auto-mis a jour, route gardee si liste vide.
- Routeur : pages secondaires en lazy-load + repli, garde beforeEnter.

Technique
- Slots : PrefSection (slot defaut + slot nomme) enveloppe les 5 sections
  "Mes Persos" ; Modal (Teleport + slots).
- v-model custom : SearchBox (defineModel + debounce).
- Directive custom : v-click-outside.
- Tests Vitest : 25 tests (etat, fonctions, composants), ~86% du code metier.
- Retrait d'Ionic (inutilise). Script typecheck backend ; tsconfig @types/bun.
- Correctif type : garde stockLimit nullable dans l'achat (catalog.ts).
- README complet (URL, stack, run, tests, secrets, deploiement, mention IA).

README.md

@@ -1,35 +1,110 @@
-# 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.
+## Stack
-Envahit par des Pubs.
+
+| 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 :**
+- **Chat temps réel** (WebSocket) : messages, réponses en thread, présence,
-- Envoyer des messages
+  stats live qui défilent.
-    - contenant du texte (267 charactères)
+- **Explorer** (`/explorer`) : catalogue distant paginé (défilement infini),
-    - contenant des fichiers (JPEG, .exe, ...) 1 Mo max
+  **recherche debouncée et annulable** (AbortController), filtre.
-- Répondre à un message (sous forme de sous-thread)
+- **Détail** d'un message (`/message/:id`) et d'un produit (`/shop/p/:id`) par
-- Récupérer mes messages
+  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 :**
+## Lancer en local
-- Pas de paywall (tout gratuit)
 
+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)**.
+
+---
+
+## Mention IA
+
+Ce projet a été développé avec une assistance IA importante (génération et
+refactorisation de code comprises). Le code a été relu, corrigé et intégré par
+l'équipe.
+
+## Auteurs
+
+<!-- à compléter : noms du groupe -->

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/src/lib/catalog.ts

@@ -212,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/routes/messages.ts

@@ -19,26 +19,23 @@ 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.
+// What we always include with a thread: its attachments + replies (+ their attachments).
-messages.get("/", async (c) => {
+const THREAD_INCLUDE = {
-  const data = await prisma.message.findMany({
-    where: { parentId: null },
-    orderBy: { createdAt: "desc" },
-    take: 50,
-    include: {
   attachments: { select: { id: true, filename: true, mimeType: true, size: true } },
   replies: {
-        orderBy: { createdAt: "asc" },
+    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);
   }
@@ -46,8 +43,7 @@ messages.get("/", async (c) => {
     getPerksForIps([...ips]),
     getGeoForIps([...ips]),
   ]);
-
+  return threads.map((m) => ({
-  const annotated = data.map((m) => ({
     ...m,
     authorPerks: perks[m.authorIp] ?? {},
     authorGeo: geo[m.authorIp] ?? null,
@@ -57,7 +53,57 @@ messages.get("/", async (c) => {
       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);
 });
 

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=="],
+    "glob/minimatch/brace-expansion/balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
-
-    "@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=="],
   }
 }

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 />
+  <div class="app-shell">
-  <StyleContextMenu />
+    <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">
+<style scoped>
-import StyleContextMenu from '@/components/StyleContextMenu.vue';
+.app-shell {
-</script>
+  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/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

@@ -18,6 +18,7 @@
       </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 -->
@@ -71,6 +72,7 @@ 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 }] }>();

frontend/src/components/MessageItemBubble.vue

@@ -52,11 +52,14 @@
       </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>
 
@@ -66,6 +69,7 @@ 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 }] }>();
@@ -141,6 +145,7 @@ const isMine = computed(() => props.message.authorIp === props.myIp);
 .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;

frontend/src/components/MessageItemCompact.vue

@@ -23,6 +23,7 @@
         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" />
@@ -50,6 +51,7 @@ 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 }] }>();

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/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/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/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>
@@ -255,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 {

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

@@ -1,7 +1,6 @@
 <!-- Mes Persos › Fond du chat (image de fond personnalisée, viewer-side) -->
 <template>
-  <section class="pf-section">
+  <PrefSection title="🖼️ Fond du chat">
-    <h2 class="pf-title">🖼️ Fond du chat</h2>
     <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
@@ -15,12 +14,13 @@
       <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>
+  </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();
 

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

@@ -1,10 +1,9 @@
 <!-- Mes Persos › Couleur de mon IP (viewer-side, nécessite la Palette IP) -->
 <template>
-  <section class="pf-section" :class="{ 'pf-locked': !myPerks.ipColors }">
+  <PrefSection title="🎨 Couleur de mon IP" :locked="!myPerks.ipColors">
-    <h2 class="pf-title">
+    <template v-if="!myPerks.ipColors" #lock>
-      🎨 Couleur de mon IP
+      <span class="pf-lock">🔒 Palette IP requise</span>
-      <span v-if="!myPerks.ipColors" class="pf-lock">🔒 Palette IP requise</span>
+    </template>
-    </h2>
     <p v-if="myIp" class="pf-sub">IP&nbsp;: <code class="code-ip" :style="ipPreviewStyle">{{ myIp }}</code></p>
     <div class="pf-grid">
       <button
@@ -21,7 +20,7 @@
         <span class="pf-label">{{ opt.label }}</span>
       </button>
     </div>
-  </section>
+  </PrefSection>
 </template>
 
 <script setup lang="ts">
@@ -30,6 +29,7 @@ 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();

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

@@ -1,10 +1,9 @@
 <!-- Mes Persos › Pet actif affiché à gauche de l'IP (parmi les pets possédés) -->
 <template>
-  <section class="pf-section" :class="{ 'pf-locked': !hasPets }">
+  <PrefSection title="✨ Mes pets" :locked="!hasPets">
-    <h2 class="pf-title">
+    <template v-if="!hasPets" #lock>
-      ✨ Mes pets
+      <span class="pf-lock">Achetez un Pet dans le shop</span>
-      <span v-if="!hasPets" class="pf-lock">Achetez un Pet dans le shop</span>
+    </template>
-    </h2>
     <template v-if="hasPets">
       <div class="pf-grid">
         <button
@@ -28,7 +27,7 @@
       </p>
     </template>
     <p v-else class="pf-sub">Aucun pet possédé pour l'instant.</p>
-  </section>
+  </PrefSection>
 </template>
 
 <script setup lang="ts">
@@ -36,6 +35,7 @@ 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();

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

@@ -1,10 +1,9 @@
 <!-- Mes Persos › Couleur du bouton d'envoi (preset, nécessite le skin d'éléments) -->
 <template>
-  <section class="pf-section" :class="{ 'pf-locked': !myPerks.elementSkin }">
+  <PrefSection title="➤ Bouton d'envoi" :locked="!myPerks.elementSkin">
-    <h2 class="pf-title">
+    <template v-if="!myPerks.elementSkin" #lock>
-      ➤ Bouton d'envoi
+      <span class="pf-lock">🔒 Skin d'éléments requis</span>
-      <span v-if="!myPerks.elementSkin" class="pf-lock">🔒 Skin d'éléments requis</span>
+    </template>
-    </h2>
     <div class="pf-grid">
       <button
         v-for="[k, p] in presetEntries"
@@ -19,12 +18,13 @@
         <span class="pf-label">{{ p.label }}</span>
       </button>
     </div>
-  </section>
+  </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();

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

@@ -1,10 +1,9 @@
 <!-- Mes Persos › Skin (emoji) du bouton d'envoi, parmi les skins possédés -->
 <template>
-  <section class="pf-section" :class="{ 'pf-locked': !hasSendSkins }">
+  <PrefSection title="🖱️ Skin du bouton d'envoi" :locked="!hasSendSkins">
-    <h2 class="pf-title">
+    <template v-if="!hasSendSkins" #lock>
-      🖱️ Skin du bouton d'envoi
+      <span class="pf-lock">Achetez un skin dans le shop</span>
-      <span v-if="!hasSendSkins" class="pf-lock">Achetez un skin dans le shop</span>
+    </template>
-    </h2>
     <template v-if="hasSendSkins">
       <div class="pf-grid">
         <button
@@ -30,13 +29,14 @@
       </div>
     </template>
     <p v-else class="pf-sub">Aucun skin possédé pour l'instant.</p>
-  </section>
+  </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();

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/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/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/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/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 },
+    // Vues secondaires : chargées à la demande (code-splitting) pour ne pas
-    { path: '/shop/p/:id', component: ShopPage },
+    // 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/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

@@ -64,8 +64,8 @@ function cancelReply(): void {
 .xip-app {
   display: flex;
   flex-direction: column;
-  width: 100vw;
+  width: 100%;
-  height: 100dvh;
+  height: 100%;
   background: var(--xip-app-bg);
   overflow: hidden;
 }

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

@@ -138,8 +138,8 @@ onUnmounted(() => { if (timer) clearInterval(timer); });
 
 <style scoped>
 .shop {
-  width: 100vw;
+  width: 100%;
-  height: 100dvh;
+  height: 100%;
   background: #08080e;
   display: flex;
   flex-direction: column;

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'],
+    },
+  },
+});