fix

frontend/src/pages/templates.page.tsx

@@ -1,9 +1,11 @@
 import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { FiEdit3 } from "react-icons/fi";
+import { MdAdd } from "react-icons/md";
 import { FaSpinner } from "react-icons/fa";
 import { FilePicker } from "../modules/ide";
 import { RunScriptModal } from "../modules/ide/components/RunScriptModal";
+import { AddInterpreterModal } from "../modules/ide/components/AddInterpreterModal";
 import type { FileNode } from "../modules/ide";
 import { scriptsApi } from "../modules/ide/api/scripts.api";
 
@@ -47,8 +49,10 @@ export const TemplatesPage = () => {
     scriptPath: string;
     scriptId: number;
   } | null>(null);
+  const [showAddInterpreter, setShowAddInterpreter] = useState(false);
 
-  useEffect(() => {
+  const reloadTree = () => {
+    setLoading(true);
     scriptsApi
       .getTree()
       .then((data) => {
@@ -59,6 +63,10 @@ export const TemplatesPage = () => {
         setFiles({ name: "templates", type: "folder", children: [] });
       })
       .finally(() => setLoading(false));
+  };
+
+  useEffect(() => {
+    reloadTree();
   }, []);
 
   const handleRun = (path: string, id?: number) => {
@@ -85,11 +93,40 @@ export const TemplatesPage = () => {
           alignItems: "center",
           justifyContent: "flex-end",
           padding: "12px 16px",
+          gap: "12px",
           borderBottom: "1px solid var(--border)",
           backgroundColor: "var(--card-bg)",
           flexShrink: 0,
         }}
       >
+        {/* Add Interpreter button */}
+        <button
+          onClick={() => setShowAddInterpreter(true)}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "6px",
+            padding: "6px 14px",
+            backgroundColor: "#238636",
+            border: "none",
+            borderRadius: "4px",
+            color: "#ffffff",
+            cursor: "pointer",
+            fontSize: "12px",
+            fontWeight: 500,
+            transition: "all 0.15s",
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.backgroundColor = "#2ea043";
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.backgroundColor = "#238636";
+          }}
+        >
+          <MdAdd size={14} />
+          Add Interpreter
+        </button>
+
         {/* Open in Editor button */}
         <button
           onClick={() => navigate("/ide")}
@@ -175,6 +212,14 @@ export const TemplatesPage = () => {
           onClose={() => setRunModal(null)}
         />
       )}
+
+      {/* Add Interpreter Modal */}
+      {showAddInterpreter && (
+        <AddInterpreterModal
+          onClose={() => setShowAddInterpreter(false)}
+          onSuccess={reloadTree}
+        />
+      )}
     </div>
   );
 };