Settings refactor.

src/app/(main)/settings/preferences/DateRangeSetting.tsx

@@ -0,0 +1,25 @@
+import { DateFilter } from '@/components/input/DateFilter';
+import { Button, Row } from '@umami/react-zen';
+import { useDateRange, useMessages } from '@/components/hooks';
+import { DEFAULT_DATE_RANGE_VALUE } from '@/lib/constants';
+
+export function DateRangeSetting() {
+  const { formatMessage, labels } = useMessages();
+  const { dateRange, saveDateRange } = useDateRange();
+  const { value } = dateRange;
+
+  const handleChange = (value: string) => saveDateRange(value);
+  const handleReset = () => saveDateRange(DEFAULT_DATE_RANGE_VALUE);
+
+  return (
+    <Row gap="3">
+      <DateFilter
+        value={value}
+        startDate={dateRange.startDate}
+        endDate={dateRange.endDate}
+        onChange={handleChange}
+      />
+      <Button onPress={handleReset}>{formatMessage(labels.reset)}</Button>
+    </Row>
+  );
+}

src/app/(main)/settings/preferences/LanguageSetting.tsx

@@ -0,0 +1,48 @@
+import { useState } from 'react';
+import { Button, Select, ListItem, Row } from '@umami/react-zen';
+import { useLocale, useMessages } from '@/components/hooks';
+import { DEFAULT_LOCALE } from '@/lib/constants';
+import { languages } from '@/lib/lang';
+
+export function LanguageSetting() {
+  const [search, setSearch] = useState('');
+  const { formatMessage, labels } = useMessages();
+  const { locale, saveLocale } = useLocale();
+  const items = search
+    ? Object.keys(languages).filter(n => {
+        return (
+          n.toLowerCase().includes(search.toLowerCase()) ||
+          languages[n].label.toLowerCase().includes(search.toLowerCase())
+        );
+      })
+    : Object.keys(languages);
+
+  const handleReset = () => saveLocale(DEFAULT_LOCALE);
+
+  const handleOpen = (isOpen: boolean) => {
+    if (isOpen) {
+      setSearch('');
+    }
+  };
+
+  return (
+    <Row gap="3">
+      <Select
+        value={locale}
+        onChange={val => saveLocale(val as string)}
+        allowSearch
+        onSearch={setSearch}
+        onOpenChange={handleOpen}
+        listProps={{ style: { maxHeight: '300px' } }}
+      >
+        {items.map(item => (
+          <ListItem key={item} id={item}>
+            {languages[item].label}
+          </ListItem>
+        ))}
+        {!items.length && <ListItem></ListItem>}
+      </Select>
+      <Button onPress={handleReset}>{formatMessage(labels.reset)}</Button>
+    </Row>
+  );
+}

src/app/(main)/settings/preferences/PreferenceSettings.tsx

@@ -0,0 +1,39 @@
+import { Column, Label } from '@umami/react-zen';
+import { useLoginQuery, useMessages } from '@/components/hooks';
+import { TimezoneSetting } from './TimezoneSetting';
+import { DateRangeSetting } from './DateRangeSetting';
+import { LanguageSetting } from './LanguageSetting';
+import { ThemeSetting } from './ThemeSetting';
+
+export function PreferenceSettings() {
+  const { user } = useLoginQuery();
+  const { formatMessage, labels } = useMessages();
+
+  if (!user) {
+    return null;
+  }
+
+  return (
+    <Column width="400px" gap="6">
+      <Column>
+        <Label>{formatMessage(labels.defaultDateRange)}</Label>
+        <DateRangeSetting />
+      </Column>
+
+      <Column>
+        <Label>{formatMessage(labels.language)}</Label>
+        <LanguageSetting />
+      </Column>
+
+      <Column>
+        <Label>{formatMessage(labels.timezone)}</Label>
+        <TimezoneSetting />
+      </Column>
+
+      <Column>
+        <Label>{formatMessage(labels.theme)}</Label>
+        <ThemeSetting />
+      </Column>
+    </Column>
+  );
+}

src/app/(main)/settings/preferences/PreferencesPage.tsx

@@ -0,0 +1,16 @@
+'use client';
+import { Column } from '@umami/react-zen';
+import { useMessages } from '@/components/hooks';
+import { SectionHeader } from '@/components/common/SectionHeader';
+import { PreferenceSettings } from './PreferenceSettings';
+
+export function PreferencesPage() {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <Column gap>
+      <SectionHeader title={formatMessage(labels.preferences)} />
+      <PreferenceSettings />
+    </Column>
+  );
+}

src/app/(main)/settings/preferences/ThemeSetting.tsx

@@ -0,0 +1,21 @@
+import { Row, Button, Icon, useTheme } from '@umami/react-zen';
+import { Sun, Moon } from '@/components/icons';
+
+export function ThemeSetting() {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <Row gap>
+      <Button variant={theme === 'light' ? 'primary' : undefined} onPress={() => setTheme('light')}>
+        <Icon>
+          <Sun />
+        </Icon>
+      </Button>
+      <Button variant={theme === 'dark' ? 'primary' : undefined} onPress={() => setTheme('dark')}>
+        <Icon>
+          <Moon />
+        </Icon>
+      </Button>
+    </Row>
+  );
+}

src/app/(main)/settings/preferences/TimezoneSetting.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import { Row, Select, ListItem, Button } from '@umami/react-zen';
+import { useTimezone, useMessages } from '@/components/hooks';
+import { getTimezone } from '@/lib/date';
+
+const timezones = Intl.supportedValuesOf('timeZone');
+
+export function TimezoneSetting() {
+  const [search, setSearch] = useState('');
+  const { formatMessage, labels } = useMessages();
+  const { timezone, saveTimezone } = useTimezone();
+  const items = search
+    ? timezones.filter(n => n.toLowerCase().includes(search.toLowerCase()))
+    : timezones;
+
+  const handleReset = () => saveTimezone(getTimezone());
+
+  const handleOpen = isOpen => {
+    if (isOpen) {
+      setSearch('');
+    }
+  };
+
+  return (
+    <Row gap="3">
+      <Select
+        value={timezone}
+        onChange={(value: any) => saveTimezone(value)}
+        allowSearch={true}
+        onSearch={setSearch}
+        onOpenChange={handleOpen}
+        listProps={{ style: { maxHeight: '300px' } }}
+      >
+        {items.map((item: any) => (
+          <ListItem key={item} id={item}>
+            {item}
+          </ListItem>
+        ))}
+        {!items.length && <ListItem></ListItem>}
+      </Select>
+      <Button onPress={handleReset}>{formatMessage(labels.reset)}</Button>
+    </Row>
+  );
+}

src/app/(main)/settings/preferences/page.tsx

@@ -0,0 +1,10 @@
+import { Metadata } from 'next';
+import { PreferencesPage } from './PreferencesPage';
+
+export default function () {
+  return <PreferencesPage />;
+}
+
+export const metadata: Metadata = {
+  title: 'Preferences',
+};