refactor(react/launch_bar): port spacer

apps/client/src/layouts/desktop_layout.tsx

@@ -30,7 +30,6 @@ import ScrollingContainer from "../widgets/containers/scrolling_container.js";
 import ScrollPadding from "../widgets/scroll_padding.js";
 import SearchResult from "../widgets/search_result.jsx";
 import SharedInfo from "../widgets/shared_info.jsx";
-import SpacerWidget from "../widgets/spacer.js";
 import SplitNoteContainer from "../widgets/containers/split_note_container.js";
 import SqlResults from "../widgets/sql_result.js";
 import SqlTableSchemas from "../widgets/sql_table_schemas.js";
@@ -43,8 +42,8 @@ import UploadAttachmentsDialog from "../widgets/dialogs/upload_attachments.js";
 import utils from "../services/utils.js";
 import WatchedFileUpdateStatusWidget from "../widgets/watched_file_update_status.js";
 import NoteDetail from "../widgets/NoteDetail.jsx";
-import RightPanelWidget from "../widgets/sidebar/RightPanelWidget.jsx";
 import PromotedAttributes from "../widgets/PromotedAttributes.jsx";
+import SpacerWidget from "../widgets/launch_bar/SpacerWidget.jsx";
 
 export default class DesktopLayout {
 
@@ -125,7 +124,7 @@ export default class DesktopLayout {
                                                                 .cssBlock(".title-row > * { margin: 5px; }")
                                                                 .child(<NoteIconWidget />)
                                                                 .child(<NoteTitleWidget />)
-                                                                .child(new SpacerWidget(0, 1))
+                                                                .child(<SpacerWidget baseSize={0} growthFactor={1} />)
                                                                 .child(<MovePaneButton direction="left" />)
                                                                 .child(<MovePaneButton direction="right" />)
                                                                 .child(<ClosePaneButton />)

apps/client/src/widgets/containers/launcher.tsx

@@ -1,5 +1,4 @@
 import CalendarWidget from "../buttons/calendar.js";
-import SpacerWidget from "../spacer.js";
 import ProtectedSessionStatusWidget from "../buttons/protected_session_status.js";
 import SyncStatusWidget from "../sync_status.js";
 import BasicWidget, { wrapReactWidgets } from "../basic_widget.js";
@@ -14,6 +13,7 @@ import type FNote from "../../entities/fnote.js";
 import type { CommandNames } from "../../components/app_context.js";
 import AiChatButton from "../buttons/ai_chat_button.js";
 import BookmarkButtons from "../launch_bar/BookmarkButtons.jsx";
+import SpacerWidget from "../launch_bar/SpacerWidget.jsx";
 
 interface InnerWidget extends BasicWidget {
     settings?: {
@@ -109,7 +109,7 @@ export default class LauncherWidget extends BasicWidget {
                 const baseSize = parseInt(note.getLabelValue("baseSize") || "40");
                 const growthFactor = parseInt(note.getLabelValue("growthFactor") || "100");
 
-                return new SpacerWidget(baseSize, growthFactor);
+                return <SpacerWidget baseSize={baseSize} growthFactor={growthFactor} />;
             case "bookmarks":
                 return <BookmarkButtons isHorizontalLayout={this.isHorizontalLayout} />
             case "protectedSession":

apps/client/src/widgets/launch_bar/SpacerWidget.tsx

@@ -0,0 +1,35 @@
+import appContext, { CommandNames } from "../../components/app_context";
+import contextMenu from "../../menus/context_menu";
+import { t } from "../../services/i18n";
+import { isMobile } from "../../services/utils";
+
+interface SpacerWidgetProps {
+    baseSize?: number;
+    growthFactor?: number;
+}
+
+export default function SpacerWidget({ baseSize, growthFactor }: SpacerWidgetProps) {
+    return (
+        <div
+            className="spacer"
+            style={{
+                flexBasis: baseSize ?? 0,
+                flexGrow: growthFactor ?? 1000,
+                flexShrink: 1000
+            }}
+            onContextMenu={(e) => {
+                e.preventDefault();
+                contextMenu.show<CommandNames>({
+                    x: e.pageX,
+                    y: e.pageY,
+                    items: [{ title: t("spacer.configure_launchbar"), command: "showLaunchBarSubtree", uiIcon: "bx " + (isMobile() ? "bx-mobile" : "bx-sidebar") }],
+                    selectMenuItemHandler: ({ command }) => {
+                        if (command) {
+                            appContext.triggerCommand(command);
+                        }
+                    }
+                });
+            }}
+        />
+    )
+}

apps/client/src/widgets/spacer.ts

@@ -1,43 +0,0 @@
-import { t } from "../services/i18n.js";
-import BasicWidget from "./basic_widget.js";
-import contextMenu from "../menus/context_menu.js";
-import appContext, { type CommandNames } from "../components/app_context.js";
-import utils from "../services/utils.js";
-
-const TPL = /*html*/`<div class="spacer"></div>`;
-
-export default class SpacerWidget extends BasicWidget {
-    private baseSize: number;
-    private growthFactor: number;
-
-    constructor(baseSize = 0, growthFactor = 1000) {
-        super();
-
-        this.baseSize = baseSize;
-        this.growthFactor = growthFactor;
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$widget.css("flex-basis", this.baseSize);
-        this.$widget.css("flex-grow", this.growthFactor);
-        this.$widget.css("flex-shrink", 1000);
-
-        this.$widget.on("contextmenu", (e) => {
-            this.$widget.tooltip("hide");
-
-            contextMenu.show<CommandNames>({
-                x: e.pageX,
-                y: e.pageY,
-                items: [{ title: t("spacer.configure_launchbar"), command: "showLaunchBarSubtree", uiIcon: "bx " + (utils.isMobile() ? "bx-mobile" : "bx-sidebar") }],
-                selectMenuItemHandler: ({ command }) => {
-                    if (command) {
-                        appContext.triggerCommand(command);
-                    }
-                }
-            });
-
-            return false; // blocks default browser right click menu
-        });
-    }
-}