feat(client/server): basic support for experimental features

apps/client/src/services/experimental_features.ts

@@ -0,0 +1,13 @@
+interface ExperimentalFeature {
+    id: string;
+    name: string;
+    description: string;
+}
+
+export const experimentalFeatures: ExperimentalFeature[] = [
+    {
+        id: "newLayout",
+        name: "New Layout",
+        description: "Try out the new layout for a more modern look and improved usability.",
+    }
+];

apps/client/src/widgets/type_widgets/options/advanced.tsx

@@ -7,6 +7,9 @@ import FormText from "../../react/FormText";
 import OptionsSection from "./components/OptionsSection"
 import Column from "../../react/Column";
 import { useEffect, useState } from "preact/hooks";
+import CheckboxList from "./components/CheckboxList";
+import { experimentalFeatures } from "../../../services/experimental_features";
+import { useTriliumOptionJson } from "../../react/hooks";
 
 export default function AdvancedSettings() {
     return <>
@@ -14,6 +17,7 @@ export default function AdvancedSettings() {
         <DatabaseIntegrityOptions />
         <DatabaseAnonymizationOptions />
         <VacuumDatabaseOptions />
+        <ExperimentalOptions />
     </>;
 }
 
@@ -44,14 +48,14 @@ function DatabaseIntegrityOptions() {
     return (
         <OptionsSection title={t("database_integrity_check.title")}>
             <FormText>{t("database_integrity_check.description")}</FormText>
-            
+
             <Button
                 text={t("database_integrity_check.check_button")}
                 onClick={async () => {
                     toast.showMessage(t("database_integrity_check.checking_integrity"));
-                    
+
                     const { results } = await server.get<DatabaseCheckIntegrityResponse>("database/check-integrity");
-        
+
                     if (results.length === 1 && results[0].integrity_check === "ok") {
                         toast.showMessage(t("database_integrity_check.integrity_check_succeeded"));
                     } else {
@@ -93,7 +97,7 @@ function DatabaseAnonymizationOptions() {
                     buttonClick={async () => {
                         toast.showMessage(t("database_anonymization.creating_fully_anonymized_database"));
                         const resp = await server.post<DatabaseAnonymizeResponse>("database/anonymize/full");
-            
+
                         if (!resp.success) {
                             toast.showError(t("database_anonymization.error_creating_anonymized_database"));
                         } else {
@@ -141,7 +145,7 @@ function ExistingAnonymizedDatabases({ databases }: { databases: AnonymizedDbRes
         return <FormText>{t("database_anonymization.no_anonymized_database_yet")}</FormText>
     }
 
-    return (    
+    return (
         <table className="table table-stripped">
             <thead>
                 <th>{t("database_anonymization.existing_anonymized_databases")}</th>
@@ -172,4 +176,21 @@ function VacuumDatabaseOptions() {
             />
         </OptionsSection>
     )
-}
+}
+
+function ExperimentalOptions() {
+    const [ enabledExperimentalFeatures, setEnabledExperimentalFeatures ] = useTriliumOptionJson<string[]>("experimentalFeatures");
+
+    return (
+        <OptionsSection title="Experimental Options">
+            <FormText>These options are experimental and may cause instability. Use with caution.</FormText>
+
+            <CheckboxList
+                values={experimentalFeatures}
+                keyProperty="id"
+                titleProperty="name"
+                currentValue={enabledExperimentalFeatures} onChange={setEnabledExperimentalFeatures}
+            />
+        </OptionsSection>
+    )
+}

apps/server/src/routes/api/options.ts

@@ -99,6 +99,7 @@ const ALLOWED_OPTIONS = new Set<OptionNames>([
     "showLoginInShareTheme",
     "splitEditorOrientation",
     "seenCallToActions",
+    "experimentalFeatures",
 
     // AI/LLM integration options
     "aiEnabled",

apps/server/src/services/options_init.ts

@@ -215,7 +215,8 @@ const defaultOptions: DefaultOption[] = [
     { name: "aiSystemPrompt", value: "", isSynced: true },
     { name: "aiSelectedProvider", value: "openai", isSynced: true },
 
-    { name: "seenCallToActions", value: "[]", isSynced: true }
+    { name: "seenCallToActions", value: "[]", isSynced: true },
+    { name: "experimentalFeatures", value: "[]", isSynced: true }
 ];
 
 /**

packages/commons/src/lib/options_interface.ts

@@ -155,6 +155,7 @@ export interface OptionDefinitions extends KeyboardShortcutsOptions<KeyboardActi
     codeOpenAiModel: string;
     aiSelectedProvider: string;
     seenCallToActions: string;
+    experimentalFeatures: string;
 }
 
 export type OptionNames = keyof OptionDefinitions;