refactor: dnd overhaul

[olivermrose]

Fixes #182

[Copilot]

Pull request overview

This PR refactors the split-view system and drag-and-drop implementation to address unreliable DnD behavior (Issue #182), consolidating split UI into reusable components and migrating from @dnd-kit-svelte/svelte to @dnd-kit/svelte.

Changes:

• Migrates DnD integration to @dnd-kit/svelte and updates drag source/target data modeling for pinned items and split panes.
• Reworks split view routing/UX by removing the dedicated /channels/split route and rendering split panes via shared components ($lib/components/split/*).
• Simplifies/updates split restore & close behavior settings and related startup navigation logic.

Reviewed changes

Copilot reviewed 29 out of 32 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/routes/settings/categories/splits.ts	Removes “single split restore” setting and keeps split-related controls focused on close behavior.
src/routes/(main)/channels/split/SplitView.svelte	Deletes old route-local split pane implementation.
src/routes/(main)/channels/split/+page.ts	Removes split route loader/redirect logic.
src/routes/(main)/channels/split/+page.svelte	Removes split route UI (node/view rendering + keyboard nav).
src/routes/(main)/channels/+layout.svelte	Updates keyboard shortcuts to operate on the new split model without “activate split route”.
src/routes/(main)/channels/[username]/+page.ts	Ensures the visited channel is present in the split layout.
src/routes/(main)/channels/[username]/+page.svelte	Renders split layout within the channel route and reintroduces split keyboard navigation.
src/routes/(main)/+page.svelte	Updates initial navigation/restore logic to route into a channel instead of a split route.
src/routes/(main)/+layout.svelte	Replaces provider/plugins and refines drag handling + overlay rendering for new DnD model.
src/lib/stores.ts	Simplifies layout backend-sync behavior now that single-split restore options are removed.
src/lib/split-layout.ts	Refactors split layout API (ensure/empty ids) and rewrites drag-end handling using typed source/target data.
src/lib/settings.ts	Removes splits.singleRestoreBehavior from schema/defaults.
src/lib/menus/channel-menu.ts	Updates split/leave behaviors for new split model; removes “open split view” route action.
src/lib/context.ts	Deletes sidebar context in favor of global app state.
src/lib/components/ui/ColorPicker.svelte	Minor CSS formatting change.
src/lib/components/TitleBar.svelte	Simplifies titlebar icon handling (component-only).
src/lib/components/StreamTooltip.svelte	Switches sidebar item navigation from <a> to imperative goto() and uses app.sidebarCollapsed.
src/lib/components/StreamInfo.svelte	Uses app.sidebarCollapsed instead of context.
src/lib/components/split/SplitView.svelte	Adds new shared split pane component using @dnd-kit/svelte.
src/lib/components/split/SplitNode.svelte	Adds new recursive layout renderer for split tree using paneforge panes.
src/lib/components/split/SplitHeader.svelte	Updates header interactions (close/preserve, drag handle) and moves guest list display here.
src/lib/components/Sortable.svelte	Migrates pinned sortable to @dnd-kit/svelte/sortable with new type/data fields.
src/lib/components/Sidebar.svelte	Replaces context-based collapse state with app.sidebarCollapsed; removes split-view button.
src/lib/components/Droppable.svelte	Removes old droppable wrapper component used by the previous DnD integration.
src/lib/components/Draggable.svelte	Migrates channel list draggable to @dnd-kit/svelte with typed data.
src/lib/components/ChannelListItem.svelte	Updates DnD attachment API; adds (currently unused) placeholder prop.
src/lib/components/ChannelList.svelte	Removes pinned droppable wrapper and swaps to app.sidebarCollapsed.
src/lib/app.svelte.ts	Adds global sidebarCollapsed state to the app model.
src/app.d.ts	Tightens TitleBar.icon type to component-only.
pnpm-lock.yaml	Updates lockfile for new DnD package and dependency graph changes.
package.json	Replaces @dnd-kit-svelte/svelte with @dnd-kit/svelte in dependencies.
.vscode/settings.json	Updates formatter/save actions and TypeScript SDK configuration.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

Comments suppressed due to low confidence (2)

src/lib/split-layout.ts:114

• insert() returns early when this.root is null by setting this.root = target and not performing the insert. Callers like insertEmpty() then set focused to the new pane id, which can leave focused pointing to a pane that is not present in the tree (and no new split is actually created). Consider handling the empty-tree case by setting root to the constructed branch (or explicitly erroring if inserts are not valid without an existing root), so insertEmpty() always produces a 2-leaf layout.

	public insert(target: string, newNode: string, branch: SplitBranch) {
		if (!this.root) {
			this.root = target;
			return;
		}

src/lib/components/split/SplitHeader.svelte:34

• Root-split close flow here now has a "preserve" path that replaces the root with an empty pane, but the non-preserve path later clears app.splits.root entirely. Given the channel route now renders a split layout (not a standalone Channel view), clearing the root can leave /channels/[username] showing an empty pane after closing the last split and makes splits.goToChannelAfterClose hard to satisfy. Consider keeping a valid root pane for the current channel, or rendering the non-split channel UI when root is null.

---

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