From c37029a890a525a81891484957eb385351688068 Mon Sep 17 00:00:00 2001
From: Elijah <elijah.kuntz@gmail.com>
Date: Sun, 28 Jun 2026 10:52:18 -0700
Subject: [PATCH] feat: Add visual success/error states to save instructions
 button

---
 src/components/import/GenerateTab.tsx | 27 ++++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/components/import/GenerateTab.tsx b/src/components/import/GenerateTab.tsx
index 5b42b14..c2f58eb 100644
--- a/src/components/import/GenerateTab.tsx
+++ b/src/components/import/GenerateTab.tsx
@@ -6,6 +6,7 @@ export function GenerateTab({ importType }: { importType: "flashcards" | "quizze
   const [instructions, setInstructions] = useState("");
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
+  const [saveResult, setSaveResult] = useState<"success" | "error" | null>(null);
   const [copied, setCopied] = useState(false);
 
   useEffect(() => {
@@ -17,14 +18,20 @@ export function GenerateTab({ importType }: { importType: "flashcards" | "quizze
 
   async function handleSave() {
     setSaving(true);
+    setSaveResult(null);
     try {
-      await fetch(`/api/settings/llm-instructions?type=${importType}`, {
+      const res = await fetch(`/api/settings/llm-instructions?type=${importType}`, {
         method: "PATCH",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ value: instructions }),
       });
+      if (!res.ok) throw new Error("Failed to save");
+      setSaveResult("success");
+    } catch {
+      setSaveResult("error");
     } finally {
       setSaving(false);
+      setTimeout(() => setSaveResult(null), 2500);
     }
   }
 
@@ -91,9 +98,23 @@ export function GenerateTab({ importType }: { importType: "flashcards" | "quizze
         <button
           onClick={handleSave}
           disabled={saving}
-          className="px-4 py-2 rounded-lg border border-border text-sm text-text-secondary hover:bg-bg-surface-alt transition-all duration-200 cursor-pointer disabled:opacity-50"
+          className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg border text-sm transition-all duration-200 cursor-pointer disabled:opacity-50 ${
+            saveResult === "success" ? "border-success text-success bg-success-bg" :
+            saveResult === "error" ? "border-error text-error bg-error-bg" :
+            "border-border text-text-secondary hover:bg-bg-surface-alt"
+          }`}
         >
-          {saving ? "Saving..." : "Save Changes"}
+          {saving ? "Saving..." : 
+           saveResult === "success" ? (
+             <>
+               <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+               </svg>
+               Saved!
+             </>
+           ) : 
+           saveResult === "error" ? "Failed to Save" : 
+           "Save Changes"}
         </button>
         <button
           onClick={handleReset}