@marimo-team/frontend 0.20.1 → 0.20.3-dev76

package/src/components/editor/chrome/panels/session-panel.tsx

@@ -8,18 +8,18 @@ import {
   connectionsAtom,
   DataSources,
 } from "@/components/datasources/datasources";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
-import { Badge } from "@/components/ui/badge";
+import { Accordion } from "@/components/ui/accordion";
 import { VariableTable } from "@/components/variables/variables-table";
 import { useCellIds } from "@/core/cells/cells";
 import { datasetTablesAtom } from "@/core/datasets/state";
 import { useVariables } from "@/core/variables/state";
 import { jotaiJsonStorage } from "@/utils/storage/jotai";
+import {
+  PanelAccordionContent,
+  PanelAccordionItem,
+  PanelAccordionTrigger,
+  PanelBadge,
+} from "./components";
 
 type OpenSections = "variables" | "datasources";
 
@@ -69,34 +69,23 @@ const SessionPanel: React.FC = () => {
       onValueChange={handleValueChange}
       className="flex flex-col h-full overflow-auto"
     >
-      <AccordionItem value="datasources" className="border-b">
-        <AccordionTrigger className="px-3 py-2 text-xs font-semibold uppercase tracking-wide hover:no-underline">
-          <span className="flex items-center gap-2">
-            <DatabaseIcon className="w-4 h-4" />
-            Data sources
-            {showDatasourcesBadge && (
-              <Badge
-                variant="secondary"
-                className="ml-1 px-1.5 py-0 mb-px text-[10px]"
-              >
-                {datasourcesCount}
-              </Badge>
-            )}
-          </span>
-        </AccordionTrigger>
-        <AccordionContent wrapperClassName="p-0">
+      <PanelAccordionItem value="datasources">
+        <PanelAccordionTrigger>
+          <DatabaseIcon className="w-4 h-4" />
+          Data sources
+          {showDatasourcesBadge && <PanelBadge>{datasourcesCount}</PanelBadge>}
+        </PanelAccordionTrigger>
+        <PanelAccordionContent>
           <DataSources />
-        </AccordionContent>
-      </AccordionItem>
+        </PanelAccordionContent>
+      </PanelAccordionItem>
 
-      <AccordionItem value="variables" className="border-b-0">
-        <AccordionTrigger className="px-3 py-2 text-xs font-semibold uppercase tracking-wide hover:no-underline">
-          <span className="flex items-center gap-2">
-            <VariableIcon className="w-4 h-4" />
-            Variables
-          </span>
-        </AccordionTrigger>
-        <AccordionContent wrapperClassName="p-0">
+      <PanelAccordionItem value="variables" lastItem={true}>
+        <PanelAccordionTrigger>
+          <VariableIcon className="w-4 h-4" />
+          Variables
+        </PanelAccordionTrigger>
+        <PanelAccordionContent>
           {Object.keys(variables).length === 0 ? (
             <div className="px-3 py-4 text-sm text-muted-foreground">
               No variables defined
@@ -104,8 +93,8 @@ const SessionPanel: React.FC = () => {
           ) : (
             <VariableTable cellIds={cellIds.inOrderIds} variables={variables} />
           )}
-        </AccordionContent>
-      </AccordionItem>
+        </PanelAccordionContent>
+      </PanelAccordionItem>
     </Accordion>
   );
 };

package/src/components/editor/file-tree/__tests__/requesting-tree.test.ts

@@ -174,7 +174,23 @@ describe("RequestingTree", () => {
     sendCreateFileOrFolder.mockResolvedValue({ success: true });
 
     await requestingTree.createFile("file3", "1.2");
-    expect(sendCreateFileOrFolder).toHaveBeenCalled();
+    expect(sendCreateFileOrFolder).toHaveBeenCalledWith({
+      path: "/root/folder1",
+      type: "file",
+      name: "file3",
+    });
+    expect(mockOnChange).toHaveBeenCalled();
+  });
+
+  test("createFile should create a new notebook", async () => {
+    sendCreateFileOrFolder.mockResolvedValue({ success: true });
+
+    await requestingTree.createFile("notebook1", "1.2", "notebook");
+    expect(sendCreateFileOrFolder).toHaveBeenCalledWith({
+      path: "/root/folder1",
+      type: "notebook",
+      name: "notebook1",
+    });
     expect(mockOnChange).toHaveBeenCalled();
   });
 

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

@@ -32,6 +32,7 @@ import {
   type TreeApi,
 } from "react-arborist";
 import useEvent from "react-use-event-hook";
+import { MarimoIcon, MarimoPlusIcon } from "@/components/icons/marimo-icons";
 import { Spinner } from "@/components/icons/spinner";
 import { useImperativeModal } from "@/components/modal/ImperativeModal";
 import { AlertDialogDestructiveAction } from "@/components/ui/alert-dialog";
@@ -60,7 +61,6 @@ import { openNotebook } from "@/utils/links";
 import type { FilePath } from "@/utils/paths";
 import { fileSplit } from "@/utils/pathUtils";
 import { jotaiJsonStorage } from "@/utils/storage/jotai";
-import marimoIcon from "../../../assets/icon-32x32.png";
 import { useTreeDndManager } from "./dnd-wrapper";
 import { FileViewer } from "./file-viewer";
 import type { RequestingTree } from "./requesting-tree";
@@ -128,6 +128,15 @@ export const FileExplorer: React.FC<{
     });
   });
 
+  const handleCreateNotebook = useEvent(async () => {
+    openPrompt({
+      title: "Notebook name",
+      onConfirm: async (name) => {
+        tree.createFile(name, null, "notebook");
+      },
+    });
+  });
+
   const handleCollapseAll = useEvent(() => {
     treeRef.current?.closeAll();
     setOpenState({});
@@ -182,6 +191,7 @@ export const FileExplorer: React.FC<{
         onRefresh={handleRefresh}
         onHidden={handleHiddenFilesToggle}
         onCreateFile={handleCreateFile}
+        onCreateNotebook={handleCreateNotebook}
         onCreateFolder={handleCreateFolder}
         onCollapseAll={handleCollapseAll}
         tree={tree}
@@ -248,6 +258,7 @@ interface ToolbarProps {
   onRefresh: () => void;
   onHidden: () => void;
   onCreateFile: () => void;
+  onCreateNotebook: () => void;
   onCreateFolder: () => void;
   onCollapseAll: () => void;
   tree: RequestingTree;
@@ -257,6 +268,7 @@ const Toolbar = ({
   onRefresh,
   onHidden,
   onCreateFile,
+  onCreateNotebook,
   onCreateFolder,
   onCollapseAll,
 }: ToolbarProps) => {
@@ -267,6 +279,16 @@ const Toolbar = ({
 
   return (
     <div className="flex items-center justify-end px-2 shrink-0 border-b">
+      <Tooltip content="Add notebook">
+        <Button
+          data-testid="file-explorer-add-notebook-button"
+          onClick={onCreateNotebook}
+          variant="text"
+          size="xs"
+        >
+          <MarimoPlusIcon size={16} />
+        </Button>
+      </Tooltip>
       <Tooltip content="Add file">
         <Button
           data-testid="file-explorer-add-file-button"
@@ -467,6 +489,16 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
     });
   });
 
+  const handleCreateNotebook = useEvent(async () => {
+    node.open();
+    openPrompt({
+      title: "Notebook name",
+      onConfirm: async (name) => {
+        tree?.createFile(name, node.id, "notebook");
+      },
+    });
+  });
+
   const handleDuplicate = useEvent(async () => {
     if (!tree || node.data.isDirectory) {
       return;
@@ -532,6 +564,10 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
         )}
         {node.data.isDirectory && (
           <>
+            <DropdownMenuItem onSelect={() => handleCreateNotebook()}>
+              <MarimoPlusIcon {...iconProps} />
+              Create notebook
+            </DropdownMenuItem>
             <DropdownMenuItem onSelect={() => handleCreateFile()}>
               <FilePlus2Icon {...iconProps} />
               Create file
@@ -661,11 +697,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
         )}
       >
         {node.data.isMarimoFile ? (
-          <img
-            src={marimoIcon}
-            className="w-5 h-5 shrink-0 mr-2 filter grayscale"
-            alt="Marimo"
-          />
+          <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} />
         )}

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

@@ -0,0 +1,61 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { ArrowLeftIcon, DownloadIcon, RefreshCwIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Tooltip } from "@/components/ui/tooltip";
+
+interface FilePreviewHeaderProps {
+  filename?: string;
+  filenameIcon?: React.ReactNode;
+  onBack?: () => void;
+  onRefresh?: () => void;
+  onDownload?: () => void;
+  /** Extra action buttons placed before the download button. */
+  actions?: React.ReactNode;
+}
+
+export const FilePreviewHeader: React.FC<FilePreviewHeaderProps> = ({
+  filename,
+  filenameIcon,
+  onBack,
+  onRefresh,
+  onDownload,
+  actions,
+}) => {
+  return (
+    <div className="flex items-center shrink-0 border-b px-1 gap-1">
+      {onBack && (
+        <Tooltip content="Back to file list">
+          <Button variant="text" size="xs" onClick={onBack}>
+            <ArrowLeftIcon className="h-4 w-4" />
+          </Button>
+        </Tooltip>
+      )}
+      {filename ? (
+        <span className="flex items-center gap-1.5 flex-1 min-w-0 text-xs font-semibold truncate">
+          {filenameIcon}
+          {filename}
+        </span>
+      ) : (
+        <span className="flex-1" />
+      )}
+      <div className="flex items-center gap-0.5 shrink-0">
+        {onRefresh && (
+          <Tooltip content="Refresh">
+            <Button variant="text" size="xs" onClick={onRefresh}>
+              <RefreshCwIcon className="h-3.5 w-3.5" />
+            </Button>
+          </Tooltip>
+        )}
+        {actions}
+        {onDownload && (
+          <Tooltip content="Download">
+            <Button variant="text" size="xs" onClick={onDownload}>
+              <DownloadIcon className="h-3.5 w-3.5" />
+            </Button>
+          </Tooltip>
+        )}
+      </div>
+    </div>
+  );
+};

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

@@ -1,19 +1,18 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { EditorView, keymap } from "@codemirror/view";
+import { keymap } from "@codemirror/view";
 import { useAtomValue } from "jotai";
 import {
   AlertTriangleIcon,
   CopyIcon,
-  DownloadIcon,
   ExternalLinkIcon,
-  RefreshCwIcon,
   SaveIcon,
 } from "lucide-react";
 import type React from "react";
-import { Suspense, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { renderShortcut } from "@/components/shortcuts/renderShortcut";
 import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
 import { Tooltip } from "@/components/ui/tooltip";
 import { disableFileDownloadsAtom, hotkeysAtom } from "@/core/config/config";
 import { useRequestClient } from "@/core/network/requests";
@@ -21,19 +20,15 @@ import type { FileInfo } from "@/core/network/types";
 import { filenameAtom } from "@/core/saving/file-state";
 import { isWasm } from "@/core/wasm/utils";
 import { useAsyncData } from "@/hooks/useAsyncData";
-import { LazyAnyLanguageCodeMirror } from "@/plugins/impl/code/LazyAnyLanguageCodeMirror";
 import { ErrorBanner } from "@/plugins/impl/common/error-banner";
-import { useTheme } from "@/theme/useTheme";
 import { copyToClipboard } from "@/utils/copy";
 import { downloadBlob, downloadByURL } from "@/utils/download";
 import { type Base64String, base64ToDataURL } from "@/utils/json/base64";
-import { Button } from "../inputs/Inputs";
+import { FilePreviewHeader } from "./file-header";
 import {
-  AudioViewer,
-  CsvViewer,
-  ImageViewer,
-  PdfViewer,
-  VideoViewer,
+  FileContentRenderer,
+  isMediaMime,
+  MIME_TO_LANGUAGE,
 } from "./renderers";
 
 interface Props {
@@ -46,7 +41,6 @@ interface Props {
 const unsavedContentsForFile = new Map<string, string>();
 
 export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
-  const { theme } = useTheme();
   const { sendFileDetails, sendUpdateFile } = useRequestClient();
   const hotkeys = useAtomValue(hotkeysAtom);
   const disableFileDownloads = useAtomValue(disableFileDownloadsAtom);
@@ -105,7 +99,7 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
   }
 
   const mimeType = data.mimeType || "text/plain";
-  const isEditable = mimeType in mimeToLanguage;
+  const isEditable = mimeType in MIME_TO_LANGUAGE;
   const isActiveNotebook =
     currentNotebookFilename &&
     data.file.isMarimoFile &&
@@ -127,7 +121,7 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
   }
 
   const handleDownload = () => {
-    if (isMedia(mimeType)) {
+    if (isMediaMime(mimeType)) {
       const dataURL = base64ToDataURL(data.contents as Base64String, mimeType);
       downloadByURL(dataURL, data.file.name);
       return;
@@ -140,109 +134,57 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
   };
 
   const header = (
-    <div className="text-xs text-muted-foreground p-1 flex justify-end gap-2 border-b">
-      <Tooltip content="Refresh">
-        <Button size="small" onClick={refetch}>
-          <RefreshCwIcon />
-        </Button>
-      </Tooltip>
-      {file.isMarimoFile && !isWasm() && (
-        <Tooltip content="Open notebook">
-          <Button size="small" onClick={(evt) => onOpenNotebook(evt)}>
-            <ExternalLinkIcon />
-          </Button>
-        </Tooltip>
-      )}
-      {!disableFileDownloads && (
-        <Tooltip content="Download">
-          <Button size="small" onClick={handleDownload}>
-            <DownloadIcon />
-          </Button>
-        </Tooltip>
-      )}
-      {!isMedia(mimeType) && (
+    <FilePreviewHeader
+      filename={data.file.name}
+      onRefresh={refetch}
+      onDownload={disableFileDownloads ? undefined : handleDownload}
+      actions={
         <>
-          <Tooltip content="Copy contents to clipboard">
-            <Button
-              size="small"
-              onClick={async () => {
-                await copyToClipboard(internalValue);
-              }}
-            >
-              <CopyIcon />
-            </Button>
-          </Tooltip>
-          <Tooltip content={renderShortcut("global.save")}>
-            <Button
-              size="small"
-              color={internalValue === data.contents ? undefined : "green"}
-              onClick={handleSaveFile}
-              disabled={internalValue === data.contents}
-            >
-              <SaveIcon />
-            </Button>
-          </Tooltip>
+          {file.isMarimoFile && !isWasm() && (
+            <Tooltip content="Open notebook">
+              <Button
+                variant="text"
+                size="xs"
+                onClick={(evt) => onOpenNotebook(evt)}
+              >
+                <ExternalLinkIcon className="h-3.5 w-3.5" />
+              </Button>
+            </Tooltip>
+          )}
+          {!isMediaMime(mimeType) && (
+            <>
+              <Tooltip content="Copy contents to clipboard">
+                <Button
+                  variant="text"
+                  size="xs"
+                  onClick={async () => {
+                    await copyToClipboard(internalValue);
+                  }}
+                >
+                  <CopyIcon className="h-3.5 w-3.5" />
+                </Button>
+              </Tooltip>
+              <Tooltip content={renderShortcut("global.save")}>
+                <Button
+                  variant={internalValue === data.contents ? "text" : "success"}
+                  size="xs"
+                  onClick={handleSaveFile}
+                  disabled={internalValue === data.contents}
+                >
+                  <SaveIcon className="h-3.5 w-3.5" />
+                </Button>
+              </Tooltip>
+            </>
+          )}
         </>
-      )}
-    </div>
+      }
+    />
   );
 
-  if (mimeType.startsWith("image/")) {
-    return (
-      <>
-        {header}
-        <div className="flex-1 overflow-hidden flex flex-col">
-          <ImageViewer base64={data.contents as Base64String} mime={mimeType} />
-        </div>
-      </>
-    );
-  }
-
-  if (mimeType === "text/csv" && data.contents) {
-    return (
-      <>
-        {header}
-        <div className="flex-1 overflow-hidden flex flex-col">
-          <CsvViewer contents={data.contents} />
-        </div>
-      </>
-    );
-  }
-
-  if (mimeType.startsWith("audio/")) {
-    return (
-      <>
-        {header}
-        <div className="flex-1 overflow-hidden flex flex-col">
-          <AudioViewer base64={data.contents as Base64String} mime={mimeType} />
-        </div>
-      </>
-    );
-  }
-
-  if (mimeType.startsWith("video/")) {
-    return (
-      <>
-        {header}
-        <div className="flex-1 overflow-hidden flex flex-col">
-          <VideoViewer base64={data.contents as Base64String} mime={mimeType} />
-        </div>
-      </>
-    );
-  }
-
-  if (mimeType.startsWith("application/pdf")) {
-    return (
-      <>
-        {header}
-        <div className="flex-1 overflow-hidden flex flex-col">
-          <PdfViewer base64={data.contents as Base64String} mime={mimeType} />
-        </div>
-      </>
-    );
-  }
+  const isMedia = isMediaMime(mimeType);
+  const isText = !isMedia && mimeType !== "text/csv";
 
-  const warningBanner = isActiveNotebook && (
+  const warningBanner = isText && isActiveNotebook && (
     <Alert variant="warning" className="rounded-none">
       <AlertTriangleIcon className="h-4 w-4" />
       <AlertDescription>
@@ -256,60 +198,39 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
     <>
       {header}
       {warningBanner}
-      <div className="flex-1 overflow-auto">
-        <Suspense>
-          <LazyAnyLanguageCodeMirror
-            theme={theme === "dark" ? "dark" : "light"}
-            language={mimeToLanguage[mimeType] || mimeToLanguage.default}
-            className="border-b"
-            extensions={[
-              EditorView.lineWrapping,
-              // Command S for save
-              keymap.of([
-                {
-                  key: hotkeys.getHotkey("global.save").key,
-                  stopPropagation: true,
-                  run: () => {
-                    if (internalValue !== data.contents) {
-                      handleSaveFile();
-                      return true;
-                    }
-                    return false;
-                  },
-                },
-              ]),
-            ]}
-            value={internalValue}
-            onChange={setInternalValue}
-          />
-        </Suspense>
-      </div>
+      <FileContentRenderer
+        mimeType={mimeType}
+        contents={
+          isMedia
+            ? undefined
+            : isText
+              ? internalValue
+              : (data.contents ?? undefined)
+        }
+        mediaSource={
+          isMedia
+            ? { base64: data.contents as Base64String, mime: mimeType }
+            : undefined
+        }
+        readOnly={!isText}
+        onChange={setInternalValue}
+        extensions={[
+          // Command S for save
+          keymap.of([
+            {
+              key: hotkeys.getHotkey("global.save").key,
+              stopPropagation: true,
+              run: () => {
+                if (internalValue !== data.contents) {
+                  handleSaveFile();
+                  return true;
+                }
+                return false;
+              },
+            },
+          ]),
+        ]}
+      />
     </>
   );
 };
-
-const isMedia = (mime: string) => {
-  if (!mime) {
-    return false;
-  }
-  return (
-    mime.startsWith("image/") ||
-    mime.startsWith("audio/") ||
-    mime.startsWith("video/") ||
-    mime.startsWith("application/pdf")
-  );
-};
-
-const mimeToLanguage: Record<string, string> = {
-  "application/javascript": "javascript",
-  "text/markdown": "markdown",
-  "text/html": "html",
-  "text/css": "css",
-  "text/x-python": "python",
-  "application/json": "json",
-  "application/xml": "xml",
-  "text/x-yaml": "yaml",
-  "text/csv": "markdown",
-  "text/plain": "markdown",
-  default: "markdown",
-};