feat(react/settings): port advanced sync options

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

@@ -1,8 +1,4 @@
 import TypeWidget from "./type_widget.js";
-import ElectronIntegrationOptions from "./options/appearance/electron_integration.js";
-import ThemeOptions from "./options/appearance/theme.js";
-import FontsOptions from "./options/appearance/fonts.js";
-import MaxContentWidthOptions from "./options/appearance/max_content_width.js";
 import KeyboardShortcutsOptions from "./options/shortcuts.js";
 import HeadingStyleOptions from "./options/text_notes/heading_style.js";
 import TableOfContentsOptions from "./options/text_notes/table_of_contents.js";
@@ -12,7 +8,6 @@ import DateTimeFormatOptions from "./options/text_notes/date_time_format.js";
 import CodeEditorOptions from "./options/code_notes/code_editor.js";
 import CodeAutoReadOnlySizeOptions from "./options/code_notes/code_auto_read_only_size.js";
 import CodeMimeTypesOptions from "./options/code_notes/code_mime_types.js";
-import ImageOptions from "./options/images/images.js";
 import SpellcheckOptions from "./options/spellcheck.js";
 import PasswordOptions from "./options/password/password.js";
 import ProtectedSessionTimeoutOptions from "./options/password/protected_session_timeout.js";
@@ -50,6 +45,7 @@ import type { JSX } from "preact/jsx-runtime";
 import AppearanceSettings from "./options/appearance.jsx";
 import { renderReactWidget } from "../react/ReactBasicWidget.jsx";
 import ImageSettings from "./options/images.jsx";
+import AdvancedSettings from "./options/advanced.jsx";
 
 const TPL = /*html*/`<div class="note-detail-content-widget note-detail-printable">
     <style>
@@ -131,12 +127,7 @@ const CONTENT_WIDGETS: Record<OptionPages | "_backendLog", ((typeof NoteContextA
         LocalizationOptions,
         LanguageOptions
     ],
-    _optionsAdvanced: [
+    _optionsAdvanced: <AdvancedSettings />,
-        AdvancedSyncOptions,
-        DatabaseIntegrityCheckOptions,
-        DatabaseAnonymizationOptions,
-        VacuumDatabaseOptions
-    ],
     _backendLog: [
         BackendLogWidget
     ]

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

@@ -0,0 +1,34 @@
+import { t } from "../../../services/i18n";
+import server from "../../../services/server";
+import toast from "../../../services/toast";
+import Button from "../../react/Button";
+import OptionsSection from "./components/OptionsSection"
+
+export default function AdvancedSettings() {
+    return <>
+        <AdvancedSyncOptions />
+    </>;
+}
+
+function AdvancedSyncOptions() {
+    return (
+        <OptionsSection title={t("sync.title")}>
+            <Button
+                text={t("sync.force_full_sync_button")}
+                onClick={async () => {
+                    await server.post("sync/force-full-sync");
+                    toast.showMessage(t("sync.full_sync_triggered"));
+                }}
+            />
+
+            <Button
+                text={t("sync.fill_entity_changes_button")}
+                onClick={async () => {
+                    toast.showMessage(t("sync.filling_entity_changes"));
+                    await server.post("sync/fill-entity-changes");
+                    toast.showMessage(t("sync.sync_rows_filled_successfully"));
+                }}
+            />
+        </OptionsSection>
+    );
+}

apps/client/src/widgets/type_widgets/options/advanced/sync.ts

@@ -1,40 +0,0 @@
-import OptionsWidget from "../options_widget.js";
-import server from "../../../../services/server.js";
-import toastService from "../../../../services/toast.js";
-import { t } from "../../../../services/i18n.js";
-import type { OptionMap } from "@triliumnext/commons";
-
-const TPL = /*html*/`
-<div class="options-section">
-    <h4>${t("sync.title")}</h4>
-    <button class="force-full-sync-button btn btn-secondary">${t("sync.force_full_sync_button")}</button>
-
-    <button class="fill-entity-changes-button btn btn-secondary">${t("sync.fill_entity_changes_button")}</button>
-</div>`;
-
-export default class AdvancedSyncOptions extends OptionsWidget {
-
-    private $forceFullSyncButton!: JQuery<HTMLElement>;
-    private $fillEntityChangesButton!: JQuery<HTMLElement>;
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$forceFullSyncButton = this.$widget.find(".force-full-sync-button");
-        this.$fillEntityChangesButton = this.$widget.find(".fill-entity-changes-button");
-        this.$forceFullSyncButton.on("click", async () => {
-            await server.post("sync/force-full-sync");
-
-            toastService.showMessage(t("sync.full_sync_triggered"));
-        });
-
-        this.$fillEntityChangesButton.on("click", async () => {
-            toastService.showMessage(t("sync.filling_entity_changes"));
-
-            await server.post("sync/fill-entity-changes");
-
-            toastService.showMessage(t("sync.sync_rows_filled_successfully"));
-        });
-    }
-
-    async optionsLoaded(options: OptionMap) {}
-}