wip

components/settings/AppLanguageSelector.tsx

@@ -1,12 +1,12 @@
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Platform, TouchableOpacity, View, type ViewProps } from "react-native";
+import { Platform, View, type ViewProps } from "react-native";
 import { APP_LANGUAGES } from "@/i18n";
 import { useSettings } from "@/utils/atoms/settings";
 import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
-import { type OptionGroup, PlatformOptionsMenu } from "../PlatformOptionsMenu";
+import { PlatformDropdown } from "../PlatformDropdown";
 
 interface Props extends ViewProps {}
 
@@ -14,55 +14,32 @@ export const AppLanguageSelector: React.FC<Props> = () => {
   const isTv = Platform.isTV;
   const { settings, updateSettings } = useSettings();
   const { t } = useTranslation();
-  const [open, setOpen] = useState(false);
 
-  const optionGroups: OptionGroup[] = useMemo(() => {
+  const optionGroups = useMemo(() => {
     const options = [
       {
-        id: "system",
         type: "radio" as const,
-        groupId: "languages",
         label: t("home.settings.languages.system"),
+        value: "system",
         selected: !settings?.preferedLanguage,
+        onPress: () => updateSettings({ preferedLanguage: undefined }),
       },
       ...APP_LANGUAGES.map((lang) => ({
-        id: lang.value,
         type: "radio" as const,
-        groupId: "languages",
         label: lang.label,
+        value: lang.value,
         selected: lang.value === settings?.preferedLanguage,
+        onPress: () => updateSettings({ preferedLanguage: lang.value }),
       })),
     ];
 
     return [
       {
-        id: "languages",
         title: t("home.settings.languages.title"),
         options,
       },
     ];
-  }, [settings?.preferedLanguage, t]);
-
-  const handleOptionSelect = (optionId: string) => {
-    if (optionId === "system") {
-      updateSettings({ preferedLanguage: undefined });
-    } else {
-      updateSettings({ preferedLanguage: optionId });
-    }
-    setOpen(false);
-  };
-
-  const trigger = (
-    <TouchableOpacity
-      className='bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between'
-      onPress={() => setOpen(true)}
-    >
-      <Text>
-        {APP_LANGUAGES.find((l) => l.value === settings?.preferedLanguage)
-          ?.label || t("home.settings.languages.system")}
-      </Text>
-    </TouchableOpacity>
-  );
+  }, [settings?.preferedLanguage, t, updateSettings]);
 
   if (isTv) return null;
   if (!settings) return null;
@@ -71,20 +48,18 @@ export const AppLanguageSelector: React.FC<Props> = () => {
     <View>
       <ListGroup title={t("home.settings.languages.title")}>
         <ListItem title={t("home.settings.languages.app_language")}>
-          <PlatformOptionsMenu
+          <PlatformDropdown
             groups={optionGroups}
-            trigger={trigger}
+            trigger={
+              <View className='bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between'>
+                <Text>
+                  {APP_LANGUAGES.find(
+                    (l) => l.value === settings?.preferedLanguage,
+                  )?.label || t("home.settings.languages.system")}
+                </Text>
+              </View>
+            }
             title={t("home.settings.languages.title")}
-            open={open}
-            onOpenChange={setOpen}
-            onOptionSelect={handleOptionSelect}
-            expoUIConfig={{
-              hostStyle: { flex: 1 },
-            }}
-            bottomSheetConfig={{
-              enableDynamicSizing: true,
-              enablePanDownToClose: true,
-            }}
           />
         </ListItem>
       </ListGroup>