116 lines
3.6 KiB
TypeScript
116 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import { useTranslations } from 'next-intl';
|
|
import { useCalendarStore, CalendarViewMode } from '@/stores/calendar-store';
|
|
import { useSettingsStore } from '@/stores/settings-store';
|
|
import { usePolicyStore } from '@/stores/policy-store';
|
|
import { SettingsSection, SettingItem, Select, ToggleSwitch } from './settings-section';
|
|
|
|
export function CalendarSettings() {
|
|
const t = useTranslations('calendar.settings');
|
|
const tViews = useTranslations('calendar.views');
|
|
|
|
const { viewMode, setViewMode } = useCalendarStore();
|
|
const {
|
|
showTimeInMonthView,
|
|
showWeekNumbers,
|
|
enableCalendarTasks,
|
|
showTasksOnCalendar,
|
|
showBirthdayCalendar,
|
|
calendarHoverPreview,
|
|
updateSetting,
|
|
} = useSettingsStore();
|
|
const { isFeatureEnabled } = usePolicyStore();
|
|
|
|
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('show_time_in_month_view')}
|
|
description={t('show_time_in_month_view_desc')}
|
|
>
|
|
<ToggleSwitch
|
|
checked={showTimeInMonthView}
|
|
onChange={(checked) => updateSetting('showTimeInMonthView', checked)}
|
|
/>
|
|
</SettingItem>
|
|
|
|
<SettingItem
|
|
label={t('show_week_numbers')}
|
|
description={t('show_week_numbers_desc')}
|
|
>
|
|
<ToggleSwitch
|
|
checked={showWeekNumbers}
|
|
onChange={(checked) => updateSetting('showWeekNumbers', checked)}
|
|
/>
|
|
</SettingItem>
|
|
|
|
<SettingItem
|
|
label={t('hover_preview')}
|
|
description={t('hover_preview_desc')}
|
|
>
|
|
<Select
|
|
value={calendarHoverPreview}
|
|
onChange={(value) => updateSetting('calendarHoverPreview', value as 'off' | 'instant' | 'delay-500ms' | 'delay-1s' | 'delay-2s')}
|
|
options={[
|
|
{ value: 'instant', label: t('hover_preview_instant') },
|
|
{ value: 'delay-500ms', label: t('hover_preview_delay_500ms') },
|
|
{ value: 'delay-1s', label: t('hover_preview_delay_1s') },
|
|
{ value: 'delay-2s', label: t('hover_preview_delay_2s') },
|
|
{ value: 'off', label: t('hover_preview_off') },
|
|
]}
|
|
/>
|
|
</SettingItem>
|
|
|
|
<SettingItem
|
|
label={t('show_birthday_calendar')}
|
|
description={t('show_birthday_calendar_desc')}
|
|
>
|
|
<ToggleSwitch
|
|
checked={showBirthdayCalendar}
|
|
onChange={(checked) => updateSetting('showBirthdayCalendar', checked)}
|
|
/>
|
|
</SettingItem>
|
|
|
|
{isFeatureEnabled('calendarTasksEnabled') && (
|
|
<>
|
|
<SettingItem
|
|
label={t('enable_tasks')}
|
|
description={t('enable_tasks_desc')}
|
|
>
|
|
<ToggleSwitch
|
|
checked={enableCalendarTasks}
|
|
onChange={(checked) => updateSetting('enableCalendarTasks', checked)}
|
|
/>
|
|
</SettingItem>
|
|
|
|
{enableCalendarTasks && (
|
|
<SettingItem
|
|
label={t('show_tasks_on_calendar')}
|
|
description={t('show_tasks_on_calendar_desc')}
|
|
>
|
|
<ToggleSwitch
|
|
checked={showTasksOnCalendar}
|
|
onChange={(checked) => updateSetting('showTasksOnCalendar', checked)}
|
|
/>
|
|
</SettingItem>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
</SettingsSection>
|
|
);
|
|
}
|