From f0c4cf360055ba11f51098f2c1ce0d953d15ed17 Mon Sep 17 00:00:00 2001
From: sepehr <sepehr1151@gmail.com>
Date: Tue, 28 Apr 2026 22:40:49 +0200
Subject: [PATCH] fix: add success animation when enabling note history +
 update historyNote state

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 memento-note/components/home-client.tsx       |  1 +
 .../components/note-history-modal.tsx         | 54 +++++++++++++------
 memento-note/locales/en.json                  |  2 +
 memento-note/locales/fr.json                  |  2 +
 4 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/memento-note/components/home-client.tsx b/memento-note/components/home-client.tsx
index 55ed711..edcb0db 100644
--- a/memento-note/components/home-client.tsx
+++ b/memento-note/components/home-client.tsx
@@ -149,6 +149,7 @@ export function HomeClient({ initialNotes, initialSettings }: HomeClientProps) {
     setNotes((prev) => prev.map((n) => (n.id === noteId ? { ...n, historyEnabled: true } : n)))
     setPinnedNotes((prev) => prev.map((n) => (n.id === noteId ? { ...n, historyEnabled: true } : n)))
     setEditingNote((prev) => (prev?.note.id === noteId ? { ...prev, note: { ...prev.note, historyEnabled: true } } : prev))
+    setHistoryNote((prev) => (prev?.id === noteId ? { ...prev, historyEnabled: true } : prev))
   }, [])
 
   const handleHistoryRestored = useCallback((restored: Note) => {
diff --git a/memento-note/components/note-history-modal.tsx b/memento-note/components/note-history-modal.tsx
index 0df290a..d1601a6 100644
--- a/memento-note/components/note-history-modal.tsx
+++ b/memento-note/components/note-history-modal.tsx
@@ -4,7 +4,7 @@ import { useEffect, useMemo, useState, useTransition } from 'react'
 import { formatDistanceToNow } from 'date-fns'
 import { fr } from 'date-fns/locale/fr'
 import { enUS } from 'date-fns/locale/en-US'
-import { History, Loader2, RotateCcw, Trash2, GitBranchPlus } from 'lucide-react'
+import { History, Loader2, RotateCcw, Trash2, GitBranchPlus, Check } from 'lucide-react'
 import { toast } from 'sonner'
 import { getNoteHistory, restoreNoteVersion, deleteNoteHistoryEntry } from '@/app/actions/notes'
 import { Button } from '@/components/ui/button'
@@ -48,6 +48,7 @@ export function NoteHistoryModal({
   const [isLoading, setIsLoading] = useState(false)
   const [isRestoring, startRestoring] = useTransition()
   const [isEnabling, startEnabling] = useTransition()
+  const [justEnabled, setJustEnabled] = useState(false)
 
   useEffect(() => {
     if (!open || !note || !enabled) return
@@ -96,6 +97,7 @@ export function NoteHistoryModal({
     startEnabling(async () => {
       try {
         await onEnableHistory()
+        setJustEnabled(true)
         toast.success(t('notes.historyEnabled') || 'History activé')
       } catch (error) {
         console.error('Failed to enable history:', error)
@@ -104,6 +106,12 @@ export function NoteHistoryModal({
     })
   }
 
+  useEffect(() => {
+    if (!justEnabled) return
+    const timer = setTimeout(() => setJustEnabled(false), 1800)
+    return () => clearTimeout(timer)
+  }, [justEnabled])
+
   const handleDeleteEntry = (entryId: string) => {
     if (!note) return
     if (!confirm(t('notes.deleteVersionConfirm') || 'Supprimer cette version définitivement ?')) return
@@ -135,21 +143,37 @@ export function NoteHistoryModal({
           </DialogDescription>
         </DialogHeader>
 
-        {!enabled ? (
+        {!enabled || justEnabled ? (
           <div className="flex flex-col items-center justify-center px-6 py-16 text-center">
-            <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/10 mb-5">
-              <GitBranchPlus className="h-8 w-8 text-primary" />
-            </div>
-            <h3 className="text-base font-semibold text-foreground mb-1.5">
-              {t('notes.historyDisabledTitle') || 'Historique des versions'}
-            </h3>
-            <p className="text-sm text-muted-foreground max-w-xs mb-6 leading-relaxed">
-              {t('notes.historyDisabledDesc') || "Suivez les modifications de cette note au fil du temps. Activez l'historique pour commencer à enregistrer des versions."}
-            </p>
-            <Button onClick={handleEnable} disabled={isEnabling} size="lg" className="rounded-full px-8">
-              {isEnabling && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-              {t('notes.enableHistory') || "Activer l'historique"}
-            </Button>
+            {justEnabled ? (
+              <>
+                <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-emerald-500/10 mb-5 animate-in zoom-in-50 duration-300">
+                  <Check className="h-8 w-8 text-emerald-500" />
+                </div>
+                <h3 className="text-base font-semibold text-foreground mb-1.5 animate-in fade-in slide-in-from-bottom-2 duration-300">
+                  {t('notes.historyEnabledTitle') || 'Historique activé !'}
+                </h3>
+                <p className="text-sm text-muted-foreground max-w-xs animate-in fade-in slide-in-from-bottom-3 duration-500 leading-relaxed">
+                  {t('notes.historyEnabledDesc') || "Les versions de cette note seront désormais enregistrées."}
+                </p>
+              </>
+            ) : (
+              <>
+                <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/10 mb-5">
+                  <GitBranchPlus className="h-8 w-8 text-primary" />
+                </div>
+                <h3 className="text-base font-semibold text-foreground mb-1.5">
+                  {t('notes.historyDisabledTitle') || 'Historique des versions'}
+                </h3>
+                <p className="text-sm text-muted-foreground max-w-xs mb-6 leading-relaxed">
+                  {t('notes.historyDisabledDesc') || "Suivez les modifications de cette note au fil du temps. Activez l'historique pour commencer à enregistrer des versions."}
+                </p>
+                <Button onClick={handleEnable} disabled={isEnabling} size="lg" className="rounded-full px-8">
+                  {isEnabling && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                  {t('notes.enableHistory') || "Activer l'historique"}
+                </Button>
+              </>
+            )}
           </div>
         ) : (
           <div className="grid grid-cols-[260px_1fr] gap-0">
diff --git a/memento-note/locales/en.json b/memento-note/locales/en.json
index bd754f9..ac40c8d 100644
--- a/memento-note/locales/en.json
+++ b/memento-note/locales/en.json
@@ -177,6 +177,8 @@
     "historyEnabled": "History enabled",
     "historyDisabledTitle": "Version history",
     "historyDisabledDesc": "Track changes to this note over time. Enable history to start recording versions.",
+    "historyEnabledTitle": "History enabled!",
+    "historyEnabledDesc": "Versions of this note will now be recorded.",
     "enableHistory": "Enable history",
     "historyEmpty": "No versions available",
     "historySelectVersion": "Select a version to preview its content",
diff --git a/memento-note/locales/fr.json b/memento-note/locales/fr.json
index d9690c0..c3b114c 100644
--- a/memento-note/locales/fr.json
+++ b/memento-note/locales/fr.json
@@ -1001,6 +1001,8 @@
     "historyEnabled": "Historique activé",
     "historyDisabledTitle": "Historique des versions",
     "historyDisabledDesc": "Suivez les modifications de cette note au fil du temps. Activez l'historique pour commencer à enregistrer des versions.",
+    "historyEnabledTitle": "Historique activé !",
+    "historyEnabledDesc": "Les versions de cette note seront désormais enregistrées.",
     "enableHistory": "Activer l'historique",
     "historyEmpty": "Aucune version disponible",
     "historySelectVersion": "Sélectionnez une version pour prévisualiser son contenu",