chore(options/backup): merge the sections together

This commit is contained in:
Elian Doran
2026-04-13 16:09:48 +03:00
parent e740e729c3
commit 66347e4bad
2 changed files with 37 additions and 39 deletions

View File

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

View File

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