@lastbrain/app 0.1.23 → 0.1.24

package/src/templates/DefaultDoc.tsx

@@ -539,6 +539,133 @@ where email = 'votre@email.com';`}
         </CardBody>
       </Card>
 
+      <Card id="section-storage" className="scroll-mt-32">
+        <CardHeader>
+          <h2 className="text-2xl font-semibold flex items-center gap-2">
+            <Database size={24} />
+            Système de Proxy Storage
+          </h2>
+        </CardHeader>
+        <CardBody className="space-y-4">
+          <p className="text-slate-600 dark:text-slate-400">
+            LastBrain intègre un système de proxy pour les fichiers Supabase
+            Storage qui permet d'utiliser des URLs propres avec contrôle d'accès
+            granulaire.
+          </p>
+
+          <div>
+            <h3 className="text-lg font-semibold mb-2">
+              URLs Proxy vs URLs Supabase
+            </h3>
+            <div className="space-y-3">
+              <div className="bg-red-50 dark:bg-red-950 p-3 rounded-lg">
+                <p className="text-sm font-medium text-red-700 dark:text-red-300 mb-1">
+                  ❌ URL Supabase classique (longue)
+                </p>
+                <code className="text-xs text-red-600 dark:text-red-400 break-all">
+                  https://xxx.supabase.co/storage/v1/object/public/avatar/user_128_123456.webp
+                </code>
+              </div>
+              <div className="bg-green-50 dark:bg-green-950 p-3 rounded-lg">
+                <p className="text-sm font-medium text-green-700 dark:text-green-300 mb-1">
+                  ✅ URL Proxy (propre)
+                </p>
+                <code className="text-xs text-green-600 dark:text-green-400">
+                  /api/storage/avatar/user_128_123456.webp
+                </code>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <h3 className="text-lg font-semibold mb-2">
+              Configuration des Buckets
+            </h3>
+            <div className="space-y-3">
+              <div className="border-l-4 border-green-500 pl-4">
+                <h4 className="font-semibold text-green-600 dark:text-green-400">
+                  📂 avatar (Public)
+                </h4>
+                <p className="text-sm text-slate-600 dark:text-slate-400">
+                  Photos de profil et avatars • 10MB max • Types: JPEG, PNG,
+                  WebP, GIF
+                </p>
+                <code className="text-xs bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+                  /api/storage/avatar/user_128_123456.webp
+                </code>
+              </div>
+
+              <div className="border-l-4 border-blue-500 pl-4">
+                <h4 className="font-semibold text-blue-600 dark:text-blue-400">
+                  🔒 app (Privé)
+                </h4>
+                <p className="text-sm text-slate-600 dark:text-slate-400">
+                  Fichiers privés des utilisateurs • 100MB max •
+                  Authentification requise
+                </p>
+                <code className="text-xs bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+                  /api/storage/app/user-id/documents/file.pdf
+                </code>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <h3 className="text-lg font-semibold mb-2">
+              Utilisation dans le code
+            </h3>
+            <div className="bg-slate-50 dark:bg-slate-900 p-4 rounded-lg text-sm font-mono overflow-x-auto">
+              <pre>{`// Upload d'un fichier
+import { uploadFile } from "@/api/storage";
+
+const proxyUrl = await uploadFile(
+  "avatar", 
+  "user_128_123456.webp", 
+  file, 
+  "image/webp"
+);
+// Retourne: "/api/storage/avatar/user_128_123456.webp"
+
+// Conversion de chemin storage
+import { storagePathToProxyUrl } from "@/lib/storage";
+
+const proxyUrl = storagePathToProxyUrl("avatar/user_128_123456.webp");
+// Retourne: "/api/storage/avatar/user_128_123456.webp"`}</pre>
+            </div>
+          </div>
+
+          <div>
+            <h3 className="text-lg font-semibold mb-2">Avantages du système</h3>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
+              <div className="flex items-start gap-2">
+                <span className="text-green-600">✅</span>
+                <span>URLs plus courtes et lisibles</span>
+              </div>
+              <div className="flex items-start gap-2">
+                <span className="text-green-600">✅</span>
+                <span>Contrôle d'accès granulaire</span>
+              </div>
+              <div className="flex items-start gap-2">
+                <span className="text-green-600">✅</span>
+                <span>Cache optimisé (1 an)</span>
+              </div>
+              <div className="flex items-start gap-2">
+                <span className="text-green-600">✅</span>
+                <span>Sécurité améliorée</span>
+              </div>
+              <div className="flex items-start gap-2">
+                <span className="text-green-600">✅</span>
+                <span>Détection auto des types MIME</span>
+              </div>
+              <div className="flex items-start gap-2">
+                <span className="text-green-600">✅</span>
+                <span>Extensible facilement</span>
+              </div>
+            </div>
+          </div>
+        </CardBody>
+      </Card>
+
       <Card id="section-module-docs" className="scroll-mt-32">
         <CardHeader>
           <h2 className="text-2xl font-semibold flex items-center gap-2">

package/src/templates/DocPage.tsx

@@ -27,6 +27,7 @@ import {
   BookOpen,
   Link,
   Blocks,
+  HardDrive,
 } from "lucide-react";
 import { DefaultDocumentation } from "./DefaultDoc.js";
 
@@ -66,14 +67,13 @@ export function DocPage({ modules = [], defaultContent }: DocPageProps) {
         "section-architecture",
         "section-create-module",
         "section-database",
+        "section-storage",
         "section-ui",
         "section-module-docs",
         "section-links",
         ...(modules.length > 0 ? ["section-modules"] : []),
         ...modules.map((m) => `module-${m.id}`),
-      ];
-
-      // Trouver la section actuellement visible
+      ]; // Trouver la section actuellement visible
       let currentSection = "default";
 
       // Si on est tout en haut de la page
@@ -165,6 +165,12 @@ export function DocPage({ modules = [], defaultContent }: DocPageProps) {
       description: "",
       icon: Database,
     },
+    {
+      id: "section-storage",
+      name: "Proxy Storage",
+      description: "Gestion des fichiers",
+      icon: HardDrive,
+    },
     {
       id: "section-ui",
       name: "Interface utilisateur",