Added search to settings.

eslint.config.mjs

@@ -1,4 +1,4 @@
-{
+export default {
   "env": {
     "browser": true,
     "es2020": true,

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"
     }
   }
 }

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

src/app/(main)/profile/LanguageSetting.module.css

@@ -1,4 +0,0 @@
-div.menu {
-  max-height: 300px;
-  width: 300px;
-}

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 (
     <Flexbox gap={10}>
-      <Select value={locale} onChange={val => saveLocale(val as string)}>
-        {options.map(item => (
+      <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>
     </Flexbox>

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 }) {
         <PasswordField autoComplete="confirm-password" />
       </FormField>
       <FormButtons>
-        <Button type="submit" variant="primary" isDisabled={isPending}>
-          {formatMessage(labels.save)}
-        </Button>
         <Button onPress={onClose}>{formatMessage(labels.cancel)}</Button>
+        <FormSubmitButton isDisabled={isPending}>{formatMessage(labels.save)}</FormSubmitButton>
       </FormButtons>
     </Form>
   );

src/app/(main)/profile/TimezoneSetting.tsx

@@ -16,21 +16,29 @@ export function TimezoneSetting() {
 
   const handleReset = () => saveTimezone(getTimezone());
 
+  const handleOpen = isOpen => {
+    if (isOpen) {
+      setSearch('');
+    }
+  };
+
   return (
     <Row gap="3">
       <Select
         className={styles.dropdown}
-        items={items}
         value={timezone}
         onChange={(value: any) => saveTimezone(value)}
         allowSearch={true}
         onSearch={setSearch}
+        onOpenChange={handleOpen}
+        listProps={{ style: { maxHeight: '300px' } }}
       >
-        {(item: any) => (
+        {items.map((item: any) => (
           <ListItem key={item} id={item}>
             {item}
           </ListItem>
-        )}
+        ))}
+        {!items.length && <ListItem></ListItem>}
       </Select>
       <Button onPress={handleReset}>{formatMessage(labels.reset)}</Button>
     </Row>