diff --git a/src/components/search/DiscoverBottomSheets.tsx b/src/components/search/DiscoverBottomSheets.tsx index 87d17d0d..52719f91 100644 --- a/src/components/search/DiscoverBottomSheets.tsx +++ b/src/components/search/DiscoverBottomSheets.tsx @@ -11,12 +11,13 @@ interface DiscoverBottomSheetsProps { typeSheetRef: RefObject; catalogSheetRef: RefObject; genreSheetRef: RefObject; - selectedDiscoverType: 'movie' | 'series'; + selectedDiscoverType: string; selectedCatalog: DiscoverCatalog | null; selectedDiscoverGenre: string | null; filteredCatalogs: DiscoverCatalog[]; availableGenres: string[]; - onTypeSelect: (type: 'movie' | 'series') => void; + availableTypes: string[]; + onTypeSelect: (type: string) => void; onCatalogSelect: (catalog: DiscoverCatalog) => void; onGenreSelect: (genre: string | null) => void; currentTheme: any; @@ -31,6 +32,7 @@ export const DiscoverBottomSheets = ({ selectedDiscoverGenre, filteredCatalogs, availableGenres, + availableTypes, onTypeSelect, onCatalogSelect, onGenreSelect, @@ -38,7 +40,20 @@ export const DiscoverBottomSheets = ({ }: DiscoverBottomSheetsProps) => { const { t } = useTranslation(); - const typeSnapPoints = useMemo(() => ['25%'], []); + const TYPE_LABELS: Record = { + 'movie': t('search.movies'), + 'series': t('search.tv_shows'), + 'anime.movie': t('search.anime_movies'), + 'anime.series': t('search.anime_series'), + }; + const getLabelForType = (type: string) => + TYPE_LABELS[type] ?? type.replace(/[._]/g, ' ').replace(/\b\w/g, c => c.toUpperCase()); + + const typeSnapPoints = useMemo(() => { + const itemCount = availableTypes.length; + const snapPct = Math.min(20 + itemCount * 10, 60); + return [`${snapPct}%`]; + }, [availableTypes]); const catalogSnapPoints = useMemo(() => ['50%'], []); const genreSnapPoints = useMemo(() => ['50%'], []); const [activeBottomSheetRef, setActiveBottomSheetRef] = useState(null); @@ -225,47 +240,25 @@ export const DiscoverBottomSheets = ({ style={{ backgroundColor: currentTheme.colors.darkGray || '#0A0C0C' }} contentContainerStyle={styles.bottomSheetContent} > - {/* Movies option */} - onTypeSelect('movie')} - > - - - {t('search.movies')} - - - {t('search.browse_movies')} - - - {selectedDiscoverType === 'movie' && ( - - )} - - - {/* TV Shows option */} - onTypeSelect('series')} - > - - - {t('search.tv_shows')} - - - {t('search.browse_tv')} - - - {selectedDiscoverType === 'series' && ( - - )} - + {availableTypes.map((type) => ( + onTypeSelect(type)} + > + + + {getLabelForType(type)} + + + {selectedDiscoverType === type && ( + + )} + + ))}