Add cross-list drag-drop for sidebar and developer panel #7697

manzt · 2026-01-06T20:50:28Z

Previously, sidebar panels and developer panel tabs were separate systems with distinct types and no way to move items between them.

These changes unify both into a single PanelType with a defaultSection property, stored in a new panelLayoutAtom that tracks which panels belong to each section. Panels can now be dragged between the sidebar and developer panel, with context menus dynamically showing only panels not already in the other section.

The ReorderableList component gains cross-list drag support via a crossListDrag prop that groups lists by dragType.

vercel · 2026-01-06T20:50:34Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
marimo-docs	Ready	Preview, Comment	Jan 7, 2026 7:56pm

akshayka

After dragging the errors panel to the sidebar, I managed to get my sidebar into a state where it looks like two panels are selected even though they aren't

frontend/src/components/editor/chrome/types.ts

mscolnick · 2026-01-06T21:30:33Z

frontend/src/components/editor/chrome/wrapper/app-chrome.tsx

            {selectedPanel === "documentation" && <LazyDocumentationPanel />}
            {selectedPanel === "snippets" && <LazySnippetsPanel />}
            {selectedPanel === "ai" && renderAiPanel()}
+            {selectedPanel === "errors" && <LazyErrorsPanel />}


maybe possible to make this programatic instead?. i guess with renderAiPanel and terminal, those might need to be excluded.

frontend/src/components/editor/chrome/wrapper/app-chrome.tsx

frontend/src/components/editor/chrome/types.ts

Copilot

Pull request overview

This PR unifies the previously separate sidebar panels and developer panel tabs into a single PanelType system with cross-list drag-drop functionality. Users can now drag panels between the sidebar and developer panel, creating a more flexible workspace layout.

Unified PanelType replaces separate PanelType and DeveloperPanelTabType enums
Added crossListDrag prop to ReorderableList component for drag-drop between lists
Introduced panelLayoutAtom to track which panels belong to sidebar vs developer panel sections

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
`frontend/src/components/ui/reorderable-list.tsx`	Added cross-list drag-drop support with `crossListDrag` prop, `onInsert` and `onRootDrop` handlers, and removed generic type constraint
`frontend/src/components/editor/chrome/types.ts`	Unified panel types into single `PanelType` enum, updated `PanelDescriptor` to include `label` and `defaultSection` properties
`frontend/src/components/editor/chrome/state.ts`	Added `PanelLayout` interface and `panelLayoutAtom` to replace `sidebarOrderAtom`, updated type references
`frontend/src/components/editor/chrome/wrapper/sidebar.tsx`	Integrated cross-list drag support, added `handleReceive` callback for drops from developer panel, updated context menu filtering
`frontend/src/components/editor/chrome/wrapper/app-chrome.tsx`	Converted developer panel tabs to use `ReorderableList`, added `handleDevPanelReceive` callback, added rendering for all panel types in both sections
`frontend/src/components/editor/actions/useNotebookActions.tsx`	Updated property reference from `id` to `type` in dropdown

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

frontend/src/components/ui/reorderable-list.tsx

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

frontend/src/components/editor/chrome/wrapper/app-chrome.tsx

frontend/src/components/ui/reorderable-list.tsx

Previously, sidebar panels and developer panel tabs were separate systems with distinct types and no way to move items between them. These changes unify both into a single `PanelType` with a `defaultSection` property, stored in a new `panelLayoutAtom` that tracks which panels belong to each section. Panels can now be dragged between the sidebar and developer panel, with context menus dynamically showing only panels not already in the other section. The `ReorderableList` component gains cross-list drag support via a `crossListDrag` prop that groups lists by `dragType`.

The visual selection indicator in ReorderableList was not updating when clicking to switch tabs. The root cause was react-aria's ListBox using the `items` prop pattern, which optimizes re-renders based on the items array. Since external selection state (`selectedPanel`, `selectedDeveloperPanelTab`) wasn't part of that array, the `ListBox` skipped re-rendering children when selection changed. Fixed by switching from the dynamic collection pattern to explicit `.map()` over children, allowing React's normal reconciliation to handle re-renders when parent state changes.

for more information, see https://pre-commit.ci

Previously, the snippets panel was special-cased: hidden by default but automatically shown when users enabled snippets in their config. This PR removes that conditional behavior. The challenge with conditionally showing panels based on config is that we can't distinguish between "user explicitly removed this panel" vs "we hid it by default" (now that they can be rearranged). When a user enables snippets, we'd want to auto-show the panel. But if they later removed it, we'd show it again on next load because we couldn't tell why it was missing. With the new ability to rearrange panels between sections, we'd also need to track explicitly hidden panels separately, and the logic gets complicated. Maybe there's a cleaner solution, but for now this just moves snippets to the developer panel by default (less magic). Users can drag it to the sidebar if they prefer, but everything has an original "place."

github-actions · 2026-01-07T20:14:54Z

🚀 Development release published. You may be able to view the changes at https://marimo.app?v=0.18.5-dev169

With #7697, panels can render in two locations: the sidebar (narrow, vertical) or the developer panel (wide, horizontal). Components within panels (may) need to know their context to adapt their layout accordingly. These changes introduce a `PanelSectionContext` that provides "sidebar" or "developer-panel" to child components, along with a `usePanelOrientation` hook that maps section to the appropriate layout direction. The scratchpad uses this mechanism to switch between vertical and horizontal panel arrangements depending on where it's rendered. I think the other panels should be fine, but this should give us a good foundation of improving other panels if requested in the future. https://github.com/user-attachments/assets/e32921ce-b0fa-41bd-912f-c9c192fe1f14 --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

manzt requested a review from Light2Dark as a code owner January 6, 2026 20:50

vercel bot deployed to Preview January 6, 2026 20:51 View deployment

manzt added enhancement New feature or request bash-focus Area to focus on during release bug bash labels Jan 6, 2026

akshayka reviewed Jan 6, 2026

View reviewed changes