From 05d2a2c8419c52d09b3540649f52650276231b8f Mon Sep 17 00:00:00 2001
From: OpenSquared <opensquaredgeneva@gmail.com>
Date: Tue, 30 Jun 2026 11:17:43 +0200
Subject: [PATCH] fix: add save buttons at bottom of grammar panel in causal
 editor

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/CausalLab.tsx | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/frontend/src/pages/CausalLab.tsx b/frontend/src/pages/CausalLab.tsx
index aaa76e5..8f5b817 100644
--- a/frontend/src/pages/CausalLab.tsx
+++ b/frontend/src/pages/CausalLab.tsx
@@ -1992,6 +1992,30 @@ function TabEditor({ initialId }: { initialId?: number | null }) {
               {aiError}
             </div>
           )}
+
+          {/* Save shortcuts — visible right after applying grammar changes */}
+          <div className="pt-2 border-t border-slate-700/40 space-y-2">
+            <div className="text-xs text-slate-500 uppercase tracking-wider">Sauvegarder</div>
+            <div className="flex gap-2">
+              {state.templateId && (
+                <button onClick={updateExisting} disabled={saving || !state.name}
+                  className="flex-1 flex items-center justify-center gap-1.5 py-2 bg-blue-700 hover:bg-blue-600 disabled:opacity-40 rounded text-xs font-medium text-white transition-all">
+                  <Save className="w-3.5 h-3.5" />
+                  {saving ? 'Sauvegarde…' : 'Mettre à jour'}
+                </button>
+              )}
+              <button onClick={saveAsNew} disabled={saving || !state.name}
+                className="flex-1 flex items-center justify-center gap-1.5 py-2 bg-emerald-700 hover:bg-emerald-600 disabled:opacity-40 rounded text-xs font-medium text-white transition-all">
+                <Save className="w-3.5 h-3.5" />
+                {saving ? 'Sauvegarde…' : 'Créer copie'}
+              </button>
+            </div>
+            {msg && (
+              <div className={clsx('p-2 rounded text-xs', msg.ok ? 'bg-emerald-900/20 text-emerald-300' : 'bg-red-900/20 text-red-300')}>
+                {msg.text}
+              </div>
+            )}
+          </div>
         </div>
       </div>
     </div>