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
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:
@@ -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) => {
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
Reference in New Issue
Block a user