@marimo-team/frontend 0.18.5-dev201 → 0.18.5-dev203

package/src/components/editor/chrome/wrapper/sidebar.tsx

@@ -4,13 +4,14 @@ import { useAtom, useAtomValue } from "jotai";
 import { MessageCircleQuestionIcon } from "lucide-react";
 import type React from "react";
 import type { PropsWithChildren } from "react";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { ReorderableList } from "@/components/ui/reorderable-list";
 import { Tooltip } from "@/components/ui/tooltip";
 import {
   cellErrorCount,
   notebookQueuedOrRunningCountAtom,
 } from "@/core/cells/cells";
+import { capabilitiesAtom } from "@/core/config/capabilities";
 import { cn } from "@/utils/cn";
 import { FeedbackButton } from "../components/feedback-button";
 import { panelLayoutAtom, useChromeActions, useChromeState } from "../state";
@@ -22,9 +23,13 @@ import {
 } from "../types";
 
 export const Sidebar: React.FC = () => {
-  const { selectedPanel, selectedDeveloperPanelTab } = useChromeState();
-  const { toggleApplication, openApplication } = useChromeActions();
+  const { selectedPanel, selectedDeveloperPanelTab, isSidebarOpen } =
+    useChromeState();
+  const { toggleApplication, openApplication, setIsSidebarOpen } =
+    useChromeActions();
   const [panelLayout, setPanelLayout] = useAtom(panelLayoutAtom);
+  // Subscribe to capabilities to re-render when they change
+  const capabilities = useAtomValue(capabilitiesAtom);
 
   const renderIcon = ({ Icon }: PanelDescriptor, className?: string) => {
     return <Icon className={cn("h-5 w-5", className)} />;
@@ -35,7 +40,7 @@ export const Sidebar: React.FC = () => {
   const availableSidebarPanels = useMemo(() => {
     const devPanelIds = new Set(panelLayout.developerPanel);
     return PANELS.filter((p) => {
-      if (isPanelHidden(p)) {
+      if (isPanelHidden(p, capabilities)) {
         return false;
       }
       // Exclude panels that are in the developer panel
@@ -44,15 +49,19 @@ export const Sidebar: React.FC = () => {
       }
       return true;
     });
-  }, [panelLayout.developerPanel]);
+  }, [panelLayout.developerPanel, capabilities]);
 
   // Convert current sidebar items to PanelDescriptors
+  // Filter out hidden panels (e.g., when capability is not available)
   const sidebarItems = useMemo(() => {
     return panelLayout.sidebar.flatMap((id) => {
       const panel = PANEL_MAP.get(id);
-      return panel ? [panel] : [];
+      if (!panel || isPanelHidden(panel, capabilities)) {
+        return [];
+      }
+      return [panel];
     });
-  }, [panelLayout.sidebar]);
+  }, [panelLayout.sidebar, capabilities]);
 
   const handleSetSidebarItems = (items: PanelDescriptor[]) => {
     setPanelLayout((prev) => ({
@@ -84,6 +93,27 @@ export const Sidebar: React.FC = () => {
     toggleApplication(item.type);
   };
 
+  // Auto-correct sidebar selection when the selected panel is no longer available
+  useEffect(() => {
+    if (!isSidebarOpen) {
+      return;
+    }
+    const isSelectionValid = sidebarItems.some((p) => p.type === selectedPanel);
+    if (!isSelectionValid) {
+      if (sidebarItems.length > 0) {
+        openApplication(sidebarItems[0].type);
+      } else {
+        setIsSidebarOpen(false);
+      }
+    }
+  }, [
+    isSidebarOpen,
+    sidebarItems,
+    selectedPanel,
+    openApplication,
+    setIsSidebarOpen,
+  ]);
+
   return (
     <div className="h-full pt-4 pb-1 px-1 flex flex-col items-start text-muted-foreground text-md select-none no-print text-sm z-50 dark:bg-background print:hidden hide-on-fullscreen">
       <ReorderableList<PanelDescriptor>