carnet

components/carnet/navigation.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import React from 'react';
+import React, { useState } from 'react';
-import { BookOpen, Tag, Trash2 } from 'lucide-react';
+import { Search, BookOpen, Tag, Trash2, Star, Archive, X } from 'lucide-react';
 import { PaneLayout } from '@/app/carnet/page';
 
 interface NavigationProps {
@@ -9,37 +9,88 @@ interface NavigationProps {
 }
 
 export const Navigation: React.FC<NavigationProps> = ({ onLayoutChange }) => {
+  const [searchQuery, setSearchQuery] = useState('');
+
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full bg-carnet-sidebar">
-      {/* Header */}
+      {/* Search */}
-      <div className="flex items-center justify-between p-4 border-b border-border">
+      <div className="p-4">
-        <h2 className="text-menu-item font-medium text-text">Navigation</h2>
+        <div className="relative">
+          <input
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Search tags..."
+            className="w-full pl-9 pr-4 py-2 bg-white border border-carnet-border rounded-md text-sm text-carnet-text-primary placeholder-carnet-text-muted focus:outline-none focus:ring-1 focus:ring-primary"
+          />
+          <Search className="absolute left-3 top-2.5 h-4 w-4 text-carnet-text-muted" />
+          {searchQuery && (
+            <button
+              onClick={() => setSearchQuery('')}
+              className="absolute right-3 top-2.5 text-carnet-text-muted hover:text-carnet-text-primary"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          )}
+        </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 p-3 hover:bg-contrast cursor-pointer"
+              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-5 h-5 mr-3 text-passive-1" />
+              <BookOpen className="w-4 h-4 mr-3" />
-          <h3 className="text-menu-item font-medium text-text">All Notes</h3>
+              <span className="text-sm">Notes</span>
+              <span className="ml-auto text-xs text-carnet-text-muted">54</span>
             </div>
             
             <div 
-          className="flex items-center p-3 hover:bg-contrast cursor-pointer"
+              className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer text-carnet-text-primary"
               onClick={() => onLayoutChange?.(PaneLayout.TagSelection)}
             >
-          <Tag className="w-5 h-5 mr-3 text-passive-1" />
+              <Star className="w-4 h-4 mr-3" />
-          <h3 className="text-menu-item font-medium text-text">Tags</h3>
+              <span className="text-sm">Starred</span>
             </div>
 
             <div 
-          className="flex items-center p-3 hover:bg-contrast cursor-pointer"
+              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">Archived</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-5 h-5 mr-3 text-passive-1" />
+              <Trash2 className="w-4 h-4 mr-3" />
-          <h3 className="text-menu-item font-medium text-text">Trash</h3>
+              <span className="text-sm">Trash</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Favorites Section */}
+        <div className="mt-6 px-3">
+          <h3 className="px-3 mb-2 text-xs font-medium text-carnet-text-muted uppercase">Favorites</h3>
+          <div className="space-y-0.5">
+            <div className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer">
+              <span className="text-sm text-carnet-text-primary">Blogs</span>
+              <span className="ml-auto text-xs text-carnet-text-muted">2</span>
+            </div>
+            <div className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer">
+              <span className="text-sm text-carnet-text-primary">Bugs</span>
+              <span className="ml-auto text-xs text-carnet-text-muted">1</span>
+            </div>
+            <div className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer">
+              <span className="text-sm text-carnet-text-primary">Daily Notes</span>
+              <span className="ml-auto text-xs text-carnet-text-muted">7</span>
+            </div>
+          </div>
         </div>
       </div>
     </div>

components/carnet/notes-view.tsx

@@ -1,12 +1,17 @@
 "use client";
 
 import React, { useState } from 'react';
-import { Plus } from 'lucide-react';
+import { Plus, Search, X } from 'lucide-react';
+import { format } from 'date-fns';
+import { fr } from 'date-fns/locale';
 
 interface Note {
   id: string;
   title: string;
+  content: string;
   lastEdited: Date;
+  category?: string;
+  tags?: string[];
 }
 
 interface NotesViewProps {
@@ -14,11 +19,15 @@ interface NotesViewProps {
 }
 
 export const NotesView: React.FC<NotesViewProps> = ({ onNoteSelect }) => {
+  const [searchQuery, setSearchQuery] = useState('');
   const [notes, setNotes] = useState<Note[]>([
     {
       id: '1',
-      title: 'Sample Note',
+      title: 'Budget and expenses',
-      lastEdited: new Date(Date.now() - 2 * 60 * 60 * 1000) // 2 hours ago
+      content: 'Created with Secure Spreadsheets',
+      lastEdited: new Date('2022-03-24T19:16:00'),
+      category: 'Finance',
+      tags: ['Finance']
     }
   ]);
 
@@ -26,22 +35,54 @@ export const NotesView: React.FC<NotesViewProps> = ({ onNoteSelect }) => {
     const newNote: Note = {
       id: Date.now().toString(),
       title: 'New Note',
+      content: '',
       lastEdited: new Date()
     };
     setNotes([newNote, ...notes]);
     onNoteSelect?.(newNote);
   };
 
+  const formatDate = (date: Date) => {
+    return format(date, 'EEEE d MMM yyyy, HH:mm', { locale: fr });
+  };
+
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full bg-carnet-bg border-r border-carnet-border">
-      {/* Header */}
+      {/* Search Header */}
-      <div className="flex items-center justify-between px-4 py-2 border-b border-border">
+      <div className="p-4 border-b border-carnet-border">
-        <h2 className="text-lg font-medium text-foreground">Notes</h2>
+        <div className="relative">
+          <input
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Link tags, notes, files..."
+            className="w-full pl-9 pr-4 py-2 bg-white border border-carnet-border rounded-md text-sm text-carnet-text-primary placeholder-carnet-text-muted focus:outline-none focus:ring-1 focus:ring-primary"
+          />
+          <Search className="absolute left-3 top-2.5 h-4 w-4 text-carnet-text-muted" />
+          {searchQuery && (
             <button
-          className="p-2 rounded-full hover:bg-contrast"
+              onClick={() => setSearchQuery('')}
+              className="absolute right-3 top-2.5 text-carnet-text-muted hover:text-carnet-text-primary"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Category Header */}
+      <div className="px-4 py-3 border-b border-carnet-border flex items-center justify-between">
+        <div className="flex items-center">
+          <div className="w-6 h-6 bg-carnet-tag-finance-bg rounded-md flex items-center justify-center">
+            <span className="text-xs font-medium text-carnet-tag-finance-text">F</span>
+          </div>
+          <span className="ml-2 text-sm font-medium text-carnet-text-primary">Finance</span>
+        </div>
+        <button 
+          className="p-1.5 rounded-md hover:bg-carnet-hover"
           onClick={handleNewNote}
         >
-          <Plus className="w-5 h-5 text-passive-1" />
+          <Plus className="w-4 h-4 text-carnet-text-muted" />
         </button>
       </div>
 
@@ -50,16 +91,32 @@ export const NotesView: React.FC<NotesViewProps> = ({ onNoteSelect }) => {
         {notes.map((note) => (
           <div 
             key={note.id}
-            className="p-4 hover:bg-contrast cursor-pointer"
+            className="px-4 py-3 border-b border-carnet-border hover:bg-carnet-hover cursor-pointer"
             onClick={() => onNoteSelect?.(note)}
           >
             <div className="flex flex-col">
-              <span className="text-menu-item font-medium text-foreground">
+              <div className="flex items-center">
+                <span className="text-sm font-medium text-carnet-text-primary">
                   {note.title}
                 </span>
-              <span className="text-xs text-passive-1">
+                {note.tags?.map((tag) => (
-                Last edited {note.lastEdited.toLocaleTimeString()}
+                  <span 
+                    key={tag}
+                    className="ml-2 px-1.5 py-0.5 bg-carnet-tag-finance-bg rounded text-xs font-medium text-carnet-tag-finance-text"
+                  >
+                    {tag}
                   </span>
+                ))}
+              </div>
+              <div className="mt-1 flex items-center text-xs text-carnet-text-muted">
+                <span>{formatDate(note.lastEdited)}</span>
+                {note.content && (
+                  <>
+                    <span className="mx-1.5">•</span>
+                    <span>{note.content}</span>
+                  </>
+                )}
+              </div>
             </div>
           </div>
         ))}

tailwind.config.ts

@@ -62,6 +62,23 @@ const config: Config = {
   				ring: 'hsl(var(--sidebar-ring))'
   			},
   			panel: "#FCF8F2",
+  			'carnet': {
+  				'bg': '#ffffff',
+  				'sidebar': '#f7f7f7',
+  				'border': '#e5e5e5',
+  				'text': {
+  					'primary': '#1a1a1a',
+  					'secondary': '#666666',
+  					'muted': '#999999'
+  				},
+  				'tag': {
+  					'finance': {
+  						'bg': '#e8f5e9',
+  						'text': '#2e7d32'
+  					}
+  				},
+  				'hover': '#f5f5f5'
+  			}
   		},
   		borderRadius: {
   			lg: 'var(--radius)',