fix(library): per-library filter memory + reset-to-top, reset on app close

Genre/year/tag filters lived in global atoms with no per-library memory and no reset on library switch, so a selection in one library (e.g. Anime) bled into another (e.g. Shows). Sort/order/filterBy were already per-library but persisted across app restarts. Move all per-library filter state to in-memory preferences — genres/years/tags get their own, and sort/order/filterBy stop using atomWithStorage: each library remembers its own filters for the session and everything resets when the app is fully closed. The library mount effect restores the active library's selection, the shared useFilterReset clears it, and collections open with a clean slate. Also fix the grid not returning to the top on a filter/sort change or reset: it now pins to the top instantly and re-pins once the filtered fetch settles (FlashList was restoring the previous offset as the new content grew); pagination is left untouched.
fix(library): reset (X) also clears sort & order, via a shared hook
2026-06-25 23:30:33 +01:00 · 2026-06-25 00:32:59 +02:00 · 2026-06-24 23:14:55 +02:00 · 2026-06-24 23:14:47 +02:00 · 2026-06-24 22:53:48 +02:00 · 2026-06-24 22:22:49 +02:00
79 changed files with 1586 additions and 731 deletions
--- a/app/(auth)/(tabs)/(home)/_layout.tsx
+++ b/app/(auth)/(tabs)/(home)/_layout.tsx
@@ -73,7 +73,6 @@ export default function IndexLayout() {
          headerLeft: () => (
            <Pressable
              onPress={() => _router.back()}
-              className='pl-0.5'
              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
            >
              <Feather name='chevron-left' size={28} color='white' />
@@ -158,7 +157,6 @@ export default function IndexLayout() {
          headerLeft: () => (
            <Pressable
              onPress={() => _router.back()}
-              className='pl-0.5'
              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
            >
              <Feather name='chevron-left' size={28} color='white' />
--- a/app/(auth)/(tabs)/(home)/settings.tv.tsx
+++ b/app/(auth)/(tabs)/(home)/settings.tv.tsx
@@ -645,7 +645,7 @@ export default function SettingsTV() {
            formatValue={(v) => `${v.toFixed(1)}x`}
          />
          <TVSettingsStepper
-            label='Vertical Margin'
+            label={t("home.settings.subtitles.mpv_subtitle_margin_y")}
            value={settings.mpvSubtitleMarginY ?? 0}
            onDecrease={() => {
              const newValue = Math.max(
@@ -663,11 +663,11 @@ export default function SettingsTV() {
            }}
          />
          <TVSettingsOptionButton
-            label='Horizontal Alignment'
+            label={t("home.settings.subtitles.mpv_subtitle_align_x")}
            value={alignXLabel}
            onPress={() =>
              showOptions({
-                title: "Horizontal Alignment",
+                title: t("home.settings.subtitles.mpv_subtitle_align_x"),
                options: alignXOptions,
                onSelect: (value) =>
                  updateSettings({
@@ -677,11 +677,11 @@ export default function SettingsTV() {
            }
          />
          <TVSettingsOptionButton
-            label='Vertical Alignment'
+            label={t("home.settings.subtitles.mpv_subtitle_align_y")}
            value={alignYLabel}
            onPress={() =>
              showOptions({
-                title: "Vertical Alignment",
+                title: t("home.settings.subtitles.mpv_subtitle_align_y"),
                options: alignYOptions,
                onSelect: (value) =>
                  updateSettings({
--- 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({
@@ -71,7 +72,7 @@ export default function AppearanceHideLibrariesPage() {
          ))}
        </ListGroup>
        <Text className='px-4 text-xs text-neutral-500 mt-1'>
-          {t("home.settings.other.select_liraries_you_want_to_hide")}
+          {t("home.settings.other.select_libraries_you_want_to_hide")}
        </Text>
      </DisabledSetting>
    </ScrollView>
--- 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({
@@ -60,7 +61,7 @@ export default function HideLibrariesPage() {
        ))}
      </ListGroup>
      <Text className='px-4 text-xs text-neutral-500 mt-1'>
-        {t("home.settings.other.select_liraries_you_want_to_hide")}
+        {t("home.settings.other.select_libraries_you_want_to_hide")}
      </Text>
    </DisabledSetting>
  );
--- a/app/(auth)/(tabs)/(home)/settings/logs/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/logs/page.tsx
@@ -1,4 +1,6 @@
+import { Ionicons } from "@expo/vector-icons";
 import { File, Paths } from "expo-file-system";
+import { requireOptionalNativeModule } from "expo-modules-core";
 import { useNavigation } from "expo-router";
 import type * as SharingType from "expo-sharing";
 import { useCallback, useEffect, useId, useMemo, useState } from "react";
@@ -6,6 +8,7 @@ import { useTranslation } from "react-i18next";
 import { Platform, ScrollView, TouchableOpacity, View } from "react-native";
 import Collapsible from "react-native-collapsible";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { toast } from "sonner-native";
 import { Text } from "@/components/common/Text";
 import { FilterButton } from "@/components/filters/FilterButton";
 import { Loader } from "@/components/Loader";
@@ -72,6 +75,25 @@ export default function Page() {
    }
  }, [filteredLogs, Sharing]);

+  const copyLog = useCallback(
+    async (log: NonNullable<typeof logs>[number]) => {
+      // Skip on builds that don't ship the expo-clipboard native module
+      // (probe returns null instead of throwing); same guard as Quick Connect.
+      if (!requireOptionalNativeModule("ExpoClipboard")) return;
+      const Clipboard = await import("expo-clipboard");
+      const text = [
+        `[${log.level}] ${new Date(log.timestamp).toLocaleString()}`,
+        log.message,
+        log.data ? JSON.stringify(log.data, null, 2) : null,
+      ]
+        .filter(Boolean)
+        .join("\n");
+      await Clipboard.setStringAsync(text);
+      toast.success(t("home.settings.logs.copied"));
+    },
+    [logs, t],
+  );
+
  useEffect(() => {
    if (Platform.isTV) return;

@@ -88,8 +110,15 @@ export default function Page() {
  }, [share, loading]);

  return (
-    <View className='flex-1'>
-      <View className='flex flex-row justify-end py-2 px-4 space-x-2'>
+    <ScrollView
+      // Like the sibling settings pages, let iOS auto-inset the content below the
+      // transparent header (no manual header-height math). The filter bar is a
+      // sticky header so it stays pinned just under the header while logs scroll.
+      contentInsetAdjustmentBehavior='automatic'
+      stickyHeaderIndices={[0]}
+      contentContainerStyle={{ paddingBottom: insets.bottom }}
+    >
+      <View className='flex flex-row justify-end py-2 px-4 space-x-2 bg-black'>
        <FilterButton
          id={orderFilterId}
          queryKey='log'
@@ -112,67 +141,77 @@ export default function Page() {
          multiple={true}
        />
      </View>
-      <ScrollView
-        className='pb-4 px-4'
-        contentContainerStyle={{ paddingBottom: insets.bottom }}
-      >
-        <View className='flex flex-col space-y-2'>
-          {filteredLogs?.map((log, index) => (
-            <View className='bg-neutral-900 rounded-xl p-3' key={index}>
-              <TouchableOpacity
-                disabled={!log.data}
-                onPress={() =>
-                  setState((v) => ({
-                    ...v,
-                    [log.timestamp]: !v[log.timestamp],
-                  }))
-                }
-              >
-                <View className='flex flex-row justify-between'>
-                  <Text
-                    className={`mb-1
+      <View className='flex flex-col space-y-2 px-4'>
+        {filteredLogs?.map((log, index) => (
+          <View className='bg-neutral-900 rounded-xl p-3' key={index}>
+            <TouchableOpacity
+              disabled={!log.data}
+              onPress={() =>
+                setState((v) => ({
+                  ...v,
+                  [log.timestamp]: !v[log.timestamp],
+                }))
+              }
+            >
+              <View className='flex flex-row justify-between'>
+                <Text
+                  className={`mb-1
                      ${log.level === "INFO" && "text-blue-500"}
                      ${log.level === "ERROR" && "text-red-500"}
                      ${log.level === "DEBUG" && "text-purple-500"}
                    `}
-                  >
-                    {log.level}
-                  </Text>
-
-                  <Text className='text-xs'>
-                    {new Date(log.timestamp).toLocaleString()}
-                  </Text>
-                </View>
-                <Text selectable className='text-xs'>
-                  {log.message}
+                >
+                  {log.level}
                </Text>
-              </TouchableOpacity>

-              {log.data && (
-                <>
-                  {!state[log.timestamp] && (
-                    <Text className='text-xs mt-0.5'>
-                      {t("home.settings.logs.click_for_more_info")}
-                    </Text>
-                  )}
-                  <Collapsible collapsed={!state[log.timestamp]}>
-                    <View className='mt-2 flex flex-col space-y-2'>
-                      <ScrollView className='rounded-xl' style={codeBlockStyle}>
-                        <Text>{JSON.stringify(log.data, null, 2)}</Text>
-                      </ScrollView>
-                    </View>
-                  </Collapsible>
-                </>
+                <Text className='text-xs'>
+                  {new Date(log.timestamp).toLocaleString()}
+                </Text>
+              </View>
+              <Text className='text-xs'>{log.message}</Text>
+              {/* Keep the whole collapsed row tappable: the hint lives inside
+                  the toggle so tapping it expands too. */}
+              {log.data && !state[log.timestamp] && (
+                <Text className='text-xs mt-0.5'>
+                  {t("home.settings.logs.click_for_more_info")}
+                </Text>
              )}
-            </View>
-          ))}
-          {filteredLogs?.length === 0 && (
-            <Text className='opacity-50'>
-              {t("home.settings.logs.no_logs_available")}
-            </Text>
-          )}
-        </View>
-      </ScrollView>
-    </View>
+            </TouchableOpacity>
+
+            {log.data && (
+              <Collapsible collapsed={!state[log.timestamp]}>
+                <View className='mt-2 flex flex-col space-y-2'>
+                  <ScrollView
+                    className='rounded-xl'
+                    style={codeBlockStyle}
+                    nestedScrollEnabled
+                  >
+                    {/* Only the raw payload is selectable (per request); the
+                        header/message stay tap-to-toggle. */}
+                    <Text selectable>{JSON.stringify(log.data, null, 2)}</Text>
+                  </ScrollView>
+                  {!Platform.isTV && (
+                    <TouchableOpacity
+                      onPress={() => copyLog(log)}
+                      className='flex flex-row items-center self-end px-2 py-1'
+                    >
+                      <Ionicons name='copy-outline' size={16} color='white' />
+                      <Text className='text-xs ml-1'>
+                        {t("home.settings.logs.copy")}
+                      </Text>
+                    </TouchableOpacity>
+                  )}
+                </View>
+              </Collapsible>
+            )}
+          </View>
+        ))}
+        {filteredLogs?.length === 0 && (
+          <Text className='opacity-50'>
+            {t("home.settings.logs.no_logs_available")}
+          </Text>
+        )}
+      </View>
+    </ScrollView>
  );
 }
--- 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/jellyseerr/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/plugins/jellyseerr/page.tsx
@@ -1,11 +1,8 @@
-import { ScrollView } from "react-native";
+import { ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import DisabledSetting from "@/components/settings/DisabledSetting";
 import { JellyseerrSettings } from "@/components/settings/Jellyseerr";
-import { useSettings } from "@/utils/atoms/settings";

 export default function JellyseerrPluginPage() {
-  const { pluginSettings } = useSettings();
  const insets = useSafeAreaInsets();

  return (
@@ -16,12 +13,9 @@ export default function JellyseerrPluginPage() {
        paddingRight: insets.right,
      }}
    >
-      <DisabledSetting
-        disabled={pluginSettings?.jellyseerrServerUrl?.locked === true}
-        className='p-4'
-      >
+      <View className='p-4'>
        <JellyseerrSettings />
-      </DisabledSetting>
+      </View>
    </ScrollView>
  );
 }
--- a/app/(auth)/(tabs)/(home)/settings/plugins/kefinTweaks/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/plugins/kefinTweaks/page.tsx
@@ -1,11 +1,8 @@
-import { ScrollView } from "react-native";
+import { ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import DisabledSetting from "@/components/settings/DisabledSetting";
 import { KefinTweaksSettings } from "@/components/settings/KefinTweaks";
-import { useSettings } from "@/utils/atoms/settings";

 export default function KefinTweaksPage() {
-  const { pluginSettings } = useSettings();
  const insets = useSafeAreaInsets();

  return (
@@ -16,12 +13,9 @@ export default function KefinTweaksPage() {
        paddingRight: insets.right,
      }}
    >
-      <DisabledSetting
-        disabled={pluginSettings?.useKefinTweaks?.locked === true}
-        className='p-4'
-      >
+      <View className='px-4 pt-4'>
        <KefinTweaksSettings />
-      </DisabledSetting>
+      </View>
    </ScrollView>
  );
 }
--- a/app/(auth)/(tabs)/(home)/settings/plugins/marlin-search/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/plugins/marlin-search/page.tsx
@@ -1,35 +1,35 @@
 import { useNavigation } from "expo-router";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 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";
-import DisabledSetting from "@/components/settings/DisabledSetting";
 import { useNetworkAwareQueryClient } from "@/hooks/useNetworkAwareQueryClient";
 import { useSettings } from "@/utils/atoms/settings";

 export default function MarlinSearchPage() {
  const navigation = useNavigation();
-
  const { t } = useTranslation();
-
  const insets = useSafeAreaInsets();
-
  const { settings, updateSettings, pluginSettings } = useSettings();
  const queryClient = useNetworkAwareQueryClient();

  const [value, setValue] = useState<string>(settings?.marlinServerUrl || "");

+  const searchEngineLocked = pluginSettings?.searchEngine?.locked === true;
+  const marlinUrlLocked = pluginSettings?.marlinServerUrl?.locked === true;
+  const hasStreamystats = !!pluginSettings?.streamyStatsServerUrl?.value;
+
  const onSave = (val: string) => {
    updateSettings({
      marlinServerUrl: !val.endsWith("/") ? val : val.slice(0, -1),
@@ -41,15 +41,8 @@ export default function MarlinSearchPage() {
    Linking.openURL("https://github.com/fredrikburmester/marlin-search");
  };

-  const disabled = useMemo(() => {
-    return (
-      pluginSettings?.searchEngine?.locked === true &&
-      pluginSettings?.marlinServerUrl?.locked === true
-    );
-  }, [pluginSettings]);
-
  useEffect(() => {
-    if (!pluginSettings?.marlinServerUrl?.locked) {
+    if (!marlinUrlLocked) {
      navigation.setOptions({
        headerRight: () => (
          <TouchableOpacity onPress={() => onSave(value)} className='px-2'>
@@ -60,7 +53,7 @@ export default function MarlinSearchPage() {
        ),
      });
    }
-  }, [navigation, value, pluginSettings?.marlinServerUrl?.locked, t]);
+  }, [navigation, value, marlinUrlLocked, t]);

  if (!settings) return null;

@@ -72,52 +65,39 @@ export default function MarlinSearchPage() {
        paddingRight: insets.right,
      }}
    >
-      <DisabledSetting disabled={disabled} className='px-4'>
+      <View className='px-4 pt-4'>
        <ListGroup>
-          <DisabledSetting
-            disabled={
-              pluginSettings?.searchEngine?.locked === true ||
-              !!pluginSettings?.streamyStatsServerUrl?.value
-            }
-            showText={!pluginSettings?.marlinServerUrl?.locked}
+          {/* disabledByAdmin renders the "Disabled by admin" notice as the row's
+              subtitle (same pattern as the Streamystats settings) — no clipping. */}
+          <ListItem
+            title={t(
+              "home.settings.plugins.marlin_search.enable_marlin_search",
+            )}
+            disabledByAdmin={searchEngineLocked}
+            onPress={() => {
+              updateSettings({ searchEngine: "Jellyfin" });
+              queryClient.invalidateQueries({ queryKey: ["search"] });
+            }}
          >
-            <ListItem
-              title={t(
-                "home.settings.plugins.marlin_search.enable_marlin_search",
-              )}
-              onPress={() => {
-                updateSettings({ searchEngine: "Jellyfin" });
+            <SettingSwitch
+              value={settings.searchEngine === "Marlin"}
+              disabled={searchEngineLocked || hasStreamystats}
+              onValueChange={(val) => {
+                updateSettings({ searchEngine: val ? "Marlin" : "Jellyfin" });
                queryClient.invalidateQueries({ queryKey: ["search"] });
              }}
-            >
-              <Switch
-                value={settings.searchEngine === "Marlin"}
-                disabled={!!pluginSettings?.streamyStatsServerUrl?.value}
-                onValueChange={(value) => {
-                  updateSettings({
-                    searchEngine: value ? "Marlin" : "Jellyfin",
-                  });
-                  queryClient.invalidateQueries({ queryKey: ["search"] });
-                }}
-              />
-            </ListItem>
-          </DisabledSetting>
+            />
+          </ListItem>
        </ListGroup>

-        <DisabledSetting
-          disabled={pluginSettings?.marlinServerUrl?.locked === true}
-          showText={!pluginSettings?.searchEngine?.locked}
-          className='mt-2 flex flex-col rounded-xl overflow-hidden pl-4 bg-neutral-900 px-4'
-        >
-          <View
-            className={"flex flex-row items-center bg-neutral-900 h-11 pr-4"}
+        <ListGroup className='mt-2'>
+          <ListItem
+            title={t("home.settings.plugins.marlin_search.url")}
+            disabledByAdmin={marlinUrlLocked}
          >
-            <Text className='mr-4'>
-              {t("home.settings.plugins.marlin_search.url")}
-            </Text>
            <TextInput
-              editable={settings.searchEngine === "Marlin"}
-              className='text-white'
+              editable={!marlinUrlLocked && settings.searchEngine === "Marlin"}
+              className='text-white text-right flex-1'
              placeholder={t(
                "home.settings.plugins.marlin_search.server_url_placeholder",
              )}
@@ -128,15 +108,16 @@ export default function MarlinSearchPage() {
              textContentType='URL'
              onChangeText={(text) => setValue(text)}
            />
-          </View>
-        </DisabledSetting>
+          </ListItem>
+        </ListGroup>
+
        <Text className='px-4 text-xs text-neutral-500 mt-1'>
          {t("home.settings.plugins.marlin_search.marlin_search_hint")}{" "}
          <Text className='text-blue-500' onPress={handleOpenLink}>
            {t("home.settings.plugins.marlin_search.read_more_about_marlin")}
          </Text>
        </Text>
-      </DisabledSetting>
+      </View>
    </ScrollView>
  );
 }
--- a/app/(auth)/(tabs)/(home)/settings/plugins/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/plugins/page.tsx
@@ -1,9 +1,21 @@
-import { Platform, ScrollView, View } from "react-native";
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { Platform, ScrollView, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { toast } from "sonner-native";
+import { Text } from "@/components/common/Text";
 import { PluginSettings } from "@/components/settings/PluginSettings";
+import { useSettings } from "@/utils/atoms/settings";

 export default function PluginsPage() {
  const insets = useSafeAreaInsets();
+  const { t } = useTranslation();
+  const { refreshStreamyfinPluginSettings } = useSettings();
+
+  const handleRefreshFromServer = useCallback(async () => {
+    await refreshStreamyfinPluginSettings();
+    toast.success(t("home.settings.plugins.streamystats.toasts.refreshed"));
+  }, [refreshStreamyfinPluginSettings, t]);

  return (
    <ScrollView
@@ -18,6 +30,17 @@ export default function PluginsPage() {
        style={{ paddingTop: Platform.OS === "android" ? 10 : 0 }}
      >
        <PluginSettings />
+
+        {/* Pulls the centralised Streamyfin plugin settings for every plugin,
+            so it lives on the plugins index rather than inside Streamystats. */}
+        <TouchableOpacity
+          onPress={handleRefreshFromServer}
+          className='py-3 rounded-xl bg-neutral-800'
+        >
+          <Text className='text-center text-blue-500'>
+            {t("home.settings.plugins.streamystats.refresh_from_server")}
+          </Text>
+        </TouchableOpacity>
      </View>
    </ScrollView>
  );
--- 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";
@@ -22,12 +22,7 @@ export default function StreamystatsPage() {
  const navigation = useNavigation();
  const insets = useSafeAreaInsets();

-  const {
-    settings,
-    updateSettings,
-    pluginSettings,
-    refreshStreamyfinPluginSettings,
-  } = useSettings();
+  const { settings, updateSettings, pluginSettings } = useSettings();
  const queryClient = useNetworkAwareQueryClient();

  // Local state for all editable fields
@@ -49,7 +44,21 @@ export default function StreamystatsPage() {
  );

  const isUrlLocked = pluginSettings?.streamyStatsServerUrl?.locked === true;
-  const isStreamystatsEnabled = !!url;
+  const searchLocked = pluginSettings?.searchEngine?.locked === true;
+  const movieRecsLocked =
+    pluginSettings?.streamyStatsMovieRecommendations?.locked === true;
+  const seriesRecsLocked =
+    pluginSettings?.streamyStatsSeriesRecommendations?.locked === true;
+  const promotedWatchlistsLocked =
+    pluginSettings?.streamyStatsPromotedWatchlists?.locked === true;
+  const hideWatchlistsTabLocked =
+    pluginSettings?.hideWatchlistsTab?.locked === true;
+  // The input renders the locked admin URL; enablement must follow the same
+  // effective value or every toggle stays disabled until local state syncs.
+  const effectiveUrl = isUrlLocked
+    ? (settings?.streamyStatsServerUrl ?? "")
+    : url;
+  const isStreamystatsEnabled = !!effectiveUrl;

  const onSave = useCallback(() => {
    const cleanUrl = url.endsWith("/") ? url.slice(0, -1) : url;
@@ -113,17 +122,6 @@ export default function StreamystatsPage() {
    Linking.openURL("https://github.com/fredrikburmester/streamystats");
  };

-  const handleRefreshFromServer = useCallback(async () => {
-    const newPluginSettings = await refreshStreamyfinPluginSettings();
-    // Update local state with new values
-    const newUrl = newPluginSettings?.streamyStatsServerUrl?.value || "";
-    setUrl(newUrl);
-    if (newUrl) {
-      setUseForSearch(true);
-    }
-    toast.success(t("home.settings.plugins.streamystats.toasts.refreshed"));
-  }, [refreshStreamyfinPluginSettings, t]);
-
  if (!settings) return null;

  return (
@@ -134,7 +132,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")}
@@ -146,7 +144,7 @@ export default function StreamystatsPage() {
              placeholder={t(
                "home.settings.plugins.streamystats.server_url_placeholder",
              )}
-              value={url}
+              value={effectiveUrl}
              keyboardType='url'
              returnKeyType='done'
              autoCapitalize='none'
@@ -171,11 +169,18 @@ export default function StreamystatsPage() {
        >
          <ListItem
            title={t("home.settings.plugins.streamystats.enable_search")}
-            disabledByAdmin={pluginSettings?.searchEngine?.locked === true}
+            disabledByAdmin={searchLocked}
          >
-            <Switch
-              value={useForSearch}
-              disabled={!isStreamystatsEnabled}
+            {/* Locked controls show the live admin value and can't be toggled —
+                local form state would let the switch flip while the write guard
+                drops the change. */}
+            <SettingSwitch
+              value={
+                searchLocked
+                  ? settings?.searchEngine === "Streamystats"
+                  : useForSearch
+              }
+              disabled={!isStreamystatsEnabled || searchLocked}
              onValueChange={setUseForSearch}
            />
          </ListItem>
@@ -183,52 +188,62 @@ export default function StreamystatsPage() {
            title={t(
              "home.settings.plugins.streamystats.enable_movie_recommendations",
            )}
-            disabledByAdmin={
-              pluginSettings?.streamyStatsMovieRecommendations?.locked === true
-            }
+            disabledByAdmin={movieRecsLocked}
          >
-            <Switch
-              value={movieRecs}
+            <SettingSwitch
+              value={
+                movieRecsLocked
+                  ? (settings?.streamyStatsMovieRecommendations ?? false)
+                  : movieRecs
+              }
              onValueChange={setMovieRecs}
-              disabled={!isStreamystatsEnabled}
+              disabled={!isStreamystatsEnabled || movieRecsLocked}
            />
          </ListItem>
          <ListItem
            title={t(
              "home.settings.plugins.streamystats.enable_series_recommendations",
            )}
-            disabledByAdmin={
-              pluginSettings?.streamyStatsSeriesRecommendations?.locked === true
-            }
+            disabledByAdmin={seriesRecsLocked}
          >
-            <Switch
-              value={seriesRecs}
+            <SettingSwitch
+              value={
+                seriesRecsLocked
+                  ? (settings?.streamyStatsSeriesRecommendations ?? false)
+                  : seriesRecs
+              }
              onValueChange={setSeriesRecs}
-              disabled={!isStreamystatsEnabled}
+              disabled={!isStreamystatsEnabled || seriesRecsLocked}
            />
          </ListItem>
          <ListItem
            title={t(
              "home.settings.plugins.streamystats.enable_promoted_watchlists",
            )}
-            disabledByAdmin={
-              pluginSettings?.streamyStatsPromotedWatchlists?.locked === true
-            }
+            disabledByAdmin={promotedWatchlistsLocked}
          >
-            <Switch
-              value={promotedWatchlists}
+            <SettingSwitch
+              value={
+                promotedWatchlistsLocked
+                  ? (settings?.streamyStatsPromotedWatchlists ?? false)
+                  : promotedWatchlists
+              }
              onValueChange={setPromotedWatchlists}
-              disabled={!isStreamystatsEnabled}
+              disabled={!isStreamystatsEnabled || promotedWatchlistsLocked}
            />
          </ListItem>
          <ListItem
            title={t("home.settings.plugins.streamystats.hide_watchlists_tab")}
-            disabledByAdmin={pluginSettings?.hideWatchlistsTab?.locked === true}
+            disabledByAdmin={hideWatchlistsTabLocked}
          >
-            <Switch
-              value={hideWatchlistsTab}
+            <SettingSwitch
+              value={
+                hideWatchlistsTabLocked
+                  ? (settings?.hideWatchlistsTab ?? false)
+                  : hideWatchlistsTab
+              }
              onValueChange={setHideWatchlistsTab}
-              disabled={!isStreamystatsEnabled}
+              disabled={!isStreamystatsEnabled || hideWatchlistsTabLocked}
            />
          </ListItem>
        </ListGroup>
@@ -236,15 +251,6 @@ export default function StreamystatsPage() {
          {t("home.settings.plugins.streamystats.home_sections_hint")}
        </Text>

-        <TouchableOpacity
-          onPress={handleRefreshFromServer}
-          className='mt-6 py-3 rounded-xl bg-neutral-800'
-        >
-          <Text className='text-center text-blue-500'>
-            {t("home.settings.plugins.streamystats.refresh_from_server")}
-          </Text>
-        </TouchableOpacity>
-
        {/* Disable button - only show if URL is not locked and Streamystats is enabled */}
        {!isUrlLocked && isStreamystatsEnabled && (
          <TouchableOpacity
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/collections/[collectionId].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/collections/[collectionId].tsx
@@ -134,6 +134,12 @@ 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;

@@ -326,7 +332,7 @@ const page: React.FC = () => {
        data={[
          {
            key: "reset",
-            component: <ResetFiltersButton />,
+            component: <ResetFiltersButton libraryId={collectionId} />,
          },
          {
            key: "genre",
--- a/app/(auth)/(tabs)/(libraries)/[libraryId].tsx
+++ b/app/(auth)/(tabs)/(libraries)/[libraryId].tsx
@@ -9,12 +9,12 @@ import {
  getItemsApi,
  getUserLibraryApi,
 } from "@jellyfin/sdk/lib/utils/api";
-import { FlashList } from "@shopify/flash-list";
+import { FlashList, type FlashListRef } from "@shopify/flash-list";
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
 import { useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
-import React, { useCallback, useEffect, useMemo } from "react";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import {
  FlatList,
@@ -39,6 +39,7 @@ 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";
@@ -50,7 +51,9 @@ import {
  FilterByPreferenceAtom,
  filterByAtom,
  genreFilterAtom,
+  genrePreferenceAtom,
  getFilterByPreference,
+  getMultiFilterPreference,
  getSortByPreference,
  getSortOrderPreference,
  SortByOption,
@@ -61,9 +64,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";
@@ -102,6 +107,9 @@ 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();

@@ -183,6 +191,13 @@ 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,
@@ -191,6 +206,12 @@ const Page = () => {
    _setSortBy,
    filterByPreference,
    _setFilterBy,
+    genrePreference,
+    yearPreference,
+    tagPreference,
+    setSelectedGenres,
+    setSelectedYears,
+    setSelectedTags,
    searchParams.sortBy,
    searchParams.sortOrder,
    searchParams.filterBy,
@@ -235,6 +256,32 @@ 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
@@ -376,6 +423,29 @@ 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
@@ -506,7 +576,7 @@ const Page = () => {
        data={[
          {
            key: "reset",
-            component: <ResetFiltersButton />,
+            component: <ResetFiltersButton libraryId={libraryId} />,
          },
          {
            key: "genre",
@@ -525,7 +595,7 @@ const Page = () => {
                  });
                  return response.data.Genres || [];
                }}
-                set={setSelectedGenres}
+                set={setGenres}
                values={selectedGenres}
                title={t("library.filters.genres")}
                renderItemLabel={(item) => item.toString()}
@@ -552,7 +622,7 @@ const Page = () => {
                  });
                  return response.data.Years || [];
                }}
-                set={setSelectedYears}
+                set={setYears}
                values={selectedYears}
                title={t("library.filters.years")}
                renderItemLabel={(item) => item.toString()}
@@ -577,7 +647,7 @@ const Page = () => {
                  });
                  return response.data.Tags || [];
                }}
-                set={setSelectedTags}
+                set={setTags}
                values={selectedTags}
                title={t("library.filters.tags")}
                renderItemLabel={(item) => item.toString()}
@@ -657,11 +727,11 @@ const Page = () => {
      api,
      user?.Id,
      selectedGenres,
-      setSelectedGenres,
+      setGenres,
      selectedYears,
-      setSelectedYears,
+      setYears,
      selectedTags,
-      setSelectedTags,
+      setTags,
      sortBy,
      setSortBy,
      sortOrder,
@@ -673,19 +743,9 @@ const Page = () => {
    ],
  );

-  // 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]);
+  // 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 options - with "All" option for clearable filters
  const tvGenreFilterOptions = useMemo(
@@ -779,15 +839,15 @@ const Page = () => {
      options: tvGenreFilterOptions,
      onSelect: (value: string) => {
        if (value === "__all__") {
-          setSelectedGenres([]);
+          setGenres([]);
        } else if (selectedGenres.includes(value)) {
-          setSelectedGenres(selectedGenres.filter((g) => g !== value));
+          setGenres(selectedGenres.filter((g) => g !== value));
        } else {
-          setSelectedGenres([...selectedGenres, value]);
+          setGenres([...selectedGenres, value]);
        }
      },
    });
-  }, [showOptions, t, tvGenreFilterOptions, selectedGenres, setSelectedGenres]);
+  }, [showOptions, t, tvGenreFilterOptions, selectedGenres, setGenres]);

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

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

  const handleShowSortByFilter = useCallback(() => {
    showOptions({
@@ -868,6 +928,7 @@ const Page = () => {
  if (!Platform.isTV) {
    return (
      <FlashList
+        ref={flashListRef}
        key={orientation}
        ListEmptyComponent={
          <View className='flex flex-col items-center justify-center h-full'>
--- a/app/(auth)/(tabs)/(libraries)/music/[libraryId]/artists.tsx
+++ b/app/(auth)/(tabs)/(libraries)/music/[libraryId]/artists.tsx
@@ -89,7 +89,7 @@ export default function ArtistsScreen() {
    return (
      <View className='flex-1 justify-center items-center bg-black px-6'>
        <Text className='text-neutral-500 text-center'>
-          Missing music library id.
+          {t("music.missing_library_id")}
        </Text>
      </View>
    );
--- a/app/(auth)/(tabs)/(libraries)/music/[libraryId]/playlists.tsx
+++ b/app/(auth)/(tabs)/(libraries)/music/[libraryId]/playlists.tsx
@@ -122,7 +122,7 @@ export default function PlaylistsScreen() {
    return (
      <View className='flex-1 justify-center items-center bg-black px-6'>
        <Text className='text-neutral-500 text-center'>
-          Missing music library id.
+          {t("music.missing_library_id")}
        </Text>
      </View>
    );
--- a/app/(auth)/(tabs)/(libraries)/music/[libraryId]/suggestions.tsx
+++ b/app/(auth)/(tabs)/(libraries)/music/[libraryId]/suggestions.tsx
@@ -226,7 +226,7 @@ export default function SuggestionsScreen() {
    return (
      <View className='flex-1 justify-center items-center bg-black px-6'>
        <Text className='text-neutral-500 text-center'>
-          Missing music library id.
+          {t("music.missing_library_id")}
        </Text>
      </View>
    );
--- a/app/(auth)/now-playing.tsx
+++ b/app/(auth)/now-playing.tsx
@@ -14,6 +14,7 @@ import React, {
  useRef,
  useState,
 } from "react";
+import { useTranslation } from "react-i18next";
 import {
  ActivityIndicator,
  Dimensions,
@@ -72,6 +73,7 @@ const ARTWORK_SIZE = SCREEN_WIDTH - 80;
 type ViewMode = "player" | "queue";

 export default function NowPlayingScreen() {
+  const { t } = useTranslation();
  const [api] = useAtom(apiAtom);
  const [user] = useAtom(userAtom);
  const router = useRouter();
@@ -230,7 +232,9 @@ export default function NowPlayingScreen() {
            paddingBottom: Platform.OS === "android" ? insets.bottom : 0,
          }}
        >
-          <Text className='text-neutral-500'>No track playing</Text>
+          <Text className='text-neutral-500'>
+            {t("music.no_track_playing")}
+          </Text>
        </View>
      </BottomSheetModalProvider>
    );
@@ -267,7 +271,7 @@ export default function NowPlayingScreen() {
                    : "text-neutral-500"
                }
              >
-                Now Playing
+                {t("music.now_playing")}
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
@@ -718,6 +722,7 @@ const QueueView: React.FC<QueueViewProps> = ({
  onRemoveFromQueue,
  onReorderQueue,
 }) => {
+  const { t } = useTranslation();
  const renderQueueItem = useCallback(
    ({ item, drag, isActive, getIndex }: RenderItemParams<BaseItemDto>) => {
      const index = getIndex() ?? 0;
@@ -831,13 +836,15 @@ const QueueView: React.FC<QueueViewProps> = ({
      ListHeaderComponent={
        <View className='px-4 py-2'>
          <Text className='text-neutral-400 text-xs uppercase tracking-wider'>
-            {history.length > 0 ? "Playing from queue" : "Up next"}
+            {history.length > 0
+              ? t("music.playing_from_queue")
+              : t("music.up_next")}
          </Text>
        </View>
      }
      ListEmptyComponent={
        <View className='flex-1 items-center justify-center py-20'>
-          <Text className='text-neutral-500'>Queue is empty</Text>
+          <Text className='text-neutral-500'>{t("music.queue_empty")}</Text>
        </View>
      }
    />
--- a/app/(auth)/player/direct-player.tsx
+++ b/app/(auth)/player/direct-player.tsx
@@ -1267,7 +1267,7 @@ export default function DirectPlayerPage() {
                  console.error("Video Error:", e.nativeEvent);
                  Alert.alert(
                    t("player.error"),
-                    t("player.an_error_occured_while_playing_the_video"),
+                    t("player.an_error_occurred_while_playing_the_video"),
                  );
                  writeToLog("ERROR", "Video Error", e.nativeEvent);
                }}
--- a/app/(auth)/tv-subtitle-modal.tsx
+++ b/app/(auth)/tv-subtitle-modal.tsx
@@ -192,6 +192,7 @@ const SubtitleResultCard = React.forwardRef<
 >(({ result, hasTVPreferredFocus, isDownloading, onPress }, ref) => {
  const { focused, handleFocus, handleBlur, animatedStyle } =
    useTVFocusAnimation({ scaleAmount: 1.03 });
+  const { t } = useTranslation();

  return (
    <Pressable
@@ -328,7 +329,7 @@ const SubtitleResultCard = React.forwardRef<
              ]}
            >
              <Text style={[styles.flagText, { fontSize: scaleSize(10) }]}>
-                Hash Match
+                {t("player.hash_match")}
              </Text>
            </View>
          )}
--- a/app/+not-found.tsx
+++ b/app/+not-found.tsx
@@ -1,17 +1,20 @@
 import { Link, Stack } from "expo-router";
+import { useTranslation } from "react-i18next";
 import { StyleSheet } from "react-native";

 import { ThemedText } from "@/components/ThemedText";
 import { ThemedView } from "@/components/ThemedView";

 export default function NotFoundScreen() {
+  const { t } = useTranslation();
+
  return (
    <>
-      <Stack.Screen options={{ title: "Oops!" }} />
+      <Stack.Screen options={{ title: t("home.oops") }} />
      <ThemedView style={styles.container}>
-        <ThemedText type='title'>This screen doesn't exist.</ThemedText>
+        <ThemedText type='title'>{t("not_found.title")}</ThemedText>
        <Link href={"/home"} style={styles.link}>
-          <ThemedText type='link'>Go to home screen!</ThemedText>
+          <ThemedText type='link'>{t("not_found.go_home")}</ThemedText>
        </Link>
      </ThemedView>
    </>
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -10,6 +10,7 @@ import * as Device from "expo-device";
 import { DarkTheme, ThemeProvider } from "expo-router/react-navigation";
 import { Platform } from "react-native";
 import { GlobalModal } from "@/components/GlobalModal";
+import { PendingAccountSaveModal } from "@/components/PendingAccountSaveModal";
 import { enableTVMenuKeyInterception } from "@/hooks/useTVBackHandler";
 import i18n from "@/i18n";
 import { DownloadProvider } from "@/providers/DownloadProvider";
@@ -84,7 +85,8 @@ configureReanimatedLogger({
 if (!Platform.isTV) {
  Notifications.setNotificationHandler({
    handleNotification: async () => ({
-      shouldShowAlert: true,
+      shouldShowBanner: true,
+      shouldShowList: true,
      shouldPlaySound: true,
      shouldSetBadge: false,
    }),
@@ -333,9 +335,12 @@ function Layout() {
      notificationListener.current =
        Notifications?.addNotificationReceivedListener(
          (notification: Notification) => {
+            // Log only the title — serializing the whole notification touches
+            // the deprecated dataString getter (deprecation warning) and dumps
+            // noisy payloads into the console.
            console.log(
-              "Notification received while app running",
-              notification,
+              "Notification received while app running:",
+              notification.request.content.title,
            );
          },
        );
@@ -530,6 +535,7 @@ function Layout() {
                                  closeButton
                                />
                                {!Platform.isTV && <GlobalModal />}
+                                {!Platform.isTV && <PendingAccountSaveModal />}
                              </ThemeProvider>
                            </IntroSheetProvider>
                          </BottomSheetModalProvider>
--- a/bun.lock
+++ b/bun.lock
@@ -31,6 +31,7 @@
        "expo-brightness": "~56.0.5",
        "expo-build-properties": "~56.0.18",
        "expo-camera": "~56.0.8",
+        "expo-clipboard": "~56.0.4",
        "expo-constants": "~56.0.18",
        "expo-crypto": "~56.0.4",
        "expo-dev-client": "~56.0.20",
@@ -946,6 +947,8 @@

    "expo-camera": ["expo-camera@56.0.8", "", { "dependencies": { "barcode-detector": "^3.0.0" }, "peerDependencies": { "expo": "*", "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native-web"] }, "sha512-UDOpUUMisFRmCv1XQV1MJCKGAH2CsIC1Rs6P9Bbc6JLVmbxEKAd5dK68y6cScOdWURxVfJ0PRcjYnSuc8ayyIQ=="],

+    "expo-clipboard": ["expo-clipboard@56.0.4", "", { "peerDependencies": { "expo": "*", "react": "*", "react-native": "*" } }, "sha512-qb4DYlkiowHYHaUYVT2FN9nk/nI1xShXOUYsI7J9dVpQCOHcGFjCBPX1VAvEW4Ye4/Aagd6IuhOVAq/+scBOiA=="],
+
    "expo-constants": ["expo-constants@56.0.18", "", { "dependencies": { "@expo/env": "~2.3.0" }, "peerDependencies": { "expo": "*", "react-native": "*" } }, "sha512-8AMtbDGl/WVPnWlmbpGmvcdnNCy9E4PFnwdVwj600vljkMDPSxcAcjw8GVXEPk3PpZ+ngTqsrkltWyj0UKYAxw=="],

    "expo-crypto": ["expo-crypto@56.0.4", "", { "peerDependencies": { "expo": "*" } }, "sha512-fRNEhoXRXgAWBpe3/hq5X+KXTit3OZqdiAGts1YvNEUHQb+H5591mpPac0Yw+sZg9pXcrjRnzo5AxvZaENpc7g=="],
--- a/components/BitRateSheet.tsx
+++ b/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] : []}
--- a/components/MediaSourceSheet.tsx
+++ b/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] : []}
--- a/components/PendingAccountSaveModal.tsx
+++ b/components/PendingAccountSaveModal.tsx
@@ -0,0 +1,45 @@
+import { useAtom, useAtomValue } from "jotai";
+import type React from "react";
+import { useEffect } from "react";
+import { Platform } from "react-native";
+import { SaveAccountModal } from "@/components/SaveAccountModal";
+import {
+  pendingAccountSaveAtom,
+  useJellyfin,
+  userAtom,
+} from "@/providers/JellyfinProvider";
+
+/**
+ * Post-login save-account prompt. Login flows (password or Quick Connect)
+ * only flag the intent via pendingAccountSaveAtom; the protection picker
+ * shows here, AFTER the session is authorized — the login screen itself
+ * unmounts as soon as the user is set, so it can't host the modal.
+ */
+export const PendingAccountSaveModal: React.FC = () => {
+  const [pending, setPending] = useAtom(pendingAccountSaveAtom);
+  const user = useAtomValue(userAtom);
+  const { saveCurrentAccount } = useJellyfin();
+
+  // A logout before answering drops the intent — it must not resurface on
+  // the next (possibly different) login.
+  useEffect(() => {
+    if (!user && pending) setPending(null);
+  }, [user, pending, setPending]);
+
+  if (Platform.isTV) return null;
+
+  return (
+    <SaveAccountModal
+      visible={!!pending && !!user}
+      username={user?.Name ?? ""}
+      onClose={() => setPending(null)}
+      onSave={(securityType, pinCode) => {
+        const serverName = pending?.serverName;
+        setPending(null);
+        saveCurrentAccount({ securityType, pinCode, serverName }).catch(
+          (error) => console.warn("Failed to save account:", error),
+        );
+      }}
+    />
+  );
+};
--- a/components/PlatformDropdown.tsx
+++ b/components/PlatformDropdown.tsx
@@ -1,6 +1,7 @@
 import { Ionicons } from "@expo/vector-icons";
 import { BottomSheetScrollView } from "@gorhom/bottom-sheet";
 import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import { Platform, StyleSheet, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
@@ -209,6 +210,7 @@ const PlatformDropdownComponent = ({
  expoUIConfig,
  bottomSheetConfig,
 }: PlatformDropdownProps) => {
+  const { t } = useTranslation();
  const { showModal, hideModal, isVisible } = useGlobalModal();

  // Handle controlled open state for Android
@@ -380,7 +382,7 @@ const PlatformDropdownComponent = ({

  return (
    <TouchableOpacity onPress={handlePress} activeOpacity={0.7}>
-      {trigger || <Text className='text-white'>Open Menu</Text>}
+      {trigger || <Text className='text-white'>{t("common.open_menu")}</Text>}
    </TouchableOpacity>
  );
 };
--- a/components/PlayButton.tsx
+++ b/components/PlayButton.tsx
@@ -502,8 +502,8 @@ export const PlayButton: React.FC<Props> = ({
  return (
    <TouchableOpacity
      disabled={!item}
-      accessibilityLabel='Play button'
-      accessibilityHint='Tap to play the media'
+      accessibilityLabel={t("accessibility.play_button")}
+      accessibilityHint={t("accessibility.play_hint")}
      onPress={onPress}
      className={"relative flex-1"}
    >
--- a/components/PlayButton.tv.tsx
+++ b/components/PlayButton.tv.tsx
@@ -2,6 +2,7 @@ import { Ionicons } from "@expo/vector-icons";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { useAtom } from "jotai";
 import { useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import { TouchableOpacity, View } from "react-native";
 import Animated, {
  Easing,
@@ -36,6 +37,7 @@ export const PlayButton: React.FC<Props> = ({
  colors,
  ...props
 }: Props) => {
+  const { t } = useTranslation();
  const [globalColorAtom] = useAtom(itemThemeColorAtom);

  // Use colors prop if provided, otherwise fallback to global atom
@@ -168,8 +170,8 @@ export const PlayButton: React.FC<Props> = ({

  return (
    <TouchableOpacity
-      accessibilityLabel='Play button'
-      accessibilityHint='Tap to play the media'
+      accessibilityLabel={t("accessibility.play_button")}
+      accessibilityHint={t("accessibility.play_hint")}
      onPress={onPress}
      className={"relative"}
      {...props}
--- a/components/PlayInRemoteSession.tsx
+++ b/components/PlayInRemoteSession.tsx
@@ -6,6 +6,7 @@ import {
 import { getSessionApi } from "@jellyfin/sdk/lib/utils/api/session-api";
 import { useAtomValue } from "jotai";
 import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
 import {
  FlatList,
  Modal,
@@ -31,6 +32,7 @@ export const PlayInRemoteSessionButton: React.FC<Props> = ({
  const [modalVisible, setModalVisible] = useState(false);
  const api = useAtomValue(apiAtom);
  const { sessions, isLoading } = useAllSessions({} as useSessionsProps);
+  const { t } = useTranslation();
  const handlePlayInSession = async (sessionId: string) => {
    if (!api || !item.Id) return;

@@ -65,7 +67,9 @@ export const PlayInRemoteSessionButton: React.FC<Props> = ({
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <View style={styles.modalHeader}>
-              <Text style={styles.modalTitle}>Select Session</Text>
+              <Text style={styles.modalTitle}>
+                {t("home.sessions.select_session")}
+              </Text>
              <TouchableOpacity onPress={() => setModalVisible(false)}>
                <Ionicons name='close' size={24} color='white' />
              </TouchableOpacity>
@@ -78,7 +82,7 @@ export const PlayInRemoteSessionButton: React.FC<Props> = ({
                </View>
              ) : !sessions || sessions.length === 0 ? (
                <Text style={styles.noSessionsText}>
-                  No active sessions found
+                  {t("home.sessions.no_active_sessions")}
                </Text>
              ) : (
                <FlatList
@@ -98,7 +102,7 @@ export const PlayInRemoteSessionButton: React.FC<Props> = ({
                        </Text>
                        {session.NowPlayingItem && (
                          <Text style={styles.nowPlaying} numberOfLines={1}>
-                            Now playing:{" "}
+                            {t("home.sessions.now_playing")}{" "}
                            {session.NowPlayingItem.SeriesName
                              ? `${session.NowPlayingItem.SeriesName} :`
                              : ""}
--- a/components/TrackSheet.tsx
+++ b/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={
--- a/components/common/HeaderBackButton.tsx
+++ b/components/common/HeaderBackButton.tsx
@@ -1,6 +1,6 @@
-import { Ionicons } from "@expo/vector-icons";
+import { Feather } from "@expo/vector-icons";
 import { BlurView, type BlurViewProps } from "expo-blur";
-import { Platform } from "react-native";
+import { Keyboard, Platform } from "react-native";
 import { Pressable, type PressableProps } from "react-native-gesture-handler";
 import useRouter from "@/hooks/useAppRouter";

@@ -16,30 +16,37 @@ export const HeaderBackButton: React.FC<Props> = ({
 }) => {
  const router = useRouter();

+  // Dismiss the keyboard before navigating — otherwise it lingers over the
+  // previous screen (e.g. leaving the Jellyseerr login while typing).
+  const handleBack = () => {
+    Keyboard.dismiss();
+    router.back();
+  };
+
  if (Platform.OS === "ios") {
    return (
      <Pressable
-        onPress={() => router.back()}
+        onPress={handleBack}
        className='flex items-center justify-center w-9 h-9'
        {...pressableProps}
      >
-        <Ionicons name='arrow-back' size={24} color='white' />
+        <Feather name='chevron-left' size={28} color='white' />
      </Pressable>
    );
  }

  if (background === "transparent" && Platform.OS !== "android")
    return (
-      <Pressable onPress={() => router.back()} {...pressableProps}>
+      <Pressable onPress={handleBack} {...pressableProps}>
        <BlurView
          {...props}
          intensity={100}
          className='overflow-hidden rounded-full p-2'
        >
-          <Ionicons
+          <Feather
            className='drop-shadow-2xl'
-            name='arrow-back'
-            size={24}
+            name='chevron-left'
+            size={28}
            color='white'
          />
        </BlurView>
@@ -48,14 +55,17 @@ export const HeaderBackButton: React.FC<Props> = ({

  return (
    <Pressable
-      onPress={() => router.back()}
-      className=' rounded-full p-2'
+      onPress={handleBack}
+      // Match the Settings page back button: chevron flush to the edge with a
+      // 16px gap before the title (the old `p-2` pushed both arrow and title
+      // too far right). drop-shadow keeps it readable over images.
+      style={{ marginRight: 16 }}
      {...pressableProps}
    >
-      <Ionicons
+      <Feather
        className='drop-shadow-2xl'
-        name='arrow-back'
-        size={24}
+        name='chevron-left'
+        size={28}
        color='white'
      />
    </Pressable>
--- 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/downloads/DownloadCard.tsx
+++ b/components/downloads/DownloadCard.tsx
@@ -1,7 +1,7 @@
 import { Ionicons } from "@expo/vector-icons";
 import { Image } from "expo-image";
-import { t } from "i18next";
 import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import {
  ActivityIndicator,
  TouchableOpacity,
@@ -35,6 +35,7 @@ interface DownloadCardProps extends TouchableOpacityProps {
 }

 export const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
+  const { t } = useTranslation();
  const { cancelDownload } = useDownload();
  const router = useRouter();
  const queryClient = useNetworkAwareQueryClient();
@@ -173,7 +174,9 @@ export const DownloadCard = ({ process, ...props }: DownloadCardProps) => {

            {isTranscoding && (
              <View className='bg-purple-600/20 px-2 py-0.5 rounded-md mt-1 self-start'>
-                <Text className='text-xs text-purple-400'>Transcoding</Text>
+                <Text className='text-xs text-purple-400'>
+                  {t("home.downloads.transcoding")}
+                </Text>
              </View>
            )}

--- a/components/downloads/SeriesCard.tsx
+++ b/components/downloads/SeriesCard.tsx
@@ -16,9 +16,12 @@ export const SeriesCard: React.FC<{ items: BaseItemDto[] }> = ({ items }) => {
  const { showActionSheetWithOptions } = useActionSheet();
  const router = useRouter();

+  // Keyed on SeriesId so recycled FlashList cells re-read the correct poster
+  // instead of freezing the first-rendered series' image (empty deps bug).
  const base64Image = useMemo(() => {
-    return storage.getString(items[0].SeriesId!);
-  }, []);
+    const seriesId = items[0]?.SeriesId;
+    return seriesId ? storage.getString(seriesId) : undefined;
+  }, [items[0]?.SeriesId]);

  const deleteSeries = useCallback(
    async () =>
--- a/components/filters/FilterButton.tsx
+++ b/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}
--- a/components/filters/FilterSheet.tsx
+++ b/components/filters/FilterSheet.tsx
@@ -7,7 +7,14 @@ import {
 } from "@gorhom/bottom-sheet";
 import { isEqual } from "lodash";
 import type React from "react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { useTranslation } from "react-i18next";
 import {
  StyleSheet,
@@ -19,11 +26,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 +83,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();
@@ -84,19 +103,24 @@ 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 (!search) return _data;
+    if (!deferredSearch) return _data;
    const results = [];
    for (let i = 0; i < (_data?.length || 0); i++) {
-      if (_data && searchFilter?.(_data[i], search)) {
+      if (_data && searchFilter?.(_data[i], deferredSearch)) {
        results.push(_data[i]);
      }
    }
    return results.slice(0, 100);
-  }, [search, _data, searchFilter]);
+  }, [deferredSearch, _data, searchFilter]);

  useEffect(() => {
    if (!data || data.length === 0 || disableSearch) return;
@@ -127,21 +151,28 @@ 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);
    }
  }, []);

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

  const renderBackdrop = useCallback(
    (props: BottomSheetBackdropProps) => (
@@ -154,6 +185,54 @@ 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}
@@ -182,9 +261,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")}
@@ -203,43 +288,7 @@ export const FilterSheet = <T,>({
            }}
            className='mb-4 flex flex-col rounded-xl overflow-hidden'
          >
-            {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>
-            ))}
+            {renderedRows}
          </View>
          {data.length < (_data?.length || 0) && (
            <Button
--- a/components/filters/ResetFiltersButton.tsx
+++ b/components/filters/ResetFiltersButton.tsx
@@ -1,38 +1,24 @@
 import { Ionicons } from "@expo/vector-icons";
-import { useAtom } from "jotai";
 import { TouchableOpacity, type TouchableOpacityProps } from "react-native";
-import {
-  filterByAtom,
-  genreFilterAtom,
-  tagsFilterAtom,
-  yearFilterAtom,
-} from "@/utils/atoms/filters";
+import { useFilterReset } from "@/hooks/useFilterReset";

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

-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);
+export const ResetFiltersButton: React.FC<Props> = ({
+  libraryId,
+  ...props
+}) => {
+  const { hasActiveFilters, resetAllFilters } = useFilterReset(libraryId);

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

  return (
    <TouchableOpacity
-      onPress={() => {
-        setSelectedGenres([]);
-        setSelectedTags([]);
-        setSelectedYears([]);
-        setSelectedFilters([]);
-      }}
+      onPress={resetAllFilters}
      className='bg-purple-600 rounded-full w-[30px] h-[30px] flex items-center justify-center mr-1'
      {...props}
    >
--- 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/livetv/TVGuideProgramCell.tsx
+++ b/components/livetv/TVGuideProgramCell.tsx
@@ -1,5 +1,6 @@
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import React from "react";
+import { useTranslation } from "react-i18next";
 import { Animated, Pressable, StyleSheet, View } from "react-native";
 import { Text } from "@/components/common/Text";
 import { useTVFocusAnimation } from "@/components/tv/hooks/useTVFocusAnimation";
@@ -22,6 +23,7 @@ export const TVGuideProgramCell: React.FC<TVGuideProgramCellProps> = ({
  disabled = false,
  refSetter,
 }) => {
+  const { t } = useTranslation();
  const typography = useScaledTVTypography();
  const { focused, handleFocus, handleBlur } = useTVFocusAnimation({
    scaleAmount: 1,
@@ -68,7 +70,7 @@ export const TVGuideProgramCell: React.FC<TVGuideProgramCellProps> = ({
            <Text
              style={[styles.liveBadgeText, { fontSize: typography.callout }]}
            >
-              LIVE
+              {t("player.live")}
            </Text>
          </View>
        )}
--- a/components/livetv/TVLiveTVPage.tsx
+++ b/components/livetv/TVLiveTVPage.tsx
@@ -235,7 +235,7 @@ export const TVLiveTVPage: React.FC = () => {
            marginBottom: 24,
          }}
        >
-          Live TV
+          {t("live_tv.title")}
        </Text>

        {/* Tab Bar */}
--- a/components/login/Login.tsx
+++ b/components/login/Login.tsx
@@ -3,7 +3,7 @@ import type { PublicSystemInfo } from "@jellyfin/sdk/lib/generated-client";
 import { Image } from "expo-image";
 import { useLocalSearchParams, useNavigation } from "expo-router";
 import { t } from "i18next";
-import { useAtomValue } from "jotai";
+import { useAtomValue, useSetAtom } from "jotai";
 import { useCallback, useEffect, useState } from "react";
 import {
  Alert,
@@ -20,14 +20,16 @@ import { Button } from "@/components/Button";
 import { Input } from "@/components/common/Input";
 import { Text } from "@/components/common/Text";
 import JellyfinServerDiscovery from "@/components/JellyfinServerDiscovery";
+import { QuickConnectCodeModal } from "@/components/login/QuickConnectCodeModal";
 import { PreviousServersList } from "@/components/PreviousServersList";
-import { SaveAccountModal } from "@/components/SaveAccountModal";
 import { Colors } from "@/constants/Colors";
-import { apiAtom, useJellyfin } from "@/providers/JellyfinProvider";
-import type {
-  AccountSecurityType,
-  SavedServer,
-} from "@/utils/secureCredentials";
+import {
+  apiAtom,
+  pendingAccountSaveAtom,
+  useJellyfin,
+  userAtom,
+} from "@/providers/JellyfinProvider";
+import type { SavedServer } from "@/utils/secureCredentials";

 const CredentialsSchema = z.object({
  username: z.string().min(1, t("login.username_required")),
@@ -37,14 +39,17 @@ export const Login: React.FC = () => {
  const api = useAtomValue(apiAtom);
  const navigation = useNavigation();
  const params = useLocalSearchParams();
+  const user = useAtomValue(userAtom);
  const {
    setServer,
    login,
    removeServer,
    initiateQuickConnect,
+    stopQuickConnectPolling,
    loginWithSavedCredential,
    loginWithPassword,
  } = useJellyfin();
+  const setPendingAccountSave = useSetAtom(pendingAccountSaveAtom);

  const {
    apiUrl: _apiUrl,
@@ -64,13 +69,43 @@ export const Login: React.FC = () => {
    password: _password || "",
  });

-  // Save account state
+  // Quick Connect code shown in the in-app sheet while polling for authorization
+  const [quickConnectCode, setQuickConnectCode] = useState<string | null>(null);
+
+  // Close the code sheet as soon as the session is authorized — the native
+  // Alert used before had no programmatic dismiss and stayed open after login.
+  // A Quick Connect login with "save account" on flags the post-login save:
+  // the protection picker shows globally once the session exists (this screen
+  // unmounts on login, so it can't host the modal).
+  useEffect(() => {
+    if (user) {
+      if (quickConnectCode && saveAccount) {
+        setPendingAccountSave({ serverName });
+      }
+      setQuickConnectCode(null);
+    }
+  }, [user]);
+
+  // Stop Quick Connect polling when leaving the login page (parity with TVLogin)
+  useEffect(() => {
+    return () => {
+      stopQuickConnectPolling();
+    };
+  }, [stopQuickConnectPolling]);
+
+  // Going back to server selection keeps this component mounted (same screen,
+  // different state), so the unmount cleanup above doesn't run. Without this a
+  // code authorized after leaving would silently log the user in later.
+  useEffect(() => {
+    if (!api?.basePath) {
+      stopQuickConnectPolling();
+      setQuickConnectCode(null);
+    }
+  }, [api?.basePath, stopQuickConnectPolling]);
+
+  // Save account state — only the intent lives here; the protection picker is
+  // the global PendingAccountSaveModal, shown after the login succeeds.
  const [saveAccount, setSaveAccount] = useState(false);
-  const [showSaveModal, setShowSaveModal] = useState(false);
-  const [pendingLogin, setPendingLogin] = useState<{
-    username: string;
-    password: string;
-  } | null>(null);

  // Handle URL params for server connection
  useEffect(() => {
@@ -117,55 +152,34 @@ export const Login: React.FC = () => {
    const result = CredentialsSchema.safeParse(credentials);
    if (!result.success) return;

-    if (saveAccount) {
-      setPendingLogin({
-        username: credentials.username,
-        password: credentials.password,
-      });
-      setShowSaveModal(true);
-    } else {
-      await performLogin(credentials.username, credentials.password);
+    const ok = await performLogin(credentials.username, credentials.password);
+    // The protection picker shows AFTER a successful login (global modal) —
+    // never for a failed one.
+    if (ok && saveAccount) {
+      setPendingAccountSave({ serverName });
    }
  };

  const performLogin = async (
    username: string,
    password: string,
-    options?: {
-      saveAccount?: boolean;
-      securityType?: AccountSecurityType;
-      pinCode?: string;
-    },
-  ) => {
+  ): Promise<boolean> => {
    setLoading(true);
    try {
-      await login(username, password, serverName, options);
+      await login(username, password, serverName);
+      return true;
    } catch (error) {
      if (error instanceof Error) {
        Alert.alert(t("login.connection_failed"), error.message);
      } else {
        Alert.alert(
          t("login.connection_failed"),
-          t("login.an_unexpected_error_occured"),
+          t("login.an_unexpected_error_occurred"),
        );
      }
+      return false;
    } finally {
      setLoading(false);
-      setPendingLogin(null);
-    }
-  };
-
-  const handleSaveAccountConfirm = async (
-    securityType: AccountSecurityType,
-    pinCode?: string,
-  ) => {
-    setShowSaveModal(false);
-    if (pendingLogin) {
-      await performLogin(pendingLogin.username, pendingLogin.password, {
-        saveAccount: true,
-        securityType,
-        pinCode,
-      });
    }
  };

@@ -259,15 +273,7 @@ export const Login: React.FC = () => {
    try {
      const code = await initiateQuickConnect();
      if (code) {
-        Alert.alert(
-          t("login.quick_connect"),
-          t("login.enter_code_to_login", { code: code }),
-          [
-            {
-              text: t("login.got_it"),
-            },
-          ],
-        );
+        setQuickConnectCode(code);
      }
    } catch (_error) {
      Alert.alert(
@@ -402,7 +408,7 @@ export const Login: React.FC = () => {
                {t("server.enter_url_to_jellyfin_server")}
              </Text>
              <Input
-                aria-label='Server URL'
+                aria-label={t("server.server_url")}
                placeholder={t("server.server_url_placeholder")}
                onChangeText={setServerURL}
                value={serverURL}
@@ -444,14 +450,11 @@ export const Login: React.FC = () => {
        )}
      </KeyboardAvoidingView>

-      <SaveAccountModal
-        visible={showSaveModal}
-        onClose={() => {
-          setShowSaveModal(false);
-          setPendingLogin(null);
-        }}
-        onSave={handleSaveAccountConfirm}
-        username={pendingLogin?.username || credentials.username}
+      {/* Dismissing only hides the code — polling continues so the login still
+          completes if the code is authorized from another device afterwards. */}
+      <QuickConnectCodeModal
+        code={quickConnectCode}
+        onClose={() => setQuickConnectCode(null)}
      />
    </SafeAreaView>
  );
--- a/components/login/QuickConnectCodeModal.tsx
+++ b/components/login/QuickConnectCodeModal.tsx
@@ -0,0 +1,137 @@
+import { Ionicons } from "@expo/vector-icons";
+import {
+  BottomSheetBackdrop,
+  type BottomSheetBackdropProps,
+  BottomSheetModal,
+  BottomSheetView,
+} from "@gorhom/bottom-sheet";
+import { requireOptionalNativeModule } from "expo-modules-core";
+import type React from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { toast } from "sonner-native";
+import { Button } from "../Button";
+import { Text } from "../common/Text";
+
+interface Props {
+  /** The Quick Connect code to display, or null when hidden. */
+  code: string | null;
+  onClose: () => void;
+}
+
+/**
+ * Shows the Quick Connect code while the app polls for authorization.
+ * In-app sheet instead of a native Alert so it can dismiss itself once the
+ * session is authorized — a native alert has no programmatic dismiss and
+ * lingers over the app after login completes.
+ */
+export const QuickConnectCodeModal: React.FC<Props> = ({ code, onClose }) => {
+  const { t } = useTranslation();
+  const insets = useSafeAreaInsets();
+  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+  const snapPoints = useMemo(() => ["50%"], []);
+  const isPresentedRef = useRef(false);
+
+  // Keep the last code around so the dismiss animation doesn't flash empty
+  // when the parent clears the code to close the sheet.
+  const lastCodeRef = useRef<string | null>(null);
+  if (code) lastCodeRef.current = code;
+
+  useEffect(() => {
+    if (code) {
+      bottomSheetModalRef.current?.present();
+    } else if (isPresentedRef.current) {
+      bottomSheetModalRef.current?.dismiss();
+      isPresentedRef.current = false;
+    }
+  }, [code]);
+
+  const handleSheetChanges = useCallback(
+    (index: number) => {
+      if (index >= 0) {
+        isPresentedRef.current = true;
+      } else if (index === -1 && isPresentedRef.current) {
+        isPresentedRef.current = false;
+        onClose();
+      }
+    },
+    [onClose],
+  );
+
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...props}
+        disappearsOnIndex={-1}
+        appearsOnIndex={0}
+      />
+    ),
+    [],
+  );
+
+  const copyCode = useCallback(async () => {
+    const value = code ?? lastCodeRef.current;
+    if (!value) return;
+    // Builds that don't ship the expo-clipboard native module yet: probe with
+    // requireOptionalNativeModule (returns null instead of throwing/logging)
+    // and skip — importing the JS wrapper there would error out.
+    if (!requireOptionalNativeModule("ExpoClipboard")) return;
+    const Clipboard = await import("expo-clipboard");
+    await Clipboard.setStringAsync(value);
+    toast.success(t("login.code_copied"));
+  }, [code, t]);
+
+  return (
+    <BottomSheetModal
+      ref={bottomSheetModalRef}
+      snapPoints={snapPoints}
+      onChange={handleSheetChanges}
+      handleIndicatorStyle={{ backgroundColor: "white" }}
+      backgroundStyle={{ backgroundColor: "#171717" }}
+      backdropComponent={renderBackdrop}
+    >
+      <BottomSheetView
+        style={{
+          flex: 1,
+          paddingLeft: Math.max(16, insets.left),
+          paddingRight: Math.max(16, insets.right),
+          paddingBottom: Math.max(16, insets.bottom),
+        }}
+      >
+        <View className='flex-1'>
+          <Text className='font-bold text-2xl text-neutral-100'>
+            {t("login.quick_connect")}
+          </Text>
+          <TouchableOpacity
+            className='mt-6 p-6 border border-neutral-800 rounded-xl bg-neutral-900 flex flex-row items-center justify-center'
+            onPress={copyCode}
+          >
+            <Text
+              className='text-center font-bold text-5xl text-neutral-100'
+              style={{ letterSpacing: 10 }}
+            >
+              {code ?? lastCodeRef.current}
+            </Text>
+            <Ionicons
+              name='copy-outline'
+              size={22}
+              color='white'
+              style={{ opacity: 0.4, marginLeft: 16 }}
+            />
+          </TouchableOpacity>
+          <Text className='mt-2 text-neutral-500 text-center text-xs'>
+            {t("login.tap_code_to_copy")}
+          </Text>
+          <Text className='mt-3 mb-5 text-neutral-400 text-center px-4'>
+            {t("login.quick_connect_instructions")}
+          </Text>
+          <Button className='mt-auto' color='purple' onPress={onClose}>
+            {t("login.got_it")}
+          </Button>
+        </View>
+      </BottomSheetView>
+    </BottomSheetModal>
+  );
+};
--- a/components/login/TVLogin.tsx
+++ b/components/login/TVLogin.tsx
@@ -437,7 +437,7 @@ export const TVLogin: React.FC = () => {
      } else {
        Alert.alert(
          t("login.connection_failed"),
-          t("login.an_unexpected_error_occured"),
+          t("login.an_unexpected_error_occurred"),
        );
      }
    } finally {
@@ -499,7 +499,7 @@ export const TVLogin: React.FC = () => {
        const message =
          error instanceof Error
            ? error.message
-            : t("login.an_unexpected_error_occured");
+            : t("login.an_unexpected_error_occurred");
        Alert.alert(t("login.connection_failed"), message);
        goToQRScreen();
      } finally {
@@ -523,7 +523,7 @@ export const TVLogin: React.FC = () => {
        } else {
          Alert.alert(
            t("login.connection_failed"),
-            t("login.an_unexpected_error_occured"),
+            t("login.an_unexpected_error_occurred"),
          );
        }
      } finally {
@@ -768,7 +768,7 @@ export const TVLogin: React.FC = () => {
              const message =
                error instanceof Error
                  ? error.message
-                  : t("login.an_unexpected_error_occured");
+                  : t("login.an_unexpected_error_occurred");
              Alert.alert(t("login.connection_failed"), message);
              goToQRScreen();
            });
--- a/components/search/TVSearchTabBadges.tsx
+++ b/components/search/TVSearchTabBadges.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
 import { Animated, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
 import { useTVFocusAnimation } from "@/components/tv/hooks/useTVFocusAnimation";
@@ -88,6 +89,8 @@ export const TVSearchTabBadges: React.FC<TVSearchTabBadgesProps> = ({
  showDiscover,
  disabled = false,
 }) => {
+  const { t } = useTranslation();
+
  if (!showDiscover) {
    return null;
  }
@@ -101,13 +104,13 @@ export const TVSearchTabBadges: React.FC<TVSearchTabBadgesProps> = ({
      }}
    >
      <TVSearchTabBadge
-        label='Library'
+        label={t("search.library")}
        isSelected={searchType === "Library"}
        onPress={() => setSearchType("Library")}
        disabled={disabled}
      />
      <TVSearchTabBadge
-        label='Discover'
+        label={t("search.discover")}
        isSelected={searchType === "Discover"}
        onPress={() => setSearchType("Discover")}
        disabled={disabled}
--- 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/Jellyseerr.tsx
+++ b/components/settings/Jellyseerr.tsx
@@ -20,7 +20,10 @@ export const JellyseerrSettings = () => {
  const { t } = useTranslation();

  const [user] = useAtom(userAtom);
-  const { settings, updateSettings } = useSettings();
+  const { settings, updateSettings, pluginSettings } = useSettings();
+  // Only the server URL is admin-lockable — the password stays editable so
+  // the user can still sign in to the admin-pinned Jellyseerr server.
+  const urlLocked = pluginSettings?.jellyseerrServerUrl?.locked === true;

  const [jellyseerrPassword, setJellyseerrPassword] = useState<
    string | undefined
@@ -115,30 +118,41 @@ export const JellyseerrSettings = () => {
          </>
        ) : (
          <View className='flex flex-col rounded-xl overflow-hidden p-4 bg-neutral-900'>
-            <Text className='font-bold mb-1'>
-              {t("home.settings.plugins.jellyseerr.server_url")}
-            </Text>
-            <View className='flex flex-col shrink mb-2'>
-              <Text className='text-xs text-gray-600'>
-                {t("home.settings.plugins.jellyseerr.server_url_hint")}
+            <View style={{ opacity: urlLocked ? 0.5 : 1 }}>
+              <Text className='font-bold mb-1'>
+                {t("home.settings.plugins.jellyseerr.server_url")}
              </Text>
-            </View>
-            <Input
-              className='border border-neutral-800 mb-2'
-              placeholder={t(
-                "home.settings.plugins.jellyseerr.server_url_placeholder",
+              <View className='flex flex-col shrink mb-2'>
+                <Text className='text-xs text-gray-600'>
+                  {t("home.settings.plugins.jellyseerr.server_url_hint")}
+                </Text>
+              </View>
+              <Input
+                className='border border-neutral-800 mb-2'
+                placeholder={t(
+                  "home.settings.plugins.jellyseerr.server_url_placeholder",
+                )}
+                value={
+                  urlLocked
+                    ? settings?.jellyseerrServerUrl
+                    : (jellyseerrServerUrl ?? settings?.jellyseerrServerUrl)
+                }
+                defaultValue={
+                  settings?.jellyseerrServerUrl ?? jellyseerrServerUrl
+                }
+                keyboardType='url'
+                returnKeyType='done'
+                autoCapitalize='none'
+                textContentType='URL'
+                onChangeText={setjellyseerrServerUrl}
+                editable={!urlLocked && !loginToJellyseerrMutation.isPending}
+              />
+              {urlLocked && (
+                <Text className='text-xs text-red-600 mb-2'>
+                  Disabled by admin
+                </Text>
              )}
-              value={jellyseerrServerUrl ?? settings?.jellyseerrServerUrl}
-              defaultValue={
-                settings?.jellyseerrServerUrl ?? jellyseerrServerUrl
-              }
-              keyboardType='url'
-              returnKeyType='done'
-              autoCapitalize='none'
-              textContentType='URL'
-              onChangeText={setjellyseerrServerUrl}
-              editable={!loginToJellyseerrMutation.isPending}
-            />
+            </View>
            <View>
              <Text className='font-bold mb-2'>
                {t("home.settings.plugins.jellyseerr.password")}
--- a/components/settings/KefinTweaks.tsx
+++ b/components/settings/KefinTweaks.tsx
@@ -1,33 +1,28 @@
 import { useTranslation } from "react-i18next";
-import { Switch, Text, 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";

 export const KefinTweaksSettings = () => {
-  const { settings, updateSettings } = useSettings();
+  const { settings, updateSettings, pluginSettings } = useSettings();
  const { t } = useTranslation();

  const isEnabled = settings?.useKefinTweaks ?? false;
+  const locked = pluginSettings?.useKefinTweaks?.locked === true;

  return (
-    <View className=''>
-      <View className='flex flex-col rounded-xl overflow-hidden p-4 bg-neutral-900'>
-        <Text className='text-xs text-red-600 mb-2'>
-          {t("home.settings.plugins.kefinTweaks.watchlist_enabler")}
-        </Text>
-
-        <View className='flex flex-row items-center justify-between mt-2'>
-          <Text className='text-white'>
-            {isEnabled ? t("Watchlist On") : t("Watchlist Off")}
-          </Text>
-
-          <Switch
-            value={isEnabled}
-            onValueChange={(value) => updateSettings({ useKefinTweaks: value })}
-            trackColor={{ false: "#555", true: "purple" }}
-            thumbColor={isEnabled ? "#fff" : "#ccc"}
-          />
-        </View>
-      </View>
-    </View>
+    <ListGroup>
+      <ListItem
+        title={t("home.settings.plugins.kefinTweaks.watchlist_enabler")}
+        disabledByAdmin={locked}
+      >
+        <SettingSwitch
+          value={isEnabled}
+          disabled={locked}
+          onValueChange={(value) => updateSettings({ useKefinTweaks: value })}
+        />
+      </ListItem>
+    </ListGroup>
  );
 };
--- 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,8 @@
 import { Ionicons } from "@expo/vector-icons";
 import { useMemo } from "react";
-import { Platform, Switch, View, type ViewProps } from "react-native";
+import { useTranslation } from "react-i18next";
+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";
@@ -17,20 +19,21 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
  const isTv = Platform.isTV;
  const media = useMedia();
  const { settings, updateSettings } = media;
+  const { t } = useTranslation();

  const alignXOptions: AlignX[] = ["left", "center", "right"];
  const alignYOptions: AlignY[] = ["top", "center", "bottom"];

  const alignXLabels: Record<AlignX, string> = {
-    left: "Left",
-    center: "Center",
-    right: "Right",
+    left: t("home.settings.subtitles.align.left"),
+    center: t("home.settings.subtitles.align.center"),
+    right: t("home.settings.subtitles.align.right"),
  };

  const alignYLabels: Record<AlignY, string> = {
-    top: "Top",
-    center: "Center",
-    bottom: "Bottom",
+    top: t("home.settings.subtitles.align.top"),
+    center: t("home.settings.subtitles.align.center"),
+    bottom: t("home.settings.subtitles.align.bottom"),
  };

  const alignXOptionGroups = useMemo(() => {
@@ -60,16 +63,18 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
  return (
    <View {...props}>
      <ListGroup
-        title='MPV Subtitle Settings'
+        title={t("home.settings.subtitles.mpv_settings_title")}
        description={
          <Text className='text-[#8E8D91] text-xs'>
-            Advanced subtitle customization for MPV player
+            {t("home.settings.subtitles.mpv_settings_description")}
          </Text>
        }
      >
        {!isTv && (
          <>
-            <ListItem title='Vertical Margin'>
+            <ListItem
+              title={t("home.settings.subtitles.mpv_subtitle_margin_y")}
+            >
              <Stepper
                value={settings.mpvSubtitleMarginY ?? 0}
                step={5}
@@ -81,7 +86,7 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
              />
            </ListItem>

-            <ListItem title='Horizontal Alignment'>
+            <ListItem title={t("home.settings.subtitles.mpv_subtitle_align_x")}>
              <PlatformDropdown
                groups={alignXOptionGroups}
                trigger={
@@ -96,11 +101,11 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
                    />
                  </View>
                }
-                title='Horizontal Alignment'
+                title={t("home.settings.subtitles.mpv_subtitle_align_x")}
              />
            </ListItem>

-            <ListItem title='Vertical Alignment'>
+            <ListItem title={t("home.settings.subtitles.mpv_subtitle_align_y")}>
              <PlatformDropdown
                groups={alignYOptionGroups}
                trigger={
@@ -115,14 +120,14 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
                    />
                  </View>
                }
-                title='Vertical Alignment'
+                title={t("home.settings.subtitles.mpv_subtitle_align_y")}
              />
            </ListItem>
          </>
        )}

-        <ListItem title='Opaque Background'>
-          <Switch
+        <ListItem title={t("home.settings.subtitles.opaque_background")}>
+          <SettingSwitch
            value={settings.mpvSubtitleBackgroundEnabled ?? false}
            onValueChange={(value) =>
              updateSettings({ mpvSubtitleBackgroundEnabled: value })
@@ -131,7 +136,7 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
        </ListItem>

        {settings.mpvSubtitleBackgroundEnabled && (
-          <ListItem title='Background Opacity'>
+          <ListItem title={t("home.settings.subtitles.background_opacity")}>
            <Stepper
              value={settings.mpvSubtitleBackgroundOpacity ?? 75}
              step={5}
--- 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/PluginSettings.tsx
+++ b/components/settings/PluginSettings.tsx
@@ -20,12 +20,7 @@ export const PluginSettings = () => {
    >
      <ListItem
        onPress={() => router.push("/settings/plugins/jellyseerr/page")}
-        title={"Jellyseerr"}
-        showArrow
-      />
-      <ListItem
-        onPress={() => router.push("/settings/plugins/marlin-search/page")}
-        title='Marlin Search'
+        title='Jellyseerr'
        showArrow
      />
      <ListItem
@@ -33,6 +28,11 @@ export const PluginSettings = () => {
        title='Streamystats'
        showArrow
      />
+      <ListItem
+        onPress={() => router.push("/settings/plugins/marlin-search/page")}
+        title='Marlin Search'
+        showArrow
+      />
      <ListItem
        onPress={() => router.push("/settings/plugins/kefinTweaks/page")}
        title='KefinTweaks'
--- a/components/settings/QuickConnect.tsx
+++ b/components/settings/QuickConnect.tsx
@@ -1,3 +1,4 @@
+import { Feather } from "@expo/vector-icons";
 import {
  BottomSheetBackdrop,
  type BottomSheetBackdropProps,
@@ -5,11 +6,13 @@ import {
  BottomSheetView,
 } from "@gorhom/bottom-sheet";
 import { getQuickConnectApi } from "@jellyfin/sdk/lib/utils/api";
+import { requireOptionalNativeModule } from "expo-modules-core";
 import { useAtom } from "jotai";
 import type React from "react";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Alert, Platform, View, type ViewProps } from "react-native";
+import { Pressable } from "react-native-gesture-handler";
 import { useHaptic } from "@/hooks/useHaptic";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { Button } from "../Button";
@@ -58,7 +61,7 @@ export const QuickConnect: React.FC<Props> = ({ ...props }) => {
          successHapticFeedback();
          Alert.alert(
            t("home.settings.quick_connect.success"),
-            t("home.settings.quick_connect.quick_connect_autorized"),
+            t("home.settings.quick_connect.quick_connect_authorized"),
          );
          setQuickConnectCode(undefined);
          bottomSheetModalRef?.current?.close();
@@ -79,6 +82,15 @@ export const QuickConnect: React.FC<Props> = ({ ...props }) => {
    }
  }, [api, user, quickConnectCode]);

+  const pasteCode = useCallback(async () => {
+    // Builds without the expo-clipboard native module: probe first (no-op).
+    if (!requireOptionalNativeModule("ExpoClipboard")) return;
+    const Clipboard = await import("expo-clipboard");
+    const text = await Clipboard.getStringAsync();
+    const digits = (text || "").replace(/\D/g, "").slice(0, 6);
+    if (digits) setQuickConnectCode(digits);
+  }, []);
+
  if (isTv) return null;

  return (
@@ -130,6 +142,15 @@ export const QuickConnect: React.FC<Props> = ({ ...props }) => {
                  style={{ paddingHorizontal: 16 }}
                  autoFocus
                />
+                <Pressable
+                  onPress={pasteCode}
+                  className='flex-row items-center justify-center self-center'
+                >
+                  <Feather name='clipboard' size={15} color='#a3a3a3' />
+                  <Text className='text-neutral-400 ml-2'>
+                    {t("home.settings.quick_connect.paste_code")}
+                  </Text>
+                </Pressable>
              </View>
            </View>
            <Button
--- a/components/settings/StorageSettings.tsx
+++ b/components/settings/StorageSettings.tsx
@@ -1,6 +1,6 @@
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
-import { Platform, View } from "react-native";
+import { Alert, Platform, View } from "react-native";
 import { toast } from "sonner-native";
 import { Text } from "@/components/common/Text";
 import { Colors } from "@/constants/Colors";
@@ -12,6 +12,7 @@ import { ListItem } from "../list/ListItem";
 export const StorageSettings = () => {
  const { deleteAllFiles, appSizeUsage } = useDownload();
  const { t } = useTranslation();
+  const queryClient = useQueryClient();
  const successHapticFeedback = useHaptic("success");
  const errorHapticFeedback = useHaptic("error");

@@ -27,16 +28,38 @@ export const StorageSettings = () => {
        used: (app.total - app.remaining) / app.total,
      };
    },
+    // Keep the bar moving while a download is writing to disk.
+    refetchInterval: 10 * 1000,
  });

-  const onDeleteClicked = async () => {
-    try {
-      await deleteAllFiles();
-      successHapticFeedback();
-    } catch (_e) {
-      errorHapticFeedback();
-      toast.error(t("home.settings.toasts.error_deleting_files"));
-    }
+  const onDeleteClicked = () => {
+    Alert.alert(
+      t("home.settings.storage.delete_all_downloaded_files_confirm"),
+      t("home.settings.storage.delete_all_downloaded_files_confirm_desc"),
+      [
+        {
+          text: t("common.cancel"),
+          style: "cancel",
+        },
+        {
+          text: t("common.ok"),
+          style: "destructive",
+          onPress: async () => {
+            try {
+              await deleteAllFiles();
+              successHapticFeedback();
+            } catch (_e) {
+              errorHapticFeedback();
+              toast.error(t("home.settings.toasts.error_deleting_files"));
+            } finally {
+              // Reflect the freed space immediately instead of waiting for
+              // the next poll.
+              queryClient.invalidateQueries({ queryKey: ["appSize"] });
+            }
+          },
+        },
+      ],
+    );
  };

  const calculatePercentage = (value: number, total: number) => {
@@ -102,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/components/tv/TVPosterCard.tsx
+++ b/components/tv/TVPosterCard.tsx
@@ -3,6 +3,7 @@ import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { Image } from "expo-image";
 import { useAtomValue } from "jotai";
 import React, { useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
 import {
  Animated,
  Easing,
@@ -106,6 +107,7 @@ export const TVPosterCard: React.FC<TVPosterCardProps> = ({
  scaleAmount = 1.05,
  imageUrlGetter,
 }) => {
+  const { t } = useTranslation();
  const api = useAtomValue(apiAtom);
  const posterSizes = useScaledTVPosterSizes();
  const typography = useScaledTVTypography();
@@ -371,7 +373,7 @@ export const TVPosterCard: React.FC<TVPosterCardProps> = ({
          fontWeight: "700",
        }}
      >
-        Now Playing
+        {t("music.now_playing")}
      </Text>
    </View>
  ) : null;
--- a/components/tv/TVSubtitleResultCard.tsx
+++ b/components/tv/TVSubtitleResultCard.tsx
@@ -1,5 +1,6 @@
 import { Ionicons } from "@expo/vector-icons";
 import React from "react";
+import { useTranslation } from "react-i18next";
 import {
  ActivityIndicator,
  Animated,
@@ -28,6 +29,7 @@ export const TVSubtitleResultCard = React.forwardRef<
  const styles = createStyles(typography);
  const { focused, handleFocus, handleBlur, animatedStyle } =
    useTVFocusAnimation({ scaleAmount: 1.03 });
+  const { t } = useTranslation();

  return (
    <Pressable
@@ -152,7 +154,7 @@ export const TVSubtitleResultCard = React.forwardRef<
                },
              ]}
            >
-              <Text style={styles.flagText}>Hash Match</Text>
+              <Text style={styles.flagText}>{t("player.hash_match")}</Text>
            </View>
          )}
          {result.hearingImpaired && (
--- a/components/video-player/controls/BottomControls.tsx
+++ b/components/video-player/controls/BottomControls.tsx
@@ -183,7 +183,7 @@ export const BottomControls: FC<BottomControlsProps> = ({
          <SkipButton
            showButton={showSkipButton}
            onPress={skipIntro}
-            buttonText='Skip Intro'
+            buttonText={t("player.skip_intro")}
          />
          {/* Smart Skip Credits behavior:
              - Show "Skip Credits" if there's content after credits OR no next episode
@@ -193,7 +193,7 @@ export const BottomControls: FC<BottomControlsProps> = ({
              showSkipCreditButton && (hasContentAfterCredits || !nextItem)
            }
            onPress={skipCredit}
-            buttonText='Skip Credits'
+            buttonText={t("player.skip_credits")}
          />
          {settings.autoPlayNextEpisode !== false &&
            (settings.maxAutoPlayEpisodeCount.value === -1 ||
--- a/components/video-player/controls/ContinueWatchingOverlay.tsx
+++ b/components/video-player/controls/ContinueWatchingOverlay.tsx
@@ -27,7 +27,7 @@ const ContinueWatchingOverlay: React.FC<ContinueWatchingOverlayProps> = ({
      }
    >
      <Text className='text-2xl font-bold text-white py-4 '>
-        Are you still watching ?
+        {t("player.still_watching")}
      </Text>
      <Button
        onPress={() => {
--- a/components/video-player/controls/HeaderControls.tsx
+++ b/components/video-player/controls/HeaderControls.tsx
@@ -4,6 +4,7 @@ import type {
  MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client";
 import { type FC, useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { Platform, TouchableOpacity, View } from "react-native";
 import useRouter from "@/hooks/useAppRouter";
 import { useControlsSafeAreaInsets } from "@/hooks/useControlsSafeAreaInsets";
@@ -57,6 +58,7 @@ export const HeaderControls: FC<HeaderControlsProps> = ({
  showTechnicalInfo = false,
  onToggleTechnicalInfo,
 }) => {
+  const { t } = useTranslation();
  const router = useRouter();
  const insets = useControlsSafeAreaInsets();
  const lightHapticFeedback = useHaptic("light");
@@ -127,8 +129,8 @@ export const HeaderControls: FC<HeaderControlsProps> = ({
            onPress={toggleOrientation}
            disabled={isTogglingOrientation}
            className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
-            accessibilityLabel='Toggle screen orientation'
-            accessibilityHint='Toggles the screen orientation between portrait and landscape'
+            accessibilityLabel={t("accessibility.toggle_orientation")}
+            accessibilityHint={t("accessibility.toggle_orientation_hint")}
          >
            <MaterialIcons
              name='screen-rotation'
--- a/components/video-player/controls/TechnicalInfoOverlay.tsx
+++ b/components/video-player/controls/TechnicalInfoOverlay.tsx
@@ -7,6 +7,7 @@ import {
  useMemo,
  useState,
 } from "react";
+import { useTranslation } from "react-i18next";
 import { Platform, StyleSheet, Text, View } from "react-native";
 import Animated, {
  Easing,
@@ -184,6 +185,7 @@ export const TechnicalInfoOverlay: FC<TechnicalInfoOverlayProps> = memo(
    currentAudioIndex,
  }) => {
    const typography = useScaledTVTypography();
+    const { t } = useTranslation();
    const insets = useSafeAreaInsets();
    const safeInsets = useControlsSafeAreaInsets();
    const [info, setInfo] = useState<TechnicalInfo | null>(null);
@@ -312,13 +314,13 @@ export const TechnicalInfoOverlay: FC<TechnicalInfoOverlayProps> = memo(
          )}
          {info?.videoCodec && (
            <Text style={textStyle}>
-              Video: {formatCodec(info.videoCodec)}
+              {t("player.technical_info.video")} {formatCodec(info.videoCodec)}
              {info.fps ? ` @ ${formatFps(info.fps)} fps` : ""}
            </Text>
          )}
          {info?.audioCodec && (
            <Text style={textStyle}>
-              Audio: {formatCodec(info.audioCodec)}
+              {t("player.technical_info.audio")} {formatCodec(info.audioCodec)}
              {streamInfo?.audioChannels
                ? ` ${formatAudioChannels(streamInfo.audioChannels)}`
                : ""}
@@ -326,12 +328,13 @@ export const TechnicalInfoOverlay: FC<TechnicalInfoOverlayProps> = memo(
          )}
          {streamInfo?.subtitleCodec && (
            <Text style={textStyle}>
-              Subtitle: {formatCodec(streamInfo.subtitleCodec)}
+              {t("player.technical_info.subtitle")}{" "}
+              {formatCodec(streamInfo.subtitleCodec)}
            </Text>
          )}
          {(info?.videoBitrate || info?.audioBitrate) && (
            <Text style={textStyle}>
-              Bitrate:{" "}
+              {t("player.technical_info.bitrate")}{" "}
              {info.videoBitrate
                ? formatBitrate(info.videoBitrate)
                : info.audioBitrate
@@ -341,21 +344,27 @@ export const TechnicalInfoOverlay: FC<TechnicalInfoOverlayProps> = memo(
          )}
          {info?.cacheSeconds !== undefined && (
            <Text style={textStyle}>
-              Buffer: {info.cacheSeconds.toFixed(1)}s
+              {t("player.technical_info.buffer_seconds", {
+                seconds: info.cacheSeconds.toFixed(1),
+              })}
            </Text>
          )}
          {info?.voDriver && (
            <Text style={textStyle}>
-              VO: {info.voDriver}
+              {t("player.technical_info.vo")} {info.voDriver}
              {info.hwdec ? ` / ${info.hwdec}` : ""}
            </Text>
          )}
          {info?.droppedFrames !== undefined && info.droppedFrames > 0 && (
            <Text style={[textStyle, styles.warningText]}>
-              Dropped: {info.droppedFrames} frames
+              {t("player.technical_info.dropped_frames", {
+                count: info.droppedFrames,
+              })}
            </Text>
          )}
-          {!info && !playMethod && <Text style={textStyle}>Loading...</Text>}
+          {!info && !playMethod && (
+            <Text style={textStyle}>{t("player.technical_info.loading")}</Text>
+          )}
        </View>
      </Animated.View>
    );
--- a/components/video-player/controls/VideoScalingModeSelector.tsx
+++ b/components/video-player/controls/VideoScalingModeSelector.tsx
@@ -1,5 +1,6 @@
 import { Ionicons } from "@expo/vector-icons";
 import React, { useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import { Platform, View } from "react-native";
 import {
  type OptionGroup,
@@ -54,6 +55,7 @@ export const AspectRatioSelector: React.FC<AspectRatioSelectorProps> = ({
  onRatioChange,
  disabled = false,
 }) => {
+  const { t } = useTranslation();
  const lightHapticFeedback = useHaptic("light");

  const handleRatioSelect = (ratio: AspectRatio) => {
@@ -66,7 +68,10 @@ export const AspectRatioSelector: React.FC<AspectRatioSelectorProps> = ({
      {
        options: ASPECT_RATIO_OPTIONS.map((option) => ({
          type: "radio" as const,
-          label: option.label,
+          label:
+            option.id === "default"
+              ? t("player.aspect_ratio_original")
+              : option.label,
          value: option.id,
          selected: option.id === currentRatio,
          onPress: () => handleRatioSelect(option.id),
@@ -94,7 +99,7 @@ export const AspectRatioSelector: React.FC<AspectRatioSelectorProps> = ({

  return (
    <PlatformDropdown
-      title='Aspect Ratio'
+      title={t("player.aspect_ratio")}
      groups={optionGroups}
      trigger={trigger}
      bottomSheetConfig={{
--- a/components/video-player/controls/dropdown/DropdownView.tsx
+++ b/components/video-player/controls/dropdown/DropdownView.tsx
@@ -1,6 +1,7 @@
 import { Ionicons } from "@expo/vector-icons";
 import { useLocalSearchParams } from "expo-router";
 import { useCallback, useMemo, useRef } from "react";
+import { useTranslation } from "react-i18next";
 import { Platform, View } from "react-native";
 import { BITRATES } from "@/components/BitrateSelector";
 import {
@@ -47,6 +48,7 @@ const DropdownView = ({
  const { settings, updateSettings } = useSettings();
  const router = useRouter();
  const isOffline = useOfflineMode();
+  const { t } = useTranslation();

  const { subtitleIndex, audioIndex, bitrateValue, playbackPosition } =
    useLocalSearchParams<{
@@ -101,7 +103,7 @@ const DropdownView = ({
    // Quality Section
    if (!isOffline) {
      groups.push({
-        title: "Quality",
+        title: t("player.menu.quality"),
        options:
          BITRATES?.map((bitrate) => ({
            type: "radio" as const,
@@ -116,7 +118,7 @@ const DropdownView = ({
    // Subtitle Section
    if (subtitleTracks && subtitleTracks.length > 0) {
      groups.push({
-        title: "Subtitles",
+        title: t("player.menu.subtitles"),
        options: subtitleTracks.map((sub) => ({
          type: "radio" as const,
          label: sub.name,
@@ -128,7 +130,7 @@ const DropdownView = ({

      // Subtitle Scale Section
      groups.push({
-        title: "Subtitle Scale",
+        title: t("player.menu.subtitle_scale"),
        options: SUBTITLE_SCALE_PRESETS.map((preset) => ({
          type: "radio" as const,
          label: preset.label,
@@ -142,7 +144,7 @@ const DropdownView = ({
    // Audio Section
    if (audioTracks && audioTracks.length > 0) {
      groups.push({
-        title: "Audio",
+        title: t("player.menu.audio"),
        options: audioTracks.map((track) => ({
          type: "radio" as const,
          label: track.name,
@@ -156,7 +158,7 @@ const DropdownView = ({
    // Speed Section
    if (setPlaybackSpeed) {
      groups.push({
-        title: "Speed",
+        title: t("player.menu.speed"),
        options: PLAYBACK_SPEEDS.map((speed) => ({
          type: "radio" as const,
          label: speed.label,
@@ -174,8 +176,8 @@ const DropdownView = ({
          {
            type: "action" as const,
            label: showTechnicalInfo
-              ? "Hide Technical Info"
-              : "Show Technical Info",
+              ? t("player.menu.hide_technical_info")
+              : t("player.menu.show_technical_info"),
            onPress: onToggleTechnicalInfo,
          },
        ],
@@ -185,6 +187,7 @@ const DropdownView = ({
    return groups;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [
+    t,
    isOffline,
    bitrateValue,
    changeBitrate,
@@ -217,7 +220,7 @@ const DropdownView = ({

  return (
    <PlatformDropdown
-      title='Playback Options'
+      title={t("player.menu.playback_options")}
      groups={optionGroups}
      trigger={trigger}
      expoUIConfig={{}}
--- a/components/video-player/controls/hooks/useRemoteControl.ts
+++ b/components/video-player/controls/hooks/useRemoteControl.ts
@@ -3,6 +3,7 @@ import { Alert } from "react-native";
 import { type SharedValue, useSharedValue } from "react-native-reanimated";
 import { useTVBackPress } from "@/hooks/useTVBackPress";
 import { useTVEventHandler } from "@/hooks/useTVEventHandler";
+import i18n from "@/i18n";

 interface UseRemoteControlProps {
  showControls: boolean;
@@ -124,17 +125,23 @@ export function useRemoteControl({

      // Controls are hidden, so confirm before leaving playback.
      Alert.alert(
-        "Stop Playback",
+        i18n.t("player.stopPlayback"),
        videoTitleRef.current
-          ? `Stop playing "${videoTitleRef.current}"?`
-          : "Are you sure you want to stop playback?",
+          ? i18n.t("player.stopPlayingTitle", {
+              title: videoTitleRef.current,
+            })
+          : i18n.t("player.stopPlayingConfirm"),
        [
          {
-            text: "Cancel",
+            text: i18n.t("common.cancel"),
            style: "cancel",
            onPress: () => onCancelExitRef.current?.(),
          },
-          { text: "Stop", style: "destructive", onPress: onBackRef.current },
+          {
+            text: i18n.t("common.stop"),
+            style: "destructive",
+            onPress: onBackRef.current,
+          },
        ],
      );
      return true;
--- a/hooks/useAppRouter.ts
+++ b/hooks/useAppRouter.ts
@@ -1,13 +1,19 @@
+// Imported from expo-router's bundled copy, NOT "@react-navigation/*": as of
+// SDK 56 expo-router's Metro check rejects direct @react-navigation imports.
 import { useRouter } from "expo-router";
-import { useCallback, useMemo } from "react";
+import { NavigationContext } from "expo-router/react-navigation";
+import { useCallback, useContext, useMemo } from "react";
 import { useOfflineMode } from "@/providers/OfflineModeProvider";

 /**
 * Drop-in replacement for expo-router's useRouter that automatically
- * preserves offline state across navigation.
+ * preserves offline state across navigation and guards against duplicate
+ * screens from rapid taps.
 *
 * - For object-form navigation, automatically adds offline=true when in offline context
 * - For string URLs, passes through unchanged (caller handles offline param)
+ * - push() is a no-op while the source screen is not focused, so taps fired
+ *   before the pushed screen has rendered (slow devices) can't stack duplicates
 *
 * @example
 * import useRouter from "@/hooks/useAppRouter";
@@ -19,8 +25,18 @@ export function useAppRouter() {
  const router = useRouter();
  const isOffline = useOfflineMode();

+  // Optional: undefined when used outside a navigator (root layout, providers).
+  // When present it reflects the focus state of the screen this hook lives in.
+  const navigation = useContext(NavigationContext);
+
  const push = useCallback(
    (href: Parameters<typeof router.push>[0]) => {
+      // Rapid-push guard: a push blurs the source screen synchronously in the
+      // navigation state (only the native render is slow). Any further push from
+      // this screen — duplicate or not — is dropped until focus returns, so taps
+      // fired before the pushed screen renders can't stack screens.
+      // No navigation context => nothing to guard (deep-link pushes from root).
+      if (navigation?.isFocused?.() === false) return;
      if (typeof href === "string") {
        router.push(href as any);
      } else {
@@ -36,7 +52,7 @@ export function useAppRouter() {
        } as any);
      }
    },
-    [router, isOffline],
+    [router, isOffline, navigation],
  );

  const replace = useCallback(
--- a/hooks/useFilterReset.ts
+++ b/hooks/useFilterReset.ts
@@ -0,0 +1,108 @@
+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/hooks/useJellyseerr.ts
+++ b/hooks/useJellyseerr.ts
@@ -143,7 +143,7 @@ export class JellyseerrApi {
        if (inRange(status, 200, 299)) {
          if (data.version < "2.0.0") {
            const error = t(
-              "jellyseerr.toasts.jellyseer_does_not_meet_requirements",
+              "jellyseerr.toasts.jellyseerr_does_not_meet_requirements",
            );
            toast.error(error);
            throw Error(error);
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
    "expo-brightness": "~56.0.5",
    "expo-build-properties": "~56.0.18",
    "expo-camera": "~56.0.8",
+    "expo-clipboard": "~56.0.4",
    "expo-constants": "~56.0.18",
    "expo-crypto": "~56.0.4",
    "expo-dev-client": "~56.0.20",
--- a/providers/Downloads/fileOperations.ts
+++ b/providers/Downloads/fileOperations.ts
@@ -96,5 +96,24 @@ export function getDownloadedItemSize(id: string): number {
 */
 export function calculateTotalDownloadedSize(): number {
  const items = getAllDownloadedItems();
-  return items.reduce((sum, item) => sum + (item.videoFileSize || 0), 0);
+  return items.reduce((sum, item) => {
+    // Trickplay bytes count too — getDownloadedItemSize models per-item size
+    // as video + trickplay, the total must match.
+    const trickplaySize = item.trickPlayData?.size ?? 0;
+    // Read the live file size on disk so the total reflects actual usage and
+    // self-heals items whose stored videoFileSize is 0 (old schema, or
+    // `fileInfo.size` was undefined at download time). Fall back to the stored
+    // value if the file can't be stat'd.
+    if (item.videoFilePath) {
+      try {
+        const file = new File(filePathToUri(item.videoFilePath));
+        if (file.exists) {
+          return sum + (file.size ?? item.videoFileSize ?? 0) + trickplaySize;
+        }
+      } catch (error) {
+        console.warn("Failed to stat downloaded file for size:", error);
+      }
+    }
+    return sum + (item.videoFileSize ?? 0) + trickplaySize;
+  }, 0);
 }
--- a/providers/Downloads/hooks/useDownloadOperations.ts
+++ b/providers/Downloads/hooks/useDownloadOperations.ts
@@ -289,7 +289,24 @@ export function useDownloadOperations({
  );

  const appSizeUsage = useCallback(async () => {
-    const totalSize = calculateTotalDownloadedSize();
+    let totalSize = calculateTotalDownloadedSize();
+
+    // Also count in-progress downloads (they write straight to their final
+    // path) so the growing file shows up as app usage instead of drifting
+    // into the generic device share until completion.
+    for (const process of processes) {
+      try {
+        const file = new File(
+          Paths.document,
+          `${generateFilename(process.item)}.mp4`,
+        );
+        if (file.exists) {
+          totalSize += file.size ?? 0;
+        }
+      } catch {
+        // File not created yet — ignore.
+      }
+    }

    try {
      const [freeDiskStorage, totalDiskCapacity] = await Promise.all([
@@ -310,7 +327,7 @@ export function useDownloadOperations({
        appSize: totalSize,
      };
    }
-  }, []);
+  }, [processes]);

  return {
    startBackgroundDownload,
--- a/providers/JellyfinProvider.tsx
+++ b/providers/JellyfinProvider.tsx
@@ -15,6 +15,7 @@ import {
  useContext,
  useEffect,
  useMemo,
+  useRef,
  useState,
 } from "react";
 import { useTranslation } from "react-i18next";
@@ -91,6 +92,12 @@ export const apiAtom = atom<Api | null>(initialApi);
 export const userAtom = atom<UserDto | null>(initialUser);
 export const wsAtom = atom<WebSocket | null>(null);
 export const cacheVersionAtom = atom<number>(0);
+// Set by a login flow that wants the account saved: the protection picker
+// shows AFTER the session is authorized (the login screen unmounts on
+// success, so the modal lives at the root — see PendingAccountSaveModal).
+export const pendingAccountSaveAtom = atom<{ serverName?: string } | null>(
+  null,
+);

 interface LoginOptions {
  saveAccount?: boolean;
@@ -108,6 +115,11 @@ interface JellyfinContextValue {
    serverName?: string,
    options?: LoginOptions,
  ) => Promise<void>;
+  saveCurrentAccount: (options?: {
+    securityType?: AccountSecurityType;
+    pinCode?: string;
+    serverName?: string;
+  }) => Promise<void>;
  logout: () => Promise<void>;
  initiateQuickConnect: () => Promise<string | undefined>;
  stopQuickConnectPolling: () => void;
@@ -165,6 +177,46 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
  const { clearAllJellyseerData, setJellyseerrUser } = useJellyseerr();
  const queryClient = useQueryClient();

+  // --- Session-expiry handling ----------------------------------------------
+  // When the server revokes the token (e.g. the device/session is deleted), a
+  // 401 can surface from any authenticated request. Without central handling
+  // the dead token stays in storage, so every reload re-fires authed calls →
+  // 401 spam + uncaught rejections, and the app lingers in a half-authenticated
+  // state. A single response interceptor on the authenticated api clears the
+  // session on the first 401 so the app drops cleanly to the login screen.
+  const sessionExpiredRef = useRef(false);
+
+  const handleSessionExpired = useCallback(() => {
+    if (sessionExpiredRef.current) return; // run once per session
+    sessionExpiredRef.current = true;
+    storage.remove("token");
+    storage.remove("user");
+    setUser(null);
+    setApi(null);
+    queryClient.clear();
+    storage.remove("REACT_QUERY_OFFLINE_CACHE");
+    // Saved credentials are kept so the user can quick-login again.
+  }, [setUser, setApi, queryClient]);
+
+  useEffect(() => {
+    // Only guard an authenticated session. A pre-auth api (login screen) keeps
+    // its own handling — a wrong-password 401 is not a session expiry.
+    if (!api?.accessToken) return;
+    sessionExpiredRef.current = false; // re-arm for this fresh session
+    const interceptorId = api.axiosInstance.interceptors.response.use(
+      (response) => response,
+      (error) => {
+        if (error?.response?.status === 401) {
+          handleSessionExpired();
+        }
+        return Promise.reject(error);
+      },
+    );
+    return () => {
+      api.axiosInstance.interceptors.response.eject(interceptorId);
+    };
+  }, [api, handleSessionExpired]);
+
  const headers = useMemo(() => {
    if (!deviceId) return {};
    return {
@@ -307,6 +359,37 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
    },
  });

+  // Persist the CURRENT session to secure storage — used by the post-login
+  // save-account modal (the protection picker shows AFTER a successful
+  // login, for both the password and Quick Connect flows).
+  const saveCurrentAccount = useCallback(
+    async (options?: {
+      securityType?: AccountSecurityType;
+      pinCode?: string;
+      serverName?: string;
+    }) => {
+      const token = storage.getString("token");
+      if (!api?.basePath || !user?.Id || !user.Name || !token) return;
+      const securityType = options?.securityType || "none";
+      let pinHash: string | undefined;
+      if (securityType === "pin" && options?.pinCode) {
+        pinHash = await hashPIN(options.pinCode);
+      }
+      await saveAccountCredential({
+        serverUrl: api.basePath,
+        serverName: options?.serverName || "",
+        token,
+        userId: user.Id,
+        username: user.Name,
+        savedAt: Date.now(),
+        securityType,
+        pinHash,
+        primaryImageTag: user.PrimaryImageTag ?? undefined,
+      });
+    },
+    [api?.basePath, user],
+  );
+
  const loginMutation = useMutation({
    mutationFn: async ({
      username,
@@ -386,7 +469,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
            default:
              throw new Error(
                t(
-                  "login.an_unexpected_error_occured_did_you_enter_the_correct_url",
+                  "login.an_unexpected_error_occurred_did_you_enter_the_correct_url",
                ),
              );
          }
@@ -509,7 +592,9 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
      }
    },
    onError: (error) => {
-      console.error("Quick login failed:", error);
+      // Expected, handled case (e.g. revoked token → "Session Expired", or
+      // server unreachable): the UI surfaces the message, so warn, don't error.
+      console.warn("Quick login failed:", error);
    },
  });

@@ -620,54 +705,62 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
            setUser(storedUser);
          }

-          // Dismiss splash screen with cached data immediately,
-          // fetch fresh user data in the background
-          setInitialLoaded(true);
+          // Validate the token and refresh user data in the background. Do NOT
+          // await this: the Jellyfin SDK axios instance has no timeout, so when
+          // offline this call hangs for the full OS TCP timeout (75-120s) and
+          // blocks splash dismissal. The cached storedUser (set above) is enough
+          // to render; on success we just refresh it.
+          getUserApi(apiInstance)
+            .getCurrentUser()
+            .then(async (response) => {
+              setUser(response.data);

-          try {
-            const response = await getUserApi(apiInstance).getCurrentUser();
-            setUser(response.data);
-
-            // Migrate current session to secure storage if not already saved
-            if (storedUser?.Id && storedUser?.Name) {
-              const existingCredential = await getAccountCredential(
-                serverUrl,
-                storedUser.Id,
-              );
-              if (!existingCredential) {
-                await saveAccountCredential({
+              // Migrate current session to secure storage if not already saved
+              if (storedUser?.Id && storedUser?.Name) {
+                const existingCredential = await getAccountCredential(
                  serverUrl,
-                  serverName: "",
-                  token,
-                  userId: storedUser.Id,
-                  username: storedUser.Name,
-                  savedAt: Date.now(),
-                  securityType: "none",
-                  primaryImageTag: response.data.PrimaryImageTag ?? undefined,
-                });
-              } else if (
-                response.data.PrimaryImageTag !==
-                existingCredential.primaryImageTag
-              ) {
-                // Update image tag if it has changed
-                addAccountToServer(serverUrl, existingCredential.serverName, {
-                  userId: existingCredential.userId,
-                  username: existingCredential.username,
-                  securityType: existingCredential.securityType,
-                  savedAt: existingCredential.savedAt,
-                  primaryImageTag: response.data.PrimaryImageTag ?? undefined,
-                });
+                  storedUser.Id,
+                );
+                if (!existingCredential) {
+                  await saveAccountCredential({
+                    serverUrl,
+                    serverName: "",
+                    token,
+                    userId: storedUser.Id,
+                    username: storedUser.Name,
+                    savedAt: Date.now(),
+                    securityType: "none",
+                    primaryImageTag: response.data.PrimaryImageTag ?? undefined,
+                  });
+                } else if (
+                  response.data.PrimaryImageTag !==
+                  existingCredential.primaryImageTag
+                ) {
+                  // Update image tag if it has changed
+                  addAccountToServer(serverUrl, existingCredential.serverName, {
+                    userId: existingCredential.userId,
+                    username: existingCredential.username,
+                    securityType: existingCredential.securityType,
+                    savedAt: existingCredential.savedAt,
+                    primaryImageTag: response.data.PrimaryImageTag ?? undefined,
+                  });
+                }
              }
-            }
-          } catch (e) {
-            // Background fetch failed — app already rendered with cached data
-            console.warn("Background user fetch failed, using cached data:", e);
-          }
-        } else {
-          setInitialLoaded(true);
+            })
+            .catch((e) => {
+              // Expected, handled case (offline, or a token the server rejects —
+              // the UI prompts re-login): warn, don't error. Log only
+              // status/message — never the raw error (axios errors carry the
+              // request config incl. the Authorization header / token).
+              console.warn(
+                "Background user validation failed:",
+                e?.response?.status ?? e?.message ?? "unknown error",
+              );
+            });
        }
      } catch (e) {
        console.error(e);
+      } finally {
        setInitialLoaded(true);
      }
    };
@@ -681,6 +774,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
    removeServer: () => removeServerMutation.mutateAsync(),
    login: (username, password, serverName, options) =>
      loginMutation.mutateAsync({ username, password, serverName, options }),
+    saveCurrentAccount,
    logout: () => logoutMutation.mutateAsync(),
    initiateQuickConnect,
    stopQuickConnectPolling,
--- a/translations/en.json
+++ b/translations/en.json
@@ -12,18 +12,21 @@
    "login_button": "Log in",
    "quick_connect": "Quick Connect",
    "enter_code_to_login": "Enter code {{code}} to log in",
+    "quick_connect_instructions": "Enter this code on a signed-in device — you'll be logged in automatically.",
+    "tap_code_to_copy": "Tap the code to copy it",
+    "code_copied": "Code copied",
    "failed_to_initiate_quick_connect": "Failed to initiate Quick Connect",
    "got_it": "Got it",
    "connection_failed": "Connection failed",
    "could_not_connect_to_server": "Could not connect to the server. Please check the URL and your network connection.",
-    "an_unexpected_error_occured": "An unexpected error occurred",
+    "an_unexpected_error_occurred": "An unexpected error occurred",
    "change_server": "Change server",
    "invalid_username_or_password": "Invalid username or password",
    "user_does_not_have_permission_to_log_in": "User does not have permission to log in",
    "server_is_taking_too_long_to_respond_try_again_later": "Server is taking too long to respond, try again later",
    "server_received_too_many_requests_try_again_later": "Server received too many requests, try again later.",
    "there_is_a_server_error": "There is a server error",
-    "an_unexpected_error_occured_did_you_enter_the_correct_url": "An unexpected error occurred. Did you enter the server URL correctly?",
+    "an_unexpected_error_occurred_did_you_enter_the_correct_url": "An unexpected error occurred. Did you enter the server URL correctly?",
    "too_old_server_text": "Unsupported Jellyfin server discovered",
    "too_old_server_description": "Please update Jellyfin to the latest version"
  },
@@ -33,6 +36,7 @@
    "connect_button": "Connect",
    "previous_servers": "Previous servers",
    "clear_button": "Clear all",
+    "server_url": "Server URL",
    "swipe_to_remove": "Swipe to remove",
    "search_for_local_servers": "Search for local servers",
    "searching": "Searching...",
@@ -188,10 +192,11 @@
        "authorize_button": "Authorize Quick Connect",
        "enter_the_quick_connect_code": "Enter the Quick Connect code...",
        "success": "Success",
-        "quick_connect_autorized": "Quick Connect authorized",
+        "quick_connect_authorized": "Quick Connect authorized",
        "error": "Error",
        "invalid_code": "Invalid code",
-        "authorize": "Authorize"
+        "authorize": "Authorize",
+        "paste_code": "Paste code"
      },
      "media_controls": {
        "media_controls_title": "Media controls",
@@ -270,6 +275,10 @@
        "mpv_subtitle_margin_y": "Vertical margin",
        "mpv_subtitle_align_x": "Horizontal align",
        "mpv_subtitle_align_y": "Vertical align",
+        "mpv_settings_title": "MPV Subtitle Settings",
+        "mpv_settings_description": "Advanced subtitle customization for MPV player",
+        "opaque_background": "Opaque Background",
+        "background_opacity": "Background Opacity",
        "align": {
          "left": "Left",
          "center": "Center",
@@ -298,7 +307,7 @@
        "show_custom_menu_links": "Show custom menu links",
        "show_large_home_carousel": "Show large home carousel (beta)",
        "hide_libraries": "Hide libraries",
-        "select_liraries_you_want_to_hide": "Select the libraries you want to hide from the Library tab and home page sections.",
+        "select_libraries_you_want_to_hide": "Select the libraries you want to hide from the Library tab and home page sections.",
        "disable_haptic_feedback": "Disable haptic feedback",
        "default_quality": "Default quality",
        "default_playback_speed": "Default playback speed",
@@ -384,6 +393,8 @@
        "device_usage": "Device {{availableSpace}}%",
        "size_used": "{{used}} of {{total}} used",
        "delete_all_downloaded_files": "Delete all downloaded files",
+        "delete_all_downloaded_files_confirm": "Delete All Downloaded Files?",
+        "delete_all_downloaded_files_confirm_desc": "Are you sure you want to delete all downloaded files? This action cannot be undone.",
        "music_cache_title": "Music cache",
        "music_cache_description": "Automatically cache songs as you listen for smoother playback and offline support",
        "clear_music_cache": "Clear music cache",
@@ -408,7 +419,9 @@
        "click_for_more_info": "Click for more info",
        "level": "Level",
        "no_logs_available": "No logs available",
-        "delete_all_logs": "Delete all logs"
+        "delete_all_logs": "Delete all logs",
+        "copy": "Copy",
+        "copied": "Copied to clipboard"
      },
      "languages": {
        "title": "Languages",
@@ -435,10 +448,13 @@
    },
    "sessions": {
      "title": "Sessions",
-      "no_active_sessions": "No active sessions"
+      "no_active_sessions": "No active sessions",
+      "select_session": "Select Session",
+      "now_playing": "Now playing:"
    },
    "downloads": {
      "downloads_title": "Downloads",
+      "transcoding": "Transcoding",
      "series": "Series",
      "movies": "Movies",
      "other_media": "Other media",
@@ -495,6 +511,8 @@
    "none": "None",
    "track": "Track",
    "cancel": "Cancel",
+    "stop": "Stop",
+    "open_menu": "Open Menu",
    "delete": "Delete",
    "ok": "OK",
    "remove": "Remove",
@@ -596,10 +614,34 @@
  },
  "player": {
    "live": "LIVE",
+    "menu": {
+      "quality": "Quality",
+      "subtitles": "Subtitles",
+      "subtitle_scale": "Subtitle Scale",
+      "audio": "Audio",
+      "speed": "Speed",
+      "playback_options": "Playback Options",
+      "show_technical_info": "Show Technical Info",
+      "hide_technical_info": "Hide Technical Info"
+    },
+    "technical_info": {
+      "video": "Video:",
+      "audio": "Audio:",
+      "subtitle": "Subtitle:",
+      "bitrate": "Bitrate:",
+      "buffer_seconds": "Buffer: {{seconds}}s",
+      "vo": "VO:",
+      "dropped_frames": "Dropped: {{count}} frames",
+      "loading": "Loading..."
+    },
    "mpv_player_title": "MPV player",
+    "aspect_ratio": "Aspect Ratio",
+    "aspect_ratio_original": "Original",
+    "hash_match": "Hash Match",
+    "still_watching": "Are you still watching?",
    "error": "Error",
    "failed_to_get_stream_url": "Failed to get the stream URL",
-    "an_error_occured_while_playing_the_video": "An error occurred while playing the video. Check logs in settings.",
+    "an_error_occurred_while_playing_the_video": "An error occurred while playing the video. Check logs in settings.",
    "client_error": "Client error",
    "could_not_create_stream_for_chromecast": "Could not create a stream for Chromecast",
    "message_from_server": "Message from server: {{message}}",
@@ -697,6 +739,7 @@
    "no_data_available": "No data available"
  },
  "live_tv": {
+    "title": "Live TV",
    "next": "Next",
    "previous": "Previous",
    "coming_soon": "Coming soon",
@@ -768,7 +811,7 @@
    "request_selected": "Request selected",
    "n_selected": "{{count}} selected",
    "toasts": {
-      "jellyseer_does_not_meet_requirements": "Seerr server does not meet minimum version requirements! Please update to at least 2.0.0",
+      "jellyseerr_does_not_meet_requirements": "Seerr server does not meet minimum version requirements! Please update to at least 2.0.0",
      "jellyseerr_test_failed": "Seerr test failed. Please try again.",
      "failed_to_test_jellyseerr_server_url": "Failed to test Seerr server url",
      "issue_submitted": "Issue submitted!",
@@ -781,6 +824,16 @@
      "failed_to_decline_request": "Failed to decline request"
    }
  },
+  "accessibility": {
+    "play_button": "Play button",
+    "play_hint": "Tap to play the media",
+    "toggle_orientation": "Toggle screen orientation",
+    "toggle_orientation_hint": "Toggles the screen orientation between portrait and landscape"
+  },
+  "not_found": {
+    "title": "This screen doesn't exist.",
+    "go_home": "Go to home screen!"
+  },
  "tabs": {
    "home": "Home",
    "search": "Search",
@@ -791,6 +844,12 @@
  },
  "music": {
    "title": "Music",
+    "no_track_playing": "No track playing",
+    "queue_empty": "Queue is empty",
+    "playing_from_queue": "Playing from queue",
+    "up_next": "Up next",
+    "now_playing": "Now Playing",
+    "missing_library_id": "Missing music library id.",
    "tabs": {
      "suggestions": "Suggestions",
      "albums": "Albums",
--- a/utils/atoms/filters.ts
+++ b/utils/atoms/filters.ts
@@ -1,6 +1,5 @@
 import { atom } from "jotai";
-import { atomWithStorage } from "jotai/utils";
-import { storage } from "../mmkv";
+import { useMemo } from "react";
 import { useSettings } from "./settings";

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

 export const useFilterOptions = () => {
  const { settings } = useSettings();
-  // 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;
+  // 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],
+  );
 };

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

-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);
-    },
-  },
-);
+// 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 FilterByPreferenceAtom = atomWithStorage<FilterPreference>(
-  "filterByPreference",
+export const FilterByPreferenceAtom = atom<FilterPreference>(
  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 = atomWithStorage<SortOrderPreference>(
-  "sortOrderPreference",
+export const sortOrderPreferenceAtom = atom<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,
@@ -191,3 +165,8 @@ export const getFilterByPreference = (
 ) => {
  return preferences?.[libraryId] || null;
 };
+
+export const getMultiFilterPreference = (
+  libraryId: string,
+  preferences: MultiFilterPreference,
+) => preferences?.[libraryId] ?? [];
--- a/utils/atoms/settings.ts
+++ b/utils/atoms/settings.ts
@@ -443,11 +443,6 @@ export const pluginSettingsAtom = atom<PluginLockableSettings | undefined>(
 const hasMeaningfulSettingValue = (value: unknown) =>
  value !== undefined && value !== null && value !== "";

-const getEffectiveSettingValue = <K extends keyof Settings>(
-  settings: Partial<Settings> | null | undefined,
-  settingsKey: K,
-) => settings?.[settingsKey] ?? defaultValues[settingsKey];
-
 export const useSettings = () => {
  const api = useAtomValue(apiAtom);
  const [_settings, setSettings] = useAtom(settingsAtom);
@@ -504,7 +499,17 @@ export const useSettings = () => {
    if (!_settings) {
      return;
    }
-    const hasChanges = Object.entries(update).some(
+    // Admin-locked settings are enforced at write time too: a control that
+    // isn't disabled in the UI must not persist a value the admin pinned.
+    // The read memo already overrides locked keys, but without this guard the
+    // write would silently land in user storage and resurface once unlocked.
+    const sanitizedUpdate = Object.fromEntries(
+      Object.entries(update).filter(
+        ([key]) => pluginSettings?.[key as keyof Settings]?.locked !== true,
+      ),
+    ) as Partial<Settings>;
+
+    const hasChanges = Object.entries(sanitizedUpdate).some(
      ([key, value]) => _settings[key as keyof Settings] !== value,
    );

@@ -513,7 +518,7 @@ export const useSettings = () => {
      const newSettings = {
        ...defaultValues,
        ..._settings,
-        ...update,
+        ...sanitizedUpdate,
      } as Settings;
      setSettings(newSettings);
      saveSettings(newSettings);
@@ -536,13 +541,24 @@ export const useSettings = () => {
        // Normalize object-typed settings from plugin (plain primitive → { key, value })
        value = normalizePluginValue(settingsKey, value);

-        const effectiveValue = getEffectiveSettingValue(_settings, settingsKey);
+        // When unlocked, keep the user's value only if they explicitly diverged
+        // from the app default. Otherwise the plugin value is the admin's
+        // default and must win over the hardcoded app default — e.g. a toggle
+        // that was always locked then unlocked should reflect the plugin
+        // default, not the app's `false`. Object-typed settings compare by
+        // reference, so their behaviour is unchanged.
+        const userValue = _settings?.[settingsKey];
+        const userDiverged =
+          hasMeaningfulSettingValue(userValue) &&
+          userValue !== defaultValues[settingsKey];

        (acc as any)[settingsKey] = locked
          ? value
-          : hasMeaningfulSettingValue(effectiveValue)
-            ? effectiveValue
-            : value;
+          : userDiverged
+            ? userValue
+            : hasMeaningfulSettingValue(value)
+              ? value
+              : defaultValues[settingsKey];
      }
      return acc;
    }, {});
Author	SHA1	Message	Date
Gauvain	bd5b95c835	fix(library): per-library filter memory + reset-to-top, reset on app close Genre/year/tag filters lived in global atoms with no per-library memory and no reset on library switch, so a selection in one library (e.g. Anime) bled into another (e.g. Shows). Sort/order/filterBy were already per-library but persisted across app restarts. Move all per-library filter state to in-memory preferences — genres/years/tags get their own, and sort/order/filterBy stop using atomWithStorage: each library remembers its own filters for the session and everything resets when the app is fully closed. The library mount effect restores the active library's selection, the shared useFilterReset clears it, and collections open with a clean slate. Also fix the grid not returning to the top on a filter/sort change or reset: it now pins to the top instantly and re-pins once the filtered fetch settles (FlashList was restoring the previous offset as the new content grew); pagination is left untouched.	2026-06-25 00:32:59 +02:00
Gauvain	8a37ec46bf	fix(library): reset (X) also clears sort & order, via a shared hook The mobile ResetFiltersButton and the TV filter header each had their own active-state and reset logic, and both ignored sort & order — so the reset chip never appeared for a changed sort and reset never restored it. Centralise both in useFilterReset(libraryId): the chip now reflects a non-default sort, and reset restores SortName/Ascending and clears the per-library persisted sort/order/filter preferences so the reset sticks.	2026-06-24 23:14:55 +02:00
Gauvain	b70f644fbc	fix(logs): scroll long entries on Android, full-row expand & copy to clipboard - the code-block ScrollView is nested in the page ScrollView, so Android never scrolled it (the outer view captured the gesture); add nestedScrollEnabled so the debug payload scrolls - move the "more info" hint inside the toggle so tapping anywhere on the collapsed row expands it - make the JSON payload selectable - add a Copy button (expo-clipboard, guarded for builds without the native module, mobile only) copying level + timestamp + message + data	2026-06-24 23:14:47 +02:00
Gauvain	d5ef69b612	fix(settings): apply the plugin (admin) default when a setting is unlocked A setting that was always locked then unlocked showed the app's hardcoded default instead of the plugin's configured default: the unlocked branch treated the persisted app default as a meaningful user value, so the plugin value was effectively dead code for any key with a non-empty app default. Keep the user's value only when it diverges from the app default; otherwise the plugin (admin) default wins over the hardcoded app default. Shared via useSettings, so mobile and TV are both fixed.	2026-06-24 22:53:48 +02:00
Gauvain	2ac664de5a	fix(settings): tidy spacing, uniform Android row heights & toggle layout - spacing: top padding + inter-group gaps so section titles, descriptions and buttons no longer touch (playback buffer, audio/subtitles, music, marlin, kefin, streamystats, storage, hide-libraries) - ListGroup: skip empty section titles - SettingSwitch: cap the native Android switch in a fixed centered box so toggle rows match the other rows and stay put when toggled; iOS unchanged - Appearance: move "Hide libraries" to the end of the list	2026-06-24 22:22:49 +02:00
Alex	91ea791663	Merge branch 'develop' into fix/ui-and-bugs	2026-06-23 18:24:32 +10:00
Gauvain	e1f7968352	fix(navigation): dismiss the keyboard when using the header back button Leaving a screen with the keyboard up (e.g. the Jellyseerr login) left it lingering over the previous screen. Dismiss it before navigating back.	2026-06-16 23:42:31 +02:00
Gauvain	f8e0baa0c0	refactor(kefin-tweaks): use the standard ListItem/disabledByAdmin pattern Rebuild the KefinTweaks toggle on ListGroup + ListItem like the other plugin settings: drop the bespoke card, the red label, the custom switch colours, and the `t("Watchlist On")`/`t("Watchlist Off")` literal-as-key strings. The admin lock now shows via the ListItem subtitle instead of wrapping the whole screen in DisabledSetting.	2026-06-16 23:42:25 +02:00
Gauvain	9ed49e040e	fix(jellyseerr): lock only the server URL, keep the password editable The page greyed out the whole settings screen when the admin locked the server URL, so the user couldn't even type their password to sign in to the pinned server. Now only the URL field is disabled (greyed + "Disabled by admin"); the password input stays editable.	2026-06-16 23:42:20 +02:00
Gauvain	e2acc40c49	refactor(settings): move "refresh from server" to the plugins index The button pulls the centralised Streamyfin plugin settings for every plugin, so it belongs on the plugins list page rather than buried inside the Streamystats screen.	2026-06-16 23:42:12 +02:00
Gauvain	3d84b558fb	fix(marlin-search): show the admin-lock notice via the ListItem subtitle The "Disabled by admin" notice was rendered by DisabledSetting inside the rounded, overflow-hidden card, which clipped the text. Switch to the same pattern as the Streamystats settings: plain ListItems with the `disabledByAdmin` prop, so the notice renders as the row subtitle and the URL/toggle disable per-field.	2026-06-16 23:27:52 +02:00
Gauvain	8270c4c30c	feat(quick-connect): add a paste button to the authorize code input Codes often arrive over SMS/another app; add a "Paste code" button under the PIN input that reads the clipboard (expo-clipboard, probed optionally) and keeps the 6 digits.	2026-06-16 23:25:16 +02:00
Gauvain	4d9fc1d615	fix(library): scroll the grid back to the top when filters change Resetting or changing a filter/sort refetches from page 1, but the FlashList kept its previous offset, leaving the user stranded mid-list. Hold a FlashListRef and scrollToOffset(0) whenever the active filters/sort change.	2026-06-16 23:25:06 +02:00
Gauvain	3478f7a040	Merge branch 'develop' into fix/ui-and-bugs	2026-06-16 21:54:56 +02:00
Gauvain	32adb5c43a	fix(ui): unify the header back icon and fix its Android alignment Use the Settings chevron-left for HeaderBackButton everywhere (was Ionicons arrow-back) so every back button matches. On Android, replace the `rounded-full p-2` (which pushed both the arrow and the title too far right) with a 16px right margin, like the Settings back button.	2026-06-16 21:50:00 +02:00
Gauvain	b6da8c0784	fix(settings): align the Settings/Plugins back chevron with the edge Drop the `pl-0.5` that pushed the back chevron slightly to the right on the Settings and Plugins headers, matching the other back buttons.	2026-06-16 21:49:57 +02:00
Gauvain	fc53a7d760	fix(logs): keep the filter bar below the header on iOS The logs page rendered its filter bar in a plain View with no top inset, so under the transparent iOS header it sat behind the header and the filter buttons weren't tappable. Use a root ScrollView with contentInsetAdjustmentBehavior='automatic' (like the sibling settings pages) and make the filter bar a sticky header, so iOS insets the content below the header and the bar stays pinned while logs scroll.	2026-06-16 21:49:35 +02:00
Gauvain	3035a9019c	Merge branch 'develop' into fix/ui-and-bugs	2026-06-16 21:03:12 +02:00
Gauvain	182a2cf1e6	Merge remote-tracking branch 'origin/develop' into fix/ui-and-bugs # Conflicts: # bun.lock # package.json	2026-06-16 20:59:00 +02:00
Gauvain	6195db2a83	Merge branch 'develop' into fix/ui-and-bugs	2026-06-15 01:36:00 +02:00
Gauvino	599096f883	fix(review): address second CodeRabbit pass - streamystats: derive toggle enablement from the same effective URL the input renders (locked admin URL no longer disables every switch) - FilterSheet: use the deep-equality rule for toggling that rendering already uses — option objects are recreated across renders - DownloadCard: take t from useTranslation so badge labels re-render on language change - fileOperations: count trickplay bytes in the storage total, matching the per-item size model - PendingAccountSaveModal: warn instead of silently swallowing a failed account save	2026-06-12 16:23:08 +02:00
Gauvino	3247bf709c	fix(review): address CodeRabbit feedback - swap direct i18next t imports for the useTranslation hook so the four touched components re-render on language change - localize the buffer seconds unit via a buffer_seconds key instead of a literal trailing s - reword the useAppRouter guard comment to match its real scope	2026-06-12 15:00:49 +02:00
Gauvain	2af252d639	Merge branch 'develop' into fix/ui-and-bugs	2026-06-12 11:03:08 +02:00
Gauvain	1636523d48	fix(login): ask how to protect a saved account after the login succeeds The protection picker used to show before the login attempt, so a wrong password still walked the user through choosing a PIN/password for an account that never logged in - and a Quick Connect login could not save the account at all. Login flows now only flag the intent (pendingAccountSaveAtom); the picker is a global PendingAccountSaveModal mounted at the root, shown once the session is authorized - the login screen unmounts on success, so it cannot host the modal itself. Works identically for the password and Quick Connect flows; the credential is saved from the live session token (saveCurrentAccount). Cancelling saves nothing, and a logout before answering drops the intent.	2026-06-11 00:42:59 +02:00
Gauvain	855957707a	fix(notifications): drop deprecated handler flags and payload logging - shouldShowAlert is deprecated in expo-notifications: specify shouldShowBanner and shouldShowList instead (same behavior). - The foreground listener logged the entire notification object, which touches the deprecated dataString getter (another deprecation warning) and dumps noisy payloads into the console - log only the title.	2026-06-11 00:42:59 +02:00
Gauvain	4bad8ae054	fix(filters): keep the search input responsive on large option lists Typing in the filter-sheet search re-filtered and re-rendered up to 100 option rows per keystroke. On large lists (2000+ tags) that blocked the JS thread long enough for the controlled TextInput to snap back to a stale value - letters were dropped and deleted text reappeared. Defer the search value (useDeferredValue) so the keystroke render stays cheap and the filtering/list update runs after, and memoize the row elements so urgent renders don't rebuild them.	2026-06-11 00:42:58 +02:00
Gauvain	16188ac2a3	fix(login): show the Quick Connect code in an auto-dismissing sheet The code was shown in a native Alert, which has no programmatic dismiss: after another device authorized the code and polling logged the user in, the alert stayed open on top of the app. Replace it with an in-app bottom sheet that closes itself once the session is authorized. Dismissing only hides the code - polling continues so login still completes if the code is authorized afterwards; polling stops when leaving the login screen (parity with TVLogin). The code can be tapped to copy (expo-clipboard, probed via requireOptionalNativeModule so builds without the native module just no-op).	2026-06-11 00:42:57 +02:00
Gauvain	d12d62863e	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.	2026-06-11 00:42:56 +02:00
Gauvain	7eb65ba430	fix(auth): clear the session on any 401 via a response interceptor When the server revokes the token (device/session deleted), a 401 can surface from any authenticated request. Nothing cleaned it up: the dead token stayed in storage, every reload re-fired authenticated calls (401 spam, uncaught rejections) and the app lingered half-authenticated. A response interceptor on the authenticated api clears the session once on the first 401 so the app drops cleanly to the login screen. It only attaches when api.accessToken is set, so a wrong-password 401 on the login screen is never treated as session expiry. Saved credentials are kept for quick re-login.	2026-06-11 00:42:55 +02:00
Gauvain	43d469f398	fix(auth): stop the offline splash hang and soften handled auth logs On a cold start without network, startup awaited getCurrentUser on an axios instance with no timeout, so the splash hung for the full OS TCP timeout (75-120 s). Render from the cached user immediately and run the token validation/refresh in the background; setInitialLoaded moves to a finally so every path dismisses the splash. Handled failures (quick-login with a revoked token, background validation while offline) now log as warnings, and the background path logs only status/message - axios errors carry the Authorization header.	2026-06-11 00:42:55 +02:00
Gauvain	d397233991	fix(filters): memoize useFilterOptions and drop debug logging The hook returned a fresh array on every render (and console.logged it). The unstable identity cascaded into list-header re-creation and, under heavy re-rendering, tripped React maximum-update-depth.	2026-06-11 00:42:54 +02:00
Gauvain	7f020120b3	fix(settings): enforce admin-locked settings at write time updateSettings persisted any key into user storage, including ones the admin locked via the Streamyfin plugin. The read memo already overrides locked keys at runtime, but the write still landed in storage and several settings screens never disable their controls, so locked settings appeared changeable. Strip locked keys before persisting.	2026-06-11 00:42:53 +02:00
Gauvain	aec3444829	fix(nav): drop duplicate pushes from rapid taps Tapping an item twice before the pushed screen rendered stacked the screen twice. A push blurs the source screen synchronously in the navigation state, so a second tap sees an unfocused screen and is dropped (focus-based guard, no timers).	2026-06-11 00:42:52 +02:00
Gauvain	24f9c38098	fix(downloads): key the series poster cache read on SeriesId The cached base64 poster was read in a useMemo with empty deps, so recycled list cells kept showing the first-rendered series poster.	2026-06-11 00:42:51 +02:00
Gauvain	1dd1940334	fix(downloads): compute storage usage from live file sizes The storage bar showed 0.00% because calculateTotalDownloadedSize summed the stored videoFileSize, which is 0 for items downloaded before the size was recorded (or when fileInfo.size was undefined). Stat the file on disk and fall back to the stored value.	2026-06-11 00:42:51 +02:00
Gauvain	1e537bc11e	fix(downloads): confirm before deleting all downloaded files The "Delete all downloaded files" row wiped everything on a single tap. Ask for confirmation first (destructive action, cannot be undone).	2026-06-10 22:29:51 +02:00
Gauvain	b163c2abb4	fix(settings): restore plugin list order Jellyseerr / Streamystats / Marlin Search rows were reordered by mistake; put them back in the original order.	2026-06-10 22:29:48 +02:00
Gauvain	0d47c8d43a	feat(i18n): localize hardcoded UI strings and fix misspelled keys Move remaining hardcoded English strings (player menus, technical-info overlay, music/now-playing, live TV, TV search badges, MPV subtitle settings, accessibility labels, not-found screen, session picker) to en.json, and correct misspelled keys (occured -> occurred, autorized -> authorized, liraries -> libraries, jellyseer -> jellyseerr) along with their usages.	2026-06-10 22:29:16 +02:00