Frontend et backend entièrement réels : plus aucune donnée simulée

À la demande explicite de l'utilisateur après avoir constaté que
tripoli.cloud affichait un 404 vide (le frontend n'avait jamais été
déployé) : déploiement du frontend, puis remplacement complet des
mocks par de vraies données, des deux côtés.

Backend (tripoli-api) :
- users.name, files.category (file/photo/backup), table notifications
  (migration 0002).
- POST /api/auth/guest : compte invité réel et réutilisé
  (invite@tripoli.local), pas une identité simulée côté frontend.
- GET /api/files?category=... , GET /api/notifications (+ read-all/
  {id}/read), GET /api/storage (used_bytes réel, available_bytes via
  statvfs - jamais un quota inventé).
- Notifications émises réellement sur upload/suppression.

Frontend (app/) :
- src/api/*.ts appellent réellement tripoli-api (plus de mockFetch).
- Upload réel (XHR, vraie progression), suppression avec bouton dédié,
  vraies miniatures photo (<img src="/api/files/:id">).
- Session restaurée au chargement (GET /api/auth/me), logout réel.
- Retiré plutôt que simulé : 2FA, clé de récupération, accès partagés,
  albums, dossiers, "4 appareils sauvegardés", chiffres marketing et
  claim AES-256 côté client sur la page de connexion (jamais vrai -
  remplacé par le vrai : HTTPS + Argon2).

Déploiement :
- Frontend construit et déployé sur le serveur (le build local échouait
  spécifiquement sur cette machine - rolldown/esbuild natif ne répondait
  plus, cause non résolue ; contourné en buildant sur le serveur, comme
  déjà fait pour les crates Rust).
- Caddy : /var/www/tripoli-cloud servi en statique pour tripoli.cloud,
  /api/*, /healthz, /metrics toujours proxyés vers tripoli-edge.
- Pipeline CI étendu : le job deploy construit et déploie maintenant
  aussi le frontend, via un script sudo dédié supplémentaire
  (tripoli-deploy-frontend.sh) sur le compte deploy sans privilège.
- Vérifié en navigateur réel (Chrome) : inscription, connexion, invité,
  upload avec progression, photos, sauvegardes, notifications,
  suppression, déconnexion - tous testés en conditions réelles.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

app/src/components/backups/BackupRow.tsx

@@ -1,31 +1,16 @@
-import type { BackupDevice } from '../../types';
+import type { BackupItem } from '../../types';
 import { DataIcon } from '../icons/DataIcon';
 
-const STATUS_CLASSES: Record<BackupDevice['status'], string> = {
-  'up-to-date': 'bg-success/16 text-success',
-  syncing: 'bg-violet/16 text-violet',
-  late: 'bg-danger/16 text-danger',
-};
-
-const ICON_TONE: Record<BackupDevice['status'], string> = {
-  'up-to-date': 'bg-selected text-brand-soft',
-  syncing: 'bg-violet/16 text-violet',
-  late: 'bg-danger/16 text-danger',
-};
-
-export function BackupRow({ backup }: { backup: BackupDevice }) {
+export function BackupRow({ backup }: { backup: BackupItem }) {
   return (
     <div className="flex flex-wrap items-center gap-4 rounded-2xl border border-line bg-panel p-[18px]">
-      <span className={`flex h-10 w-10 flex-none items-center justify-center rounded-xl ${ICON_TONE[backup.status]}`}>
+      <span className="flex h-10 w-10 flex-none items-center justify-center rounded-xl bg-selected text-brand-soft">
         <DataIcon name={backup.icon} size={19} />
       </span>
       <div className="min-w-0 flex-1 basis-[200px]">
-        <p className="m-0 mb-[3px] text-[14.5px] font-bold text-ink">{backup.device}</p>
+        <p className="m-0 mb-[3px] text-[14.5px] font-bold text-ink">{backup.name}</p>
         <p className="m-0 text-[12.5px] text-ink-soft">{backup.detail}</p>
       </div>
-      <span className={`flex-none rounded-full px-3 py-1.5 text-[11.5px] font-bold ${STATUS_CLASSES[backup.status]}`}>
-        {backup.statusLabel}
-      </span>
     </div>
   );
 }

app/src/components/backups/BackupsView.tsx

@@ -1,20 +1,44 @@
 import { useBackups } from '../../hooks/useBackups';
+import { useFileUpload } from '../../hooks/useFileUpload';
+import { UploadZone } from '../dashboard/UploadZone';
 import { BackupRow } from './BackupRow';
 
 export function BackupsView() {
-  const backups = useBackups();
+  const { backups, refresh } = useBackups();
+  const upload = useFileUpload('backup', refresh);
 
   return (
     <div className="flex max-w-[960px] flex-col gap-6">
       <div>
-        <p className="m-0 mb-[7px] text-[12.5px] font-semibold text-ink-soft">4 appareils protégés</p>
+        <p className="m-0 mb-[7px] text-[12.5px] font-semibold text-ink-soft">
+          {backups.length} sauvegarde{backups.length === 1 ? '' : 's'} déposée{backups.length === 1 ? '' : 's'}
+        </p>
         <h1 className="m-0 text-[26px] font-extrabold leading-tight tracking-tight sm:text-[36px]">Sauvegardes</h1>
       </div>
-      <div className="flex flex-col gap-3">
-        {backups.map((b) => (
-          <BackupRow key={b.id} backup={b} />
-        ))}
-      </div>
+
+      <UploadZone
+        uploading={upload.uploading}
+        progress={upload.progress}
+        fileName={upload.fileName}
+        dragging={upload.dragging}
+        error={upload.error}
+        inputRef={upload.inputRef}
+        onPick={upload.pickFiles}
+        onInputChange={upload.onInputChange}
+        onDragOver={upload.onDragOver}
+        onDragLeave={upload.onDragLeave}
+        onDrop={upload.onDrop}
+      />
+
+      {backups.length === 0 ? (
+        <p className="m-0 text-[13px] text-ink-soft">Aucune sauvegarde pour l'instant.</p>
+      ) : (
+        <div className="flex flex-col gap-3">
+          {backups.map((b) => (
+            <BackupRow key={b.id} backup={b} />
+          ))}
+        </div>
+      )}
     </div>
   );
 }