Add split view to the Explorer (two panes side by side)

[jaysuk]

Summary

Adds a split view to the Explorer page: a pane can be split into two independent tab strips with a draggable divider between them, so two files (or a file and a directory listing) can be open side by side - e.g. reference one macro while editing another, or compare two config files.

• Split right button (in the toolbar, next to "+") creates a second pane and moves the active tab into it. Enabled once there are 2+ tabs to split from.
• Close split merges the second pane's tabs back into the first and removes the split.
• Each pane behaves exactly like the pre-split single tab strip: its own tabs, its own drag-and-drop reordering, its own "+" button.
• Tabs can be dragged from one pane's strip onto the other to move them across.
• The divider is draggable to resize the panes live; the ratio persists across sessions (cacheStore.explorerSplitRatio), mirroring the existing nav-drawer resize handle.
• Below the lg breakpoint the non-focused pane is hidden (not unmounted) and the split controls are hidden, so it degrades to the current single-pane behaviour on narrower viewports without losing state. (Originally gated on md; raised to lg since two side-by-side tab strips need more room than a typical tablet-width window gives them.)

Implementation notes

• Kept the existing flat tabs array and its URL-sync/drag/close logic largely intact by annotating each tab with a groupId (which pane it's in), rather than restructuring into per-pane arrays. groups is capped at exactly two fixed ids, so there's nothing to grow or clean up.
• setActiveTab() replaces direct activeTab.value writes and tracks which pane last had focus (focusedGroupId); the URL sync, scroll-restore watcher, and new-tab placement all key off it.
• moveTabToGroup() / splitRight() / closeSplit() handle pane transitions, reusing the existing closeTab fallback-tab-selection logic so closing/moving the active tab in a pane always lands on a sensible sibling.
• useGcodeThumbnails() is single-flight internally, so it's now instantiated once per pane rather than once for the whole page - otherwise two panes browsing different /gcodes directories would cancel each other's fetch and share one progress bar.
• The non-focused pane collapses via a CSS class on narrow viewports rather than v-if, since MonacoEditor's unmount has no unsaved-content flush path - unmounting a dirty editor would silently lose the edits.
• Browser back/forward ordinal resolution is scoped to the focused pane's own tabs, so a stray ordinal can never resolve into - and steal focus from - the other, non-focused pane.

Testing

• vue-tsc --noEmit and npm run build both pass, including after the md -> lg breakpoint change.
• Manually tested against a real Duet board: opened two macros side by side and dragged the divider to resize the panes.
• Also manually driven end-to-end against the dev server with Playwright (no live board): opened tabs, split, dragged the divider, dragged a tab across panes, closed the split, and shrank the viewport below the breakpoint - all confirmed via screenshots and DOM assertions, zero console/page errors throughout. That pass predates the md -> lg change; the collapse behaviour itself is unchanged, just the threshold it fires at, but it hasn't been re-run specifically against lg.
• Not yet exercised on real hardware: the narrow-viewport collapse, thumbnails against actual /gcodes directories in split panes, and the dirty-editor-survives-a-resize case.

🤖 Generated with Claude Code

[jaysuk]

recheck

[chrishamm]

Thanks for the PR, but I can't merge this as it is.

Every pane transition (split right, close split, dragging a tab across, and the group id rename in collapseEmptyGroup) moves a v-window-item between two v-window parents. Vue cannot reparent that, so the MonacoEditor is unmounted and remounted, which disposes the model and re-downloads the file. Any unsaved edits are lost silently, and none of these paths checks dirty. The URL has the same problem in the other direction: it carries only path and ordinal, no pane, so after focusing pane 2 a browser Back resolves the ordinal in pane 2 and overwrites its directory instead of refocusing pane 1.

To make this work the Monaco model needs to belong to the tab rather than the editor instance (a model cache keyed by filename, setModel on mount, dispose when the tab closes), and the URL needs a pane discriminator or history has to be limited to the first pane. Apart from that this is too big for the rc phase of 3.7, so please rebase it on next once that is fixed.

[chrishamm]

Setting this to changes requested so the state matches my comment above. The Monaco
model has to belong to the tab before the pane moves are safe, and this is too big
for the 3.7 rc phase regardless, so please rebase on next once that is sorted.