@lastbrain/app 0.1.23 → 0.1.25

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,9 +27,72 @@ import {
   BookOpen,
   Link,
   Blocks,
+  HardDrive,
 } from "lucide-react";
 import { DefaultDocumentation } from "./DefaultDoc.js";
 
+// Composant NavigationListbox séparé pour éviter la recréation
+interface NavigationListboxProps {
+  navigationItems: Array<{
+    id: string;
+    name: string;
+    description: string;
+    icon: any;
+    color?: string;
+    number?: number;
+  }>;
+  selectedModule: string;
+  scrollToSection: (id: string) => void;
+  setSelectedModule: (id: string) => void;
+}
+
+const NavigationListbox: React.FC<NavigationListboxProps> = ({
+  navigationItems,
+  selectedModule,
+  scrollToSection,
+  setSelectedModule,
+}) => (
+  <Listbox
+    aria-label="Navigation"
+    selectionMode="single"
+    selectedKeys={selectedModule ? [selectedModule] : []}
+    onSelectionChange={(keys) => {
+      const key = Array.from(keys)[0] as string;
+      if (key) {
+        scrollToSection(key);
+      } else {
+        setSelectedModule("");
+        window.scrollTo({ top: 0, behavior: "smooth" });
+      }
+    }}
+    items={navigationItems}
+  >
+    {(item: any) => {
+      const IconComponent = item.icon;
+      return (
+        <ListboxItem
+          key={item.id}
+          textValue={item.name}
+          description={item.description}
+          color={item.color}
+          variant="solid"
+          endContent={
+            item.number && (
+              <Chip size="sm" color="primary">
+                {item.number ?? 0}
+              </Chip>
+            )
+          }
+          className={`${selectedModule === item.id ? "bg-default-200/40" : ""}`}
+          startContent={<IconComponent size={18} className="shrink-0" />}
+        >
+          {item.name}
+        </ListboxItem>
+      );
+    }}
+  </Listbox>
+);
+
 interface ModuleDocConfig {
   id: string;
   name: string;
@@ -66,14 +129,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 +227,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",
@@ -201,50 +269,6 @@ export function DocPage({ modules = [], defaultContent }: DocPageProps) {
       })),
   ];
 
-  const NavigationListbox = () => (
-    <Listbox
-      aria-label="Navigation"
-      selectionMode="single"
-      selectedKeys={selectedModule ? [selectedModule] : []}
-      onSelectionChange={(keys) => {
-        const key = Array.from(keys)[0] as string;
-        if (key) {
-          scrollToSection(key);
-        } else {
-          setSelectedModule("");
-          window.scrollTo({ top: 0, behavior: "smooth" });
-        }
-      }}
-      items={navigationItems}
-    >
-      {(item: any) => {
-        const IconComponent = item.icon;
-        return (
-          <ListboxItem
-            key={item.id}
-            textValue={item.name}
-            description={item.description}
-            color={item.color}
-            variant="solid"
-            endContent={
-              item.number && (
-                <Chip size="sm" color="primary">
-                  {item.number ?? 0}
-                </Chip>
-              )
-            }
-            className={`${
-              selectedModule === item.id ? "bg-default-200/40" : ""
-            }`}
-            startContent={<IconComponent size={18} className="shrink-0" />}
-          >
-            {item.name}
-          </ListboxItem>
-        );
-      }}
-    </Listbox>
-  );
-
   return (
     <div className="w-full pt-8 md:pt-12 pb-24 lg:pb-8">
       <div className="container mx-auto md:px-4 py-8">
@@ -272,7 +296,12 @@ export function DocPage({ modules = [], defaultContent }: DocPageProps) {
               <h2 className="text-xl font-semibold">Navigation</h2>
             </DrawerHeader>
             <DrawerBody>
-              <NavigationListbox />
+              <NavigationListbox
+                navigationItems={navigationItems}
+                selectedModule={selectedModule}
+                scrollToSection={scrollToSection}
+                setSelectedModule={setSelectedModule}
+              />
             </DrawerBody>
           </DrawerContent>
         </Drawer>
@@ -285,7 +314,12 @@ export function DocPage({ modules = [], defaultContent }: DocPageProps) {
                 <h2 className="text-xl font-semibold">Navigation</h2>
               </CardHeader>
               <CardBody>
-                <NavigationListbox />
+                <NavigationListbox
+                  navigationItems={navigationItems}
+                  selectedModule={selectedModule}
+                  scrollToSection={scrollToSection}
+                  setSelectedModule={setSelectedModule}
+                />
               </CardBody>
             </Card>
           </aside>