feat: locale-aware date format in email list with preset picker #331

components/settings/language-settings.tsx

@@ -1,17 +1,100 @@
 "use client";
 
+import { useMemo } from 'react';
 import { useTranslations } from 'next-intl';
 import { LanguageSwitcher } from '@/components/ui/language-switcher';
-import { SettingsSection, SettingItem } from './settings-section';
+import { useLocaleStore } from '@/stores/locale-store';
+import { useSettingsStore } from '@/stores/settings-store';
+import type { DateFormat, TimeFormat, FirstDayOfWeek } from '@/stores/settings-store';
+import { formatDate } from '@/lib/utils';
+import { SettingsSection, SettingItem, Select, RadioGroup } from './settings-section';
 
 export function LanguageSettings() {
-  const t = useTranslations('settings.appearance');
+  const t = useTranslations('settings.language_region');
+  const tDays = useTranslations('calendar.days');
+
+  const { dateFormat, timeFormat, firstDayOfWeek, updateSetting } = useSettingsStore();
+
+  // Subscribe to locale changes so the preview re-renders on language switch
+  // (formatDate reads it via getState() and would otherwise stay stale).
+  const locale = useLocaleStore((s) => s.locale);
+
+  const preview = useMemo(() => {
+    // Build sample timestamps for each bucket so users see what their pick
+    // will look like in practice. Use offsets relative to "now" so the
+    // bucketing is stable even though the wall-clock keeps moving.
+    void locale; void dateFormat; void timeFormat;
+    const now = new Date();
+    const today = new Date(now);
+    today.setHours(15, 31, 0, 0);
+    const thisWeek = new Date(now);
+    thisWeek.setDate(now.getDate() - 2);
+    thisWeek.setHours(15, 31, 0, 0);
+    const older = new Date(now);
+    older.setMonth(now.getMonth() - 2);
+    older.setHours(15, 31, 0, 0);
+    return {
+      today: formatDate(today),
+      thisWeek: formatDate(thisWeek),
+      older: formatDate(older),
+    };
+  }, [locale, dateFormat, timeFormat]);
 
   return (
-    <SettingsSection title={t('language.label')} description={t('language.description')}>
+    <SettingsSection title={t('title')} description={t('description')}>
       <SettingItem label={t('language.label')} description={t('language.description')}>
         <LanguageSwitcher />
       </SettingItem>
+
+      <SettingItem label={t('date_format.label')} description={t('date_format.description')}>
+        <div className="flex flex-col items-end gap-2">
+          <Select
+            value={dateFormat}
+            onChange={(value) => updateSetting('dateFormat', value as DateFormat)}
+            options={[
+              { value: 'smart', label: t('date_format.smart') },
+              { value: 'relative', label: t('date_format.relative') },
+              { value: 'full', label: t('date_format.full') },
+            ]}
+          />
+          <div className="text-xs text-muted-foreground text-right space-y-0.5 font-mono">
+            <div>
+              <span className="opacity-70">{t('date_format.preview_today')} </span>
+              <span className="text-foreground/90">{preview.today}</span>
+            </div>
+            <div>
+              <span className="opacity-70">{t('date_format.preview_this_week')} </span>
+              <span className="text-foreground/90">{preview.thisWeek}</span>
+            </div>
+            <div>
+              <span className="opacity-70">{t('date_format.preview_older')} </span>
+              <span className="text-foreground/90">{preview.older}</span>
+            </div>
+          </div>
+        </div>
+      </SettingItem>
+
+      <SettingItem label={t('time_format.label')} description={t('time_format.description')}>
+        <RadioGroup
+          value={timeFormat}
+          onChange={(value) => updateSetting('timeFormat', value as TimeFormat)}
+          options={[
+            { value: '12h', label: t('time_format.12h') },
+            { value: '24h', label: t('time_format.24h') },
+          ]}
+        />
+      </SettingItem>
+
+      <SettingItem label={t('first_day.label')} description={t('first_day.description')}>
+        <Select
+          value={firstDayOfWeek.toString()}
+          onChange={(value) => updateSetting('firstDayOfWeek', parseInt(value) as FirstDayOfWeek)}
+          options={[
+            { value: '1', label: tDays('monday') },
+            { value: '0', label: tDays('sunday') },
+          ]}
+        />
+      </SettingItem>
     </SettingsSection>
   );
 }