feat: page tempaltes

2026-04-04 06:05:51 +03:00
parent 43e16b1360
commit adbb0ee368
9 changed files with 490 additions and 9 deletions
@@ -0,0 +1,65 @@
+import React from "react";
+import type { FileNode } from "../types";
+import { FilePickerItem } from "./FilePickerItem";
+import { useFilePickerStore } from "../store/useFilePickerStore";
+
+interface FilePickerProps {
+  files: FileNode;
+}
+
+const FilePickerTree: React.FC<{ node: FileNode; level: number }> = ({
+  node,
+  level,
+}) => {
+  const expandedFolders = useFilePickerStore((s) => s.expandedFolders);
+  const selectedPaths = useFilePickerStore((s) => s.selectedPaths);
+  const toggleSelection = useFilePickerStore((s) => s.toggleSelection);
+  const toggleFolder = useFilePickerStore((s) => s.toggleFolder);
+
+  const nodePath = node.path || node.name;
+  const isExpanded = expandedFolders.has(nodePath);
+  const isSelected = node.type === "file" && selectedPaths.has(nodePath);
+
+  if (node.type === "file") {
+    return (
+      <FilePickerItem
+        name={node.name}
+        type="file"
+        path={nodePath}
+        isSelected={isSelected}
+        level={level}
+        onToggleSelect={toggleSelection}
+      />
+    );
+  }
+
+  return (
+    <>
+      <FilePickerItem
+        name={node.name}
+        type="folder"
+        path={nodePath}
+        isExpanded={isExpanded}
+        level={level}
+        onToggleFolder={toggleFolder}
+      >
+        {node.children?.map((child, idx) => (
+          <FilePickerTree key={idx} node={child} level={level + 1} />
+        ))}
+      </FilePickerItem>
+    </>
+  );
+};
+
+export const FilePicker: React.FC<FilePickerProps> = ({ files }) => {
+  return (
+    <div
+      style={{
+        height: "100%",
+        overflowY: "auto",
+      }}
+    >
+      <FilePickerTree node={files} level={0} />
+    </div>
+  );
+};
@@ -0,0 +1,156 @@
+import React from "react";
+import {
+  FiChevronRight,
+  FiChevronDown,
+  FiFile,
+  FiFolder,
+} from "react-icons/fi";
+
+interface FilePickerItemProps {
+  name: string;
+  type: "file" | "folder";
+  path: string;
+  isSelected?: boolean;
+  isExpanded?: boolean;
+  children?: React.ReactNode;
+  level: number;
+  onToggleSelect?: (path: string) => void;
+  onToggleFolder?: (path: string) => void;
+}
+
+export const FilePickerItem: React.FC<FilePickerItemProps> = ({
+  name,
+  type,
+  path,
+  isSelected,
+  isExpanded,
+  children,
+  level,
+  onToggleSelect,
+  onToggleFolder,
+}) => {
+  const isFolder = type === "folder";
+  const extension = name.includes(".")
+    ? name.split(".").pop()?.toUpperCase()
+    : "";
+  const paddingLeft = 12 + level * 20;
+
+  return (
+    <div>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          paddingLeft: `${paddingLeft}px`,
+          paddingRight: "12px",
+          height: "36px",
+          borderBottom: "1px solid #1a1a1a",
+          cursor: "pointer",
+          transition: "background-color 0.1s",
+          gap: "8px",
+        }}
+        onClick={() => {
+          if (isFolder && onToggleFolder) {
+            onToggleFolder(path);
+          } else if (!isFolder && onToggleSelect) {
+            onToggleSelect(path);
+          }
+        }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.backgroundColor = "#2a2a2a";
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.backgroundColor = "transparent";
+        }}
+      >
+        {/* Folder expand icon */}
+        {isFolder && (
+          <span style={{ color: "#858585", display: "flex", flexShrink: 0 }}>
+            {isExpanded ? (
+              <FiChevronDown size={14} />
+            ) : (
+              <FiChevronRight size={14} />
+            )}
+          </span>
+        )}
+
+        {/* File/Folder icon */}
+        <span style={{ display: "flex", flexShrink: 0 }}>
+          {isFolder ? (
+            <FiFolder size={15} color="#dcb67a" />
+          ) : (
+            <FiFile size={15} color="#858585" />
+          )}
+        </span>
+
+        {/* Name */}
+        <span
+          style={{
+            flex: 1,
+            color: "#cccccc",
+            fontSize: "13px",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {name}
+        </span>
+
+        {/* Extension badge — только у файлов */}
+        {!isFolder && extension && (
+          <span
+            style={{
+              color: "#858585",
+              fontSize: "11px",
+              fontFamily: "monospace",
+              padding: "2px 6px",
+              backgroundColor: "#2a2a2a",
+              borderRadius: "3px",
+              flexShrink: 0,
+            }}
+          >
+            {extension}
+          </span>
+        )}
+
+        {/* Checkbox — только у файлов */}
+        {!isFolder && onToggleSelect && (
+          <div
+            style={{
+              width: "18px",
+              height: "18px",
+              border: isSelected ? "2px solid #0e639c" : "2px solid #555",
+              borderRadius: "3px",
+              backgroundColor: isSelected ? "#0e639c" : "transparent",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0,
+              transition: "all 0.15s",
+            }}
+            onClick={(e) => {
+              e.stopPropagation();
+              onToggleSelect(path);
+            }}
+          >
+            {isSelected && (
+              <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+                <path
+                  d="M2 6L5 9L10 3"
+                  stroke="white"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Children */}
+      {isFolder && isExpanded && children}
+    </div>
+  );
+};
@@ -6,3 +6,5 @@ export { TabBar } from "./TabBar";
 export { CodeEditor } from "./CodeEditor";
 export { TitleBar } from "./TitleBar";
 export { StatusBar } from "./StatusBar";
+export { FilePickerItem } from "./FilePickerItem";
+export { FilePicker } from "./FilePicker";