From 337e5891f3b2ee283784e9dcc048dffc6422b12f Mon Sep 17 00:00:00 2001
From: nikita <nikitalomieiko@gmail.com>
Date: Sun, 5 Apr 2026 07:07:14 +0300
Subject: [PATCH] feat: update tamplates

---
 .../src/modules/ide/components/FilePicker.tsx |  12 ++
 .../modules/ide/components/RunScriptModal.tsx |  13 +-
 frontend/src/pages/templates.page.tsx         | 120 +++++++-----------
 3 files changed, 64 insertions(+), 81 deletions(-)

diff --git a/frontend/src/modules/ide/components/FilePicker.tsx b/frontend/src/modules/ide/components/FilePicker.tsx
index 1eb984f..7b704f4 100644
--- a/frontend/src/modules/ide/components/FilePicker.tsx
+++ b/frontend/src/modules/ide/components/FilePicker.tsx
@@ -2,6 +2,8 @@ import React from "react";
 import type { FileNode } from "../types";
 import { FilePickerItem } from "./FilePickerItem";
 import { useFilePickerStore } from "../store/useFilePickerStore";
+import { TerminalOutput } from "@/modules/terminal";
+import { useTerminalStore } from "@/modules/terminal/store/useTerminalStore";
 
 interface FilePickerProps {
   files: FileNode;
@@ -55,6 +57,9 @@ const FilePickerTree: React.FC<{
 };
 
 export const FilePicker: React.FC<FilePickerProps> = ({ files, onRun }) => {
+  const terminalOpen = useTerminalStore((s) => s.isOpen);
+  const jobs = useTerminalStore((s) => s.jobs);
+
   return (
     <div
       style={{
@@ -63,6 +68,13 @@ export const FilePicker: React.FC<FilePickerProps> = ({ files, onRun }) => {
         backgroundColor: "var(--bg-primary)",
       }}
     >
+      {/* Terminal — сверху, над списком файлов */}
+      {terminalOpen && jobs.length > 0 && (
+        <div style={{ height: 250 }}>
+          <TerminalOutput />
+        </div>
+      )}
+
       {(files.children || []).map((child, idx) => (
         <FilePickerTree key={idx} node={child} level={0} onRun={onRun} />
       ))}
diff --git a/frontend/src/modules/ide/components/RunScriptModal.tsx b/frontend/src/modules/ide/components/RunScriptModal.tsx
index d68d6b3..4da4264 100644
--- a/frontend/src/modules/ide/components/RunScriptModal.tsx
+++ b/frontend/src/modules/ide/components/RunScriptModal.tsx
@@ -60,21 +60,14 @@ export const RunScriptModal: React.FC<RunScriptModalProps> = ({
       // 4. Ждём завершения по id
       const jobResult = await scriptsApi.waitJob(runResult.id);
 
-      // 5. Обновляем джоб
-      addJob({
-        id: jobResult.id,
-        scriptPath,
+      // 5. Обновляем существующий джоб (не создаём новый!)
+      const terminalStore = useTerminalStore.getState();
+      terminalStore.updateJob(runResult.id, {
         command: jobResult.command,
         stdin: jobResult.stdin,
-      });
-
-      // Обновляем с финальным статусом
-      const terminalStore = useTerminalStore.getState();
-      terminalStore.updateJob(jobResult.id, {
         status: jobResult.status,
         stdout: jobResult.stdout,
         stderr: jobResult.stderr,
-        stdin: jobResult.stdin,
         isRunning: false,
       });
 
diff --git a/frontend/src/pages/templates.page.tsx b/frontend/src/pages/templates.page.tsx
index 0412cb9..b90d6d8 100644
--- a/frontend/src/pages/templates.page.tsx
+++ b/frontend/src/pages/templates.page.tsx
@@ -1,11 +1,9 @@
 import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import { FiEdit3, FiPlay } from "react-icons/fi";
+import { FiEdit3 } from "react-icons/fi";
 import { FaSpinner } from "react-icons/fa";
 import { FilePicker } from "../modules/ide";
 import { RunScriptModal } from "../modules/ide/components/RunScriptModal";
-import { TerminalOutput } from "../modules/terminal";
-import { useTerminalStore } from "../modules/terminal/store/useTerminalStore";
 import type { FileNode } from "../modules/ide";
 import { scriptsApi } from "../modules/ide/api/scripts.api";
 
@@ -50,9 +48,6 @@ export const TemplatesPage = () => {
     scriptId: number;
   } | null>(null);
 
-  const terminalOpen = useTerminalStore((s) => s.isOpen);
-  const [terminalHeight] = useState(300);
-
   useEffect(() => {
     scriptsApi
       .getTree()
@@ -78,22 +73,21 @@ export const TemplatesPage = () => {
     <div
       style={{
         height: "100vh",
-        position: "relative",
         backgroundColor: "var(--bg-primary)",
         display: "flex",
         flexDirection: "column",
       }}
     >
-      {/* Floating header */}
+      {/* Header bar */}
       <div
         style={{
-          position: "absolute",
-          top: "16px",
-          right: "16px",
-          zIndex: 10,
           display: "flex",
           alignItems: "center",
-          gap: "16px",
+          justifyContent: "flex-end",
+          padding: "12px 16px",
+          borderBottom: "1px solid var(--border)",
+          backgroundColor: "var(--card-bg)",
+          flexShrink: 0,
         }}
       >
         {/* Open in Editor button */}
@@ -125,68 +119,52 @@ export const TemplatesPage = () => {
         </button>
       </div>
 
-      {/* File Picker + Terminal */}
-      <div
-        style={{
-          flex: 1,
-          display: "flex",
-          flexDirection: "column",
-          overflow: "hidden",
-        }}
-      >
-        <div style={{ flex: 1, overflow: "hidden" }}>
-          {loading ? (
-            <div
+      {/* File Picker (terminal встроен внутрь) */}
+      <div style={{ flex: 1, overflow: "hidden" }}>
+        {loading ? (
+          <div
+            style={{
+              height: "100%",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <FaSpinner
+              size={24}
               style={{
-                height: "100%",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-              }}
-            >
-              <FaSpinner
-                size={24}
-                style={{
-                  color: "var(--accent)",
-                  animation: "spin 1s linear infinite",
-                }}
-              />
-            </div>
-          ) : files ? (
-            <FilePicker
-              files={files}
-              onRun={(path) => {
-                // Находим ID скрипта по пути
-                const findNodeById = (
-                  node: FileNode,
-                  p: string,
-                ): FileNode | null => {
-                  if (node.path === p) return node;
-                  if (node.children) {
-                    for (const child of node.children) {
-                      const found = findNodeById(child, p);
-                      if (found) return found;
-                    }
-                  }
-                  return null;
-                };
-                const node = findNodeById(files, path);
-                if (node?.id) {
-                  handleRun(path, node.id);
-                } else {
-                  console.warn("Script ID not found for path:", path);
-                }
+                color: "var(--accent)",
+                animation: "spin 1s linear infinite",
               }}
             />
-          ) : null}
-        </div>
-
-        {/* Terminal */}
-        {terminalOpen && (
-          <div style={{ height: `${terminalHeight}px`, flexShrink: 0 }}>
-            <TerminalOutput />
           </div>
-        )}
+        ) : files ? (
+          <FilePicker
+            files={files}
+            onRun={(path) => {
+              // Находим ID скрипта по пути
+              const findNodeById = (
+                node: FileNode,
+                p: string,
+              ): FileNode | null => {
+                if (node.path === p) return node;
+                if (node.children) {
+                  for (const child of node.children) {
+                    const found = findNodeById(child, p);
+                    if (found) return found;
+                  }
+                }
+                return null;
+              };
+              const node = findNodeById(files, path);
+              if (node?.id) {
+                handleRun(path, node.id);
+              } else {
+                console.warn("Script ID not found for path:", path);
+              }
+            }}
+          />
+        ) : null}
       </div>
 
       {/* Run Script Modal */}