From a985c95a31256a14b04f312e6a01199441e2d728 Mon Sep 17 00:00:00 2001
From: Nicolas Meienberger <github@thisprops.com>
Date: Sun, 21 Dec 2025 20:34:33 +0100
Subject: [PATCH] chore: wording and formatting

---
 .../components/create-schedule-form.tsx       | 81 +++++++++----------
 .../modules/backups/routes/backup-details.tsx |  7 +-
 .../modules/backups/routes/create-backup.tsx  |  7 +-
 app/utils/utils.ts                            | 23 +++---
 4 files changed, 65 insertions(+), 53 deletions(-)

diff --git a/app/client/modules/backups/components/create-schedule-form.tsx b/app/client/modules/backups/components/create-schedule-form.tsx
index 4ae1faf5..adfaf820 100644
--- a/app/client/modules/backups/components/create-schedule-form.tsx
+++ b/app/client/modules/backups/components/create-schedule-form.tsx
@@ -88,12 +88,9 @@ const backupScheduleToFormValues = (schedule?: BackupSchedule): InternalFormValu
 	const isDaily = !isHourly && dayOfMonthPart === "*" && dayOfWeekPart === "*";
 
 	const frequency = isHourly ? "hourly" : isMonthly ? "monthly" : isDaily ? "daily" : "weekly";
-
 	const dailyTime = isHourly ? undefined : `${hourPart.padStart(2, "0")}:${minutePart.padStart(2, "0")}`;
-
 	const weeklyDay = frequency === "weekly" ? dayOfWeekPart : undefined;
-	
-	const monthlyDays = isMonthly ? dayOfMonthPart.split(",") : undefined; 
+	const monthlyDays = isMonthly ? dayOfMonthPart.split(",") : undefined;
 
 	const patterns = schedule.includePatterns || [];
 	const isGlobPattern = (p: string) => /[*?[\]]/.test(p);
@@ -103,8 +100,8 @@ const backupScheduleToFormValues = (schedule?: BackupSchedule): InternalFormValu
 	return {
 		name: schedule.name,
 		repositoryId: schedule.repositoryId,
-        frequency,
-        monthlyDays, 
+		frequency,
+		monthlyDays,
 		dailyTime,
 		weeklyDay,
 		includePatterns: fileBrowserPaths.length > 0 ? fileBrowserPaths : undefined,
@@ -257,7 +254,7 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
 													<SelectItem value="hourly">Hourly</SelectItem>
 													<SelectItem value="daily">Daily</SelectItem>
 													<SelectItem value="weekly">Weekly</SelectItem>
-													<SelectItem value="monthly">Monthly</SelectItem>
+													<SelectItem value="monthly">Specific days</SelectItem>
 												</SelectContent>
 											</Select>
 										</FormControl>
@@ -312,41 +309,41 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
 								/>
 							)}
 							{frequency === "monthly" && (
-                                <FormField
-                                    control={form.control}
-                                    name="monthlyDays"
-                                    render={({ field }) => (
-                                        <FormItem className="md:col-span-2">
-                                            <FormLabel>Days of the month</FormLabel>
-                                            <FormControl>
-                                                <div className="grid grid-cols-7 gap-4 w-max">
-                                                    {Array.from({ length: 31 }, (_, i) => {
-                                                        const day = (i + 1).toString();
-                                                        const isSelected = field.value?.includes(day);
-                                                        return (
-                                                            <Button
-                                                                type="button"
-                                                                key={day}
-                                                                variant={isSelected ? "primary" : "secondary"}
-                                                                size="icon"
-                                                                onClick={() => {
-                                                                    const current = field.value || [];
-                                                                    const next = isSelected ? current.filter((d) => d !== day) : [...current, day];
-                                                                    field.onChange(next);
-                                                                }}
-                                                            >
-                                                                {day}
-                                                            </Button>
-                                                        );
-                                                    })}
-                                                </div>
-                                            </FormControl>
-                                            <FormDescription>Select one or more days when the backup should run.</FormDescription>
-                                            <FormMessage />
-                                        </FormItem>
-                                    )}
-                                />
-                            )}
+								<FormField
+									control={form.control}
+									name="monthlyDays"
+									render={({ field }) => (
+										<FormItem className="md:col-span-2">
+											<FormLabel>Days of the month</FormLabel>
+											<FormControl>
+												<div className="grid grid-cols-7 gap-4 w-max">
+													{Array.from({ length: 31 }, (_, i) => {
+														const day = (i + 1).toString();
+														const isSelected = field.value?.includes(day);
+														return (
+															<Button
+																type="button"
+																key={day}
+																variant={isSelected ? "primary" : "secondary"}
+																size="icon"
+																onClick={() => {
+																	const current = field.value || [];
+																	const next = isSelected ? current.filter((d) => d !== day) : [...current, day];
+																	field.onChange(next);
+																}}
+															>
+																{day}
+															</Button>
+														);
+													})}
+												</div>
+											</FormControl>
+											<FormDescription>Select one or more days when the backup should run.</FormDescription>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+							)}
 						</CardContent>
 					</Card>
 
diff --git a/app/client/modules/backups/routes/backup-details.tsx b/app/client/modules/backups/routes/backup-details.tsx
index dd67883c..6081a7a6 100644
--- a/app/client/modules/backups/routes/backup-details.tsx
+++ b/app/client/modules/backups/routes/backup-details.tsx
@@ -141,7 +141,12 @@ export default function ScheduleDetailsPage({ params, loaderData }: Route.Compon
 	const handleSubmit = (formValues: BackupScheduleFormValues) => {
 		if (!schedule) return;
 
-		const cronExpression = getCronExpression(formValues.frequency, formValues.dailyTime, formValues.weeklyDay, formValues.monthlyDays);
+		const cronExpression = getCronExpression(
+			formValues.frequency,
+			formValues.dailyTime,
+			formValues.weeklyDay,
+			formValues.monthlyDays,
+		);
 
 		const retentionPolicy: Record<string, number> = {};
 		if (formValues.keepLast) retentionPolicy.keepLast = formValues.keepLast;
diff --git a/app/client/modules/backups/routes/create-backup.tsx b/app/client/modules/backups/routes/create-backup.tsx
index 4c51ac34..7b6484f5 100644
--- a/app/client/modules/backups/routes/create-backup.tsx
+++ b/app/client/modules/backups/routes/create-backup.tsx
@@ -71,7 +71,12 @@ export default function CreateBackup({ loaderData }: Route.ComponentProps) {
 	const handleSubmit = (formValues: BackupScheduleFormValues) => {
 		if (!selectedVolumeId) return;
 
-		const cronExpression = getCronExpression(formValues.frequency, formValues.dailyTime, formValues.weeklyDay, formValues.monthlyDays);
+		const cronExpression = getCronExpression(
+			formValues.frequency,
+			formValues.dailyTime,
+			formValues.weeklyDay,
+			formValues.monthlyDays,
+		);
 
 		const retentionPolicy: Record<string, number> = {};
 		if (formValues.keepLast) retentionPolicy.keepLast = formValues.keepLast;
diff --git a/app/utils/utils.ts b/app/utils/utils.ts
index bd8fd5a1..9225e300 100644
--- a/app/utils/utils.ts
+++ b/app/utils/utils.ts
@@ -1,6 +1,11 @@
 import { intervalToDuration } from "date-fns";
 
-export const getCronExpression = (frequency: string, dailyTime?: string, weeklyDay?: string, monthlyDays?: string[]): string => {
+export const getCronExpression = (
+	frequency: string,
+	dailyTime?: string,
+	weeklyDay?: string,
+	monthlyDays?: string[],
+): string => {
 	if (frequency === "hourly") {
 		return "0 * * * *";
 	}
@@ -14,15 +19,15 @@ export const getCronExpression = (frequency: string, dailyTime?: string, weeklyD
 	if (frequency === "daily") {
 		return `${minutes} ${hours} * * *`;
 	}
-	
+
 	if (frequency === "monthly") {
-        const sortedDays = (monthlyDays || [])
-            .map(Number)
-            .filter((day) => day >= 1 && day <= 31)
-            .sort((a, b) => a - b);
-        const days = sortedDays.length > 0 ? sortedDays.join(",") : "1";
-        return `${minutes} ${hours} ${days} * *`;
-    }
+		const sortedDays = (monthlyDays || [])
+			.map(Number)
+			.filter((day) => day >= 1 && day <= 31)
+			.sort((a, b) => a - b);
+		const days = sortedDays.length > 0 ? sortedDays.join(",") : "1";
+		return `${minutes} ${hours} ${days} * *`;
+	}
 
 	return `${minutes} ${hours} * * ${weeklyDay ?? "0"}`;
 };