226 lines
7.9 KiB
TypeScript
226 lines
7.9 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { Search, Plus, X, FileText, Calendar, Heart, Users } from 'lucide-react';
|
|
import { format, parse } from 'date-fns';
|
|
import { fr } from 'date-fns/locale';
|
|
|
|
const FOLDER_DISPLAY_NAMES: Record<string, string> = {
|
|
'Notes': 'Bloc-notes',
|
|
'Diary': 'Journal',
|
|
'Health': 'Carnet de santé',
|
|
'Contacts': 'Carnet d\'adresses'
|
|
};
|
|
|
|
interface Note {
|
|
id: string;
|
|
title: string;
|
|
content: string;
|
|
lastModified: string;
|
|
type: string;
|
|
mime: string;
|
|
etag: string;
|
|
}
|
|
|
|
interface NotesViewProps {
|
|
notes: Note[];
|
|
onNoteSelect?: (note: Note) => void;
|
|
currentFolder?: string;
|
|
onNewNote?: () => void;
|
|
loading?: boolean;
|
|
onDeleteNote?: (note: Note) => void;
|
|
}
|
|
|
|
export const NotesView: React.FC<NotesViewProps> = ({
|
|
notes,
|
|
onNoteSelect,
|
|
currentFolder = 'Notes',
|
|
onNewNote,
|
|
loading = false,
|
|
onDeleteNote
|
|
}) => {
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [hoveredNote, setHoveredNote] = useState<string | null>(null);
|
|
const [noteToDelete, setNoteToDelete] = useState<Note | null>(null);
|
|
|
|
const formatDate = (dateString: string) => {
|
|
return format(new Date(dateString), 'EEEE d MMM yyyy', { locale: fr });
|
|
};
|
|
|
|
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;
|
|
}
|
|
};
|
|
|
|
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 note.title.replace(dateMatch[1], '').trim();
|
|
}
|
|
}
|
|
return note.title;
|
|
};
|
|
|
|
const sortNotes = (notes: Note[]) => {
|
|
return [...notes].sort((a, b) => {
|
|
if (currentFolder === 'Diary' || currentFolder === 'Health') {
|
|
// For Diary and Health, sort by date in title first
|
|
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();
|
|
}
|
|
}
|
|
// For all folders, sort by lastModified date
|
|
return new Date(b.lastModified).getTime() - new Date(a.lastModified).getTime();
|
|
});
|
|
};
|
|
|
|
const Icon = getFolderIcon(currentFolder);
|
|
|
|
return (
|
|
<div className="flex flex-col h-full bg-carnet-bg border-r border-carnet-border">
|
|
{/* Confirmation Dialog */}
|
|
{noteToDelete && (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div className="bg-carnet-bg p-6 rounded-lg shadow-lg max-w-md w-full">
|
|
<h3 className="text-lg font-semibold text-carnet-text-primary mb-4">
|
|
Supprimer la note
|
|
</h3>
|
|
<p className="text-carnet-text-muted mb-6">
|
|
Êtes-vous sûr de vouloir supprimer la note "{noteToDelete.title}" ? Cette action est irréversible.
|
|
</p>
|
|
<div className="flex justify-end space-x-4">
|
|
<button
|
|
onClick={() => setNoteToDelete(null)}
|
|
className="px-4 py-2 text-carnet-text-primary hover:bg-carnet-hover rounded-md"
|
|
>
|
|
Annuler
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
onDeleteNote?.(noteToDelete);
|
|
setNoteToDelete(null);
|
|
}}
|
|
className="px-4 py-2 bg-red-500 text-white hover:bg-red-600 rounded-md"
|
|
>
|
|
Supprimer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Header with New Note Button */}
|
|
<div className="p-4 border-b border-carnet-border">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className="flex items-center space-x-2">
|
|
<Icon className="h-5 w-5 text-carnet-text-primary" />
|
|
<h2 className="text-lg font-semibold text-carnet-text-primary">
|
|
{FOLDER_DISPLAY_NAMES[currentFolder] || currentFolder}
|
|
</h2>
|
|
</div>
|
|
<button
|
|
onClick={onNewNote}
|
|
className="p-2 text-carnet-text-primary hover:bg-carnet-hover rounded-md"
|
|
>
|
|
<Plus className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
<div className="relative">
|
|
<input
|
|
type="text"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
placeholder="Rechercher des notes..."
|
|
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>
|
|
|
|
{/* Notes List */}
|
|
<div className="flex-1 overflow-y-auto">
|
|
{loading ? (
|
|
<div className="p-4 text-center text-carnet-text-muted">Chargement...</div>
|
|
) : notes.length === 0 ? (
|
|
<div className="p-4 text-center text-carnet-text-muted">Aucune note</div>
|
|
) : (
|
|
<ul className="divide-y divide-carnet-border">
|
|
{sortNotes(notes).map((note) => (
|
|
<li
|
|
key={note.id}
|
|
onMouseEnter={() => setHoveredNote(note.id)}
|
|
onMouseLeave={() => setHoveredNote(null)}
|
|
className="p-4 hover:bg-carnet-hover cursor-pointer group"
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div
|
|
className="flex items-center space-x-2 flex-1"
|
|
onClick={() => onNoteSelect?.(note)}
|
|
>
|
|
<Icon className="h-4 w-4 text-carnet-text-muted" />
|
|
<div className="flex-1">
|
|
{currentFolder === 'Diary' || currentFolder === 'Health' ? (
|
|
<>
|
|
<div className="text-sm font-medium text-carnet-text-primary">
|
|
{formatDate(note.lastModified)}
|
|
</div>
|
|
<div className="text-sm text-carnet-text-muted">
|
|
{formatNoteTitle(note)}
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className="text-sm font-medium text-carnet-text-primary">
|
|
{note.title}
|
|
</div>
|
|
<div className="text-xs text-carnet-text-muted">
|
|
{formatDate(note.lastModified)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{currentFolder === 'Notes' && hoveredNote === note.id && (
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setNoteToDelete(note);
|
|
}}
|
|
className="p-1 text-carnet-text-muted hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|