feat(options/appearance): switch between layouts

apps/client/src/services/experimental_features.ts

@@ -20,6 +20,10 @@ export type ExperimentalFeatureId = typeof experimentalFeatures[number]["id"];
 let enabledFeatures: Set<ExperimentalFeatureId> | null = null;
 
 export function isExperimentalFeatureEnabled(featureId: ExperimentalFeatureId): boolean {
+    if (featureId === "new-layout") {
+        return options.is("newLayout");
+    }
+
     return getEnabledFeatures().has(featureId);
 }
 

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

@@ -112,9 +112,16 @@ export default function AppearanceSettings() {
 }
 
 function LayoutSwitcher() {
+    const [ newLayout, setNewLayout ] = useTriliumOptionBool("newLayout");
+
     return (
-        <OptionsSection title="Layout">
+        <OptionsSection title="User interface">
             <RadioWithIllustration
+                currentValue={newLayout ? "new-layout" : "old-layout"}
+                onChange={async newValue => {
+                    await setNewLayout(newValue === "new-layout");
+                    reloadFrontendApp();
+                }}
                 values={[
                     { key: "old-layout", text: "Old layout", illustration: <LayoutIllustration /> },
                     { key: "new-layout", text: "New layout", illustration: <LayoutIllustration isNewLayout /> }
@@ -124,7 +131,7 @@ function LayoutSwitcher() {
     );
 }
 
-function LayoutIllustration({ isNewLayout }: { isNewLayout: boolean }) {
+function LayoutIllustration({ isNewLayout }: { isNewLayout?: boolean }) {
     return (
         <div className="old-layout-illustration">
             <div className="launcher-pane">

apps/client/src/widgets/type_widgets/options/components/RadioWithIllustration.css

@@ -13,5 +13,16 @@
         }
 
         margin-bottom: 0;
+
+        &> .illustration {
+            border-radius: 6px;
+            padding: 3px;
+            cursor: pointer;
         }
     }
+
+    &> .selected figure > .illustration {
+        outline: 3px solid var(--input-focus-outline-color);
+    }
+
+}

apps/client/src/widgets/type_widgets/options/components/RadioWithIllustration.tsx

@@ -1,5 +1,6 @@
 import "./RadioWithIllustration.css";
 
+import clsx from "clsx";
 import { ComponentChild } from "preact";
 
 interface RadioWithIllustrationProps {
@@ -12,13 +13,22 @@ interface RadioWithIllustrationProps {
     onChange(newValue: string);
 }
 
-export default function RadioWithIllustration({ values }: RadioWithIllustrationProps) {
+export default function RadioWithIllustration({ currentValue, onChange, values }: RadioWithIllustrationProps) {
     return (
         <ul className="radio-with-illustration">
             {values.map(value => (
-                <li key={value.key}>
+                <li
+                    key={value.key}
+                    className={clsx(value.key === currentValue && "selected")}
+                >
                     <figure>
+                        <div
+                            className="illustration"
+                            role="button"
+                            onClick={() => onChange(value.key)}
+                        >
                             {value.illustration}
+                        </div>
                         <figcaption>{value.text}</figcaption>
                     </figure>
                 </li>