fix(filters): present the filter sheet from the press handler

On the new architecture with Reanimated 4, BottomSheetModal.present()
called from a useEffect after a state update silently no-ops: the press
registered, open flipped to true, the effect called present() on a
valid ref - and nothing mounted (no onChange, nothing in the native
tree). Sheets that present() directly inside their press handler
(downloads, account picker) kept working, which is what pinned it down.

FilterSheet now takes a modalRef and the opener presents imperatively
from the gesture handler. The [open] effect only handles closing, and
never dismisses a modal that was never presented. The sheet also opens
immediately with a loader while options load, instead of the old
data-loaded press gate that left the button silently dead.

This restores genre/year/tag/sort filters in libraries and collections,
and the same pattern is applied to the bitrate/media-source/track
sheets that share FilterSheet.

components/BitRateSheet.tsx

@@ -1,4 +1,5 @@
-import { useMemo, useState } from "react";
+import type { BottomSheetModal } from "@gorhom/bottom-sheet";
+import { useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, TouchableOpacity, View } from "react-native";
 import { Text } from "./common/Text";
@@ -61,6 +62,7 @@ export const BitrateSheet: React.FC<Props> = ({
   const isTv = Platform.isTV;
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
+  const sheetModalRef = useRef<BottomSheetModal | null>(null);
 
   const sorted = useMemo(() => {
     if (inverted)
@@ -92,7 +94,10 @@ export const BitrateSheet: React.FC<Props> = ({
         </Text>
         <TouchableOpacity
           className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'
-          onPress={() => setOpen(true)}
+          onPress={() => {
+            setOpen(true);
+            sheetModalRef.current?.present();
+          }}
         >
           <Text numberOfLines={1}>
             {BITRATES.find((b) => b.value === selected?.value)?.key}
@@ -103,6 +108,7 @@ export const BitrateSheet: React.FC<Props> = ({
       <FilterSheet
         open={open}
         setOpen={setOpen}
+        modalRef={sheetModalRef}
         title={t("item_card.quality")}
         data={sorted}
         values={selected ? [selected] : []}

components/MediaSourceSheet.tsx

@@ -1,8 +1,9 @@
+import type { BottomSheetModal } from "@gorhom/bottom-sheet";
 import type {
   BaseItemDto,
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client/models";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, TouchableOpacity, View } from "react-native";
 import { Text } from "./common/Text";
@@ -23,6 +24,7 @@ export const MediaSourceSheet: React.FC<Props> = ({
   const isTv = Platform.isTV;
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
+  const sheetModalRef = useRef<BottomSheetModal | null>(null);
 
   const getDisplayName = useCallback((source: MediaSourceInfo) => {
     const videoStream = source.MediaStreams?.find((x) => x.Type === "Video");
@@ -44,7 +46,10 @@ export const MediaSourceSheet: React.FC<Props> = ({
         <Text className='opacity-50 mb-1 text-xs'>{t("item_card.video")}</Text>
         <TouchableOpacity
           className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center'
-          onPress={() => setOpen(true)}
+          onPress={() => {
+            setOpen(true);
+            sheetModalRef.current?.present();
+          }}
         >
           <Text numberOfLines={1}>{selectedName}</Text>
         </TouchableOpacity>
@@ -53,6 +58,7 @@ export const MediaSourceSheet: React.FC<Props> = ({
       <FilterSheet
         open={open}
         setOpen={setOpen}
+        modalRef={sheetModalRef}
         title={t("item_card.video")}
         data={item.MediaSources || []}
         values={selected ? [selected] : []}

components/TrackSheet.tsx

@@ -1,5 +1,6 @@
+import type { BottomSheetModal } from "@gorhom/bottom-sheet";
 import type { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client/models";
-import { useMemo, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, TouchableOpacity, View } from "react-native";
 import { Text } from "./common/Text";
@@ -49,6 +50,7 @@ export const TrackSheet: React.FC<Props> = ({
     return streams;
   }, [streams, streamType, noneOption]);
   const [open, setOpen] = useState(false);
+  const sheetModalRef = useRef<BottomSheetModal | null>(null);
 
   if (isTv || (streams && streams.length === 0)) return null;
 
@@ -58,7 +60,10 @@ export const TrackSheet: React.FC<Props> = ({
         <Text className='opacity-50 mb-1 text-xs'>{title}</Text>
         <TouchableOpacity
           className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'
-          onPress={() => setOpen(true)}
+          onPress={() => {
+            setOpen(true);
+            sheetModalRef.current?.present();
+          }}
         >
           <Text numberOfLines={1}>
             {selected === -1 && streamType === "Subtitle"
@@ -70,6 +75,7 @@ export const TrackSheet: React.FC<Props> = ({
       <FilterSheet
         open={open}
         setOpen={setOpen}
+        modalRef={sheetModalRef}
         title={title}
         data={addNoneToSubtitles || []}
         values={

components/filters/FilterButton.tsx

@@ -1,6 +1,7 @@
 import { FontAwesome, Ionicons } from "@expo/vector-icons";
+import type { BottomSheetModal } from "@gorhom/bottom-sheet";
 import { useQuery } from "@tanstack/react-query";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { TouchableOpacity, View, type ViewProps } from "react-native";
 import { Text } from "@/components/common/Text";
 import { FilterSheet } from "./FilterSheet";
@@ -34,8 +35,9 @@ export const FilterButton = <T,>({
   ...props
 }: FilterButtonProps<T>) => {
   const [open, setOpen] = useState(false);
+  const sheetModalRef = useRef<BottomSheetModal | null>(null);
 
-  const { data: filters } = useQuery<T[]>({
+  const { data: filters, isLoading } = useQuery<T[]>({
     queryKey: ["filters", title, queryKey, id],
     queryFn,
     staleTime: 0,
@@ -44,9 +46,15 @@ export const FilterButton = <T,>({
 
   return (
     <>
+      {/* present() must be called here, inside the press handler: calling it
+          from an effect after a state update silently no-ops on the new
+          architecture and the sheet never appears. Opening immediately also
+          replaces the old data-loaded gate that left the button silently
+          dead while options were still loading (the sheet shows a loader). */}
       <TouchableOpacity
         onPress={() => {
-          filters?.length && setOpen(true);
+          setOpen(true);
+          sheetModalRef.current?.present();
         }}
       >
         <View
@@ -89,6 +97,8 @@ export const FilterButton = <T,>({
         title={title}
         open={open}
         setOpen={setOpen}
+        modalRef={sheetModalRef}
+        loading={isLoading}
         data={filters}
         values={values}
         set={set}

components/filters/FilterSheet.tsx

@@ -19,11 +19,21 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
 import { Button } from "../Button";
 import { Input } from "../common/Input";
+import { Loader } from "../Loader";
 
 interface Props<T> extends ViewProps {
   open: boolean;
   setOpen: (open: boolean) => void;
+  /**
+   * Modal ref the opener must use to present() the sheet from inside its
+   * press handler. On the new architecture with Reanimated 4, present()
+   * called from an effect after a state update silently no-ops — the sheet
+   * mounts nothing. Presenting straight from the gesture handler works.
+   */
+  modalRef: React.RefObject<BottomSheetModal | null>;
   data?: T[] | null;
+  /** True while the options are loading — shows a loader inside the sheet. */
+  loading?: boolean;
   values: T[];
   set: (value: T[]) => void;
   title: string;
@@ -66,16 +76,18 @@ const LIMIT = 100;
 export const FilterSheet = <T,>({
   values,
   data: _data,
+  loading = false,
   open,
   set,
   setOpen,
+  modalRef,
   title,
   searchFilter,
   renderItemLabel,
   disableSearch = false,
   multiple = false,
 }: Props<T>) => {
-  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+  const bottomSheetModalRef = modalRef;
   const snapPoints = useMemo(() => ["85%"], []);
   const { t } = useTranslation();
   const insets = useSafeAreaInsets();
@@ -127,13 +139,20 @@ export const FilterSheet = <T,>({
     setData(newData);
   }, [offset, _data]);
 
+  // Opening is imperative (see the modalRef prop); this effect only closes.
+  // It also never calls dismiss() on a modal that was never presented.
+  const wasPresentedRef = useRef(false);
   useEffect(() => {
-    if (open) bottomSheetModalRef.current?.present();
-    else bottomSheetModalRef.current?.dismiss();
+    if (!open && wasPresentedRef.current) {
+      bottomSheetModalRef.current?.dismiss();
+    }
   }, [open]);
 
   const handleSheetChanges = useCallback((index: number) => {
-    if (index === -1) {
+    if (index >= 0) {
+      wasPresentedRef.current = true;
+    } else if (index === -1) {
+      wasPresentedRef.current = false;
       setOpen(false);
     }
   }, []);
@@ -182,9 +201,15 @@ export const FilterSheet = <T,>({
           }}
         >
           <Text className='font-bold text-2xl'>{title}</Text>
-          <Text className='mb-2 text-neutral-500'>
-            {t("search.x_items", { count: _data?.length })}
-          </Text>
+          {loading ? (
+            <View className='my-8 flex items-center justify-center'>
+              <Loader />
+            </View>
+          ) : (
+            <Text className='mb-2 text-neutral-500'>
+              {t("search.x_items", { count: _data?.length })}
+            </Text>
+          )}
           {showSearch && (
             <Input
               placeholder={t("search.search")}