nikita
@@ -11,19 +11,24 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@codemirror/lang-sql": "^6.10.0",
|
||||
"@monaco-editor/react": "^4.7.0",
|
||||
"@tailwindcss/vite": "^4.2.2",
|
||||
"@uiw/react-codemirror": "^4.25.8",
|
||||
"axios": "^1.13.6",
|
||||
"file-surf": "^1.0.3",
|
||||
"framer-motion": "^12.38.0",
|
||||
"monaco-languageclient": "^10.7.0",
|
||||
"primeicons": "^7.0.0",
|
||||
"primereact": "^10.9.7",
|
||||
"react": "^19.2.4",
|
||||
"react-dom": "^19.2.4",
|
||||
"react-force-graph-2d": "^1.29.1",
|
||||
"react-icons": "^5.6.0",
|
||||
"react-router-dom": "^7.13.1",
|
||||
"recharts": "^3.8.0",
|
||||
"tailwind": "^4.0.0",
|
||||
"tailwindcss": "^4.2.2",
|
||||
"vscode-ws-jsonrpc": "^3.5.0",
|
||||
"zustand": "^5.0.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import { useAuthStore } from "@/store/auth/auth.store";
|
||||
import { useAuthStore } from "@/modules/auth/store/useAuthStore";
|
||||
import { Navigate } from "react-router-dom";
|
||||
|
||||
export const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
|
||||
const { isAuthenticated } = useAuthStore();
|
||||
|
||||
if (!isAuthenticated) {
|
||||
return <Navigate to="/auth" replace />;
|
||||
}
|
||||
// if (!isAuthenticated) {
|
||||
// return <Navigate to="/auth" replace />;
|
||||
// }
|
||||
|
||||
return <>{children}</>;
|
||||
};
|
||||
|
||||
@@ -2,10 +2,105 @@ import { Suspense } from "react";
|
||||
import { Routes as ReactRoutes, Route, Navigate } from "react-router-dom";
|
||||
import { HomePage } from "@/pages/home.page";
|
||||
import { ThemesPage } from "@/pages/themes.page";
|
||||
import { TestPage } from "@/pages/test.page";
|
||||
import { Test2Page, type GraphData } from "@/pages/test2.page";
|
||||
import { AuthPage } from "@/pages/auth.page";
|
||||
import { RegisterPage } from "@/pages/register.page";
|
||||
import { AddAgentsPage } from "@/pages/add-agents.page";
|
||||
import { DefaultLayout } from "@/shared/layouts/DefaultLayout";
|
||||
import { AddAgentsPage } from "@/pages/add-agents.page";
|
||||
import { IDEPage } from "@/pages/ide.page";
|
||||
|
||||
export const mockGraphData: GraphData = {
|
||||
nodes: [
|
||||
{
|
||||
id: "api-gateway",
|
||||
name: "API Gateway",
|
||||
type: "service",
|
||||
val: 12,
|
||||
description: "Входная точка API",
|
||||
},
|
||||
{
|
||||
id: "auth-service",
|
||||
name: "Auth Service",
|
||||
type: "service",
|
||||
val: 12,
|
||||
description: "Аутентификация",
|
||||
},
|
||||
{
|
||||
id: "db-service",
|
||||
name: "Database",
|
||||
type: "service",
|
||||
val: 12,
|
||||
description: "Хранилище данных",
|
||||
},
|
||||
{
|
||||
id: "redis-service",
|
||||
name: "Redis",
|
||||
type: "service",
|
||||
val: 12,
|
||||
description: "Кэширование",
|
||||
},
|
||||
{
|
||||
id: "queue-service",
|
||||
name: "Message Queue",
|
||||
type: "service",
|
||||
val: 12,
|
||||
description: "Очередь сообщений",
|
||||
},
|
||||
{
|
||||
id: "user-agent",
|
||||
name: "User Agent",
|
||||
type: "agent",
|
||||
val: 8,
|
||||
description: "Обработка пользователей",
|
||||
},
|
||||
{
|
||||
id: "payment-agent",
|
||||
name: "Payment Agent",
|
||||
type: "agent",
|
||||
val: 8,
|
||||
description: "Платежи",
|
||||
},
|
||||
{
|
||||
id: "notification-agent",
|
||||
name: "Notification Agent",
|
||||
type: "agent",
|
||||
val: 8,
|
||||
description: "Уведомления",
|
||||
},
|
||||
{
|
||||
id: "analytics-agent",
|
||||
name: "Analytics Agent",
|
||||
type: "agent",
|
||||
val: 8,
|
||||
description: "Аналитика",
|
||||
},
|
||||
{
|
||||
id: "report-agent",
|
||||
name: "Report Agent",
|
||||
type: "agent",
|
||||
val: 8,
|
||||
description: "Отчеты",
|
||||
},
|
||||
],
|
||||
links: [
|
||||
{ source: "user-agent", target: "api-gateway", type: "uses" },
|
||||
{ source: "user-agent", target: "auth-service", type: "uses" },
|
||||
{ source: "user-agent", target: "db-service", type: "uses" },
|
||||
{ source: "payment-agent", target: "api-gateway", type: "uses" },
|
||||
{ source: "payment-agent", target: "auth-service", type: "uses" },
|
||||
{ source: "payment-agent", target: "queue-service", type: "uses" },
|
||||
{ source: "notification-agent", target: "redis-service", type: "uses" },
|
||||
{ source: "notification-agent", target: "queue-service", type: "uses" },
|
||||
{ source: "analytics-agent", target: "db-service", type: "uses" },
|
||||
{ source: "report-agent", target: "db-service", type: "uses" },
|
||||
{ source: "report-agent", target: "redis-service", type: "uses" },
|
||||
{ source: "api-gateway", target: "auth-service", type: "depends_on" },
|
||||
{ source: "auth-service", target: "db-service", type: "depends_on" },
|
||||
{ source: "api-gateway", target: "queue-service", type: "depends_on" },
|
||||
{ source: "queue-service", target: "redis-service", type: "depends_on" },
|
||||
],
|
||||
};
|
||||
|
||||
export const Routing = () => {
|
||||
return (
|
||||
@@ -17,19 +112,20 @@ export const Routing = () => {
|
||||
}
|
||||
>
|
||||
<ReactRoutes>
|
||||
{/* Публичные маршруты */}
|
||||
<Route path="/auth" element={<AuthPage />} />
|
||||
<Route path="/register" element={<RegisterPage />} />
|
||||
|
||||
{/* Защищённые маршруты с Layout */}
|
||||
<Route element={<DefaultLayout />}>
|
||||
<Route path="/" element={<HomePage />} />
|
||||
<Route path="/themes" element={<ThemesPage />} />
|
||||
<Route path="/add-agents" element={<AddAgentsPage />} />
|
||||
<Route path="/themes" element={<ThemesPage />} />
|
||||
<Route path="/add-agents" element={<AddAgentsPage />} />
|
||||
<Route path="/IDE" element={<IDEPage />} />
|
||||
</Route>
|
||||
|
||||
<Route path="/test" element={<TestPage />} />
|
||||
|
||||
<Route path="/test2" element={<Test2Page data={mockGraphData} />} />
|
||||
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
</ReactRoutes>
|
||||
</Suspense>
|
||||
|
||||
@@ -0,0 +1,191 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { MdAdd } from "react-icons/md";
|
||||
import { GoTrash } from "react-icons/go";
|
||||
import {
|
||||
useIDEStore,
|
||||
initialFiles as defaultInitialFiles,
|
||||
} from "./store/useIDEStore";
|
||||
import type { FileNode } from "./types";
|
||||
import {
|
||||
FileExplorer,
|
||||
TabBar,
|
||||
CodeEditor,
|
||||
TitleBar,
|
||||
StatusBar,
|
||||
} from "./components";
|
||||
|
||||
interface IDEProps {
|
||||
initialFiles?: FileNode;
|
||||
}
|
||||
|
||||
export const IDE: React.FC<IDEProps> = ({
|
||||
initialFiles: externalFiles,
|
||||
}: IDEProps = {}) => {
|
||||
const files = useIDEStore((state) => state.files);
|
||||
const openFiles = useIDEStore((state) => state.openFiles);
|
||||
const activeFile = useIDEStore((state) => state.activeFile);
|
||||
const createNewProject = useIDEStore((state) => state.createNewProject);
|
||||
const selectFile = useIDEStore((state) => state.selectFile);
|
||||
const updateFileContent = useIDEStore((state) => state.updateFileContent);
|
||||
const closeFile = useIDEStore((state) => state.closeFile);
|
||||
const closeAllFiles = useIDEStore((state) => state.closeAllFiles);
|
||||
const closeOtherFiles = useIDEStore((state) => state.closeOtherFiles);
|
||||
const initialize = useIDEStore((state) => state.initialize);
|
||||
const isInitialized = useIDEStore((state) => state.isInitialized);
|
||||
|
||||
// Инициализация файлов
|
||||
useEffect(() => {
|
||||
if (!isInitialized) {
|
||||
const filesToInit = externalFiles || defaultInitialFiles;
|
||||
initialize(filesToInit);
|
||||
}
|
||||
}, [isInitialized, externalFiles, initialize]);
|
||||
|
||||
// Если проект не открыт
|
||||
if (!files) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
height: "100vh",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
backgroundColor: "#1e1e1e",
|
||||
fontFamily:
|
||||
"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
|
||||
}}
|
||||
>
|
||||
<TitleBar />
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<div
|
||||
style={{
|
||||
marginBottom: "24px",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
opacity: 0.3,
|
||||
}}
|
||||
>
|
||||
<GoTrash size={72} />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: "22px",
|
||||
marginBottom: "12px",
|
||||
color: "#cccccc",
|
||||
fontWeight: 300,
|
||||
}}
|
||||
>
|
||||
No project open
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: "13px",
|
||||
marginBottom: "32px",
|
||||
color: "#858585",
|
||||
}}
|
||||
>
|
||||
Create a new project to get started
|
||||
</div>
|
||||
<button
|
||||
onClick={createNewProject}
|
||||
style={{
|
||||
padding: "10px 24px",
|
||||
backgroundColor: "#0e639c",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
color: "#fff",
|
||||
cursor: "pointer",
|
||||
fontSize: "13px",
|
||||
fontWeight: 500,
|
||||
transition: "background-color 0.1s",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.backgroundColor = "#1177bb";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.backgroundColor = "#0e639c";
|
||||
}}
|
||||
>
|
||||
<MdAdd size={14} /> New Project
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<StatusBar activeFile={null} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
height: "100vh",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
overflow: "hidden",
|
||||
backgroundColor: "#1e1e1e",
|
||||
fontFamily:
|
||||
"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: "30px",
|
||||
backgroundColor: "#323233",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
borderBottom: "1px solid #1e1e1e",
|
||||
fontSize: "12px",
|
||||
color: "#cccccc",
|
||||
userSelect: "none",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<span style={{ fontWeight: 400 }}>
|
||||
{activeFile ? `${activeFile.name} - ` : ""}
|
||||
{files.name}
|
||||
</span>
|
||||
</div>
|
||||
<div style={{ display: "flex", flex: 1, overflow: "hidden" }}>
|
||||
<div style={{ width: "260px", flexShrink: 0 }}>
|
||||
<FileExplorer
|
||||
files={files}
|
||||
onDeleteRoot={useIDEStore.getState().deleteRoot}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<TabBar
|
||||
openFiles={openFiles}
|
||||
activeFile={activeFile}
|
||||
onSelectFile={selectFile}
|
||||
onCloseFile={closeFile}
|
||||
onCloseAll={closeAllFiles}
|
||||
onCloseOthers={closeOtherFiles}
|
||||
/>
|
||||
<CodeEditor
|
||||
filePath={activeFile?.path || ""}
|
||||
content={activeFile?.content || ""}
|
||||
onChange={updateFileContent}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<StatusBar activeFile={activeFile} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default IDE;
|
||||
@@ -0,0 +1,89 @@
|
||||
import React from "react";
|
||||
import Editor from "@monaco-editor/react";
|
||||
import { FiFolder } from "react-icons/fi";
|
||||
import { getLanguage } from "../helpers/fileTree";
|
||||
|
||||
interface CodeEditorProps {
|
||||
filePath: string;
|
||||
content: string;
|
||||
onChange: (content: string) => void;
|
||||
}
|
||||
|
||||
export const CodeEditor: React.FC<CodeEditorProps> = ({
|
||||
filePath,
|
||||
content,
|
||||
onChange,
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
backgroundColor: "#1e1e1e",
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1 }}>
|
||||
{filePath ? (
|
||||
<Editor
|
||||
height="100%"
|
||||
language={getLanguage(filePath)}
|
||||
value={content}
|
||||
onChange={(value) => onChange(value || "")}
|
||||
theme="vs-dark"
|
||||
options={{
|
||||
minimap: { enabled: false },
|
||||
fontSize: 14,
|
||||
fontFamily: "'Cascadia Code', 'Fira Code', monospace",
|
||||
tabSize: 4,
|
||||
wordWrap: "on",
|
||||
lineNumbers: "on",
|
||||
automaticLayout: true,
|
||||
renderWhitespace: "selection",
|
||||
smoothScrolling: true,
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
height: "100%",
|
||||
color: "#858585",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
marginBottom: "24px",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
opacity: 0.5,
|
||||
}}
|
||||
>
|
||||
<FiFolder size={64} />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: "18px",
|
||||
marginBottom: "12px",
|
||||
color: "#cccccc",
|
||||
}}
|
||||
>
|
||||
Welcome to Web VS Code
|
||||
</div>
|
||||
<div style={{ fontSize: "13px", marginBottom: "8px" }}>
|
||||
Right-click on a folder to create files
|
||||
</div>
|
||||
<div style={{ fontSize: "12px", color: "#0e639c" }}>
|
||||
Or right-click anywhere in the explorer
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,99 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { FiFile, FiFolder, FiEdit3, FiTrash2 } from "react-icons/fi";
|
||||
|
||||
const MenuItem: React.FC<{
|
||||
onClick: () => void;
|
||||
danger?: boolean;
|
||||
children: React.ReactNode;
|
||||
}> = ({ onClick, danger, children }) => (
|
||||
<div
|
||||
onClick={onClick}
|
||||
style={{
|
||||
padding: "8px 16px",
|
||||
cursor: "pointer",
|
||||
color: danger ? "#f48771" : "#cccccc",
|
||||
fontSize: "13px",
|
||||
transition: "background-color 0.1s",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "10px",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.backgroundColor = "#2a2d2e";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.backgroundColor = "transparent";
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
interface ContextMenuProps {
|
||||
x: number;
|
||||
y: number;
|
||||
onClose: () => void;
|
||||
onNewFile: () => void;
|
||||
onNewFolder: () => void;
|
||||
onRename: () => void;
|
||||
onDelete: () => void;
|
||||
hasNode: boolean;
|
||||
}
|
||||
|
||||
export const ContextMenu: React.FC<ContextMenuProps> = ({
|
||||
x,
|
||||
y,
|
||||
onClose,
|
||||
onNewFile,
|
||||
onNewFolder,
|
||||
onRename,
|
||||
onDelete,
|
||||
hasNode,
|
||||
}) => {
|
||||
useEffect(() => {
|
||||
const handleClick = () => onClose();
|
||||
document.addEventListener("click", handleClick);
|
||||
return () => document.removeEventListener("click", handleClick);
|
||||
}, [onClose]);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: y,
|
||||
left: x,
|
||||
backgroundColor: "#252526",
|
||||
border: "1px solid #3e3e42",
|
||||
borderRadius: "6px",
|
||||
boxShadow: "0 4px 12px rgba(0,0,0,0.4)",
|
||||
zIndex: 1000,
|
||||
minWidth: "180px",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<MenuItem onClick={onNewFile}>
|
||||
<FiFile /> New File
|
||||
</MenuItem>
|
||||
<MenuItem onClick={onNewFolder}>
|
||||
<FiFolder /> New Folder
|
||||
</MenuItem>
|
||||
{hasNode && (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
height: "1px",
|
||||
backgroundColor: "#3e3e42",
|
||||
margin: "4px 0",
|
||||
}}
|
||||
/>
|
||||
<MenuItem onClick={onRename}>
|
||||
<FiEdit3 /> Rename
|
||||
</MenuItem>
|
||||
<MenuItem onClick={onDelete} danger>
|
||||
<FiTrash2 /> Delete
|
||||
</MenuItem>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,318 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { FiSearch, FiFile, FiFolder, FiMinus } from "react-icons/fi";
|
||||
import { GoKebabHorizontal } from "react-icons/go";
|
||||
import { MdClose, MdAdd } from "react-icons/md";
|
||||
import { FileTreeItem } from "./FileTreeItem";
|
||||
import { ContextMenu } from "./ContextMenu";
|
||||
import { InputDialog } from "./InputDialog";
|
||||
import { filterTree, collectPathsToExpand } from "../helpers/fileTree";
|
||||
import { useIDEStore } from "../store/useIDEStore";
|
||||
import type { FileNode } from "../types";
|
||||
|
||||
interface FileExplorerProps {
|
||||
files: FileNode;
|
||||
onDeleteRoot: () => void;
|
||||
}
|
||||
|
||||
export const FileExplorer: React.FC<FileExplorerProps> = ({
|
||||
files,
|
||||
onDeleteRoot,
|
||||
}) => {
|
||||
const store = useIDEStore();
|
||||
const [showSearch, setShowSearch] = useState(false);
|
||||
|
||||
const handleEmptyContextMenu = (e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
store.setContextMenu({ x: e.clientX, y: e.clientY, node: null });
|
||||
};
|
||||
|
||||
const handleNodeContextMenu = (e: React.MouseEvent, node: FileNode) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
store.setContextMenu({ x: e.clientX, y: e.clientY, node });
|
||||
};
|
||||
|
||||
const filteredFiles = store.searchQuery
|
||||
? filterTree(files, store.searchQuery)
|
||||
: files;
|
||||
|
||||
useEffect(() => {
|
||||
if (store.searchQuery && files) {
|
||||
const pathsToExpand = collectPathsToExpand(files, store.searchQuery);
|
||||
if (pathsToExpand.size > 0) {
|
||||
store.autoExpandPaths(pathsToExpand);
|
||||
}
|
||||
}
|
||||
}, [store.searchQuery, files, store.autoExpandPaths]);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
backgroundColor: "#252526",
|
||||
}}
|
||||
onContextMenu={handleEmptyContextMenu}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
padding: "0 8px",
|
||||
height: "35px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
borderBottom: "1px solid #3e3e42",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
color: "#bbbbbb",
|
||||
fontWeight: 500,
|
||||
fontSize: "11px",
|
||||
letterSpacing: "0.8px",
|
||||
}}
|
||||
>
|
||||
EXPLORER
|
||||
</span>
|
||||
<div style={{ display: "flex", gap: "2px", alignItems: "center" }}>
|
||||
<button
|
||||
onClick={() => setShowSearch(!showSearch)}
|
||||
style={{
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
color: showSearch ? "#cccccc" : "#858585",
|
||||
cursor: "pointer",
|
||||
padding: "4px",
|
||||
borderRadius: "4px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
transition: "all 0.1s",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.backgroundColor = "#2a2d2e";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.backgroundColor = "transparent";
|
||||
}}
|
||||
title="Search in files"
|
||||
>
|
||||
<FiSearch size={14} />
|
||||
</button>
|
||||
<button
|
||||
onClick={store.collapseAllFolders}
|
||||
style={{
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
color: "#858585",
|
||||
cursor: "pointer",
|
||||
padding: "4px",
|
||||
borderRadius: "4px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
transition: "all 0.1s",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.backgroundColor = "#2a2d2e";
|
||||
e.currentTarget.style.color = "#cccccc";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.backgroundColor = "transparent";
|
||||
e.currentTarget.style.color = "#858585";
|
||||
}}
|
||||
title="Collapse All"
|
||||
>
|
||||
<FiMinus size={14} />
|
||||
</button>
|
||||
<button
|
||||
onClick={store.expandAllFolders}
|
||||
style={{
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
color: "#858585",
|
||||
cursor: "pointer",
|
||||
padding: "4px",
|
||||
borderRadius: "4px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
transition: "all 0.1s",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.backgroundColor = "#2a2d2e";
|
||||
e.currentTarget.style.color = "#cccccc";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.backgroundColor = "transparent";
|
||||
e.currentTarget.style.color = "#858585";
|
||||
}}
|
||||
title="Expand All"
|
||||
>
|
||||
<GoKebabHorizontal size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
padding: "6px 12px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "6px",
|
||||
borderBottom: "1px solid #3e3e42",
|
||||
}}
|
||||
>
|
||||
<FiFolder size={14} color="#858585" />
|
||||
<span
|
||||
style={{
|
||||
color: "#cccccc",
|
||||
fontWeight: 600,
|
||||
fontSize: "11px",
|
||||
letterSpacing: "0.3px",
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
{files.name}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{showSearch && (
|
||||
<div style={{ padding: "6px 8px", borderBottom: "1px solid #3e3e42" }}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#3c3c3c",
|
||||
border: store.searchQuery
|
||||
? "1px solid #007acc"
|
||||
: "1px solid transparent",
|
||||
borderRadius: "4px",
|
||||
padding: "0 6px",
|
||||
transition: "border-color 0.1s",
|
||||
}}
|
||||
>
|
||||
<FiSearch size={13} color="#858585" />
|
||||
<input
|
||||
type="text"
|
||||
value={store.searchQuery}
|
||||
onChange={(e) => store.setSearchQuery(e.target.value)}
|
||||
placeholder="Search..."
|
||||
autoFocus
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: "5px 6px",
|
||||
backgroundColor: "transparent",
|
||||
border: "none",
|
||||
color: "#cccccc",
|
||||
fontSize: "12px",
|
||||
outline: "none",
|
||||
}}
|
||||
/>
|
||||
{store.searchQuery && (
|
||||
<button
|
||||
onClick={() => store.setSearchQuery("")}
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
color: "#858585",
|
||||
cursor: "pointer",
|
||||
padding: "2px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<MdClose size={12} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={{ flex: 1, overflowY: "auto" }}>
|
||||
{filteredFiles ? (
|
||||
<FileTreeItem
|
||||
node={filteredFiles}
|
||||
level={0}
|
||||
onFileSelect={store.selectFile}
|
||||
selectedFile={store.activeFile?.path || null}
|
||||
onContextMenu={handleNodeContextMenu}
|
||||
expandedFolders={store.expandedFolders}
|
||||
onToggleFolder={store.toggleFolder}
|
||||
onDelete={store.handleDeleteNode}
|
||||
isRoot
|
||||
searchQuery={store.searchQuery}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
padding: "16px",
|
||||
color: "#858585",
|
||||
fontSize: "13px",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
No results found
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{store.contextMenu && (
|
||||
<ContextMenu
|
||||
x={store.contextMenu.x}
|
||||
y={store.contextMenu.y}
|
||||
onClose={() => store.setContextMenu(null)}
|
||||
onNewFile={() => {
|
||||
store.setDialog({
|
||||
type: "newFile",
|
||||
node: store.contextMenu?.node || null,
|
||||
});
|
||||
store.setContextMenu(null);
|
||||
}}
|
||||
onNewFolder={() => {
|
||||
store.setDialog({
|
||||
type: "newFolder",
|
||||
node: store.contextMenu?.node || null,
|
||||
});
|
||||
store.setContextMenu(null);
|
||||
}}
|
||||
onRename={() => {
|
||||
store.setDialog({
|
||||
type: "rename",
|
||||
node: store.contextMenu?.node || null,
|
||||
});
|
||||
store.setContextMenu(null);
|
||||
}}
|
||||
onDelete={() => {
|
||||
if (store.contextMenu?.node) {
|
||||
store.handleDeleteNode(store.contextMenu.node);
|
||||
}
|
||||
store.setContextMenu(null);
|
||||
}}
|
||||
hasNode={!!store.contextMenu.node}
|
||||
/>
|
||||
)}
|
||||
|
||||
{store.dialog && (
|
||||
<InputDialog
|
||||
title={
|
||||
store.dialog.type === "newFile"
|
||||
? "New File"
|
||||
: store.dialog.type === "newFolder"
|
||||
? "New Folder"
|
||||
: "Rename"
|
||||
}
|
||||
initialValue={
|
||||
store.dialog.type === "rename" && store.dialog.node
|
||||
? store.dialog.node.name
|
||||
: ""
|
||||
}
|
||||
onConfirm={store.handleDialogConfirm}
|
||||
onCancel={() => store.setDialog(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,169 @@
|
||||
import React, { useState } from "react";
|
||||
import { FiChevronRight, FiChevronDown, FiTrash2 } from "react-icons/fi";
|
||||
import { GoFile } from "react-icons/go";
|
||||
import type { FileNode } from "../types";
|
||||
|
||||
interface FileTreeItemProps {
|
||||
node: FileNode;
|
||||
level: number;
|
||||
onFileSelect: (node: FileNode) => void;
|
||||
selectedFile: string | null;
|
||||
onContextMenu: (e: React.MouseEvent, node: FileNode) => void;
|
||||
expandedFolders: Set<string>;
|
||||
onToggleFolder: (path: string) => void;
|
||||
onDelete: (node: FileNode) => void;
|
||||
isRoot?: boolean;
|
||||
searchQuery?: string;
|
||||
}
|
||||
|
||||
export const FileTreeItem: React.FC<FileTreeItemProps> = ({
|
||||
node,
|
||||
level,
|
||||
onFileSelect,
|
||||
selectedFile,
|
||||
onContextMenu,
|
||||
expandedFolders,
|
||||
onToggleFolder,
|
||||
onDelete,
|
||||
isRoot,
|
||||
searchQuery,
|
||||
}) => {
|
||||
const isFolder = node.type === "folder";
|
||||
const isSelected = selectedFile === node.path && !isFolder;
|
||||
const isExpanded = expandedFolders.has(node.path || node.name);
|
||||
const [hovered, setHovered] = useState(false);
|
||||
|
||||
const handleClick = () => {
|
||||
if (isFolder) {
|
||||
onToggleFolder(node.path || node.name);
|
||||
} else {
|
||||
onFileSelect(node);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = (e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
onDelete(node);
|
||||
};
|
||||
|
||||
const highlightText = (text: string, query: string) => {
|
||||
if (!query) return text;
|
||||
const idx = text.toLowerCase().indexOf(query.toLowerCase());
|
||||
if (idx === -1) return text;
|
||||
return (
|
||||
<>
|
||||
{text.slice(0, idx)}
|
||||
<span style={{ backgroundColor: "#613214", color: "#f9f9a4" }}>
|
||||
{text.slice(idx, idx + query.length)}
|
||||
</span>
|
||||
{text.slice(idx + query.length)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
onClick={handleClick}
|
||||
onContextMenu={(e) => onContextMenu(e, node)}
|
||||
onMouseEnter={() => setHovered(true)}
|
||||
onMouseLeave={() => setHovered(false)}
|
||||
style={{
|
||||
paddingLeft: isRoot ? "8px" : `${level * 16 + 8}px`,
|
||||
paddingTop: "4px",
|
||||
paddingBottom: "4px",
|
||||
cursor: "pointer",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "6px",
|
||||
backgroundColor: isSelected ? "#094771" : "transparent",
|
||||
color: isSelected ? "#fff" : "#cccccc",
|
||||
fontSize: "13px",
|
||||
transition: "background-color 0.1s",
|
||||
userSelect: "none",
|
||||
minHeight: "28px",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "14px",
|
||||
width: "16px",
|
||||
textAlign: "center",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{isFolder ? (
|
||||
isExpanded ? (
|
||||
<FiChevronDown />
|
||||
) : (
|
||||
<FiChevronRight />
|
||||
)
|
||||
) : (
|
||||
<GoFile />
|
||||
)}
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
flex: 1,
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
{searchQuery ? highlightText(node.name, searchQuery) : node.name}
|
||||
</span>
|
||||
{hovered && !isRoot && (
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
title={`Delete ${node.name}`}
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
color: "#858585",
|
||||
cursor: "pointer",
|
||||
padding: "2px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
borderRadius: "3px",
|
||||
flexShrink: 0,
|
||||
width: "20px",
|
||||
height: "20px",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.color = "#f48771";
|
||||
e.currentTarget.style.backgroundColor = "#3e3e42";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.color = "#858585";
|
||||
e.currentTarget.style.backgroundColor = "transparent";
|
||||
}}
|
||||
>
|
||||
<FiTrash2 size={13} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{isFolder && isExpanded && node.children && (
|
||||
<div>
|
||||
{node.children.map((child, idx) => (
|
||||
<FileTreeItem
|
||||
key={idx}
|
||||
node={child}
|
||||
level={level + 1}
|
||||
onFileSelect={onFileSelect}
|
||||
selectedFile={selectedFile}
|
||||
onContextMenu={onContextMenu}
|
||||
expandedFolders={expandedFolders}
|
||||
onToggleFolder={onToggleFolder}
|
||||
onDelete={onDelete}
|
||||
searchQuery={searchQuery}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,119 @@
|
||||
import React, { useState, useRef, useEffect } from "react";
|
||||
|
||||
interface InputDialogProps {
|
||||
title: string;
|
||||
initialValue?: string;
|
||||
onConfirm: (value: string) => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
export const InputDialog: React.FC<InputDialogProps> = ({
|
||||
title,
|
||||
initialValue = "",
|
||||
onConfirm,
|
||||
onCancel,
|
||||
}) => {
|
||||
const [value, setValue] = useState(initialValue);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
inputRef.current?.focus();
|
||||
inputRef.current?.select();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: "rgba(0,0,0,0.6)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
zIndex: 2000,
|
||||
}}
|
||||
onClick={onCancel}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#2d2d30",
|
||||
borderRadius: "8px",
|
||||
padding: "24px",
|
||||
minWidth: "320px",
|
||||
border: "1px solid #3e3e42",
|
||||
boxShadow: "0 8px 24px rgba(0,0,0,0.4)",
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<h3
|
||||
style={{
|
||||
margin: "0 0 8px 0",
|
||||
color: "#fff",
|
||||
fontSize: "16px",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</h3>
|
||||
<p style={{ margin: "0 0 16px 0", color: "#858585", fontSize: "12px" }}>
|
||||
Enter a new name
|
||||
</p>
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
onKeyDown={(e) =>
|
||||
e.key === "Enter" && value.trim() && onConfirm(value.trim())
|
||||
}
|
||||
style={{
|
||||
width: "100%",
|
||||
padding: "10px",
|
||||
backgroundColor: "#3c3c3c",
|
||||
border: "1px solid #3e3e42",
|
||||
borderRadius: "6px",
|
||||
color: "#ccc",
|
||||
fontSize: "14px",
|
||||
marginBottom: "20px",
|
||||
outline: "none",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{ display: "flex", gap: "12px", justifyContent: "flex-end" }}
|
||||
>
|
||||
<button
|
||||
onClick={onCancel}
|
||||
style={{
|
||||
padding: "6px 16px",
|
||||
backgroundColor: "transparent",
|
||||
border: "1px solid #0e639c",
|
||||
borderRadius: "4px",
|
||||
color: "#0e639c",
|
||||
cursor: "pointer",
|
||||
fontSize: "12px",
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={() => value.trim() && onConfirm(value.trim())}
|
||||
style={{
|
||||
padding: "6px 16px",
|
||||
backgroundColor: "#0e639c",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
color: "#fff",
|
||||
cursor: "pointer",
|
||||
fontSize: "12px",
|
||||
}}
|
||||
>
|
||||
OK
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,44 @@
|
||||
import React from "react";
|
||||
import { FiGitBranch, FiCheckCircle, FiAlertCircle } from "react-icons/fi";
|
||||
import type { FileNode } from "../types";
|
||||
|
||||
interface StatusBarProps {
|
||||
activeFile: FileNode | null;
|
||||
}
|
||||
|
||||
export const StatusBar: React.FC<StatusBarProps> = ({ activeFile }) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
height: "22px",
|
||||
backgroundColor: "#007acc",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
padding: "0 12px",
|
||||
fontSize: "12px",
|
||||
color: "#ffffff",
|
||||
userSelect: "none",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
|
||||
<span style={{ display: "flex", alignItems: "center", gap: "4px" }}>
|
||||
<FiGitBranch size={12} /> main
|
||||
</span>
|
||||
<span style={{ display: "flex", alignItems: "center", gap: "8px" }}>
|
||||
<FiCheckCircle size={12} /> 0 <FiAlertCircle size={12} /> 0
|
||||
</span>
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
|
||||
{activeFile && (
|
||||
<span>
|
||||
Ln 1, Col 1 | Spaces: 4 | UTF-8 |{" "}
|
||||
{activeFile.path?.split(".").pop()?.toUpperCase() || "TXT"}
|
||||
</span>
|
||||
)}
|
||||
<span>Web VS Code</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,55 @@
|
||||
import React from "react";
|
||||
import { FiGitBranch, FiCheckCircle } from "react-icons/fi";
|
||||
|
||||
export const TitleBar: React.FC = () => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
height: "32px",
|
||||
backgroundColor: "#2d2d30",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
padding: "0 12px",
|
||||
borderBottom: "1px solid #3e3e42",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
|
||||
<div style={{ display: "flex", gap: "8px" }}>
|
||||
<div
|
||||
style={{
|
||||
width: "12px",
|
||||
height: "12px",
|
||||
borderRadius: "50%",
|
||||
backgroundColor: "#ed6a5e",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
width: "12px",
|
||||
height: "12px",
|
||||
borderRadius: "50%",
|
||||
backgroundColor: "#f5bd4f",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
width: "12px",
|
||||
height: "12px",
|
||||
borderRadius: "50%",
|
||||
backgroundColor: "#61c454",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span style={{ color: "#cccccc", fontSize: "12px", fontWeight: 500 }}>
|
||||
Web VS Code
|
||||
</span>
|
||||
</div>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
|
||||
<FiGitBranch size={12} color="#858585" />
|
||||
<span style={{ color: "#858585", fontSize: "11px" }}>main</span>
|
||||
<FiCheckCircle size={12} color="#61c454" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,8 @@
|
||||
export { ContextMenu } from "./ContextMenu";
|
||||
export { InputDialog } from "./InputDialog";
|
||||
export { FileTreeItem } from "./FileTreeItem";
|
||||
export { FileExplorer } from "./FileExplorer";
|
||||
export { TabBar } from "./TabBar";
|
||||
export { CodeEditor } from "./CodeEditor";
|
||||
export { TitleBar } from "./TitleBar";
|
||||
export { StatusBar } from "./StatusBar";
|
||||
@@ -0,0 +1,174 @@
|
||||
import type { FileNode } from "../types";
|
||||
|
||||
export const addPaths = (node: FileNode, parentPath: string = ""): FileNode => {
|
||||
const currentPath = parentPath ? `${parentPath}/${node.name}` : node.name;
|
||||
const newNode = { ...node, path: currentPath };
|
||||
if (newNode.children) {
|
||||
newNode.children = newNode.children.map((child) =>
|
||||
addPaths(child, currentPath),
|
||||
);
|
||||
}
|
||||
return newNode;
|
||||
};
|
||||
|
||||
export const getAllFolderPaths = (node: FileNode): string[] => {
|
||||
let paths: string[] = [];
|
||||
if (node.type === "folder") {
|
||||
paths.push(node.path || node.name);
|
||||
if (node.children) {
|
||||
node.children.forEach((child) => {
|
||||
paths = [...paths, ...getAllFolderPaths(child)];
|
||||
});
|
||||
}
|
||||
}
|
||||
return paths;
|
||||
};
|
||||
|
||||
export const findNode = (node: FileNode, path: string): FileNode | null => {
|
||||
if (node.path === path) return node;
|
||||
if (node.children) {
|
||||
for (const child of node.children) {
|
||||
const found = findNode(child, path);
|
||||
if (found) return found;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
export const deleteNode = (node: FileNode, path: string): FileNode | null => {
|
||||
if (node.path === path) return null;
|
||||
|
||||
if (node.children) {
|
||||
const filtered = node.children.filter((child) => child.path !== path);
|
||||
const mapped = filtered
|
||||
.map((child) => deleteNode(child, path))
|
||||
.filter((child): child is FileNode => child !== null);
|
||||
return { ...node, children: mapped };
|
||||
}
|
||||
return node;
|
||||
};
|
||||
|
||||
export const addNode = (
|
||||
node: FileNode,
|
||||
parentPath: string,
|
||||
newNode: FileNode,
|
||||
): FileNode => {
|
||||
if (node.path === parentPath) {
|
||||
const newPath = addPaths(newNode, node.path);
|
||||
return { ...node, children: [...(node.children || []), newPath] };
|
||||
}
|
||||
if (node.children) {
|
||||
return {
|
||||
...node,
|
||||
children: node.children.map((child) =>
|
||||
addNode(child, parentPath, newNode),
|
||||
),
|
||||
};
|
||||
}
|
||||
return node;
|
||||
};
|
||||
|
||||
export const renameNode = (
|
||||
node: FileNode,
|
||||
oldPath: string,
|
||||
newName: string,
|
||||
): FileNode | null => {
|
||||
if (node.path === oldPath) {
|
||||
const pathParts = node.path?.split("/") || [];
|
||||
pathParts[pathParts.length - 1] = newName;
|
||||
const newPath = pathParts.join("/");
|
||||
const renamedNode = { ...node, name: newName, path: newPath };
|
||||
|
||||
if (renamedNode.children) {
|
||||
renamedNode.children = renamedNode.children.map((child) => {
|
||||
const oldChildPath = child.path || "";
|
||||
const newChildPath = oldChildPath.replace(oldPath, newPath);
|
||||
return (
|
||||
renameNode(
|
||||
child,
|
||||
oldChildPath,
|
||||
newChildPath.split("/").pop() || "",
|
||||
) || child
|
||||
);
|
||||
});
|
||||
}
|
||||
return renamedNode;
|
||||
}
|
||||
|
||||
if (node.children) {
|
||||
return {
|
||||
...node,
|
||||
children: node.children.map(
|
||||
(child) => renameNode(child, oldPath, newName) || child,
|
||||
),
|
||||
};
|
||||
}
|
||||
return node;
|
||||
};
|
||||
|
||||
export const filterTree = (node: FileNode, query: string): FileNode | null => {
|
||||
if (!query) return node;
|
||||
const lowerQuery = query.toLowerCase();
|
||||
|
||||
if (node.type === "file") {
|
||||
if (node.name.toLowerCase().includes(lowerQuery)) return node;
|
||||
return null;
|
||||
}
|
||||
|
||||
if (node.children) {
|
||||
const filteredChildren = node.children
|
||||
.map((child) => filterTree(child, query))
|
||||
.filter((child): child is FileNode => child !== null);
|
||||
|
||||
if (filteredChildren.length > 0) {
|
||||
return { ...node, children: filteredChildren };
|
||||
}
|
||||
}
|
||||
|
||||
if (node.name.toLowerCase().includes(lowerQuery)) return node;
|
||||
return null;
|
||||
};
|
||||
|
||||
export const collectPathsToExpand = (
|
||||
node: FileNode,
|
||||
query: string,
|
||||
): Set<string> => {
|
||||
const paths = new Set<string>();
|
||||
if (!query) return paths;
|
||||
|
||||
const lowerQuery = query.toLowerCase();
|
||||
|
||||
const search = (n: FileNode, currentPath: string) => {
|
||||
if (n.name.toLowerCase().includes(lowerQuery)) {
|
||||
const pathParts = currentPath.split("/");
|
||||
for (let i = 1; i < pathParts.length; i++) {
|
||||
paths.add(pathParts.slice(0, i).join("/"));
|
||||
}
|
||||
}
|
||||
if (n.children) {
|
||||
n.children.forEach((child) => {
|
||||
const childPath = child.path || `${currentPath}/${child.name}`;
|
||||
search(child, childPath);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
search(node, node.path || node.name);
|
||||
return paths;
|
||||
};
|
||||
|
||||
export const getLanguage = (path: string) => {
|
||||
const ext = path.split(".").pop();
|
||||
const map: Record<string, string> = {
|
||||
py: "python",
|
||||
js: "javascript",
|
||||
ts: "typescript",
|
||||
jsx: "javascript",
|
||||
tsx: "typescript",
|
||||
json: "json",
|
||||
md: "markdown",
|
||||
css: "css",
|
||||
html: "html",
|
||||
};
|
||||
return map[ext || ""] || "plaintext";
|
||||
};
|
||||
@@ -0,0 +1,3 @@
|
||||
export { IDE } from "./IDE";
|
||||
export { useIDEStore, initialFiles } from "./store/useIDEStore";
|
||||
export type { FileNode } from "./types";
|
||||
@@ -0,0 +1,385 @@
|
||||
import { create } from "zustand";
|
||||
import type { FileNode } from "../types";
|
||||
import {
|
||||
addPaths,
|
||||
getAllFolderPaths,
|
||||
findNode,
|
||||
deleteNode,
|
||||
addNode,
|
||||
renameNode,
|
||||
} from "../helpers/fileTree";
|
||||
|
||||
export const initialFiles: FileNode = {
|
||||
name: "my-project",
|
||||
type: "folder",
|
||||
children: [
|
||||
{
|
||||
name: "src",
|
||||
type: "folder",
|
||||
children: [
|
||||
{
|
||||
name: "main.py",
|
||||
type: "file",
|
||||
content:
|
||||
'print("Hello, World!")\n\ndef main():\n print("Welcome!")\n\nif __name__ == "__main__":\n main()',
|
||||
},
|
||||
{
|
||||
name: "utils.py",
|
||||
type: "file",
|
||||
content: "def helper():\n return 42",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "README.md",
|
||||
type: "file",
|
||||
content: "# My Project\n\nWelcome!",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
interface IDEState {
|
||||
// Файловая система
|
||||
files: FileNode | null;
|
||||
openFiles: FileNode[];
|
||||
activeFile: FileNode | null;
|
||||
expandedFolders: Set<string>;
|
||||
searchQuery: string;
|
||||
showSearch: boolean;
|
||||
isInitialized: boolean;
|
||||
|
||||
// Диалоги и контекстные меню
|
||||
contextMenu: { x: number; y: number; node: FileNode | null } | null;
|
||||
dialog: {
|
||||
type: "newFile" | "newFolder" | "rename";
|
||||
node: FileNode | null;
|
||||
} | null;
|
||||
tabContextMenu: { x: number; y: number; file: FileNode } | null;
|
||||
|
||||
// Действия с файлами
|
||||
selectFile: (node: FileNode) => void;
|
||||
updateFileContent: (content: string) => void;
|
||||
closeFile: (file: FileNode) => void;
|
||||
closeAllFiles: () => void;
|
||||
closeOtherFiles: (file: FileNode) => void;
|
||||
|
||||
// Действия с деревом
|
||||
refreshFiles: (newFiles: FileNode | null, newFile?: FileNode) => void;
|
||||
toggleFolder: (path: string) => void;
|
||||
expandAllFolders: () => void;
|
||||
collapseAllFolders: () => void;
|
||||
autoExpandPaths: (paths: Set<string>) => void;
|
||||
deleteRoot: () => void;
|
||||
createNewProject: () => void;
|
||||
|
||||
// Поиск
|
||||
setSearchQuery: (query: string) => void;
|
||||
toggleSearch: () => void;
|
||||
|
||||
// Контекстные меню и диалоги
|
||||
setContextMenu: (
|
||||
menu: { x: number; y: number; node: FileNode | null } | null,
|
||||
) => void;
|
||||
setDialog: (
|
||||
dialog: {
|
||||
type: "newFile" | "newFolder" | "rename";
|
||||
node: FileNode | null;
|
||||
} | null,
|
||||
) => void;
|
||||
setTabContextMenu: (
|
||||
menu: { x: number; y: number; file: FileNode } | null,
|
||||
) => void;
|
||||
|
||||
// Инициализация
|
||||
initialize: (initialFiles: FileNode) => void;
|
||||
|
||||
// Диалог подтверждения
|
||||
handleDialogConfirm: (value: string) => void;
|
||||
handleDeleteNode: (node: FileNode) => void;
|
||||
}
|
||||
|
||||
export const useIDEStore = create<IDEState>((set, get) => ({
|
||||
// Начальное состояние
|
||||
files: null,
|
||||
openFiles: [],
|
||||
activeFile: null,
|
||||
expandedFolders: new Set(),
|
||||
searchQuery: "",
|
||||
showSearch: false,
|
||||
isInitialized: false,
|
||||
|
||||
contextMenu: null,
|
||||
dialog: null,
|
||||
tabContextMenu: null,
|
||||
|
||||
// Инициализация
|
||||
initialize: (initialFiles: FileNode) => {
|
||||
const filesWithPaths = addPaths(initialFiles);
|
||||
set({
|
||||
files: filesWithPaths,
|
||||
expandedFolders: new Set([filesWithPaths.path || filesWithPaths.name]),
|
||||
isInitialized: true,
|
||||
});
|
||||
},
|
||||
|
||||
// Выбор файла
|
||||
selectFile: (node: FileNode) => {
|
||||
if (node.type === "file") {
|
||||
const { openFiles } = get();
|
||||
if (!openFiles.find((f) => f.path === node.path)) {
|
||||
set((state) => ({ openFiles: [...state.openFiles, node] }));
|
||||
}
|
||||
set({ activeFile: node });
|
||||
}
|
||||
},
|
||||
|
||||
// Обновление содержимого файла
|
||||
updateFileContent: (content: string) => {
|
||||
const { activeFile } = get();
|
||||
if (activeFile) {
|
||||
const updatedFile = { ...activeFile, content };
|
||||
set({ activeFile: updatedFile });
|
||||
set((state) => ({
|
||||
openFiles: state.openFiles.map((f) =>
|
||||
f.path === activeFile.path ? updatedFile : f,
|
||||
),
|
||||
}));
|
||||
}
|
||||
},
|
||||
|
||||
// Закрытие файла
|
||||
closeFile: (file: FileNode) => {
|
||||
const { openFiles, activeFile } = get();
|
||||
const newOpenFiles = openFiles.filter((f) => f.path !== file.path);
|
||||
set({ openFiles: newOpenFiles });
|
||||
|
||||
if (activeFile?.path === file.path) {
|
||||
set({ activeFile: newOpenFiles[newOpenFiles.length - 1] || null });
|
||||
}
|
||||
},
|
||||
|
||||
// Закрыть все файлы
|
||||
closeAllFiles: () => {
|
||||
set({ openFiles: [], activeFile: null });
|
||||
},
|
||||
|
||||
// Закрыть другие файлы
|
||||
closeOtherFiles: (file: FileNode) => {
|
||||
set({ openFiles: [file], activeFile: file });
|
||||
},
|
||||
|
||||
// Обновить файловую систему
|
||||
refreshFiles: (newFiles: FileNode | null, newFile?: FileNode) => {
|
||||
const { openFiles, activeFile, selectFile } = get();
|
||||
|
||||
set({ files: newFiles });
|
||||
|
||||
if (!newFiles) {
|
||||
set({ openFiles: [], activeFile: null });
|
||||
return;
|
||||
}
|
||||
|
||||
const updatedOpenFiles = openFiles
|
||||
.map((f) => {
|
||||
const found = findNode(newFiles, f.path || "");
|
||||
return found && found.type === "file" ? found : null;
|
||||
})
|
||||
.filter((f): f is FileNode => f !== null);
|
||||
|
||||
set({ openFiles: updatedOpenFiles });
|
||||
|
||||
if (newFile) {
|
||||
selectFile(newFile);
|
||||
} else if (activeFile) {
|
||||
const stillExists = findNode(newFiles, activeFile.path || "");
|
||||
if (!stillExists) {
|
||||
set({
|
||||
activeFile: updatedOpenFiles[updatedOpenFiles.length - 1] || null,
|
||||
});
|
||||
} else if (stillExists.type === "file") {
|
||||
set({ activeFile: stillExists });
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Переключить папку
|
||||
toggleFolder: (path: string) => {
|
||||
set((state) => {
|
||||
const newSet = new Set(state.expandedFolders);
|
||||
if (newSet.has(path)) {
|
||||
newSet.delete(path);
|
||||
} else {
|
||||
newSet.add(path);
|
||||
}
|
||||
return { expandedFolders: newSet };
|
||||
});
|
||||
},
|
||||
|
||||
// Раскрыть все папки
|
||||
expandAllFolders: () => {
|
||||
const { files } = get();
|
||||
if (files) {
|
||||
set({ expandedFolders: new Set(getAllFolderPaths(files)) });
|
||||
}
|
||||
},
|
||||
|
||||
// Свернуть все папки
|
||||
collapseAllFolders: () => {
|
||||
set({ expandedFolders: new Set() });
|
||||
},
|
||||
|
||||
// Автоматически раскрыть пути
|
||||
autoExpandPaths: (paths: Set<string>) => {
|
||||
set((state) => ({
|
||||
expandedFolders: new Set([...state.expandedFolders, ...paths]),
|
||||
}));
|
||||
},
|
||||
|
||||
// Удалить корень
|
||||
deleteRoot: () => {
|
||||
set({
|
||||
files: null,
|
||||
openFiles: [],
|
||||
activeFile: null,
|
||||
expandedFolders: new Set(),
|
||||
});
|
||||
},
|
||||
|
||||
// Создать новый проект
|
||||
createNewProject: () => {
|
||||
const newProject = addPaths(initialFiles);
|
||||
set({
|
||||
files: newProject,
|
||||
expandedFolders: new Set([newProject.path || newProject.name]),
|
||||
searchQuery: "",
|
||||
});
|
||||
},
|
||||
|
||||
// Поиск
|
||||
setSearchQuery: (query: string) => {
|
||||
set({ searchQuery: query });
|
||||
},
|
||||
|
||||
toggleSearch: () => {
|
||||
set((state) => ({ showSearch: !state.showSearch }));
|
||||
},
|
||||
|
||||
// Контекстные меню и диалоги
|
||||
setContextMenu: (menu) => set({ contextMenu: menu }),
|
||||
setDialog: (dialog) => set({ dialog: dialog }),
|
||||
setTabContextMenu: (menu) => set({ tabContextMenu: menu }),
|
||||
|
||||
// Подтверждение диалога
|
||||
handleDialogConfirm: (value: string) => {
|
||||
const { dialog, files, refreshFiles, toggleFolder, autoExpandPaths } =
|
||||
get();
|
||||
if (!dialog) return;
|
||||
|
||||
if (dialog.type === "rename" && dialog.node) {
|
||||
const parentPath =
|
||||
dialog.node.path?.split("/").slice(0, -1).join("/") || "";
|
||||
const parentNode = parentPath ? findNode(files!, parentPath) : files;
|
||||
if (
|
||||
parentNode?.children?.some(
|
||||
(c) =>
|
||||
c.name.toLowerCase() === value.toLowerCase() &&
|
||||
c.path !== dialog.node?.path,
|
||||
)
|
||||
) {
|
||||
alert(`"${value}" already exists.`);
|
||||
return;
|
||||
}
|
||||
const newFiles = renameNode(
|
||||
files!,
|
||||
dialog.node.path || dialog.node.name,
|
||||
value,
|
||||
);
|
||||
if (newFiles) {
|
||||
refreshFiles(newFiles);
|
||||
}
|
||||
set({ dialog: null });
|
||||
return;
|
||||
}
|
||||
|
||||
let parentPath: string;
|
||||
|
||||
if (!dialog.node) {
|
||||
parentPath = files!.path || files!.name;
|
||||
} else if (dialog.node.type === "folder") {
|
||||
parentPath = dialog.node.path || dialog.node.name;
|
||||
} else {
|
||||
const pathParts = (dialog.node.path || dialog.node.name).split("/");
|
||||
pathParts.pop();
|
||||
parentPath = pathParts.join("/") || files!.path || files!.name;
|
||||
}
|
||||
|
||||
const parentNode = findNode(files!, parentPath);
|
||||
if (
|
||||
parentNode?.children?.some(
|
||||
(c) => c.name.toLowerCase() === value.toLowerCase(),
|
||||
)
|
||||
) {
|
||||
alert(`"${value}" already exists in this folder.`);
|
||||
set({ dialog: null });
|
||||
return;
|
||||
}
|
||||
|
||||
let newFiles: FileNode | null = null;
|
||||
let createdNode: FileNode | null = null;
|
||||
|
||||
if (dialog.type === "newFile") {
|
||||
createdNode = { name: value, type: "file", content: "" };
|
||||
newFiles = addNode(files!, parentPath, createdNode);
|
||||
} else if (dialog.type === "newFolder") {
|
||||
createdNode = { name: value, type: "folder", children: [] };
|
||||
newFiles = addNode(files!, parentPath, createdNode);
|
||||
}
|
||||
|
||||
if (newFiles) {
|
||||
const allParentPaths: string[] = [];
|
||||
let current = parentPath;
|
||||
while (current) {
|
||||
allParentPaths.push(current);
|
||||
const parts = current.split("/");
|
||||
parts.pop();
|
||||
current = parts.join("/");
|
||||
}
|
||||
allParentPaths.forEach((p) => {
|
||||
if (!get().expandedFolders.has(p)) {
|
||||
toggleFolder(p);
|
||||
}
|
||||
});
|
||||
autoExpandPaths(new Set(allParentPaths));
|
||||
|
||||
if (createdNode && createdNode.type === "file") {
|
||||
const findAndOpen = (node: FileNode, name: string): FileNode | null => {
|
||||
if (node.name === name && node.type === "file") return node;
|
||||
if (node.children) {
|
||||
for (const child of node.children) {
|
||||
const found = findAndOpen(child, name);
|
||||
if (found) return found;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
const openedFile = findAndOpen(newFiles, value);
|
||||
refreshFiles(newFiles, openedFile || undefined);
|
||||
} else {
|
||||
refreshFiles(newFiles);
|
||||
}
|
||||
}
|
||||
set({ dialog: null });
|
||||
},
|
||||
|
||||
// Удаление узла
|
||||
handleDeleteNode: (node: FileNode) => {
|
||||
const { files, refreshFiles } = get();
|
||||
const isRootNode = node.path === files?.path;
|
||||
if (isRootNode) {
|
||||
get().deleteRoot();
|
||||
} else if (window.confirm(`Delete "${node.name}"?`)) {
|
||||
const newFiles = deleteNode(files!, node.path || node.name);
|
||||
if (newFiles) refreshFiles(newFiles);
|
||||
}
|
||||
},
|
||||
}));
|
||||
@@ -0,0 +1,24 @@
|
||||
export interface FileNode {
|
||||
name: string;
|
||||
type: "file" | "folder";
|
||||
content?: string;
|
||||
children?: FileNode[];
|
||||
path?: string;
|
||||
}
|
||||
|
||||
export interface ContextMenuState {
|
||||
x: number;
|
||||
y: number;
|
||||
node: FileNode | null;
|
||||
}
|
||||
|
||||
export interface DialogState {
|
||||
type: "newFile" | "newFolder" | "rename";
|
||||
node: FileNode | null;
|
||||
}
|
||||
|
||||
export interface TabContextMenuState {
|
||||
x: number;
|
||||
y: number;
|
||||
file: FileNode;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { IDE } from "../modules/ide";
|
||||
|
||||
export const IDEPage = () => {
|
||||
return (
|
||||
<div className="absolute top-0 left-0 w-full h-full z-90">
|
||||
<IDE initialFiles={{ name: "тест", type: "folder" }} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
+891
-5
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user