From f934318625783d217860f058011452e4a42793fa Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 18 Aug 2025 18:27:12 +0300
Subject: [PATCH] feat(react/settings): port revision snapshot list

---
 .../widgets/type_widgets/options/other.tsx    | 37 +++++++++++++-
 .../options/other/revision_snapshots_limit.ts | 50 -------------------
 2 files changed, 36 insertions(+), 51 deletions(-)
 delete mode 100644 apps/client/src/widgets/type_widgets/options/other/revision_snapshots_limit.ts

diff --git a/apps/client/src/widgets/type_widgets/options/other.tsx b/apps/client/src/widgets/type_widgets/options/other.tsx
index 3ad95a55a..12bed4ee4 100644
--- a/apps/client/src/widgets/type_widgets/options/other.tsx
+++ b/apps/client/src/widgets/type_widgets/options/other.tsx
@@ -7,11 +7,12 @@ import FormText from "../../react/FormText";
 import OptionsSection from "./components/OptionsSection";
 import TimeSelector from "./components/TimeSelector";
 import { useMemo } from "preact/hooks";
-import { useTriliumOptionBool, useTriliumOptionJson } from "../../react/hooks";
+import { useTriliumOption, useTriliumOptionBool, useTriliumOptionInt, useTriliumOptionJson } from "../../react/hooks";
 import { SANITIZER_DEFAULT_ALLOWED_TAGS } from "@triliumnext/commons";
 import FormCheckbox from "../../react/FormCheckbox";
 import FormGroup from "../../react/FormGroup";
 import search from "../../../services/search";
+import { FormTextBoxWithUnit } from "../../react/FormTextBox";
 
 export default function OtherSettings() {
     return (
@@ -19,6 +20,7 @@ export default function OtherSettings() {
             <NoteErasureTimeout />
             <AttachmentErasureTimeout />
             <RevisionSnapshotInterval />
+            <RevisionSnapshotLimit />
             <HtmlImportTags />
             <ShareSettings />
             <NetworkSettings />
@@ -91,6 +93,39 @@ function RevisionSnapshotInterval() {
     )
 }
 
+function RevisionSnapshotLimit() {
+    const [ revisionSnapshotNumberLimit, setRevisionSnapshotNumberLimit ] = useTriliumOption("revisionSnapshotNumberLimit");
+
+    return (
+        <OptionsSection title={t("revisions_snapshot_limit.note_revisions_snapshot_limit_title")}>
+            <FormText>{t("revisions_snapshot_limit.note_revisions_snapshot_limit_description")}</FormText>
+
+            <FormGroup>
+                <FormTextBoxWithUnit
+                    name="revision-snapshot-number-limit"  
+                    type="number" min={-1}
+                    currentValue={revisionSnapshotNumberLimit}
+                    unit={t("revisions_snapshot_limit.snapshot_number_limit_unit")}
+                    onChange={value => {
+                        const newValue = parseInt(value, 10);
+                        if (!isNaN(newValue) && newValue >= -1) {
+                            setRevisionSnapshotNumberLimit(newValue);
+                        }
+                    }}
+                />
+            </FormGroup>
+
+            <Button
+                text={t("revisions_snapshot_limit.erase_excess_revision_snapshots")}
+                onClick={async () => {
+                    await server.post("revisions/erase-all-excess-revisions");
+                    toast.showMessage(t("revisions_snapshot_limit.erase_excess_revision_snapshots_prompt"));
+                }}
+            />
+        </OptionsSection>
+    )
+}
+
 function HtmlImportTags() {
     const [ allowedHtmlTags, setAllowedHtmlTags ] = useTriliumOptionJson<readonly string[]>("allowedHtmlTags");
 
diff --git a/apps/client/src/widgets/type_widgets/options/other/revision_snapshots_limit.ts b/apps/client/src/widgets/type_widgets/options/other/revision_snapshots_limit.ts
deleted file mode 100644
index 55f734818..000000000
--- a/apps/client/src/widgets/type_widgets/options/other/revision_snapshots_limit.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import OptionsWidget from "../options_widget.js";
-import { t } from "../../../../services/i18n.js";
-import server from "../../../../services/server.js";
-import toastService from "../../../../services/toast.js";
-import type { OptionMap } from "@triliumnext/commons";
-
-const TPL = /*html*/`
-<div class="options-section">
-    <h4>${t("revisions_snapshot_limit.note_revisions_snapshot_limit_title")}</h4>
-
-    <p class="form-text">${t("revisions_snapshot_limit.note_revisions_snapshot_limit_description")}</p>
-
-    <div class="form-group">
-        <label>${t("revisions_snapshot_limit.snapshot_number_limit_label")}</label>
-        <label class="input-group tn-number-unit-pair">
-            <input class="revision-snapshot-number-limit form-control options-number-input" type="number" min="-1">
-            <span class="input-group-text">${t("revisions_snapshot_limit.snapshot_number_limit_unit")}</span>
-        </label>
-    </div>
-
-    <button class="erase-excess-revision-snapshots-now-button btn btn-sm">
-                    ${t("revisions_snapshot_limit.erase_excess_revision_snapshots")}</button>
-</div>`;
-
-export default class RevisionSnapshotsLimitOptions extends OptionsWidget {
-
-    private $revisionSnapshotsNumberLimit!: JQuery<HTMLElement>;
-    private $eraseExcessRevisionSnapshotsButton!: JQuery<HTMLElement>;
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$revisionSnapshotsNumberLimit = this.$widget.find(".revision-snapshot-number-limit");
-        this.$revisionSnapshotsNumberLimit.on("change", () => {
-            let revisionSnapshotNumberLimit = parseInt(String(this.$revisionSnapshotsNumberLimit.val()), 10);
-            if (!isNaN(revisionSnapshotNumberLimit) && revisionSnapshotNumberLimit >= -1) {
-                this.updateOption("revisionSnapshotNumberLimit", revisionSnapshotNumberLimit);
-            }
-        });
-        this.$eraseExcessRevisionSnapshotsButton = this.$widget.find(".erase-excess-revision-snapshots-now-button");
-        this.$eraseExcessRevisionSnapshotsButton.on("click", () => {
-            server.post("revisions/erase-all-excess-revisions").then(() => {
-                toastService.showMessage(t("revisions_snapshot_limit.erase_excess_revision_snapshots_prompt"));
-            });
-        });
-    }
-
-    async optionsLoaded(options: OptionMap) {
-        this.$revisionSnapshotsNumberLimit.val(options.revisionSnapshotNumberLimit);
-    }
-}