Import Tripoli Cloud frontend prototype

React/TypeScript/Vite/Tailwind prototype from the design session (login, dashboard, photos, backups, settings views with mocked API layer). Infra work (Rust services, Ansible, OpenTofu) follows in subsequent commits. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-16 21:21:43 +02:00 · 2026-09-16 21:21:43 +02:00 · 5dbd3b96f6
commit 5dbd3b96f6
73 changed files with 4789 additions and 0 deletions
--- a/app/.env
+++ b/app/.env
@ -0,0 +1 @@
+VITE_API_URL=
--- a/app/.env.example
+++ b/app/.env.example
@ -0,0 +1,3 @@
+# Base URL of the real Tripoli Cloud API. Left empty for now: src/api/
+# returns typed mocks until the backend exists.
+VITE_API_URL=
--- a/app/.gitignore
+++ b/app/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/app/.oxlintrc.json
+++ b/app/.oxlintrc.json
@ -0,0 +1,8 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "typescript", "oxc"],
+  "rules": {
+    "react/rules-of-hooks": "error",
+    "react/only-export-components": ["warn", { "allowConstantExport": true }]
+  }
+}
--- a/app/README.md
+++ b/app/README.md
@ -0,0 +1,32 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some Oxlint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the Oxlint configuration
+
+If you are developing a production application, we recommend enabling type-aware lint rules by installing `oxlint-tsgolint` and editing `.oxlintrc.json`:
+
+```json
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "typescript", "oxc"],
+  "options": {
+    "typeAware": true
+  },
+  "rules": {
+    "react/rules-of-hooks": "error",
+    "react/only-export-components": ["warn", { "allowConstantExport": true }]
+  }
+}
+```
+
+See the [Oxlint rules documentation](https://oxc.rs/docs/guide/usage/linter/rules) for the full list of rules and categories.
--- a/app/index.html
+++ b/app/index.html
@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tripoli Cloud</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/app/package-lock.json
+++ b/app/package-lock.json
--- a/app/package.json
+++ b/app/package.json
@ -0,0 +1,29 @@
+{
+  "name": "app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "oxlint",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lucide-react": "^1.46.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8"
+  },
+  "devDependencies": {
+    "@types/node": "^24.13.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.7",
+    "@vitejs/plugin-react": "^6.1.1",
+    "autoprefixer": "^10.6.1",
+    "oxlint": "^1.81.0",
+    "postcss": "^8.5.28",
+    "tailwindcss": "^3.4.19",
+    "typescript": "~6.0.2",
+    "vite": "^8.3.0"
+  }
+}
--- a/app/postcss.config.js
+++ b/app/postcss.config.js
@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/app/public/favicon.svg
+++ b/app/public/favicon.svg
--- a/app/public/icons.svg
+++ b/app/public/icons.svg
@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@ -0,0 +1,49 @@
+import { AuthLayout } from './components/auth/AuthLayout';
+import { AppShell } from './components/layout/AppShell';
+import { BackupsView } from './components/backups/BackupsView';
+import { DashboardView } from './components/dashboard/DashboardView';
+import { PhotosView } from './components/photos/PhotosView';
+import { SettingsView } from './components/settings/SettingsView';
+import { NavigationProvider, useNavigation } from './contexts/NavigationContext';
+import { SessionProvider, useSession } from './contexts/SessionContext';
+import { ThemeProvider } from './contexts/ThemeContext';
+
+/** Content router — a plain state switch (NavigationContext.nav), no react-router. */
+function AppContent() {
+  const { nav } = useNavigation();
+
+  switch (nav) {
+    case 'dashboard':
+      return <DashboardView />;
+    case 'photos':
+      return <PhotosView />;
+    case 'backups':
+      return <BackupsView />;
+    case 'settings':
+      return <SettingsView />;
+  }
+}
+
+function Root() {
+  const { view } = useSession();
+
+  if (view === 'auth') return <AuthLayout />;
+
+  return (
+    <NavigationProvider>
+      <AppShell>
+        <AppContent />
+      </AppShell>
+    </NavigationProvider>
+  );
+}
+
+export default function App() {
+  return (
+    <ThemeProvider>
+      <SessionProvider>
+        <Root />
+      </SessionProvider>
+    </ThemeProvider>
+  );
+}
--- a/app/src/api/auth.ts
+++ b/app/src/api/auth.ts
@ -0,0 +1,53 @@
+import type { User } from '../types';
+import { mockFetch } from './client';
+
+export interface Credentials {
+  email: string;
+  password: string;
+}
+
+export interface SignupPayload extends Credentials {
+  name: string;
+}
+
+function initialsOf(name: string): string {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return '??';
+  return parts
+    .slice(0, 2)
+    .map((p) => p[0]!.toUpperCase())
+    .join('');
+}
+
+export async function login({ email }: Credentials): Promise<User> {
+  return mockFetch({
+    id: 'usr_1',
+    name: 'Leïla Barghouti',
+    initials: 'LB',
+    email,
+    role: 'Administratrice',
+    isGuest: false,
+  });
+}
+
+export async function signup({ name, email }: SignupPayload): Promise<User> {
+  return mockFetch({
+    id: 'usr_new',
+    name,
+    initials: initialsOf(name),
+    email,
+    role: 'Administratrice',
+    isGuest: false,
+  });
+}
+
+export async function loginAsGuest(): Promise<User> {
+  return mockFetch({
+    id: 'usr_guest',
+    name: 'Invité',
+    initials: 'IN',
+    email: '',
+    role: 'Accès invité',
+    isGuest: true,
+  });
+}
--- a/app/src/api/backups.ts
+++ b/app/src/api/backups.ts
@ -0,0 +1,19 @@
+import type { BackupDevice } from '../types';
+import { mockFetch } from './client';
+
+const STATUS_LABEL: Record<BackupDevice['status'], string> = {
+  'up-to-date': 'À jour',
+  syncing: 'En cours',
+  late: 'Retard 2 j',
+};
+
+const RAW: Array<Omit<BackupDevice, 'id' | 'statusLabel'>> = [
+  { device: 'Poste principal', detail: '64 Go · documents, messages, réglages', status: 'up-to-date', icon: 'smartphone' },
+  { device: 'Portable de travail', detail: '212 Go · dossier de travail et bureau', status: 'up-to-date', icon: 'laptop' },
+  { device: 'Tablette de consultation', detail: '38 Go · documents en lecture seule', status: 'syncing', icon: 'tablet' },
+  { device: 'Coffre secondaire hors site', detail: '812 Go · miroir complet du volume', status: 'late', icon: 'server' },
+];
+
+export async function getBackups(): Promise<BackupDevice[]> {
+  return mockFetch(RAW.map((b, i) => ({ ...b, id: `backup_${i}`, statusLabel: STATUS_LABEL[b.status] })));
+}
--- a/app/src/api/client.ts
+++ b/app/src/api/client.ts
@ -0,0 +1,13 @@
+/**
+ * Every function in src/api/ is written as if it called `API_BASE`, but
+ * currently resolves a local mock after a short simulated delay. Swapping
+ * in a real backend later means rewriting the body of these functions only
+ * — components and hooks never change.
+ */
+export const API_BASE = import.meta.env.VITE_API_URL;
+
+export function mockFetch<T>(data: T, delayMs = 220): Promise<T> {
+  return new Promise((resolve) => {
+    setTimeout(() => resolve(data), delayMs);
+  });
+}
--- a/app/src/api/files.ts
+++ b/app/src/api/files.ts
@ -0,0 +1,33 @@
+import { THUMB_TONES } from '../lib/gradients';
+import type { FileItem, StatItem } from '../types';
+import { mockFetch } from './client';
+
+const RAW_FILES: Array<Omit<FileItem, 'id' | 'thumbGradient'>> = [
+  { name: 'Archives_fiscales_2026.zip', kind: 'archive', extLabel: 'Archive ZIP', size: '2,4 Go', modified: 'il y a 12 min' },
+  { name: 'Contrats_signes_2026', kind: 'folder', extLabel: 'Dossier · 412 éléments', size: '18,7 Go', modified: 'il y a 2 h' },
+  { name: 'Acte_de_propriete.pdf', kind: 'document', extLabel: 'Document PDF', size: '1,1 Mo', modified: 'hier' },
+  { name: 'Backup_poste_principal', kind: 'backup', extLabel: 'Sauvegarde', size: '64 Go', modified: 'hier' },
+  { name: 'Conseil_administration.mp4', kind: 'video', extLabel: 'Vidéo MP4', size: '820 Mo', modified: 'il y a 3 jours' },
+  { name: 'Scans_administratifs', kind: 'folder', extLabel: 'Dossier · 38 éléments', size: '240 Mo', modified: 'il y a 5 jours' },
+  { name: 'Statuts_et_annexes.docx', kind: 'document', extLabel: 'Document Word', size: '96 Ko', modified: 'il y a 1 sem.' },
+  { name: 'Numerisations_1998', kind: 'folder', extLabel: 'Dossier · 219 éléments', size: '3,2 Go', modified: 'il y a 2 sem.' },
+];
+
+export async function getFiles(): Promise<FileItem[]> {
+  return mockFetch(
+    RAW_FILES.map((f, i) => ({
+      ...f,
+      id: `file_${i}`,
+      thumbGradient: THUMB_TONES[i % THUMB_TONES.length]!,
+    })),
+  );
+}
+
+export async function getDashboardStats(): Promise<StatItem[]> {
+  return mockFetch([
+    { id: 'stat_storage', label: 'Espace utilisé', value: '812 Go', note: '188 Go disponibles', icon: 'hard-drive', tone: 'brand' },
+    { id: 'stat_docs', label: 'Documents', value: '12 480', note: '+142 cette semaine', icon: 'image', tone: 'brand' },
+    { id: 'stat_devices', label: 'Postes', value: '4', note: 'tous scellés', icon: 'smartphone', tone: 'success' },
+    { id: 'stat_access', label: 'Accès actifs', value: '7', note: '3 liens expirent bientôt', icon: 'share', tone: 'violet' },
+  ]);
+}
--- a/app/src/api/notifications.ts
+++ b/app/src/api/notifications.ts
@ -0,0 +1,13 @@
+import type { NotificationItem } from '../types';
+import { mockFetch } from './client';
+
+const RAW: Array<Omit<NotificationItem, 'id'>> = [
+  { icon: 'upload', title: 'Transfert terminé', body: 'Archives_fiscales_2026.zip a été chiffré et scellé.', time: 'il y a 12 min', unread: true },
+  { icon: 'share', title: 'Nouveau dépôt', body: '42 documents ont été ajoutés au coffre Archives.', time: 'il y a 3 h', unread: true },
+  { icon: 'check', title: 'Sauvegarde iPhone', body: '64 Go synchronisés et vérifiés, sans erreur.', time: 'hier, 23:40', unread: false },
+  { icon: 'alert', title: 'Espace disque', body: "Il reste 18 % d'espace libre sur le volume principal.", time: 'il y a 2 jours', unread: false },
+];
+
+export async function getNotifications(): Promise<NotificationItem[]> {
+  return mockFetch(RAW.map((n, i) => ({ ...n, id: `notif_${i}` })));
+}
--- a/app/src/api/photos.ts
+++ b/app/src/api/photos.ts
@ -0,0 +1,28 @@
+import { THUMB_TONES, tone } from '../lib/gradients';
+import type { Album, PhotoTile } from '../types';
+import { mockFetch } from './client';
+
+const RAW_ALBUMS: Array<Omit<Album, 'id' | 'thumbGradient'>> = [
+  { name: 'Contrats', count: '412 éléments' },
+  { name: 'Titres de propriété', count: '318 éléments' },
+  { name: 'Numérisations 1998', count: '219 éléments' },
+  { name: "Pièces d'identité", count: '1 204 éléments' },
+];
+
+export async function getAlbums(): Promise<Album[]> {
+  return mockFetch(
+    RAW_ALBUMS.map((a, i) => ({ ...a, id: `album_${i}`, thumbGradient: THUMB_TONES[i % THUMB_TONES.length]! })),
+  );
+}
+
+const TILE_TONES = ['#3b4a63', '#4a3f5f', '#51413a', '#33505a', '#3d4a41', '#46384f'];
+
+export async function getPhotoTiles(): Promise<PhotoTile[]> {
+  return mockFetch(
+    Array.from({ length: 12 }, (_, i) => ({
+      id: `tile_${i}`,
+      label: `16 sept. · ${9 + i}:0${i % 6}`,
+      thumbGradient: tone(TILE_TONES[i % TILE_TONES.length]!, '#141821'),
+    })),
+  );
+}
--- a/app/src/api/settings.ts
+++ b/app/src/api/settings.ts
@ -0,0 +1,36 @@
+import type { NotificationPrefKey, SettingsValueRow } from '../types';
+import { mockFetch } from './client';
+
+export interface StaticSettingsRows {
+  language: SettingsValueRow[];
+  account: SettingsValueRow[];
+}
+
+export async function getStaticSettingsRows(): Promise<StaticSettingsRows> {
+  return mockFetch({
+    language: [
+      { kind: 'value', id: 'lang', label: "Langue de l'interface", help: 'S’applique à tous les postes connectés à ce coffre.', value: 'Français' },
+      { kind: 'value', id: 'region', label: 'Région', help: 'Détermine le format des dates, nombres et unités.', value: 'Tunisie' },
+      { kind: 'value', id: 'tz', label: 'Fuseau horaire', help: 'Utilisé pour l’horodatage des sauvegardes.', value: 'GMT+1 · Tunis' },
+      { kind: 'value', id: 'week-start', label: 'Premier jour de la semaine', help: 'Affichage des calendriers et des vues par date.', value: 'Lundi' },
+    ],
+    account: [
+      { kind: 'value', id: 'display-name', label: 'Nom affiché', help: 'Visible par les personnes autorisées sur ce coffre.', value: 'Leïla Barghouti' },
+      { kind: 'value', id: 'email', label: 'Adresse e-mail', help: 'Sert d’identifiant de connexion.', value: 'leila@domaine.tn' },
+      { kind: 'value', id: '2fa', label: 'Double authentification', help: 'Application d’authentification requise à chaque connexion.', value: 'Activée' },
+      { kind: 'value', id: 'access', label: 'Accès autorisés', help: 'Quatre personnes disposent d’une clé de déverrouillage.', value: '4 accès' },
+      { kind: 'value', id: 'recovery-key', label: 'Clé de récupération', help: 'À conserver hors ligne — elle ne peut pas être régénérée.', value: 'Téléchargée' },
+    ],
+  });
+}
+
+export const NOTIFICATION_PREF_LABELS: Record<NotificationPrefKey, { label: string; help: string }> = {
+  push: { label: 'Notifications push', help: 'Alertes sur vos appareils mobiles et de bureau.' },
+  email: { label: 'Résumé par e-mail', help: 'Un e-mail à chaque dépôt ou retrait important.' },
+  weekly: { label: 'Rapport hebdomadaire', help: 'État des sauvegardes envoyé chaque lundi.' },
+  shared: { label: 'Activité des partages', help: 'Quand un accès autorisé dépose ou retire un document.' },
+};
+
+export async function getDefaultNotificationPrefs(): Promise<Record<NotificationPrefKey, boolean>> {
+  return mockFetch({ push: true, email: false, weekly: true, shared: true });
+}
--- a/app/src/api/vault.ts
+++ b/app/src/api/vault.ts
@ -0,0 +1,11 @@
+import { mockFetch } from './client';
+
+export interface StorageSummary {
+  label: string;
+  percent: number;
+  sealedNote: string;
+}
+
+export async function getStorageSummary(): Promise<StorageSummary> {
+  return mockFetch({ label: '812 Go / 1 To', percent: 81, sealedNote: 'Coffre scellé il y a 2 h' });
+}
--- a/app/src/components/auth/AuthBackground.tsx
+++ b/app/src/components/auth/AuthBackground.tsx
@ -0,0 +1,20 @@
+import { BACKGROUND_IMAGES } from '../../lib/backgrounds';
+import { useBackgroundCrossfade } from '../../hooks/useBackgroundCrossfade';
+
+export function AuthBackground() {
+  const activeIndex = useBackgroundCrossfade();
+
+  return (
+    <div className="absolute inset-0 overflow-hidden bg-[#07080c]">
+      {BACKGROUND_IMAGES.map((bg, i) => (
+        <div
+          key={bg}
+          className="absolute inset-0 scale-105 bg-cover bg-center transition-opacity duration-[2000ms] ease-in-out"
+          style={{ background: bg, opacity: i === activeIndex ? 1 : 0 }}
+        />
+      ))}
+      <div className="absolute inset-0 bg-[linear-gradient(100deg,rgba(6,7,11,0.92)_0%,rgba(6,7,11,0.62)_46%,rgba(6,7,11,0.28)_100%)]" />
+      <div className="absolute -right-[8%] -top-[18%] h-[52vw] w-[52vw] rounded-full bg-[radial-gradient(circle,rgba(91,140,255,0.26)_0%,transparent_66%)] blur-[10px]" />
+    </div>
+  );
+}
--- a/app/src/components/auth/AuthLayout.tsx
+++ b/app/src/components/auth/AuthLayout.tsx
@ -0,0 +1,58 @@
+import { AuthBackground } from './AuthBackground';
+import { AuthPanel } from './AuthPanel';
+import { TripoliLogo, TripoliWordmark } from '../layout/TripoliLogo';
+
+const AUTH_STATS = [
+  { value: '12 480', label: 'documents indexés' },
+  { value: '4', label: 'postes sauvegardés' },
+  { value: '100 %', label: 'chiffré localement' },
+];
+
+export function AuthLayout() {
+  return (
+    <div className="relative min-h-screen overflow-hidden bg-[#07080c]">
+      <AuthBackground />
+
+      <div className="relative flex min-h-screen flex-col justify-between gap-11 p-6 sm:p-10 lg:p-[60px]">
+        <div className="flex items-center gap-2.5 text-white">
+          <TripoliLogo size={30} variant="hero" />
+          <TripoliWordmark className="text-base" />
+        </div>
+
+        <div className="flex flex-wrap items-center justify-between gap-8 sm:gap-14 lg:gap-[72px]">
+          <div className="min-w-0 max-w-[560px] flex-1 basis-[340px] text-white">
+            <span className="inline-flex items-center gap-2 rounded-full border border-white/14 bg-white/8 px-[13px] py-1.5 text-xs font-semibold tracking-wide text-white/80 backdrop-blur-md">
+              <span className="h-1.5 w-1.5 animate-tc-pulse rounded-full bg-success" />
+              Coffre-fort en ligne
+            </span>
+            <h1 className="m-0 my-4 text-[36px] font-extrabold leading-[1.04] tracking-tight text-balance sm:text-[48px] lg:text-[62px]">
+              Vos documents,
+              <br />
+              sous clé.
+            </h1>
+            <p className="m-0 max-w-[44ch] text-[15px] leading-relaxed text-white/62 sm:text-[17.5px]">
+              Documents sensibles, archives et sauvegardes dans un coffre-fort chiffré de bout en bout. Vous seul
+              détenez la clé.
+            </p>
+            <div className="mt-[38px] flex flex-wrap gap-7">
+              {AUTH_STATS.map((s) => (
+                <div key={s.label}>
+                  <p className="m-0 mb-[3px] text-[22px] font-bold tracking-tight text-white">{s.value}</p>
+                  <p className="m-0 text-[12.5px] text-white/50">{s.label}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <AuthPanel />
+        </div>
+
+        <div className="flex flex-wrap gap-5 text-xs text-white/34">
+          <span>Tripoli Cloud — 2026</span>
+          <span>Hébergé sur votre propre matériel</span>
+          <span>Sans publicité, sans traçage</span>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/app/src/components/auth/AuthPanel.tsx
+++ b/app/src/components/auth/AuthPanel.tsx
@ -0,0 +1,163 @@
+import { AlertCircle, ArrowRight, Eye, Lock, Mail, ShieldCheck } from 'lucide-react';
+import { useAuthForm } from '../../hooks/useAuthForm';
+
+export function AuthPanel() {
+  const {
+    mode,
+    setMode,
+    name,
+    setName,
+    email,
+    setEmail,
+    password,
+    setPassword,
+    emailError,
+    passwordError,
+    handleSubmit,
+    continueAsGuest,
+    loading,
+  } = useAuthForm();
+
+  const isSignup = mode === 'signup';
+
+  return (
+    <div
+      className="w-full max-w-[430px] rounded-[22px] border border-white/16 bg-white/[0.075] p-6 shadow-[0_32px_80px_rgba(0,0,0,0.5),inset_0_1px_0_rgba(255,255,255,0.18)] backdrop-blur-2xl backdrop-saturate-150 sm:p-[34px]"
+      style={{ colorScheme: 'dark' }}
+    >
+      <h2 className="m-0 mb-1.5 text-[23px] font-bold tracking-tight text-white">
+        {isSignup ? 'Créer votre espace' : 'Bon retour'}
+      </h2>
+      <p className="m-0 mb-6 text-[13.5px] text-white/55">
+        {isSignup ? 'Un coffre-fort chiffré, une seule clé : la vôtre.' : 'Déverrouillez votre coffre-fort.'}
+      </p>
+
+      <div className="mb-6 flex gap-1 rounded-xl border border-white/8 bg-black/28 p-1">
+        <button
+          type="button"
+          onClick={() => setMode('login')}
+          className={`flex-1 rounded-[9px] py-2.5 text-[13px] font-semibold transition-colors ${
+            mode === 'login' ? 'bg-white/14 text-white' : 'bg-transparent text-white/55'
+          }`}
+        >
+          Connexion
+        </button>
+        <button
+          type="button"
+          onClick={() => setMode('signup')}
+          className={`flex-1 rounded-[9px] py-2.5 text-[13px] font-semibold transition-colors ${
+            mode === 'signup' ? 'bg-white/14 text-white' : 'bg-transparent text-white/55'
+          }`}
+        >
+          Créer un compte
+        </button>
+      </div>
+
+      <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+        {isSignup && (
+          <div className="flex flex-col gap-1.5">
+            <label htmlFor="tc-name" className="text-[12.5px] font-semibold text-white/72">
+              Nom complet
+            </label>
+            <input
+              id="tc-name"
+              name="name"
+              type="text"
+              autoComplete="name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Leïla Barghouti"
+              className="w-full rounded-xl border border-white/14 bg-black/26 px-[15px] py-3.5 text-[14.5px] text-white outline-none placeholder:text-white/34"
+            />
+          </div>
+        )}
+
+        <div className="flex flex-col gap-1.5">
+          <label htmlFor="tc-email" className="text-[12.5px] font-semibold text-white/72">
+            Adresse e-mail
+          </label>
+          <div className="relative flex items-center">
+            <Mail size={16} className="absolute left-3.5 text-white/40" strokeWidth={1.8} />
+            <input
+              id="tc-email"
+              name="email"
+              type="email"
+              autoComplete="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              aria-invalid={emailError}
+              aria-describedby="tc-email-err"
+              placeholder="vous@domaine.tn"
+              className={`w-full rounded-xl border bg-black/26 py-3.5 pl-10 pr-[15px] text-[14.5px] text-white outline-none placeholder:text-white/34 ${
+                emailError ? 'border-danger' : 'border-white/14'
+              }`}
+            />
+          </div>
+          {emailError && (
+            <span id="tc-email-err" className="flex items-center gap-1.5 text-xs text-danger">
+              <AlertCircle size={13} />
+              Saisissez une adresse e-mail valide.
+            </span>
+          )}
+        </div>
+
+        <div className="flex flex-col gap-1.5">
+          <div className="flex items-baseline justify-between gap-3">
+            <label htmlFor="tc-pass" className="text-[12.5px] font-semibold text-white/72">
+              Mot de passe
+            </label>
+            <a href="#tc-pass" className="text-xs text-brand-soft hover:text-[#a8c2ff]">
+              Oublié ?
+            </a>
+          </div>
+          <div className="relative flex items-center">
+            <Lock size={16} className="absolute left-3.5 text-white/40" strokeWidth={1.8} />
+            <input
+              id="tc-pass"
+              name="password"
+              type="password"
+              autoComplete="current-password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              aria-invalid={passwordError}
+              aria-describedby="tc-pass-err"
+              placeholder="••••••••••"
+              className={`w-full rounded-xl border bg-black/26 py-3.5 pl-10 pr-[15px] text-[14.5px] text-white outline-none placeholder:text-white/34 ${
+                passwordError ? 'border-danger' : 'border-white/14'
+              }`}
+            />
+          </div>
+          {passwordError && (
+            <span id="tc-pass-err" className="flex items-center gap-1.5 text-xs text-danger">
+              <AlertCircle size={13} />
+              Huit caractères minimum.
+            </span>
+          )}
+        </div>
+
+        <button
+          type="submit"
+          disabled={loading}
+          className="mt-1 flex w-full items-center justify-center gap-2.5 rounded-xl bg-brand-gradient px-[18px] py-3.5 text-[14.5px] font-bold text-white shadow-[0_12px_30px_rgba(91,140,255,0.34)] transition-[filter] hover:brightness-110 disabled:opacity-70"
+        >
+          <span>{isSignup ? 'Créer mon compte' : 'Se connecter'}</span>
+          <ArrowRight size={17} />
+        </button>
+
+        <button
+          type="button"
+          onClick={() => void continueAsGuest()}
+          className="flex w-full items-center justify-center gap-2 rounded-xl border border-white/18 bg-white/6 px-[18px] py-[13px] text-[13.5px] font-semibold text-white transition-colors hover:bg-white/12"
+        >
+          <Eye size={16} strokeWidth={1.8} />
+          Visiter en tant qu'invité
+        </button>
+
+        <div className="mt-1.5 flex items-center gap-2.5 border-t border-white/10 pt-4 text-xs text-white/48">
+          <ShieldCheck size={14} className="text-success" strokeWidth={2} />
+          Chiffrement AES-256 côté client — aucune donnée en clair sur le serveur.
+        </div>
+      </form>
+    </div>
+  );
+}
--- a/app/src/components/backups/BackupRow.tsx
+++ b/app/src/components/backups/BackupRow.tsx
@ -0,0 +1,31 @@
+import type { BackupDevice } 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 }) {
+  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]}`}>
+        <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 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>
+  );
+}
--- a/app/src/components/backups/BackupsView.tsx
+++ b/app/src/components/backups/BackupsView.tsx
@ -0,0 +1,20 @@
+import { useBackups } from '../../hooks/useBackups';
+import { BackupRow } from './BackupRow';
+
+export function BackupsView() {
+  const backups = useBackups();
+
+  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>
+        <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>
+    </div>
+  );
+}
--- a/app/src/components/dashboard/CreateMenu.tsx
+++ b/app/src/components/dashboard/CreateMenu.tsx
@ -0,0 +1,46 @@
+import { Plus } from 'lucide-react';
+import { useNavigation } from '../../contexts/NavigationContext';
+import { DataIcon } from '../icons/DataIcon';
+import type { IconName } from '../../types';
+
+const OPTIONS: Array<{ icon: IconName; label: string }> = [
+  { icon: 'folder-plus', label: 'Nouveau dossier' },
+  { icon: 'file-pen', label: 'Nouveau document' },
+  { icon: 'upload', label: 'Importer des fichiers' },
+];
+
+export function CreateMenu() {
+  const { createOpen, toggleCreate, closeCreate } = useNavigation();
+
+  return (
+    <div className="relative">
+      <button
+        type="button"
+        onClick={toggleCreate}
+        aria-expanded={createOpen}
+        className="flex items-center gap-2 rounded-xl bg-brand-gradient px-[17px] py-3 text-[13.5px] font-bold text-white shadow-[0_10px_26px_rgba(91,140,255,0.3)] transition-[filter] hover:brightness-110"
+      >
+        <Plus size={16} strokeWidth={2.2} />
+        Créer
+      </button>
+
+      {createOpen && (
+        <div className="animate-tc-in absolute right-0 top-[50px] z-50 w-[232px] rounded-2xl border border-line bg-panel2 p-1.5 shadow-tc backdrop-blur-xl">
+          {OPTIONS.map((opt) => (
+            <button
+              key={opt.label}
+              type="button"
+              onClick={closeCreate}
+              className="flex w-full items-center gap-2.5 rounded-[10px] px-3 py-2.5 text-left text-[13.5px] font-semibold text-ink hover:bg-field"
+            >
+              <span className="flex h-7 w-7 items-center justify-center rounded-[9px] bg-selected text-brand-soft">
+                <DataIcon name={opt.icon} size={15} />
+              </span>
+              {opt.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
--- a/app/src/components/dashboard/DashboardView.tsx
+++ b/app/src/components/dashboard/DashboardView.tsx
@ -0,0 +1,38 @@
+import { useDashboardStats } from '../../hooks/useDashboardStats';
+import { CreateMenu } from './CreateMenu';
+import { RecentFiles } from './RecentFiles';
+import { StatCard } from './StatCard';
+import { UploadZone } from './UploadZone';
+
+interface DashboardViewProps {
+  /** Forwarded to UploadZone — undefined lets it run its own demo transfer. */
+  uploadProgress?: number;
+}
+
+export function DashboardView({ uploadProgress }: DashboardViewProps) {
+  const stats = useDashboardStats();
+
+  return (
+    <div className="flex max-w-[1240px] flex-col gap-6">
+      <div className="flex flex-wrap items-end justify-between gap-4">
+        <div>
+          <p className="m-0 mb-[7px] text-[12.5px] font-semibold text-ink-soft">Mercredi 16 septembre</p>
+          <h1 className="m-0 text-[26px] font-extrabold leading-tight tracking-tight sm:text-[36px]">
+            Coffre déverrouillé.
+          </h1>
+        </div>
+        <CreateMenu />
+      </div>
+
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(196px,1fr))] gap-3.5">
+        {stats.map((stat) => (
+          <StatCard key={stat.id} stat={stat} />
+        ))}
+      </div>
+
+      <UploadZone progress={uploadProgress} />
+
+      <RecentFiles />
+    </div>
+  );
+}
--- a/app/src/components/dashboard/FileGridItem.tsx
+++ b/app/src/components/dashboard/FileGridItem.tsx
@ -0,0 +1,19 @@
+import type { FileItem } from '../../types';
+
+export function FileGridItem({ file }: { file: FileItem }) {
+  return (
+    <div className="flex flex-col gap-3 rounded-2xl border border-line bg-field p-3.5 transition-colors hover:bg-panel2">
+      <div className="relative h-[88px] overflow-hidden rounded-xl" style={{ background: file.thumbGradient }}>
+        <span className="absolute left-2 top-2 rounded-[7px] bg-black/55 px-2 py-1 text-[10px] font-bold uppercase tracking-wide text-white backdrop-blur-sm">
+          {file.extLabel}
+        </span>
+      </div>
+      <div>
+        <p className="m-0 mb-1 break-words text-[13.5px] font-semibold leading-snug text-ink">{file.name}</p>
+        <p className="m-0 text-[11.5px] text-ink-soft">
+          {file.size} · {file.modified}
+        </p>
+      </div>
+    </div>
+  );
+}
--- a/app/src/components/dashboard/FileListRow.tsx
+++ b/app/src/components/dashboard/FileListRow.tsx
@ -0,0 +1,15 @@
+import type { FileItem } from '../../types';
+
+export function FileListRow({ file }: { file: FileItem }) {
+  return (
+    <div className="flex items-center gap-4 border-b border-line px-4 py-3 transition-colors hover:bg-field sm:px-[18px]">
+      <span className="h-[34px] w-[34px] flex-none rounded-[10px]" style={{ background: file.thumbGradient }} />
+      <div className="min-w-0 flex-1">
+        <p className="m-0 truncate text-[13.5px] font-semibold text-ink">{file.name}</p>
+        <p className="m-0 mt-0.5 text-[11.5px] text-ink-soft">{file.extLabel}</p>
+      </div>
+      <span className="w-[90px] flex-none text-[12.5px] text-ink-soft">{file.size}</span>
+      <span className="w-[120px] flex-none text-[12.5px] text-ink-soft">{file.modified}</span>
+    </div>
+  );
+}
--- a/app/src/components/dashboard/RecentFiles.tsx
+++ b/app/src/components/dashboard/RecentFiles.tsx
@ -0,0 +1,84 @@
+import { ArrowUpDown, Grid2x2, List } from 'lucide-react';
+import { useRecentFiles } from '../../hooks/useRecentFiles';
+import { FileGridItem } from './FileGridItem';
+import { FileListRow } from './FileListRow';
+
+export function RecentFiles() {
+  const { files, filters, filter, setFilter, sortDesc, toggleSort, gridView, setGridView } = useRecentFiles();
+
+  return (
+    <div className="overflow-hidden rounded-[18px] border border-line bg-panel backdrop-blur-md">
+      <div className="flex flex-wrap items-center justify-between gap-3.5 border-b border-line px-4 py-4 sm:px-[18px]">
+        <h2 className="m-0 text-base font-bold tracking-tight text-ink">Fichiers récents</h2>
+        <div className="flex flex-wrap items-center gap-2">
+          {filters.map((f) => {
+            const active = filter === f;
+            return (
+              <button
+                key={f}
+                type="button"
+                onClick={() => setFilter(f)}
+                className={`rounded-full border px-[13px] py-1.5 text-[12.5px] font-semibold transition-colors ${
+                  active ? 'border-brand/40 bg-selected text-brand-soft' : 'border-line bg-field text-ink-soft'
+                }`}
+              >
+                {f}
+              </button>
+            );
+          })}
+          <button
+            type="button"
+            onClick={toggleSort}
+            className="flex items-center gap-1.5 rounded-full border border-line bg-field px-[13px] py-1.5 text-[12.5px] font-semibold text-ink"
+          >
+            <ArrowUpDown size={14} strokeWidth={1.8} />
+            {sortDesc ? 'Plus récents' : 'Plus anciens'}
+          </button>
+          <div className="flex gap-0.5 rounded-[11px] border border-line bg-field p-[3px]">
+            <button
+              type="button"
+              onClick={() => setGridView(true)}
+              aria-label="Vue grille"
+              aria-pressed={gridView}
+              className={`flex h-7 w-[30px] items-center justify-center rounded-lg ${
+                gridView ? 'bg-selected text-brand-soft' : 'text-ink-soft'
+              }`}
+            >
+              <Grid2x2 size={15} strokeWidth={1.9} />
+            </button>
+            <button
+              type="button"
+              onClick={() => setGridView(false)}
+              aria-label="Vue liste"
+              aria-pressed={!gridView}
+              className={`flex h-7 w-[30px] items-center justify-center rounded-lg ${
+                !gridView ? 'bg-selected text-brand-soft' : 'text-ink-soft'
+              }`}
+            >
+              <List size={15} strokeWidth={1.9} />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {gridView ? (
+        <div className="grid grid-cols-[repeat(auto-fill,minmax(188px,1fr))] gap-3.5 p-[18px]">
+          {files.map((file) => (
+            <FileGridItem key={file.id} file={file} />
+          ))}
+        </div>
+      ) : (
+        <div>
+          <div className="flex items-center gap-4 border-b border-line px-4 py-2.5 text-[11.5px] font-bold uppercase tracking-wide text-ink-soft sm:px-[18px]">
+            <span className="flex-1">Nom</span>
+            <span className="w-[90px] flex-none">Taille</span>
+            <span className="w-[120px] flex-none">Modifié</span>
+          </div>
+          {files.map((file) => (
+            <FileListRow key={file.id} file={file} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
--- a/app/src/components/dashboard/StatCard.tsx
+++ b/app/src/components/dashboard/StatCard.tsx
@ -0,0 +1,23 @@
+import type { StatItem } from '../../types';
+import { DataIcon } from '../icons/DataIcon';
+
+const TONE_CLASSES: Record<StatItem['tone'], string> = {
+  brand: 'bg-selected text-brand-soft',
+  success: 'bg-success/16 text-success',
+  violet: 'bg-violet/16 text-violet',
+};
+
+export function StatCard({ stat }: { stat: StatItem }) {
+  return (
+    <div className="rounded-2xl border border-line bg-panel p-[18px] backdrop-blur-md">
+      <div className="mb-3.5 flex items-center justify-between gap-2.5">
+        <span className="text-[12.5px] font-semibold text-ink-soft">{stat.label}</span>
+        <span className={`flex h-7 w-7 items-center justify-center rounded-[9px] ${TONE_CLASSES[stat.tone]}`}>
+          <DataIcon name={stat.icon} size={15} />
+        </span>
+      </div>
+      <p className="m-0 mb-1 text-[27px] font-extrabold tracking-tight text-ink">{stat.value}</p>
+      <p className="m-0 text-xs text-ink-soft">{stat.note}</p>
+    </div>
+  );
+}
--- a/app/src/components/dashboard/UploadZone.tsx
+++ b/app/src/components/dashboard/UploadZone.tsx
@ -0,0 +1,60 @@
+import { Upload } from 'lucide-react';
+import { useUploadSimulation } from '../../hooks/useUploadSimulation';
+import type { UploadTask } from '../../types';
+
+interface UploadZoneProps {
+  /** Piloted externally once real transfers exist; undefined = simulate locally. */
+  progress?: UploadTask['progress'];
+}
+
+export function UploadZone({ progress: externalProgress }: UploadZoneProps) {
+  const { uploading, progress, dragging, start, onDragOver, onDragLeave, onDrop } =
+    useUploadSimulation(externalProgress);
+
+  return (
+    <div
+      onDragOver={onDragOver}
+      onDragLeave={onDragLeave}
+      onDrop={onDrop}
+      onClick={start}
+      className={`cursor-pointer rounded-[18px] border-[1.5px] border-dashed p-6 transition-colors sm:p-[34px] ${
+        dragging ? 'border-brand bg-selected' : 'border-line bg-panel'
+      }`}
+    >
+      <div className="flex flex-wrap items-center gap-[18px]">
+        <span className="flex h-[52px] w-[52px] flex-none items-center justify-center rounded-2xl border border-brand/30 bg-selected text-brand-soft">
+          <Upload size={22} strokeWidth={2} />
+        </span>
+        <div className="min-w-0 flex-1 basis-[260px]">
+          <p className="m-0 mb-[5px] text-[16.5px] font-bold tracking-tight text-ink">
+            {dragging ? 'Relâchez pour importer' : 'Déposez vos fichiers ici'}
+          </p>
+          <p className="m-0 text-[13px] leading-relaxed text-ink-soft">
+            JPEG, RAW, MP4, PDF — jusqu'à 5 Go par fichier. Cliquez pour simuler un transfert.
+          </p>
+        </div>
+        <span className="flex-none rounded-[11px] border border-line bg-field px-4 py-2.5 text-[13px] font-semibold text-ink">
+          Parcourir
+        </span>
+      </div>
+
+      {uploading && (
+        <div className="mt-6 border-t border-line pt-5">
+          <div className="mb-2.5 flex justify-between gap-3 text-[12.5px] font-semibold text-ink">
+            <span>Archives_fiscales_2026.zip</span>
+            <span className="text-brand-soft">{progress} %</span>
+          </div>
+          <div className="h-2 overflow-hidden rounded-full bg-field">
+            <div
+              className="upload-progress-stripes h-2 rounded-full bg-brand-gradient transition-[width] duration-300 ease-out"
+              style={{ width: `${progress}%` }}
+            />
+          </div>
+          <p className="m-0 mt-2.5 text-xs text-ink-soft">
+            {progress >= 100 ? 'Transfert terminé — fichier chiffré et vérifié.' : 'Chiffrement en cours côté client…'}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
--- a/app/src/components/icons/DataIcon.tsx
+++ b/app/src/components/icons/DataIcon.tsx
@ -0,0 +1,14 @@
+import type { IconName } from '../../types';
+import { ICON_REGISTRY } from './iconRegistry';
+
+interface DataIconProps {
+  name: IconName;
+  size?: number;
+  className?: string;
+}
+
+/** Renders a lucide-react icon selected by the string key our API mocks return. */
+export function DataIcon({ name, size = 16, className }: DataIconProps) {
+  const Icon = ICON_REGISTRY[name];
+  return <Icon size={size} className={className} strokeWidth={1.8} />;
+}
--- a/app/src/components/icons/iconRegistry.ts
+++ b/app/src/components/icons/iconRegistry.ts
@ -0,0 +1,31 @@
+import {
+  AlertTriangle,
+  CheckCircle2,
+  FilePen,
+  FolderPlus,
+  HardDrive,
+  Image,
+  Laptop,
+  Server,
+  Share2,
+  Smartphone,
+  Tablet,
+  Upload,
+  type LucideIcon,
+} from 'lucide-react';
+import type { IconName } from '../../types';
+
+export const ICON_REGISTRY: Record<IconName, LucideIcon> = {
+  'hard-drive': HardDrive,
+  image: Image,
+  smartphone: Smartphone,
+  share: Share2,
+  'folder-plus': FolderPlus,
+  'file-pen': FilePen,
+  upload: Upload,
+  check: CheckCircle2,
+  alert: AlertTriangle,
+  laptop: Laptop,
+  tablet: Tablet,
+  server: Server,
+};
--- a/app/src/components/layout/AppShell.tsx
+++ b/app/src/components/layout/AppShell.tsx
@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import { DrawerOverlay } from './DrawerOverlay';
+import { TopBar } from './TopBar';
+import { TripoliSidebar } from './TripoliSidebar';
+
+export function AppShell({ children }: { children: ReactNode }) {
+  return (
+    <div className="relative min-h-screen overflow-hidden bg-bg">
+      <div className="pointer-events-none fixed -left-[140px] -top-[220px] h-[620px] w-[620px] rounded-full bg-[radial-gradient(circle,rgba(91,140,255,0.16)_0%,transparent_68%)]" />
+      <div className="pointer-events-none fixed -bottom-[260px] -right-[160px] h-[680px] w-[680px] rounded-full bg-[radial-gradient(circle,rgba(124,92,255,0.14)_0%,transparent_68%)]" />
+
+      <div className="relative flex min-h-screen items-stretch">
+        <TripoliSidebar />
+        <DrawerOverlay />
+
+        <div className="flex min-w-0 flex-1 flex-col">
+          <TopBar />
+          <main className="min-w-0 flex-1 p-5 sm:p-9">{children}</main>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/app/src/components/layout/DrawerOverlay.tsx
+++ b/app/src/components/layout/DrawerOverlay.tsx
@ -0,0 +1,17 @@
+import { useNavigation } from '../../contexts/NavigationContext';
+import { useIsMobile } from '../../hooks/useIsMobile';
+
+export function DrawerOverlay() {
+  const { drawerOpen, closeDrawer } = useNavigation();
+  const isMobile = useIsMobile();
+
+  if (!isMobile || !drawerOpen) return null;
+
+  return (
+    <div
+      onClick={closeDrawer}
+      className="fixed inset-0 z-30 bg-black/60 backdrop-blur-sm"
+      aria-hidden="true"
+    />
+  );
+}
--- a/app/src/components/layout/TopBar.tsx
+++ b/app/src/components/layout/TopBar.tsx
@ -0,0 +1,47 @@
+import { Menu, Moon, Search, Sun } from 'lucide-react';
+import { useTheme } from '../../contexts/ThemeContext';
+import { useNavigation } from '../../contexts/NavigationContext';
+import { useIsMobile } from '../../hooks/useIsMobile';
+import { NotificationCenter } from '../notifications/NotificationCenter';
+
+export function TopBar() {
+  const { theme, toggleTheme } = useTheme();
+  const { openDrawer } = useNavigation();
+  const isMobile = useIsMobile();
+
+  return (
+    <header className="sticky top-0 z-[60] flex items-center gap-3 border-b border-line bg-panel p-3.5 backdrop-blur-xl sm:px-8">
+      {isMobile && (
+        <button
+          type="button"
+          onClick={openDrawer}
+          aria-label="Ouvrir le menu"
+          className="flex h-[38px] w-[38px] flex-none items-center justify-center rounded-[11px] border border-line bg-field text-ink"
+        >
+          <Menu size={18} />
+        </button>
+      )}
+
+      <div className="flex max-w-[440px] flex-1 items-center gap-2.5 rounded-xl border border-line bg-field px-3.5 py-2.5">
+        <Search size={16} className="flex-none opacity-50" strokeWidth={1.8} />
+        <input
+          aria-label="Rechercher un fichier"
+          placeholder="Rechercher un document, un dossier, une référence…"
+          className="w-full min-w-0 flex-1 bg-transparent text-[13.5px] text-ink outline-none"
+        />
+      </div>
+
+      <div className="ml-auto flex items-center gap-2">
+        <button
+          type="button"
+          onClick={toggleTheme}
+          aria-label="Basculer clair / sombre"
+          className="flex h-[38px] w-[38px] items-center justify-center rounded-[11px] border border-line bg-field text-ink"
+        >
+          {theme === 'dark' ? <Moon size={17} strokeWidth={1.8} /> : <Sun size={17} strokeWidth={1.8} />}
+        </button>
+        <NotificationCenter />
+      </div>
+    </header>
+  );
+}
--- a/app/src/components/layout/TripoliLogo.tsx
+++ b/app/src/components/layout/TripoliLogo.tsx
@ -0,0 +1,32 @@
+interface TripoliLogoProps {
+  size?: number;
+  variant?: 'hero' | 'sidebar';
+}
+
+/** Minimalist inline SVG mark — no external asset, easy to swap later. */
+export function TripoliLogo({ size = 28, variant = 'sidebar' }: TripoliLogoProps) {
+  const badgeFill = variant === 'hero' ? 'rgba(255,255,255,0.08)' : 'rgba(91,140,255,0.14)';
+  const badgeStroke = variant === 'hero' ? 'rgba(255,255,255,0.22)' : 'rgba(91,140,255,0.36)';
+
+  return (
+    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden="true">
+      <rect x="1" y="1" width="30" height="30" rx="9" fill={badgeFill} stroke={badgeStroke} />
+      <path
+        d="M10 20.5h11a3.6 3.6 0 0 0 .3-7.2 5.6 5.6 0 0 0-10.7-1.1A3.6 3.6 0 0 0 10 20.5z"
+        fill="none"
+        stroke="#7ba4ff"
+        strokeWidth="1.6"
+        strokeLinejoin="round"
+      />
+      <circle cx="16" cy="16.6" r="1.5" fill="#5b8cff" />
+    </svg>
+  );
+}
+
+export function TripoliWordmark({ className = '' }: { className?: string }) {
+  return (
+    <span className={`text-[15px] font-bold tracking-tight ${className}`}>
+      Tripoli<span className="font-medium opacity-55"> Cloud</span>
+    </span>
+  );
+}
--- a/app/src/components/layout/TripoliSidebar.tsx
+++ b/app/src/components/layout/TripoliSidebar.tsx
@ -0,0 +1,96 @@
+import { DatabaseBackup, Image, LayoutGrid, LogOut, Settings, X } from 'lucide-react';
+import { useNavigation } from '../../contexts/NavigationContext';
+import { useSession } from '../../contexts/SessionContext';
+import { useIsMobile } from '../../hooks/useIsMobile';
+import { useStorageSummary } from '../../hooks/useStorageSummary';
+import type { NavKey } from '../../types';
+import { TripoliLogo, TripoliWordmark } from './TripoliLogo';
+
+const NAV_ITEMS: Array<{ key: NavKey; label: string; icon: typeof LayoutGrid }> = [
+  { key: 'dashboard', label: 'Tableau de bord', icon: LayoutGrid },
+  { key: 'photos', label: 'Photos', icon: Image },
+  { key: 'backups', label: 'Sauvegardes', icon: DatabaseBackup },
+  { key: 'settings', label: 'Réglages', icon: Settings },
+];
+
+export function TripoliSidebar() {
+  const { nav, goTo, drawerOpen, closeDrawer } = useNavigation();
+  const { user, logout } = useSession();
+  const isMobile = useIsMobile();
+  const summary = useStorageSummary();
+
+  if (isMobile && !drawerOpen) return null;
+
+  return (
+    <aside
+      className={`z-40 flex w-64 flex-none flex-col gap-6 border-r border-line bg-panel2 p-[18px] pt-6 backdrop-blur-2xl ${
+        isMobile ? 'fixed inset-y-0 left-0 min-h-screen' : 'sticky top-0 min-h-screen'
+      }`}
+    >
+      <div className="flex items-center justify-between gap-2.5 px-1.5">
+        <div className="flex items-center gap-2.5">
+          <TripoliLogo size={28} />
+          <TripoliWordmark className="text-ink" />
+        </div>
+        {isMobile && (
+          <button
+            type="button"
+            onClick={closeDrawer}
+            aria-label="Fermer le menu"
+            className="flex h-[30px] w-[30px] items-center justify-center rounded-[9px] border border-line text-ink"
+          >
+            <X size={15} />
+          </button>
+        )}
+      </div>
+
+      <nav className="flex flex-col gap-[3px]">
+        {NAV_ITEMS.map(({ key, label, icon: Icon }) => {
+          const active = nav === key;
+          return (
+            <button
+              key={key}
+              type="button"
+              onClick={() => goTo(key)}
+              className={`flex items-center gap-2.5 rounded-[11px] px-3 py-2.5 text-left text-sm font-semibold transition-colors ${
+                active ? 'bg-selected text-ink' : 'bg-transparent text-ink-soft hover:bg-field'
+              }`}
+            >
+              <Icon size={17} strokeWidth={1.8} />
+              {label}
+            </button>
+          );
+        })}
+      </nav>
+
+      <div className="rounded-2xl border border-line bg-panel p-4">
+        <div className="flex justify-between gap-2 text-xs font-semibold">
+          <span className="text-ink">Stockage</span>
+          <span className="text-ink-soft">{summary?.label ?? '—'}</span>
+        </div>
+        <div className="my-2.5 h-[7px] overflow-hidden rounded-full bg-field">
+          <div className="h-[7px] rounded-full bg-brand-gradient" style={{ width: `${summary?.percent ?? 0}%` }} />
+        </div>
+        <p className="m-0 text-[11.5px] leading-relaxed text-ink-soft">{summary?.sealedNote ?? ''}</p>
+      </div>
+
+      <div className="mt-auto flex items-center gap-2.5 rounded-2xl border border-line bg-panel p-2.5">
+        <span className="flex h-[34px] w-[34px] flex-none items-center justify-center rounded-[11px] bg-brand-gradient text-[12.5px] font-bold text-white">
+          {user?.initials ?? '??'}
+        </span>
+        <div className="min-w-0 flex-1">
+          <p className="m-0 truncate text-[13px] font-semibold text-ink">{user?.name ?? 'Invité'}</p>
+          <p className="m-0 text-[11.5px] text-ink-soft">{user?.role ?? ''}</p>
+        </div>
+        <button
+          type="button"
+          onClick={logout}
+          aria-label="Se déconnecter"
+          className="flex h-7 w-7 flex-none items-center justify-center rounded-lg text-ink-soft"
+        >
+          <LogOut size={16} strokeWidth={1.8} />
+        </button>
+      </div>
+    </aside>
+  );
+}
--- a/app/src/components/notifications/NotificationCenter.tsx
+++ b/app/src/components/notifications/NotificationCenter.tsx
@ -0,0 +1,64 @@
+import { Bell } from 'lucide-react';
+import { useNavigation } from '../../contexts/NavigationContext';
+import { useNotifications } from '../../hooks/useNotifications';
+import { DataIcon } from '../icons/DataIcon';
+
+export function NotificationCenter() {
+  const { notifOpen, toggleNotif, closeNotif } = useNavigation();
+  const { notifications, unreadCount, markAllRead } = useNotifications();
+
+  return (
+    <div className="relative">
+      <button
+        type="button"
+        onClick={toggleNotif}
+        aria-label="Notifications"
+        aria-expanded={notifOpen}
+        className="relative flex h-[38px] w-[38px] items-center justify-center rounded-[11px] border border-line bg-field text-ink"
+      >
+        <Bell size={17} strokeWidth={1.8} />
+        {unreadCount > 0 && (
+          <span className="absolute -right-1 -top-1 flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-brand-gradient px-1.5 text-[10.5px] font-bold text-white">
+            {unreadCount}
+          </span>
+        )}
+      </button>
+
+      {notifOpen && (
+        <div className="animate-tc-in absolute right-0 top-[48px] z-50 w-[348px] max-w-[84vw] overflow-hidden rounded-2xl border border-line bg-panel2 shadow-tc backdrop-blur-2xl">
+          <div className="flex items-center justify-between gap-3 border-b border-line px-4 py-3.5">
+            <span className="text-[13.5px] font-bold text-ink">Notifications</span>
+            <button type="button" onClick={markAllRead} className="text-[12.5px] font-semibold text-brand-soft">
+              Tout marquer lu
+            </button>
+          </div>
+
+          {notifications.map((n) => (
+            <div
+              key={n.id}
+              className={`flex gap-3 border-b border-line px-4 py-3.5 ${n.unread ? 'bg-selected/40' : ''}`}
+            >
+              <span className="flex h-8 w-8 flex-none items-center justify-center rounded-[10px] bg-selected text-brand-soft">
+                <DataIcon name={n.icon} />
+              </span>
+              <div className="min-w-0 flex-1">
+                <p className="m-0 mb-[3px] text-[13.5px] font-semibold leading-snug text-ink">{n.title}</p>
+                <p className="m-0 text-[12.5px] leading-relaxed text-ink-soft">{n.body}</p>
+                <p className="m-0 mt-1.5 text-[11.5px] text-ink-soft">{n.time}</p>
+              </div>
+              {n.unread && <span className="mt-1.5 h-[7px] w-[7px] flex-none rounded-full bg-brand" />}
+            </div>
+          ))}
+
+          <button
+            type="button"
+            onClick={closeNotif}
+            className="w-full bg-transparent py-3.5 text-[12.5px] font-semibold text-ink-soft"
+          >
+            Fermer
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
--- a/app/src/components/photos/AlbumCard.tsx
+++ b/app/src/components/photos/AlbumCard.tsx
@ -0,0 +1,13 @@
+import type { Album } from '../../types';
+
+export function AlbumCard({ album }: { album: Album }) {
+  return (
+    <div className="w-[200px] flex-none overflow-hidden rounded-2xl border border-line bg-panel">
+      <div className="h-[116px]" style={{ background: album.thumbGradient }} />
+      <div className="p-3.5">
+        <p className="m-0 mb-[3px] text-[13.5px] font-bold text-ink">{album.name}</p>
+        <p className="m-0 text-[11.5px] text-ink-soft">{album.count}</p>
+      </div>
+    </div>
+  );
+}
--- a/app/src/components/photos/PhotoTile.tsx
+++ b/app/src/components/photos/PhotoTile.tsx
@ -0,0 +1,14 @@
+import type { PhotoTile as PhotoTileData } from '../../types';
+
+export function PhotoTile({ tile }: { tile: PhotoTileData }) {
+  return (
+    <div
+      className="relative aspect-square cursor-pointer overflow-hidden rounded-[13px] border border-line transition-transform hover:scale-[1.025]"
+      style={{ background: tile.thumbGradient }}
+    >
+      <span className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-[rgba(5,6,10,0.72)] to-transparent px-2.5 pb-2 pt-[18px] text-[11px] font-semibold text-white">
+        {tile.label}
+      </span>
+    </div>
+  );
+}
--- a/app/src/components/photos/PhotosView.tsx
+++ b/app/src/components/photos/PhotosView.tsx
@ -0,0 +1,50 @@
+import { usePhotos } from '../../hooks/usePhotos';
+import { AlbumCard } from './AlbumCard';
+import { PhotoTile } from './PhotoTile';
+
+export function PhotosView() {
+  const { albums, tiles, scopes, scope, setScope } = usePhotos();
+
+  return (
+    <div className="flex max-w-[1240px] flex-col gap-6">
+      <div className="flex flex-wrap items-end justify-between gap-4">
+        <div>
+          <p className="m-0 mb-[7px] text-[12.5px] font-semibold text-ink-soft">12 480 documents · 318 numérisations</p>
+          <h1 className="m-0 text-[26px] font-extrabold leading-tight tracking-tight sm:text-[36px]">Photos</h1>
+        </div>
+        <div className="flex gap-2">
+          {scopes.map((s) => {
+            const active = scope === s;
+            return (
+              <button
+                key={s}
+                type="button"
+                onClick={() => setScope(s)}
+                className={`rounded-full border px-[15px] py-2 text-[12.5px] font-semibold transition-colors ${
+                  active ? 'border-brand/40 bg-selected text-brand-soft' : 'border-line bg-field text-ink-soft'
+                }`}
+              >
+                {s}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      <div className="flex gap-3.5 overflow-x-auto pb-1">
+        {albums.map((album) => (
+          <AlbumCard key={album.id} album={album} />
+        ))}
+      </div>
+
+      <div>
+        <h2 className="m-0 mb-3.5 text-sm font-bold tracking-tight text-ink">Septembre 2026</h2>
+        <div className="grid grid-cols-[repeat(auto-fill,minmax(132px,1fr))] gap-2.5">
+          {tiles.map((tile) => (
+            <PhotoTile key={tile.id} tile={tile} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/app/src/components/settings/SettingsRowView.tsx
+++ b/app/src/components/settings/SettingsRowView.tsx
@ -0,0 +1,39 @@
+import type { NotificationPrefKey, SettingsRow } from '../../types';
+
+interface SettingsRowViewProps {
+  row: SettingsRow;
+  onToggle: (key: NotificationPrefKey) => void;
+}
+
+export function SettingsRowView({ row, onToggle }: SettingsRowViewProps) {
+  return (
+    <div className="flex flex-wrap items-center gap-4 border-b border-line p-[18px]">
+      <div className="min-w-0 flex-1 basis-[260px]">
+        <p className="m-0 mb-1 text-sm font-semibold text-ink">{row.label}</p>
+        <p className="m-0 text-[12.5px] leading-relaxed text-ink-soft">{row.help}</p>
+      </div>
+
+      {row.kind === 'toggle' ? (
+        <button
+          type="button"
+          onClick={() => onToggle(row.id as NotificationPrefKey)}
+          role="switch"
+          aria-checked={row.on}
+          aria-label={row.label}
+          className={`flex h-[26px] w-[46px] flex-none items-center rounded-full border border-line p-[3px] transition-colors ${
+            row.on ? 'bg-brand-gradient' : 'bg-field'
+          }`}
+        >
+          <span
+            className="h-5 w-5 rounded-full bg-white shadow-[0_2px_6px_rgba(0,0,0,0.3)] transition-transform"
+            style={{ transform: row.on ? 'translateX(20px)' : 'translateX(0)' }}
+          />
+        </button>
+      ) : (
+        <span className="flex-none rounded-[10px] border border-line bg-field px-3.5 py-2 text-[13px] font-semibold text-ink">
+          {row.value}
+        </span>
+      )}
+    </div>
+  );
+}
--- a/app/src/components/settings/SettingsView.tsx
+++ b/app/src/components/settings/SettingsView.tsx
@ -0,0 +1,55 @@
+import { useNavigation } from '../../contexts/NavigationContext';
+import { SETTINGS_TABS, useSettings } from '../../hooks/useSettings';
+import { SettingsRowView } from './SettingsRowView';
+
+export function SettingsView() {
+  const { settingsTab, setSettingsTab } = useNavigation();
+  const { title, rows, togglePref } = useSettings(settingsTab);
+
+  return (
+    <div className="flex max-w-[860px] flex-col gap-6">
+      <div>
+        <p className="m-0 mb-[7px] text-[12.5px] font-semibold text-ink-soft">Réglages</p>
+        <h1 className="m-0 text-[26px] font-extrabold leading-tight tracking-tight sm:text-[36px]">{title}</h1>
+      </div>
+
+      <div className="flex gap-1 overflow-x-auto rounded-[13px] border border-line bg-field p-1">
+        {SETTINGS_TABS.map((tab) => {
+          const active = settingsTab === tab.key;
+          return (
+            <button
+              key={tab.key}
+              type="button"
+              onClick={() => setSettingsTab(tab.key)}
+              className={`flex-none whitespace-nowrap rounded-[10px] px-4 py-2.5 text-[13px] font-semibold transition-colors ${
+                active ? 'bg-panel2 text-ink' : 'bg-transparent text-ink-soft'
+              }`}
+            >
+              {tab.label}
+            </button>
+          );
+        })}
+      </div>
+
+      <div className="overflow-hidden rounded-[18px] border border-line bg-panel">
+        {rows.map((row) => (
+          <SettingsRowView key={row.id} row={row} onToggle={togglePref} />
+        ))}
+        <div className="flex flex-wrap gap-2.5 p-[18px]">
+          <button
+            type="button"
+            className="rounded-xl bg-brand-gradient px-[18px] py-3 text-[13.5px] font-bold text-white transition-[filter] hover:brightness-110"
+          >
+            Enregistrer
+          </button>
+          <button
+            type="button"
+            className="rounded-xl border border-line bg-field px-[18px] py-3 text-[13.5px] font-semibold text-ink"
+          >
+            Annuler
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/app/src/contexts/NavigationContext.tsx
+++ b/app/src/contexts/NavigationContext.tsx
@ -0,0 +1,74 @@
+import { createContext, useContext, useState, type ReactNode } from 'react';
+import type { NavKey, SettingsTabKey } from '../types';
+
+interface NavigationContextValue {
+  nav: NavKey;
+  goTo: (nav: NavKey) => void;
+  settingsTab: SettingsTabKey;
+  setSettingsTab: (tab: SettingsTabKey) => void;
+  drawerOpen: boolean;
+  openDrawer: () => void;
+  closeDrawer: () => void;
+  notifOpen: boolean;
+  toggleNotif: () => void;
+  closeNotif: () => void;
+  createOpen: boolean;
+  toggleCreate: () => void;
+  closeCreate: () => void;
+}
+
+const NavigationContext = createContext<NavigationContextValue | null>(null);
+
+/**
+ * Navigation is a plain state switch, not a router — matches the desktop-first
+ * prototype (`state.nav`), which the brief explicitly allows as long as it's
+ * spelled out rather than silently missing routing.
+ */
+export function NavigationProvider({ children }: { children: ReactNode }) {
+  const [nav, setNav] = useState<NavKey>('dashboard');
+  const [settingsTab, setSettingsTab] = useState<SettingsTabKey>('language');
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [notifOpen, setNotifOpen] = useState(false);
+  const [createOpen, setCreateOpen] = useState(false);
+
+  const goTo = (next: NavKey) => {
+    setNav(next);
+    setDrawerOpen(false);
+    setNotifOpen(false);
+    setCreateOpen(false);
+  };
+
+  return (
+    <NavigationContext.Provider
+      value={{
+        nav,
+        goTo,
+        settingsTab,
+        setSettingsTab,
+        drawerOpen,
+        openDrawer: () => setDrawerOpen(true),
+        closeDrawer: () => setDrawerOpen(false),
+        notifOpen,
+        toggleNotif: () => {
+          setNotifOpen((v) => !v);
+          setCreateOpen(false);
+        },
+        closeNotif: () => setNotifOpen(false),
+        createOpen,
+        toggleCreate: () => {
+          setCreateOpen((v) => !v);
+          setNotifOpen(false);
+        },
+        closeCreate: () => setCreateOpen(false),
+      }}
+    >
+      {children}
+    </NavigationContext.Provider>
+  );
+}
+
+export function useNavigation(): NavigationContextValue {
+  const ctx = useContext(NavigationContext);
+  if (!ctx) throw new Error('useNavigation must be used within a NavigationProvider');
+  return ctx;
+}
--- a/app/src/contexts/SessionContext.tsx
+++ b/app/src/contexts/SessionContext.tsx
@ -0,0 +1,63 @@
+import { createContext, useContext, useState, type ReactNode } from 'react';
+import { login as apiLogin, loginAsGuest, signup as apiSignup, type Credentials, type SignupPayload } from '../api/auth';
+import type { AppView, User } from '../types';
+
+interface SessionContextValue {
+  view: AppView;
+  user: User | null;
+  loading: boolean;
+  login: (credentials: Credentials) => Promise<void>;
+  signup: (payload: SignupPayload) => Promise<void>;
+  continueAsGuest: () => Promise<void>;
+  logout: () => void;
+}
+
+const SessionContext = createContext<SessionContextValue | null>(null);
+
+export function SessionProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const login = async (credentials: Credentials) => {
+    setLoading(true);
+    try {
+      setUser(await apiLogin(credentials));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const signup = async (payload: SignupPayload) => {
+    setLoading(true);
+    try {
+      setUser(await apiSignup(payload));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const continueAsGuest = async () => {
+    setLoading(true);
+    try {
+      setUser(await loginAsGuest());
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const logout = () => setUser(null);
+
+  return (
+    <SessionContext.Provider
+      value={{ view: user ? 'app' : 'auth', user, loading, login, signup, continueAsGuest, logout }}
+    >
+      {children}
+    </SessionContext.Provider>
+  );
+}
+
+export function useSession(): SessionContextValue {
+  const ctx = useContext(SessionContext);
+  if (!ctx) throw new Error('useSession must be used within a SessionProvider');
+  return ctx;
+}
--- a/app/src/contexts/ThemeContext.tsx
+++ b/app/src/contexts/ThemeContext.tsx
@ -0,0 +1,32 @@
+import { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
+import type { Theme } from '../types';
+
+interface ThemeContextValue {
+  theme: Theme;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+/**
+ * Dark/light is kept in React state only — intentionally not persisted to
+ * localStorage. It's applied as Tailwind's `dark` class on <html>, so
+ * `dark:` utilities and the CSS-variable tokens in index.css move together.
+ */
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setTheme] = useState<Theme>('dark');
+
+  useEffect(() => {
+    document.documentElement.classList.toggle('dark', theme === 'dark');
+  }, [theme]);
+
+  const toggleTheme = () => setTheme((t) => (t === 'dark' ? 'light' : 'dark'));
+
+  return <ThemeContext.Provider value={{ theme, toggleTheme }}>{children}</ThemeContext.Provider>;
+}
+
+export function useTheme(): ThemeContextValue {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error('useTheme must be used within a ThemeProvider');
+  return ctx;
+}
--- a/app/src/hooks/useAuthForm.ts
+++ b/app/src/hooks/useAuthForm.ts
@ -0,0 +1,50 @@
+import { useState, type FormEvent } from 'react';
+import { useSession } from '../contexts/SessionContext';
+import { isValidEmail, isValidPassword } from '../lib/validators';
+import type { AuthMode } from '../types';
+
+export function useAuthForm() {
+  const { login, signup, continueAsGuest, loading } = useSession();
+  const [mode, setModeState] = useState<AuthMode>('login');
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [submitted, setSubmitted] = useState(false);
+
+  const setMode = (next: AuthMode) => {
+    setModeState(next);
+    setSubmitted(false);
+  };
+
+  const emailError = submitted && !isValidEmail(email);
+  const passwordError = submitted && !isValidPassword(password);
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    if (!isValidEmail(email) || !isValidPassword(password)) {
+      setSubmitted(true);
+      return;
+    }
+    if (mode === 'signup') {
+      void signup({ name, email, password });
+    } else {
+      void login({ email, password });
+    }
+  };
+
+  return {
+    mode,
+    setMode,
+    name,
+    setName,
+    email,
+    setEmail,
+    password,
+    setPassword,
+    emailError,
+    passwordError,
+    handleSubmit,
+    continueAsGuest,
+    loading,
+  };
+}
--- a/app/src/hooks/useBackgroundCrossfade.ts
+++ b/app/src/hooks/useBackgroundCrossfade.ts
@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+import { BACKGROUND_IMAGES } from '../lib/backgrounds';
+
+const INTERVAL_MS = 5400;
+
+export function useBackgroundCrossfade(): number {
+  const [index, setIndex] = useState(0);
+
+  useEffect(() => {
+    const id = window.setInterval(() => {
+      setIndex((i) => (i + 1) % BACKGROUND_IMAGES.length);
+    }, INTERVAL_MS);
+    return () => window.clearInterval(id);
+  }, []);
+
+  return index;
+}
--- a/app/src/hooks/useBackups.ts
+++ b/app/src/hooks/useBackups.ts
@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react';
+import { getBackups } from '../api/backups';
+import type { BackupDevice } from '../types';
+
+export function useBackups() {
+  const [backups, setBackups] = useState<BackupDevice[]>([]);
+  useEffect(() => {
+    void getBackups().then(setBackups);
+  }, []);
+  return backups;
+}
--- a/app/src/hooks/useDashboardStats.ts
+++ b/app/src/hooks/useDashboardStats.ts
@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react';
+import { getDashboardStats } from '../api/files';
+import type { StatItem } from '../types';
+
+export function useDashboardStats() {
+  const [stats, setStats] = useState<StatItem[]>([]);
+  useEffect(() => {
+    void getDashboardStats().then(setStats);
+  }, []);
+  return stats;
+}
--- a/app/src/hooks/useIsMobile.ts
+++ b/app/src/hooks/useIsMobile.ts
@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+
+/** Mirrors Tailwind's `md` breakpoint (768px) — the sidebar becomes a drawer below it. */
+const MOBILE_QUERY = '(max-width: 767px)';
+
+export function useIsMobile(): boolean {
+  const [isMobile, setIsMobile] = useState(() => window.matchMedia(MOBILE_QUERY).matches);
+
+  useEffect(() => {
+    const mql = window.matchMedia(MOBILE_QUERY);
+    const onChange = () => setIsMobile(mql.matches);
+    mql.addEventListener('change', onChange);
+    return () => mql.removeEventListener('change', onChange);
+  }, []);
+
+  return isMobile;
+}
--- a/app/src/hooks/useNotifications.ts
+++ b/app/src/hooks/useNotifications.ts
@ -0,0 +1,20 @@
+import { useEffect, useMemo, useState } from 'react';
+import { getNotifications } from '../api/notifications';
+import type { NotificationItem } from '../types';
+
+export function useNotifications() {
+  const [notifications, setNotifications] = useState<NotificationItem[]>([]);
+  const [allRead, setAllRead] = useState(false);
+
+  useEffect(() => {
+    void getNotifications().then(setNotifications);
+  }, []);
+
+  const items = useMemo(
+    () => notifications.map((n) => ({ ...n, unread: n.unread && !allRead })),
+    [notifications, allRead],
+  );
+  const unreadCount = items.filter((n) => n.unread).length;
+
+  return { notifications: items, unreadCount, markAllRead: () => setAllRead(true) };
+}
--- a/app/src/hooks/usePhotos.ts
+++ b/app/src/hooks/usePhotos.ts
@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+import { getAlbums, getPhotoTiles } from '../api/photos';
+import type { Album, PhotoScope, PhotoTile } from '../types';
+
+const SCOPES: PhotoScope[] = ['Tout', 'Personnes', 'Lieux'];
+
+export function usePhotos() {
+  const [albums, setAlbums] = useState<Album[]>([]);
+  const [tiles, setTiles] = useState<PhotoTile[]>([]);
+  const [scope, setScope] = useState<PhotoScope>('Tout');
+
+  useEffect(() => {
+    void getAlbums().then(setAlbums);
+    void getPhotoTiles().then(setTiles);
+  }, []);
+
+  return { albums, tiles, scopes: SCOPES, scope, setScope };
+}
--- a/app/src/hooks/useRecentFiles.ts
+++ b/app/src/hooks/useRecentFiles.ts
@ -0,0 +1,45 @@
+import { useEffect, useMemo, useState } from 'react';
+import { getFiles } from '../api/files';
+import type { FileFilter, FileItem } from '../types';
+
+const FILTERS: FileFilter[] = ['Tous', 'Dossiers', 'Documents', 'Médias'];
+
+function matchesFilter(file: FileItem, filter: FileFilter): boolean {
+  switch (filter) {
+    case 'Tous':
+      return true;
+    case 'Dossiers':
+      return file.kind === 'folder';
+    case 'Documents':
+      return file.kind === 'document';
+    case 'Médias':
+      return file.kind === 'video' || file.kind === 'image';
+  }
+}
+
+export function useRecentFiles() {
+  const [files, setFiles] = useState<FileItem[]>([]);
+  const [filter, setFilter] = useState<FileFilter>('Tous');
+  const [sortDesc, setSortDesc] = useState(true);
+  const [gridView, setGridView] = useState(true);
+
+  useEffect(() => {
+    void getFiles().then(setFiles);
+  }, []);
+
+  const visibleFiles = useMemo(() => {
+    const filtered = files.filter((f) => matchesFilter(f, filter));
+    return sortDesc ? filtered : filtered.slice().reverse();
+  }, [files, filter, sortDesc]);
+
+  return {
+    files: visibleFiles,
+    filters: FILTERS,
+    filter,
+    setFilter,
+    sortDesc,
+    toggleSort: () => setSortDesc((v) => !v),
+    gridView,
+    setGridView,
+  };
+}
--- a/app/src/hooks/useSettings.ts
+++ b/app/src/hooks/useSettings.ts
@ -0,0 +1,51 @@
+import { useEffect, useState } from 'react';
+import {
+  getDefaultNotificationPrefs,
+  getStaticSettingsRows,
+  NOTIFICATION_PREF_LABELS,
+  type StaticSettingsRows,
+} from '../api/settings';
+import type { NotificationPrefKey, SettingsRow, SettingsTabKey } from '../types';
+
+const TAB_TITLES: Record<SettingsTabKey, string> = {
+  language: 'Langue et région',
+  notifications: 'Préférences de notification',
+  account: 'Paramètres du compte',
+};
+
+export const SETTINGS_TABS: Array<{ key: SettingsTabKey; label: string }> = [
+  { key: 'language', label: 'Langue et région' },
+  { key: 'notifications', label: 'Notifications' },
+  { key: 'account', label: 'Compte' },
+];
+
+export function useSettings(activeTab: SettingsTabKey) {
+  const [staticRows, setStaticRows] = useState<StaticSettingsRows | null>(null);
+  const [prefs, setPrefs] = useState<Record<NotificationPrefKey, boolean> | null>(null);
+
+  useEffect(() => {
+    void getStaticSettingsRows().then(setStaticRows);
+    void getDefaultNotificationPrefs().then(setPrefs);
+  }, []);
+
+  const togglePref = (key: NotificationPrefKey) => {
+    setPrefs((prev) => (prev ? { ...prev, [key]: !prev[key] } : prev));
+  };
+
+  let rows: SettingsRow[] = [];
+  if (activeTab === 'language') {
+    rows = staticRows?.language ?? [];
+  } else if (activeTab === 'account') {
+    rows = staticRows?.account ?? [];
+  } else if (prefs) {
+    rows = (Object.keys(NOTIFICATION_PREF_LABELS) as NotificationPrefKey[]).map((key) => ({
+      kind: 'toggle',
+      id: key,
+      label: NOTIFICATION_PREF_LABELS[key].label,
+      help: NOTIFICATION_PREF_LABELS[key].help,
+      on: prefs[key],
+    }));
+  }
+
+  return { title: TAB_TITLES[activeTab], rows, togglePref };
+}
--- a/app/src/hooks/useStorageSummary.ts
+++ b/app/src/hooks/useStorageSummary.ts
@ -0,0 +1,10 @@
+import { useEffect, useState } from 'react';
+import { getStorageSummary, type StorageSummary } from '../api/vault';
+
+export function useStorageSummary() {
+  const [summary, setSummary] = useState<StorageSummary | null>(null);
+  useEffect(() => {
+    void getStorageSummary().then(setSummary);
+  }, []);
+  return summary;
+}
--- a/app/src/hooks/useUploadSimulation.ts
+++ b/app/src/hooks/useUploadSimulation.ts
@ -0,0 +1,44 @@
+import { useEffect, useRef, useState, type DragEvent } from 'react';
+
+/**
+ * Drives the UploadZone's demo transfer. `externalProgress` lets a caller
+ * override the simulated value with real numbers later (the component
+ * itself never knows the difference) — this is the `progress` prop the
+ * brief asked to expose.
+ */
+export function useUploadSimulation(externalProgress?: number) {
+  const [uploading, setUploading] = useState(false);
+  const [internalProgress, setInternalProgress] = useState(0);
+  const [dragging, setDragging] = useState(false);
+  const timerRef = useRef<number | undefined>(undefined);
+
+  useEffect(() => () => window.clearInterval(timerRef.current), []);
+
+  const start = () => {
+    window.clearInterval(timerRef.current);
+    setUploading(true);
+    setInternalProgress(0);
+    setDragging(false);
+    timerRef.current = window.setInterval(() => {
+      setInternalProgress((p) => {
+        const next = Math.min(100, p + 4 + Math.random() * 7);
+        if (next >= 100) window.clearInterval(timerRef.current);
+        return next;
+      });
+    }, 280);
+  };
+
+  const onDragOver = (e: DragEvent) => {
+    e.preventDefault();
+    setDragging(true);
+  };
+  const onDragLeave = () => setDragging(false);
+  const onDrop = (e: DragEvent) => {
+    e.preventDefault();
+    start();
+  };
+
+  const progress = Math.round(externalProgress ?? internalProgress);
+
+  return { uploading, progress, dragging, start, onDragOver, onDragLeave, onDrop };
+}
--- a/app/src/index.css
+++ b/app/src/index.css
@ -0,0 +1,108 @@
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/*
+ * Theme tokens consumed by tailwind.config.js (colors.bg, colors.panel, ...).
+ * `.dark` is toggled on <html> by ThemeContext — this is what makes
+ * Tailwind's `dark:` strategy and these variables move together.
+ */
+:root {
+  --tc-bg: #f4f6fb;
+  --tc-panel: rgba(255, 255, 255, 0.72);
+  --tc-panel-2: rgba(255, 255, 255, 0.9);
+  --tc-line: rgba(16, 24, 40, 0.1);
+  --tc-field: rgba(16, 24, 40, 0.04);
+  --tc-selected: rgba(91, 140, 255, 0.12);
+  --tc-ink: #101828;
+  --tc-ink-2: rgba(16, 24, 40, 0.58);
+  --tc-shadow: 0 24px 54px rgba(16, 24, 40, 0.14);
+}
+
+:root.dark {
+  --tc-bg: #0a0c11;
+  --tc-panel: rgba(255, 255, 255, 0.045);
+  --tc-panel-2: rgba(255, 255, 255, 0.075);
+  --tc-line: rgba(255, 255, 255, 0.09);
+  --tc-field: rgba(255, 255, 255, 0.05);
+  --tc-selected: rgba(91, 140, 255, 0.16);
+  --tc-ink: #eef1f7;
+  --tc-ink-2: rgba(238, 241, 247, 0.56);
+  --tc-shadow: 0 28px 60px rgba(0, 0, 0, 0.5);
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  background: var(--tc-bg);
+  font-family: Manrope, system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+input::placeholder {
+  color: var(--tc-ink-2);
+  opacity: 0.65;
+}
+
+::selection {
+  background: rgba(91, 140, 255, 0.32);
+}
+
+@keyframes tc-in {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes tc-stripe {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 28px 0;
+  }
+}
+
+@keyframes tc-pulse {
+  0%,
+  100% {
+    opacity: 0.45;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+.animate-tc-in {
+  animation: tc-in 0.16s ease;
+}
+
+.animate-tc-pulse {
+  animation: tc-pulse 2.4s ease-in-out infinite;
+}
+
+.upload-progress-stripes {
+  background-image: linear-gradient(
+    115deg,
+    rgba(255, 255, 255, 0.26) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.26) 50%,
+    rgba(255, 255, 255, 0.26) 75%,
+    transparent 75%
+  );
+  background-size: 28px 28px;
+  animation: tc-stripe 0.8s linear infinite;
+}
--- a/app/src/lib/backgrounds.ts
+++ b/app/src/lib/backgrounds.ts
@ -0,0 +1,10 @@
+/**
+ * Auth-screen background layers. Replace each entry with
+ * `url('/assets/bg-1.jpg') center/cover no-repeat` for real photography —
+ * the crossfade logic in useBackgroundCrossfade doesn't change.
+ */
+export const BACKGROUND_IMAGES: string[] = [
+  'radial-gradient(120% 95% at 22% 12%, #2b3340 0%, #121620 55%, #070910 100%)',
+  'radial-gradient(120% 95% at 78% 18%, #2f2b3f 0%, #16131f 55%, #08070d 100%)',
+  'radial-gradient(130% 100% at 45% 85%, #1f3340 0%, #0f161c 55%, #070a0d 100%)',
+];
--- a/app/src/lib/gradients.ts
+++ b/app/src/lib/gradients.ts
@ -0,0 +1,15 @@
+/** Shared placeholder-thumbnail gradients — swap for real thumbnails once assets exist. */
+export function tone(a: string, b: string): string {
+  return `linear-gradient(140deg, ${a} 0%, ${b} 100%)`;
+}
+
+export const THUMB_TONES = [
+  tone('#3b4a63', '#1b2230'),
+  tone('#4a3f5f', '#221c2e'),
+  tone('#5a4436', '#261d18'),
+  tone('#33505a', '#182428'),
+  tone('#46384f', '#1f1a24'),
+  tone('#3d4a41', '#1b211d'),
+  tone('#3a4560', '#1a1f2c'),
+  tone('#51413a', '#241d19'),
+] as const;
--- a/app/src/lib/validators.ts
+++ b/app/src/lib/validators.ts
@ -0,0 +1,9 @@
+const EMAIL_RE = /^[^@\s]+@[^@\s]+\.[a-z]{2,}$/i;
+
+export function isValidEmail(value: string): boolean {
+  return EMAIL_RE.test(value);
+}
+
+export function isValidPassword(value: string): boolean {
+  return value.length >= 8;
+}
--- a/app/src/main.tsx
+++ b/app/src/main.tsx
@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/app/src/types.ts
+++ b/app/src/types.ts
@ -0,0 +1,113 @@
+/** Authenticated user, or the ephemeral guest identity used by "Visiter en tant qu'invité". */
+export interface User {
+  id: string;
+  name: string;
+  initials: string;
+  email: string;
+  role: string;
+  isGuest: boolean;
+}
+
+/** Keys into src/components/icons/iconRegistry.ts (lucide-react components). */
+export type IconName =
+  | 'hard-drive'
+  | 'image'
+  | 'smartphone'
+  | 'share'
+  | 'folder-plus'
+  | 'file-pen'
+  | 'upload'
+  | 'check'
+  | 'alert'
+  | 'laptop'
+  | 'tablet'
+  | 'server';
+
+export type FileKind = 'folder' | 'document' | 'archive' | 'video' | 'image' | 'backup';
+
+export interface FileItem {
+  id: string;
+  name: string;
+  kind: FileKind;
+  extLabel: string;
+  size: string;
+  modified: string;
+  thumbGradient: string;
+}
+
+export interface UploadTask {
+  fileName: string;
+  /** 0-100. When undefined, the zone is idle (no transfer in progress). */
+  progress: number | undefined;
+}
+
+export interface NotificationItem {
+  id: string;
+  icon: IconName;
+  title: string;
+  body: string;
+  time: string;
+  unread: boolean;
+}
+
+export interface Album {
+  id: string;
+  name: string;
+  count: string;
+  thumbGradient: string;
+}
+
+export interface PhotoTile {
+  id: string;
+  label: string;
+  thumbGradient: string;
+}
+
+export type BackupStatus = 'up-to-date' | 'syncing' | 'late';
+
+export interface BackupDevice {
+  id: string;
+  device: string;
+  detail: string;
+  status: BackupStatus;
+  statusLabel: string;
+  icon: IconName;
+}
+
+export interface StatItem {
+  id: string;
+  label: string;
+  value: string;
+  note: string;
+  icon: IconName;
+  tone: 'brand' | 'success' | 'violet';
+}
+
+export type SettingsTabKey = 'language' | 'notifications' | 'account';
+
+export interface SettingsValueRow {
+  kind: 'value';
+  id: string;
+  label: string;
+  help: string;
+  value: string;
+}
+
+export interface SettingsToggleRow {
+  kind: 'toggle';
+  id: string;
+  label: string;
+  help: string;
+  on: boolean;
+}
+
+export type SettingsRow = SettingsValueRow | SettingsToggleRow;
+
+export type NotificationPrefKey = 'push' | 'email' | 'weekly' | 'shared';
+
+export type AppView = 'auth' | 'app';
+export type NavKey = 'dashboard' | 'photos' | 'backups' | 'settings';
+export type AuthMode = 'login' | 'signup';
+export type FileFilter = 'Tous' | 'Dossiers' | 'Documents' | 'Médias';
+export type PhotoScope = 'Tout' | 'Personnes' | 'Lieux';
+export type Theme = 'light' | 'dark';
--- a/app/src/vite-env.d.ts
+++ b/app/src/vite-env.d.ts
@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_URL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
--- a/app/tailwind.config.js
+++ b/app/tailwind.config.js
@ -0,0 +1,59 @@
+/**
+ * Design tokens for Tripoli Cloud, centralized here so components never
+ * hardcode colors, radii or spacing inline. Values mirror the validated
+ * Claude Design prototype (`project/Tripoli Cloud.dc.html`).
+ *
+ * Surface/text colors resolve through CSS variables (see src/index.css) so
+ * the same class (e.g. `bg-panel`) renders correctly in both themes without
+ * a `dark:` variant on every element. Theme switching itself still goes
+ * through Tailwind's `dark` class strategy on <html>.
+ * @type {import('tailwindcss').Config}
+ */
+export default {
+  darkMode: 'class',
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Manrope', 'system-ui', 'sans-serif'],
+      },
+      colors: {
+        brand: {
+          from: '#5b8cff',
+          to: '#7c5cff',
+          DEFAULT: '#5b8cff',
+          soft: '#7ba4ff',
+        },
+        success: '#4ade80',
+        danger: '#ff8f7a',
+        violet: '#b39dff',
+        bg: 'var(--tc-bg)',
+        panel: 'var(--tc-panel)',
+        panel2: 'var(--tc-panel-2)',
+        line: 'var(--tc-line)',
+        field: 'var(--tc-field)',
+        selected: 'var(--tc-selected)',
+        ink: {
+          DEFAULT: 'var(--tc-ink)',
+          soft: 'var(--tc-ink-2)',
+        },
+      },
+      backgroundImage: {
+        'brand-gradient': 'linear-gradient(135deg, #5b8cff 0%, #7c5cff 100%)',
+      },
+      borderRadius: {
+        card: '16px',
+        panel: '18px',
+        modal: '14px',
+      },
+      boxShadow: {
+        tc: 'var(--tc-shadow)',
+      },
+      screens: {
+        // Explicit alias for the prototype's documented breakpoint.
+        mobile: { max: '767px' },
+      },
+    },
+  },
+  plugins: [],
+}
--- a/app/tsconfig.app.json
+++ b/app/tsconfig.app.json
@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023", "DOM"],
+    "module": "esnext",
+    "types": ["vite/client"],
+    "allowArbitraryExtensions": true,
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
--- a/app/tsconfig.json
+++ b/app/tsconfig.json
@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/app/tsconfig.node.json
+++ b/app/tsconfig.node.json
@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "module": "nodenext",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/app/vite.config.ts
+++ b/app/vite.config.ts
@ -0,0 +1,10 @@
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+  // Relative asset paths: the built app is served as static files from
+  // whatever domain/path the reverse proxy mounts it under, never localhost.
+  base: './',
+  plugins: [react()],
+})