feat(react/settings): port tray options

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

@@ -1,15 +1,5 @@
 import TypeWidget from "./type_widget.js";
-import SearchEngineOptions from "./options/other/search_engine.js";
-import TrayOptions from "./options/other/tray.js";
-import NoteErasureTimeoutOptions from "./options/other/note_erasure_timeout.js";
-import RevisionsSnapshotIntervalOptions from "./options/other/revisions_snapshot_interval.js";
-import RevisionSnapshotsLimitOptions from "./options/other/revision_snapshots_limit.js";
-import NetworkConnectionsOptions from "./options/other/network_connections.js";
-import HtmlImportTagsOptions from "./options/other/html_import_tags.js";
-import BackendLogWidget from "./content/backend_log.js";
-import AttachmentErasureTimeoutOptions from "./options/other/attachment_erasure_timeout.js";
 import MultiFactorAuthenticationOptions from './options/multi_factor_authentication.js';
-import ShareSettingsOptions from "./options/other/share_settings.js";
 import AiSettingsOptions from "./options/ai_settings.js";
 import type FNote from "../../entities/fnote.js";
 import type NoteContextAwareWidget from "../note_context_aware_widget.js";
@@ -30,6 +20,7 @@ import ShortcutSettings from "./options/shortcuts.js";
 import TextNoteSettings from "./options/text_notes.jsx";
 import CodeNoteSettings from "./options/code_notes.jsx";
 import OtherSettings from "./options/other.jsx";
+import BackendLogWidget from "./content/backend_log.js";
 
 const TPL = /*html*/`<div class="note-detail-content-widget note-detail-printable">
     <style>

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

@@ -19,7 +19,10 @@ import { isElectron } from "../../../services/utils";
 export default function OtherSettings() {
     return (
         <>
-            {isElectron() && <SearchEngineSettings />}
+            {isElectron() && <>
+                <SearchEngineSettings />
+                <TrayOptionsSettings />
+            </>}
             <NoteErasureTimeout />
             <AttachmentErasureTimeout />
             <RevisionSnapshotInterval />
@@ -82,6 +85,21 @@ function SearchEngineSettings() {
     )
 }
 
+function TrayOptionsSettings() {
+    const [ disableTray, setDisableTray ] = useTriliumOptionBool("disableTray");
+
+    return (
+        <OptionsSection title={t("tray.title")}>
+            <FormCheckbox
+                name="tray-enabled"
+                label={t("tray.enable_tray")}
+                currentValue={!disableTray}
+                onChange={trayEnabled => setDisableTray(!trayEnabled)}
+            />
+        </OptionsSection>
+    )
+}
+
 function NoteErasureTimeout() {
     return (
         <OptionsSection title={t("note_erasure_timeout.note_erasure_timeout_title")}>

apps/client/src/widgets/type_widgets/options/other/tray.ts

@@ -1,33 +0,0 @@
-import OptionsWidget from "../options_widget.js";
-import { t } from "../../../../services/i18n.js";
-import utils from "../../../../services/utils.js";
-import type { OptionMap } from "@triliumnext/commons";
-
-const TPL = /*html*/`
-<div class="options-section">
-    <h4>${t("tray.title")}</h4>
-
-    <label class="tn-checkbox">
-        <input type="checkbox" class="tray-enabled">
-        ${t("tray.enable_tray")}
-    </label>
-</div>`;
-
-export default class TrayOptions extends OptionsWidget {
-
-    private $trayEnabled!: JQuery<HTMLElement>;
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$trayEnabled = this.$widget.find(".tray-enabled");
-        this.$trayEnabled.on("change", () => this.updateOption("disableTray", !this.$trayEnabled.is(":checked") ? "true" : "false"));
-    }
-
-    isEnabled() {
-        return utils.isElectron();
-    }
-
-    async optionsLoaded(options: OptionMap) {
-        this.$trayEnabled.prop("checked", options.disableTray !== "true");
-    }
-}