From 460d20d6b24b915e66e0b14b77adfa48f9f7a4cd Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 9 Dec 2025 19:42:37 +0200
Subject: [PATCH] feat(layout): move ribbon to the bottom as experimental
 layout

---
 apps/client/src/layouts/desktop_layout.tsx      |  5 ++++-
 .../src/services/experimental_features.ts       | 17 ++++++++++++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/layouts/desktop_layout.tsx b/apps/client/src/layouts/desktop_layout.tsx
index d1f35ec62..cebdf423d 100644
--- a/apps/client/src/layouts/desktop_layout.tsx
+++ b/apps/client/src/layouts/desktop_layout.tsx
@@ -46,6 +46,7 @@ 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";
 
 export default class DesktopLayout {
 
@@ -71,6 +72,7 @@ export default class DesktopLayout {
          */
         const fullWidthTabBar = launcherPaneIsHorizontal || (isElectron && !hasNativeTitleBar && isMac);
         const customTitleBarButtons = !hasNativeTitleBar && !isMac && !isWindows;
+        const isNewLayout = isExperimentalFeatureEnabled("new-layout");
 
         const rootContainer = new RootContainer(true)
             .setParent(appContext)
@@ -143,7 +145,7 @@ export default class DesktopLayout {
                                                             .child(<NoteIconWidget />)
                                                             .child(<NoteTitleWidget />)
                                                         )
-                                                        .child(<Ribbon />)
+                                                        .optChild(!isNewLayout, <Ribbon />)
                                                         .child(new WatchedFileUpdateStatusWidget())
                                                         .child(<FloatingButtons items={DESKTOP_FLOATING_BUTTONS} />)
                                                         .child(
@@ -167,6 +169,7 @@ export default class DesktopLayout {
                                                             ...this.customWidgets.get("node-detail-pane"), // typo, let's keep it for a while as BC
                                                             ...this.customWidgets.get("note-detail-pane")
                                                         )
+                                                        .optChild(isNewLayout, <Ribbon />)
                                                 )
                                             )
                                             .child(...this.customWidgets.get("center-pane"))
diff --git a/apps/client/src/services/experimental_features.ts b/apps/client/src/services/experimental_features.ts
index 4f6566163..447c2442f 100644
--- a/apps/client/src/services/experimental_features.ts
+++ b/apps/client/src/services/experimental_features.ts
@@ -1,3 +1,5 @@
+import options from "./options";
+
 interface ExperimentalFeature {
     id: string;
     name: string;
@@ -6,8 +8,21 @@ interface ExperimentalFeature {
 
 export const experimentalFeatures: ExperimentalFeature[] = [
     {
-        id: "newLayout",
+        id: "new-layout",
         name: "New Layout",
         description: "Try out the new layout for a more modern look and improved usability.",
     }
 ];
+
+type ExperimentalFeatureId = typeof experimentalFeatures[number]["id"];
+
+let enabledFeatures: Set<ExperimentalFeatureId> | null = null;
+
+export function isExperimentalFeatureEnabled(featureId: ExperimentalFeatureId): boolean {
+    if (!enabledFeatures) {
+        const features = JSON.parse(options.get("experimentalFeatures")) as string[];
+        enabledFeatures = new Set(features);
+    }
+
+    return enabledFeatures.has(featureId);
+}