feat(split): allow closing any split pane (#7763)

Author: eliandoran

apps/client/src/components/tab_manager.ts

@@ -647,7 +647,32 @@ export default class TabManager extends Component {
                 ...this.noteContexts.slice(-noteContexts.length),
                 ...this.noteContexts.slice(lastClosedTab.position, -noteContexts.length)
             ];
-            this.noteContextReorderEvent({ ntxIdsInOrder: ntxsInOrder.map((nc) => nc.ntxId).filter((id) => id !== null) });
+
+            // Update mainNtxId if the restored pane is the main pane in the split pane
+            const { oldMainNtxId, newMainNtxId } = (() => {
+                if (noteContexts.length !== 1) {
+                    return { oldMainNtxId: undefined, newMainNtxId: undefined };
+                }
+
+                const mainNtxId = noteContexts[0]?.mainNtxId;
+                const index = this.noteContexts.findIndex(c => c.ntxId === mainNtxId);
+
+                // No need to update if the restored position is after mainNtxId
+                if (index === -1 || lastClosedTab.position > index) {
+                    return { oldMainNtxId: undefined, newMainNtxId: undefined };
+                }
+
+                return {
+                    oldMainNtxId: this.noteContexts[index].ntxId ?? undefined,
+                    newMainNtxId: noteContexts[0]?.ntxId ?? undefined
+                };
+            })();
+
+            this.triggerCommand("noteContextReorder", {
+                ntxIdsInOrder: ntxsInOrder.map((nc) => nc.ntxId).filter((id) => id !== null),
+                oldMainNtxId,
+                newMainNtxId
+            });
 
             let mainNtx = noteContexts.find((nc) => nc.isMainContext());
             if (mainNtx) {

apps/client/src/widgets/buttons/close_pane_button.tsx

@@ -1,18 +1,20 @@
 import { useEffect, useState } from "preact/hooks";
 import { t } from "../../services/i18n";
 import ActionButton from "../react/ActionButton";
-import { useNoteContext, useTriliumEvent } from "../react/hooks";
+import { useNoteContext, useTriliumEvents } from "../react/hooks";
+import appContext from "../../components/app_context";
 
 export default function ClosePaneButton() {
     const { noteContext, ntxId, parentComponent } = useNoteContext();
-    const [ isEnabled, setIsEnabled ] = useState(false);
+    const [isEnabled, setIsEnabled] = useState(false);
 
     function refresh() {
-        setIsEnabled(!!(noteContext && !!noteContext.mainNtxId));
+        const isMainOfSomeContext = appContext.tabManager.noteContexts.some(c => c.mainNtxId === ntxId);
+        setIsEnabled(!!(noteContext && (!!noteContext.mainNtxId || isMainOfSomeContext)));
     }
 
-    useTriliumEvent("noteContextReorder", refresh);
-    useEffect(refresh, [ ntxId ]);
+    useTriliumEvents(["noteContextRemoved", "noteContextReorder", "newNoteContextCreated"], refresh);
+    useEffect(refresh, [ntxId]);
 
     return (
         <ActionButton

apps/client/src/widgets/containers/split_note_container.ts

@@ -100,9 +100,22 @@ export default class SplitNoteContainer extends FlexContainer<SplitNoteWidget> {
     }
 
     async closeThisNoteSplitCommand({ ntxId }: CommandListenerData<"closeThisNoteSplit">) {
-        if (ntxId) {
-            await appContext.tabManager.removeNoteContext(ntxId);
+        if (!ntxId) return;
+        const contexts = appContext.tabManager.noteContexts;
+        const currentIndex = contexts.findIndex((c) => c.ntxId === ntxId);
+        if (currentIndex === -1) return;
+
+        const isRemoveMainContext = contexts[currentIndex].isMainContext();
+        if (isRemoveMainContext && currentIndex + 1 < contexts.length) {
+            const ntxIds = contexts.map((c) => c.ntxId).filter((c) => !!c) as string[];
+            this.triggerCommand("noteContextReorder", {
+                ntxIdsInOrder: ntxIds,
+                oldMainNtxId: ntxId,
+                newMainNtxId: ntxIds[currentIndex + 1]
+            });
         }
+
+        await appContext.tabManager.removeNoteContext(ntxId);
     }
 
     async moveThisNoteSplitCommand({ ntxId, isMovingLeft }: CommandListenerData<"moveThisNoteSplit">) {
@@ -167,12 +180,16 @@ export default class SplitNoteContainer extends FlexContainer<SplitNoteWidget> {
         splitService.delNoteSplitResizer(ntxIds);
     }
 
-    contextsReopenedEvent({ ntxId, afterNtxId }: EventData<"contextsReopened">) {
-        if (ntxId === undefined || afterNtxId === undefined) {
-            // no single split reopened
-            return;
+    contextsReopenedEvent({ ntxId, mainNtxId, afterNtxId }: EventData<"contextsReopened">) {
+        if (ntxId !== undefined && afterNtxId !== undefined) {
+            this.$widget.find(`[data-ntx-id="${ntxId}"]`).insertAfter(this.$widget.find(`[data-ntx-id="${afterNtxId}"]`));
+        } else if (mainNtxId) {
+            const contexts = appContext.tabManager.noteContexts;
+            const nextIndex = contexts.findIndex(c => c.ntxId === mainNtxId);
+            const beforeNtxId = (nextIndex !== -1 && nextIndex + 1 < contexts.length) ? contexts[nextIndex + 1].ntxId : null;
+
+            this.$widget.find(`[data-ntx-id="${mainNtxId}"]`).insertBefore(this.$widget.find(`[data-ntx-id="${beforeNtxId}"]`));
         }
-        this.$widget.find(`[data-ntx-id="${ntxId}"]`).insertAfter(this.$widget.find(`[data-ntx-id="${afterNtxId}"]`));
     }
 
     async refresh() {

apps/client/src/widgets/tab_row.ts

@@ -820,12 +820,15 @@ export default class TabRowWidget extends BasicWidget {
     }
 
     contextsReopenedEvent({ mainNtxId, tabPosition }: EventData<"contextsReopened">) {
-        if (!mainNtxId || !tabPosition) {
+        if (!mainNtxId || tabPosition < 0) {
             // no tab reopened
             return;
         }
         const tabEl = this.getTabById(mainNtxId)[0];
-        tabEl.parentNode?.insertBefore(tabEl, this.tabEls[tabPosition]);
+
+        if ( tabEl && tabEl.parentNode ){
+            tabEl.parentNode.insertBefore(tabEl, this.tabEls[tabPosition]);
+        }
     }
 
     updateTabById(ntxId: string | null) {