@lastbrain/app 0.1.36 → 0.1.37

package/src/templates/DocPage.tsx

@@ -28,6 +28,7 @@ import {
   Link,
   Blocks,
   HardDrive,
+  RotateCcw,
 } from "lucide-react";
 import { DefaultDocumentation } from "./DefaultDoc.js";
 
@@ -53,8 +54,10 @@ const NavigationListbox: React.FC<NavigationListboxProps> = ({
   setSelectedModule,
 }) => (
   <Listbox
+    key={`listbox-${selectedModule}`}
     aria-label="Navigation"
     selectionMode="single"
+    variant="solid"
     selectedKeys={selectedModule ? [selectedModule] : []}
     onSelectionChange={(keys) => {
       const key = Array.from(keys)[0] as string;
@@ -74,7 +77,7 @@ const NavigationListbox: React.FC<NavigationListboxProps> = ({
           key={item.id}
           textValue={item.name}
           description={item.description}
-          color={item.color}
+          color={"default"}
           variant="solid"
           endContent={
             item.number && (
@@ -83,7 +86,6 @@ const NavigationListbox: React.FC<NavigationListboxProps> = ({
               </Chip>
             )
           }
-          className={`${selectedModule === item.id ? "bg-default-200/40" : ""}`}
           startContent={<IconComponent size={18} className="shrink-0" />}
         >
           {item.name}
@@ -197,62 +199,78 @@ export function DocPage({ modules = [], defaultContent }: DocPageProps) {
       name: "Documentation",
       description: "Accueil",
       icon: Home,
+      color: "default" as const,
     },
     {
       id: "section-welcome",
       name: "Bienvenue",
       description: "",
       icon: Sparkles,
+      color: "default" as const,
     },
     {
       id: "section-quickstart",
       name: "Démarrage rapide",
       description: "",
       icon: Rocket,
+      color: "default" as const,
     },
     {
       id: "section-architecture",
       name: "Architecture",
       description: "",
       icon: Building2,
+      color: "default" as const,
     },
     {
       id: "section-create-module",
       name: "Créer un module",
       description: "",
       icon: Package,
+      color: "default" as const,
     },
     {
       id: "section-database",
       name: "Base de données",
       description: "",
       icon: Database,
+      color: "default" as const,
     },
     {
       id: "section-storage",
       name: "Proxy Storage",
       description: "Gestion des fichiers",
       icon: HardDrive,
+      color: "default" as const,
     },
     {
       id: "section-realtime",
       name: "Système Realtime",
       description: "Synchronisation temps réel",
-      icon: Sparkles,
+      icon: RotateCcw,
+      color: "default" as const,
     },
     {
       id: "section-ui",
       name: "Interface utilisateur",
       description: "",
       icon: Palette,
+      color: "default" as const,
     },
     {
       id: "section-module-docs",
       name: "Doc des modules",
       description: "",
       icon: BookOpen,
+      color: "default" as const,
+    },
+    {
+      id: "section-links",
+      name: "Liens utiles",
+      description: "",
+      icon: Link,
+      color: "default" as const,
     },
-    { id: "section-links", name: "Liens utiles", description: "", icon: Link },
     ...(modules.length > 0
       ? [
           {
@@ -261,6 +279,7 @@ export function DocPage({ modules = [], defaultContent }: DocPageProps) {
             description: "",
             icon: Blocks,
             number: modules.length,
+            color: "default" as const,
           },
         ]
       : []),
@@ -272,7 +291,7 @@ export function DocPage({ modules = [], defaultContent }: DocPageProps) {
         name: m.name,
         description: m.description,
         icon: Package,
-        color: "primary",
+        color: "primary" as const,
       })),
   ];
 
@@ -313,13 +332,10 @@ export function DocPage({ modules = [], defaultContent }: DocPageProps) {
           </DrawerContent>
         </Drawer>
 
-        <div className="flex gap-8">
+        <div className="flex gap-4">
           {/* Desktop Navigation sidebar */}
-          <aside className="hidden lg:block w-64 shrink-0 sticky top-18 self-start">
+          <aside className="hidden lg:block w-72 shrink-0 sticky top-18 self-start">
             <Card>
-              <CardHeader className="pb-2">
-                <h2 className="text-xl font-semibold">Navigation</h2>
-              </CardHeader>
               <CardBody>
                 <NavigationListbox
                   navigationItems={navigationItems}