Skip to content

feat(editor): consolidate left panels into one tabbed Explorer panel#128

Merged
DavidBabinec merged 1 commit into
mainfrom
feat/explorer-panel
Jun 30, 2026
Merged

feat(editor): consolidate left panels into one tabbed Explorer panel#128
DavidBabinec merged 1 commit into
mainfrom
feat/explorer-panel

Conversation

@DavidBabinec

Copy link
Copy Markdown
Contributor

What

Collapses the separate left-rail navigation panels (Layers, Site, Media) into a single Explorer rail button backed by a tabbed ExplorerPanelLayers / Site / Code / Media — mirroring the earlier Framework-panel consolidation.

Panel

  • New ExplorerPanel owns the shell (header + SegmentedControl tabs + close); each tab renders its panel in a headerless tab variant (new Panel headerless prop).
  • DomPanel is now tab-only — removed the dead floating/docked machinery (useDraggablePanel, PanelHeader, collapse toggle, width persistence) and the backing domTreePanel store state, setDomTreePanel/toggleDomTreePanel actions, and the instatic-dom-panel storage key.
  • SiteExplorerPanel / MediaExplorerPanel render chrome-free as tab bodies.

Tabs

  • LayersDomPanel. The search row gains an Insert module button reusing the shared ModuleInserterDialog + useInsertInserterItem (identical target resolution to the canvas + / toolbar + Add).
  • SiteSiteExplorerPanel sectionGroup="site" — Pages, Templates, Components. "New component" now uses the same + icon as New page / New template.
  • Code → the same SiteExplorerPanel instance with sectionGroup="code" — Styles + Scripts. One shared mount so Site/Code share one DnD scope + selection (two instances would each register useDndMonitor and double-handle every drag).
  • MediaMediaExplorerPanel — drops the "Other" bucket (images/videos only), defaults to grid view, shows EXT · size per item instead of the URL, 16:9 tile preview, softer --bg-surface-2 tile hover.

Rail / store

  • One explorer rail item (DatabaseSolidIcon, gold accent — both carried over from the standalone Layers button) instead of three. explorerPanelOpen + explorerPanelTab replace the per-panel open flags.

Misc

  • Code editor floats above the docked sidebars (z-index 80→95) so it no longer hides behind the Explorer panel.
  • Spotlight panel commands open the Explorer panel on the matching tab.
  • Removed the unused workspace/pagesPanel plumbing that anticipated Content-page reuse (Content has its own ContentSidebar).

Why

Three near-identical navigation panels each consumed a rail slot; consolidating them into one tabbed panel matches the Framework-panel pattern, frees rail space, and lets the always-reserved chrome live in one shell. Splitting source files (Styles/Scripts) out of the mislabeled "Pages" tab into a dedicated Code tab clarifies the taxonomy (renderable structure vs. raw source).

Impact

  • User-facing: one Explorer button with Layers/Site/Code/Media tabs; default Layers; active tab persists per-workspace.
  • Pre-release, no backward-compat: a previously-stored explorerPanelTab: 'pages' falls back to the default (layers).

Verification

  • bun run build
  • bun run lint
  • bun test → 5817 pass; the single failure (OnboardingPanel framework import) is pre-existing on main, unrelated to this change.
  • Live browser check: 4 tabs render; Site/Code section split; code editor floats over the panel; rail accent unchanged.

🤖 Generated with Claude Code

Collapse the separate left-rail navigation panels into a single "Explorer"
rail button backed by a tabbed `ExplorerPanel` (Layers / Site / Code /
Media), mirroring the Framework panel consolidation. Default tab is Layers;
the active tab persists per-workspace.

Panel:
- New `ExplorerPanel` owns the shell (header + SegmentedControl tabs +
  close); each tab renders DomPanel / SiteExplorerPanel / MediaExplorerPanel
  in a headerless `tab` variant (new `Panel headerless` prop).
- DomPanel is now tab-only: removed the dead floating/docked machinery
  (useDraggablePanel, PanelHeader, collapse toggle, width persistence) and
  the backing `domTreePanel` store state + `setDomTreePanel`/
  `toggleDomTreePanel` actions and the `instatic-dom-panel` storage key.
- SiteExplorerPanel and MediaExplorerPanel render chrome-free as tab bodies.

Tabs:
- **Layers** → DomPanel (current page's DOM tree). The search row gains an
  Insert-module button reusing the shared `ModuleInserterDialog` +
  `useInsertInserterItem` (same target resolution as the canvas `+`).
- **Site** → SiteExplorerPanel `sectionGroup="site"` — Pages, Templates,
  Components (renderable site structure). "New component" uses the same
  `+` icon as New page / New template.
- **Code** → the SAME SiteExplorerPanel instance with `sectionGroup="code"`
  — Styles + Scripts (source files). One shared mount so Site/Code share one
  DnD scope + selection; two instances would double-handle every drag.
- **Media** → MediaExplorerPanel. Drops the "Other" bucket (images/videos
  only), defaults to grid view, shows "EXT · size" per item instead of the
  URL, 16:9 tile preview, softer `--bg-surface-2` tile hover.

Rail:
- One `explorer` rail item (DatabaseSolidIcon, `gold` accent — carried over
  from the standalone Layers button) instead of three. Store:
  `explorerPanelOpen` + `explorerPanelTab` replace the per-panel open flags.

Misc:
- Code editor floats above the docked sidebars (z-index 80→95) so it no
  longer hides behind the Explorer panel.
- Spotlight panel commands open the Explorer panel on the matching tab.
- Removed the unused `workspace`/`pagesPanel` plumbing that anticipated
  Content-page reuse (Content has its own ContentSidebar).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@DavidBabinec DavidBabinec marked this pull request as ready for review June 30, 2026 22:14
@DavidBabinec DavidBabinec merged commit daffac7 into main Jun 30, 2026
6 checks passed
@DavidBabinec DavidBabinec deleted the feat/explorer-panel branch June 30, 2026 23:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

1 participant