feat(react/settings): port note revision snapshot interval

apps/client/src/translations/cn/translation.json

@@ -1165,7 +1165,7 @@
   },
   "revisions_snapshot_interval": {
     "note_revisions_snapshot_interval_title": "笔记修订快照间隔",
-    "note_revisions_snapshot_description": "笔记修订快照间隔是创建新笔记修订的时间。有关更多信息，请参见 <a href=\"https://triliumnext.github.io/Docs/Wiki/note-revisions.html\" class=\"external\">wiki</a>。",
+    "note_revisions_snapshot_description": "笔记修订快照间隔是创建新笔记修订的时间。有关更多信息，请参见 <doc>wiki</doc>。",
     "snapshot_time_interval_label": "笔记修订快照时间间隔："
   },
   "revisions_snapshot_limit": {

apps/client/src/translations/de/translation.json

@@ -1138,7 +1138,7 @@
   },
   "revisions_snapshot_interval": {
     "note_revisions_snapshot_interval_title": "Snapshot-Intervall für Notizrevisionen",
-        "note_revisions_snapshot_description": "Das Snapshot-Zeitintervall für Notizrevisionen ist die Zeit, nach der eine neue Notizrevision erstellt wird. Weitere Informationen findest du im <a href=\"https://triliumnext.github.io/Docs/Wiki/note-revisions.html\" class=\"external\">Wiki</a>.",
+    "note_revisions_snapshot_description": "Das Snapshot-Zeitintervall für Notizrevisionen ist die Zeit, nach der eine neue Notizrevision erstellt wird. Weitere Informationen findest du im <doc>Wiki</doc>.",
     "snapshot_time_interval_label": "Zeitintervall für Notiz-Revisions-Snapshot:"
   },
   "revisions_snapshot_limit": {

apps/client/src/translations/en/translation.json

@@ -1310,7 +1310,7 @@
   },
   "revisions_snapshot_interval": {
     "note_revisions_snapshot_interval_title": "Note Revision Snapshot Interval",
-    "note_revisions_snapshot_description": "The Note revision snapshot interval is the time after which a new note revision will be created for the note. See <a href=\"https://triliumnext.github.io/Docs/Wiki/note-revisions.html\" class=\"external\">wiki</a> for more info.",
+    "note_revisions_snapshot_description": "The Note revision snapshot interval is the time after which a new note revision will be created for the note. See <doc>wiki</doc> for more info.",
     "snapshot_time_interval_label": "Note revision snapshot time interval:"
   },
   "revisions_snapshot_limit": {

apps/client/src/translations/es/translation.json

@@ -1303,7 +1303,7 @@
   },
   "revisions_snapshot_interval": {
     "note_revisions_snapshot_interval_title": "Intervalo de instantáneas de revisiones de notas",
-    "note_revisions_snapshot_description": "El intervalo de tiempo de la instantánea de revisión de nota es el tiempo después de lo cual se creará una nueva revisión para la nota. Ver <a href=\"https://triliumnext.github.io/docs/wiki/note-revisions.html\" class=\"external\"> wiki </a> para obtener más información.",
+    "note_revisions_snapshot_description": "El intervalo de tiempo de la instantánea de revisión de nota es el tiempo después de lo cual se creará una nueva revisión para la nota. Ver <doc>wiki</doc> para obtener más información.",
     "snapshot_time_interval_label": "Intervalo de tiempo de la instantánea de revisión de notas:"
   },
   "revisions_snapshot_limit": {

apps/client/src/translations/fr/translation.json

@@ -1143,7 +1143,7 @@
   },
   "revisions_snapshot_interval": {
     "note_revisions_snapshot_interval_title": "Délai d'enregistrement automatique d'une version de note",
-    "note_revisions_snapshot_description": "Le délai d'enregistrement automatique des versions de note définit le temps avant la création automatique d'une nouvelle version de note. Consultez le <a href=\"https://triliumnext.github.io/Docs/Wiki/note-revisions.html\" class=\"external\">wiki</a> pour plus d'informations.",
+    "note_revisions_snapshot_description": "Le délai d'enregistrement automatique des versions de note définit le temps avant la création automatique d'une nouvelle version de note. Consultez le <doc>wiki</doc> pour plus d'informations.",
     "snapshot_time_interval_label": "Délai d'enregistrement automatique de version de note :"
   },
   "revisions_snapshot_limit": {

apps/client/src/translations/ro/translation.json

@@ -1072,7 +1072,7 @@
     "note_revisions": "Revizii ale notiței"
   },
   "revisions_snapshot_interval": {
-    "note_revisions_snapshot_description": "Intervalul de salvare a reviziilor este timpul după care se crează o nouă revizie a unei notițe. Vedeți <a href=\"https://triliumnext.github.io/Docs/Wiki/note-revisions.html\" class=\"external\">wiki-ul</a> pentru mai multe informații.",
+    "note_revisions_snapshot_description": "Intervalul de salvare a reviziilor este timpul după care se crează o nouă revizie a unei notițe. Vedeți <doc>wiki-ul</doc> pentru mai multe informații.",
     "note_revisions_snapshot_interval_title": "Intervalul de salvare a reviziilor",
     "snapshot_time_interval_label": "Intervalul de salvare a reviziilor:"
   },

apps/client/src/translations/tw/translation.json

@@ -1778,7 +1778,7 @@
   },
   "revisions_snapshot_interval": {
     "note_revisions_snapshot_interval_title": "筆記歷史快照間隔",
-    "note_revisions_snapshot_description": "筆記歷史快照間隔是建立新筆記修訂的時間。如需詳細資訊，請參閱 <a href=\"https://triliumnext.github.io/Docs/Wiki/note-revisions.html\" class=\"external\">wiki</a>。",
+    "note_revisions_snapshot_description": "筆記歷史快照間隔是建立新筆記修訂的時間。如需詳細資訊，請參閱 <doc>wiki</doc>。",
     "snapshot_time_interval_label": "筆記歷史快照時間間隔："
   },
   "custom_date_time_format": {

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

@@ -1,3 +1,4 @@
+import { Trans } from "react-i18next";
 import { t } from "../../../services/i18n";
 import server from "../../../services/server";
 import toast from "../../../services/toast";
@@ -11,6 +12,7 @@ export default function OtherSettings() {
         <>
             <NoteErasureTimeout />
             <AttachmentErasureTimeout />
+            <RevisionSnapshotInterval />
         </>
     )
 }
@@ -60,3 +62,22 @@ function AttachmentErasureTimeout() {
         </OptionsSection>
     )
 }
+
+function RevisionSnapshotInterval() {
+    return (
+        <OptionsSection title={t("revisions_snapshot_interval.note_revisions_snapshot_interval_title")}>
+            <FormText>
+                <Trans
+                    i18nKey="revisions_snapshot_interval.note_revisions_snapshot_description"
+                    components={{ doc: <a href="https://triliumnext.github.io/Docs/Wiki/note-revisions.html" class="external" />}}
+                />
+            </FormText>
+            <TimeSelector
+                name="revision-snapshot-time-interval"
+                label={t("revisions_snapshot_interval.snapshot_time_interval_label")}
+                optionValueId="revisionSnapshotTimeInterval" optionTimeScaleId="revisionSnapshotTimeIntervalTimeScale"
+                minimumSeconds={10}
+            />
+        </OptionsSection>
+    )
+}

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

@@ -1,31 +0,0 @@
-import { t } from "../../../../services/i18n.js";
-import TimeSelector from "../time_selector.js";
-
-const TPL = /*html*/`
-<div class="options-section">
-    <h4>${t("revisions_snapshot_interval.note_revisions_snapshot_interval_title")}</h4>
-
-    <p class="form-text use-tn-links">${t("revisions_snapshot_interval.note_revisions_snapshot_description")}</p>
-    <div id="time-selector-placeholder"></div>
-</div>`;
-
-export default class RevisionsSnapshotIntervalOptions extends TimeSelector {
-
-    constructor() {
-        super({
-            widgetId: "revision-snapshot-time-interval",
-            widgetLabelId: "revisions_snapshot_interval.snapshot_time_interval_label",
-            optionValueId: "revisionSnapshotTimeInterval",
-            optionTimeScaleId: "revisionSnapshotTimeIntervalTimeScale",
-            minimumSeconds: 10
-        });
-        super.doRender();
-    }
-
-    doRender() {
-        const $timeSelector = this.$widget;
-        // inject TimeSelector widget template
-        this.$widget = $(TPL);
-        this.$widget.find("#time-selector-placeholder").replaceWith($timeSelector);
-    }
-}