@noya-app/noya-file-explorer 0.0.31 → 0.0.33

package/src/git/useGitFileOperations.ts

@@ -0,0 +1,184 @@
+import { GitManager, RepoFilesState } from "@noya-app/state-manager";
+import {
+  collectDroppedFiles,
+  readFileAsText,
+} from "@noya-app/react-utils";
+import { fileOpen } from "browser-fs-access";
+import { DragEvent, useCallback, useState } from "react";
+import {
+  computeRenamedPath,
+  type GitFileItem,
+  isTempItem,
+} from "./gitFileTree";
+
+export type UseGitFileOperationsOptions = {
+  repoId: string;
+  repoFilesState: RepoFilesState;
+  gitManager: GitManager;
+};
+
+export function useGitFileOperations({
+  repoId,
+  repoFilesState,
+  gitManager,
+}: UseGitFileOperationsOptions) {
+  const [isUploading, setIsUploading] = useState(false);
+
+  const createFile = useCallback(
+    async (path: string, content: string = "") => {
+      try {
+        await gitManager.patchFiles(
+          repoId,
+          { create: [{ path, content }] },
+          repoFilesState.ref
+        );
+      } catch (error) {
+        alert(`Failed to create file: ${error}`);
+        throw error;
+      }
+    },
+    [gitManager, repoId, repoFilesState.ref]
+  );
+
+  const renameFile = useCallback(
+    async (item: GitFileItem, newName: string) => {
+      // Handle temp item (new file creation)
+      if (isTempItem(item)) {
+        if (!newName) return;
+        await createFile(newName);
+        return;
+      }
+
+      // Handle actual rename
+      if (item.isDirectory) {
+        alert("Renaming directories is not yet supported");
+        return;
+      }
+
+      // If name didn't change, do nothing
+      if (newName === item.name) return;
+
+      const newPath = computeRenamedPath(item.path, newName);
+
+      try {
+        await gitManager.patchFiles(
+          repoId,
+          { rename: [{ oldPath: item.path, newPath }] },
+          repoFilesState.ref
+        );
+      } catch (error) {
+        alert(`Failed to rename file: ${error}`);
+        throw error;
+      }
+    },
+    [gitManager, repoId, repoFilesState.ref, createFile]
+  );
+
+  const deleteFiles = useCallback(
+    async (items: GitFileItem[]) => {
+      // Collect all file paths to delete
+      const pathsToDelete = new Set<string>();
+
+      for (const item of items) {
+        if (item.isDirectory) {
+          // Find all files under this directory
+          const dirPrefix = item.path + "/";
+          for (const filePath of repoFilesState.files) {
+            if (filePath.startsWith(dirPrefix)) {
+              pathsToDelete.add(filePath);
+            }
+          }
+        } else {
+          pathsToDelete.add(item.path);
+        }
+      }
+
+      if (pathsToDelete.size === 0) {
+        return;
+      }
+
+      try {
+        await gitManager.patchFiles(
+          repoId,
+          { delete: Array.from(pathsToDelete).map((path) => ({ path })) },
+          repoFilesState.ref
+        );
+      } catch (error) {
+        alert(`Failed to delete files: ${error}`);
+        throw error;
+      }
+    },
+    [gitManager, repoId, repoFilesState.ref, repoFilesState.files]
+  );
+
+  const uploadFiles = useCallback(async () => {
+    try {
+      const files = await fileOpen({ multiple: true });
+      if (!files || (Array.isArray(files) && files.length === 0)) return;
+
+      const fileArray = Array.isArray(files) ? files : [files];
+      setIsUploading(true);
+
+      const createOperations = await Promise.all(
+        fileArray.map(async (file) => ({
+          path: file.name,
+          content: await readFileAsText(file),
+        }))
+      );
+
+      await gitManager.patchFiles(
+        repoId,
+        { create: createOperations },
+        repoFilesState.ref
+      );
+    } catch (error) {
+      if (error instanceof Error && error.name === "AbortError") {
+        // User cancelled
+      } else {
+        alert(`Failed to upload files: ${error}`);
+      }
+    } finally {
+      setIsUploading(false);
+    }
+  }, [gitManager, repoId, repoFilesState.ref]);
+
+  const handleFileDrop = useCallback(
+    async (event: DragEvent) => {
+      event.preventDefault();
+
+      try {
+        setIsUploading(true);
+        const droppedFiles = await collectDroppedFiles(event.dataTransfer);
+
+        if (droppedFiles.length === 0) return;
+
+        const createOperations = await Promise.all(
+          droppedFiles.map(async ({ file, relativePath }) => ({
+            path: relativePath,
+            content: await readFileAsText(file),
+          }))
+        );
+
+        await gitManager.patchFiles(
+          repoId,
+          { create: createOperations },
+          repoFilesState.ref
+        );
+      } catch (error) {
+        alert(`Failed to upload files: ${error}`);
+      } finally {
+        setIsUploading(false);
+      }
+    },
+    [gitManager, repoId, repoFilesState.ref]
+  );
+
+  return {
+    isUploading,
+    createFile,
+    renameFile,
+    deleteFiles,
+    uploadFiles,
+    handleFileDrop,
+  };
+}

package/src/git/useGitFileTree.ts

@@ -0,0 +1,91 @@
+import { RepoFilesState } from "@noya-app/state-manager";
+import { useCallback, useMemo, useState } from "react";
+import {
+  createTempFileItem,
+  getVisibleItems,
+  type GitFileItem,
+  parseFilesToTree,
+} from "./gitFileTree";
+
+export type UseGitFileTreeOptions = {
+  repoFilesState: RepoFilesState;
+};
+
+export function useGitFileTree({ repoFilesState }: UseGitFileTreeOptions) {
+  const [expandedDirs, setExpandedDirs] = useState<Set<string>>(
+    () => new Set()
+  );
+  const [tempItem, setTempItem] = useState<GitFileItem | undefined>(undefined);
+
+  // Parse files into tree structure
+  const allItems = useMemo(
+    () => parseFilesToTree(repoFilesState.files),
+    [repoFilesState.files]
+  );
+
+  // Include temp item if present
+  const allItemsWithTemp = useMemo(() => {
+    if (!tempItem) return allItems;
+    return [...allItems, tempItem];
+  }, [allItems, tempItem]);
+
+  // Get visible items based on expanded state
+  const visibleItems = useMemo(
+    () => getVisibleItems(allItemsWithTemp, expandedDirs),
+    [allItemsWithTemp, expandedDirs]
+  );
+
+  const getExpanded = useCallback(
+    (item: GitFileItem) => {
+      if (!item.isDirectory) return undefined;
+      return expandedDirs.has(item.path);
+    },
+    [expandedDirs]
+  );
+
+  const setExpanded = useCallback((item: GitFileItem, expanded: boolean) => {
+    if (!item.isDirectory) return;
+    setExpandedDirs((prev) => {
+      const next = new Set(prev);
+      if (expanded) {
+        next.add(item.path);
+      } else {
+        next.delete(item.path);
+      }
+      return next;
+    });
+  }, []);
+
+  const toggleExpanded = useCallback((item: GitFileItem) => {
+    if (!item.isDirectory) return;
+    setExpandedDirs((prev) => {
+      const next = new Set(prev);
+      if (next.has(item.path)) {
+        next.delete(item.path);
+      } else {
+        next.add(item.path);
+      }
+      return next;
+    });
+  }, []);
+
+  const addTempItem = useCallback(() => {
+    const newItem = createTempFileItem();
+    setTempItem(newItem);
+    return newItem;
+  }, []);
+
+  const clearTempItem = useCallback(() => {
+    setTempItem(undefined);
+  }, []);
+
+  return {
+    visibleItems,
+    tempItem,
+    getExpanded,
+    setExpanded,
+    toggleExpanded,
+    addTempItem,
+    clearTempItem,
+  };
+}

package/src/index.ts

@@ -1,4 +1,5 @@
 import "./index.css";
+export * from "./GitFileExplorer";
 export * from "./MediaCollection";
 export * from "./ResourceExplorer";
 export * from "./utils/contentType";

package/src/utils/handleFileDrop.ts

@@ -7,19 +7,10 @@ import {
   ResourceMap,
 } from "@noya-app/noya-schemas";
 import { Base64, uuid } from "@noya-app/noya-utils";
+import { collectDroppedFiles } from "@noya-app/react-utils";
 import { path } from "imfs";
 import { getContentTypeFromFile } from "./contentType";
 
-function isDirectoryEntry(
-  entry: FileSystemEntry
-): entry is FileSystemDirectoryEntry {
-  return entry.isDirectory;
-}
-
-function isFileEntry(entry: FileSystemEntry): entry is FileSystemFileEntry {
-  return entry.isFile;
-}
-
 export async function handleDataTransfer({
   accessibleByFileId,
   dataTransfer,
@@ -32,80 +23,7 @@ export async function handleDataTransfer({
   resourceMap: ResourceMap;
 }): Promise<ResourceCreateMap | undefined> {
   try {
-    const dataTransferItems = Array.from(dataTransfer.items ?? []);
-
-    const supportsEntries = dataTransferItems.some(
-      (item) => typeof item?.webkitGetAsEntry === "function"
-    );
-
-    type DroppedFile = { file: File; relativePath: string };
-
-    const collectFromEntry = async (
-      entry: FileSystemEntry,
-      basePath: string
-    ): Promise<DroppedFile[]> => {
-      if (!entry) return [];
-      if (isFileEntry(entry)) {
-        const file: File = await new Promise((resolve) =>
-          (entry as FileSystemFileEntry).file((f: File) => resolve(f))
-        );
-        return [
-          {
-            file,
-            relativePath: path.join(basePath, file.name),
-          },
-        ];
-      }
-      if (isDirectoryEntry(entry)) {
-        const reader = entry.createReader();
-        const readAll = async (): Promise<FileSystemEntry[]> => {
-          const all: FileSystemEntry[] = [];
-          // readEntries may return partial results; loop until empty
-          // eslint-disable-next-line no-constant-condition
-          while (true) {
-            const entries: FileSystemEntry[] = await new Promise((resolve) =>
-              reader.readEntries((ents: FileSystemEntry[]) => resolve(ents))
-            );
-            if (!entries.length) break;
-            all.push(...entries);
-          }
-          return all;
-        };
-        const children = await readAll();
-        const results = await Promise.all(
-          children.map((child) =>
-            collectFromEntry(child, path.join(basePath, entry.name))
-          )
-        );
-        return results.flat();
-      }
-      return [];
-    };
-
-    let dropped: DroppedFile[] = [];
-
-    if (supportsEntries) {
-      const topLevelEntries = dataTransferItems.flatMap((item) => {
-        const entry = item.webkitGetAsEntry?.();
-        if (!entry) return [];
-        return [entry];
-      });
-      const nested = await Promise.all(
-        topLevelEntries.map((entry) => collectFromEntry(entry, ""))
-      );
-      dropped = nested.flat();
-    } else {
-      const files = Array.from(dataTransfer.files);
-      if (files.length === 0) return;
-      dropped = files.map((file) => ({
-        file,
-        // Best effort: try webkitRelativePath; fall back to name
-        relativePath:
-          file.webkitRelativePath && file.webkitRelativePath.length > 0
-            ? file.webkitRelativePath
-            : file.name,
-      }));
-    }
+    const dropped = await collectDroppedFiles(dataTransfer);
 
     if (dropped.length === 0) return;