From 16f1b15dee3c0bb5dc12a6b9e24c005aff912f71 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Sun, 16 Mar 2025 22:12:13 -0700 Subject: [PATCH] Added search to settings. --- .eslintrc.json => eslint.config.mjs | 2 +- package.json | 2 +- pnpm-lock.yaml | 6 +++--- .../(main)/profile/LanguageSetting.module.css | 4 ---- src/app/(main)/profile/LanguageSetting.tsx | 21 ++++++++++++++----- src/app/(main)/profile/PasswordEditForm.tsx | 13 ++++++++---- src/app/(main)/profile/TimezoneSetting.tsx | 14 ++++++++++--- 7 files changed, 41 insertions(+), 21 deletions(-) rename .eslintrc.json => eslint.config.mjs (98%) delete mode 100644 src/app/(main)/profile/LanguageSetting.module.css diff --git a/.eslintrc.json b/eslint.config.mjs similarity index 98% rename from .eslintrc.json rename to eslint.config.mjs index 9cbbd586..3cf8715b 100644 --- a/.eslintrc.json +++ b/eslint.config.mjs @@ -1,4 +1,4 @@ -{ +export default { "env": { "browser": true, "es2020": true, diff --git a/package.json b/package.json index c569912d..0d6acb87 100644 --- a/package.json +++ b/package.json @@ -196,7 +196,7 @@ "sharp" ], "overrides": { - "@umami/react-zen": "link:C:/Users/mike/AppData/Local/pnpm/global/5/node_modules/@umami/react-zen" + "@umami/react-zen": "link:../../../Library/pnpm/global/5/node_modules/@umami/react-zen" } } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3047bcbd..198a974c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,7 +5,7 @@ settings: excludeLinksFromLockfile: false overrides: - '@umami/react-zen': link:C:/Users/mike/AppData/Local/pnpm/global/5/node_modules/@umami/react-zen + '@umami/react-zen': link:../../../Library/pnpm/global/5/node_modules/@umami/react-zen importers: @@ -48,8 +48,8 @@ importers: specifier: ^0.16.0 version: 0.16.0(@prisma/client@6.5.0(prisma@6.5.0(typescript@5.8.2))(typescript@5.8.2))(@prisma/extension-read-replicas@0.4.0(@prisma/client@6.5.0(prisma@6.5.0(typescript@5.8.2))(typescript@5.8.2))) '@umami/react-zen': - specifier: link:C:/Users/mike/AppData/Local/pnpm/global/5/node_modules/@umami/react-zen - version: link:C:/Users/mike/AppData/Local/pnpm/global/5/node_modules/@umami/react-zen + specifier: link:../../../Library/pnpm/global/5/node_modules/@umami/react-zen + version: link:../../../Library/pnpm/global/5/node_modules/@umami/react-zen '@umami/redis-client': specifier: ^0.27.0 version: 0.27.0 diff --git a/src/app/(main)/profile/LanguageSetting.module.css b/src/app/(main)/profile/LanguageSetting.module.css deleted file mode 100644 index 141445ec..00000000 --- a/src/app/(main)/profile/LanguageSetting.module.css +++ /dev/null @@ -1,4 +0,0 @@ -div.menu { - max-height: 300px; - width: 300px; -} diff --git a/src/app/(main)/profile/LanguageSetting.tsx b/src/app/(main)/profile/LanguageSetting.tsx index 4c4f86be..5d932ac1 100644 --- a/src/app/(main)/profile/LanguageSetting.tsx +++ b/src/app/(main)/profile/LanguageSetting.tsx @@ -3,13 +3,12 @@ import { Button, Select, ListItem, Flexbox } from '@umami/react-zen'; import { useLocale, useMessages } from '@/components/hooks'; import { DEFAULT_LOCALE } from '@/lib/constants'; import { languages } from '@/lib/lang'; -import styles from './LanguageSetting.module.css'; export function LanguageSetting() { const [search, setSearch] = useState(''); const { formatMessage, labels } = useMessages(); const { locale, saveLocale } = useLocale(); - const options = search + const items = search ? Object.keys(languages).filter(n => { return ( n.toLowerCase().includes(search.toLowerCase()) || @@ -20,16 +19,28 @@ export function LanguageSetting() { const handleReset = () => saveLocale(DEFAULT_LOCALE); - console.log({ options }); + const handleOpen = isOpen => { + if (isOpen) { + setSearch(''); + } + }; return ( - saveLocale(val as string)} + allowSearch + onSearch={setSearch} + onOpenChange={handleOpen} + listProps={{ style: { maxHeight: '300px' } }} + > + {items.map(item => ( {languages[item].label} ))} + {!items.length && } diff --git a/src/app/(main)/profile/PasswordEditForm.tsx b/src/app/(main)/profile/PasswordEditForm.tsx index 83c15b0b..b29d4989 100644 --- a/src/app/(main)/profile/PasswordEditForm.tsx +++ b/src/app/(main)/profile/PasswordEditForm.tsx @@ -1,4 +1,11 @@ -import { Form, FormField, FormButtons, PasswordField, Button } from '@umami/react-zen'; +import { + Form, + FormField, + FormButtons, + PasswordField, + Button, + FormSubmitButton, +} from '@umami/react-zen'; import { useApi, useMessages } from '@/components/hooks'; export function PasswordEditForm({ onSave, onClose }) { @@ -55,10 +62,8 @@ export function PasswordEditForm({ onSave, onClose }) { - + {formatMessage(labels.save)} ); diff --git a/src/app/(main)/profile/TimezoneSetting.tsx b/src/app/(main)/profile/TimezoneSetting.tsx index 34c7d1a5..ade7960f 100644 --- a/src/app/(main)/profile/TimezoneSetting.tsx +++ b/src/app/(main)/profile/TimezoneSetting.tsx @@ -16,21 +16,29 @@ export function TimezoneSetting() { const handleReset = () => saveTimezone(getTimezone()); + const handleOpen = isOpen => { + if (isOpen) { + setSearch(''); + } + }; + return (