fix(panes): close button closes the session instead of just detaching

The pane Close button (X, middle-click, and context-menu item) called
layoutStore.closePane, which only popped the leaf out of the split tree —
identical to detachPane. The session stayed alive and reappeared as an
ungrouped tab.

handleClosePane now tears the session down like TitleBar.closeSessionById:
multiplayer stopSharing/leaveSession, disconnect() for connected sessions,
then removeSession (which also removes the leaf from the layout tree).
Removed the now-dead, misleadingly-named closePane store action.

Author: kipavy

src/components/panes/PaneHeader.tsx

@@ -97,7 +97,6 @@ export function PaneHeader({ paneId, session, active }: { paneId: string; sessio
   const [pingEnabled] = useToggle("reachability");
   const activePollIntervalMs = useHostPingStore((s) => s.activePollIntervalMs);
   const setStatus = useHostPingStore((s) => s.setStatus);
-  const closePane = useLayoutStore((s) => s.closePane);
   const splitPane = useLayoutStore((s) => s.splitPane);
   const detachPane = useLayoutStore((s) => s.detachPane);
   const maximizedPaneId = useLayoutStore((s) => s.maximizedPaneId);
@@ -246,7 +245,15 @@ export function PaneHeader({ paneId, session, active }: { paneId: string; sessio
   };
 
   const handleClosePane = () => {
-    closePane(paneId);
+    if (mpState) {
+      if (mpState.role === "host") useTeamSessionStore.getState().stopSharing(session.id).catch(() => {});
+      else useTeamSessionStore.getState().leaveSession(session.id);
+    }
+    // disconnect() is async; removeSession() drops it synchronously so it can't linger as an ungrouped tab
+    if (session.type !== "multiplayer" && (session.status === "connected" || session.status === "connecting")) {
+      void useSessionStore.getState().disconnect(session.id);
+    }
+    useSessionStore.getState().removeSession(session.id);
     const layout = useLayoutStore.getState();
     const nextLeaf = findLeaf(layout.root, layout.activePaneId);
     if (nextLeaf) useSessionStore.getState().setActive(nextLeaf.sessionId);

src/stores/layoutStore.ts

@@ -50,7 +50,6 @@ interface LayoutStore {
   splitPane(targetPaneId: string, sessionId: string, position: SplitPosition): void;
   movePane(sourcePaneId: string, targetPaneId: string, position: SplitPosition): void;
   detachPane(paneId: string): string | null;
-  closePane(paneId: string): void;
   removeSession(sessionId: string): void;
   setRatio(splitNodeId: string, ratio: number): void;
   setActivePane(paneId: string): void;
@@ -369,36 +368,6 @@ export const useLayoutStore = create<LayoutStore>((set) => ({
     return detachedSessionId;
   },
 
-  closePane: (paneId) => {
-    set((state) => {
-      if (!state.root) return {};
-      const { root } = removeLeaf(state.root, paneId);
-      if (!root || root.type === "leaf") {
-        const splitTabs = state.splitTabs.filter((tab) => tab.id !== state.activeSplitTabId);
-        const nextTab = splitTabs[splitTabs.length - 1] ?? null;
-        return {
-          splitTabs,
-          titlebarOrder: state.titlebarOrder.filter((key) => key !== `split:${state.activeSplitTabId}`),
-          ...fieldsFromTab(nextTab),
-        };
-      }
-      const nextActive = findLeaf(root, state.activePaneId) ?? firstLeaf(root);
-      return {
-        ...updateActiveSplitTab(state, {
-          root: root!,
-          activePaneId: nextActive?.id ?? null,
-          maximizedPaneId: state.maximizedPaneId === paneId ? null : state.maximizedPaneId,
-          broadcastActive: root ? state.broadcastActive : false,
-        }),
-        root,
-        activePaneId: nextActive?.id ?? null,
-        maximizedPaneId: state.maximizedPaneId === paneId ? null : state.maximizedPaneId,
-        broadcastActive: root ? state.broadcastActive : false,
-        splitTabActive: root ? state.splitTabActive : false,
-      };
-    });
-  },
-
   removeSession: (sessionId) => {
     set((state) => {
       const splitTabs = state.splitTabs.flatMap((tab): SplitTab[] => {