@marimo-team/islands 0.23.10-dev14 → 0.23.10-dev16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.10-dev14",
+  "version": "0.23.10-dev16",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/datasources/datasources.tsx

@@ -3,18 +3,15 @@
 import { CommandList } from "cmdk";
 import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
-import {
-  EyeIcon,
-  EyeOffIcon,
-  PlusIcon,
-  PlusSquareIcon,
-  XIcon,
-} from "lucide-react";
+import { PlusIcon, PlusSquareIcon, XIcon } from "lucide-react";
 import React from "react";
 import { dbDisplayName } from "@/components/databases/display";
 import { EngineVariable } from "@/components/databases/engine-variable";
 import { DatabaseLogo } from "@/components/databases/icon";
-import { RefreshIconButton } from "@/components/editor/file-tree/tree-actions";
+import {
+  RefreshIconButton,
+  VisibilityToggleButton,
+} from "@/components/editor/file-tree/tree-actions";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
 import { Button } from "@/components/ui/button";
 import { Command, CommandInput, CommandItem } from "@/components/ui/command";
@@ -286,27 +283,15 @@ export const DataSources: React.FC = () => {
           </button>
         )}
 
-        <Tooltip
-          content={
-            hideEmpty
-              ? "Show empty schemas and databases"
-              : "Hide empty schemas and databases"
-          }
-        >
-          <Button
-            data-testid="datasources-hide-empty-button"
-            variant="ghost"
-            size="sm"
-            className="px-2 rounded-none focus-visible:outline-hidden"
-            onClick={() => setHideEmpty(!hideEmpty)}
-          >
-            {hideEmpty ? (
-              <EyeOffIcon className="h-4 w-4" />
-            ) : (
-              <EyeIcon className="h-4 w-4" />
-            )}
-          </Button>
-        </Tooltip>
+        <VisibilityToggleButton
+          data-testid="datasources-hide-empty-button"
+          isVisible={!hideEmpty}
+          onToggle={() => setHideEmpty(!hideEmpty)}
+          showTooltip="Show empty schemas and databases"
+          hideTooltip="Hide empty schemas and databases"
+          size="sm"
+          className="px-2 rounded-none focus-visible:outline-hidden"
+        />
 
         <AddConnectionDialog>
           <Button

package/src/components/editor/documentation.css

@@ -51,6 +51,22 @@
     }
   }
 
+  a {
+    cursor: pointer;
+    text-decoration: inherit;
+
+    @apply text-link;
+  }
+
+  a:hover,
+  a:active {
+    text-decoration: underline;
+  }
+
+  a:visited {
+    @apply text-link-visited;
+  }
+
   code {
     @apply border px-1 rounded font-mono bg-[var(--slate-2)] text-sm mb-4 mt-2;
   }

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

@@ -9,8 +9,6 @@ import {
   CopyMinusIcon,
   DownloadIcon,
   ExternalLinkIcon,
-  EyeIcon,
-  EyeOffIcon,
   FilePlus2Icon,
   FolderPlusIcon,
   ListTreeIcon,
@@ -43,6 +41,7 @@ import {
   MENU_ITEM_ICON_CLASS,
   RefreshIconButton,
   TreeChevron,
+  VisibilityToggleButton,
 } from "@/components/editor/file-tree/tree-actions";
 import { MarimoIcon, MarimoPlusIcon } from "@/components/icons/marimo-icons";
 import { Spinner } from "@/components/icons/spinner";
@@ -338,22 +337,13 @@ const Toolbar = ({
         data-testid="file-explorer-refresh-button"
         onClick={onRefresh}
       />
-      <Tooltip
-        content={showHiddenFiles ? "Hide hidden files" : "Show hidden files"}
-      >
-        <Button
-          data-testid="file-explorer-hidden-files-button"
-          onClick={onHidden}
-          variant="text"
-          size="xs"
-        >
-          {showHiddenFiles ? (
-            <EyeIcon size={16} className="text-primary" />
-          ) : (
-            <EyeOffIcon size={16} />
-          )}
-        </Button>
-      </Tooltip>
+      <VisibilityToggleButton
+        data-testid="file-explorer-hidden-files-button"
+        isVisible={showHiddenFiles}
+        onToggle={onHidden}
+        showTooltip="Show hidden files"
+        hideTooltip="Hide hidden files"
+      />
       <Tooltip content="Collapse all folders">
         <Button
           data-testid="file-explorer-collapse-button"

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

@@ -2,11 +2,13 @@
 
 import {
   ChevronRightIcon,
+  EyeIcon,
+  EyeOffIcon,
   MoreVerticalIcon,
   RefreshCwIcon,
 } from "lucide-react";
 import React, { useCallback, useState } from "react";
-import { Button } from "@/components/ui/button";
+import { Button, type ButtonProps } from "@/components/ui/button";
 import { Tooltip } from "@/components/ui/tooltip";
 import { cn } from "@/utils/cn";
 
@@ -73,6 +75,51 @@ export const RefreshIconButton: React.FC<{
   return <Tooltip content={tooltip}>{button}</Tooltip>;
 };
 
+/**
+ * Toggle button that switches between an eye (visible) and crossed-out eye
+ * (hidden) icon. Used to show/hide optional items in toolbars, e.g. hidden
+ * files in the file explorer or empty schemas in the data sources panel.
+ */
+export const VisibilityToggleButton: React.FC<{
+  /** Whether the optional items are currently visible. */
+  isVisible: boolean;
+  onToggle: () => void;
+  /** Tooltip shown while items are hidden (clicking will show them). */
+  showTooltip: string;
+  /** Tooltip shown while items are visible (clicking will hide them). */
+  hideTooltip: string;
+  size?: ButtonProps["size"];
+  className?: string;
+  iconClassName?: string;
+  "data-testid"?: string;
+}> = ({
+  isVisible,
+  onToggle,
+  showTooltip,
+  hideTooltip,
+  size = "xs",
+  className,
+  iconClassName,
+  "data-testid": dataTestId,
+}) => {
+  const Icon = isVisible ? EyeIcon : EyeOffIcon;
+  return (
+    <Tooltip content={isVisible ? hideTooltip : showTooltip}>
+      <Button
+        data-testid={dataTestId}
+        variant="text"
+        size={size}
+        className={className}
+        onClick={onToggle}
+      >
+        <Icon
+          className={cn("h-4 w-4", isVisible && "text-primary", iconClassName)}
+        />
+      </Button>
+    </Tooltip>
+  );
+};
+
 /**
  * Three-dot menu trigger that fades in on row hover.
  * Must be inside a `group` container.