init: scaffold complet Sakuin — backend NestJS + frontend SvelteKit + CI/CD + deploy VPS

Backend: 5 modules (auth, user, work, list, health), AniList GraphQL proxy,
SuperOAuth PKCE introspection, XP system, migrations TypeORM.
Frontend: SvelteKit adapter-node, PWA manifest, dark theme, pages home/search/list/profile/callback.
Infra: CI/CD Gitea vps-runner, Apache vhost SSL, pm2 sakuin-backend + sakuin-frontend, port 4002.
License: BSL 1.1 (Apache 2.0 en 2028).

frontend/src/routes/list/+page.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">
+  import { api } from '$lib/api';
+
+  let items = $state<any[]>([]);
+  let loading = $state(true);
+  let activeTab = $state('all');
+
+  const tabs = [
+    { key: 'all', label: 'Tout' },
+    { key: 'watching', label: 'En cours (anime)' },
+    { key: 'reading', label: 'En cours (manga)' },
+    { key: 'completed', label: 'Complétés' },
+    { key: 'plan_to', label: 'À voir/lire' },
+    { key: 'dropped', label: 'Abandonnés' },
+  ];
+
+  async function loadList() {
+    loading = true;
+    try {
+      const status = activeTab === 'all' ? undefined : activeTab;
+      items = await api.getList(status);
+    } catch {
+      items = [];
+    } finally {
+      loading = false;
+    }
+  }
+
+  function switchTab(key: string) {
+    activeTab = key;
+    loadList();
+  }
+
+  async function incrementProgress(item: any) {
+    const newProgress = item.progress + 1;
+    await api.updateProgress(item.id, newProgress);
+    item.progress = newProgress;
+
+    const total = item.work?.totalEpisodes || item.work?.totalChapters;
+    if (total && newProgress >= total) {
+      item.status = 'completed';
+    }
+  }
+
+  async function remove(item: any) {
+    if (!confirm(`Retirer ${item.work?.titleRomaji} ?`)) return;
+    await api.removeFromList(item.id);
+    items = items.filter((i) => i.id !== item.id);
+  }
+
+  $effect(() => {
+    loadList();
+  });
+</script>
+
+<svelte:head>
+  <title>Ma Liste — Sakuin</title>
+</svelte:head>
+
+<div class="list-page">
+  <h2>Ma Liste</h2>
+
+  <div class="tabs">
+    {#each tabs as tab}
+      <button
+        class="tab"
+        class:active={activeTab === tab.key}
+        onclick={() => switchTab(tab.key)}
+      >
+        {tab.label}
+      </button>
+    {/each}
+  </div>
+
+  {#if loading}
+    <p class="status">Chargement...</p>
+  {:else if items.length === 0}
+    <p class="status">Liste vide. <a href="/search">Chercher des oeuvres</a></p>
+  {:else}
+    <div class="list-grid">
+      {#each items as item}
+        <div class="card list-card" class:gold={item.status === 'completed'}>
+          {#if item.work?.posterUrl}
+            <img src={item.work.posterUrl} alt="" class="poster" />
+          {/if}
+          <div class="card-body">
+            <h3>{item.work?.titleRomaji}</h3>
+            <div class="meta">
+              <span class="badge" class:badge-gold={item.status === 'completed'} class:badge-accent={item.status !== 'completed'}>
+                {item.status}
+              </span>
+              {#if item.score}
+                <span class="score">★ {item.score}/10</span>
+              {/if}
+            </div>
+            <div class="progress-bar">
+              <span>
+                {item.progress} / {item.work?.totalEpisodes || item.work?.totalChapters || '?'}
+              </span>
+              <button class="btn-ghost btn-xs" onclick={() => incrementProgress(item)}>+1</button>
+            </div>
+            <div class="actions">
+              <button class="btn-ghost btn-xs" onclick={() => remove(item)}>Retirer</button>
+            </div>
+          </div>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .list-page {
+    max-width: 900px;
+    margin: 0 auto;
+  }
+  h2 {
+    margin-bottom: 1rem;
+  }
+  .tabs {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 1.5rem;
+    flex-wrap: wrap;
+  }
+  .tab {
+    background: var(--bg-secondary);
+    color: var(--text-secondary);
+    border: 1px solid var(--border);
+    padding: 0.4rem 0.8rem;
+    font-size: 0.8rem;
+    border-radius: var(--radius);
+  }
+  .tab.active {
+    background: var(--accent);
+    color: #fff;
+    border-color: var(--accent);
+  }
+  .list-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  .list-card {
+    display: flex;
+  }
+  .list-card.gold {
+    border-color: var(--gold);
+    box-shadow: 0 0 12px rgba(251, 191, 36, 0.15);
+  }
+  .poster {
+    width: 80px;
+    min-height: 110px;
+    object-fit: cover;
+    flex-shrink: 0;
+  }
+  .card-body {
+    padding: 0.75rem;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+  }
+  .card-body h3 {
+    font-size: 0.9rem;
+  }
+  .meta {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.75rem;
+  }
+  .score {
+    color: var(--gold);
+    font-weight: 600;
+  }
+  .progress-bar {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+  }
+  .actions {
+    display: flex;
+    gap: 0.5rem;
+  }
+  .btn-xs {
+    padding: 0.15rem 0.4rem;
+    font-size: 0.7rem;
+  }
+</style>