refactor(react/launch_bar): deduplicate launcher icon and title

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

@@ -1,17 +1,15 @@
 import FNote from "../../entities/fnote";
-import { escapeHtml } from "../../services/utils";
+import { useTriliumOptionBool } from "../react/hooks";
-import { useNoteLabel, useNoteProperty, useTriliumOptionBool } from "../react/hooks";
+import { LaunchBarActionButton, useLauncherIconAndTitle } from "./launch_bar_widgets";
-import { LaunchBarActionButton } from "./launch_bar_widgets";
 
 export default function AiChatButton({ launcherNote }: { launcherNote: FNote }) {
     const [ aiEnabled ] = useTriliumOptionBool("aiEnabled");
-    const [ iconClass ] = useNoteLabel(launcherNote, "iconClass");
+    const { icon, title } = useLauncherIconAndTitle(launcherNote);
-    const title = useNoteProperty(launcherNote, "title");
 
-    return aiEnabled && iconClass && title && (
+    return aiEnabled && (
         <LaunchBarActionButton
-            icon={iconClass}
+            icon={icon}
-            text={escapeHtml(title)}
+            text={title}
             triggerCommand="createAiChat"
         />
     )

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 { useChildNotes, useNoteLabelBoolean } from "../react/hooks";
-import { escapeHtml } from "../../services/utils";
 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 { icon, title } = useLauncherIconAndTitle(note);
-    const title = useNoteProperty(note, "title");
     const childNotes = useChildNotes(note.noteId);
 
-    return title && iconClass && (
+    return (
         <LaunchBarDropdownButton
-            icon={iconClass}
+            icon={icon}
-            title={escapeHtml(title)}
+            title={title}
         >
             <div className="bookmark-folder-widget">
                 <div className="parent-note">

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}
+            icon={icon}
-            text={escapeHtml(title)}
+            text={title}
             triggerCommand={command as CommandNames}
         />
     )
 }
 
 export function NoteLauncher({ launcherNote, targetNoteId, hoistedNoteId }: { launcherNote: FNote, targetNoteId: string, hoistedNoteId?: string }) {
-    const [ iconClass ] = useNoteLabel(launcherNote, "iconClass");
+    const { icon, title } = useLauncherIconAndTitle(launcherNote);
-    const title = useNoteProperty(launcherNote, "title");
 
     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}

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 { dynamicRequire, isElectron } from "../../services/utils";
-import { useNoteLabel, useNoteProperty } from "../react/hooks";
+import { LaunchBarActionButton, useLauncherIconAndTitle } from "./launch_bar_widgets";
-import { LaunchBarActionButton } 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 { icon, title } = useLauncherIconAndTitle(launcherNote);
-    const title = useNoteProperty(launcherNote, "title");
     const webContentsRef = useRef<WebContents>(null);
 
     useEffect(() => {
@@ -27,10 +25,10 @@ export default function HistoryNavigationButton({ launcherNote, command }: Histo
         }
     }, []);
 
-    return iconClass && title && (
+    return (
         <LaunchBarActionButton
-            icon={iconClass}
+            icon={icon}
-            text={escapeHtml(title)}
+            text={title}
             triggerCommand={command}
             onContextMenu={async (e) => {
                 e.preventDefault();

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 ?? "")
+    };
+}