From cd0e4a567878935a939e049e4e2493fc523d792b Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 9 Dec 2025 20:36:48 +0200
Subject: [PATCH] feat(layout): move fixed formatting toolbar above

---
 apps/client/src/layouts/desktop_layout.tsx         | 5 ++++-
 apps/client/src/widgets/ribbon/Ribbon.tsx          | 7 +++++--
 apps/client/src/widgets/ribbon/RibbonDefinition.ts | 4 ++--
 apps/client/src/widgets/ribbon/ribbon-interface.ts | 1 +
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/apps/client/src/layouts/desktop_layout.tsx b/apps/client/src/layouts/desktop_layout.tsx
index ce6acd39f..1d0d7b96f 100644
--- a/apps/client/src/layouts/desktop_layout.tsx
+++ b/apps/client/src/layouts/desktop_layout.tsx
@@ -46,8 +46,10 @@ import SpacerWidget from "../widgets/launch_bar/SpacerWidget.jsx";
 import LauncherContainer from "../widgets/launch_bar/LauncherContainer.jsx";
 import Breadcrumb from "../widgets/Breadcrumb.jsx";
 import TabHistoryNavigationButtons from "../widgets/TabHistoryNavigationButtons.jsx";
-import { experimentalFeatures, isExperimentalFeatureEnabled } from "../services/experimental_features.js";
+import { isExperimentalFeatureEnabled } from "../services/experimental_features.js";
 import NoteActions from "../widgets/ribbon/NoteActions.jsx";
+import FormattingToolbar from "../widgets/ribbon/FormattingToolbar.jsx";
+import StandaloneRibbonAdapter from "../widgets/ribbon/components/StandaloneRibbonAdapter.jsx";
 
 export default class DesktopLayout {
 
@@ -149,6 +151,7 @@ export default class DesktopLayout {
                                                         )
                                                         .optChild(!isNewLayout, titleRow)
                                                         .optChild(!isNewLayout, <Ribbon><NoteActions /></Ribbon>)
+                                                        .optChild(isNewLayout, <StandaloneRibbonAdapter component={FormattingToolbar} />)
                                                         .child(new WatchedFileUpdateStatusWidget())
                                                         .child(<FloatingButtons items={DESKTOP_FLOATING_BUTTONS} />)
                                                         .child(
diff --git a/apps/client/src/widgets/ribbon/Ribbon.tsx b/apps/client/src/widgets/ribbon/Ribbon.tsx
index 5889827fd..3afd39b56 100644
--- a/apps/client/src/widgets/ribbon/Ribbon.tsx
+++ b/apps/client/src/widgets/ribbon/Ribbon.tsx
@@ -4,11 +4,11 @@ import "./style.css";
 
 import { Indexed, numberObjectsInPlace } from "../../services/utils";
 import { EventNames } from "../../components/app_context";
-import NoteActions from "./NoteActions";
 import { KeyboardActionNames } from "@triliumnext/commons";
 import { RIBBON_TAB_DEFINITIONS } from "./RibbonDefinition";
 import { TabConfiguration, TitleContext } from "./ribbon-interface";
 import clsx from "clsx";
+import { isExperimentalFeatureEnabled } from "../../services/experimental_features";
 
 const TAB_CONFIGURATION = numberObjectsInPlace<TabConfiguration>(RIBBON_TAB_DEFINITIONS);
 
@@ -16,6 +16,8 @@ interface ComputedTab extends Indexed<TabConfiguration> {
     shouldShow: boolean;
 }
 
+const isNewLayout = isExperimentalFeatureEnabled("new-layout");
+
 export default function Ribbon({ children }: { children?: preact.ComponentChildren }) {
     const { note, ntxId, hoistedNoteId, notePath, noteContext, componentId, isReadOnlyTemporarilyDisabled } = useNoteContext();
     const noteType = useNoteProperty(note, "type");
@@ -29,7 +31,8 @@ export default function Ribbon({ children }: { children?: preact.ComponentChildr
     async function refresh() {
         const computedTabs: ComputedTab[] = [];
         for (const tab of TAB_CONFIGURATION) {
-            const shouldShow = await shouldShowTab(tab.show, titleContext);
+            const shouldAvoid = (isNewLayout && tab.avoidInNewLayout);
+            const shouldShow = !shouldAvoid && await shouldShowTab(tab.show, titleContext);
             computedTabs.push({
                 ...tab,
                 shouldShow: !!shouldShow
diff --git a/apps/client/src/widgets/ribbon/RibbonDefinition.ts b/apps/client/src/widgets/ribbon/RibbonDefinition.ts
index 9976bde38..280f7cdda 100644
--- a/apps/client/src/widgets/ribbon/RibbonDefinition.ts
+++ b/apps/client/src/widgets/ribbon/RibbonDefinition.ts
@@ -24,12 +24,12 @@ export const RIBBON_TAB_DEFINITIONS: TabConfiguration[] = [
         icon: "bx bx-text",
         show: async ({ note, noteContext }) => note?.type === "text"
             && options.get("textNoteEditorType") === "ckeditor-classic"
-            && !isExperimentalFeatureEnabled("new-layout")
             && !(await noteContext?.isReadOnly()),
         toggleCommand: "toggleRibbonTabClassicEditor",
         content: FormattingToolbar,
         activate: ({ note }) => !options.is("editedNotesOpenInRibbon") || !note?.hasOwnedLabel("dateNote"),
-        stayInDom: true
+        stayInDom: !isExperimentalFeatureEnabled("new-layout"),
+        avoidInNewLayout: true
     },
     {
         title: ({ note }) => note?.isTriliumSqlite() ? t("script_executor.query") : t("script_executor.script"),
diff --git a/apps/client/src/widgets/ribbon/ribbon-interface.ts b/apps/client/src/widgets/ribbon/ribbon-interface.ts
index 7ab982dd2..a83bbc55f 100644
--- a/apps/client/src/widgets/ribbon/ribbon-interface.ts
+++ b/apps/client/src/widgets/ribbon/ribbon-interface.ts
@@ -30,4 +30,5 @@ 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;
 }