github/umami
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Settings refactor.

Browse Source
This commit is contained in:
Mike Cao
2025-07-11 22:55:30 -07:00
parent 1b81074752
commit c98f324c22
56 changed files with 706 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/app/(main)/settings/profile/DateRangeSetting.tsx
View File

@@ -1,25 +0,0 @@
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>
);
}

48
src/app/(main)/settings/profile/LanguageSetting.tsx
View File

@@ -1,48 +0,0 @@
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>
);
}

17
src/app/(main)/settings/profile/PasswordChangeButton.tsx
View File

@@ -1,4 +1,13 @@
import { Button, Icon, Text, useToast, DialogTrigger, Dialog, Modal } from '@umami/react-zen';
import {
Button,
Icon,
Text,
useToast,
DialogTrigger,
Dialog,
Modal,
Column,
} from '@umami/react-zen';
import { PasswordEditForm } from './PasswordEditForm';
import { LockKeyhole } from '@/components/icons';
import { useMessages } from '@/components/hooks';
@@ -21,7 +30,11 @@ export function PasswordChangeButton() {
</Button>
<Modal>
<Dialog title={formatMessage(labels.changePassword)}>
{({ close }) => <PasswordEditForm onSave={handleSave} onClose={close} />}
{({ close }) => (
<Column width="300px">
<PasswordEditForm onSave={handleSave} onClose={close} />
</Column>
)}
</Dialog>
</Modal>
</DialogTrigger>

24
src/app/(main)/settings/profile/ProfileSettings.tsx
View File

@@ -1,10 +1,6 @@
import { Row, Column, Label } from '@umami/react-zen';
import { useLoginQuery, useMessages } from '@/components/hooks';
import { ROLES } from '@/lib/constants';
import { TimezoneSetting } from './TimezoneSetting';
import { DateRangeSetting } from './DateRangeSetting';
import { LanguageSetting } from './LanguageSetting';
import { ThemeSetting } from './ThemeSetting';
import { PasswordChangeButton } from './PasswordChangeButton';
export function ProfileSettings() {
@@ -52,26 +48,6 @@ export function ProfileSettings() {
</Row>
</Column>
)}
<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>
);
}

24
src/app/(main)/settings/profile/ThemeSetting.tsx
View File

@@ -1,24 +0,0 @@
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' : 'secondary'}
onPress={() => setTheme('light')}
>
<Icon>
<Sun />
</Icon>
</Button>
<Button variant={theme === 'dark' ? 'primary' : 'secondary'} onPress={() => setTheme('dark')}>
<Icon>
<Moon />
</Icon>
</Button>
</Row>
);
}

44
src/app/(main)/settings/profile/TimezoneSetting.tsx
View File

@@ -1,44 +0,0 @@
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>
);
}