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

@@ -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>

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",