feat: IDE

2026-04-04 04:59:42 +03:00
parent 9d1096a9b4
commit f537f1eab9
20 changed files with 2884 additions and 15 deletions
@@ -0,0 +1,196 @@
+import React, { useState } from "react";
+import { GoFile } from "react-icons/go";
+import { MdClose } from "react-icons/md";
+import type { FileNode } from "../types";
+
+interface TabBarProps {
+  openFiles: FileNode[];
+  activeFile: FileNode | null;
+  onSelectFile: (file: FileNode) => void;
+  onCloseFile: (file: FileNode) => void;
+  onCloseAll: () => void;
+  onCloseOthers: (file: FileNode) => void;
+}
+
+export const TabBar: React.FC<TabBarProps> = ({
+  openFiles,
+  activeFile,
+  onSelectFile,
+  onCloseFile,
+  onCloseAll,
+  onCloseOthers,
+}) => {
+  const [showContextMenu, setShowContextMenu] = useState<{
+    x: number;
+    y: number;
+    file: FileNode;
+  } | null>(null);
+
+  const handleContextMenu = (e: React.MouseEvent, file: FileNode) => {
+    e.preventDefault();
+    setShowContextMenu({ x: e.clientX, y: e.clientY, file });
+  };
+
+  return (
+    <>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          backgroundColor: "#1e1e1e",
+          borderBottom: "1px solid #3e3e42",
+          overflowX: "auto",
+          minHeight: "40px",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            padding: "0 12px",
+            gap: "8px",
+            borderRight: "1px solid #3e3e42",
+            height: "100%",
+            alignItems: "center",
+          }}
+        >
+          <button
+            onClick={onCloseAll}
+            style={{
+              background: "transparent",
+              border: "none",
+              color: "#cccccc",
+              cursor: "pointer",
+              fontSize: "14px",
+              padding: "6px 8px",
+              borderRadius: "4px",
+              display: "flex",
+              alignItems: "center",
+              gap: "6px",
+              transition: "all 0.1s",
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.backgroundColor = "#2a2d2e";
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.backgroundColor = "transparent";
+            }}
+            title="Close All"
+          >
+            <MdClose size={14} />
+            <span style={{ fontSize: "11px" }}>Close All</span>
+          </button>
+        </div>
+        {openFiles.map((file) => (
+          <div
+            key={file.path}
+            onClick={() => onSelectFile(file)}
+            onContextMenu={(e) => handleContextMenu(e, file)}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              padding: "8px 16px",
+              backgroundColor:
+                activeFile?.path === file.path ? "#1e1e1e" : "#2d2d30",
+              color: activeFile?.path === file.path ? "#fff" : "#cccccc",
+              borderRight: "1px solid #3e3e42",
+              cursor: "pointer",
+              fontSize: "13px",
+              gap: "10px",
+              whiteSpace: "nowrap",
+              transition: "all 0.1s",
+              borderTop:
+                activeFile?.path === file.path
+                  ? "2px solid #0e639c"
+                  : "2px solid transparent",
+            }}
+          >
+            <GoFile />
+            <span>{file.name}</span>
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                onCloseFile(file);
+              }}
+              style={{
+                background: "none",
+                border: "none",
+                color: "#858585",
+                cursor: "pointer",
+                fontSize: "16px",
+                padding: "0 4px",
+                borderRadius: "4px",
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.color = "#fff";
+                e.currentTarget.style.backgroundColor = "#3e3e42";
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.color = "#858585";
+                e.currentTarget.style.backgroundColor = "transparent";
+              }}
+            >
+              <MdClose size={14} />
+            </button>
+          </div>
+        ))}
+      </div>
+      {showContextMenu && (
+        <div
+          style={{
+            position: "fixed",
+            top: showContextMenu.y,
+            left: showContextMenu.x,
+            backgroundColor: "#252526",
+            border: "1px solid #3e3e42",
+            borderRadius: "6px",
+            boxShadow: "0 4px 12px rgba(0,0,0,0.4)",
+            zIndex: 1000,
+            minWidth: "160px",
+            overflow: "hidden",
+          }}
+        >
+          <div
+            onClick={() => {
+              onCloseOthers(showContextMenu.file);
+              setShowContextMenu(null);
+            }}
+            style={{
+              padding: "8px 16px",
+              cursor: "pointer",
+              color: "#cccccc",
+              fontSize: "13px",
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.backgroundColor = "#2a2d2e";
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.backgroundColor = "transparent";
+            }}
+          >
+            Close Others
+          </div>
+          <div
+            onClick={() => {
+              onCloseAll();
+              setShowContextMenu(null);
+            }}
+            style={{
+              padding: "8px 16px",
+              cursor: "pointer",
+              color: "#cccccc",
+              fontSize: "13px",
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.backgroundColor = "#2a2d2e";
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.backgroundColor = "transparent";
+            }}
+          >
+            Close All
+          </div>
+        </div>
+      )}
+    </>
+  );
+};