gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-12 10:24:23 +01:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

feat(global_menu): add support for all experimental options

Browse Source
This commit is contained in:
Elian Doran 2025-12-11 22:38:22 +02:00
parent 61fe27abbe
commit d99d701095
No known key found for this signature in database
2 changed files with 33 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/client/src/services/experimental_features.ts
View File

@ -1,7 +1,7 @@
import { t } from "./i18n"; import { t } from "./i18n";
import options from "./options"; import options from "./options";
interface ExperimentalFeature { export interface ExperimentalFeature {
id: string; id: string;
name: string; name: string;
description: string; description: string;
@ -20,7 +20,7 @@ export const experimentalFeatures = [
} }
] as const satisfies ExperimentalFeature[]; ] as const satisfies ExperimentalFeature[];
type ExperimentalFeatureId = typeof experimentalFeatures[number]["id"]; export type ExperimentalFeatureId = typeof experimentalFeatures[number]["id"];
let enabledFeatures: Set<ExperimentalFeatureId> | null = null; let enabledFeatures: Set<ExperimentalFeatureId> | null = null;

48
apps/client/src/widgets/buttons/global_menu.tsx
View File

@ -1,17 +1,19 @@
import Dropdown from "../react/Dropdown";
import "./global_menu.css"; 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 { KeyboardActionNames } from "@triliumnext/commons";
import { ComponentChildren } from "preact"; import { ComponentChildren } from "preact";
import { useContext, useEffect, useRef, useState } from "preact/hooks";
import { CommandNames } from "../../components/app_context";
import Component from "../../components/component"; 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 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<T> { interface MenuItemProps<T> {
icon: string, icon: string,
@ -73,7 +75,7 @@ export default function GlobalMenu({ isHorizontalLayout }: { isHorizontalLayout:
{!isElectron() && <BrowserOnlyOptions />} {!isElectron() && <BrowserOnlyOptions />}
{glob.isDev && <DevelopmentOptions />} {glob.isDev && <DevelopmentOptions />}
</Dropdown> </Dropdown>
) );
} }
function AdvancedMenu() { function AdvancedMenu() {
@ -91,7 +93,7 @@ function AdvancedMenu() {
{isElectron() && <MenuItem command="openDevTools" icon="bx bx-bug-alt" text={t("global_menu.open_dev_tools")} />} {isElectron() && <MenuItem command="openDevTools" icon="bx bx-bug-alt" text={t("global_menu.open_dev_tools")} />}
<KeyboardActionMenuItem command="reloadFrontendApp" icon="bx bx-refresh" text={t("global_menu.reload_frontend")} title={t("global_menu.reload_hint")} /> <KeyboardActionMenuItem command="reloadFrontendApp" icon="bx bx-refresh" text={t("global_menu.reload_frontend")} title={t("global_menu.reload_hint")} />
</FormDropdownSubmenu> </FormDropdownSubmenu>
) );
} }
function BrowserOnlyOptions() { function BrowserOnlyOptions() {
@ -102,18 +104,30 @@ function BrowserOnlyOptions() {
} }
function DevelopmentOptions() { function DevelopmentOptions() {
const newLayoutEnabled = isExperimentalFeatureEnabled("new-layout");
return <> return <>
<FormDropdownDivider /> <FormDropdownDivider />
<FormListItem disabled>Development Options</FormListItem>
<FormDropdownSubmenu icon="bx bx-test-tube" title="Experimental features">
{experimentalFeatures.map((feature) => (
<ExperimentalFeatureToggle key={feature.id} experimentalFeature={feature as ExperimentalFeature} />
))}
</FormDropdownSubmenu>
</>;
}
function ExperimentalFeatureToggle({ experimentalFeature }: { experimentalFeature: ExperimentalFeature }) {
const featureEnabled = isExperimentalFeatureEnabled(experimentalFeature.id as ExperimentalFeatureId);
return (
<FormListItem <FormListItem
icon={newLayoutEnabled ? "bx bx-layout" : "bx bxs-layout"} checked={featureEnabled}
title={experimentalFeature.description}
onClick={async () => { onClick={async () => {
await toggleExperimentalFeature("new-layout", !newLayoutEnabled); await toggleExperimentalFeature(experimentalFeature.id as ExperimentalFeatureId, !featureEnabled);
reloadFrontendApp(); reloadFrontendApp();
}} }}
>{!newLayoutEnabled ? "Switch to new layout" : "Switch to old layout"}</FormListItem> >{experimentalFeature.name}</FormListItem>
</>; );
} }
function SwitchToOptions() { function SwitchToOptions() {