carnet panel dairy health

This commit is contained in:
alma 2025-04-20 17:49:27 +02:00
parent dea5ae1ff8
commit 26fe0433e7

View File

@ -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="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-primary"></div>
</div>
<div className="p-4 text-center text-carnet-text-muted">Chargement...</div>
) : notes.length === 0 ? (
<div className="flex items-center justify-center h-full">
<p className="text-sm text-carnet-text-muted">Aucune note trouvée</p>
</div>
<div className="p-4 text-center text-carnet-text-muted">Aucune note</div>
) : (
notes.map((note) => (
<div
key={note.id}
className="px-4 py-3 border-b border-carnet-border hover:bg-carnet-hover cursor-pointer"
onClick={() => onNoteSelect?.(note)}
>
<div className="flex flex-col">
<div className="flex items-center">
<span className="text-sm font-medium text-carnet-text-primary">
{note.title}
</span>
<ul className="divide-y divide-carnet-border">
{sortNotes(notes).map((note) => (
<li
key={note.id}
onClick={() => onNoteSelect?.(note)}
className="p-4 hover:bg-carnet-hover cursor-pointer"
>
<div className="flex items-center space-x-2">
<Icon className="h-4 w-4 text-carnet-text-muted" />
<div className="flex-1">
<div className="text-sm font-medium text-carnet-text-primary">
{formatNoteTitle(note)}
</div>
<div className="text-xs text-carnet-text-muted">
{formatDate(note.lastModified)}
</div>
</div>
</div>
<div className="mt-1 flex items-center text-xs text-carnet-text-muted">
<span>{formatDate(note.lastModified)}</span>
<span className="mx-1.5"></span>
<span>{note.size} bytes</span>
</div>
</div>
</div>
))
</li>
))}
</ul>
)}
</div>
</div>