wip: remove zeego + expo ui

components/settings/AppLanguageSelector.tsx

@@ -1,5 +1,4 @@
-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, TouchableOpacity, View, type ViewProps } from "react-native";
 import { APP_LANGUAGES } from "@/i18n";
@@ -7,6 +6,7 @@ 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";
 
 interface Props extends ViewProps {}
 
@@ -14,6 +14,55 @@ 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 options = [
+      {
+        id: "system",
+        type: "radio" as const,
+        groupId: "languages",
+        label: t("home.settings.languages.system"),
+        selected: !settings?.preferedLanguage,
+      },
+      ...APP_LANGUAGES.map((lang) => ({
+        id: lang.value,
+        type: "radio" as const,
+        groupId: "languages",
+        label: lang.label,
+        selected: lang.value === settings?.preferedLanguage,
+      })),
+    ];
+
+    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>
+  );
 
   if (isTv) return null;
   if (!settings) return null;
@@ -22,54 +71,21 @@ export const AppLanguageSelector: React.FC<Props> = () => {
     <View>
       <ListGroup title={t("home.settings.languages.title")}>
         <ListItem title={t("home.settings.languages.app_language")}>
-          <DropdownMenu.Root>
-            <DropdownMenu.Trigger>
-              <TouchableOpacity 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>
-              </TouchableOpacity>
-            </DropdownMenu.Trigger>
-            <DropdownMenu.Content
-              loop={true}
-              side='bottom'
-              align='start'
-              alignOffset={0}
-              avoidCollisions={true}
-              collisionPadding={8}
-              sideOffset={8}
-            >
-              <DropdownMenu.Label>
-                {t("home.settings.languages.title")}
-              </DropdownMenu.Label>
-              <DropdownMenu.Item
-                key={"unknown"}
-                onSelect={() => {
-                  updateSettings({
-                    preferedLanguage: undefined,
-                  });
-                }}
-              >
-                <DropdownMenu.ItemTitle>
-                  {t("home.settings.languages.system")}
-                </DropdownMenu.ItemTitle>
-              </DropdownMenu.Item>
-              {APP_LANGUAGES?.map((l) => (
-                <DropdownMenu.Item
-                  key={l?.value ?? "unknown"}
-                  onSelect={() => {
-                    updateSettings({
-                      preferedLanguage: l.value,
-                    });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>{l.label}</DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-              ))}
-            </DropdownMenu.Content>
-          </DropdownMenu.Root>
+          <PlatformOptionsMenu
+            groups={optionGroups}
+            trigger={trigger}
+            title={t("home.settings.languages.title")}
+            open={open}
+            onOpenChange={setOpen}
+            onOptionSelect={handleOptionSelect}
+            expoUIConfig={{
+              hostStyle: { flex: 1 },
+            }}
+            bottomSheetConfig={{
+              enableDynamicSizing: true,
+              enablePanDownToClose: true,
+            }}
+          />
         </ListItem>
       </ListGroup>
     </View>