feat(global_menu): add an option to switch layouts

apps/client/src/services/experimental_features.ts

@@ -27,6 +27,18 @@ export function getEnabledExperimentalFeatureIds() {
     return getEnabledFeatures().values();
 }
 
+export async function toggleExperimentalFeature(featureId: ExperimentalFeatureId, enable: boolean) {
+    let features = Array.from(getEnabledFeatures());
+    if (enable) {
+        if (!features.includes(featureId)) {
+            features.push(featureId);
+        }
+    } else {
+        features = features.filter(f => f !== featureId);
+    }
+    await options.save("experimentalFeatures", JSON.stringify(features));
+}
+
 function getEnabledFeatures() {
     if (!enabledFeatures) {
         let features: ExperimentalFeatureId[] = [];

apps/client/src/widgets/buttons/global_menu.tsx

@@ -10,7 +10,8 @@ import { KeyboardActionNames } from "@triliumnext/commons";
 import { ComponentChildren } from "preact";
 import Component from "../../components/component";
 import { ParentComponent } from "../react/react_utils";
-import utils, { dynamicRequire, isElectron, isMobile } from "../../services/utils";
+import utils, { dynamicRequire, isElectron, isMobile, reloadFrontendApp } from "../../services/utils";
+import { isExperimentalFeatureEnabled, toggleExperimentalFeature } from "../../services/experimental_features";
 
 interface MenuItemProps<T> {
     icon: string,
@@ -70,6 +71,7 @@ export default function GlobalMenu({ isHorizontalLayout }: { isHorizontalLayout:
             </>}
 
             {!isElectron() && <BrowserOnlyOptions />}
+            {glob.isDev && <DevelopmentOptions />}
         </Dropdown>
     )
 }
@@ -99,6 +101,21 @@ function BrowserOnlyOptions() {
     </>;
 }
 
+function DevelopmentOptions() {
+    const newLayoutEnabled = isExperimentalFeatureEnabled("new-layout");
+
+    return <>
+        <FormDropdownDivider />
+        <FormListItem
+            icon={newLayoutEnabled ? "bx bx-layout" : "bx bxs-layout"}
+            onClick={() => {
+                toggleExperimentalFeature("new-layout", !newLayoutEnabled);
+                reloadFrontendApp();
+            }}
+        >{!newLayoutEnabled ? "Switch to new layout" : "Switch to old layout"}</FormListItem>
+    </>;
+}
+
 function SwitchToOptions() {
     if (isElectron()) {
         return;