@marimo-team/islands 0.20.5-dev11 → 0.20.5-dev15

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/pages/home-page.tsx

@@ -23,6 +23,11 @@ import {
 } from "react-arborist";
 import { useLocale } from "react-aria";
 import { MarkdownIcon } from "@/components/editor/cell/code/icons";
+import {
+  FILE_ICON as FILE_TYPE_ICONS,
+  type FileIconType as FileType,
+  guessFileIconType as guessFileType,
+} from "@/components/editor/file-tree/file-icons";
 import { useImperativeModal } from "@/components/modal/ImperativeModal";
 import { AlertDialogDestructiveAction } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
@@ -47,11 +52,6 @@ import { newNotebookURL } from "@/utils/urls";
 import { ConfigButton } from "../app-config/app-config-button";
 import { ErrorBoundary } from "../editor/boundary/ErrorBoundary";
 import { ShutdownButton } from "../editor/controls/shutdown-button";
-import {
-  FILE_TYPE_ICONS,
-  type FileType,
-  guessFileType,
-} from "../editor/file-tree/types";
 import {
   Header,
   OpenTutorialDropDown,

package/src/components/storage/components.tsx

@@ -8,15 +8,9 @@ import CoreweaveIcon from "@marimo-team/llm-info/icons/coreweave.svg?inline";
 import CoreweaveDarkIcon from "@marimo-team/llm-info/icons/coreweave-dark.svg?inline";
 import {
   DatabaseZapIcon,
-  FileCodeIcon,
-  FileIcon,
-  FileSpreadsheetIcon,
-  FileTextIcon,
-  FileVideoIcon,
   GithubIcon,
   GlobeIcon,
   HardDriveIcon,
-  ImageIcon,
 } from "lucide-react";
 import GoogleCloudIcon from "@/components/databases/icons/google-cloud-storage.svg?inline";
 import GoogleDriveIcon from "@/components/databases/icons/google-drive.svg?inline";
@@ -24,38 +18,6 @@ import type { KnownStorageProtocol } from "@/core/storage/types";
 import { useTheme } from "@/theme/useTheme";
 import { cn } from "@/utils/cn";
 
-export function renderFileIcon(name: string): React.ReactNode {
-  const ext = name.split(".").pop()?.toLowerCase();
-  switch (ext) {
-    case "png":
-    case "jpg":
-    case "jpeg":
-    case "gif":
-    case "svg":
-    case "webp":
-      return <ImageIcon className="h-3.5 w-3.5 text-purple-500" />;
-    case "csv":
-    case "parquet":
-    case "arrow":
-    case "xlsx":
-      return <FileSpreadsheetIcon className="h-3.5 w-3.5 text-green-500" />;
-    case "py":
-    case "js":
-    case "ts":
-    case "json":
-      return <FileCodeIcon className="h-3.5 w-3.5 text-blue-500" />;
-    case "mp4":
-    case "mpeg":
-      return <FileVideoIcon className="h-3.5 w-3.5 text-orange-500" />;
-    case "txt":
-    case "md":
-    case "log":
-      return <FileTextIcon className="h-3.5 w-3.5 text-muted-foreground" />;
-    default:
-      return <FileIcon className="h-3.5 w-3.5 text-muted-foreground" />;
-  }
-}
-
 type IconEntry =
   | { src: string; dark?: string }
   | React.ComponentType<{ className?: string }>;

package/src/components/storage/storage-file-viewer.tsx

@@ -5,6 +5,7 @@ import type React from "react";
 import { useCallback } from "react";
 import { useLocale } from "react-aria";
 import { FilePreviewHeader } from "@/components/editor/file-tree/file-header";
+import { renderFileIcon } from "@/components/editor/file-tree/file-icons";
 import {
   FileContentRenderer,
   isMediaMime,
@@ -18,7 +19,6 @@ import { formatBytes } from "@/utils/formatting";
 import { Logger } from "@/utils/Logger";
 import { CopyClipboardIcon } from "../icons/copy-icon";
 import { Button } from "../ui/button";
-import { renderFileIcon } from "./components";
 
 const MAX_MEDIA_PREVIEW_SIZE = 100 * 1024 * 1024; // 100 MB
 

package/src/components/storage/storage-inspector.tsx

@@ -2,16 +2,13 @@
 
 import { CommandList } from "cmdk";
 import {
-  ChevronRightIcon,
   CopyIcon,
   DownloadIcon,
   FolderIcon,
   HardDriveIcon,
   HelpCircleIcon,
   LoaderCircle,
-  MoreVerticalIcon,
   PlusIcon,
-  RefreshCwIcon,
   ViewIcon,
   XIcon,
 } from "lucide-react";
@@ -20,6 +17,16 @@ import { useLocale } from "react-aria";
 import { EngineVariable } from "@/components/databases/engine-variable";
 import { PanelEmptyState } from "@/components/editor/chrome/panels/empty-state";
 import { AddConnectionDialog } from "@/components/editor/connections/add-connection-dialog";
+import {
+  FILE_ICON_COLOR,
+  renderFileIcon,
+} from "@/components/editor/file-tree/file-icons";
+import {
+  MENU_ITEM_ICON_CLASS,
+  MoreActionsButton,
+  RefreshIconButton,
+  TreeChevron,
+} from "@/components/editor/file-tree/tree-actions";
 import { Command, CommandInput, CommandItem } from "@/components/ui/command";
 import {
   DropdownMenu,
@@ -49,7 +56,7 @@ import { formatBytes } from "@/utils/formatting";
 import { Logger } from "@/utils/Logger";
 import { ErrorState } from "../datasources/components";
 import { Button } from "../ui/button";
-import { ProtocolIcon, renderFileIcon } from "./components";
+import { ProtocolIcon } from "./components";
 import { StorageFileViewer } from "./storage-file-viewer";
 
 interface OpenFileInfo {
@@ -305,17 +312,14 @@ const StorageEntryRow: React.FC<{
         }}
       >
         {isDir ? (
-          <ChevronRightIcon
-            className={cn(
-              "h-3 w-3 shrink-0 transition-transform",
-              effectiveExpanded && "rotate-90",
-            )}
-          />
+          <TreeChevron isExpanded={effectiveExpanded} className="h-3 w-3" />
         ) : (
           <span className="w-3 shrink-0" />
         )}
         {isDir ? (
-          <FolderIcon className="h-3.5 w-3.5 text-amber-500 shrink-0" />
+          <FolderIcon
+            className={cn("h-3.5 w-3.5 shrink-0", FILE_ICON_COLOR.directory)}
+          />
         ) : (
           renderFileIcon(name)
         )}
@@ -337,14 +341,10 @@ const StorageEntryRow: React.FC<{
           )}
           <DropdownMenu>
             <DropdownMenuTrigger asChild={true}>
-              <Button
-                variant="text"
-                size="icon"
-                className="opacity-0 group-hover:opacity-100 transition-opacity hover:shadow-none hover:text-link text-muted-foreground"
+              <MoreActionsButton
+                iconClassName="h-3 w-3"
                 onClick={(e) => e.stopPropagation()}
-              >
-                <MoreVerticalIcon className="h-3 w-3" />
-              </Button>
+              />
             </DropdownMenuTrigger>
             <DropdownMenuContent
               align="end"
@@ -355,7 +355,7 @@ const StorageEntryRow: React.FC<{
                 <DropdownMenuItem
                   onSelect={() => onOpenFile({ entry, namespace })}
                 >
-                  <ViewIcon className="h-3.5 w-3.5 mr-2" />
+                  <ViewIcon className={MENU_ITEM_ICON_CLASS} />
                   View
                 </DropdownMenuItem>
               )}
@@ -366,12 +366,12 @@ const StorageEntryRow: React.FC<{
                   toast({ title: "Copied to clipboard" });
                 }}
               >
-                <CopyIcon className="h-3.5 w-3.5 mr-2" />
+                <CopyIcon className={MENU_ITEM_ICON_CLASS} />
                 Copy URL
               </DropdownMenuItem>
               {!isDir && (
                 <DropdownMenuItem onSelect={() => handleDownload()}>
-                  <DownloadIcon className="h-3.5 w-3.5 mr-2" />
+                  <DownloadIcon className={MENU_ITEM_ICON_CLASS} />
                   Download
                 </DropdownMenuItem>
               )}
@@ -402,7 +402,6 @@ const StorageNamespaceSection: React.FC<{
   onOpenFile: (info: OpenFileInfo) => void;
 }> = ({ namespace, locale, searchValue, onOpenFile }) => {
   const [isExpanded, setIsExpanded] = useState(true);
-  const [isSpinning, setIsSpinning] = useState(false);
   const { entriesByPath } = useStorage();
   const { clearNamespaceCache } = useStorageActions();
   const namespaceName = namespace.name ?? namespace.displayName;
@@ -417,10 +416,8 @@ const StorageNamespaceSection: React.FC<{
   const handleRefresh = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation();
-      setIsSpinning(true);
       clearNamespaceCache(namespaceName);
       refetch();
-      setTimeout(() => setIsSpinning(false), 500);
     },
     [namespaceName, clearNamespaceCache, refetch],
   );
@@ -441,12 +438,7 @@ const StorageNamespaceSection: React.FC<{
         onSelect={() => setIsExpanded(!isExpanded)}
         className="flex flex-row font-semibold h-7 text-xs gap-1.5 bg-(--slate-2) text-muted-foreground rounded-none"
       >
-        <ChevronRightIcon
-          className={cn(
-            "h-3 w-3 shrink-0 transition-transform",
-            isExpanded && "rotate-90",
-          )}
-        />
+        <TreeChevron isExpanded={isExpanded} className="h-3 w-3" />
         <ProtocolIcon protocol={namespace.protocol} />
         <span>{namespace.displayName}</span>
         {namespace.name && (
@@ -454,21 +446,12 @@ const StorageNamespaceSection: React.FC<{
             (<EngineVariable variableName={namespace.name as VariableName} />)
           </span>
         )}
-        <Tooltip content="Refresh storage connection">
-          <Button
-            variant="ghost"
-            size="icon"
-            className="hover:bg-transparent hover:shadow-none"
-            onClick={handleRefresh}
-          >
-            <RefreshCwIcon
-              className={cn(
-                "h-3 w-3 text-muted-foreground hover:text-foreground",
-                isSpinning && "animate-[spin_0.5s]",
-              )}
-            />
-          </Button>
-        </Tooltip>
+        <RefreshIconButton
+          onClick={handleRefresh}
+          tooltip="Refresh storage connection"
+          className="p-0"
+          iconClassName="h-3 w-3"
+        />
         <span className="text-[10px] text-muted-foreground font-normal tabular-nums ml-auto">
           {namespace.rootPath || "(root)"}
         </span>