From b9175ce32da3d7d8d98dff9db681e1eb90356816 Mon Sep 17 00:00:00 2001
From: sepehr <sepehr1151@gmail.com>
Date: Tue, 28 Apr 2026 22:28:30 +0200
Subject: [PATCH] fix: redesign note history disabled state with centered icon
 + better copy

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 memento-note/components/note-history-modal.tsx | 16 +++++++++++-----
 memento-note/locales/en.json                   |  3 ++-
 memento-note/locales/fr.json                   |  3 ++-
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/memento-note/components/note-history-modal.tsx b/memento-note/components/note-history-modal.tsx
index dde8dcd..0df290a 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 } from 'lucide-react'
+import { History, Loader2, RotateCcw, Trash2, GitBranchPlus } from 'lucide-react'
 import { toast } from 'sonner'
 import { getNoteHistory, restoreNoteVersion, deleteNoteHistoryEntry } from '@/app/actions/notes'
 import { Button } from '@/components/ui/button'
@@ -136,11 +136,17 @@ export function NoteHistoryModal({
         </DialogHeader>
 
         {!enabled ? (
-          <div className="space-y-3 px-6 py-8">
-            <p className="text-sm text-muted-foreground">
-              {t('notes.historyDisabledDesc') || "L'historique est désactivé pour votre compte."}
+          <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}>
+            <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>
diff --git a/memento-note/locales/en.json b/memento-note/locales/en.json
index 58fba7f..bd754f9 100644
--- a/memento-note/locales/en.json
+++ b/memento-note/locales/en.json
@@ -175,7 +175,8 @@
     "history": "History",
     "historyRestored": "Version restored",
     "historyEnabled": "History enabled",
-    "historyDisabledDesc": "History is disabled for your account.",
+    "historyDisabledTitle": "Version history",
+    "historyDisabledDesc": "Track changes to this note over time. Enable history to start recording versions.",
     "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 3337bdf..d9690c0 100644
--- a/memento-note/locales/fr.json
+++ b/memento-note/locales/fr.json
@@ -999,7 +999,8 @@
     "history": "Historique",
     "historyRestored": "Version restaurée",
     "historyEnabled": "Historique activé",
-    "historyDisabledDesc": "L'historique est désactivé pour votre compte.",
+    "historyDisabledTitle": "Historique des versions",
+    "historyDisabledDesc": "Suivez les modifications de cette note au fil du temps. Activez l'historique pour commencer à enregistrer des versions.",
     "enableHistory": "Activer l'historique",
     "historyEmpty": "Aucune version disponible",
     "historySelectVersion": "Sélectionnez une version pour prévisualiser son contenu",