Matthieu MALVACHEandMatthieu MALVACHE
fea21d5bcd
Add client-side calendar event notification system that evaluates JMAP CalendarEventAlert triggers and displays toast notifications when alert times are reached. Includes configurable notification sound, acknowledged alert persistence, and proactive event fetching for background alerts. Also mounts ToastContainer globally to fix silent toast failures.
77 lines
2.6 KiB
TypeScript
77 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { useTranslations } from 'next-intl';
|
|
import { useCalendarStore, CalendarViewMode } from '@/stores/calendar-store';
|
|
import { useSettingsStore } from '@/stores/settings-store';
|
|
import { SettingsSection, SettingItem, Select, RadioGroup, ToggleSwitch } from './settings-section';
|
|
|
|
export function CalendarSettings() {
|
|
const t = useTranslations('calendar.settings');
|
|
const tViews = useTranslations('calendar.views');
|
|
const tDays = useTranslations('calendar.days');
|
|
|
|
const { viewMode, setViewMode } = useCalendarStore();
|
|
const { timeFormat, firstDayOfWeek, calendarNotificationsEnabled, calendarNotificationSound, updateSetting } = useSettingsStore();
|
|
|
|
return (
|
|
<SettingsSection title={t('title')}>
|
|
<SettingItem label={t('default_view')}>
|
|
<Select
|
|
value={viewMode}
|
|
onChange={(value) => setViewMode(value as CalendarViewMode)}
|
|
options={[
|
|
{ value: 'month', label: tViews('month') },
|
|
{ value: 'week', label: tViews('week') },
|
|
{ value: 'day', label: tViews('day') },
|
|
{ value: 'agenda', label: tViews('agenda') },
|
|
]}
|
|
/>
|
|
</SettingItem>
|
|
|
|
<SettingItem label={t('week_starts_on')}>
|
|
<Select
|
|
value={firstDayOfWeek.toString()}
|
|
onChange={(value) => updateSetting('firstDayOfWeek', parseInt(value) as 0 | 1)}
|
|
options={[
|
|
{ value: '1', label: tDays('monday') },
|
|
{ value: '0', label: tDays('sunday') },
|
|
]}
|
|
/>
|
|
</SettingItem>
|
|
|
|
<SettingItem label={t('time_format')}>
|
|
<RadioGroup
|
|
value={timeFormat}
|
|
onChange={(value) => updateSetting('timeFormat', value as '12h' | '24h')}
|
|
options={[
|
|
{ value: '12h', label: t('time_format_12h') },
|
|
{ value: '24h', label: t('time_format_24h') },
|
|
]}
|
|
/>
|
|
</SettingItem>
|
|
|
|
<SettingItem
|
|
label={t('notifications_enabled')}
|
|
description={t('notifications_enabled_desc')}
|
|
>
|
|
<ToggleSwitch
|
|
checked={calendarNotificationsEnabled}
|
|
onChange={(checked) => updateSetting('calendarNotificationsEnabled', checked)}
|
|
/>
|
|
</SettingItem>
|
|
|
|
<SettingItem
|
|
label={t('notification_sound')}
|
|
description={t('notification_sound_desc')}
|
|
>
|
|
<ToggleSwitch
|
|
checked={calendarNotificationSound}
|
|
onChange={(checked) => updateSetting('calendarNotificationSound', checked)}
|
|
disabled={!calendarNotificationsEnabled}
|
|
/>
|
|
</SettingItem>
|
|
|
|
</SettingsSection>
|
|
);
|
|
}
|