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>
2026-05-29 18:58:19 +00:00
parent 0fa8978395
commit 1b56af9743
19 changed files with 221 additions and 66 deletions
--- a/memento-note/components/note-editor/note-editor-context.tsx
+++ b/memento-note/components/note-editor/note-editor-context.tsx
@@ -81,6 +81,7 @@ export function NoteEditorProvider({ note, readOnly = false, fullPage = false, o
  const [color, setColor] = useState(note.color)
  const [size, setSize] = useState<NoteSize>(note.size || 'small')
  const [isSaving, setIsSaving] = useState(false)
+  const [lastSavedAt, setLastSavedAt] = useState<Date | null>(null)
  const [removedImageUrls, setRemovedImageUrls] = useState<string[]>([])
  const [isMarkdown, setIsMarkdown] = useState(note.type === 'markdown')
  const [showMarkdownPreview, setShowMarkdownPreview] = useState(note.type === 'markdown')
@@ -691,6 +692,8 @@ export function NoteEditorProvider({ note, readOnly = false, fullPage = false, o
      queryClient.invalidateQueries({ queryKey: queryKeys.note(note.id) })
      queryClient.invalidateQueries({ queryKey: queryKeys.notes(note.notebookId) })
      emitNoteChange({ type: 'updated', note: result })
+      setIsDirty(false)
+      setLastSavedAt(new Date())
      toast.success(t('notes.saved') || 'Note sauvegardée !')
    } catch (error) {
      console.error('[SAVE] updateNote failed:', error)
@@ -816,6 +819,7 @@ export function NoteEditorProvider({ note, readOnly = false, fullPage = false, o
      queryClient.invalidateQueries({ queryKey: queryKeys.notes(note.notebookId) })
      emitNoteChange({ type: 'updated', note: result })
      setIsDirty(false)
+      setLastSavedAt(new Date())
      toast.success(t('notes.saved') || 'Saved')
    } catch (error) {
      console.error('[SAVE] updateNote failed:', error)
@@ -830,6 +834,23 @@ export function NoteEditorProvider({ note, readOnly = false, fullPage = false, o
  const handleSaveRef = useRef(handleSave)
  handleSaveRef.current = handleSave

+  // Auto-save : 2s après le dernier changement si isDirty
+  const autoSaveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  useEffect(() => {
+    if (!isDirty || isSaving || readOnly) return
+    if (autoSaveTimerRef.current) clearTimeout(autoSaveTimerRef.current)
+    autoSaveTimerRef.current = setTimeout(() => {
+      if (fullPage) {
+        void handleSaveInPlaceRef.current()
+      } else {
+        void handleSaveRef.current()
+      }
+    }, 2000)
+    return () => {
+      if (autoSaveTimerRef.current) clearTimeout(autoSaveTimerRef.current)
+    }
+  }, [isDirty, isSaving, readOnly, fullPage])
+
  useEffect(() => {
    if (!fullPage) return
    const handler = (e: KeyboardEvent) => {
@@ -870,6 +891,7 @@ export function NoteEditorProvider({ note, readOnly = false, fullPage = false, o
    removedImageUrls,
    isSaving,
    isDirty,
+    lastSavedAt,
    isProcessingAI,
    aiOpen,
    infoOpen,
@@ -894,7 +916,7 @@ export function NoteEditorProvider({ note, readOnly = false, fullPage = false, o
    quotaExceededFeature,
  }), [
    title, content, checkItems, labels, images, links, newLabel, color, size,
-    showMarkdownPreview, removedImageUrls, isSaving, isDirty, isProcessingAI, aiOpen, infoOpen,
+    showMarkdownPreview, removedImageUrls, isSaving, isDirty, lastSavedAt, isProcessingAI, aiOpen, infoOpen,
    isGeneratingTitles, titleSuggestions, dismissedTitleSuggestions, isReformulating,
    reformulationModal, previousContentForCopilot, showReminderDialog, currentReminder,
    showLinkDialog, linkUrl, comparisonNotes, fusionNotes, dismissedTags, filteredSuggestions,
--- a/memento-note/components/note-editor/note-editor-toolbar.tsx
+++ b/memento-note/components/note-editor/note-editor-toolbar.tsx
@@ -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 && (
--- a/memento-note/components/note-editor/types.ts
+++ b/memento-note/components/note-editor/types.ts
@@ -19,6 +19,7 @@ export interface NoteEditorState {
  removedImageUrls: string[]
  isSaving: boolean
  isDirty: boolean
+  lastSavedAt: Date | null

  isProcessingAI: boolean
  aiOpen: boolean
--- a/memento-note/components/sidebar.tsx
+++ b/memento-note/components/sidebar.tsx
@@ -41,7 +41,7 @@ import { useSearchModal } from '@/context/search-modal-context'
 import { useLanguage } from '@/lib/i18n'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { applyDocumentTheme } from '@/lib/apply-document-theme'
-import { getAllNotes, getTrashCount, getNotesWithReminders } from '@/app/actions/notes'
+import { getAllNotes, getTrashCount, getNotesWithReminders, toggleReminderDone } from '@/app/actions/notes'
 import { NOTE_CHANGE_EVENT, type NoteChangeEvent } from '@/lib/note-change-sync'
 import { useNotebooks } from '@/context/notebooks-context'
 import { Notebook, Note } from '@/lib/types'
@@ -183,6 +183,11 @@ function SidebarReminders({ onOpenNote }: { onOpenNote: (noteId: string, noteboo
    { id: string; title: string | null; reminder: Date | string | null; isReminderDone: boolean; notebookId: string | null }[]
  >([])
  const [loading, setLoading] = useState(true)
+  const [togglingId, setTogglingId] = useState<string | null>(null)
+
+  const reload = () => {
+    getNotesWithReminders().then((rows) => setReminders(rows as typeof reminders))
+  }

  useEffect(() => {
    let cancelled = false
@@ -194,11 +199,33 @@ function SidebarReminders({ onOpenNote }: { onOpenNote: (noteId: string, noteboo
      .finally(() => {
        if (!cancelled) setLoading(false)
      })
-    return () => {
-      cancelled = true
-    }
+    return () => { cancelled = true }
  }, [])

+  const handleComplete = async (e: React.MouseEvent, noteId: string) => {
+    e.stopPropagation()
+    setTogglingId(noteId)
+    await toggleReminderDone(noteId, true)
+    setReminders(prev => prev.map(r => r.id === noteId ? { ...r, isReminderDone: true } : r))
+    setTogglingId(null)
+  }
+
+  const handleSnooze = async (e: React.MouseEvent, noteId: string) => {
+    e.stopPropagation()
+    // Snooze = +1h
+    const snoozeDate = new Date(Date.now() + 60 * 60 * 1000)
+    setTogglingId(noteId)
+    try {
+      await fetch(`/api/notes/${noteId}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ reminder: snoozeDate.toISOString(), isReminderDone: false }),
+      })
+      setReminders(prev => prev.map(r => r.id === noteId ? { ...r, reminder: snoozeDate, isReminderDone: false } : r))
+    } catch { reload() }
+    setTogglingId(null)
+  }
+
  if (loading) {
    return (
      <div className="px-4 space-y-2">
@@ -224,25 +251,56 @@ function SidebarReminders({ onOpenNote }: { onOpenNote: (noteId: string, noteboo
  }

  const renderItem = (note: (typeof active)[0], overdueItem?: boolean) => (
-    <button
+    <div
      key={note.id}
-      type="button"
-      onClick={() => onOpenNote(note.id, note.notebookId)}
-      className="w-full text-start px-4 py-2.5 rounded-xl hover:bg-brand-accent/5 transition-colors group"
+      className="group flex items-center gap-1 px-2 py-1.5 rounded-xl hover:bg-brand-accent/5 transition-colors"
    >
-      <p className="text-[12px] font-medium truncate group-hover:text-brand-accent transition-colors">
-        {note.title || t('notes.untitled')}
-      </p>
-      <p className={cn('text-[10px] mt-0.5', overdueItem ? 'text-red-500' : 'text-muted-foreground')}>
-        {note.reminder &&
-          new Date(note.reminder).toLocaleString(undefined, {
-            month: 'short',
-            day: 'numeric',
-            hour: '2-digit',
-            minute: '2-digit',
-          })}
-      </p>
-    </button>
+      {/* Bouton compléter */}
+      <button
+        type="button"
+        onClick={(e) => { void handleComplete(e, note.id) }}
+        disabled={togglingId === note.id}
+        className="flex-shrink-0 w-5 h-5 rounded-full border-2 border-concrete/30 hover:border-emerald-500 hover:bg-emerald-50 transition-all flex items-center justify-center"
+        title={t('reminders.markDone') || 'Marquer comme fait'}
+      >
+        {togglingId === note.id
+          ? <div className="w-2 h-2 rounded-full bg-concrete animate-pulse" />
+          : null}
+      </button>
+
+      {/* Contenu cliquable */}
+      <button
+        type="button"
+        onClick={() => onOpenNote(note.id, note.notebookId)}
+        className="flex-1 text-start min-w-0"
+      >
+        <p className="text-[12px] font-medium truncate group-hover:text-brand-accent transition-colors">
+          {note.title || t('notes.untitled')}
+        </p>
+        <p className={cn('text-[10px] mt-0.5', overdueItem ? 'text-red-500' : 'text-muted-foreground')}>
+          {note.reminder &&
+            new Date(note.reminder).toLocaleString(undefined, {
+              month: 'short',
+              day: 'numeric',
+              hour: '2-digit',
+              minute: '2-digit',
+            })}
+        </p>
+      </button>
+
+      {/* Actions (visibles au hover) */}
+      <div className="flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity flex gap-0.5">
+        <button
+          type="button"
+          onClick={(e) => { void handleSnooze(e, note.id) }}
+          disabled={togglingId === note.id}
+          className="p-1 rounded-md hover:bg-amber-100 text-amber-600 transition-colors"
+          title={t('reminders.snooze1h') || 'Reporter de 1h'}
+        >
+          <span className="text-[9px] font-bold">+1h</span>
+        </button>
+      </div>
+    </div>
  )

  return (