feat(layout): move fixed formatting toolbar above

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(

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

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"),

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;
 }