diff --git a/frontend/src/modules/ide/IDE.tsx b/frontend/src/modules/ide/IDE.tsx index 7e0dd30..ca2214f 100644 --- a/frontend/src/modules/ide/IDE.tsx +++ b/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 = ({ 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 = ({ backgroundColor: "#1e1e1e", fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", + position: "relative", }} > + {onBack && ( + + )}
= ({ 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 = ({ flexShrink: 0, }} > + {onBack && ( + + )} + {!onBack &&
} {activeFile ? `${activeFile.name} - ` : ""} {files.name} +
diff --git a/frontend/src/modules/ide/components/FileExplorer.tsx b/frontend/src/modules/ide/components/FileExplorer.tsx index 38f537d..a798bfc 100644 --- a/frontend/src/modules/ide/components/FileExplorer.tsx +++ b/frontend/src/modules/ide/components/FileExplorer.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect, useState, useRef, useCallback } from "react"; import { FiSearch, FiFile, FiFolder, FiMinus } from "react-icons/fi"; import { GoKebabHorizontal } from "react-icons/go"; import { MdClose, MdAdd } from "react-icons/md"; @@ -20,6 +20,28 @@ export const FileExplorer: React.FC = ({ }) => { const store = useIDEStore(); const [showSearch, setShowSearch] = useState(false); + const searchInputRef = useRef(null); + + // Фокус на инпут при открытии поиска + useEffect(() => { + if (showSearch) { + searchInputRef.current?.focus(); + } + }, [showSearch]); + + const handleSearchBlur = useCallback(() => { + // Скрываем поиск при потере фокуса с небольшой задержкой, + // чтобы клики по кнопке очистки успели сработать + setTimeout(() => { + if ( + searchInputRef.current && + !searchInputRef.current.contains(document.activeElement) + ) { + setShowSearch(false); + store.setSearchQuery(""); + } + }, 100); + }, [store]); const handleEmptyContextMenu = (e: React.MouseEvent) => { e.preventDefault(); @@ -78,7 +100,14 @@ export const FileExplorer: React.FC = ({