From e58d6bf2a3289e7b2aa8855e3232871b75621983 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 9 Dec 2025 19:51:53 +0200
Subject: [PATCH] feat(layout): reverse the layout of the ribbon

---
 apps/client/src/services/experimental_features.ts  | 11 +++++++++--
 .../src/widgets/containers/root_container.ts       | 10 +++++++++-
 apps/client/src/widgets/ribbon/style.css           | 14 ++++++++++++++
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/services/experimental_features.ts b/apps/client/src/services/experimental_features.ts
index 447c2442f..f01b5ab02 100644
--- a/apps/client/src/services/experimental_features.ts
+++ b/apps/client/src/services/experimental_features.ts
@@ -19,10 +19,17 @@ type ExperimentalFeatureId = typeof experimentalFeatures[number]["id"];
 let enabledFeatures: Set<ExperimentalFeatureId> | null = null;
 
 export function isExperimentalFeatureEnabled(featureId: ExperimentalFeatureId): boolean {
+    return getEnabledFeatures().has(featureId);
+}
+
+export function getEnabledExperimentalFeatureIds() {
+    return getEnabledFeatures().values();
+}
+
+function getEnabledFeatures() {
     if (!enabledFeatures) {
         const features = JSON.parse(options.get("experimentalFeatures")) as string[];
         enabledFeatures = new Set(features);
     }
-
-    return enabledFeatures.has(featureId);
+    return enabledFeatures;
 }
diff --git a/apps/client/src/widgets/containers/root_container.ts b/apps/client/src/widgets/containers/root_container.ts
index d2622e6e2..03df4a8ec 100644
--- a/apps/client/src/widgets/containers/root_container.ts
+++ b/apps/client/src/widgets/containers/root_container.ts
@@ -5,6 +5,7 @@ import FlexContainer from "./flex_container.js";
 import options from "../../services/options.js";
 import type BasicWidget from "../basic_widget.js";
 import utils from "../../services/utils.js";
+import { getEnabledExperimentalFeatureIds } from "../../services/experimental_features.js";
 
 /**
  * The root container is the top-most widget/container, from which the entire layout derives.
@@ -37,6 +38,7 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
         this.#setBackdropEffects();
         this.#setThemeCapabilities();
         this.#setLocaleAndDirection(options.get("locale"));
+        this.#setExperimentalFeatures();
 
         return super.render();
     }
@@ -56,7 +58,7 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
 
         if (loadResults.isOptionReloaded("maxContentWidth")
             || loadResults.isOptionReloaded("centerContent")) {
-            
+
             this.#setMaxContentWidth();
         }
     }
@@ -99,6 +101,12 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
         document.body.classList.toggle("theme-supports-background-effects", useBgfx);
     }
 
+    #setExperimentalFeatures() {
+        for (const featureId of getEnabledExperimentalFeatureIds()) {
+            document.body.classList.add(`experimental-feature-${featureId}`);
+        }
+    }
+
     #setLocaleAndDirection(locale: string) {
         const correspondingLocale = LOCALES.find(l => l.id === locale);
         document.body.lang = locale;
diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css
index 8c2a5fbb5..ed51e89f2 100644
--- a/apps/client/src/widgets/ribbon/style.css
+++ b/apps/client/src/widgets/ribbon/style.css
@@ -415,3 +415,17 @@ body[dir=rtl] .attribute-list-editor {
     pointer-events: none; /* makes it unclickable */
 }
 /* #endregion */
+
+/* #region Experimental layout */
+body.experimental-feature-new-layout .ribbon-container {
+    display: flex;
+    flex-direction: column-reverse;
+    border-top: 1px solid var(--main-border-color);
+
+    .ribbon-tab-spacer,
+    .ribbon-button-container,
+    .ribbon-body {
+        border-bottom: 0 !important;
+    }
+}
+/* #endregion */