+
+
+
+ {openFiles.map((file) => (
+
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",
+ }}
+ >
+
+ {file.name}
+
+
+ ))}
+
+ {showContextMenu && (
+
+
{
+ 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
+
+
{
+ 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
+
+
+ )}
+ >
+ );
+};
diff --git a/frontend/src/modules/ide/components/TitleBar.tsx b/frontend/src/modules/ide/components/TitleBar.tsx
new file mode 100644
index 0000000..99fae56
--- /dev/null
+++ b/frontend/src/modules/ide/components/TitleBar.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import { FiGitBranch, FiCheckCircle } from "react-icons/fi";
+
+export const TitleBar: React.FC = () => {
+ return (
+