fix: add success animation when enabling note history + update historyNote state
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 42s

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
2026-04-28 22:40:49 +02:00
parent b9175ce32d
commit f0c4cf3600
4 changed files with 44 additions and 15 deletions

View File

@@ -149,6 +149,7 @@ export function HomeClient({ initialNotes, initialSettings }: HomeClientProps) {
setNotes((prev) => prev.map((n) => (n.id === noteId ? { ...n, historyEnabled: true } : n))) setNotes((prev) => prev.map((n) => (n.id === noteId ? { ...n, historyEnabled: true } : n)))
setPinnedNotes((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)) 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) => { const handleHistoryRestored = useCallback((restored: Note) => {

View File

@@ -4,7 +4,7 @@ import { useEffect, useMemo, useState, useTransition } from 'react'
import { formatDistanceToNow } from 'date-fns' import { formatDistanceToNow } from 'date-fns'
import { fr } from 'date-fns/locale/fr' import { fr } from 'date-fns/locale/fr'
import { enUS } from 'date-fns/locale/en-US' 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 { toast } from 'sonner'
import { getNoteHistory, restoreNoteVersion, deleteNoteHistoryEntry } from '@/app/actions/notes' import { getNoteHistory, restoreNoteVersion, deleteNoteHistoryEntry } from '@/app/actions/notes'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
@@ -48,6 +48,7 @@ export function NoteHistoryModal({
const [isLoading, setIsLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
const [isRestoring, startRestoring] = useTransition() const [isRestoring, startRestoring] = useTransition()
const [isEnabling, startEnabling] = useTransition() const [isEnabling, startEnabling] = useTransition()
const [justEnabled, setJustEnabled] = useState(false)
useEffect(() => { useEffect(() => {
if (!open || !note || !enabled) return if (!open || !note || !enabled) return
@@ -96,6 +97,7 @@ export function NoteHistoryModal({
startEnabling(async () => { startEnabling(async () => {
try { try {
await onEnableHistory() await onEnableHistory()
setJustEnabled(true)
toast.success(t('notes.historyEnabled') || 'History activé') toast.success(t('notes.historyEnabled') || 'History activé')
} catch (error) { } catch (error) {
console.error('Failed to enable history:', 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) => { const handleDeleteEntry = (entryId: string) => {
if (!note) return if (!note) return
if (!confirm(t('notes.deleteVersionConfirm') || 'Supprimer cette version définitivement ?')) return if (!confirm(t('notes.deleteVersionConfirm') || 'Supprimer cette version définitivement ?')) return
@@ -135,21 +143,37 @@ export function NoteHistoryModal({
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
{!enabled ? ( {!enabled || justEnabled ? (
<div className="flex flex-col items-center justify-center px-6 py-16 text-center"> <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"> {justEnabled ? (
<GitBranchPlus className="h-8 w-8 text-primary" /> <>
</div> <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">
<h3 className="text-base font-semibold text-foreground mb-1.5"> <Check className="h-8 w-8 text-emerald-500" />
{t('notes.historyDisabledTitle') || 'Historique des versions'} </div>
</h3> <h3 className="text-base font-semibold text-foreground mb-1.5 animate-in fade-in slide-in-from-bottom-2 duration-300">
<p className="text-sm text-muted-foreground max-w-xs mb-6 leading-relaxed"> {t('notes.historyEnabledTitle') || 'Historique activé !'}
{t('notes.historyDisabledDesc') || "Suivez les modifications de cette note au fil du temps. Activez l'historique pour commencer à enregistrer des versions."} </h3>
</p> <p className="text-sm text-muted-foreground max-w-xs animate-in fade-in slide-in-from-bottom-3 duration-500 leading-relaxed">
<Button onClick={handleEnable} disabled={isEnabling} size="lg" className="rounded-full px-8"> {t('notes.historyEnabledDesc') || "Les versions de cette note seront désormais enregistrées."}
{isEnabling && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} </p>
{t('notes.enableHistory') || "Activer l'historique"} </>
</Button> ) : (
<>
<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>
) : ( ) : (
<div className="grid grid-cols-[260px_1fr] gap-0"> <div className="grid grid-cols-[260px_1fr] gap-0">

View File

@@ -177,6 +177,8 @@
"historyEnabled": "History enabled", "historyEnabled": "History enabled",
"historyDisabledTitle": "Version history", "historyDisabledTitle": "Version history",
"historyDisabledDesc": "Track changes to this note over time. Enable history to start recording versions.", "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", "enableHistory": "Enable history",
"historyEmpty": "No versions available", "historyEmpty": "No versions available",
"historySelectVersion": "Select a version to preview its content", "historySelectVersion": "Select a version to preview its content",

View File

@@ -1001,6 +1001,8 @@
"historyEnabled": "Historique activé", "historyEnabled": "Historique activé",
"historyDisabledTitle": "Historique des versions", "historyDisabledTitle": "Historique des versions",
"historyDisabledDesc": "Suivez les modifications de cette note au fil du temps. Activez l'historique pour commencer à enregistrer 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", "enableHistory": "Activer l'historique",
"historyEmpty": "Aucune version disponible", "historyEmpty": "Aucune version disponible",
"historySelectVersion": "Sélectionnez une version pour prévisualiser son contenu", "historySelectVersion": "Sélectionnez une version pour prévisualiser son contenu",