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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-file-explorer",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -19,13 +19,13 @@
     "dev": "npm run build:main -- --watch"
   },
   "dependencies": {
-    "@noya-app/noya-designsystem": "0.1.76",
-    "@noya-app/noya-icons": "0.1.16",
-    "@noya-app/noya-multiplayer-react": "0.1.77",
+    "@noya-app/noya-designsystem": "0.1.78",
+    "@noya-app/noya-icons": "0.1.18",
+    "@noya-app/noya-multiplayer-react": "0.1.79",
     "@noya-app/noya-keymap": "0.1.4",
-    "@noya-app/react-utils": "0.1.28",
+    "@noya-app/react-utils": "0.1.29",
     "@noya-app/noya-utils": "0.1.9",
-    "@noya-app/noya-schemas": "0.1.8",
+    "@noya-app/noya-schemas": "0.1.9",
     "imfs": "^0.1.0",
     "browser-fs-access": "0.35.0"
   },

package/src/GitFileExplorer.tsx

@@ -0,0 +1,432 @@
+"use client";
+
+import {
+  Button,
+  CollectionRef,
+  createSectionedMenu,
+  cx,
+  DropdownMenu,
+  IconButton,
+  List,
+  MediaThumbnail,
+  Section,
+  Small,
+  useOpenConfirmationDialog,
+} from "@noya-app/noya-designsystem";
+import {
+  InputIcon,
+  PlusIcon,
+  TrashIcon,
+  UploadIcon,
+} from "@noya-app/noya-icons";
+import { useFileDropTarget } from "@noya-app/react-utils";
+import { GitManager, RepoFilesState } from "@noya-app/state-manager";
+import React, {
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { type GitFileItem, isTempItem } from "./git/gitFileTree";
+import { useGitFileOperations } from "./git/useGitFileOperations";
+import { useGitFileTree } from "./git/useGitFileTree";
+
+/**
+ * Returns true only after the condition has been true for the specified delay.
+ * Resets immediately when condition becomes false.
+ */
+function useDelayedTrue(condition: boolean, delayMs: number): boolean {
+  const [delayedValue, setDelayedValue] = useState(false);
+
+  useEffect(() => {
+    if (!condition) {
+      setDelayedValue(false);
+      return;
+    }
+
+    const timeout = setTimeout(() => {
+      setDelayedValue(true);
+    }, delayMs);
+
+    return () => clearTimeout(timeout);
+  }, [condition, delayMs]);
+
+  return delayedValue;
+}
+
+type MenuAction = "rename" | "delete" | "addFile";
+type HeaderMenuAction = "newFile" | "uploadFiles";
+
+export { type GitFileItem } from "./git/gitFileTree";
+
+export type GitFileExplorerRef = {
+  addFile: () => void;
+  delete: (selectedIds: string[]) => void;
+  rename: (selectedId: string) => void;
+};
+
+export type GitFileExplorerProps = {
+  repoId: string;
+  repoFilesState: RepoFilesState;
+  gitManager: GitManager;
+  selectedIds?: string[];
+  onSelectionChange?: (selectedIds: string[]) => void;
+  onFileSelect?: (filePath: string) => void;
+  className?: string;
+  title?: string;
+};
+
+const GitFileExplorerInner = memo(
+  forwardRef<GitFileExplorerRef, GitFileExplorerProps>(function GitFileExplorer(
+    {
+      repoId,
+      repoFilesState,
+      gitManager,
+      selectedIds: selectedIdsProp,
+      onSelectionChange,
+      onFileSelect,
+      className,
+      title = "Files",
+    },
+    ref
+  ) {
+    // Selection state
+    const [internalSelectedIds, setInternalSelectedIds] = useState<string[]>(
+      []
+    );
+    const selectedIds = selectedIdsProp ?? internalSelectedIds;
+    const baseSetSelectedIds = onSelectionChange ?? setInternalSelectedIds;
+
+    // Refs
+    const dropTargetRef = useRef<HTMLDivElement | null>(null);
+    const collectionRef = useRef<CollectionRef>(null);
+
+    // Dialogs
+    const openConfirmationDialog = useOpenConfirmationDialog();
+
+    // Tree state
+    const {
+      visibleItems,
+      getExpanded,
+      setExpanded,
+      toggleExpanded,
+      addTempItem,
+      clearTempItem,
+    } = useGitFileTree({ repoFilesState });
+
+    // Wrap selection change to also trigger onFileSelect for single file selection
+    const setSelectedIds = useCallback(
+      (ids: string[]) => {
+        baseSetSelectedIds(ids);
+
+        // If a single file is selected, trigger onFileSelect
+        if (ids.length === 1) {
+          const item = visibleItems.find((i) => i.id === ids[0]);
+          if (item && !item.isDirectory) {
+            onFileSelect?.(item.path);
+          }
+        }
+      },
+      [baseSetSelectedIds, visibleItems, onFileSelect]
+    );
+
+    // File operations
+    const {
+      isUploading,
+      renameFile,
+      deleteFiles,
+      uploadFiles,
+      handleFileDrop,
+    } = useGitFileOperations({ repoId, repoFilesState, gitManager });
+
+    // Drop target
+    const { dropTargetProps, isDropTargetActive } = useFileDropTarget(
+      dropTargetRef,
+      handleFileDrop
+    );
+
+    // Handlers
+    const handleAddFile = useCallback(() => {
+      const newItem = addTempItem();
+      setTimeout(() => {
+        collectionRef.current?.editName(newItem.id);
+      }, 50);
+    }, [addTempItem]);
+
+    const handleStartRename = useCallback((itemId: string) => {
+      collectionRef.current?.editName(itemId);
+    }, []);
+
+    const handleRename = useCallback(
+      async (item: GitFileItem, newName: string) => {
+        if (isTempItem(item)) {
+          clearTempItem();
+          if (!newName) return;
+        }
+        await renameFile(item, newName);
+      },
+      [renameFile, clearTempItem]
+    );
+
+    const handleDelete = useCallback(
+      async (items: GitFileItem[]) => {
+        if (items.length === 0) return;
+
+        const fileCount = items.filter((item) => !item.isDirectory).length;
+        const dirCount = items.filter((item) => item.isDirectory).length;
+
+        let description: string;
+        if (dirCount > 0 && fileCount > 0) {
+          description = `Are you sure you want to delete ${fileCount} file(s) and ${dirCount} folder(s)? This action cannot be undone.`;
+        } else if (dirCount > 0) {
+          description = `Are you sure you want to delete ${dirCount} folder(s) and all their contents? This action cannot be undone.`;
+        } else {
+          description = `Are you sure you want to delete ${fileCount} file(s)? This action cannot be undone.`;
+        }
+
+        const confirmed = await openConfirmationDialog({
+          title: "Delete",
+          description,
+        });
+
+        if (!confirmed) return;
+
+        await deleteFiles(items);
+        setSelectedIds([]);
+      },
+      [deleteFiles, setSelectedIds, openConfirmationDialog]
+    );
+
+    const handleDoubleClick = useCallback(
+      (itemId: string) => {
+        const item = visibleItems.find((i) => i.id === itemId);
+        if (!item) return;
+
+        if (item.isDirectory) {
+          toggleExpanded(item);
+        } else {
+          onFileSelect?.(item.path);
+        }
+      },
+      [visibleItems, toggleExpanded, onFileSelect]
+    );
+
+    // Menu items
+    const headerMenuItems = useMemo(
+      () =>
+        createSectionedMenu<HeaderMenuAction>([
+          {
+            title: "New File",
+            value: "newFile",
+            icon: <PlusIcon />,
+          },
+          {
+            title: "Upload Files",
+            value: "uploadFiles",
+            icon: <UploadIcon />,
+          },
+        ]),
+      []
+    );
+
+    const handleHeaderMenuAction = useCallback(
+      (action: HeaderMenuAction) => {
+        switch (action) {
+          case "newFile":
+            handleAddFile();
+            break;
+          case "uploadFiles":
+            uploadFiles();
+            break;
+        }
+      },
+      [handleAddFile, uploadFiles]
+    );
+
+    const handleMenuAction = useCallback(
+      (action: MenuAction, items: GitFileItem[]) => {
+        switch (action) {
+          case "addFile":
+            handleAddFile();
+            break;
+          case "rename":
+            if (items.length === 1) {
+              handleStartRename(items[0].id);
+            }
+            break;
+          case "delete":
+            handleDelete(items);
+            break;
+        }
+      },
+      [handleAddFile, handleStartRename, handleDelete]
+    );
+
+    const menuItems = useMemo(() => {
+      const singleSelected = selectedIds.length === 1;
+      const hasSelection = selectedIds.length > 0;
+      const selectedItem = singleSelected
+        ? visibleItems.find((item) => selectedIds.includes(item.id))
+        : undefined;
+      const isFile = selectedItem && !selectedItem.isDirectory;
+
+      return createSectionedMenu<MenuAction>(
+        [
+          {
+            title: "Add File",
+            value: "addFile",
+            icon: <PlusIcon />,
+          },
+        ],
+        [
+          singleSelected &&
+            isFile && {
+              title: "Rename",
+              value: "rename",
+              icon: <InputIcon />,
+            },
+          hasSelection && {
+            title: "Delete",
+            value: "delete",
+            icon: <TrashIcon />,
+          },
+        ]
+      );
+    }, [selectedIds, visibleItems]);
+
+    // Imperative handle
+    useImperativeHandle(ref, () => ({
+      addFile: handleAddFile,
+      delete: (ids: string[]) => {
+        const items = visibleItems.filter((item) => ids.includes(item.id));
+        handleDelete(items);
+      },
+      rename: (id: string) => {
+        handleStartRename(id);
+      },
+    }));
+
+    // Render helpers
+    const isRefreshing = repoFilesState.fetchState === "refreshing";
+    const isLoading = repoFilesState.fetchState === "loading";
+    const showLoading = useDelayedTrue(isLoading, 500);
+
+    const renderEmptyState = useCallback(() => {
+      const hasError = !!repoFilesState.error;
+      let content = null;
+
+      if (isLoading && showLoading) {
+        content = <Small>Loading files...</Small>;
+      } else if (isLoading) {
+        // Still loading but haven't hit 500ms yet - show nothing
+        content = null;
+      } else if (hasError) {
+        content = <Small>Error: {repoFilesState.error}</Small>;
+      } else {
+        content = (
+          <>
+            <Small>No files yet</Small>
+            <Button onClick={handleAddFile}>Add a file</Button>
+          </>
+        );
+      }
+
+      return (
+        <div className="n-mx-3 n-flex-1 n-flex n-flex-col n-items-center n-justify-center n-gap-2">
+          {content}
+        </div>
+      );
+    }, [repoFilesState.error, handleAddFile, isLoading, showLoading]);
+
+    return (
+      <Section
+        title={title}
+        className={cx("n-px-3", className)}
+        right={
+          <div className="n-flex n-items-center n-gap-1">
+            {isRefreshing && <Small color="textDisabled">Syncing...</Small>}
+            {isUploading && <Small color="textDisabled">Uploading...</Small>}
+            <DropdownMenu
+              items={headerMenuItems}
+              onSelect={handleHeaderMenuAction}
+            >
+              <IconButton iconName="DotsVerticalIcon" />
+            </DropdownMenu>
+          </div>
+        }
+      >
+        <div
+          ref={dropTargetRef}
+          className={cx(
+            "n-flex n-flex-col n-flex-1 -n-mx-3",
+            isDropTargetActive &&
+              "n-bg-blue-500/10 n-ring-2 n-ring-blue-500 n-ring-inset"
+          )}
+          {...dropTargetProps}
+        >
+          <List
+            ref={collectionRef}
+            className="n-flex-1"
+            scrollable
+            expandable
+            renamable
+            size="small"
+            items={visibleItems}
+            getId={(item) => item.id}
+            getName={(item) => (isTempItem(item) ? "" : item.name)}
+            getDepth={(item) => item.depth}
+            getExpanded={getExpanded}
+            setExpanded={setExpanded}
+            getRenamable={(item) => !item.isDirectory}
+            getPlaceholder={() => "Enter file name"}
+            selectedIds={selectedIds}
+            onSelectionChange={setSelectedIds}
+            onDoubleClickItem={handleDoubleClick}
+            onRename={handleRename}
+            menuItems={menuItems}
+            onSelectMenuItem={handleMenuAction}
+            renderEmptyState={renderEmptyState}
+            renameSelectsBeforeDot
+            renderThumbnail={({ item, selected }) => (
+              <MediaThumbnail
+                iconName={item.isDirectory ? "FolderIcon" : undefined}
+                fileName={item.isDirectory ? undefined : item.name}
+                selected={selected}
+                size="small"
+              />
+            )}
+          />
+        </div>
+      </Section>
+    );
+  })
+);
+
+export const GitFileExplorer = memo(
+  forwardRef<
+    GitFileExplorerRef,
+    Omit<GitFileExplorerProps, "repoFilesState"> & {
+      repoFilesState: RepoFilesState | undefined;
+    }
+  >(function GitFileExplorer(props, ref) {
+    if (!props.repoFilesState) {
+      return (
+        <Section title={props.title} className={cx("n-px-3", props.className)}>
+          {null}
+        </Section>
+      );
+    }
+
+    return (
+      <GitFileExplorerInner
+        {...props}
+        repoFilesState={props.repoFilesState}
+        ref={ref}
+      />
+    );
+  })
+);

package/src/git/gitFileTree.ts

@@ -0,0 +1,110 @@
+export type GitFileItem = {
+  id: string;
+  name: string;
+  path: string;
+  isDirectory: boolean;
+  depth: number;
+};
+
+/**
+ * Parses flat file paths into a tree structure for display
+ */
+export function parseFilesToTree(files: string[]): GitFileItem[] {
+  const items: GitFileItem[] = [];
+  const seenDirs = new Set<string>();
+
+  // Sort files to ensure directories come before their contents
+  const sortedFiles = [...files].sort();
+
+  for (const filePath of sortedFiles) {
+    const parts = filePath.split("/");
+
+    // Add directory entries for each parent directory
+    let currentPath = "";
+    for (let i = 0; i < parts.length - 1; i++) {
+      currentPath = currentPath ? `${currentPath}/${parts[i]}` : parts[i];
+      if (!seenDirs.has(currentPath)) {
+        seenDirs.add(currentPath);
+        items.push({
+          id: `dir:${currentPath}`,
+          name: parts[i],
+          path: currentPath,
+          isDirectory: true,
+          depth: i,
+        });
+      }
+    }
+
+    // Add the file entry
+    items.push({
+      id: `file:${filePath}`,
+      name: parts[parts.length - 1],
+      path: filePath,
+      isDirectory: false,
+      depth: parts.length - 1,
+    });
+  }
+
+  return items;
+}
+
+/**
+ * Get visible items based on expanded state
+ */
+export function getVisibleItems(
+  items: GitFileItem[],
+  expandedDirs: Set<string>
+): GitFileItem[] {
+  const visible: GitFileItem[] = [];
+  const collapsedPrefixes: string[] = [];
+
+  for (const item of items) {
+    // Check if this item is under a collapsed directory
+    const isHidden = collapsedPrefixes.some((prefix) =>
+      item.path.startsWith(prefix + "/")
+    );
+
+    if (isHidden) continue;
+
+    visible.push(item);
+
+    // If this is a collapsed directory, track its prefix
+    if (item.isDirectory && !expandedDirs.has(item.path)) {
+      collapsedPrefixes.push(item.path);
+    }
+  }
+
+  return visible;
+}
+
+/**
+ * Create a temporary file item for new file creation
+ */
+export function createTempFileItem(name: string = ""): GitFileItem {
+  return {
+    id: "temp:new-file",
+    name,
+    path: name,
+    isDirectory: false,
+    depth: 0,
+  };
+}
+
+/**
+ * Check if an item is a temp item
+ */
+export function isTempItem(item: GitFileItem): boolean {
+  return item.id === "temp:new-file";
+}
+
+/**
+ * Compute new path for a renamed file
+ */
+export function computeRenamedPath(
+  oldPath: string,
+  newName: string
+): string {
+  const pathParts = oldPath.split("/");
+  pathParts[pathParts.length - 1] = newName;
+  return pathParts.join("/");
+}