From 06a1f87422358cc957ff99c90ae2303b5752b03f Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Sun, 20 Apr 2025 18:02:20 +0200
Subject: [PATCH] carnet panel

---
 components/carnet/navigation.tsx | 133 ++++++++++++++++---------------
 1 file changed, 70 insertions(+), 63 deletions(-)

diff --git a/components/carnet/navigation.tsx b/components/carnet/navigation.tsx
index 6d2a2b9f..4d90ed42 100644
--- a/components/carnet/navigation.tsx
+++ b/components/carnet/navigation.tsx
@@ -1,12 +1,12 @@
 "use client";
 
 import React, { useState } from 'react';
-import { Search, BookOpen, Tag, Trash2, Star, Archive, X, Folder, FileText, Calendar, Heart, Users, LucideIcon } from 'lucide-react';
+import { Search, BookOpen, Tag, Trash2, Star, Archive, X, Folder, FileText, Calendar, Heart, Users, LucideIcon, Layout } from 'lucide-react';
 import { PaneLayout } from '@/app/carnet/page';
 
 interface NavigationProps {
-  layout: PaneLayout;
-  onLayoutChange: (layout: PaneLayout) => void;
+  layout: string;
+  onLayoutChange: (layout: string) => void;
   nextcloudFolders: string[];
   onFolderSelect: (folder: string) => void;
 }
@@ -26,9 +26,29 @@ const FOLDER_CONFIG: Record<FolderType, FolderConfig> = {
   'Contacts': { icon: Users, order: 4 }
 };
 
-export default function Navigation({ layout, onLayoutChange, nextcloudFolders, onFolderSelect }: NavigationProps) {
+export const Navigation: React.FC<NavigationProps> = ({
+  layout,
+  onLayoutChange,
+  nextcloudFolders,
+  onFolderSelect,
+}) => {
   const [searchQuery, setSearchQuery] = useState('');
 
+  const getFolderIcon = (folder: string) => {
+    switch (folder) {
+      case 'Notes':
+        return FileText;
+      case 'Diary':
+        return Calendar;
+      case 'Health':
+        return Heart;
+      case 'Contacts':
+        return Users;
+      default:
+        return FileText;
+    }
+  };
+
   // Sort folders according to the specified order
   const sortedFolders = [...nextcloudFolders].sort((a, b) => {
     const orderA = (FOLDER_CONFIG[a as FolderType]?.order) || 999;
@@ -60,67 +80,54 @@ export default function Navigation({ layout, onLayoutChange, nextcloudFolders, o
         </div>
       </div>
 
-      {/* Navigation Items */}
-      <div className="flex-1 overflow-y-auto">
-        <div className="px-3">
-          <div className="space-y-0.5">
-            <div 
-              className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer text-carnet-text-primary"
-              onClick={() => onLayoutChange?.(PaneLayout.ItemSelection)}
-            >
-              <BookOpen className="w-4 h-4 mr-3" />
-              <span className="text-sm">Page</span>
-              <span className="ml-auto text-xs text-carnet-text-muted">54</span>
-            </div>
-            
-            <div 
-              className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer text-carnet-text-primary"
-              onClick={() => onLayoutChange?.(PaneLayout.TagSelection)}
-            >
-              <Star className="w-4 h-4 mr-3" />
-              <span className="text-sm">Important</span>
-            </div>
-
-            <div 
-              className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer text-carnet-text-primary"
-            >
-              <Archive className="w-4 h-4 mr-3" />
-              <span className="text-sm">Archivé</span>
-              <span className="ml-auto text-xs text-carnet-text-muted">18</span>
-            </div>
-            
-            <div 
-              className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer text-carnet-text-primary"
-              onClick={() => onLayoutChange?.(PaneLayout.TableView)}
-            >
-              <Trash2 className="w-4 h-4 mr-3" />
-              <span className="text-sm">Corbeille</span>
-            </div>
-          </div>
+      {/* Layout Selection */}
+      <div className="p-4 border-b border-carnet-border">
+        <div className="flex items-center space-x-2">
+          <Layout className="h-4 w-4 text-carnet-text-muted" />
+          <span className="text-sm font-medium text-carnet-text-primary">Vues</span>
         </div>
+        <div className="mt-2 space-y-1">
+          <button
+            onClick={() => onLayoutChange('item-selection')}
+            className={`w-full px-3 py-2 text-sm rounded-md ${
+              layout === 'item-selection'
+                ? 'bg-primary text-white'
+                : 'text-carnet-text-primary hover:bg-carnet-hover'
+            }`}
+          >
+            Liste
+          </button>
+          <button
+            onClick={() => onLayoutChange('table-view')}
+            className={`w-full px-3 py-2 text-sm rounded-md ${
+              layout === 'table-view'
+                ? 'bg-primary text-white'
+                : 'text-carnet-text-primary hover:bg-carnet-hover'
+            }`}
+          >
+            Tableau
+          </button>
+        </div>
+      </div>
 
-        {/* Nextcloud Folders Section */}
-        {sortedFolders.length > 0 && (
-          <div className="mt-6 px-3">
-            <h3 className="px-3 mb-2 text-xs font-medium text-carnet-text-muted uppercase">Vues</h3>
-            <div className="space-y-0.5">
-              {sortedFolders.map((folder) => {
-                const Icon = FOLDER_CONFIG[folder as FolderType]?.icon || Folder;
-                return (
-                  <div 
-                    key={folder}
-                    className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer"
-                    onClick={() => onFolderSelect(folder)}
-                  >
-                    <Icon className="w-4 h-4 mr-3 text-carnet-text-muted" />
-                    <span className="text-sm text-carnet-text-primary">{folder}</span>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-        )}
+      {/* Folders */}
+      <div className="flex-1 overflow-y-auto p-4">
+        <div className="space-y-1">
+          {nextcloudFolders.map((folder) => {
+            const Icon = getFolderIcon(folder);
+            return (
+              <button
+                key={folder}
+                onClick={() => onFolderSelect(folder)}
+                className="w-full flex items-center space-x-2 px-3 py-2 text-sm rounded-md text-carnet-text-primary hover:bg-carnet-hover"
+              >
+                <Icon className="h-4 w-4" />
+                <span>{folder}</span>
+              </button>
+            );
+          })}
+        </div>
       </div>
     </div>
   );
-} 
\ No newline at end of file
+}; 
\ No newline at end of file