@marimo-team/frontend 0.20.5-dev8 → 0.20.5-dev87

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

@@ -6,8 +6,6 @@ import {
   ArrowLeftIcon,
   BetweenHorizontalStartIcon,
   BracesIcon,
-  ChevronDownIcon,
-  ChevronRightIcon,
   CopyIcon,
   CopyMinusIcon,
   DownloadIcon,
@@ -17,9 +15,7 @@ import {
   FilePlus2Icon,
   FolderPlusIcon,
   ListTreeIcon,
-  MoreVerticalIcon,
   PlaySquareIcon,
-  RefreshCcwIcon,
   Trash2Icon,
   UploadIcon,
   ViewIcon,
@@ -32,6 +28,18 @@ import {
   type TreeApi,
 } from "react-arborist";
 import useEvent from "react-use-event-hook";
+import {
+  FILE_ICON,
+  FILE_ICON_COLOR,
+  type FileIconType,
+  guessFileIconType,
+} from "@/components/editor/file-tree/file-icons";
+import {
+  MENU_ITEM_ICON_CLASS,
+  MoreActionsButton,
+  RefreshIconButton,
+  TreeChevron,
+} from "@/components/editor/file-tree/tree-actions";
 import { MarimoIcon, MarimoPlusIcon } from "@/components/icons/marimo-icons";
 import { Spinner } from "@/components/icons/spinner";
 import { useImperativeModal } from "@/components/modal/ImperativeModal";
@@ -65,12 +73,7 @@ import { useTreeDndManager } from "./dnd-wrapper";
 import { FileViewer } from "./file-viewer";
 import type { RequestingTree } from "./requesting-tree";
 import { openStateAtom, treeAtom } from "./state";
-import {
-  FILE_TYPE_ICONS,
-  type FileType,
-  guessFileType,
-  PYTHON_CODE_FOR_FILE_TYPE,
-} from "./types";
+import { PYTHON_CODE_FOR_FILE_TYPE } from "./types";
 import { useFileExplorerUpload } from "./upload";
 
 const hiddenFilesState = atomWithStorage(
@@ -102,7 +105,10 @@ export const FileExplorer: React.FC<{
   const { isPending, error } = useAsyncData(() => tree.initialize(setData), []);
 
   const handleRefresh = useEvent(() => {
-    tree.refreshAll(Object.keys(openState).filter((id) => openState[id]));
+    // Return the promise so callers can await refresh completion
+    return tree.refreshAll(
+      Object.keys(openState).filter((id) => openState[id]),
+    );
   });
 
   const handleHiddenFilesToggle = useEvent(() => {
@@ -322,16 +328,10 @@ const Toolbar = ({
         </button>
       </Tooltip>
       <input {...getInputProps({})} type="file" />
-      <Tooltip content="Refresh">
-        <Button
-          data-testid="file-explorer-refresh-button"
-          onClick={onRefresh}
-          variant="text"
-          size="xs"
-        >
-          <RefreshCcwIcon size={16} />
-        </Button>
-      </Tooltip>
+      <RefreshIconButton
+        data-testid="file-explorer-refresh-button"
+        onClick={onRefresh}
+      />
       <Tooltip content="Toggle hidden files">
         <Button
           data-testid="file-explorer-hidden-files-button"
@@ -421,11 +421,11 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
     useRequestClient();
   const disableFileDownloads = useAtomValue(disableFileDownloadsAtom);
 
-  const fileType: FileType = node.data.isDirectory
+  const fileType: FileIconType = node.data.isDirectory
     ? "directory"
-    : guessFileType(node.data.name);
+    : guessFileIconType(node.data.name);
 
-  const Icon = FILE_TYPE_ICONS[fileType];
+  const Icon = FILE_ICON[fileType];
   const { openConfirm, openPrompt } = useImperativeModal();
   const { createNewCell } = useCellActions();
   const lastFocusedCellId = useLastFocusedCellId();
@@ -534,11 +534,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
   });
 
   const renderActions = () => {
-    const iconProps = {
-      size: 14,
-      strokeWidth: 1.5,
-      className: "mr-2",
-    };
+    const ic = MENU_ITEM_ICON_CLASS;
     return (
       <DropdownMenuContent
         align="end"
@@ -548,7 +544,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
       >
         {!node.data.isDirectory && (
           <DropdownMenuItem onSelect={() => node.select()}>
-            <ViewIcon {...iconProps} />
+            <ViewIcon className={ic} />
             Open file
           </DropdownMenuItem>
         )}
@@ -558,34 +554,34 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
               openFile({ path: node.data.path });
             }}
           >
-            <ExternalLinkIcon {...iconProps} />
+            <ExternalLinkIcon className={ic} />
             Open file in external editor
           </DropdownMenuItem>
         )}
         {node.data.isDirectory && (
           <>
             <DropdownMenuItem onSelect={() => handleCreateNotebook()}>
-              <MarimoPlusIcon {...iconProps} />
+              <MarimoPlusIcon className={ic} />
               Create notebook
             </DropdownMenuItem>
             <DropdownMenuItem onSelect={() => handleCreateFile()}>
-              <FilePlus2Icon {...iconProps} />
+              <FilePlus2Icon className={ic} />
               Create file
             </DropdownMenuItem>
             <DropdownMenuItem onSelect={() => handleCreateFolder()}>
-              <FolderPlusIcon {...iconProps} />
+              <FolderPlusIcon className={ic} />
               Create folder
             </DropdownMenuItem>
             <DropdownMenuSeparator />
           </>
         )}
         <DropdownMenuItem onSelect={() => node.edit()}>
-          <Edit3Icon {...iconProps} />
+          <Edit3Icon className={ic} />
           Rename
         </DropdownMenuItem>
         {!node.data.isDirectory && (
           <DropdownMenuItem onSelect={handleDuplicate}>
-            <CopyIcon {...iconProps} />
+            <CopyIcon className={ic} />
             Duplicate
           </DropdownMenuItem>
         )}
@@ -595,7 +591,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
             toast({ title: "Copied to clipboard" });
           }}
         >
-          <ListTreeIcon {...iconProps} />
+          <ListTreeIcon className={ic} />
           Copy path
         </DropdownMenuItem>
         {tree && (
@@ -607,7 +603,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
               toast({ title: "Copied to clipboard" });
             }}
           >
-            <ListTreeIcon {...iconProps} />
+            <ListTreeIcon className={ic} />
             Copy relative path
           </DropdownMenuItem>
         )}
@@ -620,7 +616,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
             handleInsertCode(pythonCode);
           }}
         >
-          <BetweenHorizontalStartIcon {...iconProps} />
+          <BetweenHorizontalStartIcon className={ic} />
           Insert snippet for reading file
         </DropdownMenuItem>
         <DropdownMenuItem
@@ -635,7 +631,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
             await copyToClipboard(pythonCode);
           }}
         >
-          <BracesIcon {...iconProps} />
+          <BracesIcon className={ic} />
           Copy snippet for reading file
         </DropdownMenuItem>
         {/* Not shown in WASM */}
@@ -643,7 +639,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
           <>
             <DropdownMenuSeparator />
             <DropdownMenuItem onSelect={handleOpenMarimoFile}>
-              <PlaySquareIcon {...iconProps} />
+              <PlaySquareIcon className={ic} />
               Open notebook
             </DropdownMenuItem>
           </>
@@ -658,14 +654,14 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
                 downloadBlob(new Blob([contents]), node.data.name);
               }}
             >
-              <DownloadIcon {...iconProps} />
+              <DownloadIcon className={ic} />
               Download
             </DropdownMenuItem>
             <DropdownMenuSeparator />
           </>
         )}
         <DropdownMenuItem onSelect={handleDeleteFile} variant="danger">
-          <Trash2Icon {...iconProps} />
+          <Trash2Icon className={ic} />
           Delete
         </DropdownMenuItem>
       </DropdownMenuContent>
@@ -699,7 +695,10 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
         {node.data.isMarimoFile ? (
           <MarimoIcon className="w-5 h-5 shrink-0 mr-2" strokeWidth={1.5} />
         ) : (
-          <Icon className="w-5 h-5 shrink-0 mr-2" strokeWidth={1.5} />
+          <Icon
+            className={cn("w-5 h-5 shrink-0 mr-2", FILE_ICON_COLOR[fileType])}
+            strokeWidth={1.5}
+          />
         )}
         {node.isEditing ? (
           <Edit node={node} />
@@ -712,19 +711,10 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
             tabIndex={-1}
             onClick={(e) => e.stopPropagation()}
           >
-            <Button
+            <MoreActionsButton
               data-testid="file-explorer-more-button"
-              variant="text"
-              tabIndex={-1}
-              size="xs"
-              className="mb-0"
-              aria-label="More options"
-            >
-              <MoreVerticalIcon
-                strokeWidth={2}
-                className="w-5 h-5 hidden group-hover:block"
-              />
-            </Button>
+              iconClassName="w-5 h-5"
+            />
           </DropdownMenuTrigger>
           {renderActions()}
         </DropdownMenu>
@@ -735,14 +725,10 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
 
 const FolderArrow = ({ node }: { node: NodeApi<FileInfo> }) => {
   if (!node.data.isDirectory) {
-    return <span className="w-5 h-5 shrink-0" />;
+    return <span className="w-4 h-4 shrink-0" />;
   }
 
-  return node.isOpen ? (
-    <ChevronDownIcon className="w-5 h-5 shrink-0" />
-  ) : (
-    <ChevronRightIcon className="w-5 h-5 shrink-0" />
-  );
+  return <TreeChevron isExpanded={node.isOpen} className="w-4 h-4" />;
 };
 
 function openMarimoNotebook(

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

@@ -0,0 +1,132 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import {
+  FileAudioIcon,
+  FileCodeIcon,
+  FileIcon,
+  FileJsonIcon,
+  FileSpreadsheetIcon,
+  FileTextIcon,
+  FileVideoIcon,
+  FolderArchiveIcon,
+  FolderIcon,
+  ImageIcon,
+  type LucideIcon,
+} from "lucide-react";
+import { cn } from "@/utils/cn";
+
+export type FileIconType =
+  | "directory"
+  | "python"
+  | "code"
+  | "json"
+  | "text"
+  | "image"
+  | "audio"
+  | "video"
+  | "data"
+  | "pdf"
+  | "zip"
+  | "unknown";
+
+const EXT_TO_TYPE: Record<string, FileIconType> = {
+  py: "python",
+  // Text / docs
+  txt: "text",
+  md: "text",
+  qmd: "text",
+  log: "text",
+  // Images
+  png: "image",
+  jpg: "image",
+  jpeg: "image",
+  gif: "image",
+  svg: "image",
+  webp: "image",
+  // Data / spreadsheets
+  csv: "data",
+  parquet: "data",
+  arrow: "data",
+  xlsx: "data",
+  // JSON
+  json: "json",
+  // Code
+  js: "code",
+  ts: "code",
+  tsx: "code",
+  html: "code",
+  css: "code",
+  toml: "code",
+  yaml: "code",
+  yml: "code",
+  wasm: "code",
+  // Audio
+  mp3: "audio",
+  m4a: "audio",
+  ogg: "audio",
+  wav: "audio",
+  // Video
+  mp4: "video",
+  m4v: "video",
+  mpeg: "video",
+  webm: "video",
+  mkv: "video",
+  // PDF
+  pdf: "pdf",
+  // Archives
+  zip: "zip",
+  tar: "zip",
+  gz: "zip",
+};
+
+export function guessFileIconType(name: string): FileIconType {
+  const ext = name.split(".").pop()?.toLowerCase();
+  if (!ext) {
+    return "unknown";
+  }
+  return EXT_TO_TYPE[ext] ?? "unknown";
+}
+
+export const FILE_ICON: Record<FileIconType, LucideIcon> = {
+  directory: FolderIcon,
+  python: FileCodeIcon,
+  code: FileCodeIcon,
+  json: FileJsonIcon,
+  text: FileTextIcon,
+  image: ImageIcon,
+  audio: FileAudioIcon,
+  video: FileVideoIcon,
+  data: FileSpreadsheetIcon,
+  pdf: FileTextIcon,
+  zip: FolderArchiveIcon,
+  unknown: FileIcon,
+};
+
+export const FILE_ICON_COLOR: Record<FileIconType, string> = {
+  directory: "text-amber-500",
+  python: "text-blue-500",
+  code: "text-blue-500",
+  json: "text-blue-500",
+  text: "text-muted-foreground",
+  image: "text-purple-500",
+  audio: "text-orange-500",
+  video: "text-orange-500",
+  data: "text-green-500",
+  pdf: "text-red-500",
+  zip: "text-muted-foreground",
+  unknown: "text-muted-foreground",
+};
+
+/**
+ * Render a colored file-type icon for a given filename.
+ * Pass `className` to control size (defaults to `h-3.5 w-3.5`).
+ */
+export function renderFileIcon(
+  name: string,
+  className?: string,
+): React.ReactNode {
+  const type = guessFileIconType(name);
+  const Icon = FILE_ICON[type];
+  const color = FILE_ICON_COLOR[type];
+  return <Icon className={cn("h-3.5 w-3.5 shrink-0", color, className)} />;
+}

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

@@ -166,7 +166,7 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
               </Tooltip>
               <Tooltip content={renderShortcut("global.save")}>
                 <Button
-                  variant={internalValue === data.contents ? "text" : "success"}
+                  variant="text"
                   size="xs"
                   onClick={handleSaveFile}
                   disabled={internalValue === data.contents}

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

@@ -0,0 +1,107 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import {
+  ChevronRightIcon,
+  MoreVerticalIcon,
+  RefreshCwIcon,
+} from "lucide-react";
+import React, { useCallback, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Tooltip } from "@/components/ui/tooltip";
+import { cn } from "@/utils/cn";
+
+/**
+ * Animated chevron for tree expand/collapse.
+ * Rotates 90° when `isExpanded` is true.
+ */
+export const TreeChevron: React.FC<{
+  isExpanded: boolean;
+  className?: string;
+}> = ({ isExpanded, className }) => (
+  <ChevronRightIcon
+    className={cn(
+      "shrink-0 transition-transform",
+      isExpanded && "rotate-90",
+      className,
+    )}
+  />
+);
+
+/**
+ * Refresh button that briefly spins its icon when clicked.
+ * Keeps spinning for at least 500ms, or until the onClick Promise resolves.
+ */
+export const RefreshIconButton: React.FC<{
+  onClick: (e: React.MouseEvent) => void | Promise<void>;
+  tooltip?: string;
+  className?: string;
+  iconClassName?: string;
+}> = ({ onClick, tooltip = "Refresh", className, iconClassName }) => {
+  const [isSpinning, setIsSpinning] = useState(false);
+
+  const handleClick = useCallback(
+    async (e: React.MouseEvent) => {
+      setIsSpinning(true);
+      // Artificially spin for 500ms to show the user that the button is working.
+      const minDelay = new Promise<void>((r) => setTimeout(r, 500));
+      try {
+        await Promise.all([onClick(e), minDelay]);
+      } finally {
+        setIsSpinning(false);
+      }
+    },
+    [onClick],
+  );
+
+  const button = (
+    <Button
+      variant="text"
+      size="xs"
+      className={className}
+      onClick={handleClick}
+    >
+      <RefreshCwIcon
+        className={cn(
+          "h-4 w-4",
+          iconClassName,
+          isSpinning && "animate-[spin_0.5s]",
+        )}
+      />
+    </Button>
+  );
+
+  return <Tooltip content={tooltip}>{button}</Tooltip>;
+};
+
+/**
+ * Three-dot menu trigger that fades in on row hover.
+ * Must be inside a `group` container.
+ * Forwards ref so it works with Radix `asChild`.
+ */
+export const MoreActionsButton = React.forwardRef<
+  HTMLButtonElement,
+  {
+    onClick?: (e: React.MouseEvent) => void;
+    className?: string;
+    iconClassName?: string;
+  } & Omit<React.ComponentPropsWithoutRef<typeof Button>, "variant" | "size">
+>(({ className, iconClassName, ...props }, ref) => (
+  <Button
+    ref={ref}
+    variant="text"
+    tabIndex={-1}
+    size="xs"
+    className={cn(
+      "mb-0 opacity-0 group-hover:opacity-100 transition-opacity",
+      className,
+    )}
+    aria-label="More options"
+    {...props}
+  >
+    <MoreVerticalIcon className={cn("w-4 h-4", iconClassName)} />
+  </Button>
+));
+MoreActionsButton.displayName = "MoreActionsButton";
+
+/** Standard class string for icons inside dropdown menu items. */
+export const MENU_ITEM_ICON_CLASS = "h-3.5 w-3.5 mr-2";

package/src/components/editor/file-tree/types.ts

@@ -1,105 +1,11 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import {
-  DatabaseIcon,
-  FileAudioIcon,
-  FileCodeIcon,
-  FileIcon,
-  FileImageIcon,
-  FileJsonIcon,
-  FileTextIcon,
-  FileVideo2Icon,
-  FolderArchiveIcon,
-  FolderIcon,
-  type LucideIcon,
-} from "lucide-react";
 
-/* Copyright 2026 Marimo. All rights reserved. */
-export type FileType =
-  | "directory"
-  | "python"
-  | "code"
-  | "json"
-  | "text"
-  | "image"
-  | "audio"
-  | "video"
-  | "data"
-  | "pdf"
-  | "zip"
-  | "unknown";
-
-export function guessFileType(name: string): FileType {
-  const ext = name.split(".").pop();
-  if (ext === undefined) {
-    return "unknown";
-  }
-  switch (ext.toLowerCase()) {
-    case "py":
-      return "python";
-    case "txt":
-    case "md":
-    case "qmd":
-      return "text";
-    case "png":
-    case "jpg":
-    case "jpeg":
-    case "gif":
-      return "image";
-    case "csv":
-      return "data";
-    case "json":
-      return "json";
-    // Non-exhaustive list of code file extensions
-    case "js":
-    case "ts":
-    case "tsx":
-    case "html":
-    case "css":
-    case "toml":
-    case "yaml":
-    case "yml":
-    case "wasm":
-      return "code";
-    case "mp3":
-    case "m4a":
-    case "m4v":
-    case "ogg":
-    case "wav":
-      return "audio";
-    case "mp4":
-    case "webm":
-    case "mkv":
-      return "video";
-    case "pdf":
-      return "pdf";
-    case "zip":
-    case "tar":
-    case "gz":
-      return "zip";
-    default:
-      return "unknown";
-  }
-}
-
-export const FILE_TYPE_ICONS: Record<FileType, LucideIcon> = {
-  directory: FolderIcon,
-  python: FileCodeIcon,
-  json: FileJsonIcon,
-  code: FileCodeIcon,
-  text: FileTextIcon,
-  image: FileImageIcon,
-  audio: FileAudioIcon,
-  video: FileVideo2Icon,
-  pdf: FileCodeIcon,
-  zip: FolderArchiveIcon,
-  data: DatabaseIcon,
-  unknown: FileIcon,
-};
+import type { FileIconType } from "@/components/editor/file-tree/file-icons";
 
 const TAB = "    ";
 
 export const PYTHON_CODE_FOR_FILE_TYPE: Record<
-  FileType,
+  FileIconType,
   (path: string) => string
 > = {
   directory: (path) => `os.listdir("${path}")`,

package/src/components/editor/header/filename-input.tsx

@@ -3,6 +3,10 @@
 import { PopoverAnchor } from "@radix-ui/react-popover";
 import { FilePenIcon } from "lucide-react";
 import { type JSX, useEffect, useRef, useState } from "react";
+import {
+  FILE_ICON as FILE_TYPE_ICONS,
+  guessFileIconType as guessFileType,
+} from "@/components/editor/file-tree/file-icons";
 import type { FileInfo } from "@/core/network/types";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { Paths } from "@/utils/paths";
@@ -15,7 +19,6 @@ import {
   CommandList,
 } from "../../ui/command";
 import { Popover, PopoverContent } from "../../ui/popover";
-import { FILE_TYPE_ICONS, guessFileType } from "../file-tree/types";
 
 import "./filename-input.css";
 import { getFeatureFlag } from "@/core/config/feature-flag";

package/src/components/editor/navigation/__tests__/clipboard.test.ts

@@ -3,15 +3,13 @@
 
 import { act, renderHook } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { asMock, Mocks, SetupMocks } from "@/__mocks__/common";
+import { asMock, MockModules, Mocks, SetupMocks } from "@/__mocks__/common";
 import type { CellActions, NotebookState } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
 import { useCellClipboard } from "../clipboard";
 
 // Mock dependencies
-vi.mock("@/components/ui/use-toast", () => ({
-  toast: vi.fn(),
-}));
+vi.mock("@/components/ui/use-toast", () => MockModules.toast());
 
 vi.mock("@/core/cells/cells", () => ({
   getNotebook: vi.fn(),