From 83e599f0e9d9a61fd7f459d967532ac38e2011e7 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 5 Dec 2025 11:52:52 +0200 Subject: [PATCH] refactor(widgets): relocate note launcher & command button --- .../src/widgets/launch_bar/GenericButtons.tsx | 43 +------------------ .../widgets/launch_bar/LauncherContainer.tsx | 3 +- .../launch_bar/LauncherDefinitions.tsx | 43 ++++++++++++++++++- 3 files changed, 44 insertions(+), 45 deletions(-) diff --git a/apps/client/src/widgets/launch_bar/GenericButtons.tsx b/apps/client/src/widgets/launch_bar/GenericButtons.tsx index e9759343e..06e5bd750 100644 --- a/apps/client/src/widgets/launch_bar/GenericButtons.tsx +++ b/apps/client/src/widgets/launch_bar/GenericButtons.tsx @@ -1,24 +1,8 @@ -import appContext, { CommandNames } from "../../components/app_context"; +import appContext 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 } 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); - const [ command ] = useNoteLabel(launcherNote, "command"); - - return command && ( - - ) -} export function CustomNoteLauncher({ launcherNote, getTargetNoteId, getHoistedNoteId }: { launcherNote: FNote, @@ -62,28 +46,3 @@ export function CustomNoteLauncher({ launcherNote, getTargetNoteId, getHoistedNo /> ) } - -// 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 }) { - return ( - { - 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} - /> - ); -} diff --git a/apps/client/src/widgets/launch_bar/LauncherContainer.tsx b/apps/client/src/widgets/launch_bar/LauncherContainer.tsx index a6a5d8a68..5d48bc645 100644 --- a/apps/client/src/widgets/launch_bar/LauncherContainer.tsx +++ b/apps/client/src/widgets/launch_bar/LauncherContainer.tsx @@ -8,9 +8,8 @@ import BookmarkButtons from "./BookmarkButtons"; import ProtectedSessionStatusWidget from "./ProtectedSessionStatusWidget"; import SyncStatus from "./SyncStatus"; import HistoryNavigationButton from "./HistoryNavigation"; -import { CustomWidget, QuickSearchLauncherWidget, ScriptLauncher, TodayLauncher } from "./LauncherDefinitions"; +import { CommandButton, CustomWidget, NoteLauncher, QuickSearchLauncherWidget, ScriptLauncher, TodayLauncher } from "./LauncherDefinitions"; import AiChatButton from "./AiChatButton"; -import { CommandButton, NoteLauncher } from "./GenericButtons"; import { useTriliumEvent } from "../react/hooks"; export default function LauncherContainer({ isHorizontalLayout }: { isHorizontalLayout: boolean }) { diff --git a/apps/client/src/widgets/launch_bar/LauncherDefinitions.tsx b/apps/client/src/widgets/launch_bar/LauncherDefinitions.tsx index f21baa819..91f8a794f 100644 --- a/apps/client/src/widgets/launch_bar/LauncherDefinitions.tsx +++ b/apps/client/src/widgets/launch_bar/LauncherDefinitions.tsx @@ -1,5 +1,5 @@ import { useContext, useEffect, useMemo, useState } from "preact/hooks"; -import { useLegacyWidget, useNoteContext, useNoteRelationTarget } from "../react/hooks"; +import { useLegacyWidget, useNoteContext, useNoteLabel, useNoteRelationTarget } from "../react/hooks"; import { ParentComponent } from "../react/react_utils"; import BasicWidget from "../basic_widget"; import FNote from "../../entities/fnote"; @@ -8,6 +8,47 @@ import { isMobile } from "../../services/utils"; import date_notes from "../../services/date_notes"; import { CustomNoteLauncher } from "./GenericButtons"; import { LaunchBarActionButton, useLauncherIconAndTitle } from "./launch_bar_widgets"; +import dialog from "../../services/dialog"; +import { t } from "../../services/i18n"; +import { CommandNames } from "../../components/app_context"; + +export function CommandButton({ launcherNote }: { launcherNote: FNote }) { + const { icon, title } = useLauncherIconAndTitle(launcherNote); + const [ command ] = useNoteLabel(launcherNote, "command"); + + return command && ( + + ) +} + +// 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 }) { + return ( + { + 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} + /> + ); +} export function ScriptLauncher({ launcherNote }: { launcherNote: FNote }) { const { icon, title } = useLauncherIconAndTitle(launcherNote);