@marimo-team/frontend 0.24.1-dev116 → 0.24.1-dev119

package/src/components/editor/file-tree/file-explorer.tsx

@@ -16,14 +16,17 @@ import {
   PlaySquareIcon,
   UploadIcon,
   ViewIcon,
+  XIcon,
 } from "lucide-react";
 import React, { Suspense, use, useRef, useState } from "react";
 import {
+  type DragPreviewProps,
   type NodeApi,
   type NodeRendererProps,
   Tree,
   type TreeApi,
 } from "react-arborist";
+import { createPortal } from "react-dom";
 import useEvent from "react-use-event-hook";
 import {
   FILE_ICON,
@@ -54,6 +57,7 @@ import {
   DropdownMenuSeparator,
 } from "@/components/ui/dropdown-menu";
 import { Tooltip } from "@/components/ui/tooltip";
+import { SearchInput } from "@/components/ui/input";
 import { toast } from "@/components/ui/use-toast";
 import { useCellActions } from "@/core/cells/cells";
 import { useLastFocusedCellId } from "@/core/cells/focus";
@@ -61,6 +65,8 @@ import { disableFileDownloadsAtom } from "@/core/config/config";
 import { useRequestClient } from "@/core/network/requests";
 import { isWasm } from "@/core/wasm/utils";
 import { useAsyncData } from "@/hooks/useAsyncData";
+import { useFileSearch } from "./use-file-search";
+import { useHoverExpand } from "./use-hover-expand";
 import { ErrorBanner } from "@/plugins/impl/common/error-banner";
 import { cn } from "@/utils/cn";
 import { copyToClipboard } from "@/utils/copy";
@@ -71,6 +77,8 @@ import { jotaiJsonStorage } from "@/utils/storage/jotai";
 import { useTreeDndManager } from "./dnd-wrapper";
 import { downloadFile } from "./download";
 import { FileViewer } from "./file-viewer";
+import { FileSearchResults } from "./file-search-results";
+import { FileBrowserRow } from "./file-browser-row";
 import type { FileTreeNode, RequestingTree } from "./requesting-tree";
 import { openStateAtom, treeAtom } from "./state";
 import { PYTHON_CODE_FOR_FILE_TYPE } from "./types";
@@ -102,6 +110,10 @@ export const FileExplorer: React.FC<{
   externalDropDestinationPath?: FilePath | null;
 }> = ({ height, externalDropDestinationPath = null }) => {
   const treeRef = useRef<TreeApi<FileTreeNode>>(null);
+  const searchTreeRef = useRef<TreeApi<FileTreeNode>>(null);
+  const searchRef = useRef<HTMLInputElement>(null);
+  const [query, setQuery] = useState("");
+  const [revealId, setRevealId] = useState<string | null>(null);
   const dndManager = useTreeDndManager();
   const [tree] = useAtom(treeAtom);
   const [data, setData] = useState<FileTreeNode[]>([]);
@@ -112,6 +124,7 @@ export const FileExplorer: React.FC<{
   } | null>(null);
   const [showHiddenFiles, setShowHiddenFiles] =
     useAtom<boolean>(hiddenFilesState);
+  const search = useFileSearch({ query: query.trim(), tree, showHiddenFiles });
   // Keep external state to remember which folders are open when this
   // component is unmounted.
   const [openState, setOpenState] = useAtom(openStateAtom);
@@ -135,14 +148,12 @@ export const FileExplorer: React.FC<{
     openUploadPicker();
   });
 
-  const { openPrompt } = useImperativeModal();
+  const { openPrompt, openConfirm } = useImperativeModal();
   const { isPending, error } = useAsyncData(() => tree.initialize(setData), []);
 
-  const handleRefresh = useEvent(() => {
-    // Return the promise so callers can await refresh completion
-    return tree.refreshAll(
-      Object.keys(openState).filter((id) => openState[id]),
-    );
+  const handleRefresh = useEvent(async () => {
+    await tree.refreshAll(Object.keys(openState).filter((id) => openState[id]));
+    search.refetch();
   });
 
   const handleHiddenFilesToggle = useEvent(() => {
@@ -204,6 +215,77 @@ export const FileExplorer: React.FC<{
     [tree, handleUploadFiles, externalDropDestinationPath],
   );
 
+  React.useEffect(() => {
+    if (revealId && !openFile) {
+      const activeTree = query.trim() ? searchTreeRef.current : treeRef.current;
+      activeTree?.openParents(revealId);
+      activeTree?.select(revealId);
+      const node = activeTree?.get(revealId);
+      if (node?.data.isDirectory) {
+        node.open();
+      }
+      setRevealId(null);
+    }
+  }, [revealId, query, openFile, data]);
+
+  const handleReveal = async (node: FileTreeNode) => {
+    if (!node.isDirectory) {
+      setOpenFile(node);
+      return;
+    }
+    if (await tree.reveal(node)) {
+      setQuery("");
+      setRevealId(node.id);
+    }
+  };
+
+  const handleTreeKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if ((event.ctrlKey || event.metaKey) && event.key === "f") {
+      event.preventDefault();
+      event.stopPropagation();
+      searchRef.current?.focus();
+      searchRef.current?.select();
+      return;
+    }
+    if (event.key === "Escape" && query) {
+      event.preventDefault();
+      event.stopPropagation();
+      setQuery("");
+      searchRef.current?.focus();
+      return;
+    }
+    const role =
+      event.target instanceof Element
+        ? event.target.getAttribute("role")
+        : null;
+    if (query.trim() || (role !== "treeitem" && role !== "tree")) {
+      return;
+    }
+    const node = treeRef.current?.focusedNode;
+    if (!node || treeRef.current?.isEditing) {
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      event.stopPropagation();
+      if (node.data.isDirectory) {
+        node.toggle();
+      } else {
+        node.activate();
+      }
+    } else if (event.key === "F2" && !node.data.isRoot) {
+      event.preventDefault();
+      event.stopPropagation();
+      node.edit();
+    } else if (event.key === "Delete" || event.key === "Backspace") {
+      event.preventDefault();
+      event.stopPropagation();
+      if (!node.data.isRoot) {
+        void node.tree.delete(node.id);
+      }
+    }
+  };
+
   if (isPending) {
     return <Spinner size="medium" centered={true} />;
   }
@@ -212,128 +294,230 @@ export const FileExplorer: React.FC<{
     return <ErrorBanner error={error} />;
   }
 
-  if (openFile) {
-    return (
-      <>
-        <div className="flex items-center pl-1 pr-3 shrink-0 border-b justify-between">
-          <Button
-            onClick={() => setOpenFile(null)}
-            data-testid="file-explorer-back-button"
-            variant="text"
-            size="xs"
-            className="mb-0"
-          >
-            <ArrowLeftIcon size={16} />
-          </Button>
-          <span className="font-bold">{openFile.name}</span>
-        </div>
-        <Suspense>
-          <FileViewer
-            onOpenNotebook={
-              tree.isPrimaryNode(openFile)
-                ? (evt) => {
-                    const path = tree.getPrimaryRelativePath(
-                      openFile.path as FilePath,
-                    );
-                    if (path !== null) {
-                      openMarimoNotebook(evt, path);
-                    }
+  const preview = openFile ? (
+    <>
+      <div className="flex items-center pl-1 pr-3 shrink-0 border-b justify-between">
+        <Button
+          autoFocus={true}
+          aria-label="Back to files"
+          onClick={() => {
+            setRevealId(openFile.id);
+            setOpenFile(null);
+          }}
+          data-testid="file-explorer-back-button"
+          variant="text"
+          size="xs"
+          className="mb-0"
+        >
+          <ArrowLeftIcon size={16} />
+        </Button>
+        <span className="font-bold">{openFile.name}</span>
+      </div>
+      <Suspense>
+        <FileViewer
+          onOpenNotebook={
+            tree.isPrimaryNode(openFile)
+              ? (evt) => {
+                  const path = tree.getPrimaryRelativePath(
+                    openFile.path as FilePath,
+                  );
+                  if (path !== null) {
+                    openMarimoNotebook(evt, path);
                   }
-                : undefined
-            }
-            file={openFile}
-          />
-        </Suspense>
-      </>
-    );
-  }
+                }
+              : undefined
+          }
+          file={openFile}
+        />
+      </Suspense>
+    </>
+  ) : null;
 
   return (
     <>
-      <input
-        data-testid="file-explorer-upload-input"
-        {...getUploadInputProps()}
-      />
-      <Toolbar
-        onRefresh={handleRefresh}
-        onHidden={handleHiddenFilesToggle}
-        showHiddenFiles={showHiddenFiles}
-        onCreateFile={handleCreateFile}
-        onCreateNotebook={handleCreateNotebook}
-        onCreateFolder={handleCreateFolder}
-        onCollapseAll={handleCollapseAll}
-        uploadDestinationPath={
-          selectedFolder?.path ?? tree.getPrimaryRootPath()
-        }
-        uploadDestinationLabel={getUploadDestinationLabel(
-          tree,
-          selectedFolder?.path ?? tree.getPrimaryRootPath(),
-        )}
-        onUpload={handleUploadFiles}
-      />
-      <RequestingTreeContext value={contextValue}>
-        <Tree<FileTreeNode>
-          width="100%"
-          ref={treeRef}
-          height={height - 33}
-          className="h-full"
-          data={visibleData}
-          initialOpenState={openState}
-          openByDefault={false}
-          // Use shared DnD manager to prevent "Cannot have two HTML5 backends" error
-          dndManager={dndManager}
-          // Hide the drop cursor
-          renderCursor={() => null}
-          // Disable dropping files into files
-          disableDrag={(node) => node.isRoot}
-          disableDrop={({ parentNode, dragNodes }) =>
-            dragNodes.some((node) => node.data.isRoot) ||
-            (parentNode ? !parentNode.data.isDirectory : false)
-          }
-          onDelete={async ({ ids }) => {
-            for (const id of ids) {
-              await tree.delete(id);
+      {preview}
+      <div hidden={!!openFile} onKeyDownCapture={handleTreeKeyDown}>
+        <input
+          data-testid="file-explorer-upload-input"
+          {...getUploadInputProps()}
+        />
+        <div>
+          <Toolbar
+            onRefresh={handleRefresh}
+            onHidden={handleHiddenFilesToggle}
+            showHiddenFiles={showHiddenFiles}
+            onCreateFile={handleCreateFile}
+            onCreateNotebook={handleCreateNotebook}
+            onCreateFolder={handleCreateFolder}
+            onCollapseAll={handleCollapseAll}
+            uploadDestinationPath={
+              selectedFolder?.path ?? tree.getPrimaryRootPath()
             }
-          }}
-          onRename={async ({ id, name }) => {
-            await tree.rename(id, name);
-          }}
-          onMove={async ({ dragIds, parentId }) => {
-            await tree.move(dragIds, parentId);
-          }}
-          onSelect={(nodes) => {
-            const first = nodes[0];
-            if (!first) {
-              setSelectedFolder(null);
-              return;
-            }
-            if (first.data.isDirectory) {
-              setSelectedFolder({
-                id: first.id,
-                path: first.data.path as FilePath,
-              });
-              return;
-            }
-            setSelectedFolder(null);
-            setOpenFile(first.data);
-          }}
-          onToggle={async (id) => {
-            const result = await tree.expand(id);
-            if (result) {
-              const prevOpen = openState[id] ?? false;
-              setOpenState({ ...openState, [id]: !prevOpen });
-            }
-          }}
-          padding={15}
-          rowHeight={30}
-          indent={INDENT_STEP}
-          overscanCount={1000}
-          // Disable multi-selection
-          disableMultiSelection={true}
-        >
-          {Node}
-        </Tree>
-      </RequestingTreeContext>
+            uploadDestinationLabel={getUploadDestinationLabel(
+              tree,
+              selectedFolder?.path ?? tree.getPrimaryRootPath(),
+            )}
+            onUpload={handleUploadFiles}
+          />
+          <div className="relative -mt-1">
+            <SearchInput
+              ref={searchRef}
+              className="rounded-none pr-6 focus-visible:outline-1 focus-visible:outline-ring/50"
+              clearable={false}
+              aria-label="Search files and folders"
+              placeholder="Search"
+              title="Search names in all configured roots, up to 20 folders deep. Generated directories such as node_modules and .git are excluded."
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              onKeyDown={(event) => {
+                const activeTree = query.trim()
+                  ? searchTreeRef.current
+                  : treeRef.current;
+                if (event.key === "ArrowDown") {
+                  event.preventDefault();
+                  activeTree?.focus(activeTree.firstNode);
+                } else if (event.key === "Enter" && query.trim()) {
+                  event.preventDefault();
+                  activeTree?.firstNode?.activate();
+                }
+              }}
+            />
+            {query && (
+              <Button
+                variant="text"
+                size="icon"
+                className="absolute right-3 top-1/2 h-5 w-5 -translate-y-1/2"
+                aria-label="Clear search"
+                onClick={() => {
+                  setQuery("");
+                  searchRef.current?.focus();
+                }}
+              >
+                <XIcon className="h-3 w-3" />
+              </Button>
+            )}
+          </div>
+        </div>
+        <div hidden={!query.trim()}>
+          <FileSearchResults
+            treeRef={searchTreeRef}
+            search={search}
+            height={Math.max(0, height - 63)}
+            onReveal={handleReveal}
+          />
+        </div>
+        <div hidden={!!query.trim()} className="relative">
+          <RequestingTreeContext value={contextValue}>
+            <Tree<FileTreeNode>
+              width="100%"
+              ref={treeRef}
+              height={Math.max(0, height - 63)}
+              className="h-full"
+              data={visibleData}
+              childrenAccessor={(node) =>
+                node.isDirectory ? node.children : null
+              }
+              selectionFollowsFocus={true}
+              rowClassName="outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring"
+              renderRow={FileBrowserRow}
+              renderDragPreview={(props) => (
+                <FileDragPreview {...props} tree={treeRef.current} />
+              )}
+              disableEdit={(node) => node.isRoot}
+              initialOpenState={openState}
+              openByDefault={false}
+              // Use shared DnD manager to prevent "Cannot have two HTML5 backends" error
+              dndManager={dndManager}
+              // Hide the drop cursor
+              renderCursor={() => null}
+              // Disable dropping files into files
+              disableDrag={(node) => node.isRoot}
+              disableDrop={({ parentNode, dragNodes }) =>
+                dragNodes.some((node) => node.data.isRoot) ||
+                (parentNode ? !parentNode.data.isDirectory : false)
+              }
+              onDelete={async ({ ids }) => {
+                openConfirm({
+                  title: "Delete file",
+                  description:
+                    "Are you sure you want to delete the selected file or folder?",
+                  confirmAction: (
+                    <AlertDialogDestructiveAction
+                      onClick={async () => {
+                        for (const id of ids) {
+                          await tree.delete(id);
+                        }
+                      }}
+                    >
+                      Delete
+                    </AlertDialogDestructiveAction>
+                  ),
+                });
+              }}
+              onRename={async ({ id, name }) => {
+                await tree.rename(id, name);
+              }}
+              onMove={async ({ dragIds, parentId }) => {
+                await tree.move(dragIds, parentId);
+              }}
+              onSelect={(nodes) => {
+                const first = nodes[0];
+                if (!first) {
+                  setSelectedFolder(null);
+                  return;
+                }
+                if (first.data.isDirectory) {
+                  setSelectedFolder({
+                    id: first.id,
+                    path: first.data.path as FilePath,
+                  });
+                  return;
+                }
+                setSelectedFolder(null);
+              }}
+              onActivate={(node) => {
+                if (!node.data.isDirectory) {
+                  setOpenFile(node.data);
+                }
+              }}
+              onToggle={async (id) => {
+                const isOpen =
+                  treeRef.current?.isOpen(id) ?? !(openState[id] ?? false);
+                if (!isOpen) {
+                  setOpenState((previous) => ({ ...previous, [id]: false }));
+                  return;
+                }
+                const loaded = await tree.expand(id);
+                if (!loaded) {
+                  treeRef.current?.close(id);
+                }
+                const remainsOpen =
+                  loaded && (treeRef.current?.isOpen(id) ?? false);
+                setOpenState((previous) => ({
+                  ...previous,
+                  [id]: remainsOpen,
+                }));
+              }}
+              padding={15}
+              rowHeight={30}
+              indent={INDENT_STEP}
+              overscanCount={8}
+              // Disable multi-selection
+              disableMultiSelection={true}
+            >
+              {Node}
+            </Tree>
+          </RequestingTreeContext>
+          {!visibleData.length && (
+            <p
+              role="status"
+              className="absolute top-2 left-3 text-sm text-muted-foreground"
+            >
+              No visible files.
+            </p>
+          )}
+        </div>
+      </div>
     </>
   );
 };
@@ -368,7 +552,7 @@ const Toolbar = ({
   const uploadLabel = `Upload files to ${uploadDestinationLabel}`;
 
   return (
-    <div className="flex items-center justify-end px-2 shrink-0 border-b">
+    <div className="flex items-center justify-end px-2 shrink-0">
       <Tooltip content="Add notebook">
         <Button
           data-testid="file-explorer-add-notebook-button"
@@ -445,16 +629,7 @@ const Show = ({
   ) => void;
 }) => {
   const label = (
-    <span
-      className="flex-1 overflow-hidden text-ellipsis"
-      onClick={(e) => {
-        if (node.data.isDirectory) {
-          return;
-        }
-        e.stopPropagation();
-        node.select();
-      }}
-    >
+    <span className="flex-1 overflow-hidden text-ellipsis">
       {node.data.name}
       {node.data.isMarimoFile && node.data.isPrimaryRoot && !isWasm() && (
         <span
@@ -484,7 +659,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileTreeNode>) => {
     : guessFileIconType(node.data.name);
 
   const Icon = FILE_ICON[fileType];
-  const { openConfirm, openPrompt } = useImperativeModal();
+  const { openPrompt } = useImperativeModal();
   const { createNewCell } = useCellActions();
   const lastFocusedCellId = useLastFocusedCellId();
 
@@ -501,6 +676,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileTreeNode>) => {
   const isExternalDropTarget =
     node.data.isDirectory &&
     fileExplorer?.externalDropDestinationPath === node.data.path;
+  useHoverExpand(node, isExternalDropTarget);
 
   const handleOpenMarimoFile = async (
     evt: Pick<Event, "stopPropagation" | "preventDefault">,
@@ -514,20 +690,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileTreeNode>) => {
   const handleDeleteFile = async (evt: Event) => {
     evt.stopPropagation();
     evt.preventDefault();
-    openConfirm({
-      title: "Delete file",
-      description: `Are you sure you want to delete ${node.data.name}?`,
-      confirmAction: (
-        <AlertDialogDestructiveAction
-          onClick={async () => {
-            await node.tree.delete(node.id);
-          }}
-          aria-label="Confirm"
-        >
-          Delete
-        </AlertDialogDestructiveAction>
-      ),
-    });
+    await node.tree.delete(node.id);
   };
 
   const handleCreateFolder = useEvent(async () => {
@@ -576,40 +739,53 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileTreeNode>) => {
         ? { [FILE_EXPLORER_DIRECTORY_PATH_ATTRIBUTE]: node.data.path }
         : {})}
       className={cn(
-        "flex items-center cursor-pointer ml-1 text-muted-foreground whitespace-nowrap group",
+        "relative flex h-full items-center cursor-pointer ml-1 text-muted-foreground whitespace-nowrap group",
       )}
       draggable={!node.data.isRoot}
-      onClick={(evt) => {
-        evt.stopPropagation();
+      onClick={() => {
         if (node.data.isDirectory) {
-          node.select();
           node.toggle();
         }
       }}
+      onDoubleClick={(event) => {
+        event.stopPropagation();
+        if (!node.data.isDirectory) {
+          node.activate();
+        }
+      }}
     >
+      {Array.from({ length: node.level }, (_, level) => (
+        <span
+          key={level}
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-y-0 border-l border-border"
+          style={{ left: level * INDENT_STEP + 8 }}
+        />
+      ))}
       <FolderArrow node={node} />
       <span
         className={cn(
           "flex items-center pl-1 py-1 cursor-pointer hover:bg-accent/50 hover:text-accent-foreground rounded-l flex-1 overflow-hidden group",
           node.willReceiveDrop &&
+            node.tree.canDrop() &&
             node.data.isDirectory &&
-            "bg-accent/80 hover:bg-accent/80 text-accent-foreground",
+            "bg-primary/15 hover:bg-primary/15 text-accent-foreground",
           node.isSelected &&
             "bg-accent/60 hover:bg-accent/60 text-accent-foreground",
           isExternalDropTarget &&
-            "bg-primary/15 hover:bg-primary/15 text-accent-foreground ring-1 ring-inset ring-primary",
+            "bg-primary/15 hover:bg-primary/15 text-accent-foreground",
         )}
       >
         {node.data.isRoot ? (
           <FolderRootIcon
-            className="w-5 h-5 shrink-0 mr-2 text-primary"
+            className="w-4 h-4 shrink-0 mr-2 text-primary"
             strokeWidth={1.5}
           />
         ) : node.data.isMarimoFile ? (
-          <MarimoIcon className="w-5 h-5 shrink-0 mr-2" strokeWidth={1.5} />
+          <MarimoIcon className="w-4 h-4 shrink-0 mr-2" strokeWidth={1.5} />
         ) : (
           <Icon
-            className={cn("w-5 h-5 shrink-0 mr-2", FILE_ICON_COLOR[fileType])}
+            className={cn("w-4 h-4 shrink-0 mr-2", FILE_ICON_COLOR[fileType])}
             strokeWidth={1.5}
           />
         )}
@@ -624,7 +800,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileTreeNode>) => {
         >
           {!node.data.isDirectory && (
             <DropdownMenuItem
-              onSelect={() => node.select()}
+              onSelect={() => node.activate()}
               data-testid="file-explorer-open-file-menu-item"
             >
               <ViewIcon className={MENU_ITEM_ICON_CLASS} />
@@ -794,6 +970,18 @@ const FolderArrow = ({ node }: { node: NodeApi<FileTreeNode> }) => {
     return <span className="w-4 h-4 shrink-0" />;
   }
 
+  if (node.data.loadState === "loading") {
+    return (
+      <span
+        role="status"
+        aria-label={`Loading ${node.data.name}`}
+        className="w-4 h-4 shrink-0"
+      >
+        <Spinner size="small" />
+      </span>
+    );
+  }
+
   return <TreeChevron isExpanded={node.isOpen} className="w-4 h-4" />;
 };
 
@@ -852,3 +1040,33 @@ function treeContainsId(list: FileTreeNode[], id: string): boolean {
       (item.children ? treeContainsId(item.children, id) : false),
   );
 }
+
+function FileDragPreview({
+  mouse,
+  id,
+  isDragging,
+  tree,
+}: DragPreviewProps & { tree: TreeApi<FileTreeNode> | null }) {
+  const node = tree?.get(id);
+  if (!isDragging || !mouse || !node) {
+    return null;
+  }
+  const fileType = node.data.isDirectory
+    ? "directory"
+    : guessFileIconType(node.data.name);
+  const Icon = FILE_ICON[fileType];
+  return createPortal(
+    <div
+      className="pointer-events-none fixed left-0 top-0 z-[1000] opacity-[0.85]"
+      style={{
+        transform: `translate3d(${mouse.x + 12}px, ${mouse.y + 12}px, 0)`,
+      }}
+    >
+      <div className="flex max-w-72 items-center gap-2 rounded-md border border-border bg-popover px-3 py-2 text-sm text-popover-foreground shadow-md">
+        <Icon className={cn("h-4 w-4 shrink-0", FILE_ICON_COLOR[fileType])} />
+        <span className="truncate">{node.data.name}</span>
+      </div>
+    </div>,
+    document.body,
+  );
+}