carnet panel dairy health

components/carnet/notes-view.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState, useEffect } from 'react';
 import { Search, Plus, X, FileText, Calendar, Heart, Users } from 'lucide-react';
-import { format } from 'date-fns';
+import { format, parse } from 'date-fns';
 import { fr } from 'date-fns/locale';
 
 interface Note {
@@ -61,7 +61,7 @@ export const NotesView: React.FC<NotesViewProps> = ({ onNoteSelect, currentFolde
   };
 
   const formatDate = (dateString: string) => {
-    return format(new Date(dateString), 'EEEE d MMM yyyy, HH:mm', { locale: fr });
+    return format(new Date(dateString), 'EEEE d MMM yyyy', { locale: fr });
   };
 
   const getFolderIcon = (folder: string) => {
@@ -79,6 +79,34 @@ export const NotesView: React.FC<NotesViewProps> = ({ onNoteSelect, currentFolde
     }
   };
 
+  const formatNoteTitle = (note: Note) => {
+    if (currentFolder === 'Diary' || currentFolder === 'Health') {
+      // Try to extract date from title (format: YYYY-MM-DD)
+      const dateMatch = note.title.match(/^(\d{4}-\d{2}-\d{2})/);
+      if (dateMatch) {
+        const date = parse(dateMatch[1], 'yyyy-MM-dd', new Date());
+        return `${format(date, 'EEEE d MMM yyyy', { locale: fr })} - ${note.title.replace(dateMatch[1], '').trim()}`;
+      }
+    }
+    return note.title;
+  };
+
+  const sortNotes = (notes: Note[]) => {
+    if (currentFolder === 'Diary' || currentFolder === 'Health') {
+      return [...notes].sort((a, b) => {
+        // Try to extract dates from titles
+        const dateA = a.title.match(/^(\d{4}-\d{2}-\d{2})/);
+        const dateB = b.title.match(/^(\d{4}-\d{2}-\d{2})/);
+        
+        if (dateA && dateB) {
+          return new Date(dateB[1]).getTime() - new Date(dateA[1]).getTime();
+        }
+        return 0;
+      });
+    }
+    return notes;
+  };
+
   const Icon = getFolderIcon(currentFolder);
 
   return (
@@ -122,34 +150,31 @@ export const NotesView: React.FC<NotesViewProps> = ({ onNoteSelect, currentFolde
       {/* Notes List */}
       <div className="flex-1 overflow-y-auto">
         {loading ? (
-          <div className="flex items-center justify-center h-full">
+          <div className="p-4 text-center text-carnet-text-muted">Chargement...</div>
-            <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-primary"></div>
-          </div>
         ) : notes.length === 0 ? (
-          <div className="flex items-center justify-center h-full">
+          <div className="p-4 text-center text-carnet-text-muted">Aucune note</div>
-            <p className="text-sm text-carnet-text-muted">Aucune note trouvée</p>
-          </div>
         ) : (
-          notes.map((note) => (
+          <ul className="divide-y divide-carnet-border">
-            <div 
+            {sortNotes(notes).map((note) => (
+              <li
                 key={note.id}
-              className="px-4 py-3 border-b border-carnet-border hover:bg-carnet-hover cursor-pointer"
                 onClick={() => onNoteSelect?.(note)}
+                className="p-4 hover:bg-carnet-hover cursor-pointer"
               >
-              <div className="flex flex-col">
+                <div className="flex items-center space-x-2">
-                <div className="flex items-center">
+                  <Icon className="h-4 w-4 text-carnet-text-muted" />
-                  <span className="text-sm font-medium text-carnet-text-primary">
+                  <div className="flex-1">
-                    {note.title}
+                    <div className="text-sm font-medium text-carnet-text-primary">
-                  </span>
+                      {formatNoteTitle(note)}
                     </div>
-                <div className="mt-1 flex items-center text-xs text-carnet-text-muted">
+                    <div className="text-xs text-carnet-text-muted">
-                  <span>{formatDate(note.lastModified)}</span>
+                      {formatDate(note.lastModified)}
-                  <span className="mx-1.5">•</span>
-                  <span>{note.size} bytes</span>
                     </div>
                   </div>
                 </div>
-          ))
+              </li>
+            ))}
+          </ul>
         )}
       </div>
     </div>