fix: CustomSelect for backup schedule dropdowns, increase PWA cache limit

- Replace native <select> with CustomSelect for hour and day-of-month
  pickers in backup schedule settings (consistent UI)
- Increase PWA workbox cache size limit to 5MB
This commit is contained in:
Maurice
2026-03-30 19:39:54 +02:00
parent 9caa0acc24
commit eb7984f40d
2 changed files with 15 additions and 21 deletions

View File

@@ -4,6 +4,7 @@ import { useToast } from '../shared/Toast'
import { Download, Trash2, Plus, RefreshCw, RotateCcw, Upload, Clock, Check, HardDrive, AlertTriangle } from 'lucide-react' import { Download, Trash2, Plus, RefreshCw, RotateCcw, Upload, Clock, Check, HardDrive, AlertTriangle } from 'lucide-react'
import { useTranslation } from '../../i18n' import { useTranslation } from '../../i18n'
import { useSettingsStore } from '../../store/settingsStore' import { useSettingsStore } from '../../store/settingsStore'
import CustomSelect from '../shared/CustomSelect'
import { getApiErrorMessage } from '../../types' import { getApiErrorMessage } from '../../types'
const INTERVAL_OPTIONS = [ const INTERVAL_OPTIONS = [
@@ -355,12 +356,11 @@ export default function BackupPanel() {
{autoSettings.interval !== 'hourly' && ( {autoSettings.interval !== 'hourly' && (
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-2">{t('backup.auto.hour')}</label> <label className="block text-sm font-medium text-gray-700 mb-2">{t('backup.auto.hour')}</label>
<select <CustomSelect
value={autoSettings.hour} value={String(autoSettings.hour)}
onChange={e => handleAutoSettingsChange('hour', parseInt(e.target.value, 10))} onChange={v => handleAutoSettingsChange('hour', parseInt(v, 10))}
className="w-full sm:w-auto px-3 py-2 rounded-lg text-sm font-medium border border-gray-200 bg-white text-gray-700 focus:ring-2 focus:ring-slate-400 focus:border-transparent" size="sm"
> options={HOURS.map(h => {
{HOURS.map(h => {
let label: string let label: string
if (is12h) { if (is12h) {
const period = h >= 12 ? 'PM' : 'AM' const period = h >= 12 ? 'PM' : 'AM'
@@ -369,13 +369,9 @@ export default function BackupPanel() {
} else { } else {
label = `${String(h).padStart(2, '0')}:00` label = `${String(h).padStart(2, '0')}:00`
} }
return ( return { value: String(h), label }
<option key={h} value={h}>
{label}
</option>
)
})} })}
</select> />
<p className="text-xs text-gray-400 mt-1"> <p className="text-xs text-gray-400 mt-1">
{t('backup.auto.hourHint', { format: is12h ? '12h' : '24h' })}{serverTimezone ? ` (Timezone: ${serverTimezone})` : ''} {t('backup.auto.hourHint', { format: is12h ? '12h' : '24h' })}{serverTimezone ? ` (Timezone: ${serverTimezone})` : ''}
</p> </p>
@@ -408,15 +404,12 @@ export default function BackupPanel() {
{autoSettings.interval === 'monthly' && ( {autoSettings.interval === 'monthly' && (
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-2">{t('backup.auto.dayOfMonth')}</label> <label className="block text-sm font-medium text-gray-700 mb-2">{t('backup.auto.dayOfMonth')}</label>
<select <CustomSelect
value={autoSettings.day_of_month} value={String(autoSettings.day_of_month)}
onChange={e => handleAutoSettingsChange('day_of_month', parseInt(e.target.value, 10))} onChange={v => handleAutoSettingsChange('day_of_month', parseInt(v, 10))}
className="w-full sm:w-auto px-3 py-2 rounded-lg text-sm font-medium border border-gray-200 bg-white text-gray-700 focus:ring-2 focus:ring-slate-400 focus:border-transparent" size="sm"
> options={DAYS_OF_MONTH.map(d => ({ value: String(d), label: String(d) }))}
{DAYS_OF_MONTH.map(d => ( />
<option key={d} value={d}>{d}</option>
))}
</select>
<p className="text-xs text-gray-400 mt-1">{t('backup.auto.dayOfMonthHint')}</p> <p className="text-xs text-gray-400 mt-1">{t('backup.auto.dayOfMonthHint')}</p>
</div> </div>
)} )}

View File

@@ -8,6 +8,7 @@ export default defineConfig({
VitePWA({ VitePWA({
registerType: 'autoUpdate', registerType: 'autoUpdate',
workbox: { workbox: {
maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
globPatterns: ['**/*.{js,css,html,svg,png,woff,woff2,ttf}'], globPatterns: ['**/*.{js,css,html,svg,png,woff,woff2,ttf}'],
navigateFallback: 'index.html', navigateFallback: 'index.html',
navigateFallbackDenylist: [/^\/api/, /^\/uploads/], navigateFallbackDenylist: [/^\/api/, /^\/uploads/],