feat: auto-save 2s + indicateur save + reminders inline actions (compléter/snooze)
- Auto-save debounce 2s dans note-editor-context - lastSavedAt state + setIsDirty(false) dans handleSave - Indicateur toolbar: ✓ sauvegardé / ● non enregistré avec timer relatif - Reminders sidebar: bouton ✓ compléter + bouton +1h snooze (hover inline) - i18n: clés reminders.markDone/snooze1h + notes.savedJustNow/unsaved (15 locales) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useRef, useCallback } from 'react'
|
||||
import { useState, useRef, useCallback, useEffect } from 'react'
|
||||
import { useNoteEditorContext } from './note-editor-context'
|
||||
import { LabelManager } from '@/components/label-manager'
|
||||
import { LabelBadge } from '@/components/label-badge'
|
||||
@@ -46,6 +46,21 @@ export function NoteEditorToolbar({ mode, onClose, onToggleAttachments, attachme
|
||||
const [isConverting, setIsConverting] = useState(false)
|
||||
const [shareOpen, setShareOpen] = useState(false)
|
||||
const [flashcardsOpen, setFlashcardsOpen] = useState(false)
|
||||
const [relativeTime, setRelativeTime] = useState<string | null>(null)
|
||||
|
||||
// Mise à jour du temps relatif depuis la dernière sauvegarde
|
||||
useEffect(() => {
|
||||
if (!state.lastSavedAt) { setRelativeTime(null); return }
|
||||
const update = () => {
|
||||
const secs = Math.floor((Date.now() - state.lastSavedAt!.getTime()) / 1000)
|
||||
if (secs < 10) setRelativeTime(t('notes.savedJustNow') || 'Sauvegardé')
|
||||
else if (secs < 60) setRelativeTime(`${secs}s`)
|
||||
else setRelativeTime(`${Math.floor(secs / 60)}min`)
|
||||
}
|
||||
update()
|
||||
const interval = setInterval(update, 10000)
|
||||
return () => clearInterval(interval)
|
||||
}, [state.lastSavedAt, t])
|
||||
|
||||
const notebookName = notebooks.find(nb => nb.id === note.notebookId)?.name || null
|
||||
|
||||
@@ -294,20 +309,34 @@ export function NoteEditorToolbar({ mode, onClose, onToggleAttachments, attachme
|
||||
)}
|
||||
|
||||
{!readOnly && (
|
||||
<button
|
||||
title={state.isDirty ? t('notes.saveNow') : t('notes.noModification')}
|
||||
aria-label={state.isDirty ? t('notes.saveNoteAria') : t('notes.noChangesToSaveAria')}
|
||||
onClick={actions.handleSaveInPlace}
|
||||
disabled={state.isSaving || !state.isDirty}
|
||||
className={cn(
|
||||
'p-1.5 rounded-full border transition-all duration-300',
|
||||
state.isDirty
|
||||
? 'bg-foreground text-background border-foreground hover:opacity-80'
|
||||
: 'border-black/20 dark:border-white/20 text-foreground/40 cursor-not-allowed'
|
||||
<div className="flex items-center gap-1.5">
|
||||
{/* Indicateur dernière sauvegarde */}
|
||||
{!state.isDirty && relativeTime && !state.isSaving && (
|
||||
<span className="hidden sm:flex items-center gap-1 text-[10px] text-concrete/70 font-medium select-none">
|
||||
<Check size={10} className="text-emerald-500" />
|
||||
{relativeTime}
|
||||
</span>
|
||||
)}
|
||||
>
|
||||
{state.isSaving ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
|
||||
</button>
|
||||
{state.isDirty && !state.isSaving && (
|
||||
<span className="hidden sm:block text-[10px] text-amber-500 font-medium select-none">
|
||||
{t('notes.unsaved') || '●'}
|
||||
</span>
|
||||
)}
|
||||
<button
|
||||
title={state.isDirty ? t('notes.saveNow') : t('notes.noModification')}
|
||||
aria-label={state.isDirty ? t('notes.saveNoteAria') : t('notes.noChangesToSaveAria')}
|
||||
onClick={actions.handleSaveInPlace}
|
||||
disabled={state.isSaving || !state.isDirty}
|
||||
className={cn(
|
||||
'p-1.5 rounded-full border transition-all duration-300',
|
||||
state.isDirty
|
||||
? 'bg-foreground text-background border-foreground hover:opacity-80'
|
||||
: 'border-black/20 dark:border-white/20 text-foreground/40 cursor-not-allowed'
|
||||
)}
|
||||
>
|
||||
{state.isSaving ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!readOnly && (
|
||||
|
||||
Reference in New Issue
Block a user