From 8fa6e3838268a07ba78470d7039032c7c8d8dc3f Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sun, 14 Dec 2025 23:50:40 +0200 Subject: [PATCH] refactor(ribbon): decouple completely from new layout --- apps/client/src/layouts/desktop_layout.tsx | 3 +- apps/client/src/widgets/ribbon/Ribbon.tsx | 13 +++---- .../src/widgets/ribbon/RibbonDefinition.ts | 36 +++++++++---------- .../src/widgets/ribbon/ribbon-interface.ts | 4 +-- 4 files changed, 24 insertions(+), 32 deletions(-) diff --git a/apps/client/src/layouts/desktop_layout.tsx b/apps/client/src/layouts/desktop_layout.tsx index b443bd27d..f4ac06e87 100644 --- a/apps/client/src/layouts/desktop_layout.tsx +++ b/apps/client/src/layouts/desktop_layout.tsx @@ -143,8 +143,7 @@ export default class DesktopLayout { .optChild(!isNewLayout, ) .optChild(!isNewLayout, ) .optChild(isNewLayout, )) - .optChild(!isNewLayout, ) - .optChild(isNewLayout, ) + .optChild(!isNewLayout, ) .child(new WatchedFileUpdateStatusWidget()) .child() .child( diff --git a/apps/client/src/widgets/ribbon/Ribbon.tsx b/apps/client/src/widgets/ribbon/Ribbon.tsx index c8352ee02..411c7de21 100644 --- a/apps/client/src/widgets/ribbon/Ribbon.tsx +++ b/apps/client/src/widgets/ribbon/Ribbon.tsx @@ -5,9 +5,9 @@ import clsx from "clsx"; import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks"; import { EventNames } from "../../components/app_context"; -import { isExperimentalFeatureEnabled } from "../../services/experimental_features"; import { Indexed, numberObjectsInPlace } from "../../services/utils"; import { useNoteContext, useNoteProperty, useStaticTooltipWithKeyboardShortcut, useTriliumEvents } from "../react/hooks"; +import NoteActions from "./NoteActions"; import { TabConfiguration, TitleContext } from "./ribbon-interface"; import { RIBBON_TAB_DEFINITIONS } from "./RibbonDefinition"; @@ -17,9 +17,7 @@ interface ComputedTab extends Indexed { shouldShow: boolean; } -const isNewLayout = isExperimentalFeatureEnabled("new-layout"); - -export default function Ribbon({ children }: { children?: preact.ComponentChildren }) { +export default function Ribbon() { const { note, ntxId, hoistedNoteId, notePath, noteContext, componentId, isReadOnlyTemporarilyDisabled } = useNoteContext(); const noteType = useNoteProperty(note, "type"); const [ activeTabIndex, setActiveTabIndex ] = useState(); @@ -32,8 +30,7 @@ export default function Ribbon({ children }: { children?: preact.ComponentChildr async function refresh() { const computedTabs: ComputedTab[] = []; for (const tab of TAB_CONFIGURATION) { - const shouldAvoid = (isNewLayout && tab.avoidInNewLayout); - const shouldShow = !shouldAvoid && await shouldShowTab(tab.show, titleContext); + const shouldShow = await shouldShowTab(tab.show, titleContext); computedTabs.push({ ...tab, shouldShow: !!shouldShow @@ -92,7 +89,7 @@ export default function Ribbon({ children }: { children?: preact.ComponentChildr /> ))} - {children} +
@@ -115,7 +112,7 @@ export default function Ribbon({ children }: { children?: preact.ComponentChildr noteContext={noteContext} componentId={componentId} activate={useCallback(() => { - setActiveTabIndex(tab.index) + setActiveTabIndex(tab.index); }, [setActiveTabIndex])} />
diff --git a/apps/client/src/widgets/ribbon/RibbonDefinition.ts b/apps/client/src/widgets/ribbon/RibbonDefinition.ts index 86f8edde0..2adf748b3 100644 --- a/apps/client/src/widgets/ribbon/RibbonDefinition.ts +++ b/apps/client/src/widgets/ribbon/RibbonDefinition.ts @@ -1,4 +1,3 @@ -import { isExperimentalFeatureEnabled } from "../../services/experimental_features"; import { t } from "../../services/i18n"; import options from "../../services/options"; import BasicPropertiesTab from "./BasicPropertiesTab"; @@ -18,8 +17,6 @@ import ScriptTab from "./ScriptTab"; import SearchDefinitionTab from "./SearchDefinitionTab"; import SimilarNotesTab from "./SimilarNotesTab"; -const isNewLayout = isExperimentalFeatureEnabled("new-layout"); - export const RIBBON_TAB_DEFINITIONS: TabConfiguration[] = [ { title: t("classic_editor_toolbar.title"), @@ -30,15 +27,14 @@ export const RIBBON_TAB_DEFINITIONS: TabConfiguration[] = [ toggleCommand: "toggleRibbonTabClassicEditor", content: FormattingToolbar, activate: ({ note }) => !options.is("editedNotesOpenInRibbon") || !note?.hasOwnedLabel("dateNote"), - stayInDom: !isNewLayout, - avoidInNewLayout: true + stayInDom: true }, { title: ({ note }) => note?.isTriliumSqlite() ? t("script_executor.query") : t("script_executor.script"), icon: "bx bx-play", content: ScriptTab, activate: true, - show: ({ note }) => note && !isNewLayout && + show: ({ note }) => note && (note.isTriliumScript() || note.isTriliumSqlite()) && (note.hasLabel("executeDescription") || note.hasLabel("executeButton")) }, @@ -47,34 +43,34 @@ export const RIBBON_TAB_DEFINITIONS: TabConfiguration[] = [ icon: "bx bx-search", content: SearchDefinitionTab, activate: true, - show: ({ note }) => !isNewLayout && note?.type === "search" + show: ({ note }) => note?.type === "search" }, { title: t("edited_notes.title"), icon: "bx bx-calendar-edit", content: EditedNotesTab, - show: ({ note }) => !isNewLayout && note?.hasOwnedLabel("dateNote"), + show: ({ note }) => note?.hasOwnedLabel("dateNote"), activate: () => options.is("editedNotesOpenInRibbon") }, { title: t("book_properties.book_properties"), icon: "bx bx-book", content: CollectionPropertiesTab, - show: ({ note }) => !isNewLayout && (note?.type === "book" || note?.type === "search"), + show: ({ note }) => (note?.type === "book" || note?.type === "search"), toggleCommand: "toggleRibbonTabBookProperties" }, { title: t("note_properties.info"), icon: "bx bx-info-square", content: NotePropertiesTab, - show: ({ note }) => !isNewLayout && !!note?.getLabelValue("pageUrl"), + show: ({ note }) => !!note?.getLabelValue("pageUrl"), activate: true }, { title: t("file_properties.title"), icon: "bx bx-file", content: FilePropertiesTab, - show: ({ note }) => !isNewLayout && note?.type === "file", + show: ({ note }) => note?.type === "file", toggleCommand: "toggleRibbonTabFileProperties", activate: ({ note }) => note?.mime !== "application/pdf" }, @@ -82,7 +78,7 @@ export const RIBBON_TAB_DEFINITIONS: TabConfiguration[] = [ title: t("image_properties.title"), icon: "bx bx-image", content: ImagePropertiesTab, - show: ({ note }) => !isNewLayout && note?.type === "image", + show: ({ note }) => note?.type === "image", toggleCommand: "toggleRibbonTabImageProperties", activate: true, }, @@ -90,49 +86,49 @@ export const RIBBON_TAB_DEFINITIONS: TabConfiguration[] = [ title: t("basic_properties.basic_properties"), icon: "bx bx-slider", content: BasicPropertiesTab, - show: ({note}) => !isNewLayout && !note?.isLaunchBarConfig(), + show: ({note}) => !note?.isLaunchBarConfig(), toggleCommand: "toggleRibbonTabBasicProperties" }, { title: t("owned_attribute_list.owned_attributes"), icon: "bx bx-list-check", content: OwnedAttributesTab, - show: ({note}) => !isNewLayout && !note?.isLaunchBarConfig(), + show: ({note}) => !note?.isLaunchBarConfig(), toggleCommand: "toggleRibbonTabOwnedAttributes", - stayInDom: !isNewLayout + stayInDom: true }, { title: t("inherited_attribute_list.title"), icon: "bx bx-list-plus", content: InheritedAttributesTab, - show: ({note}) => !isNewLayout && !note?.isLaunchBarConfig(), + show: ({note}) => !note?.isLaunchBarConfig(), toggleCommand: "toggleRibbonTabInheritedAttributes" }, { title: t("note_paths.title"), icon: "bx bx-collection", content: NotePathsTab, - show: !isNewLayout, + show: true, toggleCommand: "toggleRibbonTabNotePaths" }, { title: t("note_map.title"), icon: "bx bxs-network-chart", content: NoteMapTab, - show: !isNewLayout, + show: true, toggleCommand: "toggleRibbonTabNoteMap" }, { title: t("similar_notes.title"), icon: "bx bx-bar-chart", - show: ({ note }) => !isNewLayout && note?.type !== "search" && !note?.isLabelTruthy("similarNotesWidgetDisabled"), + show: ({ note }) => note?.type !== "search" && !note?.isLabelTruthy("similarNotesWidgetDisabled"), content: SimilarNotesTab, toggleCommand: "toggleRibbonTabSimilarNotes" }, { title: t("note_info_widget.title"), icon: "bx bx-info-circle", - show: ({ note }) => !isNewLayout && !!note, + show: ({ note }) => !!note, content: NoteInfoTab, toggleCommand: "toggleRibbonTabNoteInfo" } diff --git a/apps/client/src/widgets/ribbon/ribbon-interface.ts b/apps/client/src/widgets/ribbon/ribbon-interface.ts index a83bbc55f..77543994d 100644 --- a/apps/client/src/widgets/ribbon/ribbon-interface.ts +++ b/apps/client/src/widgets/ribbon/ribbon-interface.ts @@ -1,7 +1,8 @@ import { KeyboardActionNames } from "@triliumnext/commons"; +import { VNode } from "preact"; + import NoteContext from "../../components/note_context"; import FNote from "../../entities/fnote"; -import { VNode } from "preact"; export interface TabContext { note: FNote | null | undefined; @@ -30,5 +31,4 @@ export interface TabConfiguration { * By default the tab content will not be rendered unless the tab is active (i.e. selected by the user). Setting to `true` will ensure that the tab is rendered even when inactive, for cases where the tab needs to be accessible at all times (e.g. for the detached editor toolbar) or if event handling is needed. */ stayInDom?: boolean; - avoidInNewLayout?: boolean; }