From 7e03774b8ec0af2fe7d976fd3f9a117f0bb3818f Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 14 Aug 2025 22:42:49 +0300
Subject: [PATCH] feat(react/settings): port vacuum database

---
 .../widgets/type_widgets/options/advanced.tsx | 18 ++++++++++++
 .../options/advanced/vacuum_database.ts       | 29 -------------------
 2 files changed, 18 insertions(+), 29 deletions(-)
 delete mode 100644 apps/client/src/widgets/type_widgets/options/advanced/vacuum_database.ts

diff --git a/apps/client/src/widgets/type_widgets/options/advanced.tsx b/apps/client/src/widgets/type_widgets/options/advanced.tsx
index 51667bc62..643ff7bb3 100644
--- a/apps/client/src/widgets/type_widgets/options/advanced.tsx
+++ b/apps/client/src/widgets/type_widgets/options/advanced.tsx
@@ -10,6 +10,7 @@ export default function AdvancedSettings() {
     return <>
         <AdvancedSyncOptions />
         <DatabaseIntegrityOptions />
+        <VacuumDatabaseOptions />
     </>;
 }
 
@@ -66,4 +67,21 @@ function DatabaseIntegrityOptions() {
             />
         </OptionsSection>
     )
+}
+
+function VacuumDatabaseOptions() {
+    return (
+        <OptionsSection title={t("vacuum_database.title")}>
+            <FormText>{t("vacuum_database.description")}</FormText>
+
+            <Button
+                text={t("vacuum_database.button_text")}
+                onClick={async () => {
+                    toast.showMessage(t("vacuum_database.vacuuming_database"));
+                    await server.post("database/vacuum-database");
+                    toast.showMessage(t("vacuum_database.database_vacuumed"));
+                }}
+            />
+        </OptionsSection>
+    )
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/options/advanced/vacuum_database.ts b/apps/client/src/widgets/type_widgets/options/advanced/vacuum_database.ts
deleted file mode 100644
index 5adce3c70..000000000
--- a/apps/client/src/widgets/type_widgets/options/advanced/vacuum_database.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import OptionsWidget from "../options_widget.js";
-import toastService from "../../../../services/toast.js";
-import server from "../../../../services/server.js";
-import { t } from "../../../../services/i18n.js";
-
-const TPL = /*html*/`
-<div class="options-section">
-    <h4>${t("vacuum_database.title")}</h4>
-
-    <p class="form-text">${t("vacuum_database.description")}</p>
-
-    <button class="vacuum-database-button btn btn-secondary">${t("vacuum_database.button_text")}</button>
-</div>`;
-
-export default class VacuumDatabaseOptions extends OptionsWidget {
-    private $vacuumDatabaseButton!: JQuery<HTMLElement>;
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$vacuumDatabaseButton = this.$widget.find(".vacuum-database-button");
-        this.$vacuumDatabaseButton.on("click", async () => {
-            toastService.showMessage(t("vacuum_database.vacuuming_database"));
-
-            await server.post("database/vacuum-database");
-
-            toastService.showMessage(t("vacuum_database.database_vacuumed"));
-        });
-    }
-}