carnet panel

components/carnet/navigation.tsx

@@ -1,11 +1,15 @@
 "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, Plus } from 'lucide-react';
+import { PaneLayout } from '@/app/carnet/page';
 
 interface NavigationProps {
+  layout: string;
+  onLayoutChange: (layout: string) => void;
   nextcloudFolders: string[];
   onFolderSelect: (folder: string) => void;
+  onNewNote: () => void;
 }
 
 type FolderType = 'Notes' | 'Diary' | 'Health' | 'Contacts';
@@ -23,7 +27,7 @@ const FOLDER_CONFIG: Record<FolderType, FolderConfig> = {
   'Contacts': { icon: Users, order: 4 }
 };
 
-export default function Navigation({ nextcloudFolders, onFolderSelect }: NavigationProps) {
+export default function Navigation({ layout, onLayoutChange, nextcloudFolders, onFolderSelect, onNewNote }: NavigationProps) {
   const [searchQuery, setSearchQuery] = useState('');
 
   const getFolderIcon = (folder: string) => {
@@ -72,6 +76,47 @@ export default function Navigation({ nextcloudFolders, onFolderSelect }: Navigat
         </div>
       </div>
 
+      {/* New Note Button */}
+      <div className="px-4 pb-4">
+        <button
+          onClick={onNewNote}
+          className="w-full flex items-center justify-center space-x-2 px-3 py-2 bg-primary text-white rounded-md hover:bg-primary-dark transition-colors"
+        >
+          <Plus className="h-4 w-4" />
+          <span>Nouvelle note</span>
+        </button>
+      </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>
+
       {/* Folders */}
       <div className="flex-1 overflow-y-auto p-4">
         <div className="space-y-1">