carnet panel

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;
+  layout: string;
-  onLayoutChange: (layout: PaneLayout) => void;
+  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 */}
+      {/* Layout Selection */}
-      <div className="flex-1 overflow-y-auto">
+      <div className="p-4 border-b border-carnet-border">
-        <div className="px-3">
+        <div className="flex items-center space-x-2">
-          <div className="space-y-0.5">
+          <Layout className="h-4 w-4 text-carnet-text-muted" />
-            <div 
+          <span className="text-sm font-medium text-carnet-text-primary">Vues</span>
-              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="mt-2 space-y-1">
-            <div 
+          <button
-              className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer text-carnet-text-primary"
+            onClick={() => onLayoutChange('item-selection')}
-              onClick={() => onLayoutChange?.(PaneLayout.TagSelection)}
+            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'
+            }`}
           >
-              <Star className="w-4 h-4 mr-3" />
+            Liste
-              <span className="text-sm">Important</span>
+          </button>
-            </div>
+          <button
-
+            onClick={() => onLayoutChange('table-view')}
-            <div 
+            className={`w-full px-3 py-2 text-sm rounded-md ${
-              className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer text-carnet-text-primary"
+              layout === 'table-view'
+                ? 'bg-primary text-white'
+                : 'text-carnet-text-primary hover:bg-carnet-hover'
+            }`}
           >
-              <Archive className="w-4 h-4 mr-3" />
+            Tableau
-              <span className="text-sm">Archivé</span>
+          </button>
-              <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>
       </div>
 
-        {/* Nextcloud Folders Section */}
+      {/* Folders */}
-        {sortedFolders.length > 0 && (
+      <div className="flex-1 overflow-y-auto p-4">
-          <div className="mt-6 px-3">
+        <div className="space-y-1">
-            <h3 className="px-3 mb-2 text-xs font-medium text-carnet-text-muted uppercase">Vues</h3>
+          {nextcloudFolders.map((folder) => {
-            <div className="space-y-0.5">
+            const Icon = getFolderIcon(folder);
-              {sortedFolders.map((folder) => {
-                const Icon = FOLDER_CONFIG[folder as FolderType]?.icon || Folder;
             return (
-                  <div 
+              <button
                 key={folder}
-                    className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer"
                 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="w-4 h-4 mr-3 text-carnet-text-muted" />
+                <Icon className="h-4 w-4" />
-                    <span className="text-sm text-carnet-text-primary">{folder}</span>
+                <span>{folder}</span>
-                  </div>
+              </button>
             );
           })}
         </div>
       </div>
-        )}
-      </div>
     </div>
   );
-} 
+};