Adapt an app for mobile

Prompt

Tu travailles sur le code de Disbox (application React de stockage cloud basé sur Discord, interface web actuelle : https://disboxapp.github.io/web/). Ta mission : rendre l'interface entièrement responsive et la sublimer sur mobile. ## Objectif Adapter l'app pour qu'elle soit magnifique et parfaitement utilisable sur smartphones (iOS et Android, 320px à 430px de large), sans dégrader l'expérience desktop. ## Contraintes techniques - Approche mobile-first : repartir des points de rupture suivants : 360px, 768px, 1024px, 1440px. - Utiliser des media queries CSS (ou CSS modules/styled-components déjà en place — respecte la stack existante). - Ne casse aucune fonctionnalité existante : upload, download, navigation de fichiers, auth Discord. - Garde les couleurs de la marque mais modernise la palette (dark theme élégant, accents Discord #5865F2, dégradés subtils, glassmorphism léger si pertinent). - Utilise exclusivement des unités relatives (rem, %, vh/vw, clamp()) pour les tailles — jamais de px fixes pour les largeurs. ## Éléments à adapter 1. **Navigation** : remplacer la sidebar desktop par une bottom navigation bar mobile (avec safe-area-inset-bottom) : Fichiers, Upload, Paramètres. Icônes + libellés. 2. **Header** : barre supérieure compacte avec recherche plein écran dépliante, avatar utilisateur, menu accessible par geste ou bouton. 3. **Liste de fichiers** : remplacer le tableau/grille par une liste verticale sur mobile — icône du type de fichier, nom tronqué avec ellipsis, taille et date en ligne secondaire, menu d'actions (⋯) en feuille modale (bottom sheet) plutôt qu'un menu contextuel desktop. 4. **Upload** : gros bouton flottant (FAB) pour l'upload, support du drag & drop desktop conservé, indication de progression visible sur mobile, gestion des uploads en arrière-plan. 5. **Modales et formulaires** : plein écran sur mobile avec animations d'entrée/sortie fluides (slide-up), boutons cibles tactiles ≥ 44×44px. 6. **Splash/landing page** : réorganiser les sections verticalement, cartes empilées, CTA mis en avant, hero avec visuel responsif. ## Qualité visuelle - Typographie hiérarchisée (polices système + fallback, tailles fluides via clamp()). - Espacements généreux et cohérents (échelle 4/8/12/16/24px). - Animations subtiles : transitions 150–250ms ease-out sur hover/tap, skeletons de chargement, feedback haptique visuel au tap. - États vides, de chargement et d'erreur soignés avec illustrations ou icônes. - Dark mode par défaut, light mode si applicable à la stack existante. - Accessibilité : contrastes WCAG AA minimum, focus visible, aria-labels sur les boutons icônes. ## Livrables - CSS/JSX modifiés pour tous les composants concernés. - Test sur 320px, 375px, 414px, 768px minimum (simule via devtools). - Liste des changements effectués et des éventuelles limites rencontrées.

A system prompt was added to support web rendering