feat(react/widgets): port scroll padding

apps/client/src/layouts/desktop_layout.tsx

@@ -32,7 +32,7 @@ import LauncherContainer from "../widgets/containers/launcher_container.js";
 import ApiLogWidget from "../widgets/api_log.js";
 import MovePaneButton from "../widgets/buttons/move_pane_button.js";
 import UploadAttachmentsDialog from "../widgets/dialogs/upload_attachments.js";
-import ScrollPaddingWidget from "../widgets/scroll_padding.js";
+import ScrollPadding from "../widgets/scroll_padding.js";
 import options from "../services/options.js";
 import utils from "../services/utils.js";
 import CloseZenButton from "../widgets/close_zen_button.js";
@@ -141,7 +141,7 @@ export default class DesktopLayout {
                                                                 .child(new NoteListWidget(false))
                                                                 .child(new SearchResultWidget())
                                                                 .child(new SqlResultWidget())
-                                                                .child(new ScrollPaddingWidget())
+                                                                .child(<ScrollPadding />)
                                                         )
                                                         .child(new ApiLogWidget())
                                                         .child(new FindWidget())

apps/client/src/widgets/scroll_padding.ts

@@ -1,33 +0,0 @@
-import NoteContextAwareWidget from "./note_context_aware_widget.js";
-
-const TPL = /*html*/`<div class="scroll-padding-widget"></div>`;
-
-export default class ScrollPaddingWidget extends NoteContextAwareWidget {
-
-    private $scrollingContainer!: JQuery<HTMLElement>;
-
-    isEnabled() {
-        return super.isEnabled() && ["text", "code"].includes(this.note?.type ?? "");
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.contentSized();
-
-        this.$widget.on("click", () => this.triggerCommand("scrollToEnd", { ntxId: this.ntxId }));
-    }
-
-    initialRenderCompleteEvent() {
-        this.$scrollingContainer = this.$widget.closest(".scrolling-container");
-
-        new ResizeObserver(() => this.refreshHeight()).observe(this.$scrollingContainer[0]);
-
-        this.refreshHeight();
-    }
-
-    refreshHeight() {
-        const containerHeight = this.$scrollingContainer.height();
-
-        this.$widget.css("height", Math.round((containerHeight ?? 0) / 2));
-    }
-}

apps/client/src/widgets/scroll_padding.tsx

@@ -0,0 +1,42 @@
+import { useEffect, useRef, useState } from "preact/hooks";
+import { useNoteContext } from "./react/hooks";
+
+export default function ScrollPadding() {
+    const { note, parentComponent, ntxId } = useNoteContext();
+    const ref = useRef<HTMLDivElement>(null);
+    const [height, setHeight] = useState<number>(10);
+    const isEnabled = ["text", "code"].includes(note?.type ?? "");
+
+    const refreshHeight = () => {
+        if (!ref.current) return;
+        const container = ref.current.closest(".scrolling-container") as HTMLElement | null;
+        if (!container) return;
+        setHeight(Math.round(container.offsetHeight / 2));
+    };
+
+    useEffect(() => {
+        if (!isEnabled) return;
+
+        const container = ref.current?.closest(".scrolling-container") as HTMLElement | null;
+        if (!container) return;
+
+        // Observe container resize
+        const observer = new ResizeObserver(() => refreshHeight());
+        observer.observe(container);
+
+        // Initial resize
+        refreshHeight();
+
+        return () => observer.disconnect();
+    }, [note]); // re-run when note changes
+
+    return (isEnabled ?
+        <div
+            ref={ref}
+            className="scroll-padding-widget"
+            style={{ height }}
+            onClick={() => parentComponent.triggerCommand("scrollToEnd", { ntxId })}
+        />
+        : <div></div>
+    )
+}