feat(react/settings): port theme switch

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

@@ -0,0 +1,14 @@
+import type { ComponentChildren } from "preact";
+
+interface ColumnProps {
+    md: number;
+    children: ComponentChildren;
+}
+
+export default function Column({ md, children }: ColumnProps) {
+    return (
+        <div className={`col-md-${md}`}>
+            {children}
+        </div>
+    )
+}

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

@@ -0,0 +1,25 @@
+interface FormSelectProps {
+    currentValue?: string;
+    onChange(newValue: string): void;
+    values: { val: string, title: string }[];
+}
+
+export default function FormSelect({ currentValue, values, onChange }: FormSelectProps) {
+    return (
+        <select
+            class="form-select"
+            onChange={e => onChange((e.target as HTMLInputElement).value)}
+        >
+            {values.map(item => {
+                return (
+                    <option
+                        value={item.val}
+                        selected={item.val === currentValue}
+                    >
+                        {item.title}
+                    </option>
+                );
+            })}
+        </select>
+    )
+}

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

@@ -28,5 +28,5 @@ export function renderReactWidget(parentComponent: Component, el: JSX.Element) {
             {el}
         </ParentComponent.Provider>
     ), renderContainer);
-    return $(renderContainer.firstChild as HTMLElement);
+    return $(renderContainer.children) as JQuery<HTMLElement>;
 }

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

@@ -4,7 +4,7 @@ import { ParentComponent } from "./ReactBasicWidget";
 import SpacedUpdate from "../../services/spaced_update";
 import { OptionNames } from "@triliumnext/commons";
 import options from "../../services/options";
-import utils from "../../services/utils";
+import utils, { reloadFrontendApp } from "../../services/utils";
 
 /**
  * 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.
@@ -68,12 +68,16 @@ export function useSpacedUpdate(callback: () => Promise<void>, interval = 1000)
     return spacedUpdateRef.current;
 }
 
-export function useTriliumOption(name: OptionNames): [string, (newValue: string) => Promise<void>] {
+export function useTriliumOption(name: OptionNames, needsRefresh?: boolean): [string, (newValue: string) => Promise<void>] {
     const initialValue = options.get(name);
     const [ value, setValue ] = useState(initialValue);
 
     async function wrappedSetValue(newValue: string) {
         await options.save(name, newValue);
+
+        if (needsRefresh) {
+            reloadFrontendApp(`option change: ${name}`);
+        }
     };
 
     useTriliumEvent("entitiesReloaded", ({ loadResults }) => {