- {/* En-tête */}
-
-
+ const toggleBtn = (
+
+ )
- {/* Photos */}
+ const metaLine = (
+
- {note.title && (
-
-
- {note.title}
-
- )}
-
- {note.content.length > 200 ? note.content.slice(0, 200) + '…' : note.content}
-
-
+ {formatDate(note.created_at)}
+ {note.category && {note.category}}
+ {note.tags.map(t => {t})}
+ {images.length > 0 && }
+ {audios.length > 0 && }
+ {videos.length > 0 && }
+ {note.gps_lat != null && (
+
+ )}
+
+ )
+
+ const mediaSection = (
+ <>
{images.length > 0 && (
{images.map(img => (
)}
-
- {/* Audios */}
{audios.length > 0 && (
- 
-
+
+
))}
-
+
+
{audios.map(aud => (
)}
-
- {/* Vidéos */}
{videos.length > 0 && (
-
-
+
))}
+
{videos.map(vid => (
)}
+
+ )
- {/* Méta */}
-
-
-
+
+
))}
- {formatDate(note.created_at)}
- {note.category && (
- {note.category}
- )}
- {note.tags.map(t => (
- {t}
- ))}
- {images.length > 0 && }
- {audios.length > 0 && }
- {videos.length > 0 && }
- {note.gps_lat != null && (
-
- )}
+ const actionButtons = (
+
+ { const f = e.target.files?.[0]; if (f) onAddPhoto(f); e.target.value = '' }} />
+
+
+ { const f = e.target.files?.[0]; if (f) onAddAudio(f); e.target.value = '' }} />
+
+
+ { const f = e.target.files?.[0]; if (f) onAddVideo(f); e.target.value = '' }} />
+
+
+
+
+
+
+ )
+
+ // ─── COLLAPSED ───────────────────────────────────────────────────────────────
+ if (state === 'collapsed') {
+ return (
+
+
+ )
+ }
- {/* Actions */}
-
+
+
+ {note.title || note.content.slice(0, 60).replace(/\n/g, ' ')}
+
+
+ {formatDate(note.created_at)}
+
+
+ {toggleBtn}
+
- { const f = e.target.files?.[0]; if (f) onAddPhoto(f); e.target.value = '' }} />
-
-
- { const f = e.target.files?.[0]; if (f) onAddAudio(f); e.target.value = '' }} />
-
-
- { const f = e.target.files?.[0]; if (f) onAddVideo(f); e.target.value = '' }} />
-
-
-
-
-
+ // ─── SEMI (défaut) ───────────────────────────────────────────────────────────
+ if (state === 'semi') {
+ return (
+ ([])
const [loading, setLoading] = useState(true)
@@ -209,13 +330,7 @@ export default function NotesPage() {
)
return () => setActionButton(null)
@@ -257,62 +372,56 @@ export default function NotesPage() {
async function handleDelete(id: string) {
if (!confirm('Supprimer cette note ?')) return
- try {
- await deleteNote(id)
- void load()
- } catch {
- setError('Erreur lors de la suppression')
- }
+ try { await deleteNote(id); void load() }
+ catch { setError('Erreur lors de la suppression') }
}
async function handleAddPhoto(noteId: string, file: File) {
- try {
- await addAttachment(noteId, file)
- void load()
- } catch {
- setError('Erreur upload photo')
- }
+ try { await addAttachment(noteId, file); void load() }
+ catch { setError('Erreur upload photo') }
}
async function handleAddAudio(noteId: string, file: File) {
- try {
- await addAttachment(noteId, file)
- void load()
- } catch {
- setError('Erreur upload audio')
- }
+ try { await addAttachment(noteId, file); void load() }
+ catch { setError('Erreur upload audio') }
}
async function handleAddVideo(noteId: string, file: File) {
- try {
- await addAttachment(noteId, file)
- void load()
- } catch {
- setError('Erreur upload vidéo')
- }
+ try { await addAttachment(noteId, file); void load() }
+ catch { setError('Erreur upload vidéo') }
}
async function handleDeleteAtt(noteId: string, attId: string) {
- try {
- await deleteAttachment(noteId, attId)
- void load()
- } catch {
- setError('Erreur suppression pièce jointe')
- }
+ try { await deleteAttachment(noteId, attId); void load() }
+ catch { setError('Erreur suppression pièce jointe') }
}
const hasActiveFilters = filters.has_photo || filters.has_audio || filters.has_video || filters.has_gps
+ const noteGrid = (cols: string) => (
+
+
+ )
+ }
+
+ // ─── EXPANDED ────────────────────────────────────────────────────────────────
+ return (
+
+
+ {metaLine}
+ {actionButtons}
+ {note.title && (
+
+ {toggleBtn}
+
+ {note.title}
+
+ )}
+
+ {note.content}
+
+
+
)
}
+// ─── PAGE ─────────────────────────────────────────────────────────────────────
+
export default function NotesPage() {
const [notes, setNotes] = useState
+
+
+ {note.title && (
+
+ {toggleBtn}
+
+ {note.title}
+
+ )}
+ {renderMarkdown(note.content)}
+ {mediaSection}
+ {metaLine}
+ {actionButtons}
+ {notes.map(note => (
+ setEditingNote(note)}
+ onDelete={() => void handleDelete(note.id)}
+ onAddPhoto={f => void handleAddPhoto(note.id, f)}
+ onAddAudio={f => void handleAddAudio(note.id, f)}
+ onAddVideo={f => void handleAddVideo(note.id, f)}
+ onDeleteAtt={attId => void handleDeleteAtt(note.id, attId)}
+ />
+ ))}
+
+ )
+
return (
- {/* En-tête */}
-
- setShowForm(false)}>
setShowForm(false)} />
)}
-
- {/* Modal édition */}
{editingNote && (
setEditingNote(null)}>
- handleUpdate(editingNote.id, data)}
- onCancel={() => setEditingNote(null)}
- submitLabel="Enregistrer"
- />
+ handleUpdate(editingNote.id, data)} onCancel={() => setEditingNote(null)} submitLabel="Enregistrer" />
)}
- {loading && (
-
)
}
- Notes -
+
+
- {/* Barre de recherche + filtres */}
+ {/* Barre recherche + filtres */}
Notes
handleSearchChange(e.target.value)}
/>
- {/* Filtres rapides */}
{([
{ key: 'has_photo', icon: 'fa-image', label: 'Photo' },
{ key: 'has_audio', icon: 'fa-microphone', label: 'Audio' },
@@ -332,17 +440,9 @@ export default function NotesPage() {
)
})}
@@ -355,76 +455,32 @@ export default function NotesPage() {
{error && (
- - {error} -
+{error}
)} - {/* Modal création */} {showForm && (Chargement…
+ {loading &&Chargement…
} + + {!loading && notes.length === 0 && ( +Aucune note
)} - {/* Mobile — liste chronologique */}
- {!loading && notes.length === 0 && (
-
-
- {/* Laptop — grille */}
Aucune note
- )} -
- {notes.map(note => (
- setEditingNote(note)}
- onDelete={() => void handleDelete(note.id)}
- onAddPhoto={f => void handleAddPhoto(note.id, f)}
- onAddAudio={f => void handleAddAudio(note.id, f)}
- onAddVideo={f => void handleAddVideo(note.id, f)}
- onDeleteAtt={attId => void handleDeleteAtt(note.id, attId)}
- />
- ))}
-
+ {noteGrid('1fr')}
- {!loading && notes.length === 0 && (
-
-
Aucune note
- )} -
- {notes.map(note => (
- setEditingNote(note)}
- onDelete={() => void handleDelete(note.id)}
- onAddPhoto={f => void handleAddPhoto(note.id, f)}
- onAddAudio={f => void handleAddAudio(note.id, f)}
- onAddVideo={f => void handleAddVideo(note.id, f)}
- onDeleteAtt={attId => void handleDeleteAtt(note.id, attId)}
- />
- ))}
-
+ {noteGrid('repeat(auto-fill, minmax(320px, 1fr))')}