Added search to settings.

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>