chore(options): address requested changes

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

@@ -30,9 +30,9 @@ interface FormSelectProps<T, Q> extends ValueConfig<T, Q> {
 /**
  * Combobox component that takes in any object array as data. Each item of the array is rendered as an item, and the key and values are obtained by looking into the object by a specified key.
  */
-export default function FormSelect<T>({ name, id, onChange, style, className, ...restProps }: FormSelectProps<T, T>) {
+export default function FormSelect<T>({ name, id, onChange, style, className, disabled, ...restProps }: FormSelectProps<T, T>) {
     return (
-        <FormSelectBody name={name} id={id} onChange={onChange} style={style} className={className}>
+        <FormSelectBody name={name} id={id} onChange={onChange} style={style} className={className} disabled={disabled}>
             <FormSelectGroup {...restProps} />
         </FormSelectBody>
     );

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

@@ -54,7 +54,7 @@ function Editor({ wordWrapping, setWordWrapping }: EditorProps) {
                     type="number" min={0}
                     unit={t("text_auto_read_only_size.unit")}
                     currentValue={autoReadonlySize}
-                    onChange={setAutoReadonlySize}
+                    onBlur={setAutoReadonlySize}
                 />
             </OptionsRow>
 

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

@@ -1,11 +1,10 @@
 import type { ComponentChildren } from "preact";
 import { CSSProperties } from "preact/compat";
-import { openInAppHelpFromUrl } from "../../../../services/utils";
-import ActionButton from "../../../react/ActionButton";
+import HelpButton from "../../../react/HelpButton";
 
 interface OptionsSectionProps {
     title?: ComponentChildren;
-    description?: string;
+    description?: ComponentChildren;
     children: ComponentChildren;
     noCard?: boolean;
     style?: CSSProperties;
@@ -17,13 +16,7 @@ export default function OptionsSection({ title, description, children, noCard, c
     const header = (title || helpUrl) && (
         <div className="options-section-header">
             {title && <h4>{title}</h4>}
-            {helpUrl && (
-                <ActionButton
-                    icon="bx bx-help-circle"
-                    text="Help"
-                    onClick={() => openInAppHelpFromUrl(helpUrl)}
-                />
-            )}
+            {helpUrl && <HelpButton helpPage={helpUrl} />}
         </div>
     );
 

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

@@ -191,7 +191,7 @@ function RevisionSettings() {
                     type="number" min={-1}
                     currentValue={revisionSnapshotNumberLimit}
                     unit={t("revisions_snapshot_limit.snapshot_number_limit_unit")}
-                    onChange={value => {
+                    onBlur={value => {
                         const newValue = parseInt(value, 10);
                         if (!isNaN(newValue) && newValue >= -1) {
                             setRevisionSnapshotNumberLimit(newValue);

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

@@ -1,5 +1,5 @@
 import { SyncTestResponse } from "@triliumnext/commons";
-import { useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 
 import { t } from "../../../services/i18n";
 import server from "../../../services/server";
@@ -20,6 +20,9 @@ export function SyncConfiguration() {
     const [localHost, setLocalHost] = useState(syncServerHost);
     const [localProxy, setLocalProxy] = useState(syncProxy);
 
+    useEffect(() => setLocalHost(syncServerHost), [syncServerHost]);
+    useEffect(() => setLocalProxy(syncProxy), [syncProxy]);
+
     return (
         <OptionsSection helpUrl="cbkrhQjrkKrh">
             <OptionsRow name="sync-server-host" label={t("sync_2.server_address")} description={t("sync_2.server_address_description")} stacked>
@@ -53,6 +56,10 @@ export function SyncConfiguration() {
                 label={t("sync_2.test_button")}
                 description={t("sync_2.test_description")}
                 onClick={async () => {
+                    await Promise.all([
+                        setSyncServerHost(localHost),
+                        setSyncProxy(localProxy)
+                    ]);
                     const result = await server.post<SyncTestResponse>("sync/test");
 
                     if (result.success && result.message) {

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

@@ -169,7 +169,7 @@ function Editor() {
                     type="number" min={0}
                     unit={t("text_auto_read_only_size.unit")}
                     currentValue={autoReadonlySize}
-                    onChange={setAutoReadonlySize}
+                    onBlur={setAutoReadonlySize}
                 />
             </OptionsRow>
 
@@ -180,7 +180,7 @@ function Editor() {
             >
                 <FormTextBox
                     placeholder="YYYY-MM-DD HH:mm"
-                    currentValue={customDateTimeFormat || "YYYY-MM-DD HH:mm"} onChange={setCustomDateTimeFormat}
+                    currentValue={customDateTimeFormat || "YYYY-MM-DD HH:mm"} onBlur={setCustomDateTimeFormat}
                 />
             </OptionsRow>
         </OptionsSection>

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

@@ -181,15 +181,16 @@ function getUserThemes() {
     const ret: UserTheme[] = [];
 
     for (const note of notes) {
+        const title = note.getTitleOrProtected();
         let value = note.getOwnedLabelValue("appTheme");
 
         if (!value) {
-            value = note.title.toLowerCase().replace(/[^a-z0-9]/gi, "-");
+            value = title.toLowerCase().replace(/[^a-z0-9]/gi, "-");
         }
 
         ret.push({
             val: value,
-            title: note.title,
+            title,
             noteId: note.noteId,
             icon: note.getIcon()
         });