diff --git a/apps/client/src/services/experimental_features.ts b/apps/client/src/services/experimental_features.ts index 980bd74d5..6e2f14e86 100644 --- a/apps/client/src/services/experimental_features.ts +++ b/apps/client/src/services/experimental_features.ts @@ -1,7 +1,7 @@ import { t } from "./i18n"; import options from "./options"; -interface ExperimentalFeature { +export interface ExperimentalFeature { id: string; name: string; description: string; @@ -20,7 +20,7 @@ export const experimentalFeatures = [ } ] as const satisfies ExperimentalFeature[]; -type ExperimentalFeatureId = typeof experimentalFeatures[number]["id"]; +export type ExperimentalFeatureId = typeof experimentalFeatures[number]["id"]; let enabledFeatures: Set | null = null; diff --git a/apps/client/src/widgets/buttons/global_menu.tsx b/apps/client/src/widgets/buttons/global_menu.tsx index 5d7f6d466..66679dd20 100644 --- a/apps/client/src/widgets/buttons/global_menu.tsx +++ b/apps/client/src/widgets/buttons/global_menu.tsx @@ -1,17 +1,19 @@ -import Dropdown from "../react/Dropdown"; import "./global_menu.css"; -import { useStaticTooltip, useStaticTooltipWithKeyboardShortcut, useTriliumOption, useTriliumOptionBool, useTriliumOptionInt } from "../react/hooks"; -import { useContext, useEffect, useRef, useState } from "preact/hooks"; -import { t } from "../../services/i18n"; -import { FormDropdownDivider, FormDropdownSubmenu, FormListHeader, FormListItem } from "../react/FormList"; -import { CommandNames } from "../../components/app_context"; -import KeyboardShortcut from "../react/KeyboardShortcut"; + import { KeyboardActionNames } from "@triliumnext/commons"; import { ComponentChildren } from "preact"; +import { useContext, useEffect, useRef, useState } from "preact/hooks"; + +import { CommandNames } from "../../components/app_context"; import Component from "../../components/component"; -import { ParentComponent } from "../react/react_utils"; +import { ExperimentalFeature, ExperimentalFeatureId, experimentalFeatures, isExperimentalFeatureEnabled, toggleExperimentalFeature } from "../../services/experimental_features"; +import { t } from "../../services/i18n"; import utils, { dynamicRequire, isElectron, isMobile, reloadFrontendApp } from "../../services/utils"; -import { isExperimentalFeatureEnabled, toggleExperimentalFeature } from "../../services/experimental_features"; +import Dropdown from "../react/Dropdown"; +import { FormDropdownDivider, FormDropdownSubmenu, FormListHeader, FormListItem } from "../react/FormList"; +import { useStaticTooltip, useStaticTooltipWithKeyboardShortcut, useTriliumOption, useTriliumOptionBool, useTriliumOptionInt } from "../react/hooks"; +import KeyboardShortcut from "../react/KeyboardShortcut"; +import { ParentComponent } from "../react/react_utils"; interface MenuItemProps { icon: string, @@ -73,7 +75,7 @@ export default function GlobalMenu({ isHorizontalLayout }: { isHorizontalLayout: {!isElectron() && } {glob.isDev && } - ) + ); } function AdvancedMenu() { @@ -91,7 +93,7 @@ function AdvancedMenu() { {isElectron() && } - ) + ); } function BrowserOnlyOptions() { @@ -102,18 +104,30 @@ function BrowserOnlyOptions() { } function DevelopmentOptions() { - const newLayoutEnabled = isExperimentalFeatureEnabled("new-layout"); - return <> + Development Options + + {experimentalFeatures.map((feature) => ( + + ))} + + ; +} + +function ExperimentalFeatureToggle({ experimentalFeature }: { experimentalFeature: ExperimentalFeature }) { + const featureEnabled = isExperimentalFeatureEnabled(experimentalFeature.id as ExperimentalFeatureId); + + return ( { - await toggleExperimentalFeature("new-layout", !newLayoutEnabled); + await toggleExperimentalFeature(experimentalFeature.id as ExperimentalFeatureId, !featureEnabled); reloadFrontendApp(); }} - >{!newLayoutEnabled ? "Switch to new layout" : "Switch to old layout"} - ; + >{experimentalFeature.name} + ); } function SwitchToOptions() {