fix: autocloseder for input search & button back

frontend/src/modules/ide/IDE.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { MdAdd } from "react-icons/md";
+import { MdAdd, MdArrowBack } from "react-icons/md";
 import { GoTrash } from "react-icons/go";
 import {
   useIDEStore,
@@ -16,10 +16,12 @@ import {
 
 interface IDEProps {
   initialFiles?: FileNode;
+  onBack?: () => void;
 }
 
 export const IDE: React.FC<IDEProps> = ({
   initialFiles: externalFiles,
+  onBack,
 }: IDEProps = {}) => {
   const files = useIDEStore((state) => state.files);
   const openFiles = useIDEStore((state) => state.openFiles);
@@ -52,9 +54,46 @@ export const IDE: React.FC<IDEProps> = ({
           backgroundColor: "#1e1e1e",
           fontFamily:
             "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+          position: "relative",
         }}
       >
         <TitleBar />
+        {onBack && (
+          <button
+            onClick={onBack}
+            style={{
+              position: "absolute",
+              top: "40px",
+              left: "12px",
+              background: "transparent",
+              border: "1px solid #3e3e42",
+              color: "#cccccc",
+              cursor: "pointer",
+              display: "flex",
+              alignItems: "center",
+              gap: "6px",
+              padding: "6px 12px",
+              borderRadius: "6px",
+              fontSize: "12px",
+              transition: "all 0.1s",
+              zIndex: 10,
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.backgroundColor = "#3e3e42";
+              e.currentTarget.style.color = "#fff";
+              e.currentTarget.style.borderColor = "#555";
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.backgroundColor = "transparent";
+              e.currentTarget.style.color = "#cccccc";
+              e.currentTarget.style.borderColor = "#3e3e42";
+            }}
+            title="Go back"
+          >
+            <MdArrowBack size={16} />
+            <span>Back</span>
+          </button>
+        )}
         <div
           style={{
             flex: 1,
@@ -140,7 +179,8 @@ export const IDE: React.FC<IDEProps> = ({
           backgroundColor: "#323233",
           display: "flex",
           alignItems: "center",
-          justifyContent: "center",
+          justifyContent: "space-between",
+          padding: "0 8px",
           borderBottom: "1px solid #1e1e1e",
           fontSize: "12px",
           color: "#cccccc",
@@ -148,10 +188,42 @@ export const IDE: React.FC<IDEProps> = ({
           flexShrink: 0,
         }}
       >
+        {onBack && (
+          <button
+            onClick={onBack}
+            style={{
+              background: "transparent",
+              border: "none",
+              color: "#cccccc",
+              cursor: "pointer",
+              display: "flex",
+              alignItems: "center",
+              gap: "4px",
+              padding: "4px 8px",
+              borderRadius: "4px",
+              fontSize: "11px",
+              transition: "all 0.1s",
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.backgroundColor = "#3e3e42";
+              e.currentTarget.style.color = "#fff";
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.backgroundColor = "transparent";
+              e.currentTarget.style.color = "#cccccc";
+            }}
+            title="Go back"
+          >
+            <MdArrowBack size={14} />
+            <span>Back</span>
+          </button>
+        )}
+        {!onBack && <div />}
         <span style={{ fontWeight: 400 }}>
           {activeFile ? `${activeFile.name} - ` : ""}
           {files.name}
         </span>
+        <div style={{ width: 60 }} />
       </div>
       <div style={{ display: "flex", flex: 1, overflow: "hidden" }}>
         <div style={{ width: "260px", flexShrink: 0 }}>