From 1af62006550d47c35797b67b2afe1359361b4d3c Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 4 Dec 2025 13:24:47 +0200
Subject: [PATCH 01/29] chore(react/launch_bar): get launch bar to render React
 widgets

---
 .../src/widgets/containers/{launcher.ts => launcher.tsx}  | 8 ++++----
 apps/client/src/widgets/launch_bar/BookmarkButtons.tsx    | 5 +++++
 .../client/src/widgets/launch_bar/RightDropdownButton.tsx | 3 +++
 apps/client/src/widgets/launch_bar/launch_bar_widget.ts   | 3 +++
 4 files changed, 15 insertions(+), 4 deletions(-)
 rename apps/client/src/widgets/containers/{launcher.ts => launcher.tsx} (94%)
 create mode 100644 apps/client/src/widgets/launch_bar/BookmarkButtons.tsx
 create mode 100644 apps/client/src/widgets/launch_bar/RightDropdownButton.tsx
 create mode 100644 apps/client/src/widgets/launch_bar/launch_bar_widget.ts

diff --git a/apps/client/src/widgets/containers/launcher.ts b/apps/client/src/widgets/containers/launcher.tsx
similarity index 94%
rename from apps/client/src/widgets/containers/launcher.ts
rename to apps/client/src/widgets/containers/launcher.tsx
index e1bfc5a8b..41d7fee9d 100644
--- a/apps/client/src/widgets/containers/launcher.ts
+++ b/apps/client/src/widgets/containers/launcher.tsx
@@ -1,9 +1,8 @@
 import CalendarWidget from "../buttons/calendar.js";
 import SpacerWidget from "../spacer.js";
-import BookmarkButtons from "../bookmark_buttons.js";
 import ProtectedSessionStatusWidget from "../buttons/protected_session_status.js";
 import SyncStatusWidget from "../sync_status.js";
-import BasicWidget from "../basic_widget.js";
+import BasicWidget, { wrapReactWidgets } from "../basic_widget.js";
 import NoteLauncher from "../buttons/launcher/note_launcher.js";
 import ScriptLauncher from "../buttons/launcher/script_launcher.js";
 import CommandButtonWidget from "../buttons/command_button.js";
@@ -14,6 +13,7 @@ import QuickSearchLauncherWidget from "../quick_search_launcher.js";
 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";
 
 interface InnerWidget extends BasicWidget {
     settings?: {
@@ -64,7 +64,7 @@ export default class LauncherWidget extends BasicWidget {
         } else if (launcherType === "customWidget") {
             widget = await this.initCustomWidget(note);
         } else if (launcherType === "builtinWidget") {
-            widget = this.initBuiltinWidget(note);
+            widget = wrapReactWidgets<BasicWidget>([ this.initBuiltinWidget(note) ])[0];
         } else {
             throw new Error(`Unrecognized launcher type '${launcherType}' for launcher '${note.noteId}' title '${note.title}'`);
         }
@@ -111,7 +111,7 @@ export default class LauncherWidget extends BasicWidget {
 
                 return new SpacerWidget(baseSize, growthFactor);
             case "bookmarks":
-                return new BookmarkButtons(this.isHorizontalLayout);
+                return <BookmarkButtons isHorizontalLayout={this.isHorizontalLayout} />
             case "protectedSession":
                 return new ProtectedSessionStatusWidget();
             case "syncStatus":
diff --git a/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx b/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx
new file mode 100644
index 000000000..4d6abec7d
--- /dev/null
+++ b/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx
@@ -0,0 +1,5 @@
+import type { LaunchBarWidgetProps } from "./launch_bar_widget";
+
+export default function BookmarkButtons({ }: LaunchBarWidgetProps) {
+    return <p>Bookmarks goes here.</p>;
+}
diff --git a/apps/client/src/widgets/launch_bar/RightDropdownButton.tsx b/apps/client/src/widgets/launch_bar/RightDropdownButton.tsx
new file mode 100644
index 000000000..e47b5624c
--- /dev/null
+++ b/apps/client/src/widgets/launch_bar/RightDropdownButton.tsx
@@ -0,0 +1,3 @@
+export default function RightDropdownButton() {
+    return <p>Button goes here.</p>;
+}
diff --git a/apps/client/src/widgets/launch_bar/launch_bar_widget.ts b/apps/client/src/widgets/launch_bar/launch_bar_widget.ts
new file mode 100644
index 000000000..36284797d
--- /dev/null
+++ b/apps/client/src/widgets/launch_bar/launch_bar_widget.ts
@@ -0,0 +1,3 @@
+export interface LaunchBarWidgetProps {
+    isHorizontalLayout: boolean;
+}

From 48cbb80e790b4032a53656ab12d2ed6ca621f389 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 4 Dec 2025 14:18:04 +0200
Subject: [PATCH 02/29] chore(react/launch_bar): port open_note_button_widget

---
 apps/client/src/services/utils.ts             |  2 +-
 apps/client/src/widgets/bookmark_buttons.ts   |  8 +--
 .../buttons/open_note_button_widget.ts        | 49 -------------
 .../widgets/launch_bar/BookmarkButtons.tsx    | 70 ++++++++++++++++++-
 .../client/src/widgets/react/ActionButton.tsx |  8 +--
 apps/client/src/widgets/react/hooks.tsx       | 13 ++++
 6 files changed, 87 insertions(+), 63 deletions(-)
 delete mode 100644 apps/client/src/widgets/buttons/open_note_button_widget.ts

diff --git a/apps/client/src/services/utils.ts b/apps/client/src/services/utils.ts
index 2045cd4d7..e6da60ae5 100644
--- a/apps/client/src/services/utils.ts
+++ b/apps/client/src/services/utils.ts
@@ -150,7 +150,7 @@ export function isMac() {
 
 export const hasTouchBar = (isMac() && isElectron());
 
-function isCtrlKey(evt: KeyboardEvent | MouseEvent | JQuery.ClickEvent | JQuery.ContextMenuEvent | JQuery.TriggeredEvent | React.PointerEvent<HTMLCanvasElement> | JQueryEventObject) {
+export function isCtrlKey(evt: KeyboardEvent | MouseEvent | JQuery.ClickEvent | JQuery.ContextMenuEvent | JQuery.TriggeredEvent | React.PointerEvent<HTMLCanvasElement> | JQueryEventObject) {
     return (!isMac() && evt.ctrlKey) || (isMac() && evt.metaKey);
 }
 
diff --git a/apps/client/src/widgets/bookmark_buttons.ts b/apps/client/src/widgets/bookmark_buttons.ts
index b32393c9a..88ff3c7e9 100644
--- a/apps/client/src/widgets/bookmark_buttons.ts
+++ b/apps/client/src/widgets/bookmark_buttons.ts
@@ -1,5 +1,4 @@
 import FlexContainer from "./containers/flex_container.js";
-import OpenNoteButtonWidget from "./buttons/open_note_button_widget.js";
 import BookmarkFolderWidget from "./buttons/bookmark_folder.js";
 import froca from "../services/froca.js";
 import utils from "../services/utils.js";
@@ -23,10 +22,6 @@ export default class BookmarkButtons extends FlexContainer<Component> {
     }
 
     async refresh(): Promise<void> {
-        this.$widget.empty();
-        this.children = [];
-        this.noteIds = [];
-
         const bookmarkParentNote = await froca.getNote("_lbBookmarks");
 
         if (!bookmarkParentNote) {
@@ -37,8 +32,7 @@ export default class BookmarkButtons extends FlexContainer<Component> {
             this.noteIds.push(note.noteId);
 
             let buttonWidget: OpenNoteButtonWidget | BookmarkFolderWidget = note.isLabelTruthy("bookmarkFolder")
-                ? new BookmarkFolderWidget(note)
-                : new OpenNoteButtonWidget(note).class("launcher-button");
+                ? new BookmarkFolderWidget(note);
 
             if (this.settings.titlePlacement) {
                 if (!("settings" in buttonWidget)) {
diff --git a/apps/client/src/widgets/buttons/open_note_button_widget.ts b/apps/client/src/widgets/buttons/open_note_button_widget.ts
deleted file mode 100644
index c0a4c6334..000000000
--- a/apps/client/src/widgets/buttons/open_note_button_widget.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import OnClickButtonWidget from "./onclick_button.js";
-import linkContextMenuService from "../../menus/link_context_menu.js";
-import utils from "../../services/utils.js";
-import appContext from "../../components/app_context.js";
-import type FNote from "../../entities/fnote.js";
-
-export default class OpenNoteButtonWidget extends OnClickButtonWidget {
-
-    private noteToOpen: FNote;
-
-    constructor(noteToOpen: FNote) {
-        super();
-
-        this.noteToOpen = noteToOpen;
-
-        this.title(() => utils.escapeHtml(this.noteToOpen.title))
-            .icon(() => this.noteToOpen.getIcon())
-            .onClick((widget, evt) => this.launch(evt))
-            .onAuxClick((widget, evt) => this.launch(evt))
-            .onContextMenu((evt) => {
-                if (evt) {
-                    linkContextMenuService.openContextMenu(this.noteToOpen.noteId, evt);
-                }
-            });
-    }
-
-    async launch(evt: JQuery.ClickEvent | JQuery.TriggeredEvent | JQuery.ContextMenuEvent) {
-        if (evt.which === 3) {
-            return;
-        }
-        const hoistedNoteId = this.getHoistedNoteId();
-        const ctrlKey = utils.isCtrlKey(evt);
-
-        if ((evt.which === 1 && ctrlKey) || evt.which === 2) {
-            const activate = evt.shiftKey ? true : false;
-            await appContext.tabManager.openInNewTab(this.noteToOpen.noteId, hoistedNoteId, activate);
-        } else {
-            await appContext.tabManager.openInSameTab(this.noteToOpen.noteId);
-        }
-    }
-
-    getHoistedNoteId() {
-        return this.noteToOpen.getRelationValue("hoistedNote") || appContext.tabManager.getActiveContext()?.hoistedNoteId;
-    }
-
-    initialRenderCompleteEvent() {
-        // we trigger refresh above
-    }
-}
diff --git a/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx b/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx
index 4d6abec7d..45941c699 100644
--- a/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx
+++ b/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx
@@ -1,5 +1,71 @@
+import { useMemo } from "preact/hooks";
 import type { LaunchBarWidgetProps } from "./launch_bar_widget";
+import { CSSProperties } from "preact";
+import type FNote from "../../entities/fnote";
+import { useChildNotes, useNoteLabel, useNoteProperty } from "../react/hooks";
+import Dropdown from "../react/Dropdown";
+import ActionButton from "../react/ActionButton";
+import appContext from "../../components/app_context";
+import { escapeHtml, isCtrlKey } from "../../services/utils";
+import link_context_menu from "../../menus/link_context_menu";
 
-export default function BookmarkButtons({ }: LaunchBarWidgetProps) {
-    return <p>Bookmarks goes here.</p>;
+const PARENT_NOTE_ID = "_lbBookmarks";
+
+export default function BookmarkButtons({ isHorizontalLayout }: LaunchBarWidgetProps) {
+    const style = useMemo<CSSProperties>(() => ({
+        display: "flex",
+        flexDirection: isHorizontalLayout ? "row" : "column",
+        contain: "none"
+    }), [ isHorizontalLayout ]);
+    const childNotes = useChildNotes(PARENT_NOTE_ID);
+
+    return (
+        <div style={style}>
+            {childNotes?.map(childNote => <SingleBookmark note={childNote} />)}
+        </div>
+    )
+}
+
+function SingleBookmark({ note }: { note: FNote }) {
+    return <OpenNoteButtonWidget note={note} />
+}
+
+function OpenNoteButtonWidget({ note }: { note: FNote }) {
+    const [ iconClass ] = useNoteLabel(note, "iconClass");
+    const title = useNoteProperty(note, "title");
+
+    async function launch(evt: MouseEvent) {
+        if (evt.which === 3) {
+            return;
+        }
+        const hoistedNoteId = getHoistedNoteId(note);
+        const ctrlKey = isCtrlKey(evt);
+
+        if ((evt.which === 1 && ctrlKey) || evt.which === 2) {
+            const activate = evt.shiftKey ? true : false;
+            await appContext.tabManager.openInNewTab(note.noteId, hoistedNoteId, activate);
+        } else {
+            await appContext.tabManager.openInSameTab(note.noteId);
+        }
+    }
+
+    return title && iconClass && (
+        <ActionButton
+            icon={iconClass}
+            text={escapeHtml(title)}
+            className="button-widget launcher-button"
+            noIconActionClass
+            titlePosition="right"
+            onClick={launch}
+            onAuxClick={launch}
+            onContextMenu={evt => {
+                evt.preventDefault();
+                link_context_menu.openContextMenu(note.noteId, evt);
+            }}
+        />
+    )
+}
+
+function getHoistedNoteId(noteToOpen: FNote) {
+    return noteToOpen.getRelationValue("hoistedNote") || appContext.tabManager.getActiveContext()?.hoistedNoteId;
 }
diff --git a/apps/client/src/widgets/react/ActionButton.tsx b/apps/client/src/widgets/react/ActionButton.tsx
index 28489005d..a37f34514 100644
--- a/apps/client/src/widgets/react/ActionButton.tsx
+++ b/apps/client/src/widgets/react/ActionButton.tsx
@@ -2,13 +2,13 @@ import { useEffect, useRef, useState } from "preact/hooks";
 import { CommandNames } from "../../components/app_context";
 import { useStaticTooltip } from "./hooks";
 import keyboard_actions from "../../services/keyboard_actions";
+import { HTMLAttributes } from "preact";
 
-export interface ActionButtonProps {
+export interface ActionButtonProps extends Pick<HTMLAttributes<HTMLButtonElement>, "onClick" | "onAuxClick" | "onContextMenu"> {
     text: string;
     titlePosition?: "top" | "right" | "bottom" | "left";
     icon: string;
     className?: string;
-    onClick?: (e: MouseEvent) => void;
     triggerCommand?: CommandNames;
     noIconActionClass?: boolean;
     frame?: boolean;
@@ -16,7 +16,7 @@ export interface ActionButtonProps {
     disabled?: boolean;
 }
 
-export default function ActionButton({ text, icon, className, onClick, triggerCommand, titlePosition, noIconActionClass, frame, active, disabled }: ActionButtonProps) {
+export default function ActionButton({ text, icon, className, triggerCommand, titlePosition, noIconActionClass, frame, active, disabled, ...restProps }: ActionButtonProps) {
     const buttonRef = useRef<HTMLButtonElement>(null);
     const [ keyboardShortcut, setKeyboardShortcut ] = useState<string[]>();
 
@@ -35,8 +35,8 @@ export default function ActionButton({ text, icon, className, onClick, triggerCo
     return <button
         ref={buttonRef}
         class={`${className ?? ""} ${!noIconActionClass ? "icon-action" : "btn"} ${icon} ${frame ? "btn btn-primary" : ""} ${disabled ? "disabled" : ""} ${active ? "active" : ""}`}
-        onClick={onClick}
         data-trigger-command={triggerCommand}
         disabled={disabled}
+        {...restProps}
     />;
 }
diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx
index b14e079e7..c602802d5 100644
--- a/apps/client/src/widgets/react/hooks.tsx
+++ b/apps/client/src/widgets/react/hooks.tsx
@@ -23,6 +23,7 @@ import toast, { ToastOptions } from "../../services/toast";
 import utils, { escapeRegExp, reloadFrontendApp } from "../../services/utils";
 import server from "../../services/server";
 import { removeIndividualBinding } from "../../services/shortcuts";
+import froca from "../../services/froca";
 
 export function useTriliumEvent<T extends EventNames>(eventName: T, handler: (data: EventData<T>) => void) {
     const parentComponent = useContext(ParentComponent);
@@ -836,3 +837,15 @@ async function isNoteReadOnly(note: FNote, noteContext: NoteContext) {
 
     return true;
 }
+
+export function useChildNotes(parentNoteId: string) {
+    const [ childNotes, setChildNotes ] = useState<FNote[]>([]);
+    async function refreshChildNotes() {
+        const parentNote = await froca.getNote(parentNoteId);
+        const childNotes = await parentNote?.getChildNotes();
+        setChildNotes(childNotes ?? []);
+    }
+    useEffect(() => { refreshChildNotes() }, [ parentNoteId ]);
+
+    return childNotes;
+}

From cdab86bd835021f8185ee011f26d6b366e29211e Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 4 Dec 2025 14:41:07 +0200
Subject: [PATCH 03/29] chore(react/launch_bar): port bookmark_folder

---
 apps/client/src/widgets/bookmark_buttons.ts   |  8 --
 .../src/widgets/buttons/bookmark_folder.ts    | 88 -------------------
 .../widgets/launch_bar/BookmarkButtons.css    | 31 +++++++
 .../widgets/launch_bar/BookmarkButtons.tsx    | 43 ++++++++-
 apps/client/src/widgets/react/NoteLink.tsx    |  5 +-
 packages/commons/src/lib/attribute_names.ts   |  3 +
 6 files changed, 77 insertions(+), 101 deletions(-)
 delete mode 100644 apps/client/src/widgets/buttons/bookmark_folder.ts
 create mode 100644 apps/client/src/widgets/launch_bar/BookmarkButtons.css

diff --git a/apps/client/src/widgets/bookmark_buttons.ts b/apps/client/src/widgets/bookmark_buttons.ts
index 88ff3c7e9..ef6cb97a1 100644
--- a/apps/client/src/widgets/bookmark_buttons.ts
+++ b/apps/client/src/widgets/bookmark_buttons.ts
@@ -34,14 +34,6 @@ export default class BookmarkButtons extends FlexContainer<Component> {
             let buttonWidget: OpenNoteButtonWidget | BookmarkFolderWidget = note.isLabelTruthy("bookmarkFolder")
                 ? new BookmarkFolderWidget(note);
 
-            if (this.settings.titlePlacement) {
-                if (!("settings" in buttonWidget)) {
-                    (buttonWidget as any).settings = {};
-                }
-
-                (buttonWidget as any).settings.titlePlacement = this.settings.titlePlacement;
-            }
-
             this.child(buttonWidget);
 
             this.$widget.append(buttonWidget.render());
diff --git a/apps/client/src/widgets/buttons/bookmark_folder.ts b/apps/client/src/widgets/buttons/bookmark_folder.ts
deleted file mode 100644
index b749a1ab6..000000000
--- a/apps/client/src/widgets/buttons/bookmark_folder.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import RightDropdownButtonWidget from "./right_dropdown_button.js";
-import linkService from "../../services/link.js";
-import utils from "../../services/utils.js";
-import type FNote from "../../entities/fnote.js";
-
-const DROPDOWN_TPL = `
-<div class="bookmark-folder-widget">
-    <style>
-        .bookmark-folder-widget {
-            min-width: 400px;
-            max-height: 500px;
-            padding: 7px 15px 0 15px;
-            font-size: 1.2rem;
-            overflow: auto;
-        }
-
-        .bookmark-folder-widget ul {
-            padding: 0;
-            list-style-type: none;
-        }
-
-        .bookmark-folder-widget .note-link {
-            display: block;
-            padding: 5px 10px 5px 5px;
-        }
-
-        .bookmark-folder-widget .note-link:hover {
-            background-color: var(--accented-background-color);
-            text-decoration: none;
-        }
-
-        .dropdown-menu .bookmark-folder-widget a:hover {
-            text-decoration: none;
-            background: transparent !important;
-        }
-
-        .bookmark-folder-widget li .note-link {
-            padding-inline-start: 35px;
-        }
-    </style>
-
-    <div class="parent-note"></div>
-
-    <ul class="children-notes"></ul>
-</div>`;
-
-interface LinkOptions {
-    showTooltip: boolean;
-    showNoteIcon: boolean;
-}
-
-export default class BookmarkFolderWidget extends RightDropdownButtonWidget {
-    private note: FNote;
-    private $parentNote!: JQuery<HTMLElement>;
-    private $childrenNotes!: JQuery<HTMLElement>;
-    declare $dropdownContent: JQuery<HTMLElement>;
-
-    constructor(note: FNote) {
-        super(utils.escapeHtml(note.title), note.getIcon(), DROPDOWN_TPL);
-
-        this.note = note;
-    }
-
-    doRender(): void {
-        super.doRender();
-
-        this.$parentNote = this.$dropdownContent.find(".parent-note");
-        this.$childrenNotes = this.$dropdownContent.find(".children-notes");
-    }
-
-    async dropdownShown(): Promise<void> {
-        this.$parentNote.empty();
-        this.$childrenNotes.empty();
-
-        const linkOptions: LinkOptions = {
-            showTooltip: false,
-            showNoteIcon: true
-        };
-
-        this.$parentNote.append((await linkService.createLink(this.note.noteId, linkOptions)).addClass("note-link"));
-
-        for (const childNote of await this.note.getChildNotes()) {
-            this.$childrenNotes.append($("<li>").append((await linkService.createLink(childNote.noteId, linkOptions)).addClass("note-link")));
-        }
-    }
-
-    refreshIcon(): void {}
-}
diff --git a/apps/client/src/widgets/launch_bar/BookmarkButtons.css b/apps/client/src/widgets/launch_bar/BookmarkButtons.css
new file mode 100644
index 000000000..b38ba59c0
--- /dev/null
+++ b/apps/client/src/widgets/launch_bar/BookmarkButtons.css
@@ -0,0 +1,31 @@
+.bookmark-folder-widget {
+    min-width: 400px;
+    max-height: 500px;
+    padding: 7px 15px 0 15px;
+    font-size: 1.2rem;
+    overflow: auto;
+}
+
+.bookmark-folder-widget ul {
+    padding: 0;
+    list-style-type: none;
+}
+
+.bookmark-folder-widget .note-link {
+    display: block;
+    padding: 5px 10px 5px 5px;
+}
+
+.bookmark-folder-widget .note-link:hover {
+    background-color: var(--accented-background-color);
+    text-decoration: none;
+}
+
+.dropdown-menu .bookmark-folder-widget a:hover:not(.disabled) {
+    text-decoration: none;
+    background-color: transparent !important;
+}
+
+.bookmark-folder-widget li .note-link {
+    padding-inline-start: 35px;
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx b/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx
index 45941c699..493031877 100644
--- a/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx
+++ b/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx
@@ -2,12 +2,16 @@ import { useMemo } from "preact/hooks";
 import type { LaunchBarWidgetProps } from "./launch_bar_widget";
 import { CSSProperties } from "preact";
 import type FNote from "../../entities/fnote";
-import { useChildNotes, useNoteLabel, useNoteProperty } from "../react/hooks";
-import Dropdown from "../react/Dropdown";
+import { useChildNotes, useNoteLabel, useNoteLabelBoolean, useNoteProperty } from "../react/hooks";
 import ActionButton from "../react/ActionButton";
 import appContext from "../../components/app_context";
 import { escapeHtml, isCtrlKey } from "../../services/utils";
 import link_context_menu from "../../menus/link_context_menu";
+import "./BookmarkButtons.css";
+import Dropdown from "../react/Dropdown";
+import Icon from "../react/Icon";
+import NoteList from "../react/NoteList";
+import NoteLink from "../react/NoteLink";
 
 const PARENT_NOTE_ID = "_lbBookmarks";
 
@@ -27,7 +31,10 @@ export default function BookmarkButtons({ isHorizontalLayout }: LaunchBarWidgetP
 }
 
 function SingleBookmark({ note }: { note: FNote }) {
-    return <OpenNoteButtonWidget note={note} />
+    const [ bookmarkFolder ] = useNoteLabelBoolean(note, "bookmarkFolder");
+    return bookmarkFolder
+        ? <BookmarkFolder note={note} />
+        : <OpenNoteButtonWidget note={note} />
 }
 
 function OpenNoteButtonWidget({ note }: { note: FNote }) {
@@ -66,6 +73,36 @@ function OpenNoteButtonWidget({ note }: { note: FNote }) {
     )
 }
 
+function BookmarkFolder({ note }: { note: FNote }) {
+    const [ iconClass ] = useNoteLabel(note, "iconClass");
+    const title = useNoteProperty(note, "title");
+    const childNotes = useChildNotes(note.noteId);
+
+    return title && iconClass && (
+        <Dropdown
+            className="right-dropdown-widget"
+            buttonClassName="right-dropdown-button launcher-button"
+            hideToggleArrow
+            title={escapeHtml(title)}
+            text={<Icon icon={iconClass} />}
+        >
+            <div className="bookmark-folder-widget">
+                <div className="parent-note">
+                    <NoteLink notePath={note.noteId} noPreview showNoteIcon containerClassName="note-link" noTnLink />
+                </div>
+
+                <ul className="children-notes">
+                    {childNotes.map(childNote => (
+                        <li>
+                            <NoteLink notePath={childNote.noteId} noPreview showNoteIcon containerClassName="note-link" noTnLink />
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </Dropdown>
+    )
+}
+
 function getHoistedNoteId(noteToOpen: FNote) {
     return noteToOpen.getRelationValue("hoistedNote") || appContext.tabManager.getActiveContext()?.hoistedNoteId;
 }
diff --git a/apps/client/src/widgets/react/NoteLink.tsx b/apps/client/src/widgets/react/NoteLink.tsx
index 758122ed0..c8bcc5065 100644
--- a/apps/client/src/widgets/react/NoteLink.tsx
+++ b/apps/client/src/widgets/react/NoteLink.tsx
@@ -4,6 +4,7 @@ import { useImperativeSearchHighlighlighting, useTriliumEvent } from "./hooks";
 
 interface NoteLinkOpts {
     className?: string;
+    containerClassName?: string;
     notePath: string | string[];
     showNotePath?: boolean;
     showNoteIcon?: boolean;
@@ -17,7 +18,7 @@ interface NoteLinkOpts {
     noContextMenu?: boolean;
 }
 
-export default function NoteLink({ className, notePath, showNotePath, showNoteIcon, style, noPreview, noTnLink, highlightedTokens, title, viewScope, noContextMenu }: NoteLinkOpts) {
+export default function NoteLink({ className, containerClassName, notePath, showNotePath, showNoteIcon, style, noPreview, noTnLink, highlightedTokens, title, viewScope, noContextMenu }: NoteLinkOpts) {
     const stringifiedNotePath = Array.isArray(notePath) ? notePath.join("/") : notePath;
     const noteId = stringifiedNotePath.split("/").at(-1);
     const ref = useRef<HTMLSpanElement>(null);
@@ -71,6 +72,6 @@ export default function NoteLink({ className, notePath, showNotePath, showNoteIc
         $linkEl?.addClass(className);
     }
 
-    return <span ref={ref} />
+    return <span className={containerClassName} ref={ref} />
 
 }
diff --git a/packages/commons/src/lib/attribute_names.ts b/packages/commons/src/lib/attribute_names.ts
index 767f05872..8b3ec3f37 100644
--- a/packages/commons/src/lib/attribute_names.ts
+++ b/packages/commons/src/lib/attribute_names.ts
@@ -24,6 +24,9 @@ type Labels = {
     orderBy: string;
     orderDirection: string;
 
+    // Launch bar
+    bookmarkFolder: boolean;
+
     // Collection-specific
     viewType: string;
     status: string;

From a83f20e454feaff45d5be9209bed78459bd5259b Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 4 Dec 2025 14:46:23 +0200
Subject: [PATCH 04/29] refactor(react/launch_bar): extract dropdown & button
 style

---
 .../widgets/launch_bar/BookmarkButtons.tsx    | 17 +++--------
 .../widgets/launch_bar/launch_bar_widget.ts   |  3 --
 .../widgets/launch_bar/launch_bar_widgets.tsx | 28 +++++++++++++++++++
 3 files changed, 32 insertions(+), 16 deletions(-)
 delete mode 100644 apps/client/src/widgets/launch_bar/launch_bar_widget.ts
 create mode 100644 apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx

diff --git a/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx b/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx
index 493031877..ec9982b67 100644
--- a/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx
+++ b/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx
@@ -1,16 +1,13 @@
 import { useMemo } from "preact/hooks";
-import type { LaunchBarWidgetProps } from "./launch_bar_widget";
+import { LaunchBarActionButton, LaunchBarDropdownButton, type LaunchBarWidgetProps } from "./launch_bar_widgets";
 import { CSSProperties } from "preact";
 import type FNote from "../../entities/fnote";
 import { useChildNotes, useNoteLabel, useNoteLabelBoolean, useNoteProperty } from "../react/hooks";
-import ActionButton from "../react/ActionButton";
 import appContext from "../../components/app_context";
 import { escapeHtml, isCtrlKey } from "../../services/utils";
 import link_context_menu from "../../menus/link_context_menu";
 import "./BookmarkButtons.css";
-import Dropdown from "../react/Dropdown";
 import Icon from "../react/Icon";
-import NoteList from "../react/NoteList";
 import NoteLink from "../react/NoteLink";
 
 const PARENT_NOTE_ID = "_lbBookmarks";
@@ -57,12 +54,9 @@ function OpenNoteButtonWidget({ note }: { note: FNote }) {
     }
 
     return title && iconClass && (
-        <ActionButton
+        <LaunchBarActionButton
             icon={iconClass}
             text={escapeHtml(title)}
-            className="button-widget launcher-button"
-            noIconActionClass
-            titlePosition="right"
             onClick={launch}
             onAuxClick={launch}
             onContextMenu={evt => {
@@ -79,10 +73,7 @@ function BookmarkFolder({ note }: { note: FNote }) {
     const childNotes = useChildNotes(note.noteId);
 
     return title && iconClass && (
-        <Dropdown
-            className="right-dropdown-widget"
-            buttonClassName="right-dropdown-button launcher-button"
-            hideToggleArrow
+        <LaunchBarDropdownButton
             title={escapeHtml(title)}
             text={<Icon icon={iconClass} />}
         >
@@ -99,7 +90,7 @@ function BookmarkFolder({ note }: { note: FNote }) {
                     ))}
                 </ul>
             </div>
-        </Dropdown>
+        </LaunchBarDropdownButton>
     )
 }
 
diff --git a/apps/client/src/widgets/launch_bar/launch_bar_widget.ts b/apps/client/src/widgets/launch_bar/launch_bar_widget.ts
deleted file mode 100644
index 36284797d..000000000
--- a/apps/client/src/widgets/launch_bar/launch_bar_widget.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export interface LaunchBarWidgetProps {
-    isHorizontalLayout: boolean;
-}
diff --git a/apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx b/apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx
new file mode 100644
index 000000000..d00937baf
--- /dev/null
+++ b/apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx
@@ -0,0 +1,28 @@
+import ActionButton, { ActionButtonProps } from "../react/ActionButton";
+import Dropdown, { DropdownProps } from "../react/Dropdown";
+
+export interface LaunchBarWidgetProps {
+    isHorizontalLayout: boolean;
+}
+
+export function LaunchBarActionButton(props: Omit<ActionButtonProps, "className" | "noIconActionClass" | "titlePosition">) {
+    return (
+        <ActionButton
+            className="button-widget launcher-button"
+            noIconActionClass
+            titlePosition="right"
+            {...props}
+        />
+    )
+}
+
+export function LaunchBarDropdownButton({ children, ...props }: Pick<DropdownProps, "title" | "text" | "children">) {
+    return (
+        <Dropdown
+            className="right-dropdown-widget"
+            buttonClassName="right-dropdown-button launcher-button"
+            hideToggleArrow
+            {...props}
+        >{children}</Dropdown>
+    )
+}

From 5f54e42a43d507a1bb01a2237cbd9a47743ed3ae Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 4 Dec 2025 14:47:24 +0200
Subject: [PATCH 05/29] refactor(react/launch_bar): extract icon class

---
 apps/client/src/widgets/launch_bar/BookmarkButtons.tsx    | 3 +--
 apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx | 4 +++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx b/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx
index ec9982b67..4c0df90e6 100644
--- a/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx
+++ b/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx
@@ -7,7 +7,6 @@ import appContext from "../../components/app_context";
 import { escapeHtml, isCtrlKey } from "../../services/utils";
 import link_context_menu from "../../menus/link_context_menu";
 import "./BookmarkButtons.css";
-import Icon from "../react/Icon";
 import NoteLink from "../react/NoteLink";
 
 const PARENT_NOTE_ID = "_lbBookmarks";
@@ -74,8 +73,8 @@ function BookmarkFolder({ note }: { note: FNote }) {
 
     return title && iconClass && (
         <LaunchBarDropdownButton
+            icon={iconClass}
             title={escapeHtml(title)}
-            text={<Icon icon={iconClass} />}
         >
             <div className="bookmark-folder-widget">
                 <div className="parent-note">
diff --git a/apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx b/apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx
index d00937baf..1ea64a852 100644
--- a/apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx
+++ b/apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx
@@ -1,5 +1,6 @@
 import ActionButton, { ActionButtonProps } from "../react/ActionButton";
 import Dropdown, { DropdownProps } from "../react/Dropdown";
+import Icon from "../react/Icon";
 
 export interface LaunchBarWidgetProps {
     isHorizontalLayout: boolean;
@@ -16,12 +17,13 @@ export function LaunchBarActionButton(props: Omit<ActionButtonProps, "className"
     )
 }
 
-export function LaunchBarDropdownButton({ children, ...props }: Pick<DropdownProps, "title" | "text" | "children">) {
+export function LaunchBarDropdownButton({ children, icon, ...props }: Pick<DropdownProps, "title" | "children"> & { icon: string }) {
     return (
         <Dropdown
             className="right-dropdown-widget"
             buttonClassName="right-dropdown-button launcher-button"
             hideToggleArrow
+            text={<Icon icon={icon} />}
             {...props}
         >{children}</Dropdown>
     )

From 5b310f3e46e18071bef89ae7cf5cba17c7cd6ae8 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 4 Dec 2025 15:02:46 +0200
Subject: [PATCH 06/29] refactor(react/launch_bar): port spacer

---
 apps/client/src/layouts/desktop_layout.tsx    |  5 +--
 .../src/widgets/containers/launcher.tsx       |  4 +-
 .../src/widgets/launch_bar/SpacerWidget.tsx   | 35 +++++++++++++++
 apps/client/src/widgets/spacer.ts             | 43 -------------------
 4 files changed, 39 insertions(+), 48 deletions(-)
 create mode 100644 apps/client/src/widgets/launch_bar/SpacerWidget.tsx
 delete mode 100644 apps/client/src/widgets/spacer.ts

diff --git a/apps/client/src/layouts/desktop_layout.tsx b/apps/client/src/layouts/desktop_layout.tsx
index 3128581a9..479a163f2 100644
--- a/apps/client/src/layouts/desktop_layout.tsx
+++ b/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 />)
diff --git a/apps/client/src/widgets/containers/launcher.tsx b/apps/client/src/widgets/containers/launcher.tsx
index 41d7fee9d..4ae82bbcd 100644
--- a/apps/client/src/widgets/containers/launcher.tsx
+++ b/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":
diff --git a/apps/client/src/widgets/launch_bar/SpacerWidget.tsx b/apps/client/src/widgets/launch_bar/SpacerWidget.tsx
new file mode 100644
index 000000000..5f89369c2
--- /dev/null
+++ b/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);
+                        }
+                    }
+                });
+            }}
+        />
+    )
+}
diff --git a/apps/client/src/widgets/spacer.ts b/apps/client/src/widgets/spacer.ts
deleted file mode 100644
index bb50e90d2..000000000
--- a/apps/client/src/widgets/spacer.ts
+++ /dev/null
@@ -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
-        });
-    }
-}

From 8efb849391be5890e2db70d75894022141b82b81 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 4 Dec 2025 15:44:10 +0200
Subject: [PATCH 07/29] refactor(react/launch_bar): port history navigation

---
 .../src/widgets/buttons/button_from_note.ts   | 63 -------------
 .../src/widgets/buttons/history_navigation.ts | 90 -------------------
 .../src/widgets/containers/launcher.tsx       |  6 +-
 .../widgets/launch_bar/HistoryNavigation.tsx  | 86 ++++++++++++++++++
 4 files changed, 89 insertions(+), 156 deletions(-)
 delete mode 100644 apps/client/src/widgets/buttons/button_from_note.ts
 delete mode 100644 apps/client/src/widgets/buttons/history_navigation.ts
 create mode 100644 apps/client/src/widgets/launch_bar/HistoryNavigation.tsx

diff --git a/apps/client/src/widgets/buttons/button_from_note.ts b/apps/client/src/widgets/buttons/button_from_note.ts
deleted file mode 100644
index 64e680257..000000000
--- a/apps/client/src/widgets/buttons/button_from_note.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import froca from "../../services/froca.js";
-import attributeService from "../../services/attributes.js";
-import CommandButtonWidget from "./command_button.js";
-import type { EventData } from "../../components/app_context.js";
-
-export type ButtonNoteIdProvider = () => string;
-
-export default class ButtonFromNoteWidget extends CommandButtonWidget {
-
-    constructor() {
-        super();
-
-        this.settings.buttonNoteIdProvider = null;
-    }
-
-    buttonNoteIdProvider(provider: ButtonNoteIdProvider) {
-        this.settings.buttonNoteIdProvider = provider;
-        return this;
-    }
-
-    doRender() {
-        super.doRender();
-
-        this.updateIcon();
-    }
-
-    updateIcon() {
-        if (!this.settings.buttonNoteIdProvider) {
-            console.error(`buttonNoteId for '${this.componentId}' is not defined.`);
-            return;
-        }
-
-        const buttonNoteId = this.settings.buttonNoteIdProvider();
-
-        if (!buttonNoteId) {
-            console.error(`buttonNoteId for '${this.componentId}' is not defined.`);
-            return;
-        }
-
-        froca.getNote(buttonNoteId).then((note) => {
-            const icon = note?.getIcon();
-            if (icon) {
-                this.settings.icon = icon;
-            }
-
-            this.refreshIcon();
-        });
-    }
-
-    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        // TODO: this seems incorrect
-        //@ts-ignore
-        const buttonNote = froca.getNoteFromCache(this.buttonNoteIdProvider());
-
-        if (!buttonNote) {
-            return;
-        }
-
-        if (loadResults.getAttributeRows(this.componentId).find((attr) => attr.type === "label" && attr.name === "iconClass" && attributeService.isAffecting(attr, buttonNote))) {
-            this.updateIcon();
-        }
-    }
-}
diff --git a/apps/client/src/widgets/buttons/history_navigation.ts b/apps/client/src/widgets/buttons/history_navigation.ts
deleted file mode 100644
index 74eaf6acc..000000000
--- a/apps/client/src/widgets/buttons/history_navigation.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import utils from "../../services/utils.js";
-import contextMenu, { MenuCommandItem } from "../../menus/context_menu.js";
-import treeService from "../../services/tree.js";
-import ButtonFromNoteWidget from "./button_from_note.js";
-import type FNote from "../../entities/fnote.js";
-import type { CommandNames } from "../../components/app_context.js";
-import type { WebContents } from "electron";
-import link from "../../services/link.js";
-
-export default class HistoryNavigationButton extends ButtonFromNoteWidget {
-    private webContents?: WebContents;
-
-    constructor(launcherNote: FNote, command: string) {
-        super();
-
-        this.title(() => launcherNote.title)
-            .icon(() => launcherNote.getIcon())
-            .command(() => command as CommandNames)
-            .titlePlacement("right")
-            .buttonNoteIdProvider(() => launcherNote.noteId)
-            .onContextMenu((e) => { if (e) this.showContextMenu(e); })
-            .class("launcher-button");
-    }
-
-    doRender() {
-        super.doRender();
-
-        if (utils.isElectron()) {
-            this.webContents = utils.dynamicRequire("@electron/remote").getCurrentWebContents();
-
-            // without this, the history is preserved across frontend reloads
-            this.webContents?.clearHistory();
-
-            this.refresh();
-        }
-    }
-
-    async showContextMenu(e: JQuery.ContextMenuEvent) {
-        e.preventDefault();
-
-        if (!this.webContents || this.webContents.navigationHistory.length() < 2) {
-            return;
-        }
-
-        let items: MenuCommandItem<string>[] = [];
-
-        const history = this.webContents.navigationHistory.getAllEntries();
-        const activeIndex = this.webContents.navigationHistory.getActiveIndex();
-
-        for (const idx in history) {
-            const { notePath } = link.parseNavigationStateFromUrl(history[idx].url);
-            if (!notePath) continue;
-
-            const title = await treeService.getNotePathTitle(notePath);
-
-            items.push({
-                title,
-                command: idx,
-                uiIcon:
-                    parseInt(idx) === activeIndex
-                        ? "bx bx-radio-circle-marked" // compare with type coercion!
-                        : parseInt(idx) < activeIndex
-                          ? "bx bx-left-arrow-alt"
-                          : "bx bx-right-arrow-alt"
-            });
-        }
-
-        items.reverse();
-
-        if (items.length > 20) {
-            items = items.slice(0, 50);
-        }
-
-        contextMenu.show({
-            x: e.pageX,
-            y: e.pageY,
-            items,
-            selectMenuItemHandler: (item: MenuCommandItem<string>) => {
-                if (item && item.command && this.webContents) {
-                    const idx = parseInt(item.command, 10);
-                    this.webContents.navigationHistory.goToIndex(idx);
-                }
-            }
-        });
-    }
-
-    activeNoteChangedEvent() {
-        this.refresh();
-    }
-}
diff --git a/apps/client/src/widgets/containers/launcher.tsx b/apps/client/src/widgets/containers/launcher.tsx
index 4ae82bbcd..fbc40fe2c 100644
--- a/apps/client/src/widgets/containers/launcher.tsx
+++ b/apps/client/src/widgets/containers/launcher.tsx
@@ -7,13 +7,13 @@ import ScriptLauncher from "../buttons/launcher/script_launcher.js";
 import CommandButtonWidget from "../buttons/command_button.js";
 import utils from "../../services/utils.js";
 import TodayLauncher from "../buttons/launcher/today_launcher.js";
-import HistoryNavigationButton from "../buttons/history_navigation.js";
 import QuickSearchLauncherWidget from "../quick_search_launcher.js";
 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";
+import HistoryNavigationButton from "../launch_bar/HistoryNavigation.jsx";
 
 interface InnerWidget extends BasicWidget {
     settings?: {
@@ -117,9 +117,9 @@ export default class LauncherWidget extends BasicWidget {
             case "syncStatus":
                 return new SyncStatusWidget();
             case "backInHistoryButton":
-                return new HistoryNavigationButton(note, "backInNoteHistory");
+                return <HistoryNavigationButton launcherNote={note} command="backInNoteHistory" />
             case "forwardInHistoryButton":
-                return new HistoryNavigationButton(note, "forwardInNoteHistory");
+                return <HistoryNavigationButton launcherNote={note} command="forwardInNoteHistory" />
             case "todayInJournal":
                 return new TodayLauncher(note);
             case "quickSearch":
diff --git a/apps/client/src/widgets/launch_bar/HistoryNavigation.tsx b/apps/client/src/widgets/launch_bar/HistoryNavigation.tsx
new file mode 100644
index 000000000..0b5ba4b45
--- /dev/null
+++ b/apps/client/src/widgets/launch_bar/HistoryNavigation.tsx
@@ -0,0 +1,86 @@
+import { useEffect, useRef } from "preact/hooks";
+import FNote from "../../entities/fnote";
+import { dynamicRequire, escapeHtml, isElectron } from "../../services/utils";
+import { useNoteLabel, useNoteProperty } from "../react/hooks";
+import { LaunchBarActionButton } from "./launch_bar_widgets";
+import type { WebContents } from "electron";
+import contextMenu, { MenuCommandItem } from "../../menus/context_menu";
+import tree from "../../services/tree";
+import link from "../../services/link";
+
+interface HistoryNavigationProps {
+    launcherNote: FNote;
+    command: "backInNoteHistory" | "forwardInNoteHistory";
+}
+
+export default function HistoryNavigationButton({ launcherNote, command }: HistoryNavigationProps) {
+    const [ iconClass ] = useNoteLabel(launcherNote, "iconClass");
+    const title = useNoteProperty(launcherNote, "title");
+    const webContentsRef = useRef<WebContents>(null);
+
+    useEffect(() => {
+        if (isElectron()) {
+            const webContents = dynamicRequire("@electron/remote").getCurrentWebContents();
+            // without this, the history is preserved across frontend reloads
+            webContents?.clearHistory();
+            webContentsRef.current = webContents;
+        }
+    }, []);
+
+    return iconClass && title && (
+        <LaunchBarActionButton
+            icon={iconClass}
+            text={escapeHtml(title)}
+            triggerCommand={command}
+            onContextMenu={async (e) => {
+                e.preventDefault();
+
+                const webContents = webContentsRef.current;
+                if (!webContents || webContents.navigationHistory.length() < 2) {
+                    return;
+                }
+
+                let items: MenuCommandItem<string>[] = [];
+
+                const history = webContents.navigationHistory.getAllEntries();
+                const activeIndex = webContents.navigationHistory.getActiveIndex();
+
+                for (const idx in history) {
+                    const { notePath } = link.parseNavigationStateFromUrl(history[idx].url);
+                    if (!notePath) continue;
+
+                    const title = await tree.getNotePathTitle(notePath);
+
+                    items.push({
+                        title,
+                        command: idx,
+                        uiIcon:
+                            parseInt(idx) === activeIndex
+                                ? "bx bx-radio-circle-marked" // compare with type coercion!
+                                : parseInt(idx) < activeIndex
+                                ? "bx bx-left-arrow-alt"
+                                : "bx bx-right-arrow-alt"
+                    });
+                }
+
+                items.reverse();
+
+                if (items.length > 20) {
+                    items = items.slice(0, 50);
+                }
+
+                contextMenu.show({
+                    x: e.pageX,
+                    y: e.pageY,
+                    items,
+                    selectMenuItemHandler: (item: MenuCommandItem<string>) => {
+                        if (item && item.command && webContents) {
+                            const idx = parseInt(item.command, 10);
+                            webContents.navigationHistory.goToIndex(idx);
+                        }
+                    }
+                });
+            }}
+        />
+    )
+}

From 991f07e1485323276c634a93b104eab2712aa711 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 4 Dec 2025 15:47:42 +0200
Subject: [PATCH 08/29] refactor(react/launch_bar): port ai chat button

---
 .../src/widgets/buttons/ai_chat_button.ts     | 26 -------------------
 .../src/widgets/containers/launcher.tsx       |  4 +--
 .../src/widgets/launch_bar/AiChatButton.tsx   | 18 +++++++++++++
 3 files changed, 20 insertions(+), 28 deletions(-)
 delete mode 100644 apps/client/src/widgets/buttons/ai_chat_button.ts
 create mode 100644 apps/client/src/widgets/launch_bar/AiChatButton.tsx

diff --git a/apps/client/src/widgets/buttons/ai_chat_button.ts b/apps/client/src/widgets/buttons/ai_chat_button.ts
deleted file mode 100644
index 5ad3f8033..000000000
--- a/apps/client/src/widgets/buttons/ai_chat_button.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { EventData } from "../../components/app_context.js";
-import type FNote from "../../entities/fnote.js";
-import options from "../../services/options.js";
-import CommandButtonWidget from "./command_button.js";
-
-export default class AiChatButton extends CommandButtonWidget {
-
-    constructor(note: FNote) {
-        super();
-
-        this.command("createAiChat")
-            .title(() => note.title)
-            .icon(() => note.getIcon())
-            .class("launcher-button");
-    }
-
-    isEnabled() {
-        return options.get("aiEnabled") === "true";
-    }
-
-    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (loadResults.isOptionReloaded("aiEnabled")) {
-            this.refresh();
-        }
-    }
-}
diff --git a/apps/client/src/widgets/containers/launcher.tsx b/apps/client/src/widgets/containers/launcher.tsx
index fbc40fe2c..19a46fbf0 100644
--- a/apps/client/src/widgets/containers/launcher.tsx
+++ b/apps/client/src/widgets/containers/launcher.tsx
@@ -10,10 +10,10 @@ import TodayLauncher from "../buttons/launcher/today_launcher.js";
 import QuickSearchLauncherWidget from "../quick_search_launcher.js";
 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";
 import HistoryNavigationButton from "../launch_bar/HistoryNavigation.jsx";
+import AiChatButton from "../launch_bar/AiChatButton.jsx";
 
 interface InnerWidget extends BasicWidget {
     settings?: {
@@ -125,7 +125,7 @@ export default class LauncherWidget extends BasicWidget {
             case "quickSearch":
                 return new QuickSearchLauncherWidget(this.isHorizontalLayout);
             case "aiChatLauncher":
-                return new AiChatButton(note);
+                return <AiChatButton launcherNote={note} />
             default:
                 throw new Error(`Unrecognized builtin widget ${builtinWidget} for launcher ${note.noteId} "${note.title}"`);
         }
diff --git a/apps/client/src/widgets/launch_bar/AiChatButton.tsx b/apps/client/src/widgets/launch_bar/AiChatButton.tsx
new file mode 100644
index 000000000..2ca95069a
--- /dev/null
+++ b/apps/client/src/widgets/launch_bar/AiChatButton.tsx
@@ -0,0 +1,18 @@
+import FNote from "../../entities/fnote";
+import { escapeHtml } from "../../services/utils";
+import { useNoteLabel, useNoteProperty, useTriliumOptionBool } from "../react/hooks";
+import { LaunchBarActionButton } from "./launch_bar_widgets";
+
+export default function AiChatButton({ launcherNote }: { launcherNote: FNote }) {
+    const [ aiEnabled ] = useTriliumOptionBool("aiEnabled");
+    const [ iconClass ] = useNoteLabel(launcherNote, "iconClass");
+    const title = useNoteProperty(launcherNote, "title");
+
+    return aiEnabled && iconClass && title && (
+        <LaunchBarActionButton
+            icon={iconClass}
+            text={escapeHtml(title)}
+            triggerCommand="createAiChat"
+        />
+    )
+}

From c3b22ff737b85491d99de5b438f02aa9ff040a4f Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 4 Dec 2025 15:54:27 +0200
Subject: [PATCH 09/29] refactor(react/launch_bar): port protected session
 status widget

---
 .../buttons/protected_session_status.ts       | 21 ------------
 .../src/widgets/containers/launcher.tsx       |  4 +--
 .../ProtectedSessionStatusWidget.tsx          | 33 +++++++++++++++++++
 3 files changed, 35 insertions(+), 23 deletions(-)
 delete mode 100644 apps/client/src/widgets/buttons/protected_session_status.ts
 create mode 100644 apps/client/src/widgets/launch_bar/ProtectedSessionStatusWidget.tsx

diff --git a/apps/client/src/widgets/buttons/protected_session_status.ts b/apps/client/src/widgets/buttons/protected_session_status.ts
deleted file mode 100644
index e5dde7d3d..000000000
--- a/apps/client/src/widgets/buttons/protected_session_status.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { t } from "../../services/i18n.js";
-import protectedSessionHolder from "../../services/protected_session_holder.js";
-import CommandButtonWidget from "./command_button.js";
-
-export default class ProtectedSessionStatusWidget extends CommandButtonWidget {
-    constructor() {
-        super();
-
-        this.class("launcher-button");
-
-        this.settings.icon = () => (protectedSessionHolder.isProtectedSessionAvailable() ? "bx-check-shield" : "bx-shield-quarter");
-
-        this.settings.title = () => (protectedSessionHolder.isProtectedSessionAvailable() ? t("protected_session_status.active") : t("protected_session_status.inactive"));
-
-        this.settings.command = () => (protectedSessionHolder.isProtectedSessionAvailable() ? "leaveProtectedSession" : "enterProtectedSession");
-    }
-
-    protectedSessionStartedEvent() {
-        this.refreshIcon();
-    }
-}
diff --git a/apps/client/src/widgets/containers/launcher.tsx b/apps/client/src/widgets/containers/launcher.tsx
index 19a46fbf0..17707a171 100644
--- a/apps/client/src/widgets/containers/launcher.tsx
+++ b/apps/client/src/widgets/containers/launcher.tsx
@@ -1,5 +1,4 @@
 import CalendarWidget from "../buttons/calendar.js";
-import ProtectedSessionStatusWidget from "../buttons/protected_session_status.js";
 import SyncStatusWidget from "../sync_status.js";
 import BasicWidget, { wrapReactWidgets } from "../basic_widget.js";
 import NoteLauncher from "../buttons/launcher/note_launcher.js";
@@ -14,6 +13,7 @@ import BookmarkButtons from "../launch_bar/BookmarkButtons.jsx";
 import SpacerWidget from "../launch_bar/SpacerWidget.jsx";
 import HistoryNavigationButton from "../launch_bar/HistoryNavigation.jsx";
 import AiChatButton from "../launch_bar/AiChatButton.jsx";
+import ProtectedSessionStatusWidget from "../launch_bar/ProtectedSessionStatusWidget.jsx";
 
 interface InnerWidget extends BasicWidget {
     settings?: {
@@ -113,7 +113,7 @@ export default class LauncherWidget extends BasicWidget {
             case "bookmarks":
                 return <BookmarkButtons isHorizontalLayout={this.isHorizontalLayout} />
             case "protectedSession":
-                return new ProtectedSessionStatusWidget();
+                return <ProtectedSessionStatusWidget />
             case "syncStatus":
                 return new SyncStatusWidget();
             case "backInHistoryButton":
diff --git a/apps/client/src/widgets/launch_bar/ProtectedSessionStatusWidget.tsx b/apps/client/src/widgets/launch_bar/ProtectedSessionStatusWidget.tsx
new file mode 100644
index 000000000..539643d4f
--- /dev/null
+++ b/apps/client/src/widgets/launch_bar/ProtectedSessionStatusWidget.tsx
@@ -0,0 +1,33 @@
+import { useState } from "preact/hooks";
+import protected_session_holder from "../../services/protected_session_holder";
+import { LaunchBarActionButton } from "./launch_bar_widgets";
+import { useTriliumEvent } from "../react/hooks";
+import { t } from "../../services/i18n";
+
+export default function ProtectedSessionStatusWidget() {
+    const protectedSessionAvailable = useProtectedSessionAvailable();
+
+    return (
+        protectedSessionAvailable ? (
+            <LaunchBarActionButton
+                icon="bx bx-check-shield"
+                text={t("protected_session_status.active")}
+                triggerCommand="leaveProtectedSession"
+            />
+        ) : (
+            <LaunchBarActionButton
+                icon="bx bx-shield-quarter"
+                text={t("protected_session_status.inactive")}
+                triggerCommand="enterProtectedSession"
+            />
+        )
+    )
+}
+
+function useProtectedSessionAvailable() {
+    const [ protectedSessionAvailable, setProtectedSessionAvailable ] = useState(protected_session_holder.isProtectedSessionAvailable());
+    useTriliumEvent("protectedSessionStarted", () => {
+        setProtectedSessionAvailable(protected_session_holder.isProtectedSessionAvailable());
+    });
+    return protectedSessionAvailable;
+}

From 1e05dc937cea6f203b0065c729e65be435311a38 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 4 Dec 2025 16:04:08 +0200
Subject: [PATCH 10/29] refactor(react/launch_bar): port command buttons

---
 .../src/widgets/buttons/command_button.ts     | 73 -------------------
 .../src/widgets/containers/launcher.tsx       | 15 +---
 .../src/widgets/launch_bar/CommandButton.tsx  | 19 +++++
 packages/commons/src/lib/attribute_names.ts   |  1 +
 4 files changed, 24 insertions(+), 84 deletions(-)
 delete mode 100644 apps/client/src/widgets/buttons/command_button.ts
 create mode 100644 apps/client/src/widgets/launch_bar/CommandButton.tsx

diff --git a/apps/client/src/widgets/buttons/command_button.ts b/apps/client/src/widgets/buttons/command_button.ts
deleted file mode 100644
index 49b147d35..000000000
--- a/apps/client/src/widgets/buttons/command_button.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { ActionKeyboardShortcut } from "@triliumnext/commons";
-import type { CommandNames } from "../../components/app_context.js";
-import keyboardActionsService from "../../services/keyboard_actions.js";
-import AbstractButtonWidget, { type AbstractButtonWidgetSettings } from "./abstract_button.js";
-import type { ButtonNoteIdProvider } from "./button_from_note.js";
-
-let actions: ActionKeyboardShortcut[];
-
-keyboardActionsService.getActions().then((as) => (actions = as));
-
-// TODO: Is this actually used?
-export type ClickHandler = (widget: CommandButtonWidget, e: JQuery.ClickEvent<any, any, any, any>) => void;
-type CommandOrCallback = CommandNames | (() => CommandNames);
-
-interface CommandButtonWidgetSettings extends AbstractButtonWidgetSettings {
-    command?: CommandOrCallback;
-    onClick?: ClickHandler;
-    buttonNoteIdProvider?: ButtonNoteIdProvider | null;
-}
-
-export default class CommandButtonWidget extends AbstractButtonWidget<CommandButtonWidgetSettings> {
-    constructor() {
-        super();
-        this.settings = {
-            titlePlacement: "right",
-            title: null,
-            icon: null,
-            onContextMenu: null
-        };
-    }
-
-    doRender() {
-        super.doRender();
-
-        if (this.settings.command) {
-            this.$widget.on("click", () => {
-                this.tooltip.hide();
-
-                if (this._command) {
-                    this.triggerCommand(this._command);
-                }
-            });
-        } else {
-            console.warn(`Button widget '${this.componentId}' has no defined command`, this.settings);
-        }
-    }
-
-    getTitle() {
-        const title = super.getTitle();
-
-        const action = actions.find((act) => act.actionName === this._command);
-
-        if (action?.effectiveShortcuts && action.effectiveShortcuts.length > 0) {
-            return `${title} (${action.effectiveShortcuts.join(", ")})`;
-        } else {
-            return title;
-        }
-    }
-
-    onClick(handler: ClickHandler) {
-        this.settings.onClick = handler;
-        return this;
-    }
-
-    command(command: CommandOrCallback) {
-        this.settings.command = command;
-        return this;
-    }
-
-    get _command() {
-        return typeof this.settings.command === "function" ? this.settings.command() : this.settings.command;
-    }
-}
diff --git a/apps/client/src/widgets/containers/launcher.tsx b/apps/client/src/widgets/containers/launcher.tsx
index 17707a171..eeb497901 100644
--- a/apps/client/src/widgets/containers/launcher.tsx
+++ b/apps/client/src/widgets/containers/launcher.tsx
@@ -3,17 +3,17 @@ import SyncStatusWidget from "../sync_status.js";
 import BasicWidget, { wrapReactWidgets } from "../basic_widget.js";
 import NoteLauncher from "../buttons/launcher/note_launcher.js";
 import ScriptLauncher from "../buttons/launcher/script_launcher.js";
-import CommandButtonWidget from "../buttons/command_button.js";
 import utils from "../../services/utils.js";
 import TodayLauncher from "../buttons/launcher/today_launcher.js";
 import QuickSearchLauncherWidget from "../quick_search_launcher.js";
 import type FNote from "../../entities/fnote.js";
-import type { CommandNames } from "../../components/app_context.js";
 import BookmarkButtons from "../launch_bar/BookmarkButtons.jsx";
 import SpacerWidget from "../launch_bar/SpacerWidget.jsx";
 import HistoryNavigationButton from "../launch_bar/HistoryNavigation.jsx";
 import AiChatButton from "../launch_bar/AiChatButton.jsx";
 import ProtectedSessionStatusWidget from "../launch_bar/ProtectedSessionStatusWidget.jsx";
+import { VNode } from "preact";
+import CommandButton from "../launch_bar/CommandButton.jsx";
 
 interface InnerWidget extends BasicWidget {
     settings?: {
@@ -54,9 +54,9 @@ export default class LauncherWidget extends BasicWidget {
             return false;
         }
 
-        let widget: BasicWidget;
+        let widget: BasicWidget | VNode;
         if (launcherType === "command") {
-            widget = this.initCommandLauncherWidget(note).class("launcher-button");
+            widget = wrapReactWidgets<BasicWidget>([ <CommandButton launcherNote={note} /> ])[0];
         } else if (launcherType === "note") {
             widget = new NoteLauncher(note).class("launcher-button");
         } else if (launcherType === "script") {
@@ -82,13 +82,6 @@ export default class LauncherWidget extends BasicWidget {
         return true;
     }
 
-    initCommandLauncherWidget(note: FNote) {
-        return new CommandButtonWidget()
-            .title(() => note.title)
-            .icon(() => note.getIcon())
-            .command(() => note.getLabelValue("command") as CommandNames);
-    }
-
     async initCustomWidget(note: FNote) {
         const widget = await note.getRelationTarget("widget");
 
diff --git a/apps/client/src/widgets/launch_bar/CommandButton.tsx b/apps/client/src/widgets/launch_bar/CommandButton.tsx
new file mode 100644
index 000000000..22ac0fea2
--- /dev/null
+++ b/apps/client/src/widgets/launch_bar/CommandButton.tsx
@@ -0,0 +1,19 @@
+import { CommandNames } from "../../components/app_context";
+import FNote from "../../entities/fnote";
+import { escapeHtml } from "../../services/utils";
+import { useNoteLabel, useNoteProperty } from "../react/hooks";
+import { LaunchBarActionButton } from "./launch_bar_widgets";
+
+export default function CommandButton({ launcherNote }: { launcherNote: FNote }) {
+    const [ iconClass ] = useNoteLabel(launcherNote, "iconClass");
+    const [ command ] = useNoteLabel(launcherNote, "command");
+    const title = useNoteProperty(launcherNote, "title");
+
+    return iconClass && title && command && (
+        <LaunchBarActionButton
+            icon={iconClass}
+            text={escapeHtml(title)}
+            triggerCommand={command as CommandNames}
+        />
+    )
+}
diff --git a/packages/commons/src/lib/attribute_names.ts b/packages/commons/src/lib/attribute_names.ts
index 8b3ec3f37..963fba0eb 100644
--- a/packages/commons/src/lib/attribute_names.ts
+++ b/packages/commons/src/lib/attribute_names.ts
@@ -26,6 +26,7 @@ type Labels = {
 
     // Launch bar
     bookmarkFolder: boolean;
+    command: string;
 
     // Collection-specific
     viewType: string;

From 1963b5732a4dfbb94939dfd9284ab2b11c5d1d77 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 4 Dec 2025 16:13:16 +0200
Subject: [PATCH 11/29] refactor(react/launch_bar): extract note launcher from
 bookmark button

---
 .../src/widgets/containers/launcher.tsx       |  2 +-
 .../widgets/launch_bar/BookmarkButtons.tsx    | 46 ++--------------
 .../src/widgets/launch_bar/CommandButton.tsx  | 19 -------
 .../src/widgets/launch_bar/GenericButtons.tsx | 53 +++++++++++++++++++
 4 files changed, 58 insertions(+), 62 deletions(-)
 delete mode 100644 apps/client/src/widgets/launch_bar/CommandButton.tsx
 create mode 100644 apps/client/src/widgets/launch_bar/GenericButtons.tsx

diff --git a/apps/client/src/widgets/containers/launcher.tsx b/apps/client/src/widgets/containers/launcher.tsx
index eeb497901..6fd39eac1 100644
--- a/apps/client/src/widgets/containers/launcher.tsx
+++ b/apps/client/src/widgets/containers/launcher.tsx
@@ -13,7 +13,7 @@ import HistoryNavigationButton from "../launch_bar/HistoryNavigation.jsx";
 import AiChatButton from "../launch_bar/AiChatButton.jsx";
 import ProtectedSessionStatusWidget from "../launch_bar/ProtectedSessionStatusWidget.jsx";
 import { VNode } from "preact";
-import CommandButton from "../launch_bar/CommandButton.jsx";
+import { CommandButton } from "../launch_bar/GenericButtons.jsx";
 
 interface InnerWidget extends BasicWidget {
     settings?: {
diff --git a/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx b/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx
index 4c0df90e6..bf8b6cead 100644
--- a/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx
+++ b/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx
@@ -1,13 +1,12 @@
 import { useMemo } from "preact/hooks";
-import { LaunchBarActionButton, LaunchBarDropdownButton, type LaunchBarWidgetProps } from "./launch_bar_widgets";
+import { LaunchBarDropdownButton, type LaunchBarWidgetProps } from "./launch_bar_widgets";
 import { CSSProperties } from "preact";
 import type FNote from "../../entities/fnote";
 import { useChildNotes, useNoteLabel, useNoteLabelBoolean, useNoteProperty } from "../react/hooks";
-import appContext from "../../components/app_context";
-import { escapeHtml, isCtrlKey } from "../../services/utils";
-import link_context_menu from "../../menus/link_context_menu";
+import { escapeHtml } from "../../services/utils";
 import "./BookmarkButtons.css";
 import NoteLink from "../react/NoteLink";
+import { NoteLauncher } from "./GenericButtons";
 
 const PARENT_NOTE_ID = "_lbBookmarks";
 
@@ -30,40 +29,7 @@ function SingleBookmark({ note }: { note: FNote }) {
     const [ bookmarkFolder ] = useNoteLabelBoolean(note, "bookmarkFolder");
     return bookmarkFolder
         ? <BookmarkFolder note={note} />
-        : <OpenNoteButtonWidget note={note} />
-}
-
-function OpenNoteButtonWidget({ note }: { note: FNote }) {
-    const [ iconClass ] = useNoteLabel(note, "iconClass");
-    const title = useNoteProperty(note, "title");
-
-    async function launch(evt: MouseEvent) {
-        if (evt.which === 3) {
-            return;
-        }
-        const hoistedNoteId = getHoistedNoteId(note);
-        const ctrlKey = isCtrlKey(evt);
-
-        if ((evt.which === 1 && ctrlKey) || evt.which === 2) {
-            const activate = evt.shiftKey ? true : false;
-            await appContext.tabManager.openInNewTab(note.noteId, hoistedNoteId, activate);
-        } else {
-            await appContext.tabManager.openInSameTab(note.noteId);
-        }
-    }
-
-    return title && iconClass && (
-        <LaunchBarActionButton
-            icon={iconClass}
-            text={escapeHtml(title)}
-            onClick={launch}
-            onAuxClick={launch}
-            onContextMenu={evt => {
-                evt.preventDefault();
-                link_context_menu.openContextMenu(note.noteId, evt);
-            }}
-        />
-    )
+        : <NoteLauncher launcherNote={note} targetNoteId={note.noteId} />
 }
 
 function BookmarkFolder({ note }: { note: FNote }) {
@@ -92,7 +58,3 @@ function BookmarkFolder({ note }: { note: FNote }) {
         </LaunchBarDropdownButton>
     )
 }
-
-function getHoistedNoteId(noteToOpen: FNote) {
-    return noteToOpen.getRelationValue("hoistedNote") || appContext.tabManager.getActiveContext()?.hoistedNoteId;
-}
diff --git a/apps/client/src/widgets/launch_bar/CommandButton.tsx b/apps/client/src/widgets/launch_bar/CommandButton.tsx
deleted file mode 100644
index 22ac0fea2..000000000
--- a/apps/client/src/widgets/launch_bar/CommandButton.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { CommandNames } from "../../components/app_context";
-import FNote from "../../entities/fnote";
-import { escapeHtml } from "../../services/utils";
-import { useNoteLabel, useNoteProperty } from "../react/hooks";
-import { LaunchBarActionButton } from "./launch_bar_widgets";
-
-export default function CommandButton({ launcherNote }: { launcherNote: FNote }) {
-    const [ iconClass ] = useNoteLabel(launcherNote, "iconClass");
-    const [ command ] = useNoteLabel(launcherNote, "command");
-    const title = useNoteProperty(launcherNote, "title");
-
-    return iconClass && title && command && (
-        <LaunchBarActionButton
-            icon={iconClass}
-            text={escapeHtml(title)}
-            triggerCommand={command as CommandNames}
-        />
-    )
-}
diff --git a/apps/client/src/widgets/launch_bar/GenericButtons.tsx b/apps/client/src/widgets/launch_bar/GenericButtons.tsx
new file mode 100644
index 000000000..56fe4daa7
--- /dev/null
+++ b/apps/client/src/widgets/launch_bar/GenericButtons.tsx
@@ -0,0 +1,53 @@
+import appContext, { CommandNames } from "../../components/app_context";
+import FNote from "../../entities/fnote";
+import link_context_menu from "../../menus/link_context_menu";
+import { escapeHtml, isCtrlKey } from "../../services/utils";
+import { useNoteLabel, useNoteProperty } from "../react/hooks";
+import { LaunchBarActionButton } from "./launch_bar_widgets";
+
+export function CommandButton({ launcherNote }: { launcherNote: FNote }) {
+    const [ iconClass ] = useNoteLabel(launcherNote, "iconClass");
+    const [ command ] = useNoteLabel(launcherNote, "command");
+    const title = useNoteProperty(launcherNote, "title");
+
+    return iconClass && title && command && (
+        <LaunchBarActionButton
+            icon={iconClass}
+            text={escapeHtml(title)}
+            triggerCommand={command as CommandNames}
+        />
+    )
+}
+
+export function NoteLauncher({ launcherNote, targetNoteId, hoistedNoteId }: { launcherNote: FNote, targetNoteId: string, hoistedNoteId?: string }) {
+    const [ iconClass ] = useNoteLabel(launcherNote, "iconClass");
+    const title = useNoteProperty(launcherNote, "title");
+
+    async function launch(evt: MouseEvent) {
+        if (evt.which === 3) {
+            return;
+        }
+        const hoistedNoteIdWithDefault = hoistedNoteId || launcherNote.getRelationValue("hoistedNote") || appContext.tabManager.getActiveContext()?.hoistedNoteId;
+        const ctrlKey = isCtrlKey(evt);
+
+        if ((evt.which === 1 && ctrlKey) || evt.which === 2) {
+            const activate = evt.shiftKey ? true : false;
+            await appContext.tabManager.openInNewTab(targetNoteId, hoistedNoteIdWithDefault, activate);
+        } else {
+            await appContext.tabManager.openInSameTab(targetNoteId);
+        }
+    }
+
+    return title && iconClass && (
+        <LaunchBarActionButton
+            icon={iconClass}
+            text={escapeHtml(title)}
+            onClick={launch}
+            onAuxClick={launch}
+            onContextMenu={evt => {
+                evt.preventDefault();
+                link_context_menu.openContextMenu(targetNoteId, evt);
+            }}
+        />
+    )
+}

From 03cdfc259ebe457d0182e331d3420877ee7945be Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 4 Dec 2025 16:22:46 +0200
Subject: [PATCH 12/29] refactor(react/launch_bar): deduplicate launcher icon
 and title

---
 .../src/widgets/launch_bar/AiChatButton.tsx    | 14 ++++++--------
 .../src/widgets/launch_bar/BookmarkButtons.tsx | 14 ++++++--------
 .../src/widgets/launch_bar/GenericButtons.tsx  | 18 ++++++++----------
 .../widgets/launch_bar/HistoryNavigation.tsx   | 14 ++++++--------
 .../widgets/launch_bar/launch_bar_widgets.tsx  | 16 ++++++++++++++++
 5 files changed, 42 insertions(+), 34 deletions(-)

diff --git a/apps/client/src/widgets/launch_bar/AiChatButton.tsx b/apps/client/src/widgets/launch_bar/AiChatButton.tsx
index 2ca95069a..cd0d05e08 100644
--- a/apps/client/src/widgets/launch_bar/AiChatButton.tsx
+++ b/apps/client/src/widgets/launch_bar/AiChatButton.tsx
@@ -1,17 +1,15 @@
 import FNote from "../../entities/fnote";
-import { escapeHtml } from "../../services/utils";
-import { useNoteLabel, useNoteProperty, useTriliumOptionBool } from "../react/hooks";
-import { LaunchBarActionButton } from "./launch_bar_widgets";
+import { useTriliumOptionBool } from "../react/hooks";
+import { LaunchBarActionButton, useLauncherIconAndTitle } from "./launch_bar_widgets";
 
 export default function AiChatButton({ launcherNote }: { launcherNote: FNote }) {
     const [ aiEnabled ] = useTriliumOptionBool("aiEnabled");
-    const [ iconClass ] = useNoteLabel(launcherNote, "iconClass");
-    const title = useNoteProperty(launcherNote, "title");
+    const { icon, title } = useLauncherIconAndTitle(launcherNote);
 
-    return aiEnabled && iconClass && title && (
+    return aiEnabled && (
         <LaunchBarActionButton
-            icon={iconClass}
-            text={escapeHtml(title)}
+            icon={icon}
+            text={title}
             triggerCommand="createAiChat"
         />
     )
diff --git a/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx b/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx
index bf8b6cead..17bf1f614 100644
--- a/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx
+++ b/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx
@@ -1,9 +1,8 @@
 import { useMemo } from "preact/hooks";
-import { LaunchBarDropdownButton, type LaunchBarWidgetProps } from "./launch_bar_widgets";
+import { LaunchBarDropdownButton, useLauncherIconAndTitle, type LaunchBarWidgetProps } from "./launch_bar_widgets";
 import { CSSProperties } from "preact";
 import type FNote from "../../entities/fnote";
-import { useChildNotes, useNoteLabel, useNoteLabelBoolean, useNoteProperty } from "../react/hooks";
-import { escapeHtml } from "../../services/utils";
+import { useChildNotes, useNoteLabelBoolean } from "../react/hooks";
 import "./BookmarkButtons.css";
 import NoteLink from "../react/NoteLink";
 import { NoteLauncher } from "./GenericButtons";
@@ -33,14 +32,13 @@ function SingleBookmark({ note }: { note: FNote }) {
 }
 
 function BookmarkFolder({ note }: { note: FNote }) {
-    const [ iconClass ] = useNoteLabel(note, "iconClass");
-    const title = useNoteProperty(note, "title");
+    const { icon, title } = useLauncherIconAndTitle(note);
     const childNotes = useChildNotes(note.noteId);
 
-    return title && iconClass && (
+    return (
         <LaunchBarDropdownButton
-            icon={iconClass}
-            title={escapeHtml(title)}
+            icon={icon}
+            title={title}
         >
             <div className="bookmark-folder-widget">
                 <div className="parent-note">
diff --git a/apps/client/src/widgets/launch_bar/GenericButtons.tsx b/apps/client/src/widgets/launch_bar/GenericButtons.tsx
index 56fe4daa7..4e09a835c 100644
--- a/apps/client/src/widgets/launch_bar/GenericButtons.tsx
+++ b/apps/client/src/widgets/launch_bar/GenericButtons.tsx
@@ -3,25 +3,23 @@ import FNote from "../../entities/fnote";
 import link_context_menu from "../../menus/link_context_menu";
 import { escapeHtml, isCtrlKey } from "../../services/utils";
 import { useNoteLabel, useNoteProperty } from "../react/hooks";
-import { LaunchBarActionButton } from "./launch_bar_widgets";
+import { LaunchBarActionButton, useLauncherIconAndTitle } from "./launch_bar_widgets";
 
 export function CommandButton({ launcherNote }: { launcherNote: FNote }) {
-    const [ iconClass ] = useNoteLabel(launcherNote, "iconClass");
+    const { icon, title } = useLauncherIconAndTitle(launcherNote);
     const [ command ] = useNoteLabel(launcherNote, "command");
-    const title = useNoteProperty(launcherNote, "title");
 
-    return iconClass && title && command && (
+    return command && (
         <LaunchBarActionButton
-            icon={iconClass}
-            text={escapeHtml(title)}
+            icon={icon}
+            text={title}
             triggerCommand={command as CommandNames}
         />
     )
 }
 
 export function NoteLauncher({ launcherNote, targetNoteId, hoistedNoteId }: { launcherNote: FNote, targetNoteId: string, hoistedNoteId?: string }) {
-    const [ iconClass ] = useNoteLabel(launcherNote, "iconClass");
-    const title = useNoteProperty(launcherNote, "title");
+    const { icon, title } = useLauncherIconAndTitle(launcherNote);
 
     async function launch(evt: MouseEvent) {
         if (evt.which === 3) {
@@ -38,9 +36,9 @@ export function NoteLauncher({ launcherNote, targetNoteId, hoistedNoteId }: { la
         }
     }
 
-    return title && iconClass && (
+    return (
         <LaunchBarActionButton
-            icon={iconClass}
+            icon={icon}
             text={escapeHtml(title)}
             onClick={launch}
             onAuxClick={launch}
diff --git a/apps/client/src/widgets/launch_bar/HistoryNavigation.tsx b/apps/client/src/widgets/launch_bar/HistoryNavigation.tsx
index 0b5ba4b45..18dc67f05 100644
--- a/apps/client/src/widgets/launch_bar/HistoryNavigation.tsx
+++ b/apps/client/src/widgets/launch_bar/HistoryNavigation.tsx
@@ -1,8 +1,7 @@
 import { useEffect, useRef } from "preact/hooks";
 import FNote from "../../entities/fnote";
-import { dynamicRequire, escapeHtml, isElectron } from "../../services/utils";
-import { useNoteLabel, useNoteProperty } from "../react/hooks";
-import { LaunchBarActionButton } from "./launch_bar_widgets";
+import { dynamicRequire, isElectron } from "../../services/utils";
+import { LaunchBarActionButton, useLauncherIconAndTitle } from "./launch_bar_widgets";
 import type { WebContents } from "electron";
 import contextMenu, { MenuCommandItem } from "../../menus/context_menu";
 import tree from "../../services/tree";
@@ -14,8 +13,7 @@ interface HistoryNavigationProps {
 }
 
 export default function HistoryNavigationButton({ launcherNote, command }: HistoryNavigationProps) {
-    const [ iconClass ] = useNoteLabel(launcherNote, "iconClass");
-    const title = useNoteProperty(launcherNote, "title");
+    const { icon, title } = useLauncherIconAndTitle(launcherNote);
     const webContentsRef = useRef<WebContents>(null);
 
     useEffect(() => {
@@ -27,10 +25,10 @@ export default function HistoryNavigationButton({ launcherNote, command }: Histo
         }
     }, []);
 
-    return iconClass && title && (
+    return (
         <LaunchBarActionButton
-            icon={iconClass}
-            text={escapeHtml(title)}
+            icon={icon}
+            text={title}
             triggerCommand={command}
             onContextMenu={async (e) => {
                 e.preventDefault();
diff --git a/apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx b/apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx
index 1ea64a852..5a72e0f54 100644
--- a/apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx
+++ b/apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx
@@ -1,5 +1,8 @@
+import FNote from "../../entities/fnote";
+import { escapeHtml } from "../../services/utils";
 import ActionButton, { ActionButtonProps } from "../react/ActionButton";
 import Dropdown, { DropdownProps } from "../react/Dropdown";
+import { useNoteLabel, useNoteProperty } from "../react/hooks";
 import Icon from "../react/Icon";
 
 export interface LaunchBarWidgetProps {
@@ -28,3 +31,16 @@ export function LaunchBarDropdownButton({ children, icon, ...props }: Pick<Dropd
         >{children}</Dropdown>
     )
 }
+
+export function useLauncherIconAndTitle(note: FNote) {
+    const title = useNoteProperty(note, "title");
+
+    // React to changes.
+    useNoteLabel(note, "iconClass");
+    useNoteLabel(note, "workspaceIconClass");
+
+    return {
+        icon: note.getIcon(),
+        title: escapeHtml(title ?? "")
+    };
+}

From 06a9f95979c21bb5d8878282fd8280848df736ef Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 4 Dec 2025 16:23:14 +0200
Subject: [PATCH 13/29] chore(react/launch_bar): remove old file

---
 apps/client/src/widgets/bookmark_buttons.ts | 64 ---------------------
 1 file changed, 64 deletions(-)
 delete mode 100644 apps/client/src/widgets/bookmark_buttons.ts

diff --git a/apps/client/src/widgets/bookmark_buttons.ts b/apps/client/src/widgets/bookmark_buttons.ts
deleted file mode 100644
index ef6cb97a1..000000000
--- a/apps/client/src/widgets/bookmark_buttons.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import FlexContainer from "./containers/flex_container.js";
-import BookmarkFolderWidget from "./buttons/bookmark_folder.js";
-import froca from "../services/froca.js";
-import utils from "../services/utils.js";
-import type { EventData } from "../components/app_context.js";
-import type Component from "../components/component.js";
-
-interface BookmarkButtonsSettings {
-    titlePlacement?: string;
-}
-
-export default class BookmarkButtons extends FlexContainer<Component> {
-    private settings: BookmarkButtonsSettings;
-    private noteIds: string[];
-
-    constructor(isHorizontalLayout: boolean) {
-        super(isHorizontalLayout ? "row" : "column");
-
-        this.contentSized();
-        this.settings = {};
-        this.noteIds = [];
-    }
-
-    async refresh(): Promise<void> {
-        const bookmarkParentNote = await froca.getNote("_lbBookmarks");
-
-        if (!bookmarkParentNote) {
-            return;
-        }
-
-        for (const note of await bookmarkParentNote.getChildNotes()) {
-            this.noteIds.push(note.noteId);
-
-            let buttonWidget: OpenNoteButtonWidget | BookmarkFolderWidget = note.isLabelTruthy("bookmarkFolder")
-                ? new BookmarkFolderWidget(note);
-
-            this.child(buttonWidget);
-
-            this.$widget.append(buttonWidget.render());
-
-            buttonWidget.refreshIcon();
-        }
-
-        utils.reloadTray();
-    }
-
-    initialRenderCompleteEvent(): void {
-        this.refresh();
-    }
-
-    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">): void {
-        if (loadResults.getBranchRows().find((branch) => branch.parentNoteId === "_lbBookmarks")) {
-            this.refresh();
-        }
-
-        if (loadResults.getAttributeRows().find((attr) =>
-            attr.type === "label" &&
-            attr.name && ["iconClass", "workspaceIconClass", "bookmarkFolder"].includes(attr.name) &&
-            attr.noteId && this.noteIds.includes(attr.noteId)
-        )) {
-            this.refresh();
-        }
-    }
-}

From 0d6bcba0233f3faf09ff82a6a0de27f076449f6a Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 4 Dec 2025 16:33:58 +0200
Subject: [PATCH 14/29] chore(react/launch_bar): port note launcher

---
 .../src/widgets/containers/launcher.tsx       |  5 ++--
 .../widgets/launch_bar/BookmarkButtons.tsx    |  4 +--
 .../src/widgets/launch_bar/GenericButtons.tsx | 28 +++++++++++++++++--
 packages/commons/src/lib/attribute_names.ts   |  5 +++-
 4 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/apps/client/src/widgets/containers/launcher.tsx b/apps/client/src/widgets/containers/launcher.tsx
index 6fd39eac1..cc6f793f1 100644
--- a/apps/client/src/widgets/containers/launcher.tsx
+++ b/apps/client/src/widgets/containers/launcher.tsx
@@ -1,7 +1,6 @@
 import CalendarWidget from "../buttons/calendar.js";
 import SyncStatusWidget from "../sync_status.js";
 import BasicWidget, { wrapReactWidgets } from "../basic_widget.js";
-import NoteLauncher from "../buttons/launcher/note_launcher.js";
 import ScriptLauncher from "../buttons/launcher/script_launcher.js";
 import utils from "../../services/utils.js";
 import TodayLauncher from "../buttons/launcher/today_launcher.js";
@@ -13,7 +12,7 @@ import HistoryNavigationButton from "../launch_bar/HistoryNavigation.jsx";
 import AiChatButton from "../launch_bar/AiChatButton.jsx";
 import ProtectedSessionStatusWidget from "../launch_bar/ProtectedSessionStatusWidget.jsx";
 import { VNode } from "preact";
-import { CommandButton } from "../launch_bar/GenericButtons.jsx";
+import { CommandButton, NoteLauncher } from "../launch_bar/GenericButtons.jsx";
 
 interface InnerWidget extends BasicWidget {
     settings?: {
@@ -58,7 +57,7 @@ export default class LauncherWidget extends BasicWidget {
         if (launcherType === "command") {
             widget = wrapReactWidgets<BasicWidget>([ <CommandButton launcherNote={note} /> ])[0];
         } else if (launcherType === "note") {
-            widget = new NoteLauncher(note).class("launcher-button");
+            widget = wrapReactWidgets<BasicWidget>([ <NoteLauncher launcherNote={note} /> ])[0];
         } else if (launcherType === "script") {
             widget = new ScriptLauncher(note).class("launcher-button");
         } else if (launcherType === "customWidget") {
diff --git a/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx b/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx
index 17bf1f614..a165ce278 100644
--- a/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx
+++ b/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx
@@ -5,7 +5,7 @@ import type FNote from "../../entities/fnote";
 import { useChildNotes, useNoteLabelBoolean } from "../react/hooks";
 import "./BookmarkButtons.css";
 import NoteLink from "../react/NoteLink";
-import { NoteLauncher } from "./GenericButtons";
+import { CustomNoteLauncher } from "./GenericButtons";
 
 const PARENT_NOTE_ID = "_lbBookmarks";
 
@@ -28,7 +28,7 @@ function SingleBookmark({ note }: { note: FNote }) {
     const [ bookmarkFolder ] = useNoteLabelBoolean(note, "bookmarkFolder");
     return bookmarkFolder
         ? <BookmarkFolder note={note} />
-        : <NoteLauncher launcherNote={note} targetNoteId={note.noteId} />
+        : <CustomNoteLauncher launcherNote={note} targetNoteId={note.noteId} />
 }
 
 function BookmarkFolder({ note }: { note: FNote }) {
diff --git a/apps/client/src/widgets/launch_bar/GenericButtons.tsx b/apps/client/src/widgets/launch_bar/GenericButtons.tsx
index 4e09a835c..303475214 100644
--- a/apps/client/src/widgets/launch_bar/GenericButtons.tsx
+++ b/apps/client/src/widgets/launch_bar/GenericButtons.tsx
@@ -2,8 +2,10 @@ import appContext, { CommandNames } from "../../components/app_context";
 import FNote from "../../entities/fnote";
 import link_context_menu from "../../menus/link_context_menu";
 import { escapeHtml, isCtrlKey } from "../../services/utils";
-import { useNoteLabel, useNoteProperty } from "../react/hooks";
+import { useNoteLabel, useNoteProperty, useNoteRelation } from "../react/hooks";
 import { LaunchBarActionButton, useLauncherIconAndTitle } from "./launch_bar_widgets";
+import dialog from "../../services/dialog";
+import { t } from "../../services/i18n";
 
 export function CommandButton({ launcherNote }: { launcherNote: FNote }) {
     const { icon, title } = useLauncherIconAndTitle(launcherNote);
@@ -18,13 +20,19 @@ export function CommandButton({ launcherNote }: { launcherNote: FNote }) {
     )
 }
 
-export function NoteLauncher({ launcherNote, targetNoteId, hoistedNoteId }: { launcherNote: FNote, targetNoteId: string, hoistedNoteId?: string }) {
+export function CustomNoteLauncher({ launcherNote, targetNoteId, hoistedNoteId }: { launcherNote: FNote, targetNoteId: string | null, hoistedNoteId?: string }) {
     const { icon, title } = useLauncherIconAndTitle(launcherNote);
 
     async function launch(evt: MouseEvent) {
         if (evt.which === 3) {
             return;
         }
+
+        if (!targetNoteId) {
+            dialog.info(t("note_launcher.this_launcher_doesnt_define_target_note"));
+            return;
+        }
+
         const hoistedNoteIdWithDefault = hoistedNoteId || launcherNote.getRelationValue("hoistedNote") || appContext.tabManager.getActiveContext()?.hoistedNoteId;
         const ctrlKey = isCtrlKey(evt);
 
@@ -44,8 +52,22 @@ export function NoteLauncher({ launcherNote, targetNoteId, hoistedNoteId }: { la
             onAuxClick={launch}
             onContextMenu={evt => {
                 evt.preventDefault();
-                link_context_menu.openContextMenu(targetNoteId, evt);
+                if (targetNoteId) {
+                    link_context_menu.openContextMenu(targetNoteId, evt);
+                }
             }}
         />
     )
 }
+
+// we're intentionally displaying the launcher title and icon instead of the target,
+// e.g. you want to make launchers to 2 mermaid diagrams which both have mermaid icon (ok),
+// but on the launchpad you want them distinguishable.
+// for titles, the note titles may follow a different scheme than maybe desirable on the launchpad
+// another reason is the discrepancy between what user sees on the launchpad and in the config (esp. icons).
+// The only downside is more work in setting up the typical case
+// where you actually want to have both title and icon in sync, but for those cases there are bookmarks
+export function NoteLauncher({ launcherNote, ...restProps }: { launcherNote: FNote, hoistedNoteId?: string }) {
+    const [ targetNote ] = useNoteRelation(launcherNote, "target");
+    return <CustomNoteLauncher launcherNote={launcherNote} targetNoteId={targetNote ?? null} {...restProps} />
+}
diff --git a/packages/commons/src/lib/attribute_names.ts b/packages/commons/src/lib/attribute_names.ts
index 963fba0eb..04d365f1a 100644
--- a/packages/commons/src/lib/attribute_names.ts
+++ b/packages/commons/src/lib/attribute_names.ts
@@ -59,7 +59,10 @@ type Labels = {
  */
 type Relations = [
     "searchScript",
-    "ancestor"
+    "ancestor",
+
+    // Launcher-specific
+    "target"
 ];
 
 export type LabelNames = keyof Labels;

From 54f70c8158acfe345e698be9fba65774d332e30e Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 4 Dec 2025 16:52:38 +0200
Subject: [PATCH 15/29] chore(react/launch_bar): port today launcher

---
 .../buttons/launcher/today_launcher.ts        | 15 --------
 .../src/widgets/containers/launcher.tsx       | 18 ++++++++--
 .../src/widgets/launch_bar/GenericButtons.tsx | 36 +++++++++++++------
 3 files changed, 41 insertions(+), 28 deletions(-)
 delete mode 100644 apps/client/src/widgets/buttons/launcher/today_launcher.ts

diff --git a/apps/client/src/widgets/buttons/launcher/today_launcher.ts b/apps/client/src/widgets/buttons/launcher/today_launcher.ts
deleted file mode 100644
index 7e203bb7b..000000000
--- a/apps/client/src/widgets/buttons/launcher/today_launcher.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import NoteLauncher from "./note_launcher.js";
-import dateNotesService from "../../../services/date_notes.js";
-import appContext from "../../../components/app_context.js";
-
-export default class TodayLauncher extends NoteLauncher {
-    async getTargetNoteId() {
-        const todayNote = await dateNotesService.getTodayNote();
-
-        return todayNote?.noteId;
-    }
-
-    getHoistedNoteId() {
-        return appContext.tabManager.getActiveContext()?.hoistedNoteId;
-    }
-}
diff --git a/apps/client/src/widgets/containers/launcher.tsx b/apps/client/src/widgets/containers/launcher.tsx
index cc6f793f1..d9f6f30ef 100644
--- a/apps/client/src/widgets/containers/launcher.tsx
+++ b/apps/client/src/widgets/containers/launcher.tsx
@@ -3,7 +3,6 @@ import SyncStatusWidget from "../sync_status.js";
 import BasicWidget, { wrapReactWidgets } from "../basic_widget.js";
 import ScriptLauncher from "../buttons/launcher/script_launcher.js";
 import utils from "../../services/utils.js";
-import TodayLauncher from "../buttons/launcher/today_launcher.js";
 import QuickSearchLauncherWidget from "../quick_search_launcher.js";
 import type FNote from "../../entities/fnote.js";
 import BookmarkButtons from "../launch_bar/BookmarkButtons.jsx";
@@ -12,7 +11,8 @@ import HistoryNavigationButton from "../launch_bar/HistoryNavigation.jsx";
 import AiChatButton from "../launch_bar/AiChatButton.jsx";
 import ProtectedSessionStatusWidget from "../launch_bar/ProtectedSessionStatusWidget.jsx";
 import { VNode } from "preact";
-import { CommandButton, NoteLauncher } from "../launch_bar/GenericButtons.jsx";
+import { CommandButton, CustomNoteLauncher, NoteLauncher } from "../launch_bar/GenericButtons.jsx";
+import date_notes from "../../services/date_notes.js";
 
 interface InnerWidget extends BasicWidget {
     settings?: {
@@ -113,7 +113,7 @@ export default class LauncherWidget extends BasicWidget {
             case "forwardInHistoryButton":
                 return <HistoryNavigationButton launcherNote={note} command="forwardInNoteHistory" />
             case "todayInJournal":
-                return new TodayLauncher(note);
+                return <TodayLauncher launcherNote={note} />
             case "quickSearch":
                 return new QuickSearchLauncherWidget(this.isHorizontalLayout);
             case "aiChatLauncher":
@@ -123,3 +123,15 @@ export default class LauncherWidget extends BasicWidget {
         }
     }
 }
+
+function TodayLauncher({ launcherNote }: { launcherNote: FNote }) {
+    return (
+        <CustomNoteLauncher
+            launcherNote={launcherNote}
+            getTargetNoteId={async () => {
+                const todayNote = await date_notes.getTodayNote();
+                return todayNote?.noteId ?? null;
+            }}
+        />
+    );
+}
diff --git a/apps/client/src/widgets/launch_bar/GenericButtons.tsx b/apps/client/src/widgets/launch_bar/GenericButtons.tsx
index 303475214..e9759343e 100644
--- a/apps/client/src/widgets/launch_bar/GenericButtons.tsx
+++ b/apps/client/src/widgets/launch_bar/GenericButtons.tsx
@@ -2,7 +2,7 @@ import appContext, { CommandNames } from "../../components/app_context";
 import FNote from "../../entities/fnote";
 import link_context_menu from "../../menus/link_context_menu";
 import { escapeHtml, isCtrlKey } from "../../services/utils";
-import { useNoteLabel, useNoteProperty, useNoteRelation } from "../react/hooks";
+import { useNoteLabel } from "../react/hooks";
 import { LaunchBarActionButton, useLauncherIconAndTitle } from "./launch_bar_widgets";
 import dialog from "../../services/dialog";
 import { t } from "../../services/i18n";
@@ -20,7 +20,11 @@ export function CommandButton({ launcherNote }: { launcherNote: FNote }) {
     )
 }
 
-export function CustomNoteLauncher({ launcherNote, targetNoteId, hoistedNoteId }: { launcherNote: FNote, targetNoteId: string | null, hoistedNoteId?: string }) {
+export function CustomNoteLauncher({ launcherNote, getTargetNoteId, getHoistedNoteId }: {
+    launcherNote: FNote,
+    getTargetNoteId: (launcherNote: FNote) => string | null | Promise<string | null>,
+    getHoistedNoteId?: (launcherNote: FNote) => string | null
+}) {
     const { icon, title } = useLauncherIconAndTitle(launcherNote);
 
     async function launch(evt: MouseEvent) {
@@ -28,12 +32,10 @@ export function CustomNoteLauncher({ launcherNote, targetNoteId, hoistedNoteId }
             return;
         }
 
-        if (!targetNoteId) {
-            dialog.info(t("note_launcher.this_launcher_doesnt_define_target_note"));
-            return;
-        }
+        const targetNoteId = await getTargetNoteId(launcherNote);
+        if (!targetNoteId) return;
 
-        const hoistedNoteIdWithDefault = hoistedNoteId || launcherNote.getRelationValue("hoistedNote") || appContext.tabManager.getActiveContext()?.hoistedNoteId;
+        const hoistedNoteIdWithDefault = getHoistedNoteId?.(launcherNote) || appContext.tabManager.getActiveContext()?.hoistedNoteId;
         const ctrlKey = isCtrlKey(evt);
 
         if ((evt.which === 1 && ctrlKey) || evt.which === 2) {
@@ -50,8 +52,9 @@ export function CustomNoteLauncher({ launcherNote, targetNoteId, hoistedNoteId }
             text={escapeHtml(title)}
             onClick={launch}
             onAuxClick={launch}
-            onContextMenu={evt => {
+            onContextMenu={async evt => {
                 evt.preventDefault();
+                const targetNoteId = await getTargetNoteId(launcherNote);
                 if (targetNoteId) {
                     link_context_menu.openContextMenu(targetNoteId, evt);
                 }
@@ -68,6 +71,19 @@ export function CustomNoteLauncher({ launcherNote, targetNoteId, hoistedNoteId }
 // The only downside is more work in setting up the typical case
 // where you actually want to have both title and icon in sync, but for those cases there are bookmarks
 export function NoteLauncher({ launcherNote, ...restProps }: { launcherNote: FNote, hoistedNoteId?: string }) {
-    const [ targetNote ] = useNoteRelation(launcherNote, "target");
-    return <CustomNoteLauncher launcherNote={launcherNote} targetNoteId={targetNote ?? null} {...restProps} />
+    return (
+        <CustomNoteLauncher
+            launcherNote={launcherNote}
+            getTargetNoteId={(launcherNote) => {
+                const targetNoteId = launcherNote.getRelationValue("target");
+                if (!targetNoteId) {
+                    dialog.info(t("note_launcher.this_launcher_doesnt_define_target_note"));
+                    return null;
+                }
+                return targetNoteId;
+            }}
+            getHoistedNoteId={launcherNote => launcherNote.getRelationValue("hoistedNote")}
+            {...restProps}
+        />
+    );
 }

From 670edbc22a21770bee1407fe2197d5cd94a4d6e7 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 4 Dec 2025 17:01:35 +0200
Subject: [PATCH 16/29] chore(react/launch_bar): port quick search launcher

---
 .../src/widgets/containers/launcher.tsx       | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/widgets/containers/launcher.tsx b/apps/client/src/widgets/containers/launcher.tsx
index d9f6f30ef..aeb368cff 100644
--- a/apps/client/src/widgets/containers/launcher.tsx
+++ b/apps/client/src/widgets/containers/launcher.tsx
@@ -2,8 +2,7 @@ import CalendarWidget from "../buttons/calendar.js";
 import SyncStatusWidget from "../sync_status.js";
 import BasicWidget, { wrapReactWidgets } from "../basic_widget.js";
 import ScriptLauncher from "../buttons/launcher/script_launcher.js";
-import utils from "../../services/utils.js";
-import QuickSearchLauncherWidget from "../quick_search_launcher.js";
+import utils, { isMobile } from "../../services/utils.js";
 import type FNote from "../../entities/fnote.js";
 import BookmarkButtons from "../launch_bar/BookmarkButtons.jsx";
 import SpacerWidget from "../launch_bar/SpacerWidget.jsx";
@@ -13,6 +12,10 @@ import ProtectedSessionStatusWidget from "../launch_bar/ProtectedSessionStatusWi
 import { VNode } from "preact";
 import { CommandButton, CustomNoteLauncher, NoteLauncher } from "../launch_bar/GenericButtons.jsx";
 import date_notes from "../../services/date_notes.js";
+import { useLegacyWidget, useNoteContext } from "../react/hooks.jsx";
+import QuickSearchWidget from "../quick_search.js";
+import { ParentComponent } from "../react/react_utils.jsx";
+import { useContext } from "preact/hooks";
 
 interface InnerWidget extends BasicWidget {
     settings?: {
@@ -115,7 +118,7 @@ export default class LauncherWidget extends BasicWidget {
             case "todayInJournal":
                 return <TodayLauncher launcherNote={note} />
             case "quickSearch":
-                return new QuickSearchLauncherWidget(this.isHorizontalLayout);
+                return <QuickSearchLauncherWidget isHorizontalLayout={this.isHorizontalLayout} />
             case "aiChatLauncher":
                 return <AiChatButton launcherNote={note} />
             default:
@@ -135,3 +138,16 @@ function TodayLauncher({ launcherNote }: { launcherNote: FNote }) {
         />
     );
 }
+
+function QuickSearchLauncherWidget({ isHorizontalLayout }: { isHorizontalLayout: boolean }) {
+    const [ widgetEl ] = useLegacyWidget(() => new QuickSearchWidget());
+    const parentComponent = useContext(ParentComponent) as BasicWidget | null;
+    const isEnabled = isHorizontalLayout && !isMobile();
+    parentComponent?.contentSized();
+
+    return (
+        <div>
+            {isEnabled && widgetEl}
+        </div>
+    )
+}

From f89c40cde6838339906afc8fcf39d1a6c86dc044 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 4 Dec 2025 17:02:37 +0200
Subject: [PATCH 17/29] fix(react/launch_bar): type error in bookmarks

---
 apps/client/src/widgets/containers/launcher.tsx        | 2 +-
 apps/client/src/widgets/launch_bar/BookmarkButtons.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/widgets/containers/launcher.tsx b/apps/client/src/widgets/containers/launcher.tsx
index aeb368cff..55f518eca 100644
--- a/apps/client/src/widgets/containers/launcher.tsx
+++ b/apps/client/src/widgets/containers/launcher.tsx
@@ -12,7 +12,7 @@ import ProtectedSessionStatusWidget from "../launch_bar/ProtectedSessionStatusWi
 import { VNode } from "preact";
 import { CommandButton, CustomNoteLauncher, NoteLauncher } from "../launch_bar/GenericButtons.jsx";
 import date_notes from "../../services/date_notes.js";
-import { useLegacyWidget, useNoteContext } from "../react/hooks.jsx";
+import { useLegacyWidget } from "../react/hooks.jsx";
 import QuickSearchWidget from "../quick_search.js";
 import { ParentComponent } from "../react/react_utils.jsx";
 import { useContext } from "preact/hooks";
diff --git a/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx b/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx
index a165ce278..676a2a800 100644
--- a/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx
+++ b/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx
@@ -28,7 +28,7 @@ function SingleBookmark({ note }: { note: FNote }) {
     const [ bookmarkFolder ] = useNoteLabelBoolean(note, "bookmarkFolder");
     return bookmarkFolder
         ? <BookmarkFolder note={note} />
-        : <CustomNoteLauncher launcherNote={note} targetNoteId={note.noteId} />
+        : <CustomNoteLauncher launcherNote={note} getTargetNoteId={() => note.noteId} />
 }
 
 function BookmarkFolder({ note }: { note: FNote }) {

From 1f4872f72bd94fdf2349c45c68931e9ce49ee803 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 4 Dec 2025 17:16:47 +0200
Subject: [PATCH 18/29] chore(react/launch_bar): port script launcher

---
 .../buttons/launcher/script_launcher.ts       | 23 ------------------
 .../src/widgets/containers/launcher.tsx       | 24 +++++++++++++++++--
 2 files changed, 22 insertions(+), 25 deletions(-)
 delete mode 100644 apps/client/src/widgets/buttons/launcher/script_launcher.ts

diff --git a/apps/client/src/widgets/buttons/launcher/script_launcher.ts b/apps/client/src/widgets/buttons/launcher/script_launcher.ts
deleted file mode 100644
index 8a91e08b1..000000000
--- a/apps/client/src/widgets/buttons/launcher/script_launcher.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import type FNote from "../../../entities/fnote.js";
-import AbstractLauncher from "./abstract_launcher.js";
-
-export default class ScriptLauncher extends AbstractLauncher {
-    constructor(launcherNote: FNote) {
-        super(launcherNote);
-
-        this.title(() => this.launcherNote.title)
-            .icon(() => this.launcherNote.getIcon())
-            .onClick(() => this.launch());
-    }
-
-    async launch() {
-        if (this.launcherNote.isLabelTruthy("scriptInLauncherContent")) {
-            await this.launcherNote.executeScript();
-        } else {
-            const script = await this.launcherNote.getRelationTarget("script");
-            if (script) {
-                await script.executeScript();
-            }
-        }
-    }
-}
diff --git a/apps/client/src/widgets/containers/launcher.tsx b/apps/client/src/widgets/containers/launcher.tsx
index 55f518eca..f30c9ad28 100644
--- a/apps/client/src/widgets/containers/launcher.tsx
+++ b/apps/client/src/widgets/containers/launcher.tsx
@@ -1,7 +1,6 @@
 import CalendarWidget from "../buttons/calendar.js";
 import SyncStatusWidget from "../sync_status.js";
 import BasicWidget, { wrapReactWidgets } from "../basic_widget.js";
-import ScriptLauncher from "../buttons/launcher/script_launcher.js";
 import utils, { isMobile } from "../../services/utils.js";
 import type FNote from "../../entities/fnote.js";
 import BookmarkButtons from "../launch_bar/BookmarkButtons.jsx";
@@ -16,6 +15,7 @@ import { useLegacyWidget } from "../react/hooks.jsx";
 import QuickSearchWidget from "../quick_search.js";
 import { ParentComponent } from "../react/react_utils.jsx";
 import { useContext } from "preact/hooks";
+import { LaunchBarActionButton, useLauncherIconAndTitle } from "../launch_bar/launch_bar_widgets.jsx";
 
 interface InnerWidget extends BasicWidget {
     settings?: {
@@ -62,7 +62,7 @@ export default class LauncherWidget extends BasicWidget {
         } else if (launcherType === "note") {
             widget = wrapReactWidgets<BasicWidget>([ <NoteLauncher launcherNote={note} /> ])[0];
         } else if (launcherType === "script") {
-            widget = new ScriptLauncher(note).class("launcher-button");
+            widget = wrapReactWidgets<BasicWidget>([ <ScriptLauncher launcherNote={note} /> ])[0];
         } else if (launcherType === "customWidget") {
             widget = await this.initCustomWidget(note);
         } else if (launcherType === "builtinWidget") {
@@ -127,6 +127,26 @@ export default class LauncherWidget extends BasicWidget {
     }
 }
 
+function ScriptLauncher({ launcherNote }: { launcherNote: FNote }) {
+    const { icon, title } = useLauncherIconAndTitle(launcherNote);
+    return (
+        <LaunchBarActionButton
+            icon={icon}
+            text={title}
+            onClick={async () => {
+                if (launcherNote.isLabelTruthy("scriptInLauncherContent")) {
+                    await launcherNote.executeScript();
+                } else {
+                    const script = await launcherNote.getRelationTarget("script");
+                    if (script) {
+                        await script.executeScript();
+                    }
+                }
+            }}
+        />
+    )
+}
+
 function TodayLauncher({ launcherNote }: { launcherNote: FNote }) {
     return (
         <CustomNoteLauncher

From b7d7fc8b674cc7cf5e2b8064a94e02ef71e49fc3 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 4 Dec 2025 17:17:41 +0200
Subject: [PATCH 19/29] chore(react/launch_bar): remove an old file

---
 .../widgets/buttons/launcher/note_launcher.ts | 99 -------------------
 1 file changed, 99 deletions(-)
 delete mode 100644 apps/client/src/widgets/buttons/launcher/note_launcher.ts

diff --git a/apps/client/src/widgets/buttons/launcher/note_launcher.ts b/apps/client/src/widgets/buttons/launcher/note_launcher.ts
deleted file mode 100644
index 00ba956a1..000000000
--- a/apps/client/src/widgets/buttons/launcher/note_launcher.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import { t } from "../../../services/i18n.js";
-import AbstractLauncher from "./abstract_launcher.js";
-import dialogService from "../../../services/dialog.js";
-import appContext from "../../../components/app_context.js";
-import utils from "../../../services/utils.js";
-import linkContextMenuService from "../../../menus/link_context_menu.js";
-import type FNote from "../../../entities/fnote.js";
-
-// we're intentionally displaying the launcher title and icon instead of the target,
-// e.g. you want to make launchers to 2 mermaid diagrams which both have mermaid icon (ok),
-// but on the launchpad you want them distinguishable.
-// for titles, the note titles may follow a different scheme than maybe desirable on the launchpad
-// another reason is the discrepancy between what user sees on the launchpad and in the config (esp. icons).
-// The only downside is more work in setting up the typical case
-// where you actually want to have both title and icon in sync, but for those cases there are bookmarks
-export default class NoteLauncher extends AbstractLauncher {
-    constructor(launcherNote: FNote) {
-        super(launcherNote);
-
-        this.title(() => this.launcherNote.title)
-            .icon(() => this.launcherNote.getIcon())
-            .onClick((widget, evt) => this.launch(evt))
-            .onAuxClick((widget, evt) => this.launch(evt))
-            .onContextMenu(async (evt) => {
-                let targetNoteId = await Promise.resolve(this.getTargetNoteId());
-
-                if (!targetNoteId || !evt) {
-                    return;
-                }
-
-                const hoistedNoteId = this.getHoistedNoteId();
-
-                linkContextMenuService.openContextMenu(targetNoteId, evt, {}, hoistedNoteId);
-            });
-    }
-
-    async launch(evt?: JQuery.ClickEvent | JQuery.ContextMenuEvent | JQuery.TriggeredEvent) {
-        // await because subclass overrides can be async
-        const targetNoteId = await this.getTargetNoteId();
-        if (!targetNoteId || evt?.which === 3) {
-            return;
-        }
-
-        const hoistedNoteId = await this.getHoistedNoteId();
-        if (!hoistedNoteId) {
-            return;
-        }
-
-        if (!evt) {
-            // keyboard shortcut
-            // TODO: Fix once tabManager is ported.
-            //@ts-ignore
-            await appContext.tabManager.openInSameTab(targetNoteId, hoistedNoteId);
-        } else {
-            const ctrlKey = utils.isCtrlKey(evt);
-            const activate = evt.shiftKey ? true : false;
-
-            if ((evt.which === 1 && ctrlKey) || evt.which === 2) {
-                // TODO: Fix once tabManager is ported.
-                //@ts-ignore
-                await appContext.tabManager.openInNewTab(targetNoteId, hoistedNoteId, activate);
-            } else {
-                // TODO: Fix once tabManager is ported.
-                //@ts-ignore
-                await appContext.tabManager.openInSameTab(targetNoteId, hoistedNoteId);
-            }
-        }
-    }
-
-    getTargetNoteId(): void | string | Promise<string | undefined> {
-        const targetNoteId = this.launcherNote.getRelationValue("target");
-
-        if (!targetNoteId) {
-            dialogService.info(t("note_launcher.this_launcher_doesnt_define_target_note"));
-            return;
-        }
-
-        return targetNoteId;
-    }
-
-    getHoistedNoteId() {
-        return this.launcherNote.getRelationValue("hoistedNote") || appContext.tabManager.getActiveContext()?.hoistedNoteId;
-    }
-
-    getTitle() {
-        const shortcuts = this.launcherNote
-            .getLabels("keyboardShortcut")
-            .map((l) => l.value)
-            .filter((v) => !!v)
-            .join(", ");
-
-        let title = super.getTitle();
-        if (shortcuts) {
-            title += ` (${shortcuts})`;
-        }
-
-        return title;
-    }
-}

From 604488b166a135bee14d80c80dc6945506513b09 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 4 Dec 2025 17:55:38 +0200
Subject: [PATCH 20/29] chore(react/launch_bar): port custom widget

---
 .../src/widgets/containers/launcher.tsx       | 35 ++++++++++++++++---
 apps/client/src/widgets/react/hooks.tsx       | 10 ++++++
 packages/commons/src/lib/attribute_names.ts   |  3 +-
 3 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/apps/client/src/widgets/containers/launcher.tsx b/apps/client/src/widgets/containers/launcher.tsx
index f30c9ad28..c61717cf2 100644
--- a/apps/client/src/widgets/containers/launcher.tsx
+++ b/apps/client/src/widgets/containers/launcher.tsx
@@ -11,10 +11,10 @@ import ProtectedSessionStatusWidget from "../launch_bar/ProtectedSessionStatusWi
 import { VNode } from "preact";
 import { CommandButton, CustomNoteLauncher, NoteLauncher } from "../launch_bar/GenericButtons.jsx";
 import date_notes from "../../services/date_notes.js";
-import { useLegacyWidget } from "../react/hooks.jsx";
+import { useLegacyWidget, useNoteContext, useNoteRelation, useNoteRelationTarget } from "../react/hooks.jsx";
 import QuickSearchWidget from "../quick_search.js";
 import { ParentComponent } from "../react/react_utils.jsx";
-import { useContext } from "preact/hooks";
+import { useContext, useEffect, useMemo, useState } from "preact/hooks";
 import { LaunchBarActionButton, useLauncherIconAndTitle } from "../launch_bar/launch_bar_widgets.jsx";
 
 interface InnerWidget extends BasicWidget {
@@ -64,7 +64,7 @@ export default class LauncherWidget extends BasicWidget {
         } else if (launcherType === "script") {
             widget = wrapReactWidgets<BasicWidget>([ <ScriptLauncher launcherNote={note} /> ])[0];
         } else if (launcherType === "customWidget") {
-            widget = await this.initCustomWidget(note);
+            widget = wrapReactWidgets<BasicWidget>([ <CustomWidget launcherNote={note} /> ])[0];
         } else if (launcherType === "builtinWidget") {
             widget = wrapReactWidgets<BasicWidget>([ this.initBuiltinWidget(note) ])[0];
         } else {
@@ -160,14 +160,39 @@ function TodayLauncher({ launcherNote }: { launcherNote: FNote }) {
 }
 
 function QuickSearchLauncherWidget({ isHorizontalLayout }: { isHorizontalLayout: boolean }) {
-    const [ widgetEl ] = useLegacyWidget(() => new QuickSearchWidget());
+    const widget = useMemo(() => new QuickSearchWidget(), []);
     const parentComponent = useContext(ParentComponent) as BasicWidget | null;
     const isEnabled = isHorizontalLayout && !isMobile();
     parentComponent?.contentSized();
 
     return (
         <div>
-            {isEnabled && widgetEl}
+            {isEnabled && <LegacyWidgetRenderer widget={widget} />}
         </div>
     )
 }
+
+function CustomWidget({ launcherNote }: { launcherNote: FNote }) {
+    const [ widgetNote ] = useNoteRelationTarget(launcherNote, "widget");
+    const [ widget, setWidget ] = useState<BasicWidget>();
+    const parentComponent = useContext(ParentComponent) as BasicWidget | null;
+    parentComponent?.contentSized();
+
+    useEffect(() => {
+        widgetNote?.executeScript().then(setWidget);
+    }, [ widgetNote ]);
+
+    return (
+        <div>
+            {widget && <LegacyWidgetRenderer widget={widget} />}
+        </div>
+    )
+}
+
+function LegacyWidgetRenderer({ widget }: { widget: BasicWidget }) {
+    const { noteContext } = useNoteContext();
+    const [ widgetEl ] = useLegacyWidget(() => widget, {
+        noteContext
+    });
+    return widgetEl;
+}
diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx
index c602802d5..77119ce18 100644
--- a/apps/client/src/widgets/react/hooks.tsx
+++ b/apps/client/src/widgets/react/hooks.tsx
@@ -370,6 +370,16 @@ export function useNoteRelation(note: FNote | undefined | null, relationName: Re
     ] as const;
 }
 
+export function useNoteRelationTarget(note: FNote, relationName: RelationNames) {
+    const [ targetNote, setTargetNote ] = useState<FNote | null>();
+
+    useEffect(() => {
+        note.getRelationTarget(relationName).then(setTargetNote);
+    }, [ note ]);
+
+    return [ targetNote ] as const;
+}
+
 /**
  * Allows a React component to read or write a note's label while also reacting to changes in value.
  *
diff --git a/packages/commons/src/lib/attribute_names.ts b/packages/commons/src/lib/attribute_names.ts
index 04d365f1a..16793b964 100644
--- a/packages/commons/src/lib/attribute_names.ts
+++ b/packages/commons/src/lib/attribute_names.ts
@@ -62,7 +62,8 @@ type Relations = [
     "ancestor",
 
     // Launcher-specific
-    "target"
+    "target",
+    "widget"
 ];
 
 export type LabelNames = keyof Labels;

From 5c8445f3fec22d59289076019dad408e1825ef92 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 4 Dec 2025 19:03:28 +0200
Subject: [PATCH 21/29] chore(react/launch_bar): get calendar to render days

---
 apps/client/src/widgets/buttons/calendar.ts   | 139 +--------------
 .../src/widgets/containers/launcher.tsx       |   4 +-
 .../launch_bar/CalendarWidget.css}            |   0
 .../src/widgets/launch_bar/CalendarWidget.tsx | 159 ++++++++++++++++++
 .../widgets/launch_bar/launch_bar_widgets.tsx |   2 +-
 5 files changed, 165 insertions(+), 139 deletions(-)
 rename apps/client/src/{stylesheets/calendar.css => widgets/launch_bar/CalendarWidget.css} (100%)
 create mode 100644 apps/client/src/widgets/launch_bar/CalendarWidget.tsx

diff --git a/apps/client/src/widgets/buttons/calendar.ts b/apps/client/src/widgets/buttons/calendar.ts
index 296699882..75e01af1b 100644
--- a/apps/client/src/widgets/buttons/calendar.ts
+++ b/apps/client/src/widgets/buttons/calendar.ts
@@ -8,7 +8,6 @@ import options from "../../services/options.js";
 import { Dropdown } from "bootstrap";
 import type { EventData } from "../../components/app_context.js";
 import { dayjs, type Dayjs } from "@triliumnext/commons";
-import "../../stylesheets/calendar.css";
 import type { AttributeRow, OptionDefinitions } from "@triliumnext/commons";
 
 const MONTHS = [
@@ -28,12 +27,6 @@ const MONTHS = [
 
 const DROPDOWN_TPL = `
 <div class="calendar-dropdown-widget">
-    <style>
-        .calendar-dropdown-widget {
-            width: 400px;
-        }
-    </style>
-
     <div class="calendar-header">
         <div class="calendar-month-selector">
             <button class="calendar-btn tn-tool-button bx bx-chevron-left" data-calendar-toggle="previous"></button>
@@ -61,7 +54,6 @@ const DROPDOWN_TPL = `
     </div>
 
     <div class="calendar-week"></div>
-    <div class="calendar-body" data-calendar-area="month"></div>
 </div>`;
 
 const DAYS_OF_WEEK = [
@@ -74,9 +66,7 @@ const DAYS_OF_WEEK = [
     t("calendar.sat")
 ];
 
-interface DateNotesForMonth {
-    [date: string]: string;
-}
+
 
 interface WeekCalculationOptions {
     firstWeekType: number;
@@ -228,9 +218,6 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
 
     // Store firstDayOfWeek as ISO (1–7)
     manageFirstDayOfWeek() {
-        const rawFirstDayOfWeek = options.getInt("firstDayOfWeek") || 0;
-        this.firstDayOfWeekISO = rawFirstDayOfWeek === 0 ? 7 : rawFirstDayOfWeek;
-
         let localeDaysOfWeek = [...DAYS_OF_WEEK];
         const shifted = localeDaysOfWeek.splice(0, rawFirstDayOfWeek);
         localeDaysOfWeek = ['', ...localeDaysOfWeek, ...shifted];
@@ -244,34 +231,13 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
         };
     }
 
-    getWeekStartDate(date: Dayjs): Dayjs {
-        const currentISO = date.isoWeekday();
-        const diff = (currentISO - this.firstDayOfWeekISO + 7) % 7;
-        return date.clone().subtract(diff, "day").startOf("day");
-    }
-
-    getWeekNumber(date: Dayjs): number {
-        const weekStart = this.getWeekStartDate(date);
-        return weekStart.isoWeek();
-    }
-
     async dropdownShown() {
         await this.getWeekNoteEnable();
         this.weekNotes = await server.get<string[]>(`attribute-values/weekNote`);
-        this.init(appContext.tabManager.getActiveContextNote()?.getOwnedLabelValue("dateNote") ?? null);
+        this.init( ?? null);
     }
 
-    init(activeDate: string | null) {
-        this.activeDate = activeDate ? dayjs(`${activeDate}T12:00:00`) : null;
-        this.todaysDate = dayjs();
-        this.date = dayjs(this.activeDate || this.todaysDate).startOf('month');
-        this.createMonth();
-    }
-
-    createDay(dateNotesForMonth: DateNotesForMonth, num: number) {
-        const $newDay = $("<a>")
-            .addClass("calendar-date")
-            .attr("data-calendar-date", this.date.local().format('YYYY-MM-DD'));
+    createDay() {
         const $date = $("<span>").html(String(num));
         const dateNoteId = dateNotesForMonth[this.date.local().format('YYYY-MM-DD')];
 
@@ -304,105 +270,6 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
         return $newWeekNumber;
     }
 
-    // Use isoWeekday() consistently
-    private getPrevMonthDays(firstDayISO: number): { weekNumber: number, dates: Dayjs[] } {
-        const prevMonthLastDay = this.date.subtract(1, 'month').endOf('month');
-        const daysToAdd = (firstDayISO - this.firstDayOfWeekISO + 7) % 7;
-        const dates: Dayjs[] = [];
-
-        const firstDay = this.date.startOf('month');
-        const weekNumber = this.getWeekNumber(firstDay);
-
-        // Get dates from previous month
-        for (let i = daysToAdd - 1; i >= 0; i--) {
-            dates.push(prevMonthLastDay.subtract(i, 'day'));
-        }
-
-        return { weekNumber, dates };
-    }
-
-    private getNextMonthDays(lastDayISO: number): Dayjs[] {
-        const nextMonthFirstDay = this.date.add(1, 'month').startOf('month');
-        const dates: Dayjs[] = [];
-
-        const lastDayOfUserWeek = ((this.firstDayOfWeekISO + 6 - 1) % 7) + 1; // ISO wrap
-        const daysToAdd = (lastDayOfUserWeek - lastDayISO + 7) % 7;
-
-        for (let i = 0; i < daysToAdd; i++) {
-            dates.push(nextMonthFirstDay.add(i, 'day'));
-        }
-        return dates;
-    }
-
-    async createMonth() {
-        const month = this.date.format('YYYY-MM');
-        const dateNotesForMonth: DateNotesForMonth = await server.get(`special-notes/notes-for-month/${month}`);
-
-        this.$month.empty();
-
-        const firstDay = this.date.startOf('month');
-        const firstDayISO = firstDay.isoWeekday();
-
-        // Previous month filler
-        if (firstDayISO !== this.firstDayOfWeekISO) {
-            const { weekNumber, dates } = this.getPrevMonthDays(firstDayISO);
-            const prevMonth = this.date.subtract(1, 'month').format('YYYY-MM');
-            const dateNotesForPrevMonth: DateNotesForMonth = await server.get(`special-notes/notes-for-month/${prevMonth}`);
-
-            const $weekNumber = this.createWeekNumber(weekNumber);
-            this.$month.append($weekNumber);
-
-            dates.forEach(date => {
-                const tempDate = this.date;
-                this.date = date;
-                const $day = this.createDay(dateNotesForPrevMonth, date.date());
-                $day.addClass('calendar-date-prev-month');
-                this.$month.append($day);
-                this.date = tempDate;
-            });
-        }
-
-        const currentMonth = this.date.month();
-
-        // Main month
-        while (this.date.month() === currentMonth) {
-            const weekNumber = this.getWeekNumber(this.date);
-            if (this.date.isoWeekday() === this.firstDayOfWeekISO) {
-                const $weekNumber = this.createWeekNumber(weekNumber);
-                this.$month.append($weekNumber);
-            }
-
-            const $day = this.createDay(dateNotesForMonth, this.date.date());
-            this.$month.append($day);
-            this.date = this.date.add(1, 'day');
-        }
-        // while loop trips over and day is at 30/31, bring it back
-        this.date = this.date.startOf('month').subtract(1, 'month');
-
-        // Add dates from next month
-        const lastDayOfMonth = this.date.endOf('month');
-        const lastDayISO = lastDayOfMonth.isoWeekday();
-        const lastDayOfUserWeek = ((this.firstDayOfWeekISO + 6 - 1) % 7) + 1;
-
-        if (lastDayISO !== lastDayOfUserWeek) {
-            const dates = this.getNextMonthDays(lastDayISO);
-            const nextMonth = this.date.add(1, 'month').format('YYYY-MM');
-            const dateNotesForNextMonth: DateNotesForMonth = await server.get(`special-notes/notes-for-month/${nextMonth}`);
-
-            dates.forEach(date => {
-                const tempDate = this.date;
-                this.date = date;
-                const $day = this.createDay(dateNotesForNextMonth, date.date());
-                $day.addClass('calendar-date-next-month');
-                this.$month.append($day);
-                this.date = tempDate;
-            });
-        }
-
-        this.$monthSelect.text(MONTHS[this.date.month()]);
-        this.$yearSelect.val(this.date.year());
-    }
-
     async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
         const WEEK_OPTIONS: (keyof OptionDefinitions)[] = [
             "firstDayOfWeek",
diff --git a/apps/client/src/widgets/containers/launcher.tsx b/apps/client/src/widgets/containers/launcher.tsx
index c61717cf2..2e9b6693f 100644
--- a/apps/client/src/widgets/containers/launcher.tsx
+++ b/apps/client/src/widgets/containers/launcher.tsx
@@ -1,4 +1,3 @@
-import CalendarWidget from "../buttons/calendar.js";
 import SyncStatusWidget from "../sync_status.js";
 import BasicWidget, { wrapReactWidgets } from "../basic_widget.js";
 import utils, { isMobile } from "../../services/utils.js";
@@ -16,6 +15,7 @@ import QuickSearchWidget from "../quick_search.js";
 import { ParentComponent } from "../react/react_utils.jsx";
 import { useContext, useEffect, useMemo, useState } from "preact/hooks";
 import { LaunchBarActionButton, useLauncherIconAndTitle } from "../launch_bar/launch_bar_widgets.jsx";
+import CalendarWidget from "../launch_bar/CalendarWidget.jsx";
 
 interface InnerWidget extends BasicWidget {
     settings?: {
@@ -98,7 +98,7 @@ export default class LauncherWidget extends BasicWidget {
         const builtinWidget = note.getLabelValue("builtinWidget");
         switch (builtinWidget) {
             case "calendar":
-                return new CalendarWidget(note.title, note.getIcon());
+                return <CalendarWidget launcherNote={note} />
             case "spacer":
                 // || has to be inside since 0 is a valid value
                 const baseSize = parseInt(note.getLabelValue("baseSize") || "40");
diff --git a/apps/client/src/stylesheets/calendar.css b/apps/client/src/widgets/launch_bar/CalendarWidget.css
similarity index 100%
rename from apps/client/src/stylesheets/calendar.css
rename to apps/client/src/widgets/launch_bar/CalendarWidget.css
diff --git a/apps/client/src/widgets/launch_bar/CalendarWidget.tsx b/apps/client/src/widgets/launch_bar/CalendarWidget.tsx
new file mode 100644
index 000000000..ca562bb38
--- /dev/null
+++ b/apps/client/src/widgets/launch_bar/CalendarWidget.tsx
@@ -0,0 +1,159 @@
+import { useEffect, useState } from "preact/hooks";
+import FNote from "../../entities/fnote";
+import { LaunchBarDropdownButton, useLauncherIconAndTitle } from "./launch_bar_widgets";
+import { Dayjs, dayjs } from "@triliumnext/commons";
+import appContext from "../../components/app_context";
+import { useTriliumOptionInt } from "../react/hooks";
+import { VNode } from "preact";
+import clsx from "clsx";
+import "./CalendarWidget.css";
+import server from "../../services/server";
+
+interface DateNotesForMonth {
+    [date: string]: string;
+}
+
+export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }) {
+    const { title, icon } = useLauncherIconAndTitle(launcherNote);
+    const [ date, setDate ] = useState<Dayjs>();
+    const [ rawFirstDayOfWeek ] = useTriliumOptionInt("firstDayOfWeek") ?? 0;
+    const firstDayOfWeekISO = (rawFirstDayOfWeek === 0 ? 7 : rawFirstDayOfWeek);
+
+    useEffect(() => {
+
+    })
+
+    return (
+        <LaunchBarDropdownButton
+            icon={icon} title={title}
+            onShown={() => {
+                const dateNote = appContext.tabManager.getActiveContextNote()?.getOwnedLabelValue("dateNote");
+                const activeDate = dateNote ? dayjs(`${dateNote}T12:00:00`) : null;
+                const todaysDate = dayjs();
+                const date = dayjs(activeDate || todaysDate).startOf('month');
+                setDate(date);
+            }}
+        >
+            {date && <div className="calendar-dropdown-widget" style={{ width: 400 }}>
+                <Calendar date={date} firstDayOfWeekISO={firstDayOfWeekISO} />
+            </div>}
+        </LaunchBarDropdownButton>
+    )
+}
+
+function Calendar({ date, firstDayOfWeekISO }: { date: Dayjs, firstDayOfWeekISO: number }) {
+    const month = date.format('YYYY-MM');
+    const firstDay = date.startOf('month');
+    const firstDayISO = firstDay.isoWeekday();
+
+    return (
+        <div className="calendar-body" data-calendar-area="month">
+            {firstDayISO !== firstDayOfWeekISO && <PreviousMonthDays date={date} firstDayISO={firstDayISO} firstDayOfWeekISO={firstDayOfWeekISO} />}
+            <CurrentMonthDays date={date} firstDayOfWeekISO={firstDayOfWeekISO} />
+            <NextMonthDays date={date} firstDayOfWeekISO={firstDayOfWeekISO} />
+        </div>
+    )
+}
+
+function PreviousMonthDays({ date, firstDayISO, firstDayOfWeekISO }: { date: Dayjs, firstDayISO: number, firstDayOfWeekISO: number }) {
+    const prevMonth = date.subtract(1, 'month').format('YYYY-MM');
+    const { weekNumber, dates } = getPrevMonthDays(date, firstDayISO, firstDayOfWeekISO);
+    const [ dateNotesForPrevMonth, setDateNotesForPrevMonth ] = useState<DateNotesForMonth>();
+
+    useEffect(() => {
+        server.get<DateNotesForMonth>(`special-notes/notes-for-month/${prevMonth}`).then(setDateNotesForPrevMonth);
+    }, [ date ]);
+
+    return dates.map(date => (
+        <CalendarDay date={date} dateNotesForMonth={dateNotesForPrevMonth} className="calendar-date-prev-month" />
+    ));
+}
+
+function CurrentMonthDays({ date, firstDayOfWeekISO }: { date: Dayjs, firstDayOfWeekISO: number }) {
+    const dates = getCurMonthDays(date, firstDayOfWeekISO);
+
+    return dates.map(date => (
+        <CalendarDay date={date} dateNotesForMonth={{}} />
+    ));
+}
+
+function NextMonthDays({ date, firstDayOfWeekISO }: { date: Dayjs, firstDayOfWeekISO: number }) {
+    const lastDayOfMonth = date.endOf('month');
+    const lastDayISO = lastDayOfMonth.isoWeekday();
+    const lastDayOfUserWeek = ((firstDayOfWeekISO + 6 - 1) % 7) + 1;
+    const nextMonth = date.add(1, 'month').format('YYYY-MM');
+    const [ dateNotesForNextMonth, setDateNotesForNextMonth ] = useState<DateNotesForMonth>();
+
+    useEffect(() => {
+        server.get<DateNotesForMonth>(`special-notes/notes-for-month/${nextMonth}`).then(setDateNotesForNextMonth);
+    }, [ date ]);
+
+    const dates = lastDayISO !== lastDayOfUserWeek ? getNextMonthDays(date, lastDayISO, firstDayOfWeekISO) : [];
+    return dates.map(date => (
+        <CalendarDay date={date} dateNotesForMonth={dateNotesForNextMonth} className="calendar-date-next-month" />
+    ));
+}
+
+function CalendarDay({ date, dateNotesForMonth, className }: { date: Dayjs, dateNotesForMonth?: DateNotesForMonth, className?: string }) {
+    return (
+        <a
+            className={clsx("calendar-date", className)}
+            data-calendar-date={date.local().format("YYYY-MM-DD")}
+        >
+            <span>
+                {date.date()}
+            </span>
+        </a>
+    );
+}
+
+function getPrevMonthDays(date: Dayjs, firstDayISO: number, firstDayOfWeekISO: number): { weekNumber: number, dates: Dayjs[] } {
+    const prevMonthLastDay = date.subtract(1, 'month').endOf('month');
+    const daysToAdd = (firstDayISO - firstDayOfWeekISO + 7) % 7;
+    const dates: Dayjs[] = [];
+
+    const firstDay = date.startOf('month');
+    const weekNumber = getWeekNumber(firstDay, firstDayOfWeekISO);
+
+    // Get dates from previous month
+    for (let i = daysToAdd - 1; i >= 0; i--) {
+        dates.push(prevMonthLastDay.subtract(i, 'day'));
+    }
+
+    return { weekNumber, dates };
+}
+
+function getCurMonthDays(date: Dayjs, firstDayOfWeekISO: number) {
+    let dateCursor = date;
+    const currentMonth = date.month();
+    const dates: Dayjs[] = [];
+    while (dateCursor.month() === currentMonth) {
+        dates.push(dateCursor);
+        dateCursor = dateCursor.add(1, "day");
+    }
+    return dates;
+}
+
+function getNextMonthDays(date: Dayjs, lastDayISO: number, firstDayOfWeekISO): Dayjs[] {
+    const nextMonthFirstDay = date.add(1, 'month').startOf('month');
+    const dates: Dayjs[] = [];
+
+    const lastDayOfUserWeek = ((firstDayOfWeekISO + 6 - 1) % 7) + 1; // ISO wrap
+    const daysToAdd = (lastDayOfUserWeek - lastDayISO + 7) % 7;
+
+    for (let i = 0; i < daysToAdd; i++) {
+        dates.push(nextMonthFirstDay.add(i, 'day'));
+    }
+    return dates;
+}
+
+function getWeekNumber(date: Dayjs, firstDayOfWeekISO: number): number {
+    const weekStart = getWeekStartDate(date, firstDayOfWeekISO);
+    return weekStart.isoWeek();
+}
+
+function getWeekStartDate(date: Dayjs, firstDayOfWeekISO: number): Dayjs {
+    const currentISO = date.isoWeekday();
+    const diff = (currentISO - firstDayOfWeekISO + 7) % 7;
+    return date.clone().subtract(diff, "day").startOf("day");
+}
diff --git a/apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx b/apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx
index 5a72e0f54..715b5dbe5 100644
--- a/apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx
+++ b/apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx
@@ -20,7 +20,7 @@ export function LaunchBarActionButton(props: Omit<ActionButtonProps, "className"
     )
 }
 
-export function LaunchBarDropdownButton({ children, icon, ...props }: Pick<DropdownProps, "title" | "children"> & { icon: string }) {
+export function LaunchBarDropdownButton({ children, icon, ...props }: Pick<DropdownProps, "title" | "children" | "onShown"> & { icon: string }) {
     return (
         <Dropdown
             className="right-dropdown-widget"

From bab5326d7c0a40050d3fb3185663199b9983c956 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 4 Dec 2025 19:22:28 +0200
Subject: [PATCH 22/29] refactor(react/launch_bar): use different mechanism for
 gathering calendar info

---
 .../src/widgets/launch_bar/CalendarWidget.tsx | 71 ++---------------
 .../widgets/launch_bar/CalendarWidgetUtils.ts | 76 +++++++++++++++++++
 2 files changed, 84 insertions(+), 63 deletions(-)
 create mode 100644 apps/client/src/widgets/launch_bar/CalendarWidgetUtils.ts

diff --git a/apps/client/src/widgets/launch_bar/CalendarWidget.tsx b/apps/client/src/widgets/launch_bar/CalendarWidget.tsx
index ca562bb38..1e149041c 100644
--- a/apps/client/src/widgets/launch_bar/CalendarWidget.tsx
+++ b/apps/client/src/widgets/launch_bar/CalendarWidget.tsx
@@ -8,6 +8,7 @@ import { VNode } from "preact";
 import clsx from "clsx";
 import "./CalendarWidget.css";
 import server from "../../services/server";
+import { getMonthInformation } from "./CalendarWidgetUtils";
 
 interface DateNotesForMonth {
     [date: string]: string;
@@ -45,19 +46,19 @@ function Calendar({ date, firstDayOfWeekISO }: { date: Dayjs, firstDayOfWeekISO:
     const month = date.format('YYYY-MM');
     const firstDay = date.startOf('month');
     const firstDayISO = firstDay.isoWeekday();
+    const monthInfo = getMonthInformation(date, firstDayISO, firstDayOfWeekISO);
 
     return (
         <div className="calendar-body" data-calendar-area="month">
-            {firstDayISO !== firstDayOfWeekISO && <PreviousMonthDays date={date} firstDayISO={firstDayISO} firstDayOfWeekISO={firstDayOfWeekISO} />}
-            <CurrentMonthDays date={date} firstDayOfWeekISO={firstDayOfWeekISO} />
-            <NextMonthDays date={date} firstDayOfWeekISO={firstDayOfWeekISO} />
+            {firstDayISO !== firstDayOfWeekISO && <PreviousMonthDays date={date} dates={monthInfo.prevMonth.dates} />}
+            <CurrentMonthDays date={date} dates={monthInfo.currentMonth.dates} />
+            <NextMonthDays date={date} dates={monthInfo.nextMonth.dates} />
         </div>
     )
 }
 
-function PreviousMonthDays({ date, firstDayISO, firstDayOfWeekISO }: { date: Dayjs, firstDayISO: number, firstDayOfWeekISO: number }) {
+function PreviousMonthDays({ date, dates }: { date: Dayjs, dates: Dayjs[] }) {
     const prevMonth = date.subtract(1, 'month').format('YYYY-MM');
-    const { weekNumber, dates } = getPrevMonthDays(date, firstDayISO, firstDayOfWeekISO);
     const [ dateNotesForPrevMonth, setDateNotesForPrevMonth ] = useState<DateNotesForMonth>();
 
     useEffect(() => {
@@ -69,18 +70,13 @@ function PreviousMonthDays({ date, firstDayISO, firstDayOfWeekISO }: { date: Day
     ));
 }
 
-function CurrentMonthDays({ date, firstDayOfWeekISO }: { date: Dayjs, firstDayOfWeekISO: number }) {
-    const dates = getCurMonthDays(date, firstDayOfWeekISO);
-
+function CurrentMonthDays({ date, dates }: { date: Dayjs, dates: Dayjs[] }) {
     return dates.map(date => (
         <CalendarDay date={date} dateNotesForMonth={{}} />
     ));
 }
 
-function NextMonthDays({ date, firstDayOfWeekISO }: { date: Dayjs, firstDayOfWeekISO: number }) {
-    const lastDayOfMonth = date.endOf('month');
-    const lastDayISO = lastDayOfMonth.isoWeekday();
-    const lastDayOfUserWeek = ((firstDayOfWeekISO + 6 - 1) % 7) + 1;
+function NextMonthDays({ date, dates }: { date: Dayjs, dates: Dayjs[] }) {
     const nextMonth = date.add(1, 'month').format('YYYY-MM');
     const [ dateNotesForNextMonth, setDateNotesForNextMonth ] = useState<DateNotesForMonth>();
 
@@ -88,7 +84,6 @@ function NextMonthDays({ date, firstDayOfWeekISO }: { date: Dayjs, firstDayOfWee
         server.get<DateNotesForMonth>(`special-notes/notes-for-month/${nextMonth}`).then(setDateNotesForNextMonth);
     }, [ date ]);
 
-    const dates = lastDayISO !== lastDayOfUserWeek ? getNextMonthDays(date, lastDayISO, firstDayOfWeekISO) : [];
     return dates.map(date => (
         <CalendarDay date={date} dateNotesForMonth={dateNotesForNextMonth} className="calendar-date-next-month" />
     ));
@@ -107,53 +102,3 @@ function CalendarDay({ date, dateNotesForMonth, className }: { date: Dayjs, date
     );
 }
 
-function getPrevMonthDays(date: Dayjs, firstDayISO: number, firstDayOfWeekISO: number): { weekNumber: number, dates: Dayjs[] } {
-    const prevMonthLastDay = date.subtract(1, 'month').endOf('month');
-    const daysToAdd = (firstDayISO - firstDayOfWeekISO + 7) % 7;
-    const dates: Dayjs[] = [];
-
-    const firstDay = date.startOf('month');
-    const weekNumber = getWeekNumber(firstDay, firstDayOfWeekISO);
-
-    // Get dates from previous month
-    for (let i = daysToAdd - 1; i >= 0; i--) {
-        dates.push(prevMonthLastDay.subtract(i, 'day'));
-    }
-
-    return { weekNumber, dates };
-}
-
-function getCurMonthDays(date: Dayjs, firstDayOfWeekISO: number) {
-    let dateCursor = date;
-    const currentMonth = date.month();
-    const dates: Dayjs[] = [];
-    while (dateCursor.month() === currentMonth) {
-        dates.push(dateCursor);
-        dateCursor = dateCursor.add(1, "day");
-    }
-    return dates;
-}
-
-function getNextMonthDays(date: Dayjs, lastDayISO: number, firstDayOfWeekISO): Dayjs[] {
-    const nextMonthFirstDay = date.add(1, 'month').startOf('month');
-    const dates: Dayjs[] = [];
-
-    const lastDayOfUserWeek = ((firstDayOfWeekISO + 6 - 1) % 7) + 1; // ISO wrap
-    const daysToAdd = (lastDayOfUserWeek - lastDayISO + 7) % 7;
-
-    for (let i = 0; i < daysToAdd; i++) {
-        dates.push(nextMonthFirstDay.add(i, 'day'));
-    }
-    return dates;
-}
-
-function getWeekNumber(date: Dayjs, firstDayOfWeekISO: number): number {
-    const weekStart = getWeekStartDate(date, firstDayOfWeekISO);
-    return weekStart.isoWeek();
-}
-
-function getWeekStartDate(date: Dayjs, firstDayOfWeekISO: number): Dayjs {
-    const currentISO = date.isoWeekday();
-    const diff = (currentISO - firstDayOfWeekISO + 7) % 7;
-    return date.clone().subtract(diff, "day").startOf("day");
-}
diff --git a/apps/client/src/widgets/launch_bar/CalendarWidgetUtils.ts b/apps/client/src/widgets/launch_bar/CalendarWidgetUtils.ts
new file mode 100644
index 000000000..16d057107
--- /dev/null
+++ b/apps/client/src/widgets/launch_bar/CalendarWidgetUtils.ts
@@ -0,0 +1,76 @@
+import { Dayjs } from "@triliumnext/commons";
+
+interface DateRangeInfo {
+    weekNumbers: number[];
+    dates: Dayjs[];
+}
+
+export function getMonthInformation(date: Dayjs, firstDayISO: number, firstDayOfWeekISO: number) {
+    return {
+        prevMonth: getPrevMonthDays(date, firstDayISO, firstDayOfWeekISO),
+        currentMonth: getCurMonthDays(date, firstDayOfWeekISO),
+        nextMonth: getNextMonthDays(date, firstDayOfWeekISO)
+    }
+}
+
+function getPrevMonthDays(date: Dayjs, firstDayISO: number, firstDayOfWeekISO: number): DateRangeInfo {
+    const prevMonthLastDay = date.subtract(1, 'month').endOf('month');
+    const daysToAdd = (firstDayISO - firstDayOfWeekISO + 7) % 7;
+    const dates: Dayjs[] = [];
+
+    const firstDay = date.startOf('month');
+    const weekNumber = getWeekNumber(firstDay, firstDayOfWeekISO);
+
+    // Get dates from previous month
+    for (let i = daysToAdd - 1; i >= 0; i--) {
+        dates.push(prevMonthLastDay.subtract(i, 'day'));
+    }
+
+    return { weekNumbers: [ weekNumber ], dates };
+}
+
+function getCurMonthDays(date: Dayjs, firstDayOfWeekISO: number): DateRangeInfo {
+    let dateCursor = date;
+    const currentMonth = date.month();
+    const dates: Dayjs[] = [];
+    const weekNumbers: number[] = [];
+    while (dateCursor.month() === currentMonth) {
+        const weekNumber = getWeekNumber(date, firstDayOfWeekISO);
+        if (date.isoWeekday() === firstDayOfWeekISO) {
+            weekNumbers.push(weekNumber);
+        }
+
+        dates.push(dateCursor);
+        dateCursor = dateCursor.add(1, "day");
+
+    }
+    return { weekNumbers, dates };
+}
+
+function getNextMonthDays(date: Dayjs, firstDayOfWeekISO: number): DateRangeInfo {
+    const lastDayOfMonth = date.endOf('month');
+    const lastDayISO = lastDayOfMonth.isoWeekday();
+    const lastDayOfUserWeek = ((firstDayOfWeekISO + 6 - 1) % 7) + 1;
+    const nextMonthFirstDay = date.add(1, 'month').startOf('month');
+    const dates: Dayjs[] = [];
+
+    if (lastDayISO !== lastDayOfUserWeek) {
+        const daysToAdd = (lastDayOfUserWeek - lastDayISO + 7) % 7;
+
+        for (let i = 0; i < daysToAdd; i++) {
+            dates.push(nextMonthFirstDay.add(i, 'day'));
+        }
+    }
+    return { weekNumbers: [], dates };
+}
+
+function getWeekNumber(date: Dayjs, firstDayOfWeekISO: number): number {
+    const weekStart = getWeekStartDate(date, firstDayOfWeekISO);
+    return weekStart.isoWeek();
+}
+
+function getWeekStartDate(date: Dayjs, firstDayOfWeekISO: number): Dayjs {
+    const currentISO = date.isoWeekday();
+    const diff = (currentISO - firstDayOfWeekISO + 7) % 7;
+    return date.clone().subtract(diff, "day").startOf("day");
+}

From 0d8127140f0bc6aa3c70ac0eaee1aa5585175f8f Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 4 Dec 2025 19:38:56 +0200
Subject: [PATCH 23/29] chore(react/launch_bar): get week numbers to render

---
 apps/client/src/widgets/buttons/calendar.ts   |  5 +--
 .../src/widgets/launch_bar/CalendarWidget.tsx | 43 +++++++++++++------
 .../widgets/launch_bar/CalendarWidgetUtils.ts | 23 +---------
 3 files changed, 35 insertions(+), 36 deletions(-)

diff --git a/apps/client/src/widgets/buttons/calendar.ts b/apps/client/src/widgets/buttons/calendar.ts
index 75e01af1b..286b94a14 100644
--- a/apps/client/src/widgets/buttons/calendar.ts
+++ b/apps/client/src/widgets/buttons/calendar.ts
@@ -53,7 +53,7 @@ const DROPDOWN_TPL = `
         </div>
     </div>
 
-    <div class="calendar-week"></div>
+
 </div>`;
 
 const DAYS_OF_WEEK = [
@@ -262,11 +262,10 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
                 $newWeekNumber.addClass("calendar-date-exists").attr("data-href", `#root/${weekNoteId}`);
             }
         } else {
-            $newWeekNumber = $("<span>").addClass("calendar-week-number-disabled");
+
         }
 
         $newWeekNumber.addClass("calendar-week-number").attr("data-calendar-week-number", weekNoteId);
-        $newWeekNumber.append($("<span>").html(String(weekNumber)));
         return $newWeekNumber;
     }
 
diff --git a/apps/client/src/widgets/launch_bar/CalendarWidget.tsx b/apps/client/src/widgets/launch_bar/CalendarWidget.tsx
index 1e149041c..b8b94ba73 100644
--- a/apps/client/src/widgets/launch_bar/CalendarWidget.tsx
+++ b/apps/client/src/widgets/launch_bar/CalendarWidget.tsx
@@ -4,11 +4,11 @@ import { LaunchBarDropdownButton, useLauncherIconAndTitle } from "./launch_bar_w
 import { Dayjs, dayjs } from "@triliumnext/commons";
 import appContext from "../../components/app_context";
 import { useTriliumOptionInt } from "../react/hooks";
-import { VNode } from "preact";
 import clsx from "clsx";
 import "./CalendarWidget.css";
 import server from "../../services/server";
-import { getMonthInformation } from "./CalendarWidgetUtils";
+import { DateRangeInfo, getMonthInformation, getWeekNumber } from "./CalendarWidgetUtils";
+import { VNode } from "preact";
 
 interface DateNotesForMonth {
     [date: string]: string;
@@ -50,14 +50,14 @@ function Calendar({ date, firstDayOfWeekISO }: { date: Dayjs, firstDayOfWeekISO:
 
     return (
         <div className="calendar-body" data-calendar-area="month">
-            {firstDayISO !== firstDayOfWeekISO && <PreviousMonthDays date={date} dates={monthInfo.prevMonth.dates} />}
-            <CurrentMonthDays date={date} dates={monthInfo.currentMonth.dates} />
+            {firstDayISO !== firstDayOfWeekISO && <PreviousMonthDays date={date} info={monthInfo.prevMonth} />}
+            <CurrentMonthDays date={date} firstDayOfWeekISO={firstDayOfWeekISO} />
             <NextMonthDays date={date} dates={monthInfo.nextMonth.dates} />
         </div>
     )
 }
 
-function PreviousMonthDays({ date, dates }: { date: Dayjs, dates: Dayjs[] }) {
+function PreviousMonthDays({ date, info: { dates, weekNumbers } }: { date: Dayjs, info: DateRangeInfo }) {
     const prevMonth = date.subtract(1, 'month').format('YYYY-MM');
     const [ dateNotesForPrevMonth, setDateNotesForPrevMonth ] = useState<DateNotesForMonth>();
 
@@ -65,15 +65,29 @@ function PreviousMonthDays({ date, dates }: { date: Dayjs, dates: Dayjs[] }) {
         server.get<DateNotesForMonth>(`special-notes/notes-for-month/${prevMonth}`).then(setDateNotesForPrevMonth);
     }, [ date ]);
 
-    return dates.map(date => (
-        <CalendarDay date={date} dateNotesForMonth={dateNotesForPrevMonth} className="calendar-date-prev-month" />
-    ));
+    return (
+        <>
+            <CalendarWeek weekNumber={weekNumbers[0]} />
+            {dates.map(date => <CalendarDay date={date} dateNotesForMonth={dateNotesForPrevMonth} className="calendar-date-prev-month" />)}
+        </>
+    )
 }
 
-function CurrentMonthDays({ date, dates }: { date: Dayjs, dates: Dayjs[] }) {
-    return dates.map(date => (
-        <CalendarDay date={date} dateNotesForMonth={{}} />
-    ));
+function CurrentMonthDays({ date, firstDayOfWeekISO }: { date: Dayjs, firstDayOfWeekISO: number }) {
+    let dateCursor = date;
+    const currentMonth = date.month();
+    const items: VNode[] = [];
+    while (dateCursor.month() === currentMonth) {
+        const weekNumber = getWeekNumber(dateCursor, firstDayOfWeekISO);
+        if (dateCursor.isoWeekday() === firstDayOfWeekISO) {
+            items.push(<CalendarWeek weekNumber={weekNumber} />)
+        }
+
+        items.push(<CalendarDay date={dateCursor} dateNotesForMonth={{}} />)
+        dateCursor = dateCursor.add(1, "day");
+    }
+
+    return items;
 }
 
 function NextMonthDays({ date, dates }: { date: Dayjs, dates: Dayjs[] }) {
@@ -102,3 +116,8 @@ function CalendarDay({ date, dateNotesForMonth, className }: { date: Dayjs, date
     );
 }
 
+function CalendarWeek({ weekNumber }: { weekNumber: number }) {
+    return (
+        <span className="calendar-week-number calendar-week-number-disabled">{weekNumber}</span>
+    )
+}
diff --git a/apps/client/src/widgets/launch_bar/CalendarWidgetUtils.ts b/apps/client/src/widgets/launch_bar/CalendarWidgetUtils.ts
index 16d057107..e7a59aa4a 100644
--- a/apps/client/src/widgets/launch_bar/CalendarWidgetUtils.ts
+++ b/apps/client/src/widgets/launch_bar/CalendarWidgetUtils.ts
@@ -1,6 +1,6 @@
 import { Dayjs } from "@triliumnext/commons";
 
-interface DateRangeInfo {
+export interface DateRangeInfo {
     weekNumbers: number[];
     dates: Dayjs[];
 }
@@ -8,7 +8,6 @@ interface DateRangeInfo {
 export function getMonthInformation(date: Dayjs, firstDayISO: number, firstDayOfWeekISO: number) {
     return {
         prevMonth: getPrevMonthDays(date, firstDayISO, firstDayOfWeekISO),
-        currentMonth: getCurMonthDays(date, firstDayOfWeekISO),
         nextMonth: getNextMonthDays(date, firstDayOfWeekISO)
     }
 }
@@ -29,24 +28,6 @@ function getPrevMonthDays(date: Dayjs, firstDayISO: number, firstDayOfWeekISO: n
     return { weekNumbers: [ weekNumber ], dates };
 }
 
-function getCurMonthDays(date: Dayjs, firstDayOfWeekISO: number): DateRangeInfo {
-    let dateCursor = date;
-    const currentMonth = date.month();
-    const dates: Dayjs[] = [];
-    const weekNumbers: number[] = [];
-    while (dateCursor.month() === currentMonth) {
-        const weekNumber = getWeekNumber(date, firstDayOfWeekISO);
-        if (date.isoWeekday() === firstDayOfWeekISO) {
-            weekNumbers.push(weekNumber);
-        }
-
-        dates.push(dateCursor);
-        dateCursor = dateCursor.add(1, "day");
-
-    }
-    return { weekNumbers, dates };
-}
-
 function getNextMonthDays(date: Dayjs, firstDayOfWeekISO: number): DateRangeInfo {
     const lastDayOfMonth = date.endOf('month');
     const lastDayISO = lastDayOfMonth.isoWeekday();
@@ -64,7 +45,7 @@ function getNextMonthDays(date: Dayjs, firstDayOfWeekISO: number): DateRangeInfo
     return { weekNumbers: [], dates };
 }
 
-function getWeekNumber(date: Dayjs, firstDayOfWeekISO: number): number {
+export function getWeekNumber(date: Dayjs, firstDayOfWeekISO: number): number {
     const weekStart = getWeekStartDate(date, firstDayOfWeekISO);
     return weekStart.isoWeek();
 }

From 62fd07258ec5f5f9916eac5ca7aed71a2ce22dac Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 4 Dec 2025 19:43:47 +0200
Subject: [PATCH 24/29] chore(react/launch_bar): get days of the week to render

---
 apps/client/src/widgets/buttons/calendar.ts   | 21 ------------
 .../src/widgets/launch_bar/CalendarWidget.tsx | 34 ++++++++++++++-----
 .../widgets/launch_bar/CalendarWidgetUtils.ts | 11 ++++++
 3 files changed, 36 insertions(+), 30 deletions(-)

diff --git a/apps/client/src/widgets/buttons/calendar.ts b/apps/client/src/widgets/buttons/calendar.ts
index 286b94a14..0d993540e 100644
--- a/apps/client/src/widgets/buttons/calendar.ts
+++ b/apps/client/src/widgets/buttons/calendar.ts
@@ -56,18 +56,6 @@ const DROPDOWN_TPL = `
 
 </div>`;
 
-const DAYS_OF_WEEK = [
-    t("calendar.sun"),
-    t("calendar.mon"),
-    t("calendar.tue"),
-    t("calendar.wed"),
-    t("calendar.thu"),
-    t("calendar.fri"),
-    t("calendar.sat")
-];
-
-
-
 interface WeekCalculationOptions {
     firstWeekType: number;
     minDaysInFirstWeek: number;
@@ -100,7 +88,6 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
         super.doRender();
 
         this.$month = this.$dropdownContent.find('[data-calendar-area="month"]');
-        this.$weekHeader = this.$dropdownContent.find(".calendar-week");
 
         this.manageFirstDayOfWeek();
         this.initWeekCalculation();
@@ -216,14 +203,6 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
         this.weekNoteEnable = noteAttributes.some(a => a.name === 'enableWeekNote');
     }
 
-    // Store firstDayOfWeek as ISO (1–7)
-    manageFirstDayOfWeek() {
-        let localeDaysOfWeek = [...DAYS_OF_WEEK];
-        const shifted = localeDaysOfWeek.splice(0, rawFirstDayOfWeek);
-        localeDaysOfWeek = ['', ...localeDaysOfWeek, ...shifted];
-        this.$weekHeader.html(localeDaysOfWeek.map((el) => `<span>${el}</span>`).join(''));
-    }
-
     initWeekCalculation() {
         this.weekCalculationOptions = {
             firstWeekType: options.getInt("firstWeekOfYear") || 0,
diff --git a/apps/client/src/widgets/launch_bar/CalendarWidget.tsx b/apps/client/src/widgets/launch_bar/CalendarWidget.tsx
index b8b94ba73..f8b20c2f0 100644
--- a/apps/client/src/widgets/launch_bar/CalendarWidget.tsx
+++ b/apps/client/src/widgets/launch_bar/CalendarWidget.tsx
@@ -7,7 +7,7 @@ import { useTriliumOptionInt } from "../react/hooks";
 import clsx from "clsx";
 import "./CalendarWidget.css";
 import server from "../../services/server";
-import { DateRangeInfo, getMonthInformation, getWeekNumber } from "./CalendarWidgetUtils";
+import { DateRangeInfo, DAYS_OF_WEEK, getMonthInformation, getWeekNumber } from "./CalendarWidgetUtils";
 import { VNode } from "preact";
 
 interface DateNotesForMonth {
@@ -17,8 +17,6 @@ interface DateNotesForMonth {
 export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }) {
     const { title, icon } = useLauncherIconAndTitle(launcherNote);
     const [ date, setDate ] = useState<Dayjs>();
-    const [ rawFirstDayOfWeek ] = useTriliumOptionInt("firstDayOfWeek") ?? 0;
-    const firstDayOfWeekISO = (rawFirstDayOfWeek === 0 ? 7 : rawFirstDayOfWeek);
 
     useEffect(() => {
 
@@ -36,23 +34,41 @@ export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }
             }}
         >
             {date && <div className="calendar-dropdown-widget" style={{ width: 400 }}>
-                <Calendar date={date} firstDayOfWeekISO={firstDayOfWeekISO} />
+                <Calendar date={date} />
             </div>}
         </LaunchBarDropdownButton>
     )
 }
 
-function Calendar({ date, firstDayOfWeekISO }: { date: Dayjs, firstDayOfWeekISO: number }) {
+function Calendar({ date }: { date: Dayjs }) {
+    const [ rawFirstDayOfWeek ] = useTriliumOptionInt("firstDayOfWeek") ?? 0;
+    const firstDayOfWeekISO = (rawFirstDayOfWeek === 0 ? 7 : rawFirstDayOfWeek);
+
     const month = date.format('YYYY-MM');
     const firstDay = date.startOf('month');
     const firstDayISO = firstDay.isoWeekday();
     const monthInfo = getMonthInformation(date, firstDayISO, firstDayOfWeekISO);
 
     return (
-        <div className="calendar-body" data-calendar-area="month">
-            {firstDayISO !== firstDayOfWeekISO && <PreviousMonthDays date={date} info={monthInfo.prevMonth} />}
-            <CurrentMonthDays date={date} firstDayOfWeekISO={firstDayOfWeekISO} />
-            <NextMonthDays date={date} dates={monthInfo.nextMonth.dates} />
+        <>
+            <CalendarWeekHeader rawFirstDayOfWeek={rawFirstDayOfWeek} />
+            <div className="calendar-body" data-calendar-area="month">
+                {firstDayISO !== firstDayOfWeekISO && <PreviousMonthDays date={date} info={monthInfo.prevMonth} />}
+                <CurrentMonthDays date={date} firstDayOfWeekISO={firstDayOfWeekISO} />
+                <NextMonthDays date={date} dates={monthInfo.nextMonth.dates} />
+            </div>
+        </>
+    )
+}
+
+function CalendarWeekHeader({ rawFirstDayOfWeek }: { rawFirstDayOfWeek: number }) {
+    let localeDaysOfWeek = [...DAYS_OF_WEEK];
+    const shifted = localeDaysOfWeek.splice(0, rawFirstDayOfWeek);
+    localeDaysOfWeek = ['', ...localeDaysOfWeek, ...shifted];
+
+    return (
+        <div className="calendar-week">
+            {localeDaysOfWeek.map(dayOfWeek => <span>{dayOfWeek}</span>)}
         </div>
     )
 }
diff --git a/apps/client/src/widgets/launch_bar/CalendarWidgetUtils.ts b/apps/client/src/widgets/launch_bar/CalendarWidgetUtils.ts
index e7a59aa4a..3b598bbe9 100644
--- a/apps/client/src/widgets/launch_bar/CalendarWidgetUtils.ts
+++ b/apps/client/src/widgets/launch_bar/CalendarWidgetUtils.ts
@@ -1,4 +1,15 @@
 import { Dayjs } from "@triliumnext/commons";
+import { t } from "../../services/i18n";
+
+export const DAYS_OF_WEEK = [
+    t("calendar.sun"),
+    t("calendar.mon"),
+    t("calendar.tue"),
+    t("calendar.wed"),
+    t("calendar.thu"),
+    t("calendar.fri"),
+    t("calendar.sat")
+];
 
 export interface DateRangeInfo {
     weekNumbers: number[];

From e0aed26f637b4dafc8f3c52ab77b8fd23db2b566 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 4 Dec 2025 19:46:25 +0200
Subject: [PATCH 25/29] refactor(react/launch_bar): extract calendar impl into
 single file

---
 .../src/widgets/launch_bar/Calendar.tsx       | 175 ++++++++++++++++++
 .../src/widgets/launch_bar/CalendarWidget.tsx | 110 +----------
 .../widgets/launch_bar/CalendarWidgetUtils.ts |  68 -------
 3 files changed, 176 insertions(+), 177 deletions(-)
 create mode 100644 apps/client/src/widgets/launch_bar/Calendar.tsx
 delete mode 100644 apps/client/src/widgets/launch_bar/CalendarWidgetUtils.ts

diff --git a/apps/client/src/widgets/launch_bar/Calendar.tsx b/apps/client/src/widgets/launch_bar/Calendar.tsx
new file mode 100644
index 000000000..b1753a038
--- /dev/null
+++ b/apps/client/src/widgets/launch_bar/Calendar.tsx
@@ -0,0 +1,175 @@
+import { useTriliumOptionInt } from "../react/hooks";
+import clsx from "clsx";
+import server from "../../services/server";
+import { VNode } from "preact";
+import { useEffect, useState } from "preact/hooks";
+import { Dayjs } from "@triliumnext/commons";
+import { t } from "../../services/i18n";
+
+interface DateNotesForMonth {
+    [date: string]: string;
+}
+
+const DAYS_OF_WEEK = [
+    t("calendar.sun"),
+    t("calendar.mon"),
+    t("calendar.tue"),
+    t("calendar.wed"),
+    t("calendar.thu"),
+    t("calendar.fri"),
+    t("calendar.sat")
+];
+
+interface DateRangeInfo {
+    weekNumbers: number[];
+    dates: Dayjs[];
+}
+
+export default function Calendar({ date }: { date: Dayjs }) {
+    const [ rawFirstDayOfWeek ] = useTriliumOptionInt("firstDayOfWeek") ?? 0;
+    const firstDayOfWeekISO = (rawFirstDayOfWeek === 0 ? 7 : rawFirstDayOfWeek);
+
+    const month = date.format('YYYY-MM');
+    const firstDay = date.startOf('month');
+    const firstDayISO = firstDay.isoWeekday();
+    const monthInfo = getMonthInformation(date, firstDayISO, firstDayOfWeekISO);
+
+    return (
+        <>
+            <CalendarWeekHeader rawFirstDayOfWeek={rawFirstDayOfWeek} />
+            <div className="calendar-body" data-calendar-area="month">
+                {firstDayISO !== firstDayOfWeekISO && <PreviousMonthDays date={date} info={monthInfo.prevMonth} />}
+                <CurrentMonthDays date={date} firstDayOfWeekISO={firstDayOfWeekISO} />
+                <NextMonthDays date={date} dates={monthInfo.nextMonth.dates} />
+            </div>
+        </>
+    )
+}
+
+function CalendarWeekHeader({ rawFirstDayOfWeek }: { rawFirstDayOfWeek: number }) {
+    let localeDaysOfWeek = [...DAYS_OF_WEEK];
+    const shifted = localeDaysOfWeek.splice(0, rawFirstDayOfWeek);
+    localeDaysOfWeek = ['', ...localeDaysOfWeek, ...shifted];
+
+    return (
+        <div className="calendar-week">
+            {localeDaysOfWeek.map(dayOfWeek => <span>{dayOfWeek}</span>)}
+        </div>
+    )
+}
+
+function PreviousMonthDays({ date, info: { dates, weekNumbers } }: { date: Dayjs, info: DateRangeInfo }) {
+    const prevMonth = date.subtract(1, 'month').format('YYYY-MM');
+    const [ dateNotesForPrevMonth, setDateNotesForPrevMonth ] = useState<DateNotesForMonth>();
+
+    useEffect(() => {
+        server.get<DateNotesForMonth>(`special-notes/notes-for-month/${prevMonth}`).then(setDateNotesForPrevMonth);
+    }, [ date ]);
+
+    return (
+        <>
+            <CalendarWeek weekNumber={weekNumbers[0]} />
+            {dates.map(date => <CalendarDay date={date} dateNotesForMonth={dateNotesForPrevMonth} className="calendar-date-prev-month" />)}
+        </>
+    )
+}
+
+function CurrentMonthDays({ date, firstDayOfWeekISO }: { date: Dayjs, firstDayOfWeekISO: number }) {
+    let dateCursor = date;
+    const currentMonth = date.month();
+    const items: VNode[] = [];
+    while (dateCursor.month() === currentMonth) {
+        const weekNumber = getWeekNumber(dateCursor, firstDayOfWeekISO);
+        if (dateCursor.isoWeekday() === firstDayOfWeekISO) {
+            items.push(<CalendarWeek weekNumber={weekNumber} />)
+        }
+
+        items.push(<CalendarDay date={dateCursor} dateNotesForMonth={{}} />)
+        dateCursor = dateCursor.add(1, "day");
+    }
+
+    return items;
+}
+
+function NextMonthDays({ date, dates }: { date: Dayjs, dates: Dayjs[] }) {
+    const nextMonth = date.add(1, 'month').format('YYYY-MM');
+    const [ dateNotesForNextMonth, setDateNotesForNextMonth ] = useState<DateNotesForMonth>();
+
+    useEffect(() => {
+        server.get<DateNotesForMonth>(`special-notes/notes-for-month/${nextMonth}`).then(setDateNotesForNextMonth);
+    }, [ date ]);
+
+    return dates.map(date => (
+        <CalendarDay date={date} dateNotesForMonth={dateNotesForNextMonth} className="calendar-date-next-month" />
+    ));
+}
+
+function CalendarDay({ date, dateNotesForMonth, className }: { date: Dayjs, dateNotesForMonth?: DateNotesForMonth, className?: string }) {
+    return (
+        <a
+            className={clsx("calendar-date", className)}
+            data-calendar-date={date.local().format("YYYY-MM-DD")}
+        >
+            <span>
+                {date.date()}
+            </span>
+        </a>
+    );
+}
+
+function CalendarWeek({ weekNumber }: { weekNumber: number }) {
+    return (
+        <span className="calendar-week-number calendar-week-number-disabled">{weekNumber}</span>
+    )
+}
+
+export function getMonthInformation(date: Dayjs, firstDayISO: number, firstDayOfWeekISO: number) {
+    return {
+        prevMonth: getPrevMonthDays(date, firstDayISO, firstDayOfWeekISO),
+        nextMonth: getNextMonthDays(date, firstDayOfWeekISO)
+    }
+}
+
+function getPrevMonthDays(date: Dayjs, firstDayISO: number, firstDayOfWeekISO: number): DateRangeInfo {
+    const prevMonthLastDay = date.subtract(1, 'month').endOf('month');
+    const daysToAdd = (firstDayISO - firstDayOfWeekISO + 7) % 7;
+    const dates: Dayjs[] = [];
+
+    const firstDay = date.startOf('month');
+    const weekNumber = getWeekNumber(firstDay, firstDayOfWeekISO);
+
+    // Get dates from previous month
+    for (let i = daysToAdd - 1; i >= 0; i--) {
+        dates.push(prevMonthLastDay.subtract(i, 'day'));
+    }
+
+    return { weekNumbers: [ weekNumber ], dates };
+}
+
+function getNextMonthDays(date: Dayjs, firstDayOfWeekISO: number): DateRangeInfo {
+    const lastDayOfMonth = date.endOf('month');
+    const lastDayISO = lastDayOfMonth.isoWeekday();
+    const lastDayOfUserWeek = ((firstDayOfWeekISO + 6 - 1) % 7) + 1;
+    const nextMonthFirstDay = date.add(1, 'month').startOf('month');
+    const dates: Dayjs[] = [];
+
+    if (lastDayISO !== lastDayOfUserWeek) {
+        const daysToAdd = (lastDayOfUserWeek - lastDayISO + 7) % 7;
+
+        for (let i = 0; i < daysToAdd; i++) {
+            dates.push(nextMonthFirstDay.add(i, 'day'));
+        }
+    }
+    return { weekNumbers: [], dates };
+}
+
+export function getWeekNumber(date: Dayjs, firstDayOfWeekISO: number): number {
+    const weekStart = getWeekStartDate(date, firstDayOfWeekISO);
+    return weekStart.isoWeek();
+}
+
+function getWeekStartDate(date: Dayjs, firstDayOfWeekISO: number): Dayjs {
+    const currentISO = date.isoWeekday();
+    const diff = (currentISO - firstDayOfWeekISO + 7) % 7;
+    return date.clone().subtract(diff, "day").startOf("day");
+}
diff --git a/apps/client/src/widgets/launch_bar/CalendarWidget.tsx b/apps/client/src/widgets/launch_bar/CalendarWidget.tsx
index f8b20c2f0..873567b29 100644
--- a/apps/client/src/widgets/launch_bar/CalendarWidget.tsx
+++ b/apps/client/src/widgets/launch_bar/CalendarWidget.tsx
@@ -3,25 +3,13 @@ import FNote from "../../entities/fnote";
 import { LaunchBarDropdownButton, useLauncherIconAndTitle } from "./launch_bar_widgets";
 import { Dayjs, dayjs } from "@triliumnext/commons";
 import appContext from "../../components/app_context";
-import { useTriliumOptionInt } from "../react/hooks";
-import clsx from "clsx";
 import "./CalendarWidget.css";
-import server from "../../services/server";
-import { DateRangeInfo, DAYS_OF_WEEK, getMonthInformation, getWeekNumber } from "./CalendarWidgetUtils";
-import { VNode } from "preact";
-
-interface DateNotesForMonth {
-    [date: string]: string;
-}
+import Calendar from "./Calendar";
 
 export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }) {
     const { title, icon } = useLauncherIconAndTitle(launcherNote);
     const [ date, setDate ] = useState<Dayjs>();
 
-    useEffect(() => {
-
-    })
-
     return (
         <LaunchBarDropdownButton
             icon={icon} title={title}
@@ -40,100 +28,4 @@ export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }
     )
 }
 
-function Calendar({ date }: { date: Dayjs }) {
-    const [ rawFirstDayOfWeek ] = useTriliumOptionInt("firstDayOfWeek") ?? 0;
-    const firstDayOfWeekISO = (rawFirstDayOfWeek === 0 ? 7 : rawFirstDayOfWeek);
 
-    const month = date.format('YYYY-MM');
-    const firstDay = date.startOf('month');
-    const firstDayISO = firstDay.isoWeekday();
-    const monthInfo = getMonthInformation(date, firstDayISO, firstDayOfWeekISO);
-
-    return (
-        <>
-            <CalendarWeekHeader rawFirstDayOfWeek={rawFirstDayOfWeek} />
-            <div className="calendar-body" data-calendar-area="month">
-                {firstDayISO !== firstDayOfWeekISO && <PreviousMonthDays date={date} info={monthInfo.prevMonth} />}
-                <CurrentMonthDays date={date} firstDayOfWeekISO={firstDayOfWeekISO} />
-                <NextMonthDays date={date} dates={monthInfo.nextMonth.dates} />
-            </div>
-        </>
-    )
-}
-
-function CalendarWeekHeader({ rawFirstDayOfWeek }: { rawFirstDayOfWeek: number }) {
-    let localeDaysOfWeek = [...DAYS_OF_WEEK];
-    const shifted = localeDaysOfWeek.splice(0, rawFirstDayOfWeek);
-    localeDaysOfWeek = ['', ...localeDaysOfWeek, ...shifted];
-
-    return (
-        <div className="calendar-week">
-            {localeDaysOfWeek.map(dayOfWeek => <span>{dayOfWeek}</span>)}
-        </div>
-    )
-}
-
-function PreviousMonthDays({ date, info: { dates, weekNumbers } }: { date: Dayjs, info: DateRangeInfo }) {
-    const prevMonth = date.subtract(1, 'month').format('YYYY-MM');
-    const [ dateNotesForPrevMonth, setDateNotesForPrevMonth ] = useState<DateNotesForMonth>();
-
-    useEffect(() => {
-        server.get<DateNotesForMonth>(`special-notes/notes-for-month/${prevMonth}`).then(setDateNotesForPrevMonth);
-    }, [ date ]);
-
-    return (
-        <>
-            <CalendarWeek weekNumber={weekNumbers[0]} />
-            {dates.map(date => <CalendarDay date={date} dateNotesForMonth={dateNotesForPrevMonth} className="calendar-date-prev-month" />)}
-        </>
-    )
-}
-
-function CurrentMonthDays({ date, firstDayOfWeekISO }: { date: Dayjs, firstDayOfWeekISO: number }) {
-    let dateCursor = date;
-    const currentMonth = date.month();
-    const items: VNode[] = [];
-    while (dateCursor.month() === currentMonth) {
-        const weekNumber = getWeekNumber(dateCursor, firstDayOfWeekISO);
-        if (dateCursor.isoWeekday() === firstDayOfWeekISO) {
-            items.push(<CalendarWeek weekNumber={weekNumber} />)
-        }
-
-        items.push(<CalendarDay date={dateCursor} dateNotesForMonth={{}} />)
-        dateCursor = dateCursor.add(1, "day");
-    }
-
-    return items;
-}
-
-function NextMonthDays({ date, dates }: { date: Dayjs, dates: Dayjs[] }) {
-    const nextMonth = date.add(1, 'month').format('YYYY-MM');
-    const [ dateNotesForNextMonth, setDateNotesForNextMonth ] = useState<DateNotesForMonth>();
-
-    useEffect(() => {
-        server.get<DateNotesForMonth>(`special-notes/notes-for-month/${nextMonth}`).then(setDateNotesForNextMonth);
-    }, [ date ]);
-
-    return dates.map(date => (
-        <CalendarDay date={date} dateNotesForMonth={dateNotesForNextMonth} className="calendar-date-next-month" />
-    ));
-}
-
-function CalendarDay({ date, dateNotesForMonth, className }: { date: Dayjs, dateNotesForMonth?: DateNotesForMonth, className?: string }) {
-    return (
-        <a
-            className={clsx("calendar-date", className)}
-            data-calendar-date={date.local().format("YYYY-MM-DD")}
-        >
-            <span>
-                {date.date()}
-            </span>
-        </a>
-    );
-}
-
-function CalendarWeek({ weekNumber }: { weekNumber: number }) {
-    return (
-        <span className="calendar-week-number calendar-week-number-disabled">{weekNumber}</span>
-    )
-}
diff --git a/apps/client/src/widgets/launch_bar/CalendarWidgetUtils.ts b/apps/client/src/widgets/launch_bar/CalendarWidgetUtils.ts
deleted file mode 100644
index 3b598bbe9..000000000
--- a/apps/client/src/widgets/launch_bar/CalendarWidgetUtils.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import { Dayjs } from "@triliumnext/commons";
-import { t } from "../../services/i18n";
-
-export const DAYS_OF_WEEK = [
-    t("calendar.sun"),
-    t("calendar.mon"),
-    t("calendar.tue"),
-    t("calendar.wed"),
-    t("calendar.thu"),
-    t("calendar.fri"),
-    t("calendar.sat")
-];
-
-export interface DateRangeInfo {
-    weekNumbers: number[];
-    dates: Dayjs[];
-}
-
-export function getMonthInformation(date: Dayjs, firstDayISO: number, firstDayOfWeekISO: number) {
-    return {
-        prevMonth: getPrevMonthDays(date, firstDayISO, firstDayOfWeekISO),
-        nextMonth: getNextMonthDays(date, firstDayOfWeekISO)
-    }
-}
-
-function getPrevMonthDays(date: Dayjs, firstDayISO: number, firstDayOfWeekISO: number): DateRangeInfo {
-    const prevMonthLastDay = date.subtract(1, 'month').endOf('month');
-    const daysToAdd = (firstDayISO - firstDayOfWeekISO + 7) % 7;
-    const dates: Dayjs[] = [];
-
-    const firstDay = date.startOf('month');
-    const weekNumber = getWeekNumber(firstDay, firstDayOfWeekISO);
-
-    // Get dates from previous month
-    for (let i = daysToAdd - 1; i >= 0; i--) {
-        dates.push(prevMonthLastDay.subtract(i, 'day'));
-    }
-
-    return { weekNumbers: [ weekNumber ], dates };
-}
-
-function getNextMonthDays(date: Dayjs, firstDayOfWeekISO: number): DateRangeInfo {
-    const lastDayOfMonth = date.endOf('month');
-    const lastDayISO = lastDayOfMonth.isoWeekday();
-    const lastDayOfUserWeek = ((firstDayOfWeekISO + 6 - 1) % 7) + 1;
-    const nextMonthFirstDay = date.add(1, 'month').startOf('month');
-    const dates: Dayjs[] = [];
-
-    if (lastDayISO !== lastDayOfUserWeek) {
-        const daysToAdd = (lastDayOfUserWeek - lastDayISO + 7) % 7;
-
-        for (let i = 0; i < daysToAdd; i++) {
-            dates.push(nextMonthFirstDay.add(i, 'day'));
-        }
-    }
-    return { weekNumbers: [], dates };
-}
-
-export function getWeekNumber(date: Dayjs, firstDayOfWeekISO: number): number {
-    const weekStart = getWeekStartDate(date, firstDayOfWeekISO);
-    return weekStart.isoWeek();
-}
-
-function getWeekStartDate(date: Dayjs, firstDayOfWeekISO: number): Dayjs {
-    const currentISO = date.isoWeekday();
-    const diff = (currentISO - firstDayOfWeekISO + 7) % 7;
-    return date.clone().subtract(diff, "day").startOf("day");
-}

From e1cce220b30abdaba1777fe7b0e67049f6f51e08 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 4 Dec 2025 19:56:34 +0200
Subject: [PATCH 26/29] chore(react/launch_bar): add back icons for
 previous/next month

---
 apps/client/src/widgets/buttons/calendar.ts   | 13 ------
 .../src/widgets/launch_bar/CalendarWidget.tsx | 43 ++++++++++++++++++-
 2 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/apps/client/src/widgets/buttons/calendar.ts b/apps/client/src/widgets/buttons/calendar.ts
index 0d993540e..a8f507fd1 100644
--- a/apps/client/src/widgets/buttons/calendar.ts
+++ b/apps/client/src/widgets/buttons/calendar.ts
@@ -29,8 +29,6 @@ const DROPDOWN_TPL = `
 <div class="calendar-dropdown-widget">
     <div class="calendar-header">
         <div class="calendar-month-selector">
-            <button class="calendar-btn tn-tool-button bx bx-chevron-left" data-calendar-toggle="previous"></button>
-
             <button class="btn dropdown-toggle select-button" type="button"
                 data-bs-toggle="dropdown" data-bs-auto-close="true"
                 aria-expanded="false"
@@ -108,17 +106,6 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
             }
         });
 
-        this.$next = this.$dropdownContent.find('[data-calendar-toggle="next"]');
-        this.$next.on("click", () => {
-            this.date = this.date.add(1, 'month');
-            this.createMonth();
-        });
-        this.$previous = this.$dropdownContent.find('[data-calendar-toggle="previous"]');
-        this.$previous.on("click", () => {
-            this.date = this.date.subtract(1, 'month');
-            this.createMonth();
-        });
-
         // Year navigation
         this.$yearSelect = this.$dropdownContent.find('[data-calendar-input="year"]');
         this.$yearSelect.on("input", (e) => {
diff --git a/apps/client/src/widgets/launch_bar/CalendarWidget.tsx b/apps/client/src/widgets/launch_bar/CalendarWidget.tsx
index 873567b29..557d05f5e 100644
--- a/apps/client/src/widgets/launch_bar/CalendarWidget.tsx
+++ b/apps/client/src/widgets/launch_bar/CalendarWidget.tsx
@@ -1,10 +1,11 @@
-import { useEffect, useState } from "preact/hooks";
+import { Dispatch, StateUpdater, useEffect, useState } from "preact/hooks";
 import FNote from "../../entities/fnote";
 import { LaunchBarDropdownButton, useLauncherIconAndTitle } from "./launch_bar_widgets";
 import { Dayjs, dayjs } from "@triliumnext/commons";
 import appContext from "../../components/app_context";
 import "./CalendarWidget.css";
 import Calendar from "./Calendar";
+import ActionButton from "../react/ActionButton";
 
 export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }) {
     const { title, icon } = useLauncherIconAndTitle(launcherNote);
@@ -22,10 +23,50 @@ export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }
             }}
         >
             {date && <div className="calendar-dropdown-widget" style={{ width: 400 }}>
+                <CalendarHeader date={date} setDate={setDate} />
                 <Calendar date={date} />
             </div>}
         </LaunchBarDropdownButton>
     )
 }
 
+interface CalendarHeaderProps {
+    date: Dayjs;
+    setDate: Dispatch<StateUpdater<Dayjs | undefined>>;
+}
 
+function CalendarHeader(props: CalendarHeaderProps) {
+    return (
+        <div className="calendar-header">
+            <CalendarMonthSelector {...props} />
+        </div>
+    )
+}
+
+function CalendarMonthSelector({ date, setDate }: CalendarHeaderProps) {
+    return (
+        <div className="calendar-month-selector">
+            <AdjustDateButton date={date} setDate={setDate} direction="prev" unit="month" />
+            <AdjustDateButton date={date} setDate={setDate} direction="next" unit="month" />
+        </div>
+    );
+}
+
+function AdjustDateButton({ date, setDate, unit, direction }: CalendarHeaderProps & {
+    direction: "prev" | "next",
+    unit: "month"
+}) {
+    return (
+        <ActionButton
+            icon={direction === "prev" ? "bx bx-chevron-left" : "bx bx-chevron-right" }
+            className="calendar-btn tn-tool-button"
+            noIconActionClass
+            text=""
+            onClick={(e) => {
+                e.stopPropagation();
+                const newDate = direction === "prev" ? date.subtract(1, unit) : date.add(1, unit);
+                setDate(newDate);
+            }}
+        />
+    )
+}

From 2dbbf7f350f6d2362b37a9021c83ca982f4d0998 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 4 Dec 2025 20:13:46 +0200
Subject: [PATCH 27/29] chore(react/launch_bar): reintroduce month dropdown

---
 .../src/stylesheets/theme-next/shell.css      |  2 +-
 apps/client/src/widgets/buttons/calendar.ts   | 20 +---------
 .../src/widgets/launch_bar/CalendarWidget.tsx | 37 ++++++++++++++++++-
 .../widgets/launch_bar/launch_bar_widgets.tsx |  2 +-
 apps/client/src/widgets/react/Dropdown.tsx    |  5 ++-
 5 files changed, 42 insertions(+), 24 deletions(-)

diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css
index 77d2a9ba6..fa3cda1e0 100644
--- a/apps/client/src/stylesheets/theme-next/shell.css
+++ b/apps/client/src/stylesheets/theme-next/shell.css
@@ -212,7 +212,7 @@ body[dir=ltr] #launcher-container {
 }
 
 #launcher-pane .launcher-button,
-#launcher-pane .dropdown {
+#launcher-pane .right-dropdown-widget {
     width: calc(var(--launcher-pane-size) - (var(--launcher-pane-button-margin) * 2)) !important;
     height: calc(var(--launcher-pane-size) - (var(--launcher-pane-button-margin) * 2)) !important;
     margin: var(--launcher-pane-button-gap) var(--launcher-pane-button-margin);
diff --git a/apps/client/src/widgets/buttons/calendar.ts b/apps/client/src/widgets/buttons/calendar.ts
index a8f507fd1..22a62e193 100644
--- a/apps/client/src/widgets/buttons/calendar.ts
+++ b/apps/client/src/widgets/buttons/calendar.ts
@@ -10,20 +10,7 @@ import type { EventData } from "../../components/app_context.js";
 import { dayjs, type Dayjs } from "@triliumnext/commons";
 import type { AttributeRow, OptionDefinitions } from "@triliumnext/commons";
 
-const MONTHS = [
-    t("calendar.january"),
-    t("calendar.february"),
-    t("calendar.march"),
-    t("calendar.april"),
-    t("calendar.may"),
-    t("calendar.june"),
-    t("calendar.july"),
-    t("calendar.august"),
-    t("calendar.september"),
-    t("calendar.october"),
-    t("calendar.november"),
-    t("calendar.december")
-];
+
 
 const DROPDOWN_TPL = `
 <div class="calendar-dropdown-widget">
@@ -33,11 +20,6 @@ const DROPDOWN_TPL = `
                 data-bs-toggle="dropdown" data-bs-auto-close="true"
                 aria-expanded="false"
                 data-calendar-input="month"></button>
-            <ul class="dropdown-menu" data-calendar-input="month-list">
-                ${Object.entries(MONTHS)
-        .map(([i, month]) => `<li><button class="dropdown-item" data-value=${i}>${month}</button></li>`)
-        .join("")}
-            </ul>
 
             <button class="calendar-btn tn-tool-button bx bx-chevron-right" data-calendar-toggle="next"></button>
         </div>
diff --git a/apps/client/src/widgets/launch_bar/CalendarWidget.tsx b/apps/client/src/widgets/launch_bar/CalendarWidget.tsx
index 557d05f5e..cda7b8444 100644
--- a/apps/client/src/widgets/launch_bar/CalendarWidget.tsx
+++ b/apps/client/src/widgets/launch_bar/CalendarWidget.tsx
@@ -1,4 +1,4 @@
-import { Dispatch, StateUpdater, useEffect, useState } from "preact/hooks";
+import { Dispatch, StateUpdater, useEffect, useMemo, useState } from "preact/hooks";
 import FNote from "../../entities/fnote";
 import { LaunchBarDropdownButton, useLauncherIconAndTitle } from "./launch_bar_widgets";
 import { Dayjs, dayjs } from "@triliumnext/commons";
@@ -6,6 +6,24 @@ import appContext from "../../components/app_context";
 import "./CalendarWidget.css";
 import Calendar from "./Calendar";
 import ActionButton from "../react/ActionButton";
+import Dropdown from "../react/Dropdown";
+import { t } from "../../services/i18n";
+import FormDropdownList from "../react/FormDropdownList";
+
+const MONTHS = [
+    t("calendar.january"),
+    t("calendar.february"),
+    t("calendar.march"),
+    t("calendar.april"),
+    t("calendar.may"),
+    t("calendar.june"),
+    t("calendar.july"),
+    t("calendar.august"),
+    t("calendar.september"),
+    t("calendar.october"),
+    t("calendar.november"),
+    t("calendar.december")
+];
 
 export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }) {
     const { title, icon } = useLauncherIconAndTitle(launcherNote);
@@ -21,6 +39,9 @@ export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }
                 const date = dayjs(activeDate || todaysDate).startOf('month');
                 setDate(date);
             }}
+            dropdownOptions={{
+                autoClose: "outside"
+            }}
         >
             {date && <div className="calendar-dropdown-widget" style={{ width: 400 }}>
                 <CalendarHeader date={date} setDate={setDate} />
@@ -44,9 +65,23 @@ function CalendarHeader(props: CalendarHeaderProps) {
 }
 
 function CalendarMonthSelector({ date, setDate }: CalendarHeaderProps) {
+    const months = useMemo(() => (
+        Array.from(MONTHS.entries().map(([ index, text ]) => ({
+            index: index.toString(), text
+        })))
+    ), []);
+    console.log("Got months ", months);
+
     return (
         <div className="calendar-month-selector">
             <AdjustDateButton date={date} setDate={setDate} direction="prev" unit="month" />
+            <FormDropdownList
+                values={months} currentValue={date.month().toString()}
+                keyProperty="index" titleProperty="text"
+                onChange={value => {
+
+                }}
+            />
             <AdjustDateButton date={date} setDate={setDate} direction="next" unit="month" />
         </div>
     );
diff --git a/apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx b/apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx
index 715b5dbe5..d5302adc0 100644
--- a/apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx
+++ b/apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx
@@ -20,7 +20,7 @@ export function LaunchBarActionButton(props: Omit<ActionButtonProps, "className"
     )
 }
 
-export function LaunchBarDropdownButton({ children, icon, ...props }: Pick<DropdownProps, "title" | "children" | "onShown"> & { icon: string }) {
+export function LaunchBarDropdownButton({ children, icon, ...props }: Pick<DropdownProps, "title" | "children" | "onShown" | "dropdownOptions"> & { icon: string }) {
     return (
         <Dropdown
             className="right-dropdown-widget"
diff --git a/apps/client/src/widgets/react/Dropdown.tsx b/apps/client/src/widgets/react/Dropdown.tsx
index 3ea79bc6c..c0f5f5585 100644
--- a/apps/client/src/widgets/react/Dropdown.tsx
+++ b/apps/client/src/widgets/react/Dropdown.tsx
@@ -21,9 +21,10 @@ export interface DropdownProps extends Pick<HTMLProps<HTMLDivElement>, "id" | "c
     forceShown?: boolean;
     onShown?: () => void;
     onHidden?: () => void;
+    dropdownOptions?: Partial<BootstrapDropdown.Options>;
 }
 
-export default function Dropdown({ id, className, buttonClassName, isStatic, children, title, text, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, iconAction, disabled, noSelectButtonStyle, noDropdownListStyle, forceShown, onShown: externalOnShown, onHidden: externalOnHidden }: DropdownProps) {
+export default function Dropdown({ id, className, buttonClassName, isStatic, children, title, text, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, iconAction, disabled, noSelectButtonStyle, noDropdownListStyle, forceShown, onShown: externalOnShown, onHidden: externalOnHidden, dropdownOptions }: DropdownProps) {
     const dropdownRef = useRef<HTMLDivElement | null>(null);
     const triggerRef = useRef<HTMLButtonElement | null>(null);
 
@@ -32,7 +33,7 @@ export default function Dropdown({ id, className, buttonClassName, isStatic, chi
     useEffect(() => {
         if (!triggerRef.current) return;
 
-        const dropdown = BootstrapDropdown.getOrCreateInstance(triggerRef.current);
+        const dropdown = BootstrapDropdown.getOrCreateInstance(triggerRef.current, dropdownOptions);
         if (forceShown) {
             dropdown.show();
             setShown(true);

From a65d2a1bbab6fb15f1147623f157df768bdcddca Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 4 Dec 2025 21:24:25 +0200
Subject: [PATCH 28/29] chore(react/launch_bar): reintroduce year selector

---
 apps/client/src/widgets/buttons/calendar.ts   | 26 -------------------
 .../src/widgets/launch_bar/CalendarWidget.css |  4 +++
 .../src/widgets/launch_bar/CalendarWidget.tsx | 26 +++++++++++++++++--
 3 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/apps/client/src/widgets/buttons/calendar.ts b/apps/client/src/widgets/buttons/calendar.ts
index 22a62e193..731678cd1 100644
--- a/apps/client/src/widgets/buttons/calendar.ts
+++ b/apps/client/src/widgets/buttons/calendar.ts
@@ -10,32 +10,6 @@ import type { EventData } from "../../components/app_context.js";
 import { dayjs, type Dayjs } from "@triliumnext/commons";
 import type { AttributeRow, OptionDefinitions } from "@triliumnext/commons";
 
-
-
-const DROPDOWN_TPL = `
-<div class="calendar-dropdown-widget">
-    <div class="calendar-header">
-        <div class="calendar-month-selector">
-            <button class="btn dropdown-toggle select-button" type="button"
-                data-bs-toggle="dropdown" data-bs-auto-close="true"
-                aria-expanded="false"
-                data-calendar-input="month"></button>
-
-            <button class="calendar-btn tn-tool-button bx bx-chevron-right" data-calendar-toggle="next"></button>
-        </div>
-
-        <div class="calendar-year-selector">
-            <button class="calendar-btn tn-tool-button bx bx-chevron-left" data-calendar-toggle="previousYear"></button>
-
-            <input type="number" min="1900" max="2999" step="1" data-calendar-input="year" />
-
-            <button class="calendar-btn tn-tool-button bx bx-chevron-right" data-calendar-toggle="nextYear"></button>
-        </div>
-    </div>
-
-
-</div>`;
-
 interface WeekCalculationOptions {
     firstWeekType: number;
     minDaysInFirstWeek: number;
diff --git a/apps/client/src/widgets/launch_bar/CalendarWidget.css b/apps/client/src/widgets/launch_bar/CalendarWidget.css
index 314439846..72249b997 100644
--- a/apps/client/src/widgets/launch_bar/CalendarWidget.css
+++ b/apps/client/src/widgets/launch_bar/CalendarWidget.css
@@ -174,4 +174,8 @@
     background-color: var(--hover-item-background-color);
     color: var(--hover-item-text-color);
     text-decoration: underline;
+}
+
+.calendar-dropdown-widget .form-control {
+    padding: 0;
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/launch_bar/CalendarWidget.tsx b/apps/client/src/widgets/launch_bar/CalendarWidget.tsx
index cda7b8444..f1cdfe20b 100644
--- a/apps/client/src/widgets/launch_bar/CalendarWidget.tsx
+++ b/apps/client/src/widgets/launch_bar/CalendarWidget.tsx
@@ -9,6 +9,7 @@ import ActionButton from "../react/ActionButton";
 import Dropdown from "../react/Dropdown";
 import { t } from "../../services/i18n";
 import FormDropdownList from "../react/FormDropdownList";
+import FormTextBox from "../react/FormTextBox";
 
 const MONTHS = [
     t("calendar.january"),
@@ -60,6 +61,7 @@ function CalendarHeader(props: CalendarHeaderProps) {
     return (
         <div className="calendar-header">
             <CalendarMonthSelector {...props} />
+            <CalendarYearSelector {...props} />
         </div>
     )
 }
@@ -70,7 +72,6 @@ function CalendarMonthSelector({ date, setDate }: CalendarHeaderProps) {
             index: index.toString(), text
         })))
     ), []);
-    console.log("Got months ", months);
 
     return (
         <div className="calendar-month-selector">
@@ -87,9 +88,30 @@ function CalendarMonthSelector({ date, setDate }: CalendarHeaderProps) {
     );
 }
 
+function CalendarYearSelector({ date, setDate }: CalendarHeaderProps) {
+    return (
+        <div className="calendar-year-selector">
+            <AdjustDateButton date={date} setDate={setDate} direction="prev" unit="year" />
+            <FormTextBox
+                type="number"
+                min="1900" max="2999" step="1"
+                currentValue={date.year().toString()}
+                onChange={(newValue) => {
+                    const year = parseInt(newValue, 10);
+                    if (!Number.isNaN(year)) {
+                        setDate(date.set("year", year));
+                    }
+                }}
+                data-calendar-input="year"
+            />
+            <AdjustDateButton date={date} setDate={setDate} direction="next" unit="year" />
+        </div>
+    )
+}
+
 function AdjustDateButton({ date, setDate, unit, direction }: CalendarHeaderProps & {
     direction: "prev" | "next",
-    unit: "month"
+    unit: "month" | "year"
 }) {
     return (
         <ActionButton

From 4571b956830d33b7e0e60e8ac314486dd8c4cc4b Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 4 Dec 2025 21:36:04 +0200
Subject: [PATCH 29/29] chore(react/launch_bar): fix style for month selector

---
 apps/client/src/widgets/buttons/calendar.ts   | 20 -------------------
 .../src/widgets/launch_bar/CalendarWidget.tsx |  2 +-
 apps/client/src/widgets/react/Dropdown.tsx    | 10 ++++++++--
 3 files changed, 9 insertions(+), 23 deletions(-)

diff --git a/apps/client/src/widgets/buttons/calendar.ts b/apps/client/src/widgets/buttons/calendar.ts
index 731678cd1..60b372fee 100644
--- a/apps/client/src/widgets/buttons/calendar.ts
+++ b/apps/client/src/widgets/buttons/calendar.ts
@@ -62,26 +62,6 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
             }
         });
 
-        // Year navigation
-        this.$yearSelect = this.$dropdownContent.find('[data-calendar-input="year"]');
-        this.$yearSelect.on("input", (e) => {
-            const target = e.target as HTMLInputElement;
-            this.date = this.date.year(parseInt(target.value));
-            this.createMonth();
-        });
-
-        this.$nextYear = this.$dropdownContent.find('[data-calendar-toggle="nextYear"]');
-        this.$nextYear.on("click", () => {
-            this.date = this.date.add(1, 'year');
-            this.createMonth();
-        });
-
-        this.$previousYear = this.$dropdownContent.find('[data-calendar-toggle="previousYear"]');
-        this.$previousYear.on("click", () => {
-            this.date = this.date.subtract(1, 'year');
-            this.createMonth();
-        });
-
         // Date click
         this.$dropdownContent.on("click", ".calendar-date", async (ev) => {
             const date = $(ev.target).closest(".calendar-date").attr("data-calendar-date");
diff --git a/apps/client/src/widgets/launch_bar/CalendarWidget.tsx b/apps/client/src/widgets/launch_bar/CalendarWidget.tsx
index f1cdfe20b..2fcceb571 100644
--- a/apps/client/src/widgets/launch_bar/CalendarWidget.tsx
+++ b/apps/client/src/widgets/launch_bar/CalendarWidget.tsx
@@ -6,7 +6,6 @@ import appContext from "../../components/app_context";
 import "./CalendarWidget.css";
 import Calendar from "./Calendar";
 import ActionButton from "../react/ActionButton";
-import Dropdown from "../react/Dropdown";
 import { t } from "../../services/i18n";
 import FormDropdownList from "../react/FormDropdownList";
 import FormTextBox from "../react/FormTextBox";
@@ -82,6 +81,7 @@ function CalendarMonthSelector({ date, setDate }: CalendarHeaderProps) {
                 onChange={value => {
 
                 }}
+                buttonProps={{ "data-calendar-input": "month" }}
             />
             <AdjustDateButton date={date} setDate={setDate} direction="next" unit="month" />
         </div>
diff --git a/apps/client/src/widgets/react/Dropdown.tsx b/apps/client/src/widgets/react/Dropdown.tsx
index c0f5f5585..fbafda25e 100644
--- a/apps/client/src/widgets/react/Dropdown.tsx
+++ b/apps/client/src/widgets/react/Dropdown.tsx
@@ -1,11 +1,16 @@
 import { Dropdown as BootstrapDropdown } from "bootstrap";
-import { ComponentChildren } from "preact";
+import { ComponentChildren, HTMLAttributes } from "preact";
 import { CSSProperties, HTMLProps } from "preact/compat";
 import { useCallback, useEffect, useRef, useState } from "preact/hooks";
 import { useUniqueName } from "./hooks";
 
+type DataAttributes = {
+  [key: `data-${string}`]: string | number | boolean | undefined;
+};
+
 export interface DropdownProps extends Pick<HTMLProps<HTMLDivElement>, "id" | "className"> {
     buttonClassName?: string;
+    buttonProps?: Partial<HTMLAttributes<HTMLButtonElement> & DataAttributes>;
     isStatic?: boolean;
     children: ComponentChildren;
     title?: string;
@@ -24,7 +29,7 @@ export interface DropdownProps extends Pick<HTMLProps<HTMLDivElement>, "id" | "c
     dropdownOptions?: Partial<BootstrapDropdown.Options>;
 }
 
-export default function Dropdown({ id, className, buttonClassName, isStatic, children, title, text, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, iconAction, disabled, noSelectButtonStyle, noDropdownListStyle, forceShown, onShown: externalOnShown, onHidden: externalOnHidden, dropdownOptions }: DropdownProps) {
+export default function Dropdown({ id, className, buttonClassName, isStatic, children, title, text, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, iconAction, disabled, noSelectButtonStyle, noDropdownListStyle, forceShown, onShown: externalOnShown, onHidden: externalOnHidden, dropdownOptions, buttonProps }: DropdownProps) {
     const dropdownRef = useRef<HTMLDivElement | null>(null);
     const triggerRef = useRef<HTMLButtonElement | null>(null);
 
@@ -80,6 +85,7 @@ export default function Dropdown({ id, className, buttonClassName, isStatic, chi
                 title={title}
                 id={id ?? ariaId}
                 disabled={disabled}
+                {...buttonProps}
             >
                 {text}
                 <span className="caret"></span>