chore(react): port close_pane_button

apps/client/src/layouts/desktop_layout.tsx

@@ -125,7 +125,7 @@ export default class DesktopLayout {
                                                                 .child(new SpacerWidget(0, 1))
                                                                 .child(<MovePaneButton direction="left" />)
                                                                 .child(<MovePaneButton direction="right" />)
-                                                                .child(new ClosePaneButton())
+                                                                .child(<ClosePaneButton />)
                                                                 .child(new CreatePaneButton())
                                                         )
                                                         .child(<Ribbon />)

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

@@ -1,34 +0,0 @@
-import type { EventData } from "../../components/app_context.js";
-import { t } from "../../services/i18n.js";
-import OnClickButtonWidget from "./onclick_button.js";
-
-export default class ClosePaneButton extends OnClickButtonWidget {
-    isEnabled() {
-        return (
-            super.isEnabled() &&
-            // main note context should not be closeable
-            this.noteContext &&
-            !!this.noteContext.mainNtxId
-        );
-    }
-
-    async noteContextReorderEvent({ ntxIdsInOrder }: EventData<"noteContextReorder">) {
-        this.refresh();
-    }
-
-    constructor() {
-        super();
-
-        this.icon("bx-x")
-            .title(t("close_pane_button.close_this_pane"))
-            .titlePlacement("bottom")
-            .onClick((widget, e) => {
-                // to avoid split pane container detecting click within the pane which would try to activate this
-                // pane (which is being removed)
-                e.stopPropagation();
-
-                widget.triggerCommand("closeThisNoteSplit", { ntxId: widget.getClosestNtxId() });
-            })
-            .class("icon-action");
-    }
-}

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

@@ -0,0 +1,30 @@
+import { useState } from "preact/hooks";
+import { t } from "../../services/i18n";
+import ActionButton from "../react/ActionButton";
+import { useNoteContext, useTriliumEvent } from "../react/hooks";
+
+export default function ClosePaneButton() {
+    const { noteContext, parentComponent } = useNoteContext();
+    const [ isEnabled, setIsEnabled ] = useState(false);
+
+    function refresh() {
+        setIsEnabled(!!(noteContext && !!noteContext.mainNtxId));
+    }
+
+    useTriliumEvent("noteContextReorder", refresh);
+
+    return (
+        <ActionButton
+            icon="bx bx-x"
+            text={t("close_pane_button.close_this_pane")}
+            className={!isEnabled ? "hidden-ext" : ""}
+            onClick={(e) => {
+                // to avoid split pane container detecting click within the pane which would try to activate this
+                // pane (which is being removed)
+                e.stopPropagation();
+
+                parentComponent?.triggerCommand("closeThisNoteSplit", { ntxId: parentComponent.getClosestNtxId() });
+            }}
+        />
+    )
+}

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

@@ -31,8 +31,6 @@ export default function MovePaneButton({ direction }: MovePaneButtonProps) {
         setRefreshCounter(refreshCounter + 1);
     });
 
-    console.log("Refresh with ", isEnabled());
-
     return (
         <ActionButton
             icon={direction === "left" ? "bx bx-chevron-left" : "bx bx-chevron-right"}