From 70e6b2bb823c47bbe126e0902ca90ecf1c2db51c Mon Sep 17 00:00:00 2001
From: Mehad Nadeem <34424878+MehadND@users.noreply.github.com>
Date: Thu, 18 Jan 2024 00:09:49 +0000
Subject: [PATCH] chore: added tooltip for vacuum button (#2778)

* chore: added tooltip for vacuum button

- At the moment only has text for English language therefore other JSON files need to be updated accordingly

* Update en.json
---
 web/src/components/Settings/SystemSection.tsx | 11 ++++++++---
 web/src/locales/en.json                       |  1 +
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/web/src/components/Settings/SystemSection.tsx b/web/src/components/Settings/SystemSection.tsx
index c2be02feb..e7da570e9 100644
--- a/web/src/components/Settings/SystemSection.tsx
+++ b/web/src/components/Settings/SystemSection.tsx
@@ -252,9 +252,14 @@ const SystemSection = () => {
         <Button onClick={handleUpdateCustomizedProfileButtonClick}>{t("common.edit")}</Button>
       </div>
       <div className="w-full flex flex-row justify-between items-center">
-        <span className="text-sm">
-          {t("setting.system-section.database-file-size")}: <span className="font-mono font-bold">{formatBytes(state.dbSize)}</span>
-        </span>
+        <div className="flex flex-row items-center">
+          <span className="text-sm">
+            {t("setting.system-section.database-file-size")}: <span className="font-mono font-bold">{formatBytes(state.dbSize)}</span>
+          </span>
+          <Tooltip title={t("setting.system-section.vacuum-hint")} placement="top">
+            <Icon.HelpCircle className="w-4 h-auto" />
+          </Tooltip>
+        </div>
         <Button onClick={handleVacuumBtnClick}>{t("common.vacuum")}</Button>
       </div>
       <p className="font-medium text-gray-700 dark:text-gray-500">{t("common.settings")}</p>
diff --git a/web/src/locales/en.json b/web/src/locales/en.json
index f9577ef59..c468d7663 100644
--- a/web/src/locales/en.json
+++ b/web/src/locales/en.json
@@ -256,6 +256,7 @@
       "disable-public-memos": "Disable public memos",
       "max-upload-size": "Maximum upload size (MiB)",
       "max-upload-size-hint": "Recommended value is 32 MiB.",
+      "vacuum-hint": "Cleans up unused data.",
       "additional-style": "Additional style",
       "additional-script": "Additional script",
       "additional-style-placeholder": "Additional CSS code",