Initial working commit

src/components/import/GenerateTab.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+export function GenerateTab({ importType }: { importType: "flashcards" | "quizzes" }) {
+  const [instructions, setInstructions] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    fetch(`/api/settings/llm-instructions?type=${importType}`)
+      .then((res) => res.json())
+      .then((data) => setInstructions(data.value))
+      .finally(() => setLoading(false));
+  }, [importType]);
+
+  async function handleSave() {
+    setSaving(true);
+    try {
+      await fetch(`/api/settings/llm-instructions?type=${importType}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ value: instructions }),
+      });
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleReset() {
+    if (!confirm("Reset to default instructions?")) return;
+    setSaving(true);
+    try {
+      const res = await fetch(`/api/settings/llm-instructions?type=${importType}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ value: "__RESET__" }),
+      });
+      const data = await res.json();
+      setInstructions(data.value);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleCopy() {
+    await navigator.clipboard.writeText(instructions);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }
+
+  if (loading) {
+    return <div className="animate-subtle-pulse text-text-muted">Loading instructions...</div>;
+  }
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-text-secondary">
+        Copy these instructions and paste them into an LLM chat along with your study material. The LLM will generate JSON you can paste into the Import tab.
+      </p>
+
+      <textarea
+        value={instructions}
+        onChange={(e) => setInstructions(e.target.value)}
+        rows={14}
+        className="w-full px-4 py-3 rounded-lg border border-border bg-bg-surface-alt/50 text-sm text-text-body font-mono leading-relaxed focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all duration-200 resize-y"
+      />
+
+      <div className="flex items-center gap-2">
+        <button
+          onClick={handleCopy}
+          className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-primary text-white text-sm font-medium hover:bg-primary-hover transition-all duration-200 cursor-pointer"
+        >
+          {copied ? (
+            <>
+              <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>
+              Copied!
+            </>
+          ) : (
+            <>
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
+              </svg>
+              Copy to Clipboard
+            </>
+          )}
+        </button>
+        <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"
+        >
+          {saving ? "Saving..." : "Save Changes"}
+        </button>
+        <button
+          onClick={handleReset}
+          disabled={saving}
+          className="px-4 py-2 rounded-lg text-sm text-text-muted hover:text-error hover:bg-error-bg transition-all duration-200 cursor-pointer disabled:opacity-50"
+        >
+          Reset to Default
+        </button>
+      </div>
+    </div>
+  );
+}