fix: refactor SelectionDropdown and simplify ModelSelect usage

Refactored SelectionDropdown to streamline value handling, remove unused props, and simplify portal/content rendering. Updated ModelSelect to match the new SelectionDropdown API by removing the unused 'value' prop.

Author: Pleasurecruise

src/componentsV2/base/SelectionDropdown/index.tsx

@@ -2,37 +2,45 @@ import { Select } from 'heroui-native'
 import type { FC } from 'react'
 import React from 'react'
 
+interface SelectOption {
+  value: string
+  label: string
+}
+
 export interface SelectionDropdownItem {
   id?: string
   key?: string
   label: React.ReactNode | string
   onSelect?: () => void
-  [x: string]: any
 }
 
 export interface SelectionDropdownProps {
   items: SelectionDropdownItem[]
   children: React.ReactNode
   shouldDismissMenuOnSelect?: boolean
-  value?: string
   onValueChange?: (value: string) => void
-  usePortal?: boolean
 }
 
 const SelectionDropdown: FC<SelectionDropdownProps> = ({
   items,
   children,
   shouldDismissMenuOnSelect = true,
-  usePortal = true,
   onValueChange
 }) => {
-  const handleValueChange = (selectedItem: any) => {
-    const newValue = selectedItem?.value || selectedItem
-    onValueChange?.(newValue)
+  const handleValueChange = (selectedItem: SelectOption | undefined) => {
+    if (!selectedItem) {
+      return
+    }
+
+    const newValue = selectedItem.value
+
+    if (onValueChange) {
+      onValueChange(newValue)
+    }
 
     const foundItem = items.find(item => item.id === newValue || item.key === newValue)
-    if (foundItem) {
-      foundItem.onSelect?.()
+    if (foundItem && foundItem.onSelect) {
+      foundItem.onSelect()
     }
   }
 
@@ -43,27 +51,15 @@ const SelectionDropdown: FC<SelectionDropdownProps> = ({
       return <Select.Item key={itemValue} value={itemValue} label={itemLabel} />
     })
 
-  const contentProps = {
-    width: 'trigger' as const,
-    placement: 'bottom' as const,
-    align: 'center' as const
-  }
-
   return (
     <Select onValueChange={handleValueChange}>
       <Select.Trigger asChild>{children}</Select.Trigger>
-
-      {usePortal ? (
-        <Select.Portal>
-          <Select.Overlay closeOnPress={shouldDismissMenuOnSelect} />
-          <Select.Content {...contentProps}>{renderItems()}</Select.Content>
-        </Select.Portal>
-      ) : (
-        <>
-          <Select.Overlay closeOnPress={shouldDismissMenuOnSelect} />
-          <Select.Content {...contentProps}>{renderItems()}</Select.Content>
-        </>
-      )}
+      <Select.Portal>
+        <Select.Overlay closeOnPress={shouldDismissMenuOnSelect} />
+        <Select.Content width="trigger" placement="bottom" align="center">
+          {renderItems()}
+        </Select.Content>
+      </Select.Portal>
     </Select>
   )
 }

src/componentsV2/features/SettingsScreen/providers/ModelSelect.tsx

@@ -36,10 +36,7 @@ export function ModelSelect({ provider, onSelectModel }: ModelSelectProps) {
   }
 
   return (
-    <SelectionDropdown
-      items={selectOptions}
-      value={selectedModel ? getModelUniqId(selectedModel) : ''}
-      onValueChange={handleValueChange}>
+    <SelectionDropdown items={selectOptions} onValueChange={handleValueChange}>
       <Button className="rounded-xl" pressableFeedbackVariant="ripple" variant="tertiary">
         <Button.Label>{selectedModel ? selectedModel.id : t('settings.provider.api_check.tooltip')}</Button.Label>
         <ChevronDown />