fix(launch_bar): title position of action buttons

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

@@ -1,5 +1,5 @@
-import { useMemo } from "preact/hooks";
+import { useContext, useMemo } from "preact/hooks";
-import { LaunchBarDropdownButton, useLauncherIconAndTitle, type LaunchBarWidgetProps } from "./launch_bar_widgets";
+import { LaunchBarContext, LaunchBarDropdownButton, useLauncherIconAndTitle } from "./launch_bar_widgets";
 import { CSSProperties } from "preact";
 import type FNote from "../../entities/fnote";
 import { useChildNotes, useNoteLabelBoolean } from "../react/hooks";
@@ -9,7 +9,8 @@ import { CustomNoteLauncher } from "./GenericButtons";
 
 const PARENT_NOTE_ID = "_lbBookmarks";
 
-export default function BookmarkButtons({ isHorizontalLayout }: LaunchBarWidgetProps) {
+export default function BookmarkButtons() {
+    const { isHorizontalLayout } = useContext(LaunchBarContext);
     const style = useMemo<CSSProperties>(() => ({
         display: "flex",
         flexDirection: isHorizontalLayout ? "row" : "column",

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

@@ -11,6 +11,7 @@ import HistoryNavigationButton from "./HistoryNavigation";
 import AiChatButton, { CommandButton, CustomWidget, NoteLauncher, QuickSearchLauncherWidget, ScriptLauncher, TodayLauncher } from "./LauncherDefinitions";
 import { useTriliumEvent } from "../react/hooks";
 import { onWheelHorizontalScroll } from "../widget_utils";
+import { LaunchBarContext } from "./launch_bar_widgets";
 
 export default function LauncherContainer({ isHorizontalLayout }: { isHorizontalLayout: boolean }) {
     const childNotes = useLauncherChildNotes();
@@ -25,17 +26,21 @@ export default function LauncherContainer({ isHorizontalLayout }: { isHorizontal
             }}
             onWheel={isHorizontalLayout ? onWheelHorizontalScroll : undefined}
         >
-            {childNotes?.map(childNote => {
+            <LaunchBarContext.Provider value={{
-                if (childNote.type !== "launcher") {
+                isHorizontalLayout
-                    throw new Error(`Note '${childNote.noteId}' '${childNote.title}' is not a launcher even though it's in the launcher subtree`);
+            }}>
-                }
+                {childNotes?.map(childNote => {
+                    if (childNote.type !== "launcher") {
+                        throw new Error(`Note '${childNote.noteId}' '${childNote.title}' is not a launcher even though it's in the launcher subtree`);
+                    }
 
-                if (!isDesktop() && childNote.isLabelTruthy("desktopOnly")) {
+                    if (!isDesktop() && childNote.isLabelTruthy("desktopOnly")) {
-                    return false;
+                        return false;
-                }
+                    }
 
-                return <Launcher key={childNote.noteId} note={childNote} isHorizontalLayout={isHorizontalLayout} />
+                    return <Launcher key={childNote.noteId} note={childNote} isHorizontalLayout={isHorizontalLayout} />
-            })}
+                })}
+            </LaunchBarContext.Provider>
         </div>
     )
 }
@@ -72,7 +77,7 @@ function initBuiltinWidget(note: FNote, isHorizontalLayout: boolean) {
 
             return <SpacerWidget baseSize={baseSize} growthFactor={growthFactor} />;
         case "bookmarks":
-            return <BookmarkButtons isHorizontalLayout={isHorizontalLayout} />;
+            return <BookmarkButtons />;
         case "protectedSession":
             return <ProtectedSessionStatusWidget />;
         case "syncStatus":
@@ -84,7 +89,7 @@ function initBuiltinWidget(note: FNote, isHorizontalLayout: boolean) {
         case "todayInJournal":
             return <TodayLauncher launcherNote={note} />
         case "quickSearch":
-            return <QuickSearchLauncherWidget isHorizontalLayout={isHorizontalLayout} />
+            return <QuickSearchLauncherWidget />
         case "aiChatLauncher":
             return <AiChatButton launcherNote={note} />
         default:

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

@@ -7,7 +7,7 @@ import QuickSearchWidget from "../quick_search";
 import { isMobile } from "../../services/utils";
 import date_notes from "../../services/date_notes";
 import { CustomNoteLauncher } from "./GenericButtons";
-import { LaunchBarActionButton, useLauncherIconAndTitle } from "./launch_bar_widgets";
+import { LaunchBarActionButton, LaunchBarContext, useLauncherIconAndTitle } from "./launch_bar_widgets";
 import dialog from "../../services/dialog";
 import { t } from "../../services/i18n";
 import { CommandNames } from "../../components/app_context";
@@ -95,7 +95,8 @@ export function TodayLauncher({ launcherNote }: { launcherNote: FNote }) {
     );
 }
 
-export function QuickSearchLauncherWidget({ isHorizontalLayout }: { isHorizontalLayout: boolean }) {
+export function QuickSearchLauncherWidget() {
+    const { isHorizontalLayout } = useContext(LaunchBarContext);
     const widget = useMemo(() => new QuickSearchWidget(), []);
     const parentComponent = useContext(ParentComponent) as BasicWidget | null;
     const isEnabled = isHorizontalLayout && !isMobile();

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

@@ -1,20 +1,26 @@
+import { createContext } from "preact";
 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";
+import { useContext } from "preact/hooks";
 
-export interface LaunchBarWidgetProps {
+export const LaunchBarContext = createContext<{
     isHorizontalLayout: boolean;
-}
+}>({
+    isHorizontalLayout: false
+})
 
 export function LaunchBarActionButton(props: Omit<ActionButtonProps, "className" | "noIconActionClass" | "titlePosition">) {
+    const { isHorizontalLayout } = useContext(LaunchBarContext);
+
     return (
         <ActionButton
             className="button-widget launcher-button"
             noIconActionClass
-            titlePosition="right"
+            titlePosition={isHorizontalLayout ? "bottom" : "right"}
             {...props}
         />
     )