@marimo-team/islands 0.23.3-dev7 → 0.23.3-dev8

package/src/components/editor/file-tree/file-name-input.tsx

@@ -0,0 +1,41 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { NodeApi } from "react-arborist";
+import { useEffect, useRef } from "react";
+import type { FileInfo } from "@/core/network/types";
+
+/**
+ * Inline rename input used by `react-arborist` nodes when `node.isEditing`
+ * is true. Auto-focuses and selects everything except the extension so a
+ * user can type straight into the name.
+ */
+export const FileNameInput = ({ node }: { node: NodeApi<FileInfo> }) => {
+  const ref = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    ref.current?.focus();
+    // Select everything but the extension. For extensionless names
+    // (`README`) and dotfiles (`.env`), select the full name.
+    const name = node.data.name;
+    const dotIndex = name.lastIndexOf(".");
+    const end = dotIndex > 0 ? dotIndex : name.length;
+    ref.current?.setSelectionRange(0, end);
+  }, [node.data.name]);
+
+  return (
+    <input
+      ref={ref}
+      className="flex-1 bg-transparent border border-border text-muted-foreground"
+      defaultValue={node.data.name}
+      onClick={(e) => e.stopPropagation()}
+      onBlur={() => node.reset()}
+      onKeyDown={(e) => {
+        if (e.key === "Escape") {
+          node.reset();
+        }
+        if (e.key === "Enter") {
+          node.submit(e.currentTarget.value);
+        }
+      }}
+    />
+  );
+};

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

@@ -0,0 +1,266 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { CopyIcon, Edit3Icon, Trash2Icon } from "lucide-react";
+import type React from "react";
+import { useCallback } from "react";
+import type { NodeApi } from "react-arborist";
+import useEvent from "react-use-event-hook";
+import { useImperativeModal } from "@/components/modal/ImperativeModal";
+import { AlertDialogDestructiveAction } from "@/components/ui/alert-dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useRequestClient } from "@/core/network/requests";
+import type { FileInfo } from "@/core/network/types";
+import {
+  makeDuplicateName,
+  resolvePaths,
+  toAbsolutePath,
+} from "@/utils/pathUtils";
+import {
+  type FileOperationResult,
+  handleFileResponse,
+} from "./requesting-tree";
+import { MENU_ITEM_ICON_CLASS, MoreActionsButton } from "./tree-actions";
+
+/**
+ * Hook that exposes rename / duplicate / delete operations against absolute
+ * paths, handling path resolution (via `resolvePaths`) and error toasting.
+ *
+ * `root` is the workspace / tree root used to turn relative node paths into
+ * absolute paths for the API. Pass `""` if all node paths are already
+ * absolute (in which case `resolvePaths` is a no-op transformation).
+ */
+export function useFileOperations({ root }: { root: string }) {
+  const {
+    sendRenameFileOrFolder,
+    sendCopyFileOrFolder,
+    sendDeleteFileOrFolder,
+  } = useRequestClient();
+
+  const renameFile = useCallback(
+    async (
+      file: Pick<FileInfo, "path">,
+      newName: string,
+    ): Promise<FileOperationResult> => {
+      const { path, newPath } = resolvePaths({
+        path: file.path,
+        name: newName,
+        root,
+      });
+      const resp = await sendRenameFileOrFolder({ path, newPath });
+      return handleFileResponse(resp);
+    },
+    [root, sendRenameFileOrFolder],
+  );
+
+  const duplicateFile = useCallback(
+    async (
+      file: Pick<FileInfo, "path" | "name">,
+    ): Promise<FileOperationResult> => {
+      const { path, newPath } = resolvePaths({
+        path: file.path,
+        name: makeDuplicateName(file.name),
+        root,
+      });
+      const resp = await sendCopyFileOrFolder({ path, newPath });
+      return handleFileResponse(resp);
+    },
+    [root, sendCopyFileOrFolder],
+  );
+
+  const deleteFile = useCallback(
+    async (file: Pick<FileInfo, "path">): Promise<FileOperationResult> => {
+      const resp = await sendDeleteFileOrFolder({
+        path: toAbsolutePath(file.path, root),
+      });
+      return handleFileResponse(resp);
+    },
+    [root, sendDeleteFileOrFolder],
+  );
+
+  return { renameFile, duplicateFile, deleteFile };
+}
+
+export type FileItemKind = "file" | "folder" | "notebook";
+
+const DELETE_TITLE_BY_KIND: Record<FileItemKind, string> = {
+  file: "Delete file",
+  folder: "Delete folder",
+  notebook: "Delete notebook",
+};
+
+export function useConfirmDeleteFile() {
+  const { openConfirm } = useImperativeModal();
+
+  return useCallback(
+    (
+      target: { name: string; kind?: FileItemKind },
+      onConfirm: () => void | Promise<void>,
+    ) => {
+      const kind = target.kind ?? "file";
+      openConfirm({
+        title: DELETE_TITLE_BY_KIND[kind],
+        description: `Are you sure you want to delete ${target.name}?`,
+        confirmAction: (
+          <AlertDialogDestructiveAction
+            onClick={async () => {
+              await onConfirm();
+            }}
+            aria-label="Confirm"
+          >
+            Delete
+          </AlertDialogDestructiveAction>
+        ),
+      });
+    },
+    [openConfirm],
+  );
+}
+
+/**
+ * High-level handlers for rename/duplicate/delete against a single node
+ *
+ * All successful operations fire `onAfterChange` so callers can refresh their
+ * data sources (workspace tree + recent notebooks on the homepage).
+ */
+export function useNotebookFileActions({
+  node,
+  root,
+  onAfterChange,
+}: {
+  node: NodeApi<FileInfo>;
+  root: string;
+  onAfterChange?: () => void;
+}) {
+  const { duplicateFile, deleteFile } = useFileOperations({ root });
+  const confirmDelete = useConfirmDeleteFile();
+
+  const handleRename = useEvent(() => {
+    node.edit();
+  });
+
+  const handleDuplicate = useEvent(async () => {
+    const result = await duplicateFile(node.data);
+    if (result) {
+      onAfterChange?.();
+    }
+  });
+
+  const handleDelete = useEvent(() => {
+    const kind: FileItemKind = node.data.isDirectory
+      ? "folder"
+      : node.data.isMarimoFile
+        ? "notebook"
+        : "file";
+    confirmDelete({ name: node.data.name, kind }, async () => {
+      const result = await deleteFile(node.data);
+      if (result) {
+        onAfterChange?.();
+      }
+    });
+  });
+
+  return { handleRename, handleDuplicate, handleDelete };
+}
+
+export const FileActionsDropdown = ({
+  testId,
+  buttonClassName,
+  iconClassName,
+  contentClassName,
+  preventDefaultOnTrigger = false,
+  children,
+}: {
+  testId?: string;
+  buttonClassName?: string;
+  iconClassName?: string;
+  contentClassName?: string;
+  /**
+   * When true, the trigger also calls `preventDefault()` on click — needed
+   * when the dropdown is nested inside an `<a>` or other element whose
+   * default click behavior (navigation, submit, etc.) should be suppressed.
+   */
+  preventDefaultOnTrigger?: boolean;
+  children: React.ReactNode;
+}) => (
+  <DropdownMenu modal={false}>
+    <DropdownMenuTrigger
+      asChild={true}
+      tabIndex={-1}
+      onClick={(e) => {
+        e.stopPropagation();
+        if (preventDefaultOnTrigger) {
+          e.preventDefault();
+        }
+      }}
+    >
+      <MoreActionsButton
+        data-testid={testId}
+        className={buttonClassName}
+        iconClassName={iconClassName}
+      />
+    </DropdownMenuTrigger>
+    <DropdownMenuContent
+      align="end"
+      className={contentClassName ?? "print:hidden w-[220px]"}
+      onClick={(e) => e.stopPropagation()}
+      onCloseAutoFocus={(e) => e.preventDefault()}
+    >
+      {children}
+    </DropdownMenuContent>
+  </DropdownMenu>
+);
+
+export const RenameMenuItem = ({
+  onSelect,
+  disabled,
+  title,
+}: {
+  onSelect: (evt: Event) => void;
+  disabled?: boolean;
+  title?: string;
+}) => (
+  <DropdownMenuItem onSelect={onSelect} disabled={disabled} title={title}>
+    <Edit3Icon className={MENU_ITEM_ICON_CLASS} />
+    Rename
+  </DropdownMenuItem>
+);
+
+export const DuplicateMenuItem = ({
+  onSelect,
+  disabled,
+  title,
+}: {
+  onSelect: (evt: Event) => void;
+  disabled?: boolean;
+  title?: string;
+}) => (
+  <DropdownMenuItem onSelect={onSelect} disabled={disabled} title={title}>
+    <CopyIcon className={MENU_ITEM_ICON_CLASS} />
+    Duplicate
+  </DropdownMenuItem>
+);
+
+export const DeleteMenuItem = ({
+  onSelect,
+  disabled,
+  title,
+}: {
+  onSelect: (evt: Event) => void;
+  disabled?: boolean;
+  title?: string;
+}) => (
+  <DropdownMenuItem
+    onSelect={onSelect}
+    variant="danger"
+    disabled={disabled}
+    title={title}
+  >
+    <Trash2Icon className={MENU_ITEM_ICON_CLASS} />
+    Delete
+  </DropdownMenuItem>
+);

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

@@ -10,6 +10,26 @@ import type {
 import { prettyError } from "@/utils/errors";
 import { Functions } from "@/utils/functions";
 import { type FilePath, PathBuilder } from "@/utils/paths";
+import { resolvePaths } from "@/utils/pathUtils";
+
+/**
+ * Normalized result of a file mutation: the server response when successful,
+ * `null` when the server rejected the request and a toast was surfaced.
+ */
+export type FileOperationResult = FileUpdateResponse | null;
+
+export function handleFileResponse(
+  response: FileUpdateResponse,
+): FileOperationResult {
+  if (!response.success) {
+    toast({
+      title: "Failed",
+      description: response.message,
+    });
+    return null;
+  }
+  return response;
+}
 
 export class RequestingTree {
   private delegate = new SimpleTree<FileInfo>([]);
@@ -85,15 +105,15 @@ export class RequestingTree {
       });
       return;
     }
-    const currentPath = node.data.path as FilePath;
-    const parentPath = this.path.dirname(currentPath);
-    const newPath = this.path.join(parentPath, newName);
+    const { path, newPath } = resolvePaths({
+      path: node.data.path,
+      name: newName,
+      root: this.rootPath,
+    });
+    const parentPath = this.path.dirname(path);
     const newFile = await this.callbacks
-      .copyFileOrFolder({
-        path: currentPath,
-        newPath: newPath,
-      })
-      .then(this.handleResponse);
+      .copyFileOrFolder({ path, newPath })
+      .then(handleFileResponse);
     if (!newFile?.info) {
       return;
     }
@@ -116,14 +136,18 @@ export class RequestingTree {
       });
       return;
     }
-    const currentPath = node.data.path as FilePath;
-    const newPath = this.path.join(this.path.dirname(currentPath), name);
-    await this.callbacks
-      .renameFileOrFolder({
-        path: currentPath,
-        newPath: newPath,
-      })
-      .then(this.handleResponse);
+    const { path, newPath } = resolvePaths({
+      path: node.data.path,
+      name,
+      root: this.rootPath,
+    });
+    const result = await this.callbacks
+      .renameFileOrFolder({ path, newPath })
+      .then(handleFileResponse);
+    if (!result) {
+      return;
+    }
+
     this.delegate.update({ id, changes: { name, path: newPath } });
     this.onChange(this.delegate.data);
     // Rename all of its children
@@ -136,23 +160,25 @@ export class RequestingTree {
       : this.rootPath;
 
     await Promise.all(
-      fromIds.map((id) => {
-        this.delegate.move({ id, parentId, index: 0 });
+      fromIds.map(async (id) => {
         const node = this.delegate.find(id);
         if (!node) {
-          return Promise.resolve();
+          return;
         }
+        const originalPath = node.data.path;
         const newPath = this.path.join(
           parentPath,
-          this.path.basename(node.data.path as FilePath),
+          this.path.basename(originalPath as FilePath),
         );
+        const result = await this.callbacks
+          .renameFileOrFolder({ path: originalPath, newPath })
+          .then(handleFileResponse);
+        if (!result) {
+          return;
+        }
+
+        this.delegate.move({ id, parentId, index: 0 });
         this.delegate.update({ id, changes: { path: newPath } });
-        return this.callbacks
-          .renameFileOrFolder({
-            path: node.data.path,
-            newPath: newPath,
-          })
-          .then(this.handleResponse);
       }),
     );
 
@@ -162,17 +188,21 @@ export class RequestingTree {
     await this.refreshAll([parentPath]);
   }
 
-  async createFile(
-    name: string,
-    parentId: string | null,
-    type: "file" | "notebook" = "file",
-  ): Promise<void> {
+  async createFile({
+    name,
+    parentId,
+    type = "file",
+  }: {
+    name: string;
+    parentId: string | null;
+    type?: "file" | "notebook";
+  }): Promise<void> {
     const parentPath = parentId
       ? (this.delegate.find(parentId)?.data.path ?? parentId)
       : this.rootPath;
     const newFile = await this.callbacks
       .createFileOrFolder({ path: parentPath, type: type, name: name })
-      .then(this.handleResponse);
+      .then(handleFileResponse);
     if (!newFile?.info) {
       return;
     }
@@ -192,7 +222,7 @@ export class RequestingTree {
       : this.rootPath;
     const newFolder = await this.callbacks
       .createFileOrFolder({ path: parentPath, type: "directory", name: name })
-      .then(this.handleResponse);
+      .then(handleFileResponse);
     if (!newFolder?.info) {
       return;
     }
@@ -216,9 +246,12 @@ export class RequestingTree {
       return;
     }
 
-    await this.callbacks
+    const result = await this.callbacks
       .deleteFileOrFolder({ path: node.data.path })
-      .then(this.handleResponse);
+      .then(handleFileResponse);
+    if (!result) {
+      return;
+    }
     this.delegate.drop({ id });
     this.onChange(this.delegate.data);
   }
@@ -262,18 +295,4 @@ export class RequestingTree {
     }
     return path;
   };
-
-  private handleResponse = (
-    response: FileUpdateResponse,
-  ): FileUpdateResponse | null => {
-    if (!response.success) {
-      toast({
-        title: "Failed",
-        description: response.message,
-      });
-      return null;
-    }
-
-    return response;
-  };
 }

package/src/components/home/state.ts

@@ -15,7 +15,19 @@ export const RunningNotebooksContext = React.createContext<{
   runningNotebooks: new Map(),
   setRunningNotebooks: Functions.NOOP,
 });
-export const WorkspaceRootContext = React.createContext<string>("");
+
+/**
+ * Context providing the workspace root plus a `refreshWorkspace` hook used by
+ * file actions (rename/duplicate/delete) so they can invalidate both the
+ * workspace tree and any sibling views (e.g. recent notebooks) in one call.
+ */
+export const WorkspaceContext = React.createContext<{
+  root: string;
+  refreshWorkspace: () => void;
+}>({
+  root: "",
+  refreshWorkspace: Functions.NOOP,
+});
 
 export const includeMarkdownAtom = atomWithStorage<boolean>(
   "marimo:home:include-markdown",