feat(react/settings): basic hook to read Trilium option

apps/client/src/widgets/react/FormRadioGroup.tsx

@@ -1,9 +1,11 @@
+import type { ComponentChildren } from "preact";
+
 interface FormRadioProps {
     name: string;
     currentValue?: string;
     values: {
         value: string;
-        label: string;
+        label: string | ComponentChildren;
     }[];
     onChange(newValue: string): void;
 }

apps/client/src/widgets/react/hooks.tsx

@@ -1,7 +1,9 @@
-import { useContext, useEffect, useRef } from "preact/hooks";
+import { type Dispatch, type StateUpdater, useContext, useEffect, useRef, useState } from "preact/hooks";
 import { EventData, EventNames } from "../../components/app_context";
 import { ParentComponent } from "./ReactBasicWidget";
 import SpacedUpdate from "../../services/spaced_update";
+import { OptionNames } from "@triliumnext/commons";
+import options from "../../services/options";
 
 /**
  * Allows a React component to react to Trilium events (e.g. `entitiesReloaded`). When the desired event is triggered, the handler is invoked with the event parameters.
@@ -64,3 +66,13 @@ export function useSpacedUpdate(callback: () => Promise<void>, interval = 1000)
 
     return spacedUpdateRef.current;
 }
+
+export function useTriliumOption(name: OptionNames): [string, Dispatch<StateUpdater<string>>] {
+    const initialValue = options.get(name);
+    const [ value, setValue ] = useState(initialValue);
+
+    return [
+        value,
+        setValue
+    ]
+}

apps/client/src/widgets/type_widgets/content_widget.tsx

@@ -76,8 +76,8 @@ const TPL = /*html*/`<div class="note-detail-content-widget note-detail-printabl
 
 export type OptionPages = "_optionsAppearance" | "_optionsShortcuts" | "_optionsTextNotes" | "_optionsCodeNotes" | "_optionsImages" | "_optionsSpellcheck" | "_optionsPassword" | "_optionsMFA" | "_optionsEtapi" | "_optionsBackup" | "_optionsSync" | "_optionsAi" | "_optionsOther" | "_optionsLocalization" | "_optionsAdvanced";
 
-const CONTENT_WIDGETS: Record<OptionPages | "_backendLog", ((typeof NoteContextAwareWidget)[] | (() => JSX.Element))> = {
-    _optionsAppearance: AppearanceSettings,
+const CONTENT_WIDGETS: Record<OptionPages | "_backendLog", ((typeof NoteContextAwareWidget)[] | JSX.Element)> = {
+    _optionsAppearance: <AppearanceSettings />,
     _optionsShortcuts: [
         KeyboardShortcutsOptions
     ],
@@ -169,7 +169,7 @@ export default class ContentWidgetTypeWidget extends TypeWidget {
         this.$content.empty();
         this.children = [];
 
-        const contentWidgets = (CONTENT_WIDGETS as Record<string, (typeof NoteContextAwareWidget[] | (() => JSX.Element))>)[note.noteId];
+        const contentWidgets = (CONTENT_WIDGETS as Record<string, (typeof NoteContextAwareWidget[] | JSX.Element)>)[note.noteId];
         this.$content.toggleClass("options", note.noteId.startsWith("_options"));
 
         // Unknown widget.
@@ -196,7 +196,7 @@ export default class ContentWidgetTypeWidget extends TypeWidget {
         }
 
         // React widget.
-        this.$content.append(renderReactWidget(this, contentWidgets()));
+        this.$content.append(renderReactWidget(this, contentWidgets));
     }
 
 }

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

@@ -1,3 +1,33 @@
+import { t } from "../../../services/i18n";
+import FormRadioGroup from "../../react/FormRadioGroup";
+import { useTriliumOption } from "../../react/hooks";
+import OptionsSection from "./components/OptionsSection";
+
 export default function AppearanceSettings() {
-    return <p>Hi</p>
+    const [ layoutOrientation, setLayoutOrientation ] = useTriliumOption("layoutOrientation");
+
+    return (
+        <OptionsSection title={t("theme.layout")}>
+            <FormRadioGroup
+                name="layout-orientation"
+                values={[
+                    {
+                        label: <>
+                            <strong>{t("theme.layout-vertical-title")}</strong>
+                            - {t("theme.layout-vertical-description")}
+                        </>,
+                        value: "vertical"
+                    },
+                    {
+                        label: <>
+                            <strong>{t("theme.layout-horizontal-title")}</strong>
+                            - {t("theme.layout-horizontal-description")}
+                        </>,
+                        value: "horizontal"
+                    }
+                ]}
+                currentValue={layoutOrientation} onChange={setLayoutOrientation}
+            />
+        </OptionsSection>
+    )
 }

apps/client/src/widgets/type_widgets/options/appearance/theme.ts

@@ -5,28 +5,6 @@ import { t } from "../../../../services/i18n.js";
 import type { OptionMap } from "@triliumnext/commons";
 
 const TPL = /*html*/`
-<div class="options-section">
-    <h4>${t("theme.layout")}</h4>
-
-    <div class="form-group row">
-        <div>
-            <label class="tn-radio">
-                <input type="radio" name="layout-orientation" value="vertical" />
-                <strong>${t("theme.layout-vertical-title")}</strong>
-                - ${t("theme.layout-vertical-description")}
-            </label>
-        </div>
-
-        <div>
-            <label class="tn-radio">
-                <input type="radio" name="layout-orientation" value="horizontal" />
-                <strong>${t("theme.layout-horizontal-title")}</strong>
-                - ${t("theme.layout-horizontal-description")}
-            </label>
-        </div>
-    </div>
-</div>
-
 <div class="options-section">
     <h4>${t("theme.title")}</h4>
 

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

@@ -0,0 +1,16 @@
+import type { ComponentChildren } from "preact";
+
+interface OptionsSectionProps {
+    title: string;
+    children: ComponentChildren;
+}
+
+export default function OptionsSection({ title, children }: OptionsSectionProps) {
+    return (
+        <div className="options-section">
+            <h4>{title}</h4>
+
+            {children}
+        </div>
+    );
+}