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/profile/+page.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+  import { api } from '$lib/api';
+
+  let user = $state<any>(null);
+  let loading = $state(true);
+
+  $effect(() => {
+    api.me()
+      .then((data) => { user = data; })
+      .catch(() => { user = null; })
+      .finally(() => { loading = false; });
+  });
+
+  function xpToNextLevel(xp: number): { current: number; needed: number; pct: number } {
+    const level = Math.floor(xp / 500) + 1;
+    const base = (level - 1) * 500;
+    const current = xp - base;
+    return { current, needed: 500, pct: Math.round((current / 500) * 100) };
+  }
+</script>
+
+<svelte:head>
+  <title>Profil — Sakuin</title>
+</svelte:head>
+
+{#if loading}
+  <p>Chargement...</p>
+{:else if !user}
+  <p>Non connecté.</p>
+{:else}
+  {@const xp = xpToNextLevel(user.xp)}
+  <div class="profile">
+    <div class="profile-header">
+      {#if user.avatarUrl}
+        <img src={user.avatarUrl} alt="" class="avatar-lg" />
+      {/if}
+      <div>
+        <h2>{user.username}</h2>
+        <div class="level-info">
+          <span class="badge badge-accent">Level {user.level}</span>
+          <span class="xp-text">{user.xp} XP</span>
+        </div>
+        <div class="xp-bar">
+          <div class="xp-fill" style="width: {xp.pct}%"></div>
+        </div>
+        <span class="xp-detail">{xp.current} / {xp.needed} XP</span>
+      </div>
+    </div>
+
+    {#if user.stats}
+      <div class="stats-grid">
+        <div class="stat-card">
+          <span class="stat-value">{user.stats.total}</span>
+          <span class="stat-label">Total</span>
+        </div>
+        <div class="stat-card">
+          <span class="stat-value">{user.stats.watching || 0}</span>
+          <span class="stat-label">En cours (anime)</span>
+        </div>
+        <div class="stat-card">
+          <span class="stat-value">{user.stats.reading || 0}</span>
+          <span class="stat-label">En cours (manga)</span>
+        </div>
+        <div class="stat-card">
+          <span class="stat-value">{user.stats.completed || 0}</span>
+          <span class="stat-label">Complétés</span>
+        </div>
+        <div class="stat-card">
+          <span class="stat-value">{user.stats.episodesWatched || 0}</span>
+          <span class="stat-label">Épisodes vus</span>
+        </div>
+        <div class="stat-card">
+          <span class="stat-value">{user.stats.chaptersRead || 0}</span>
+          <span class="stat-label">Chapitres lus</span>
+        </div>
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .profile {
+    max-width: 700px;
+    margin: 0 auto;
+  }
+  .profile-header {
+    display: flex;
+    gap: 1.5rem;
+    align-items: center;
+    margin-bottom: 2rem;
+  }
+  .avatar-lg {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    border: 3px solid var(--accent);
+  }
+  h2 {
+    margin-bottom: 0.25rem;
+  }
+  .level-info {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.4rem;
+  }
+  .xp-text {
+    color: var(--text-muted);
+    font-size: 0.8rem;
+  }
+  .xp-bar {
+    width: 200px;
+    height: 6px;
+    background: var(--bg-secondary);
+    border-radius: 3px;
+    overflow: hidden;
+    margin-bottom: 0.2rem;
+  }
+  .xp-fill {
+    height: 100%;
+    background: var(--accent);
+    border-radius: 3px;
+    transition: width 0.3s;
+  }
+  .xp-detail {
+    font-size: 0.7rem;
+    color: var(--text-muted);
+  }
+  .stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    gap: 1rem;
+  }
+  .stat-card {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    padding: 1.25rem;
+    text-align: center;
+  }
+  .stat-value {
+    display: block;
+    font-size: 1.75rem;
+    font-weight: 700;
+    color: var(--accent);
+  }
+  .stat-label {
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+  }
+</style>