fix(settings): tidy spacing, uniform Android row heights & toggle layout

2026-07-16 01:13:27 +01:00 · 2026-07-15 18:49:20 +02:00
31 changed files with 442 additions and 989 deletions
--- a/app/(auth)/(tabs)/(home)/settings/appearance/hide-libraries/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/appearance/hide-libraries/page.tsx
@@ -2,8 +2,9 @@ import { getUserViewsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { useAtomValue } from "jotai";
 import { useTranslation } from "react-i18next";
-import { ScrollView, Switch, View } from "react-native";
+import { ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
 import { ListGroup } from "@/components/list/ListGroup";
@@ -50,12 +51,12 @@ export default function AppearanceHideLibrariesPage() {
    >
      <DisabledSetting
        disabled={pluginSettings?.hiddenLibraries?.locked === true}
-        className='px-4'
+        className='px-4 pt-4'
      >
        <ListGroup title={t("home.settings.other.hide_libraries")}>
          {data?.map((view) => (
            <ListItem key={view.Id} title={view.Name} onPress={() => {}}>
-              <Switch
+              <SettingSwitch
                value={settings.hiddenLibraries?.includes(view.Id!) || false}
                onValueChange={(value) => {
                  updateSettings({
--- a/app/(auth)/(tabs)/(home)/settings/hide-libraries/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/hide-libraries/page.tsx
@@ -2,7 +2,8 @@ import { getUserViewsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { useAtomValue } from "jotai";
 import { useTranslation } from "react-i18next";
-import { Switch, View } from "react-native";
+import { View } from "react-native";
+import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
 import { ListGroup } from "@/components/list/ListGroup";
@@ -46,7 +47,7 @@ export default function HideLibrariesPage() {
      <ListGroup>
        {data?.map((view) => (
          <ListItem key={view.Id} title={view.Name} onPress={() => {}}>
-            <Switch
+            <SettingSwitch
              value={settings.hiddenLibraries?.includes(view.Id!) || false}
              onValueChange={(value) => {
                updateSettings({
--- a/app/(auth)/(tabs)/(home)/settings/music/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/music/page.tsx
@@ -3,9 +3,9 @@ import { useQuery } from "@tanstack/react-query";
 import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, ScrollView, View } from "react-native";
-import { Switch } from "react-native-gesture-handler";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { toast } from "sonner-native";
+import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { Text } from "@/components/common/Text";
 import { ListGroup } from "@/components/list/ListGroup";
 import { ListItem } from "@/components/list/ListItem";
@@ -136,7 +136,7 @@ export default function MusicSettingsPage() {
            title={t("home.settings.music.prefer_downloaded")}
            disabled={pluginSettings?.preferLocalAudio?.locked}
          >
-            <Switch
+            <SettingSwitch
              value={settings.preferLocalAudio}
              disabled={pluginSettings?.preferLocalAudio?.locked}
              onValueChange={(value) =>
@@ -159,7 +159,7 @@ export default function MusicSettingsPage() {
              title={t("home.settings.music.lookahead_enabled")}
              disabled={pluginSettings?.audioLookaheadEnabled?.locked}
            >
-              <Switch
+              <SettingSwitch
                value={settings.audioLookaheadEnabled}
                disabled={pluginSettings?.audioLookaheadEnabled?.locked}
                onValueChange={(value) =>
@@ -233,7 +233,7 @@ export default function MusicSettingsPage() {
                })}
              />
            </ListGroup>
-            <ListGroup>
+            <ListGroup className='mt-4'>
              <ListItem
                textColor='red'
                onPress={onDeleteDownloadedSongsClicked}
--- a/app/(auth)/(tabs)/(home)/settings/playback-controls/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/playback-controls/page.tsx
@@ -17,13 +17,14 @@ export default function PlaybackControlsPage() {
      contentContainerStyle={{
        paddingLeft: insets.left,
        paddingRight: insets.right,
+        paddingBottom: insets.bottom,
      }}
    >
      <View
        className='p-4 flex flex-col'
        style={{ paddingTop: Platform.OS === "android" ? 10 : 0 }}
      >
-        <View className='mb-4'>
+        <View>
          <MediaProvider>
            <MediaToggles className='mb-4' />
            <GestureControls className='mb-4' />
--- a/app/(auth)/(tabs)/(home)/settings/plugins/marlin-search/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/plugins/marlin-search/page.tsx
@@ -4,13 +4,13 @@ import { useTranslation } from "react-i18next";
 import {
  Linking,
  ScrollView,
-  Switch,
  TextInput,
  TouchableOpacity,
  View,
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { toast } from "sonner-native";
+import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { Text } from "@/components/common/Text";
 import { ListGroup } from "@/components/list/ListGroup";
 import { ListItem } from "@/components/list/ListItem";
@@ -72,7 +72,7 @@ export default function MarlinSearchPage() {
        paddingRight: insets.right,
      }}
    >
-      <DisabledSetting disabled={disabled} className='px-4'>
+      <DisabledSetting disabled={disabled} className='px-4 pt-4'>
        <ListGroup>
          <DisabledSetting
            disabled={
@@ -90,7 +90,7 @@ export default function MarlinSearchPage() {
                queryClient.invalidateQueries({ queryKey: ["search"] });
              }}
            >
-              <Switch
+              <SettingSwitch
                value={settings.searchEngine === "Marlin"}
                disabled={!!pluginSettings?.streamyStatsServerUrl?.value}
                onValueChange={(value) => {
--- a/app/(auth)/(tabs)/(home)/settings/plugins/streamystats/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/plugins/streamystats/page.tsx
@@ -4,13 +4,13 @@ import { useTranslation } from "react-i18next";
 import {
  Linking,
  ScrollView,
-  Switch,
  TextInput,
  TouchableOpacity,
  View,
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { toast } from "sonner-native";
+import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { Text } from "@/components/common/Text";
 import { ListGroup } from "@/components/list/ListGroup";
 import { ListItem } from "@/components/list/ListItem";
@@ -134,7 +134,7 @@ export default function StreamystatsPage() {
        paddingRight: insets.right,
      }}
    >
-      <View className='px-4'>
+      <View className='px-4 pt-4'>
        <ListGroup className='flex-1'>
          <ListItem
            title={t("home.settings.plugins.streamystats.url")}
@@ -173,7 +173,7 @@ export default function StreamystatsPage() {
            title={t("home.settings.plugins.streamystats.enable_search")}
            disabledByAdmin={pluginSettings?.searchEngine?.locked === true}
          >
-            <Switch
+            <SettingSwitch
              value={useForSearch}
              disabled={!isStreamystatsEnabled}
              onValueChange={setUseForSearch}
@@ -187,7 +187,7 @@ export default function StreamystatsPage() {
              pluginSettings?.streamyStatsMovieRecommendations?.locked === true
            }
          >
-            <Switch
+            <SettingSwitch
              value={movieRecs}
              onValueChange={setMovieRecs}
              disabled={!isStreamystatsEnabled}
@@ -201,7 +201,7 @@ export default function StreamystatsPage() {
              pluginSettings?.streamyStatsSeriesRecommendations?.locked === true
            }
          >
-            <Switch
+            <SettingSwitch
              value={seriesRecs}
              onValueChange={setSeriesRecs}
              disabled={!isStreamystatsEnabled}
@@ -215,7 +215,7 @@ export default function StreamystatsPage() {
              pluginSettings?.streamyStatsPromotedWatchlists?.locked === true
            }
          >
-            <Switch
+            <SettingSwitch
              value={promotedWatchlists}
              onValueChange={setPromotedWatchlists}
              disabled={!isStreamystatsEnabled}
@@ -225,7 +225,7 @@ export default function StreamystatsPage() {
            title={t("home.settings.plugins.streamystats.hide_watchlists_tab")}
            disabledByAdmin={pluginSettings?.hideWatchlistsTab?.locked === true}
          >
-            <Switch
+            <SettingSwitch
              value={hideWatchlistsTab}
              onValueChange={setHideWatchlistsTab}
              disabled={!isStreamystatsEnabled}
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/collections/[collectionId].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/collections/[collectionId].tsx
@@ -23,7 +23,6 @@ import {
  TouchableItemRouter,
 } from "@/components/common/TouchableItemRouter";
 import { FilterButton } from "@/components/filters/FilterButton";
-import { FilterSheetProvider } from "@/components/filters/FilterSheetProvider";
 import { ResetFiltersButton } from "@/components/filters/ResetFiltersButton";
 import { ItemCardText } from "@/components/ItemCardText";
 import { Loader } from "@/components/Loader";
@@ -135,12 +134,6 @@ const page: React.FC = () => {
  useEffect(() => {
    navigation.setOptions({ title: collection?.Name || "" });
    setSortOrder([SortOrderOption.Ascending]);
-    // Collections open with a clean filter slate: the genre/year/tag atoms are
-    // global, so without this the previously viewed library's selection bleeds
-    // in (libraries now keep their own per-library memory).
-    setSelectedGenres([]);
-    setSelectedYears([]);
-    setSelectedTags([]);

    if (!collection) return;

@@ -211,39 +204,40 @@ const page: React.FC = () => {
    ],
  );

-  const { data, fetchNextPage, hasNextPage, isLoading } = useInfiniteQuery({
-    queryKey: [
-      "collection-items",
-      collectionId,
-      selectedGenres,
-      selectedYears,
-      selectedTags,
-      sortBy,
-      sortOrder,
-    ],
-    queryFn: fetchItems,
-    getNextPageParam: (lastPage, pages) => {
-      if (
-        !lastPage?.Items ||
-        !lastPage?.TotalRecordCount ||
-        lastPage?.TotalRecordCount === 0
-      )
+  const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
+    useInfiniteQuery({
+      queryKey: [
+        "collection-items",
+        collectionId,
+        selectedGenres,
+        selectedYears,
+        selectedTags,
+        sortBy,
+        sortOrder,
+      ],
+      queryFn: fetchItems,
+      getNextPageParam: (lastPage, pages) => {
+        if (
+          !lastPage?.Items ||
+          !lastPage?.TotalRecordCount ||
+          lastPage?.TotalRecordCount === 0
+        )
+          return undefined;
+
+        const totalItems = lastPage.TotalRecordCount;
+        const accumulatedItems = pages.reduce(
+          (acc, curr) => acc + (curr?.Items?.length || 0),
+          0,
+        );
+
+        if (accumulatedItems < totalItems) {
+          return lastPage?.Items?.length * pages.length;
+        }
        return undefined;
-
-      const totalItems = lastPage.TotalRecordCount;
-      const accumulatedItems = pages.reduce(
-        (acc, curr) => acc + (curr?.Items?.length || 0),
-        0,
-      );
-
-      if (accumulatedItems < totalItems) {
-        return lastPage?.Items?.length * pages.length;
-      }
-      return undefined;
-    },
-    initialPageParam: 0,
-    enabled: !!api && !!user?.Id && !!collection,
-  });
+      },
+      initialPageParam: 0,
+      enabled: !!api && !!user?.Id && !!collection,
+    });

  const flatData = useMemo(() => {
    return (
@@ -332,7 +326,7 @@ const page: React.FC = () => {
        data={[
          {
            key: "reset",
-            component: <ResetFiltersButton libraryId={collectionId} />,
+            component: <ResetFiltersButton />,
          },
          {
            key: "genre",
@@ -472,6 +466,7 @@ const page: React.FC = () => {
      setSortBy,
      sortOrder,
      setSortOrder,
+      isFetching,
    ],
  );

@@ -638,45 +633,43 @@ const page: React.FC = () => {
  // Mobile return
  if (!Platform.isTV) {
    return (
-      <FilterSheetProvider>
-        <FlashList
-          ListEmptyComponent={
-            <View className='flex flex-col items-center justify-center h-full'>
-              <Text className='font-bold text-xl text-neutral-500'>
-                {t("search.no_results")}
-              </Text>
-            </View>
+      <FlashList
+        ListEmptyComponent={
+          <View className='flex flex-col items-center justify-center h-full'>
+            <Text className='font-bold text-xl text-neutral-500'>
+              {t("search.no_results")}
+            </Text>
+          </View>
+        }
+        extraData={[
+          selectedGenres,
+          selectedYears,
+          selectedTags,
+          sortBy,
+          sortOrder,
+        ]}
+        contentInsetAdjustmentBehavior='automatic'
+        data={flatData}
+        renderItem={renderItem}
+        keyExtractor={keyExtractor}
+        numColumns={nrOfCols}
+        onEndReached={() => {
+          if (hasNextPage) {
+            fetchNextPage();
          }
-          extraData={[
-            selectedGenres,
-            selectedYears,
-            selectedTags,
-            sortBy,
-            sortOrder,
-          ]}
-          contentInsetAdjustmentBehavior='automatic'
-          data={flatData}
-          renderItem={renderItem}
-          keyExtractor={keyExtractor}
-          numColumns={nrOfCols}
-          onEndReached={() => {
-            if (hasNextPage) {
-              fetchNextPage();
-            }
-          }}
-          onEndReachedThreshold={0.5}
-          ListHeaderComponent={ListHeaderComponent}
-          contentContainerStyle={{ paddingBottom: 24 }}
-          ItemSeparatorComponent={() => (
-            <View
-              style={{
-                width: 10,
-                height: 10,
-              }}
-            />
-          )}
-        />
-      </FilterSheetProvider>
+        }}
+        onEndReachedThreshold={0.5}
+        ListHeaderComponent={ListHeaderComponent}
+        contentContainerStyle={{ paddingBottom: 24 }}
+        ItemSeparatorComponent={() => (
+          <View
+            style={{
+              width: 10,
+              height: 10,
+            }}
+          />
+        )}
+      />
    );
  }

--- a/app/(auth)/(tabs)/(libraries)/[libraryId].tsx
+++ b/app/(auth)/(tabs)/(libraries)/[libraryId].tsx
@@ -9,7 +9,7 @@ import {
  getItemsApi,
  getUserLibraryApi,
 } from "@jellyfin/sdk/lib/utils/api";
-import { FlashList, type FlashListRef } from "@shopify/flash-list";
+import { FlashList } from "@shopify/flash-list";
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
 import {
@@ -35,7 +35,6 @@ import {
  TouchableItemRouter,
 } from "@/components/common/TouchableItemRouter";
 import { FilterButton } from "@/components/filters/FilterButton";
-import { FilterSheetProvider } from "@/components/filters/FilterSheetProvider";
 import { ResetFiltersButton } from "@/components/filters/ResetFiltersButton";
 import { ItemCardText } from "@/components/ItemCardText";
 import { Loader } from "@/components/Loader";
@@ -45,7 +44,6 @@ import { TVPosterCard } from "@/components/tv/TVPosterCard";
 import { useScaledTVPosterSizes } from "@/constants/TVPosterSizes";
 import { useScaledTVTypography } from "@/constants/TVTypography";
 import useRouter from "@/hooks/useAppRouter";
-import { useFilterReset } from "@/hooks/useFilterReset";
 import { useOrientation } from "@/hooks/useOrientation";
 import { useRefreshLibraryOnFocus } from "@/hooks/useRefreshLibraryOnFocus";
 import { useTVItemActionModal } from "@/hooks/useTVItemActionModal";
@@ -57,9 +55,7 @@ import {
  FilterByPreferenceAtom,
  filterByAtom,
  genreFilterAtom,
-  genrePreferenceAtom,
  getFilterByPreference,
-  getMultiFilterPreference,
  getSortByPreference,
  getSortOrderPreference,
  SortByOption,
@@ -70,12 +66,11 @@ import {
  sortOrderAtom,
  sortOrderOptions,
  sortOrderPreferenceAtom,
-  tagPreferenceAtom,
  tagsFilterAtom,
  useFilterOptions,
  yearFilterAtom,
-  yearPreferenceAtom,
 } from "@/utils/atoms/filters";
+import { useSettings } from "@/utils/atoms/settings";
 import type { TVOptionItem } from "@/utils/atoms/tvOptionModal";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";

@@ -113,9 +108,6 @@ const Page = () => {
  const [sortOrderPreference, setOrderByPreference] = useAtom(
    sortOrderPreferenceAtom,
  );
-  const [genrePreference, setGenrePreference] = useAtom(genrePreferenceAtom);
-  const [yearPreference, setYearPreference] = useAtom(yearPreferenceAtom);
-  const [tagPreference, setTagPreference] = useAtom(tagPreferenceAtom);

  const { orientation } = useOrientation();

@@ -213,13 +205,6 @@ const Page = () => {
      const fp = getFilterByPreference(libraryId, filterByPreference);
      _setFilterBy(fp ? [fp] : []);
    }
-
-    // Genres / years / tags: per-library saved preference (no URL params), so
-    // switching libraries restores each library's own selection instead of
-    // bleeding the previous one.
-    setSelectedGenres(getMultiFilterPreference(libraryId, genrePreference));
-    setSelectedYears(getMultiFilterPreference(libraryId, yearPreference));
-    setSelectedTags(getMultiFilterPreference(libraryId, tagPreference));
  }, [
    libraryId,
    sortOrderPreference,
@@ -228,12 +213,6 @@ const Page = () => {
    _setSortBy,
    filterByPreference,
    _setFilterBy,
-    genrePreference,
-    yearPreference,
-    tagPreference,
-    setSelectedGenres,
-    setSelectedYears,
-    setSelectedTags,
    searchParams.sortBy,
    searchParams.sortOrder,
    searchParams.filterBy,
@@ -278,32 +257,6 @@ const Page = () => {
    [libraryId, filterByPreference, setFilterByPreference, _setFilterBy],
  );

-  // Genres / years / tags: save the per-library memory then update the active
-  // atom (mirrors setSortBy; avoids a save-effect that would corrupt on switch).
-  const setGenres = useCallback(
-    (genres: string[]) => {
-      setGenrePreference({ ...genrePreference, [libraryId]: genres });
-      setSelectedGenres(genres);
-    },
-    [libraryId, genrePreference, setGenrePreference, setSelectedGenres],
-  );
-
-  const setYears = useCallback(
-    (years: string[]) => {
-      setYearPreference({ ...yearPreference, [libraryId]: years });
-      setSelectedYears(years);
-    },
-    [libraryId, yearPreference, setYearPreference, setSelectedYears],
-  );
-
-  const setTags = useCallback(
-    (tags: string[]) => {
-      setTagPreference({ ...tagPreference, [libraryId]: tags });
-      setSelectedTags(tags);
-    },
-    [libraryId, tagPreference, setTagPreference, setSelectedTags],
-  );
-
  const nrOfCols = useMemo(() => {
    if (Platform.isTV) {
      // TV uses flexWrap, so nrOfCols is just for mobile
@@ -462,29 +415,6 @@ const Page = () => {
    );
  }, [data]);

-  const flashListRef = useRef<FlashListRef<BaseItemDto>>(null);
-
-  // Jump the grid to the top when the filters/sort change (incl. reset).
-  const filterSignature = `${selectedGenres}|${selectedYears}|${selectedTags}|${sortBy[0]}|${sortOrder[0]}|${filterBy}`;
-  const pendingScrollTopRef = useRef(false);
-
-  // Instant feedback: pin to the top the moment the filters change, without
-  // waiting for the new fetch — and flag a re-pin for once it settles.
-  useEffect(() => {
-    flashListRef.current?.scrollToOffset({ offset: 0, animated: false });
-    pendingScrollTopRef.current = true;
-  }, [filterSignature]);
-
-  // Safety net: FlashList can restore the previous offset as the filtered list
-  // grows, so re-pin once the fetch settles. Pagination keeps the same
-  // signature, so it never re-pins.
-  useEffect(() => {
-    if (pendingScrollTopRef.current && !isFetching) {
-      pendingScrollTopRef.current = false;
-      flashListRef.current?.scrollToOffset({ offset: 0, animated: false });
-    }
-  }, [isFetching, flatData]);
-
  const renderItem = useCallback(
    ({ item, index }: { item: BaseItemDto; index: number }) => (
      <TouchableItemRouter
@@ -600,6 +530,7 @@ const Page = () => {

  const keyExtractor = useCallback((item: BaseItemDto) => item.Id || "", []);
  const generalFilters = useFilterOptions();
+  const settings = useSettings();
  const ListHeaderComponent = useCallback(
    () => (
      <FlatList
@@ -614,7 +545,7 @@ const Page = () => {
        data={[
          {
            key: "reset",
-            component: <ResetFiltersButton libraryId={libraryId} />,
+            component: <ResetFiltersButton />,
          },
          {
            key: "genre",
@@ -633,7 +564,7 @@ const Page = () => {
                  });
                  return response.data.Genres || [];
                }}
-                set={setGenres}
+                set={setSelectedGenres}
                values={selectedGenres}
                title={t("library.filters.genres")}
                renderItemLabel={(item) => item.toString()}
@@ -660,7 +591,7 @@ const Page = () => {
                  });
                  return response.data.Years || [];
                }}
-                set={setYears}
+                set={setSelectedYears}
                values={selectedYears}
                title={t("library.filters.years")}
                renderItemLabel={(item) => item.toString()}
@@ -685,7 +616,7 @@ const Page = () => {
                  });
                  return response.data.Tags || [];
                }}
-                set={setTags}
+                set={setSelectedTags}
                values={selectedTags}
                title={t("library.filters.tags")}
                renderItemLabel={(item) => item.toString()}
@@ -765,23 +696,35 @@ const Page = () => {
      api,
      user?.Id,
      selectedGenres,
-      setGenres,
+      setSelectedGenres,
      selectedYears,
-      setYears,
+      setSelectedYears,
      selectedTags,
-      setTags,
+      setSelectedTags,
      sortBy,
      setSortBy,
      sortOrder,
      setSortOrder,
+      isFetching,
      filterBy,
      setFilter,
+      settings,
    ],
  );

-  // Filter bar reset + visibility, shared with the mobile ResetFiltersButton so
-  // sort/order can't be forgotten on one path (it used to be reset on neither).
-  const { hasActiveFilters, resetAllFilters } = useFilterReset(libraryId);
+  // TV Filter bar header
+  const hasActiveFilters =
+    selectedGenres.length > 0 ||
+    selectedYears.length > 0 ||
+    selectedTags.length > 0 ||
+    filterBy.length > 0;
+
+  const resetAllFilters = useCallback(() => {
+    setSelectedGenres([]);
+    setSelectedYears([]);
+    setSelectedTags([]);
+    _setFilterBy([]);
+  }, [setSelectedGenres, setSelectedYears, setSelectedTags, _setFilterBy]);

  // TV Filter options - with "All" option for clearable filters
  const tvGenreFilterOptions = useMemo(
@@ -875,15 +818,15 @@ const Page = () => {
      options: tvGenreFilterOptions,
      onSelect: (value: string) => {
        if (value === "__all__") {
-          setGenres([]);
+          setSelectedGenres([]);
        } else if (selectedGenres.includes(value)) {
-          setGenres(selectedGenres.filter((g) => g !== value));
+          setSelectedGenres(selectedGenres.filter((g) => g !== value));
        } else {
-          setGenres([...selectedGenres, value]);
+          setSelectedGenres([...selectedGenres, value]);
        }
      },
    });
-  }, [showOptions, t, tvGenreFilterOptions, selectedGenres, setGenres]);
+  }, [showOptions, t, tvGenreFilterOptions, selectedGenres, setSelectedGenres]);

  const handleShowYearFilter = useCallback(() => {
    showOptions({
@@ -891,15 +834,15 @@ const Page = () => {
      options: tvYearFilterOptions,
      onSelect: (value: string) => {
        if (value === "__all__") {
-          setYears([]);
+          setSelectedYears([]);
        } else if (selectedYears.includes(value)) {
-          setYears(selectedYears.filter((y) => y !== value));
+          setSelectedYears(selectedYears.filter((y) => y !== value));
        } else {
-          setYears([...selectedYears, value]);
+          setSelectedYears([...selectedYears, value]);
        }
      },
    });
-  }, [showOptions, t, tvYearFilterOptions, selectedYears, setYears]);
+  }, [showOptions, t, tvYearFilterOptions, selectedYears, setSelectedYears]);

  const handleShowTagFilter = useCallback(() => {
    showOptions({
@@ -907,15 +850,15 @@ const Page = () => {
      options: tvTagFilterOptions,
      onSelect: (value: string) => {
        if (value === "__all__") {
-          setTags([]);
+          setSelectedTags([]);
        } else if (selectedTags.includes(value)) {
-          setTags(selectedTags.filter((tag) => tag !== value));
+          setSelectedTags(selectedTags.filter((tag) => tag !== value));
        } else {
-          setTags([...selectedTags, value]);
+          setSelectedTags([...selectedTags, value]);
        }
      },
    });
-  }, [showOptions, t, tvTagFilterOptions, selectedTags, setTags]);
+  }, [showOptions, t, tvTagFilterOptions, selectedTags, setSelectedTags]);

  const handleShowSortByFilter = useCallback(() => {
    showOptions({
@@ -963,45 +906,42 @@ const Page = () => {
  // Mobile return
  if (!Platform.isTV) {
    return (
-      <FilterSheetProvider>
-        <FlashList
-          ref={flashListRef}
-          key={orientation}
-          ListEmptyComponent={
-            <View className='flex flex-col items-center justify-center h-full'>
-              <Text className='font-bold text-xl text-neutral-500'>
-                {t("library.no_results")}
-              </Text>
-            </View>
+      <FlashList
+        key={orientation}
+        ListEmptyComponent={
+          <View className='flex flex-col items-center justify-center h-full'>
+            <Text className='font-bold text-xl text-neutral-500'>
+              {t("library.no_results")}
+            </Text>
+          </View>
+        }
+        contentInsetAdjustmentBehavior='automatic'
+        data={flatData}
+        renderItem={renderItem}
+        extraData={[orientation, nrOfCols]}
+        keyExtractor={keyExtractor}
+        numColumns={nrOfCols}
+        onEndReached={() => {
+          if (hasNextPage) {
+            fetchNextPage();
          }
-          contentInsetAdjustmentBehavior='automatic'
-          data={flatData}
-          renderItem={renderItem}
-          extraData={[orientation, nrOfCols]}
-          keyExtractor={keyExtractor}
-          numColumns={nrOfCols}
-          onEndReached={() => {
-            if (hasNextPage) {
-              fetchNextPage();
-            }
-          }}
-          onEndReachedThreshold={1}
-          ListHeaderComponent={ListHeaderComponent}
-          contentContainerStyle={{
-            paddingBottom: 24,
-            paddingLeft: insets.left,
-            paddingRight: insets.right,
-          }}
-          ItemSeparatorComponent={() => (
-            <View
-              style={{
-                width: 10,
-                height: 10,
-              }}
-            />
-          )}
-        />
-      </FilterSheetProvider>
+        }}
+        onEndReachedThreshold={1}
+        ListHeaderComponent={ListHeaderComponent}
+        contentContainerStyle={{
+          paddingBottom: 24,
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
+        }}
+        ItemSeparatorComponent={() => (
+          <View
+            style={{
+              width: 10,
+              height: 10,
+            }}
+          />
+        )}
+      />
    );
  }

--- a/components/BitRateSheet.tsx
+++ b/components/BitRateSheet.tsx
@@ -1,5 +1,4 @@
-import type { BottomSheetModal } from "@gorhom/bottom-sheet";
-import { useMemo, useRef, useState } from "react";
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, TouchableOpacity, View } from "react-native";
 import { Text } from "./common/Text";
@@ -62,7 +61,6 @@ 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)
@@ -94,10 +92,7 @@ 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);
-            sheetModalRef.current?.present();
-          }}
+          onPress={() => setOpen(true)}
        >
          <Text numberOfLines={1}>
            {BITRATES.find((b) => b.value === selected?.value)?.key}
@@ -108,7 +103,6 @@ export const BitrateSheet: React.FC<Props> = ({
      <FilterSheet
        open={open}
        setOpen={setOpen}
-        modalRef={sheetModalRef}
        title={t("item_card.quality")}
        data={sorted}
        values={selected ? [selected] : []}
--- a/components/MediaSourceSheet.tsx
+++ b/components/MediaSourceSheet.tsx
@@ -1,9 +1,8 @@
-import type { BottomSheetModal } from "@gorhom/bottom-sheet";
 import type {
  BaseItemDto,
  MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client/models";
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, TouchableOpacity, View } from "react-native";
 import { Text } from "./common/Text";
@@ -24,7 +23,6 @@ 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");
@@ -46,10 +44,7 @@ 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);
-            sheetModalRef.current?.present();
-          }}
+          onPress={() => setOpen(true)}
        >
          <Text numberOfLines={1}>{selectedName}</Text>
        </TouchableOpacity>
@@ -58,7 +53,6 @@ export const MediaSourceSheet: React.FC<Props> = ({
      <FilterSheet
        open={open}
        setOpen={setOpen}
-        modalRef={sheetModalRef}
        title={t("item_card.video")}
        data={item.MediaSources || []}
        values={selected ? [selected] : []}
--- a/components/common/SettingSwitch.tsx
+++ b/components/common/SettingSwitch.tsx
@@ -0,0 +1,40 @@
+import type React from "react";
+import { Platform, Switch, type SwitchProps, View } from "react-native";
+
+/**
+ * Settings toggle. Android's native Switch lays out ~40px tall / ~56px wide and
+ * inflates list rows (iOS renders it ~31px). A plain `transform: scale` is
+ * visual-only and does NOT shrink the layout box, so we pin the Switch inside a
+ * FIXED-SIZE box (overflow hidden) and center it:
+ *  - the fixed height caps the row height (compact, uniform rows),
+ *  - the fixed width + centering keep the switch in the exact same spot in the
+ *    on/off states (a non-fixed wrapper let its width fluctuate between states,
+ *    which shifted the switch sideways on toggle).
+ * iOS renders the switch untouched.
+ *
+ * Tunables: BOX_H drives the row height; SCALE shrinks the visual to fit the
+ * box; keep BOX_W >= scaled visual width to avoid clipping the switch sideways.
+ */
+const BOX_W = 40;
+const BOX_H = 30;
+const SCALE = 0.9;
+
+export const SettingSwitch: React.FC<SwitchProps> = (props) => {
+  if (Platform.OS !== "android") return <Switch {...props} />;
+  return (
+    <View
+      style={{
+        width: BOX_W,
+        height: BOX_H,
+        alignItems: "center",
+        justifyContent: "center",
+        overflow: "hidden",
+      }}
+    >
+      <Switch
+        {...props}
+        style={[props.style, { transform: [{ scale: SCALE }] }]}
+      />
+    </View>
+  );
+};
--- a/components/filters/FilterButton.tsx
+++ b/components/filters/FilterButton.tsx
@@ -1,11 +1,9 @@
 import { FontAwesome, Ionicons } from "@expo/vector-icons";
-import type { BottomSheetModal } from "@gorhom/bottom-sheet";
 import { useQuery } from "@tanstack/react-query";
-import { useCallback, useRef, useState } from "react";
+import { useState } from "react";
 import { TouchableOpacity, View, type ViewProps } from "react-native";
 import { Text } from "@/components/common/Text";
 import { FilterSheet } from "./FilterSheet";
-import { useFilterSheet } from "./FilterSheetProvider";

 interface FilterButtonProps<T> extends ViewProps {
  id: string;
@@ -35,63 +33,22 @@ export const FilterButton = <T,>({
  icon = "filter",
  ...props
 }: FilterButtonProps<T>) => {
-  // When a FilterSheetProvider is present (library / collections), all buttons
-  // share one sheet so two can never stack. Outside a provider (e.g. logs,
-  // discover), fall back to this button's own standalone sheet.
-  const shared = useFilterSheet();
+  const [open, setOpen] = useState(false);

-  const { data: filters, isLoading } = useQuery<T[]>({
+  const { data: filters } = useQuery<T[]>({
    queryKey: ["filters", title, queryKey, id],
    queryFn,
    staleTime: 0,
    enabled: !!id && !!queryFn && !!queryKey,
  });

-  // Standalone-mode state (unused in shared mode).
-  const [open, setOpen] = useState(false);
-  const sheetModalRef = useRef<BottomSheetModal | null>(null);
-
-  const onButtonPress = useCallback(() => {
-    if (shared) {
-      shared.openFilter({
-        key: `${id}:${queryKey}`,
-        id,
-        queryKey,
-        queryFn,
-        title,
-        values: values as unknown[],
-        set: set as (value: unknown[]) => void,
-        renderItemLabel: renderItemLabel as (item: unknown) => React.ReactNode,
-        searchFilter: searchFilter as
-          | ((item: unknown, query: string) => boolean)
-          | undefined,
-        disableSearch,
-        multiple,
-      });
-      return;
-    }
-    // present() must run from the press handler: from an effect after a state
-    // update it silently no-ops on the new architecture and the sheet never
-    // appears.
-    setOpen(true);
-    sheetModalRef.current?.present();
-  }, [
-    shared,
-    id,
-    queryKey,
-    queryFn,
-    title,
-    values,
-    set,
-    renderItemLabel,
-    searchFilter,
-    disableSearch,
-    multiple,
-  ]);
-
  return (
    <>
-      <TouchableOpacity onPress={onButtonPress}>
+      <TouchableOpacity
+        onPress={() => {
+          filters?.length && setOpen(true);
+        }}
+      >
        <View
          className={`
            px-3 py-1.5 rounded-full flex flex-row items-center space-x-1
@@ -128,22 +85,18 @@ export const FilterButton = <T,>({
          )}
        </View>
      </TouchableOpacity>
-      {!shared && (
-        <FilterSheet<T>
-          title={title}
-          open={open}
-          setOpen={setOpen}
-          modalRef={sheetModalRef}
-          loading={isLoading}
-          data={filters}
-          values={values}
-          set={set}
-          renderItemLabel={renderItemLabel}
-          searchFilter={searchFilter}
-          disableSearch={disableSearch}
-          multiple={multiple}
-        />
-      )}
+      <FilterSheet<T>
+        title={title}
+        open={open}
+        setOpen={setOpen}
+        data={filters}
+        values={values}
+        set={set}
+        renderItemLabel={renderItemLabel}
+        searchFilter={searchFilter}
+        disableSearch={disableSearch}
+        multiple={multiple}
+      />
    </>
  );
 };
--- a/components/filters/FilterSheet.tsx
+++ b/components/filters/FilterSheet.tsx
@@ -7,14 +7,7 @@ import {
 } from "@gorhom/bottom-sheet";
 import { isEqual } from "lodash";
 import type React from "react";
-import {
-  useCallback,
-  useDeferredValue,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
  StyleSheet,
@@ -26,21 +19,11 @@ 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;
@@ -83,18 +66,16 @@ 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 = modalRef;
+  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
  const snapPoints = useMemo(() => ["85%"], []);
  const { t } = useTranslation();
  const insets = useSafeAreaInsets();
@@ -103,24 +84,19 @@ export const FilterSheet = <T,>({
  const [offset, setOffset] = useState<number>(0);

  const [search, setSearch] = useState<string>("");
-  // Filtering and re-rendering the option list on every keystroke blocks the
-  // JS thread on large lists (2000+ tags); the controlled input then snaps the
-  // native text back to a stale value (lost/reappearing letters). Deferring the
-  // value keeps the keystroke render cheap and runs the list update after.
-  const deferredSearch = useDeferredValue(search);

  const [showSearch, setShowSearch] = useState<boolean>(false);

  const filteredData = useMemo(() => {
-    if (!deferredSearch) return _data;
+    if (!search) return _data;
    const results = [];
    for (let i = 0; i < (_data?.length || 0); i++) {
-      if (_data && searchFilter?.(_data[i], deferredSearch)) {
+      if (_data && searchFilter?.(_data[i], search)) {
        results.push(_data[i]);
      }
    }
    return results.slice(0, 100);
-  }, [deferredSearch, _data, searchFilter]);
+  }, [search, _data, searchFilter]);

  useEffect(() => {
    if (!data || data.length === 0 || disableSearch) return;
@@ -151,28 +127,21 @@ 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 && wasPresentedRef.current) {
-      bottomSheetModalRef.current?.dismiss();
-    }
+    if (open) bottomSheetModalRef.current?.present();
+    else bottomSheetModalRef.current?.dismiss();
  }, [open]);

  const handleSheetChanges = useCallback((index: number) => {
-    if (index >= 0) {
-      wasPresentedRef.current = true;
-    } else if (index === -1) {
-      wasPresentedRef.current = false;
+    if (index === -1) {
      setOpen(false);
    }
  }, []);

  const renderData = useMemo(() => {
-    if (deferredSearch.length > 0 && showSearch) return filteredData;
+    if (search.length > 0 && showSearch) return filteredData;
    return data;
-  }, [deferredSearch, showSearch, filteredData, data]);
+  }, [search, filteredData, data]);

  const renderBackdrop = useCallback(
    (props: BottomSheetBackdropProps) => (
@@ -185,54 +154,6 @@ export const FilterSheet = <T,>({
    [],
  );

-  // Memoized so typing in the search input (urgent render with an unchanged
-  // deferred value) doesn't rebuild up to 100 row elements per keystroke.
-  const renderedRows = useMemo(
-    () =>
-      renderData?.map((item, index) => (
-        <View key={index}>
-          <TouchableOpacity
-            onPress={() => {
-              // Match the deep-equality rule used to render the selected
-              // state below — option objects are recreated across renders,
-              // so reference checks would re-add an already selected item.
-              const isSelected = values.some((value) => isEqual(value, item));
-              if (multiple) {
-                if (!isSelected) set(values.concat(item));
-                else set(values.filter((value) => !isEqual(value, item)));
-
-                setTimeout(() => {
-                  setOpen(false);
-                }, 250);
-              } else {
-                if (!isSelected) {
-                  set([item]);
-                  setTimeout(() => {
-                    setOpen(false);
-                  }, 250);
-                }
-              }
-            }}
-            className=' bg-neutral-800 px-4 py-3 flex flex-row items-center justify-between'
-          >
-            <Text className='flex shrink'>{renderItemLabel(item)}</Text>
-            {values.some((i) => isEqual(i, item)) ? (
-              <Ionicons name='radio-button-on' size={24} color='white' />
-            ) : (
-              <Ionicons name='radio-button-off' size={24} color='white' />
-            )}
-          </TouchableOpacity>
-          <View
-            style={{
-              height: StyleSheet.hairlineWidth,
-            }}
-            className='h-1 divide-neutral-700 '
-          />
-        </View>
-      )),
-    [renderData, values, multiple, set, setOpen, renderItemLabel],
-  );
-
  return (
    <BottomSheetModal
      ref={bottomSheetModalRef}
@@ -261,15 +182,9 @@ export const FilterSheet = <T,>({
          }}
        >
          <Text className='font-bold text-2xl'>{title}</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>
-          )}
+          <Text className='mb-2 text-neutral-500'>
+            {t("search.x_items", { count: _data?.length })}
+          </Text>
          {showSearch && (
            <Input
              placeholder={t("search.search")}
@@ -288,7 +203,43 @@ export const FilterSheet = <T,>({
            }}
            className='mb-4 flex flex-col rounded-xl overflow-hidden'
          >
-            {renderedRows}
+            {renderData?.map((item, index) => (
+              <View key={index}>
+                <TouchableOpacity
+                  onPress={() => {
+                    if (multiple) {
+                      if (!values.includes(item)) set(values.concat(item));
+                      else set(values.filter((v) => v !== item));
+
+                      setTimeout(() => {
+                        setOpen(false);
+                      }, 250);
+                    } else {
+                      if (!values.includes(item)) {
+                        set([item]);
+                        setTimeout(() => {
+                          setOpen(false);
+                        }, 250);
+                      }
+                    }
+                  }}
+                  className=' bg-neutral-800 px-4 py-3 flex flex-row items-center justify-between'
+                >
+                  <Text className='flex shrink'>{renderItemLabel(item)}</Text>
+                  {values.some((i) => isEqual(i, item)) ? (
+                    <Ionicons name='radio-button-on' size={24} color='white' />
+                  ) : (
+                    <Ionicons name='radio-button-off' size={24} color='white' />
+                  )}
+                </TouchableOpacity>
+                <View
+                  style={{
+                    height: StyleSheet.hairlineWidth,
+                  }}
+                  className='h-1 divide-neutral-700 '
+                />
+              </View>
+            ))}
          </View>
          {data.length < (_data?.length || 0) && (
            <Button
--- a/components/filters/FilterSheetProvider.tsx
+++ b/components/filters/FilterSheetProvider.tsx
@@ -1,74 +0,0 @@
-import type { BottomSheetModal } from "@gorhom/bottom-sheet";
-import {
-  createContext,
-  type PropsWithChildren,
-  useCallback,
-  useContext,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { type FilterConfig, SharedFilterSheet } from "./SharedFilterSheet";
-
-interface FilterSheetContextType {
-  openFilter: (config: FilterConfig) => void;
-}
-
-const FilterSheetContext = createContext<FilterSheetContextType | null>(null);
-
-/**
- * Returns the shared-sheet controller, or null when rendered outside a
- * FilterSheetProvider — FilterButton then falls back to its own standalone
- * sheet (used by screens that don't host a provider, e.g. logs / discover).
- */
-export const useFilterSheet = (): FilterSheetContextType | null =>
-  useContext(FilterSheetContext);
-
-/**
- * Hosts the single shared filter sheet for a screen. Every FilterButton under
- * it calls openFilter() to show its options in that one sheet — so two sheets
- * can never stack regardless of how fast the buttons are tapped. present() runs
- * synchronously from the button's press handler (the modal is always mounted).
- */
-export const FilterSheetProvider: React.FC<PropsWithChildren> = ({
-  children,
-}) => {
-  const modalRef = useRef<BottomSheetModal | null>(null);
-  const [open, setOpen] = useState(false);
-  const [config, setConfig] = useState<FilterConfig | null>(null);
-
-  // First-wins guard. With a single shared sheet there is exactly one source of
-  // truth (this ref) reset on the one close path — so unlike a per-button guard
-  // it can't get stuck on remounts or multiple instances. A second tap during
-  // the first sheet's open animation is ignored; the first tapped filter wins.
-  const openRef = useRef(false);
-
-  const openFilter = useCallback((next: FilterConfig) => {
-    if (openRef.current) return;
-    openRef.current = true;
-    setConfig(next);
-    setOpen(true);
-    modalRef.current?.present();
-  }, []);
-
-  // Single close path for every dismissal (select / swipe / backdrop) — frees
-  // the guard reliably.
-  const closeSheet = useCallback(() => {
-    openRef.current = false;
-    setOpen(false);
-  }, []);
-
-  const value = useMemo(() => ({ openFilter }), [openFilter]);
-
-  return (
-    <FilterSheetContext.Provider value={value}>
-      {children}
-      <SharedFilterSheet
-        modalRef={modalRef}
-        open={open}
-        setOpen={closeSheet}
-        config={config}
-      />
-    </FilterSheetContext.Provider>
-  );
-};
--- a/components/filters/ResetFiltersButton.tsx
+++ b/components/filters/ResetFiltersButton.tsx
@@ -1,24 +1,38 @@
 import { Ionicons } from "@expo/vector-icons";
+import { useAtom } from "jotai";
 import { TouchableOpacity, type TouchableOpacityProps } from "react-native";
-import { useFilterReset } from "@/hooks/useFilterReset";
+import {
+  filterByAtom,
+  genreFilterAtom,
+  tagsFilterAtom,
+  yearFilterAtom,
+} from "@/utils/atoms/filters";

-interface Props extends TouchableOpacityProps {
-  libraryId: string;
-}
+interface Props extends TouchableOpacityProps {}

-export const ResetFiltersButton: React.FC<Props> = ({
-  libraryId,
-  ...props
-}) => {
-  const { hasActiveFilters, resetAllFilters } = useFilterReset(libraryId);
+export const ResetFiltersButton: React.FC<Props> = ({ ...props }) => {
+  const [selectedGenres, setSelectedGenres] = useAtom(genreFilterAtom);
+  const [selectedTags, setSelectedTags] = useAtom(tagsFilterAtom);
+  const [selectedYears, setSelectedYears] = useAtom(yearFilterAtom);
+  const [selectedFilters, setSelectedFilters] = useAtom(filterByAtom);

-  if (!hasActiveFilters) {
+  if (
+    selectedGenres.length === 0 &&
+    selectedTags.length === 0 &&
+    selectedYears.length === 0 &&
+    selectedFilters.length === 0
+  ) {
    return null;
  }

  return (
    <TouchableOpacity
-      onPress={resetAllFilters}
+      onPress={() => {
+        setSelectedGenres([]);
+        setSelectedTags([]);
+        setSelectedYears([]);
+        setSelectedFilters([]);
+      }}
      className='bg-purple-600 rounded-full w-[30px] h-[30px] flex items-center justify-center mr-1'
      {...props}
    >
--- a/components/filters/SharedFilterSheet.tsx
+++ b/components/filters/SharedFilterSheet.tsx
@@ -1,286 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import {
-  BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetScrollView,
-} from "@gorhom/bottom-sheet";
-import { useQuery } from "@tanstack/react-query";
-import { isEqual } from "lodash";
-import type React from "react";
-import {
-  useCallback,
-  useDeferredValue,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { useTranslation } from "react-i18next";
-import { StyleSheet, TouchableOpacity, View } from "react-native";
-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";
-
-/**
- * Config for the filter currently shown by the shared sheet. Generics are erased
- * at the FilterButton → provider boundary, so item-typed callbacks use `any`.
- */
-export interface FilterConfig {
-  /** Stable identity — changing it remounts the content with fresh state. */
-  key: string;
-  id: string;
-  queryKey: string;
-  queryFn: (params: any) => Promise<any>;
-  title: string;
-  values: any[];
-  set: (value: any[]) => void;
-  renderItemLabel: (item: any) => React.ReactNode;
-  searchFilter?: (item: any, query: string) => boolean;
-  disableSearch?: boolean;
-  multiple?: boolean;
-}
-
-const LIMIT = 100;
-
-interface SharedFilterSheetProps {
-  modalRef: React.RefObject<BottomSheetModal | null>;
-  open: boolean;
-  setOpen: (open: boolean) => void;
-  config: FilterConfig | null;
-}
-
-/**
- * The single shared filter sheet — one BottomSheetModal hosted by
- * FilterSheetProvider for a whole screen; FilterButtons only swap its `config`.
- * Because only one modal ever exists, rapid taps across buttons can never stack
- * two sheets, so no guard/timer is needed. The modal shell stays mounted with a
- * stable ref (present() can run synchronously from the tapping button); the
- * inner content is keyed by the active filter so its pagination/search reset
- * cleanly between filters.
- */
-export const SharedFilterSheet: React.FC<SharedFilterSheetProps> = ({
-  modalRef,
-  open,
-  setOpen,
-  config,
-}) => {
-  const snapPoints = useMemo(() => ["85%"], []);
-  const insets = useSafeAreaInsets();
-
-  // Opening is imperative (the provider calls present()); this effect only
-  // closes, and never dismisses a modal that was never presented.
-  const wasPresentedRef = useRef(false);
-  useEffect(() => {
-    if (!open && wasPresentedRef.current) {
-      modalRef.current?.dismiss();
-    }
-  }, [open, modalRef]);
-
-  const handleSheetChanges = useCallback(
-    (index: number) => {
-      if (index >= 0) {
-        wasPresentedRef.current = true;
-      } else if (index === -1) {
-        wasPresentedRef.current = false;
-        setOpen(false);
-      }
-    },
-    [setOpen],
-  );
-
-  const requestClose = useCallback(() => setOpen(false), [setOpen]);
-
-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-      />
-    ),
-    [],
-  );
-
-  return (
-    <BottomSheetModal
-      ref={modalRef}
-      index={0}
-      snapPoints={snapPoints}
-      onChange={handleSheetChanges}
-      backdropComponent={renderBackdrop}
-      handleIndicatorStyle={{ backgroundColor: "white" }}
-      backgroundStyle={{ backgroundColor: "#171717" }}
-    >
-      <BottomSheetScrollView style={{ flex: 1 }}>
-        <View
-          className='mt-2 mb-8'
-          style={{
-            paddingLeft: Math.max(16, insets.left),
-            paddingRight: Math.max(16, insets.right),
-          }}
-        >
-          {config && (
-            <SharedFilterSheetContent
-              key={config.key}
-              config={config}
-              onRequestClose={requestClose}
-            />
-          )}
-        </View>
-      </BottomSheetScrollView>
-    </BottomSheetModal>
-  );
-};
-
-interface SharedFilterSheetContentProps {
-  config: FilterConfig;
-  onRequestClose: () => void;
-}
-
-const SharedFilterSheetContent: React.FC<SharedFilterSheetContentProps> = ({
-  config,
-  onRequestClose,
-}) => {
-  const {
-    id,
-    queryKey,
-    queryFn,
-    title,
-    values,
-    set,
-    renderItemLabel,
-    searchFilter,
-    disableSearch = false,
-    multiple = false,
-  } = config;
-  const { t } = useTranslation();
-
-  // The options query lives here (deduped with the FilterButton's own query via
-  // the shared React Query key), so the list stays live after the sheet opens.
-  const { data: _data, isLoading: loading } = useQuery<any[]>({
-    queryKey: ["filters", title, queryKey, id],
-    queryFn,
-    staleTime: 0,
-    enabled: !!id && !!queryFn && !!queryKey,
-  });
-
-  const [data, setData] = useState<any[]>([]);
-  const [offset, setOffset] = useState(0);
-
-  const [search, setSearch] = useState("");
-  // Filtering on every keystroke blocks the JS thread on large lists; defer the
-  // value so the keystroke render stays cheap and the list update runs after.
-  const deferredSearch = useDeferredValue(search);
-  const [showSearch, setShowSearch] = useState(false);
-
-  const filteredData = useMemo(() => {
-    if (!deferredSearch) return _data;
-    const results = [];
-    for (let i = 0; i < (_data?.length || 0); i++) {
-      if (_data && searchFilter?.(_data[i], deferredSearch)) {
-        results.push(_data[i]);
-      }
-    }
-    return results.slice(0, 100);
-  }, [deferredSearch, _data, searchFilter]);
-
-  useEffect(() => {
-    if (!data || data.length === 0 || disableSearch) return;
-    if (data.length > 15) {
-      setShowSearch(true);
-    }
-  }, [data, disableSearch]);
-
-  // Loads data in batches of LIMIT from offset (efficient "load more").
-  useEffect(() => {
-    if (!_data || _data.length === 0) return;
-
-    const newData = [...data];
-    for (let i = offset; i < Math.min(_data.length, offset + LIMIT); i++) {
-      const item = _data[i];
-      // Option objects are recreated across renders → dedupe by value.
-      const exists = newData.some((existingItem) =>
-        isEqual(existingItem, item),
-      );
-      if (!exists) {
-        newData.push(item);
-      }
-    }
-    setData(newData);
-  }, [offset, _data]);
-
-  const renderData = useMemo(() => {
-    if (deferredSearch.length > 0 && showSearch) return filteredData;
-    return data;
-  }, [deferredSearch, showSearch, filteredData, data]);
-
-  const renderedRows = useMemo(
-    () =>
-      renderData?.map((item, index) => (
-        <View key={index}>
-          <TouchableOpacity
-            onPress={() => {
-              const isSelected = values.some((value) => isEqual(value, item));
-              if (multiple) {
-                if (!isSelected) set(values.concat(item));
-                else set(values.filter((value) => !isEqual(value, item)));
-                setTimeout(() => onRequestClose(), 250);
-              } else if (!isSelected) {
-                set([item]);
-                setTimeout(() => onRequestClose(), 250);
-              }
-            }}
-            className='bg-neutral-800 px-4 py-3 flex flex-row items-center justify-between'
-          >
-            <Text className='flex shrink'>{renderItemLabel(item)}</Text>
-            {values.some((i) => isEqual(i, item)) ? (
-              <Ionicons name='radio-button-on' size={24} color='white' />
-            ) : (
-              <Ionicons name='radio-button-off' size={24} color='white' />
-            )}
-          </TouchableOpacity>
-          <View
-            style={{ height: StyleSheet.hairlineWidth }}
-            className='h-1 divide-neutral-700'
-          />
-        </View>
-      )),
-    [renderData, values, multiple, set, renderItemLabel, onRequestClose],
-  );
-
-  return (
-    <>
-      <Text className='font-bold text-2xl'>{title}</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")}
-          className='my-2 border-neutral-800 border'
-          value={search}
-          onChangeText={setSearch}
-          returnKeyType='done'
-        />
-      )}
-      <View
-        style={{ borderRadius: 20, overflow: "hidden" }}
-        className='mb-4 flex flex-col rounded-xl overflow-hidden'
-      >
-        {renderedRows}
-      </View>
-      {data.length < (_data?.length || 0) && (
-        <Button onPress={() => setOffset(offset + LIMIT)}>Load more</Button>
-      )}
-    </>
-  );
-};
--- a/components/list/ListGroup.tsx
+++ b/components/list/ListGroup.tsx
@@ -23,9 +23,11 @@ export const ListGroup: React.FC<PropsWithChildren<Props>> = ({

  return (
    <View {...props}>
-      <Text className='ml-4 mb-1 uppercase text-[#8E8D91] text-xs'>
-        {title}
-      </Text>
+      {title ? (
+        <Text className='ml-4 mb-1 uppercase text-[#8E8D91] text-xs'>
+          {title}
+        </Text>
+      ) : null}
      <View
        style={[]}
        className='flex flex-col rounded-xl overflow-hidden pl-0 bg-neutral-900'
--- a/components/list/ListItem.tsx
+++ b/components/list/ListItem.tsx
@@ -1,6 +1,6 @@
 import { Ionicons } from "@expo/vector-icons";
 import type { PropsWithChildren, ReactNode } from "react";
-import { TouchableOpacity, View, type ViewProps } from "react-native";
+import { Platform, TouchableOpacity, View, type ViewProps } from "react-native";
 import { Text } from "../common/Text";

 interface Props extends ViewProps {
@@ -34,12 +34,17 @@ export const ListItem: React.FC<PropsWithChildren<Props>> = ({
 }) => {
  const effectiveSubtitle = disabledByAdmin ? "Disabled by admin" : subtitle;
  const isDisabled = disabled || disabledByAdmin;
+  // Keep the row floor uniform; Android trims padding slightly (its native
+  // controls sit taller). Switch height is capped via SettingSwitch so toggle
+  // rows match non-toggle rows.
+  const rowSizing =
+    Platform.OS === "android" ? "min-h-[42px] py-1.5" : "min-h-[42px] py-2";
  if (onPress)
    return (
      <TouchableOpacity
        disabled={isDisabled}
        onPress={onPress}
-        className={`flex flex-row items-center justify-between bg-neutral-900 min-h-[42px] py-2 pr-4 pl-4 ${isDisabled ? "opacity-50" : ""}`}
+        className={`flex flex-row items-center justify-between bg-neutral-900 ${rowSizing} pr-4 pl-4 ${isDisabled ? "opacity-50" : ""}`}
        {...(viewProps as any)}
      >
        <ListItemContent
@@ -58,7 +63,7 @@ export const ListItem: React.FC<PropsWithChildren<Props>> = ({
    );
  return (
    <View
-      className={`flex flex-row items-center justify-between bg-neutral-900 min-h-[42px] py-2 pr-4 pl-4 ${isDisabled ? "opacity-50" : ""}`}
+      className={`flex flex-row items-center justify-between bg-neutral-900 ${rowSizing} pr-4 pl-4 ${isDisabled ? "opacity-50" : ""}`}
      {...viewProps}
    >
      <ListItemContent
--- a/components/settings/AppearanceSettings.tsx
+++ b/components/settings/AppearanceSettings.tsx
@@ -1,7 +1,8 @@
 import type React from "react";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Linking, Switch } from "react-native";
+import { Linking } from "react-native";
+import { SettingSwitch } from "@/components/common/SettingSwitch";
 import DisabledSetting from "@/components/settings/DisabledSetting";
 import useRouter from "@/hooks/useAppRouter";
 import { useSettings } from "@/utils/atoms/settings";
@@ -34,7 +35,7 @@ export const AppearanceSettings: React.FC = () => {
            )
          }
        >
-          <Switch
+          <SettingSwitch
            value={settings.showCustomMenuLinks}
            disabled={pluginSettings?.showCustomMenuLinks?.locked}
            onValueChange={(value) =>
@@ -45,13 +46,23 @@ export const AppearanceSettings: React.FC = () => {
        <ListItem
          title={t("home.settings.appearance.merge_next_up_continue_watching")}
        >
-          <Switch
+          <SettingSwitch
            value={settings.mergeNextUpAndContinueWatching}
            onValueChange={(value) =>
              updateSettings({ mergeNextUpAndContinueWatching: value })
            }
          />
        </ListItem>
+        <ListItem
+          title={t("home.settings.appearance.hide_remote_session_button")}
+        >
+          <SettingSwitch
+            value={settings.hideRemoteSessionButton}
+            onValueChange={(value) =>
+              updateSettings({ hideRemoteSessionButton: value })
+            }
+          />
+        </ListItem>
        <ListItem
          onPress={() =>
            router.push("/settings/appearance/hide-libraries/page")
@@ -59,16 +70,6 @@ export const AppearanceSettings: React.FC = () => {
          title={t("home.settings.other.hide_libraries")}
          showArrow
        />
-        <ListItem
-          title={t("home.settings.appearance.hide_remote_session_button")}
-        >
-          <Switch
-            value={settings.hideRemoteSessionButton}
-            onValueChange={(value) =>
-              updateSettings({ hideRemoteSessionButton: value })
-            }
-          />
-        </ListItem>
      </ListGroup>
    </DisabledSetting>
  );
--- a/components/settings/AudioToggles.tsx
+++ b/components/settings/AudioToggles.tsx
@@ -2,7 +2,7 @@ import { Ionicons } from "@expo/vector-icons";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, View, type ViewProps } from "react-native";
-import { Switch } from "react-native-gesture-handler";
+import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { AudioTranscodeMode, useSettings } from "@/utils/atoms/settings";
 import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
@@ -135,7 +135,7 @@ export const AudioToggles: React.FC<Props> = ({ ...props }) => {
          title={t("home.settings.audio.set_audio_track")}
          disabled={pluginSettings?.rememberAudioSelections?.locked}
        >
-          <Switch
+          <SettingSwitch
            value={settings.rememberAudioSelections}
            disabled={pluginSettings?.rememberAudioSelections?.locked}
            onValueChange={(value) =>
--- a/components/settings/ChromecastSettings.tsx
+++ b/components/settings/ChromecastSettings.tsx
@@ -1,4 +1,5 @@
-import { Switch, View } from "react-native";
+import { View } from "react-native";
+import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { useSettings } from "@/utils/atoms/settings";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
@@ -9,7 +10,7 @@ export const ChromecastSettings: React.FC = ({ ...props }) => {
    <View {...props}>
      <ListGroup title={"Chromecast"}>
        <ListItem title={"Enable H265 for Chromecast"}>
-          <Switch
+          <SettingSwitch
            value={settings.enableH265ForChromecast}
            onValueChange={(enableH265ForChromecast) =>
              updateSettings({ enableH265ForChromecast })
--- a/components/settings/GestureControls.tsx
+++ b/components/settings/GestureControls.tsx
@@ -2,7 +2,7 @@ import type React from "react";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import type { ViewProps } from "react-native";
-import { Switch } from "react-native";
+import { SettingSwitch } from "@/components/common/SettingSwitch";
 import DisabledSetting from "@/components/settings/DisabledSetting";
 import { useSettings } from "@/utils/atoms/settings";
 import { ListGroup } from "../list/ListGroup";
@@ -39,7 +39,7 @@ export const GestureControls: React.FC<Props> = ({ ...props }) => {
          )}
          disabled={pluginSettings?.enableHorizontalSwipeSkip?.locked}
        >
-          <Switch
+          <SettingSwitch
            value={settings.enableHorizontalSwipeSkip}
            disabled={pluginSettings?.enableHorizontalSwipeSkip?.locked}
            onValueChange={(enableHorizontalSwipeSkip) =>
@@ -55,7 +55,7 @@ export const GestureControls: React.FC<Props> = ({ ...props }) => {
          )}
          disabled={pluginSettings?.enableLeftSideBrightnessSwipe?.locked}
        >
-          <Switch
+          <SettingSwitch
            value={settings.enableLeftSideBrightnessSwipe}
            disabled={pluginSettings?.enableLeftSideBrightnessSwipe?.locked}
            onValueChange={(enableLeftSideBrightnessSwipe) =>
@@ -71,7 +71,7 @@ export const GestureControls: React.FC<Props> = ({ ...props }) => {
          )}
          disabled={pluginSettings?.enableRightSideVolumeSwipe?.locked}
        >
-          <Switch
+          <SettingSwitch
            value={settings.enableRightSideVolumeSwipe}
            disabled={pluginSettings?.enableRightSideVolumeSwipe?.locked}
            onValueChange={(enableRightSideVolumeSwipe) =>
@@ -87,7 +87,7 @@ export const GestureControls: React.FC<Props> = ({ ...props }) => {
          )}
          disabled={pluginSettings?.hideVolumeSlider?.locked}
        >
-          <Switch
+          <SettingSwitch
            value={settings.hideVolumeSlider}
            disabled={pluginSettings?.hideVolumeSlider?.locked}
            onValueChange={(hideVolumeSlider) =>
@@ -103,7 +103,7 @@ export const GestureControls: React.FC<Props> = ({ ...props }) => {
          )}
          disabled={pluginSettings?.hideBrightnessSlider?.locked}
        >
-          <Switch
+          <SettingSwitch
            value={settings.hideBrightnessSlider}
            disabled={pluginSettings?.hideBrightnessSlider?.locked}
            onValueChange={(hideBrightnessSlider) =>
--- a/components/settings/KefinTweaks.tsx
+++ b/components/settings/KefinTweaks.tsx
@@ -1,5 +1,6 @@
 import { useTranslation } from "react-i18next";
-import { Switch, Text, View } from "react-native";
+import { Text, View } from "react-native";
+import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { useSettings } from "@/utils/atoms/settings";

 export const KefinTweaksSettings = () => {
@@ -20,7 +21,7 @@ export const KefinTweaksSettings = () => {
            {isEnabled ? t("Watchlist On") : t("Watchlist Off")}
          </Text>

-          <Switch
+          <SettingSwitch
            value={isEnabled}
            onValueChange={(value) => updateSettings({ useKefinTweaks: value })}
            trackColor={{ false: "#555", true: "purple" }}
--- a/components/settings/LocalNetworkSettings.tsx
+++ b/components/settings/LocalNetworkSettings.tsx
@@ -2,8 +2,9 @@ import { Ionicons } from "@expo/vector-icons";
 import type React from "react";
 import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Switch, TouchableOpacity, View } from "react-native";
+import { TouchableOpacity, View } from "react-native";
 import { toast } from "sonner-native";
+import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { useWifiSSID } from "@/hooks/useWifiSSID";
 import { useServerUrl } from "@/providers/ServerUrlProvider";
 import { storage } from "@/utils/mmkv";
@@ -147,7 +148,10 @@ export function LocalNetworkSettings(): React.ReactElement | null {
          title={t("home.settings.network.auto_switch_enabled")}
          subtitle={t("home.settings.network.auto_switch_description")}
        >
-          <Switch value={config.enabled} onValueChange={handleToggleEnabled} />
+          <SettingSwitch
+            value={config.enabled}
+            onValueChange={handleToggleEnabled}
+          />
        </ListItem>
      </ListGroup>

--- a/components/settings/MpvSubtitleSettings.tsx
+++ b/components/settings/MpvSubtitleSettings.tsx
@@ -1,6 +1,7 @@
 import { Ionicons } from "@expo/vector-icons";
 import { useMemo } from "react";
-import { Platform, Switch, View, type ViewProps } from "react-native";
+import { Platform, View, type ViewProps } from "react-native";
+import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { Stepper } from "@/components/inputs/Stepper";
 import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
@@ -122,7 +123,7 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
        )}

        <ListItem title='Opaque Background'>
-          <Switch
+          <SettingSwitch
            value={settings.mpvSubtitleBackgroundEnabled ?? false}
            onValueChange={(value) =>
              updateSettings({ mpvSubtitleBackgroundEnabled: value })
--- a/components/settings/OtherSettings.tsx
+++ b/components/settings/OtherSettings.tsx
@@ -3,8 +3,9 @@ import { TFunction } from "i18next";
 import type React from "react";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Linking, Switch, View } from "react-native";
+import { Linking, View } from "react-native";
 import { BITRATES } from "@/components/BitrateSelector";
+import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { PlatformDropdown } from "@/components/PlatformDropdown";
 import DisabledSetting from "@/components/settings/DisabledSetting";
 import useRouter from "@/hooks/useAppRouter";
@@ -132,7 +133,7 @@ export const OtherSettings: React.FC = () => {
          title={t("home.settings.other.safe_area_in_controls")}
          disabled={pluginSettings?.safeAreaInControlsEnabled?.locked}
        >
-          <Switch
+          <SettingSwitch
            value={settings.safeAreaInControlsEnabled}
            disabled={pluginSettings?.safeAreaInControlsEnabled?.locked}
            onValueChange={(value) =>
@@ -150,7 +151,7 @@ export const OtherSettings: React.FC = () => {
            )
          }
        >
-          <Switch
+          <SettingSwitch
            value={settings.showCustomMenuLinks}
            disabled={pluginSettings?.showCustomMenuLinks?.locked}
            onValueChange={(value) =>
@@ -188,7 +189,7 @@ export const OtherSettings: React.FC = () => {
          title={t("home.settings.other.disable_haptic_feedback")}
          disabled={pluginSettings?.disableHapticFeedback?.locked}
        >
-          <Switch
+          <SettingSwitch
            value={settings.disableHapticFeedback}
            disabled={pluginSettings?.disableHapticFeedback?.locked}
            onValueChange={(disableHapticFeedback) =>
--- a/components/settings/PlaybackControlsSettings.tsx
+++ b/components/settings/PlaybackControlsSettings.tsx
@@ -3,8 +3,9 @@ import { TFunction } from "i18next";
 import type React from "react";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Switch, View } from "react-native";
+import { View } from "react-native";
 import { BITRATES } from "@/components/BitrateSelector";
+import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { PlatformDropdown } from "@/components/PlatformDropdown";
 import { PLAYBACK_SPEEDS } from "@/components/PlaybackSpeedSelector";
 import DisabledSetting from "@/components/settings/DisabledSetting";
@@ -115,7 +116,7 @@ export const PlaybackControlsSettings: React.FC = () => {

  return (
    <DisabledSetting disabled={disabled}>
-      <ListGroup title={t("home.settings.other.other_title")} className=''>
+      <ListGroup title={t("home.settings.other.other_title")} className='mb-4'>
        <ListItem
          title={t("home.settings.other.video_orientation")}
          disabled={pluginSettings?.defaultVideoOrientation?.locked}
@@ -146,7 +147,7 @@ export const PlaybackControlsSettings: React.FC = () => {
          title={t("home.settings.other.safe_area_in_controls")}
          disabled={pluginSettings?.safeAreaInControlsEnabled?.locked}
        >
-          <Switch
+          <SettingSwitch
            value={settings.safeAreaInControlsEnabled}
            disabled={pluginSettings?.safeAreaInControlsEnabled?.locked}
            onValueChange={(value) =>
@@ -205,7 +206,7 @@ export const PlaybackControlsSettings: React.FC = () => {
          title={t("home.settings.other.disable_haptic_feedback")}
          disabled={pluginSettings?.disableHapticFeedback?.locked}
        >
-          <Switch
+          <SettingSwitch
            value={settings.disableHapticFeedback}
            disabled={pluginSettings?.disableHapticFeedback?.locked}
            onValueChange={(disableHapticFeedback) =>
@@ -218,7 +219,7 @@ export const PlaybackControlsSettings: React.FC = () => {
          title={t("home.settings.other.auto_play_next_episode")}
          disabled={pluginSettings?.autoPlayNextEpisode?.locked}
        >
-          <Switch
+          <SettingSwitch
            value={settings.autoPlayNextEpisode}
            disabled={pluginSettings?.autoPlayNextEpisode?.locked}
            onValueChange={(autoPlayNextEpisode) =>
--- a/components/settings/StorageSettings.tsx
+++ b/components/settings/StorageSettings.tsx
@@ -125,7 +125,7 @@ export const StorageSettings = () => {
        </View>
      </View>
      {!Platform.isTV && (
-        <ListGroup>
+        <ListGroup className={Platform.OS === "android" ? "mt-4" : undefined}>
          <ListItem
            textColor='red'
            onPress={onDeleteClicked}
--- a/components/settings/SubtitleToggles.tsx
+++ b/components/settings/SubtitleToggles.tsx
@@ -3,8 +3,8 @@ import { SubtitlePlaybackMode } from "@jellyfin/sdk/lib/generated-client";
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, View, type ViewProps } from "react-native";
-import { Switch } from "react-native-gesture-handler";
 import { Input } from "@/components/common/Input";
+import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { Stepper } from "@/components/inputs/Stepper";
 import { useSettings } from "@/utils/atoms/settings";
 import { Text } from "../common/Text";
@@ -98,6 +98,7 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
  return (
    <View {...props}>
      <ListGroup
+        className='mb-4'
        title={t("home.settings.subtitles.subtitle_title")}
        description={
          <Text className='text-[#8E8D91] text-xs'>
@@ -152,7 +153,7 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
          title={t("home.settings.subtitles.set_subtitle_track")}
          disabled={pluginSettings?.rememberSubtitleSelections?.locked}
        >
-          <Switch
+          <SettingSwitch
            value={settings.rememberSubtitleSelections}
            disabled={pluginSettings?.rememberSubtitleSelections?.locked}
            onValueChange={(value) =>
--- a/hooks/useFilterReset.ts
+++ b/hooks/useFilterReset.ts
@@ -1,108 +0,0 @@
-import { useAtom } from "jotai";
-import { useCallback } from "react";
-import {
-  FilterByPreferenceAtom,
-  filterByAtom,
-  genreFilterAtom,
-  genrePreferenceAtom,
-  SortByOption,
-  SortOrderOption,
-  sortByAtom,
-  sortByPreferenceAtom,
-  sortOrderAtom,
-  sortOrderPreferenceAtom,
-  tagPreferenceAtom,
-  tagsFilterAtom,
-  yearFilterAtom,
-  yearPreferenceAtom,
-} from "@/utils/atoms/filters";
-
-/**
- * Single source of truth for the library filter bar's "reset" action and its
- * visibility. The mobile ResetFiltersButton and the TV filter header both use
- * this so they can't drift — sort/order used to be reset on neither path, so
- * the reset (X) never reflected a changed sort.
- *
- * A reset clears the session filters AND the per-library in-memory preferences
- * (sort, order, filterBy, genres, years, tags); otherwise the saved preference
- * resurfaces when the library's mount effect re-applies it on the next entry.
- */
-export const useFilterReset = (libraryId: string) => {
-  const [selectedGenres, setSelectedGenres] = useAtom(genreFilterAtom);
-  const [selectedYears, setSelectedYears] = useAtom(yearFilterAtom);
-  const [selectedTags, setSelectedTags] = useAtom(tagsFilterAtom);
-  const [filterBy, setFilterBy] = useAtom(filterByAtom);
-  const [sortBy, setSortBy] = useAtom(sortByAtom);
-  const [sortOrder, setSortOrder] = useAtom(sortOrderAtom);
-  const [, setSortByPreference] = useAtom(sortByPreferenceAtom);
-  const [, setSortOrderPreference] = useAtom(sortOrderPreferenceAtom);
-  const [, setFilterByPreference] = useAtom(FilterByPreferenceAtom);
-  const [, setGenrePreference] = useAtom(genrePreferenceAtom);
-  const [, setYearPreference] = useAtom(yearPreferenceAtom);
-  const [, setTagPreference] = useAtom(tagPreferenceAtom);
-
-  // SortName / Ascending is the baseline a library opens with (mount-effect
-  // fallback), so any other value counts as an active, resettable sort.
-  const hasActiveFilters =
-    selectedGenres.length > 0 ||
-    selectedYears.length > 0 ||
-    selectedTags.length > 0 ||
-    filterBy.length > 0 ||
-    sortBy[0] !== SortByOption.SortName ||
-    sortOrder[0] !== SortOrderOption.Ascending;
-
-  const resetAllFilters = useCallback(() => {
-    setSelectedGenres([]);
-    setSelectedYears([]);
-    setSelectedTags([]);
-    setFilterBy([]);
-    setSortBy([SortByOption.SortName]);
-    setSortOrder([SortOrderOption.Ascending]);
-    setSortByPreference((prev) => {
-      const next = { ...prev };
-      delete next[libraryId];
-      return next;
-    });
-    setSortOrderPreference((prev) => {
-      const next = { ...prev };
-      delete next[libraryId];
-      return next;
-    });
-    setFilterByPreference((prev) => {
-      const next = { ...prev };
-      delete next[libraryId];
-      return next;
-    });
-    setGenrePreference((prev) => {
-      const next = { ...prev };
-      delete next[libraryId];
-      return next;
-    });
-    setYearPreference((prev) => {
-      const next = { ...prev };
-      delete next[libraryId];
-      return next;
-    });
-    setTagPreference((prev) => {
-      const next = { ...prev };
-      delete next[libraryId];
-      return next;
-    });
-  }, [
-    libraryId,
-    setSelectedGenres,
-    setSelectedYears,
-    setSelectedTags,
-    setFilterBy,
-    setSortBy,
-    setSortOrder,
-    setSortByPreference,
-    setSortOrderPreference,
-    setFilterByPreference,
-    setGenrePreference,
-    setYearPreference,
-    setTagPreference,
-  ]);
-
-  return { hasActiveFilters, resetAllFilters };
-};
--- a/utils/atoms/filters.ts
+++ b/utils/atoms/filters.ts
@@ -1,5 +1,6 @@
 import { atom } from "jotai";
-import { useMemo } from "react";
+import { atomWithStorage } from "jotai/utils";
+import { storage } from "../mmkv";
 import { useSettings } from "./settings";

 export enum SortByOption {
@@ -58,36 +59,32 @@ export const sortOptions: {

 export const useFilterOptions = () => {
  const { settings } = useSettings();
-  // Memoized so the array identity stays stable across renders. A fresh array
-  // each render cascades into ListHeaderComponent re-creation and, under heavy
-  // re-rendering (active downloads), trips React's max-update-depth guard.
-  // We only show the watchlist option if someone has ticked that setting.
-  return useMemo(
-    () =>
-      settings?.useKefinTweaks
-        ? [
-            {
-              key: FilterByOption.IsFavoriteOrLiked,
-              value: "Is Favorite Or Liked",
-            },
-            { key: FilterByOption.IsUnplayed, value: "Is Unplayed" },
-            { key: FilterByOption.IsPlayed, value: "Is Played" },
-            { key: FilterByOption.IsFavorite, value: "Is Favorite" },
-            { key: FilterByOption.IsResumable, value: "Is Resumable" },
-            { key: FilterByOption.Likes, value: "Watchlist" },
-          ]
-        : [
-            {
-              key: FilterByOption.IsFavoriteOrLiked,
-              value: "Is Favorite Or Liked",
-            },
-            { key: FilterByOption.IsUnplayed, value: "Is Unplayed" },
-            { key: FilterByOption.IsPlayed, value: "Is Played" },
-            { key: FilterByOption.IsFavorite, value: "Is Favorite" },
-            { key: FilterByOption.IsResumable, value: "Is Resumable" },
-          ],
-    [settings?.useKefinTweaks],
-  );
+  // We want to only show the watchlist option if someone has ticked that setting.
+  const filterOptions = settings?.useKefinTweaks
+    ? [
+        {
+          key: FilterByOption.IsFavoriteOrLiked,
+          value: "Is Favorite Or Liked",
+        },
+        { key: FilterByOption.IsUnplayed, value: "Is Unplayed" },
+        { key: FilterByOption.IsPlayed, value: "Is Played" },
+        { key: FilterByOption.IsFavorite, value: "Is Favorite" },
+        { key: FilterByOption.IsResumable, value: "Is Resumable" },
+        { key: FilterByOption.Likes, value: "Watchlist" },
+      ]
+    : [
+        {
+          key: FilterByOption.IsFavoriteOrLiked,
+          value: "Is Favorite Or Liked",
+        },
+        { key: FilterByOption.IsUnplayed, value: "Is Unplayed" },
+        { key: FilterByOption.IsPlayed, value: "Is Played" },
+        { key: FilterByOption.IsFavorite, value: "Is Favorite" },
+        { key: FilterByOption.IsResumable, value: "Is Resumable" },
+      ];
+  console.log("filterOptions");
+  console.log(filterOptions);
+  return filterOptions;
 };

 export const sortOrderOptions: {
@@ -123,28 +120,57 @@ const defaultSortPreference: SortPreference = {};
 const defaultSortOrderPreference: SortOrderPreference = {};
 const defaultFilterPreference: FilterPreference = {};

-// Per-library filter memory is intentionally in-memory (NOT atomWithStorage):
-// each library keeps its own filters for the session, and everything resets
-// when the app is fully closed.
-export const sortByPreferenceAtom = atom<SortPreference>(defaultSortPreference);
+export const sortByPreferenceAtom = atomWithStorage<SortPreference>(
+  "sortByPreference",
+  defaultSortPreference,
+  {
+    getItem: (key) => {
+      const value = storage.getString(key);
+      return value ? JSON.parse(value) : null;
+    },
+    setItem: (key, value) => {
+      storage.set(key, JSON.stringify(value));
+    },
+    removeItem: (key) => {
+      storage.remove(key);
+    },
+  },
+);

-export const FilterByPreferenceAtom = atom<FilterPreference>(
+export const FilterByPreferenceAtom = atomWithStorage<FilterPreference>(
+  "filterByPreference",
  defaultFilterPreference,
+  {
+    getItem: (key) => {
+      const value = storage.getString(key);
+      return value ? JSON.parse(value) : null;
+    },
+    setItem: (key, value) => {
+      storage.set(key, JSON.stringify(value));
+    },
+    removeItem: (key) => {
+      storage.remove(key);
+    },
+  },
 );

-export const sortOrderPreferenceAtom = atom<SortOrderPreference>(
+export const sortOrderPreferenceAtom = atomWithStorage<SortOrderPreference>(
+  "sortOrderPreference",
  defaultSortOrderPreference,
+  {
+    getItem: (key) => {
+      const value = storage.getString(key);
+      return value ? JSON.parse(value) : null;
+    },
+    setItem: (key, value) => {
+      storage.set(key, JSON.stringify(value));
+    },
+    removeItem: (key) => {
+      storage.remove(key);
+    },
+  },
 );

-// Genres / years / tags are multi-select, so each library remembers an array.
-export interface MultiFilterPreference {
-  [libraryId: string]: string[];
-}
-
-export const genrePreferenceAtom = atom<MultiFilterPreference>({});
-export const yearPreferenceAtom = atom<MultiFilterPreference>({});
-export const tagPreferenceAtom = atom<MultiFilterPreference>({});
-
 export const getSortByPreference = (
  libraryId: string,
  preferences: SortPreference,
@@ -165,8 +191,3 @@ export const getFilterByPreference = (
 ) => {
  return preferences?.[libraryId] || null;
 };
-
-export const getMultiFilterPreference = (
-  libraryId: string,
-  preferences: MultiFilterPreference,
-) => preferences?.[libraryId] ?? [];