From 66347e4bad9bb23c20cee514fed9811bf550ae6f Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 13 Apr 2026 16:09:48 +0300
Subject: [PATCH] chore(options/backup): merge the sections together

---
 .../src/translations/en/translation.json      |  7 +-
 .../widgets/type_widgets/options/backup.tsx   | 69 +++++++++----------
 2 files changed, 37 insertions(+), 39 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 89345f0a0a..12d0f8c022 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -1429,11 +1429,12 @@
     "formatting-locale-auto": "Based on the application's language"
   },
   "backup": {
+    "title": "Backup",
     "automatic_backup": "Automatic backup",
     "automatic_backup_description": "Trilium can back up the database automatically:",
-    "enable_daily_backup": "Enable daily backup",
-    "enable_weekly_backup": "Enable weekly backup",
-    "enable_monthly_backup": "Enable monthly backup",
+    "enable_daily_backup": "Backup daily",
+    "enable_weekly_backup": "Backup weekly",
+    "enable_monthly_backup": "Backup monthly",
     "backup_recommendation": "It's recommended to keep the backup turned on, but this can make application startup slow with large databases and/or slow storage devices.",
     "backup_now": "Backup now",
     "backup_database_now": "Backup database now",
diff --git a/apps/client/src/widgets/type_widgets/options/backup.tsx b/apps/client/src/widgets/type_widgets/options/backup.tsx
index 5d5a89d072..cc31d5cdc2 100644
--- a/apps/client/src/widgets/type_widgets/options/backup.tsx
+++ b/apps/client/src/widgets/type_widgets/options/backup.tsx
@@ -6,14 +6,13 @@ import server from "../../../services/server";
 import toast from "../../../services/toast";
 import { formatDateTime } from "../../../utils/formatters";
 import Button from "../../react/Button";
-import FormCheckbox from "../../react/FormCheckbox";
-import { FormMultiGroup } from "../../react/FormGroup";
 import FormText from "../../react/FormText";
 import { useTriliumOptionBool } from "../../react/hooks";
+import { OptionsRowWithButton, OptionsRowWithToggle } from "./components/OptionsRow";
 import OptionsSection from "./components/OptionsSection";
 
 export default function BackupSettings() {
-    const [ backups, setBackups ] = useState<DatabaseBackup[]>([]);
+    const [backups, setBackups] = useState<DatabaseBackup[]>([]);
 
     const refreshBackups = useCallback(() => {
         server.get<DatabaseBackup[]>("database/backups").then((backupFiles) => {
@@ -26,56 +25,54 @@ export default function BackupSettings() {
 
             setBackups(backupFiles);
         });
-    }, [ setBackups ]);
+    }, [setBackups]);
 
     useEffect(refreshBackups, []);
 
     return (
         <>
-            <AutomaticBackup />
-            <BackupNow refreshCallback={refreshBackups} />
+            <BackupConfiguration refreshCallback={refreshBackups} />
             <BackupList backups={backups} />
         </>
     );
 }
 
-export function AutomaticBackup() {
-    const [ dailyBackupEnabled, setDailyBackupEnabled ] = useTriliumOptionBool("dailyBackupEnabled");
-    const [ weeklyBackupEnabled, setWeeklyBackupEnabled ] = useTriliumOptionBool("weeklyBackupEnabled");
-    const [ monthlyBackupEnabled, setMonthlyBackupEnabled ] = useTriliumOptionBool("monthlyBackupEnabled");
+export function BackupConfiguration({ refreshCallback }: { refreshCallback: () => void }) {
+    const [dailyBackupEnabled, setDailyBackupEnabled] = useTriliumOptionBool("dailyBackupEnabled");
+    const [weeklyBackupEnabled, setWeeklyBackupEnabled] = useTriliumOptionBool("weeklyBackupEnabled");
+    const [monthlyBackupEnabled, setMonthlyBackupEnabled] = useTriliumOptionBool("monthlyBackupEnabled");
 
     return (
-        <OptionsSection title={t("backup.automatic_backup")}>
-            <FormMultiGroup label={t("backup.automatic_backup_description")}>
-                <FormCheckbox
-                    name="daily-backup-enabled"
-                    label={t("backup.enable_daily_backup")}
-                    currentValue={dailyBackupEnabled} onChange={setDailyBackupEnabled}
-                />
+        <OptionsSection title={t("backup.title")}>
+            <FormText>{t("backup.automatic_backup_description")}</FormText>
 
-                <FormCheckbox
-                    name="weekly-backup-enabled"
-                    label={t("backup.enable_weekly_backup")}
-                    currentValue={weeklyBackupEnabled} onChange={setWeeklyBackupEnabled}
-                />
+            <OptionsRowWithToggle
+                name="daily-backup-enabled"
+                label={t("backup.enable_daily_backup")}
+                currentValue={dailyBackupEnabled}
+                onChange={setDailyBackupEnabled}
+            />
 
-                <FormCheckbox
-                    name="monthly-backup-enabled"
-                    label={t("backup.enable_monthly_backup")}
-                    currentValue={monthlyBackupEnabled} onChange={setMonthlyBackupEnabled}
-                />
-            </FormMultiGroup>
+            <OptionsRowWithToggle
+                name="weekly-backup-enabled"
+                label={t("backup.enable_weekly_backup")}
+                currentValue={weeklyBackupEnabled}
+                onChange={setWeeklyBackupEnabled}
+            />
+
+            <OptionsRowWithToggle
+                name="monthly-backup-enabled"
+                label={t("backup.enable_monthly_backup")}
+                currentValue={monthlyBackupEnabled}
+                onChange={setMonthlyBackupEnabled}
+            />
 
             <FormText>{t("backup.backup_recommendation")}</FormText>
-        </OptionsSection>
-    );
-}
 
-export function BackupNow({ refreshCallback }: { refreshCallback: () => void }) {
-    return (
-        <OptionsSection title={t("backup.backup_now")}>
-            <Button
-                text={t("backup.backup_database_now")}
+            <hr />
+
+            <OptionsRowWithButton
+                label={t("backup.backup_database_now")}
                 onClick={async () => {
                     const { backupFile } = await server.post<BackupDatabaseNowResponse>("database/backup-database");
                     toast.showMessage(t("backup.database_backed_up_to", { backupFilePath: backupFile }), 10000);