fix(settings): drop redundant mb-4 on buffer/VO groups (page gap handles spacing)

Co-authored-by: Gauvain <contact@uruk.dev>

app/(auth)/(tabs)/(home)/_layout.tsx

@@ -243,6 +243,28 @@ export default function IndexLayout() {
           headerLeft: () => <HeaderBackButton />,
         }}
       />
+      <Stack.Screen
+        name='settings/account/page'
+        options={{
+          title: t("home.settings.account.title"),
+          headerShown: !Platform.isTV,
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+          headerLeft: () => <HeaderBackButton />,
+        }}
+      />
+      <Stack.Screen
+        name='settings/notifications/page'
+        options={{
+          title: t("home.settings.notifications.title"),
+          headerShown: !Platform.isTV,
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+          headerLeft: () => <HeaderBackButton />,
+        }}
+      />
       {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
         <Stack.Screen key={name} name={name} options={options} />
       ))}

app/(auth)/(tabs)/(home)/settings.tsx

@@ -1,38 +1,44 @@
 import { useNavigation } from "expo-router";
 import { t } from "i18next";
-import { useAtom } from "jotai";
-import { useEffect } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Platform, ScrollView, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
-import { ListGroup } from "@/components/list/ListGroup";
-import { ListItem } from "@/components/list/ListItem";
 import { AppLanguageSelector } from "@/components/settings/AppLanguageSelector";
-import { QuickConnect } from "@/components/settings/QuickConnect";
+import { SettingsHero } from "@/components/settings/index/SettingsHero";
+import { SettingsRow } from "@/components/settings/index/SettingsRow";
+import { SettingsSearchBar } from "@/components/settings/index/SettingsSearchBar";
+import { SettingsSection } from "@/components/settings/index/SettingsSection";
+import {
+  SETTINGS_CATALOG,
+  type SettingsTarget,
+} from "@/components/settings/index/settingsCatalog";
+import { useSettingsSearch } from "@/components/settings/index/useSettingsSearch";
+import {
+  QuickConnectSheet,
+  type QuickConnectSheetRef,
+} from "@/components/settings/QuickConnect";
 import { StorageSettings } from "@/components/settings/StorageSettings";
-import { UserInfo } from "@/components/settings/UserInfo";
 import useRouter from "@/hooks/useAppRouter";
-import { useJellyfin, userAtom } from "@/providers/JellyfinProvider";
+import { useJellyfin } from "@/providers/JellyfinProvider";
 
-// TV-specific settings component
 const SettingsTV = Platform.isTV ? require("./settings.tv").default : null;
 
-// Mobile settings component
 function SettingsMobile() {
   const router = useRouter();
   const insets = useSafeAreaInsets();
-  const [_user] = useAtom(userAtom);
   const { logout } = useJellyfin();
-
   const navigation = useNavigation();
+  const quickConnectRef = useRef<QuickConnectSheetRef>(null);
+  const [query, setQuery] = useState("");
+  const os: "ios" | "android" = Platform.OS === "ios" ? "ios" : "android";
+  const results = useSettingsSearch(query);
+  const searching = query.trim().length > 0;
+
   useEffect(() => {
     navigation.setOptions({
       headerRight: () => (
-        <TouchableOpacity
-          onPress={() => {
-            logout();
-          }}
-        >
+        <TouchableOpacity onPress={() => logout()}>
           <Text className='text-red-600 px-2'>
             {t("home.settings.log_out_button")}
           </Text>
@@ -41,96 +47,95 @@ function SettingsMobile() {
     });
   }, []);
 
+  const handleTarget = (target: SettingsTarget) => {
+    if (target.type === "action") {
+      if (target.action === "quickConnect") {
+        quickConnectRef.current?.present();
+      }
+      return;
+    }
+    router.push(target.route as any);
+  };
+
   return (
     <ScrollView
       contentInsetAdjustmentBehavior='automatic'
+      keyboardShouldPersistTaps='handled'
       contentContainerStyle={{
         paddingLeft: insets.left,
         paddingRight: insets.right,
+        paddingTop: 8,
+        paddingBottom: 32,
       }}
     >
-      <View
-        className='p-4 flex flex-col'
-        style={{ paddingTop: Platform.OS === "android" ? 10 : 0 }}
-      >
-        <View className='mb-4'>
-          <UserInfo />
-        </View>
+      {!searching && (
+        <SettingsHero
+          onPress={() => router.push("/settings/account/page" as any)}
+        />
+      )}
+      <SettingsSearchBar value={query} onChange={setQuery} />
 
-        <QuickConnect className='mb-4' />
+      {searching ? (
+        <SettingsSection title={t("home.settings.search_results")}>
+          {results.length === 0 ? (
+            <View className='px-4 py-3'>
+              <Text className='text-[#9899A1]'>
+                {t("home.settings.search_no_results")}
+              </Text>
+            </View>
+          ) : (
+            results.map((r, i) => (
+              <SettingsRow
+                key={r.id}
+                title={r.title}
+                icon={r.icon}
+                value={r.subtitle}
+                onPress={() => handleTarget(r.target)}
+                isLast={i === results.length - 1}
+              />
+            ))
+          )}
+        </SettingsSection>
+      ) : (
+        <>
+          <View className='mx-3 mb-5'>
+            <AppLanguageSelector />
+          </View>
+          {SETTINGS_CATALOG.map((section) => {
+            const entries = section.entries.filter(
+              (e) => !e.platforms || e.platforms.includes(os),
+            );
+            if (entries.length === 0) return null;
+            return (
+              <SettingsSection key={section.id} title={t(section.titleKey)}>
+                {entries.map((e, i) => (
+                  <SettingsRow
+                    key={e.id}
+                    title={t(e.titleKey)}
+                    icon={e.icon}
+                    onPress={() => handleTarget(e.target)}
+                    isLast={i === entries.length - 1}
+                  />
+                ))}
+              </SettingsSection>
+            );
+          })}
+          <SettingsSection>
+            <View className='p-3'>
+              <StorageSettings />
+            </View>
+          </SettingsSection>
+        </>
+      )}
 
-        <View className='mb-4'>
-          <ListGroup title={t("pairing.pair_with_phone_title")}>
-            <ListItem
-              onPress={() =>
-                router.push("/(auth)/(tabs)/(home)/companion-login")
-              }
-              title={t("pairing.pair_with_phone")}
-              textColor='blue'
-            />
-          </ListGroup>
-        </View>
-
-        <View className='mb-4'>
-          <AppLanguageSelector />
-        </View>
-
-        <View className='mb-4'>
-          <ListGroup title={t("home.settings.categories.title")}>
-            <ListItem
-              onPress={() => router.push("/settings/playback-controls/page")}
-              showArrow
-              title={t("home.settings.playback_controls.title")}
-            />
-            <ListItem
-              onPress={() => router.push("/settings/audio-subtitles/page")}
-              showArrow
-              title={t("home.settings.audio_subtitles.title")}
-            />
-            <ListItem
-              onPress={() => router.push("/settings/music/page")}
-              showArrow
-              title={t("home.settings.music.title")}
-            />
-            <ListItem
-              onPress={() => router.push("/settings/appearance/page")}
-              showArrow
-              title={t("home.settings.appearance.title")}
-            />
-            <ListItem
-              onPress={() => router.push("/settings/plugins/page")}
-              showArrow
-              title={t("home.settings.plugins.plugins_title")}
-            />
-            <ListItem
-              onPress={() => router.push("/settings/intro/page")}
-              showArrow
-              title={t("home.settings.intro.title")}
-            />
-            <ListItem
-              onPress={() => router.push("/settings/network/page")}
-              showArrow
-              title={t("home.settings.network.title")}
-            />
-            <ListItem
-              onPress={() => router.push("/settings/logs/page")}
-              showArrow
-              title={t("home.settings.logs.logs_title")}
-            />
-          </ListGroup>
-        </View>
-
-        <StorageSettings />
-      </View>
+      <QuickConnectSheet ref={quickConnectRef} />
     </ScrollView>
   );
 }
 
 export default function settings() {
-  // Use TV settings component on TV platforms
   if (Platform.isTV && SettingsTV) {
     return <SettingsTV />;
   }
-
   return <SettingsMobile />;
 }

app/(auth)/(tabs)/(home)/settings/account/page.tsx

@@ -0,0 +1,60 @@
+import * as Application from "expo-application";
+import { setStringAsync } from "expo-clipboard";
+import { t } from "i18next";
+import { useAtom } from "jotai";
+import { useState } from "react";
+import { Alert, ScrollView } from "react-native";
+import { ListGroup } from "@/components/list/ListGroup";
+import { ListItem } from "@/components/list/ListItem";
+import { useHaptic } from "@/hooks/useHaptic";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+
+export default function AccountPage() {
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+  const [revealed, setRevealed] = useState(false);
+  const success = useHaptic("success");
+  const version = Application.nativeApplicationVersion ?? "N/A";
+  const token = api?.accessToken ?? "";
+  const masked = token ? `•••• •••• •••• ${token.slice(-4)}` : "";
+
+  const copyToken = async () => {
+    if (!token) return;
+    try {
+      await setStringAsync(token);
+      success();
+      Alert.alert(t("home.settings.account.copied"));
+    } catch {
+      Alert.alert(t("home.settings.account.copy_failed"));
+    }
+  };
+
+  return (
+    <ScrollView contentContainerStyle={{ padding: 16 }}>
+      <ListGroup title={t("home.settings.user_info.user_info_title")}>
+        <ListItem
+          title={t("home.settings.user_info.user")}
+          value={user?.Name}
+        />
+        <ListItem
+          title={t("home.settings.user_info.server")}
+          value={api?.basePath}
+        />
+        <ListItem
+          title={t("home.settings.user_info.token")}
+          value={revealed ? token : masked}
+          onPress={() => setRevealed((r) => !r)}
+        />
+        <ListItem
+          title={t("home.settings.account.copy_token")}
+          textColor='blue'
+          onPress={copyToken}
+        />
+        <ListItem
+          title={t("home.settings.user_info.app_version")}
+          value={version}
+        />
+      </ListGroup>
+    </ScrollView>
+  );
+}

app/(auth)/(tabs)/(home)/settings/notifications/page.tsx

@@ -0,0 +1,68 @@
+import { Ionicons } from "@expo/vector-icons";
+import * as Notifications from "expo-notifications";
+import { t } from "i18next";
+import { useEffect, useState } from "react";
+import { Linking, ScrollView, Switch, View } from "react-native";
+import { Button } from "@/components/Button";
+import { Text } from "@/components/common/Text";
+import { ListGroup } from "@/components/list/ListGroup";
+import { ListItem } from "@/components/list/ListItem";
+import { useSettings } from "@/utils/atoms/settings";
+
+export default function NotificationsPage() {
+  const { settings, updateSettings } = useSettings();
+  const [perm, setPerm] =
+    useState<Notifications.NotificationPermissionsStatus | null>(null);
+
+  useEffect(() => {
+    Notifications.getPermissionsAsync().then(setPerm);
+  }, []);
+
+  const requestPermission = async () => {
+    const res = await Notifications.requestPermissionsAsync();
+    setPerm(res);
+    // Only bounce to system settings when the OS will not prompt again.
+    if (!res.granted && res.canAskAgain === false) {
+      Linking.openSettings();
+    }
+  };
+
+  if (!settings || perm === null) return null;
+
+  if (!perm.granted) {
+    return (
+      <View className='flex-1 items-center justify-center px-8'>
+        <Ionicons name='notifications-off-outline' size={56} color='#5A5960' />
+        <Text className='text-white text-lg font-semibold mt-4 text-center'>
+          {t("home.settings.notifications.disabled_title")}
+        </Text>
+        <Text className='text-[#9899A1] text-center mt-2'>
+          {t("home.settings.notifications.disabled_description")}
+        </Text>
+        <Button color='purple' className='mt-6' onPress={requestPermission}>
+          {t("home.settings.notifications.enable_button")}
+        </Button>
+      </View>
+    );
+  }
+
+  return (
+    <ScrollView contentContainerStyle={{ padding: 16 }}>
+      <ListGroup title={t("home.settings.notifications.events_title")}>
+        <ListItem title={t("home.settings.notifications.master")}>
+          <Switch
+            value={settings.notificationsEnabled}
+            onValueChange={(v) => updateSettings({ notificationsEnabled: v })}
+          />
+        </ListItem>
+        <ListItem title={t("home.settings.notifications.downloads")}>
+          <Switch
+            value={settings.notifyDownloads}
+            disabled={!settings.notificationsEnabled}
+            onValueChange={(v) => updateSettings({ notifyDownloads: v })}
+          />
+        </ListItem>
+      </ListGroup>
+    </ScrollView>
+  );
+}

app/(auth)/(tabs)/(home)/settings/playback-controls/page.tsx

@@ -20,18 +20,16 @@ export default function PlaybackControlsPage() {
       }}
     >
       <View
-        className='p-4 flex flex-col'
-        style={{ paddingTop: Platform.OS === "android" ? 10 : 0 }}
+        className='p-4'
+        style={{ gap: 16, paddingTop: Platform.OS === "android" ? 10 : 0 }}
       >
-        <View className='mb-4'>
-          <MediaProvider>
-            <MediaToggles className='mb-4' />
-            <GestureControls className='mb-4' />
-            <PlaybackControlsSettings />
-            <MpvBufferSettings />
-            <MpvVoSettings />
-          </MediaProvider>
-        </View>
+        <MediaProvider>
+          <MediaToggles />
+          <GestureControls />
+          <PlaybackControlsSettings />
+          <MpvBufferSettings />
+          <MpvVoSettings />
+        </MediaProvider>
         {!Platform.isTV && <ChromecastSettings />}
       </View>
     </ScrollView>

app/(auth)/(tabs)/(home)/settings/plugins/streamystats/page.tsx

@@ -114,7 +114,7 @@ export default function StreamystatsPage() {
   };
 
   const handleRefreshFromServer = useCallback(async () => {
-    const newPluginSettings = await refreshStreamyfinPluginSettings(true);
+    const newPluginSettings = await refreshStreamyfinPluginSettings();
     // Update local state with new values
     const newUrl = newPluginSettings?.streamyStatsServerUrl?.value || "";
     setUrl(newUrl);

app/(auth)/(tabs)/(libraries)/_layout.tsx

@@ -166,7 +166,7 @@ export default function IndexLayout() {
                 open={dropdownOpen}
                 onOpenChange={setDropdownOpen}
                 trigger={
-                  <View className='pl-1.5'>
+                  <View>
                     <Ionicons
                       name='ellipsis-horizontal-outline'
                       size={24}

app/(auth)/(tabs)/(libraries)/music/[libraryId]/_layout.tsx

@@ -40,6 +40,8 @@ const Layout = () => {
         keyboardDismissMode='none'
         screenOptions={{
           tabBarBounces: true,
+          tabBarActiveTintColor: "#FFFFFF",
+          tabBarInactiveTintColor: "#9CA3AF",
           tabBarLabelStyle: {
             fontSize: TAB_LABEL_FONT_SIZE,
             fontWeight: "600",

app/(auth)/player/direct-player.tsx

@@ -274,6 +274,11 @@ export default function DirectPlayerPage() {
     };
 
     if (itemId) {
+      setItem(null);
+      setDownloadedItem(null);
+      // Clear the previous episode's stream so the loader gate stays closed
+      // until the new item's stream resolves (avoids a stale MPV source frame).
+      setStream(null);
       fetchItemData();
     }
   }, [itemId, offline, api, user?.Id]);
@@ -316,6 +321,12 @@ export default function DirectPlayerPage() {
           return null;
         }
 
+        // Ensure item matches the current itemId to avoid race conditions
+        if (item.Id !== itemId) {
+          setStreamStatus({ isLoading: false, isError: false });
+          return null;
+        }
+
         let result: Stream | null = null;
         if (offline && downloadedItem?.mediaSource) {
           const url = downloadedItem.videoFilePath;
@@ -388,6 +399,7 @@ export default function DirectPlayerPage() {
     item,
     user?.Id,
     downloadedItem,
+    offline,
   ]);
 
   useEffect(() => {

bun.lock

@@ -31,6 +31,7 @@
         "expo-brightness": "~56.0.5",
         "expo-build-properties": "~56.0.15",
         "expo-camera": "~56.0.7",
+        "expo-clipboard": "~56.0.3",
         "expo-constants": "~56.0.16",
         "expo-crypto": "~56.0.4",
         "expo-dev-client": "~56.0.16",
@@ -103,8 +104,10 @@
         "@biomejs/biome": "2.4.16",
         "@react-native-community/cli": "20.1.3",
         "@react-native-tvos/config-tv": "0.1.6",
+        "@types/bun": "^1.3.14",
         "@types/jest": "29.5.14",
         "@types/lodash": "4.17.24",
+        "@types/node": "^24",
         "@types/react": "~19.2.10",
         "@types/react-test-renderer": "19.1.0",
         "cross-env": "10.1.0",
@@ -587,6 +590,8 @@
 
     "@types/aria-query": ["@types/aria-query@5.0.4", "", {}, "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw=="],
 
+    "@types/bun": ["@types/bun@1.3.14", "", { "dependencies": { "bun-types": "1.3.14" } }, "sha512-h1hFqFVcvAvD9j9K7ZW7vd82aSA+rTdznZa+5bwvCwqSB1jmmfLcbIWhOLx1/+boy/xmjgCs/OMUL8hRJSmnPw=="],
+
     "@types/emscripten": ["@types/emscripten@1.41.5", "", {}, "sha512-cMQm7pxu6BxtHyqJ7mQZ2kXWV5SLmugybFdHCBbJ5eHzOo6VhBckEgAT3//rP5FwPHNPeEiq4SmQ5ucBwsOo4Q=="],
 
     "@types/hammerjs": ["@types/hammerjs@2.0.46", "", {}, "sha512-ynRvcq6wvqexJ9brDMS4BnBLzmr0e14d6ZJTEShTBWKymQiHwlAyGu0ZPEFI2Fh1U53F7tN9ufClWM5KvqkKOw=="],
@@ -603,7 +608,7 @@
 
     "@types/lodash": ["@types/lodash@4.17.24", "", {}, "sha512-gIW7lQLZbue7lRSWEFql49QJJWThrTFFeIMJdp3eH4tKoxm1OvEPg02rm4wCCSHS0cL3/Fizimb35b7k8atwsQ=="],
 
-    "@types/node": ["@types/node@18.19.130", "", { "dependencies": { "undici-types": "~5.26.4" } }, "sha512-GRaXQx6jGfL8sKfaIDD6OupbIHBr9jv7Jnaml9tB7l4v068PAOXqfcujMMo5PhbIs6ggR1XODELqahT2R8v0fg=="],
+    "@types/node": ["@types/node@24.13.0", "", { "dependencies": { "undici-types": "~7.18.0" } }, "sha512-5vtOqGQr4NJKeEzV441FcOi2MeG9UTWq9LqVLGneDdu4vlX17H8kQ2PA2UmNwCUGPVDj4oBjNhS7ReVEIWJJrg=="],
 
     "@types/react": ["@types/react@19.2.15", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-eRwcGNHve+E8qtEQSSRl6urh+rFop4v8gm6O8rGv25CodbvFdLjA1vVQ1KkiFE0w0UPOnb8tDiFKL5lp0rtY5Q=="],
 
@@ -743,6 +748,8 @@
 
     "buffer-from": ["buffer-from@1.1.2", "", {}, "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="],
 
+    "bun-types": ["bun-types@1.3.14", "", { "dependencies": { "@types/node": "*" } }, "sha512-4N0ig0fEomHt5R0KCFWjovxow98rIoRwKolrYdCcknNwMekCXRnWEUvgu5soYV8QXtVsrUD8B95MBOZGPvr6KQ=="],
+
     "bytes": ["bytes@3.1.2", "", {}, "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg=="],
 
     "call-bind": ["call-bind@1.0.9", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.2", "es-define-property": "^1.0.1", "get-intrinsic": "^1.3.0", "set-function-length": "^1.2.2" } }, "sha512-a/hy+pNsFUTR+Iz8TCJvXudKVLAnz/DyeSUo10I5yvFDQJBFU2s9uqQpoSrJlroHUKoKqzg+epxyP9lqFdzfBQ=="],
@@ -955,6 +962,8 @@
 
     "expo-camera": ["expo-camera@56.0.7", "", { "dependencies": { "barcode-detector": "^3.0.0" }, "peerDependencies": { "expo": "*", "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native-web"] }, "sha512-c8z+UheidFintQyP9XLEDP43aK4PS/o9+TFLW0zEOjdqkYCBgoWq6Mw/Ps62kjBeftFY7xrp5ZLITbenNvbTaw=="],
 
+    "expo-clipboard": ["expo-clipboard@56.0.3", "", { "peerDependencies": { "expo": "*", "react": "*", "react-native": "*" } }, "sha512-8mCdhmAomm0yBIonJFjAhKUXvSkc2avdNh4+rBwoe7DSWF2AC4w3uy+pa419rvVFbTyVxOBmh83UHAbUwD6qAg=="],
+
     "expo-constants": ["expo-constants@56.0.16", "", { "dependencies": { "@expo/env": "~2.3.0" }, "peerDependencies": { "expo": "*", "react-native": "*" } }, "sha512-6tsiN+gmTUPp/atyA+uY9Tg8VOdXdmb4s/3TVGolfn6A/oCAraw1pcPZX5XllyD+xUguxB6eBSFAT8494hZVMA=="],
 
     "expo-crypto": ["expo-crypto@56.0.4", "", { "peerDependencies": { "expo": "*" } }, "sha512-fRNEhoXRXgAWBpe3/hq5X+KXTit3OZqdiAGts1YvNEUHQb+H5591mpPac0Yw+sZg9pXcrjRnzo5AxvZaENpc7g=="],
@@ -1827,7 +1836,7 @@
 
     "ua-parser-js": ["ua-parser-js@0.7.41", "", { "bin": { "ua-parser-js": "script/cli.js" } }, "sha512-O3oYyCMPYgNNHuO7Jjk3uacJWZF8loBgwrfd/5LE/HyZ3lUIOdniQ7DNXJcIgZbwioZxk0fLfI4EVnetdiX5jg=="],
 
-    "undici-types": ["undici-types@5.26.5", "", {}, "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="],
+    "undici-types": ["undici-types@7.18.2", "", {}, "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w=="],
 
     "unicode-canonical-property-names-ecmascript": ["unicode-canonical-property-names-ecmascript@2.0.1", "", {}, "sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg=="],
 
@@ -2031,6 +2040,8 @@
 
     "brace-expansion/balanced-match": ["balanced-match@4.0.4", "", {}, "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA=="],
 
+    "bun-types/@types/node": ["@types/node@25.9.1", "", { "dependencies": { "undici-types": ">=7.24.0 <7.24.7" } }, "sha512-xfrlY7UD5rMJk3ZVJP8BNzS28J36YJg+xp+LPXV1TdWxr8uMH5A860QNxYDGQe/ylDSgjxE52Q9VnO7p75tJxg=="],
+
     "chalk/ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
 
     "chokidar/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
@@ -2129,6 +2140,8 @@
 
     "nativewind/react-is": ["react-is@18.3.1", "", {}, "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="],
 
+    "node-vibrant/@types/node": ["@types/node@18.19.130", "", { "dependencies": { "undici-types": "~5.26.4" } }, "sha512-GRaXQx6jGfL8sKfaIDD6OupbIHBr9jv7Jnaml9tB7l4v068PAOXqfcujMMo5PhbIs6ggR1XODELqahT2R8v0fg=="],
+
     "npm-package-arg/semver": ["semver@7.8.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-rkVq3IXh+4FDGch+KwzX3aV9W3kO54GyEgpvBzSyctDA6Xtd7RJQV1xmXbeQp5v7+VzLOfVqiutSE6GICgPFvg=="],
 
     "parse-png/pngjs": ["pngjs@3.4.0", "", {}, "sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w=="],
@@ -2247,6 +2260,8 @@
 
     "ansi-fragments/strip-ansi/ansi-regex": ["ansi-regex@4.1.1", "", {}, "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g=="],
 
+    "bun-types/@types/node/undici-types": ["undici-types@7.24.6", "", {}, "sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg=="],
+
     "chalk/ansi-styles/color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="],
 
     "chrome-launcher/@types/node/undici-types": ["undici-types@7.24.6", "", {}, "sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg=="],
@@ -2303,6 +2318,8 @@
 
     "metro/mime-types/mime-db": ["mime-db@1.54.0", "", {}, "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ=="],
 
+    "node-vibrant/@types/node/undici-types": ["undici-types@5.26.5", "", {}, "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="],
+
     "patch-package/fs-extra/jsonfile": ["jsonfile@6.2.1", "", { "dependencies": { "universalify": "^2.0.0" }, "optionalDependencies": { "graceful-fs": "^4.1.6" } }, "sha512-zwOTdL3rFQ/lRdBnntKVOX6k5cKJwEc1HdilT71BWEu7J41gXIB2MRp+vxduPSwZJPWBxEzv4yH1wYLJGUHX4Q=="],
 
     "patch-package/fs-extra/universalify": ["universalify@2.0.1", "", {}, "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw=="],

components/PlatformDropdown.tsx

@@ -1,13 +1,7 @@
 import { Ionicons } from "@expo/vector-icons";
 import { BottomSheetScrollView } from "@gorhom/bottom-sheet";
-import React, { useEffect, useState } from "react";
-import {
-  type LayoutChangeEvent,
-  Platform,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from "react-native";
+import React, { useEffect } from "react";
+import { Platform, StyleSheet, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
 import { useGlobalModal } from "@/providers/GlobalModalProvider";
@@ -217,24 +211,6 @@ const PlatformDropdownComponent = ({
 }: PlatformDropdownProps) => {
   const { showModal, hideModal, isVisible } = useGlobalModal();
 
-  // @expo/ui's <Host> (SDK 55) fills its available space by default, and
-  // `matchContents` doesn't help here: it reports the native Menu's size via
-  // setStyleSize and overrides any explicit size. Instead we measure the
-  // trigger's intrinsic size in plain RN (off-layout) and pin it on the Host.
-  const [triggerSize, setTriggerSize] = useState<{
-    width: number;
-    height: number;
-  } | null>(null);
-
-  const handleMeasureTrigger = (e: LayoutChangeEvent) => {
-    const { width, height } = e.nativeEvent.layout;
-    setTriggerSize((prev) =>
-      prev && prev.width === width && prev.height === height
-        ? prev
-        : { width, height },
-    );
-  };
-
   // Handle controlled open state for Android
   useEffect(() => {
     if (Platform.OS === "android" && controlledOpen === true) {
@@ -265,25 +241,11 @@ const PlatformDropdownComponent = ({
   }, [isVisible, controlledOpen, controlledOnOpenChange]);
 
   if (Platform.OS === "ios" && !Platform.isTV) {
-    // Pin the wrapper to the measured trigger size. @expo/ui's <Host> (SDK 55)
-    // fills its parent and reports its own size via setStyleSize, so it can't
-    // size itself to content. If the wrapper has no size, the Host's `flex: 1`
-    // height depends on the parent while the parent depends on the Host — a
-    // circular dependency that collapses to 0 for any selector nested more than
-    // one level deep (so only the first, shallowest dropdown stays visible).
-    // Giving the wrapper the measured size breaks the cycle; the Host then
-    // fills a concrete box.
+    // @expo/ui's <Host> can't size to content, so an in-flow invisible copy of
+    // the trigger sizes the wrapper while the Host overlays the real Menu.
     return (
-      <View style={triggerSize ?? { opacity: 0 }}>
-        {/* Hidden measurer: lays the trigger out off-flow to capture its
-            intrinsic size. Absolutely positioned WITHOUT right/bottom so it
-            sizes to the trigger's content rather than to its parent. */}
-        <View
-          style={{ position: "absolute", top: 0, left: 0, opacity: 0 }}
-          pointerEvents='none'
-          aria-hidden
-          onLayout={handleMeasureTrigger}
-        >
+      <View>
+        <View pointerEvents='none' aria-hidden style={{ opacity: 0 }}>
           {trigger}
         </View>
         <Host style={[StyleSheet.absoluteFill, expoUIConfig?.hostStyle as any]}>

components/chapters/ChapterList.tsx

@@ -11,6 +11,7 @@ import { useTranslation } from "react-i18next";
 import { FlatList, Modal, Pressable, StyleSheet, View } from "react-native";
 import { Text } from "@/components/common/Text";
 import { Colors } from "@/constants/Colors";
+import { useControlsSafeAreaInsets } from "@/hooks/useControlsSafeAreaInsets";
 import {
   type ChapterEntry,
   chapterStartsMs,
@@ -38,6 +39,7 @@ function ChapterListComponent({
   onClose,
 }: ChapterListProps) {
   const { t } = useTranslation();
+  const safeArea = useControlsSafeAreaInsets();
   const listRef = useRef<FlatList<ChapterEntry>>(null);
 
   const entries = useMemo(() => sortedChapters(chapters), [chapters]);
@@ -79,7 +81,17 @@ function ChapterListComponent({
       supportedOrientations={["portrait", "landscape"]}
     >
       <Pressable onPress={onClose} style={styles.backdrop}>
-        <Pressable onPress={(e) => e.stopPropagation()} style={styles.sheet}>
+        <Pressable
+          onPress={(e) => e.stopPropagation()}
+          style={[
+            styles.sheet,
+            {
+              marginLeft: safeArea.left,
+              marginRight: safeArea.right,
+              paddingBottom: safeArea.bottom,
+            },
+          ]}
+        >
           <View style={styles.header}>
             <Text style={styles.title}>{t("chapters.title")}</Text>
             <Pressable
@@ -160,14 +172,12 @@ const styles = StyleSheet.create({
   backdrop: {
     flex: 1,
     justifyContent: "flex-end",
-    backgroundColor: "rgba(0,0,0,0.6)",
   },
   sheet: {
     backgroundColor: Colors.background,
     borderTopLeftRadius: 16,
     borderTopRightRadius: 16,
     maxHeight: "70%",
-    paddingBottom: 24,
   },
   header: {
     flexDirection: "row",

components/home/Home.tsx

@@ -133,7 +133,6 @@ const HomeMobile = () => {
           onPress={() => {
             router.push("/(auth)/downloads");
           }}
-          className='ml-1.5'
           style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
         >
           <Feather

components/list/ListItem.tsx

@@ -34,12 +34,13 @@ export const ListItem: React.FC<PropsWithChildren<Props>> = ({
 }) => {
   const effectiveSubtitle = disabledByAdmin ? "Disabled by admin" : subtitle;
   const isDisabled = disabled || disabledByAdmin;
+  const hasSubtitle = Boolean(effectiveSubtitle);
   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 ${hasSubtitle ? "min-h-[48px] py-2" : "h-[48px]"} px-4 ${isDisabled ? "opacity-50" : ""}`}
         {...(viewProps as any)}
       >
         <ListItemContent
@@ -58,7 +59,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 ${hasSubtitle ? "min-h-[48px] py-2" : "h-[48px]"} px-4 ${isDisabled ? "opacity-50" : ""}`}
       {...viewProps}
     >
       <ListItemContent

components/login/TVAddServerForm.tsx

@@ -1,6 +1,6 @@
 import { t } from "i18next";
 import React, { useCallback, useState } from "react";
-import { ScrollView, View } from "react-native";
+import { Platform, ScrollView, View } from "react-native";
 import { Button } from "@/components/Button";
 import { Text } from "@/components/common/Text";
 import { useScaledTVTypography } from "@/constants/TVTypography";
@@ -107,7 +107,7 @@ export const TVAddServerForm: React.FC<TVAddServerFormProps> = ({
         </View>
 
         {/* Pair with Phone */}
-        {onStartPairing && (
+        {Platform.OS !== "ios" && onStartPairing && (
           <View>
             <Button
               onPress={onStartPairing}

components/search/TVJellyseerrSearchResults.tsx

@@ -401,10 +401,6 @@ export const TVJellyseerrSearchResults: React.FC<
 }) => {
   const { t } = useTranslation();
 
-  const hasMovies = movieResults && movieResults.length > 0;
-  const hasTv = tvResults && tvResults.length > 0;
-  const hasPersons = personResults && personResults.length > 0;
-
   if (loading) {
     return null;
   }
@@ -431,22 +427,26 @@ export const TVJellyseerrSearchResults: React.FC<
 
   return (
     <View>
+      {/* No section requests `hasTVPreferredFocus`: the native search field
+          keeps focus while typing, otherwise the first result would re-grab
+          focus on every keystroke as results re-render. The user navigates
+          down to the grid manually. */}
       <TVJellyseerrMovieSection
         title={t("search.request_movies")}
         items={movieResults}
-        isFirstSection={hasMovies}
+        isFirstSection={false}
         onItemPress={onMoviePress}
       />
       <TVJellyseerrTvSection
         title={t("search.request_series")}
         items={tvResults}
-        isFirstSection={!hasMovies && hasTv}
+        isFirstSection={false}
         onItemPress={onTvPress}
       />
       <TVJellyseerrPersonSection
         title={t("search.actors")}
         items={personResults}
-        isFirstSection={!hasMovies && !hasTv && hasPersons}
+        isFirstSection={false}
         onItemPress={onPersonPress}
       />
     </View>

components/search/TVSearchPage.tsx

@@ -235,10 +235,13 @@ export const TVSearchPage: React.FC<TVSearchPageProps> = ({
             module). It renders the native search bar + grid keyboard and
             forwards typed text into the existing query pipeline via setSearch;
             our own results grid renders below. */}
+        {/* No horizontal margin here: the native tvOS search bar centers itself
+            and renders a trailing "Hold to Dictate in <Language>" hint. Extra
+            margins squeeze the bar's width and clip that trailing hint, so let
+            the native view span the full width and own its own insets. */}
         <View
           style={{
             marginBottom: 24,
-            marginHorizontal: HORIZONTAL_PADDING,
             height: SEARCH_AREA_HEIGHT,
           }}
         >
@@ -280,13 +283,17 @@ export const TVSearchPage: React.FC<TVSearchPageProps> = ({
         {/* Library Search Results */}
         {isLibraryMode && !loading && (
           <View style={{ gap: SECTION_GAP }}>
-            {sections.map((section, index) => (
+            {sections.map((section) => (
               <TVSearchSection
                 key={section.key}
                 title={section.title}
                 items={section.items!}
                 orientation={section.orientation || "vertical"}
-                isFirstSection={index === 0}
+                // Never auto-focus a result. The native search field owns focus
+                // while typing; `hasTVPreferredFocus` here would re-grab focus on
+                // every keystroke as results re-render. User navigates down to the
+                // grid manually.
+                isFirstSection={false}
                 onItemPress={onItemPress}
                 onItemLongPress={onItemLongPress}
                 imageUrlGetter={

components/search/TVSearchSection.tsx

@@ -297,12 +297,12 @@ export const TVSearchSection: React.FC<TVSearchSectionProps> = ({
         removeClippedSubviews={false}
         getItemLayout={getItemLayout}
         style={{ overflow: "visible" }}
-        contentInset={{
-          left: edgePadding,
-          right: edgePadding,
-        }}
-        contentOffset={{ x: -edgePadding, y: 0 }}
+        // Edge padding via contentContainerStyle, NOT contentInset+contentOffset.
+        // contentOffset only applies on initial mount; since this FlatList is
+        // reused across searches (stable key), a second search left the inset
+        // without the offset and the grid snapped flush to the left edge.
         contentContainerStyle={{
+          paddingHorizontal: edgePadding,
           paddingVertical: SCALE_PADDING,
         }}
       />

components/series/SeasonEpisodesCarousel.tsx

@@ -31,8 +31,12 @@ export const SeasonEpisodesCarousel: React.FC<Props> = ({
 }) => {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
-  const isOffline = useOfflineMode();
   const router = useRouter();
+  const isOffline = useOfflineMode();
+  // Read the live (cached) downloads DB inside the query rather than the
+  // provider's downloadedItems snapshot, so refetches after
+  // updateDownloadedItem() reflect the latest state instead of a stale
+  // refreshKey-gated snapshot. getAllDownloadedItems() is cached, so this stays cheap.
   const { getDownloadedItems } = useDownload();
 
   const scrollRef = useRef<HorizontalScrollRef>(null);

components/settings/ChromecastSettings.tsx

@@ -1,21 +1,22 @@
-import { Switch, View } from "react-native";
+import { useTranslation } from "react-i18next";
+import { View } from "react-native";
+import { SettingsSwitchRow } from "@/components/settings/index/SettingsSwitchRow";
 import { useSettings } from "@/utils/atoms/settings";
 import { ListGroup } from "../list/ListGroup";
-import { ListItem } from "../list/ListItem";
 
 export const ChromecastSettings: React.FC = ({ ...props }) => {
   const { settings, updateSettings } = useSettings();
+  const { t } = useTranslation();
   return (
     <View {...props}>
-      <ListGroup title={"Chromecast"}>
-        <ListItem title={"Enable H265 for Chromecast"}>
-          <Switch
-            value={settings.enableH265ForChromecast}
-            onValueChange={(enableH265ForChromecast) =>
-              updateSettings({ enableH265ForChromecast })
-            }
-          />
-        </ListItem>
+      <ListGroup title={t("home.settings.chromecast.title")}>
+        <SettingsSwitchRow
+          title={t("home.settings.chromecast.enable_h265")}
+          value={settings.enableH265ForChromecast}
+          onValueChange={(enableH265ForChromecast) =>
+            updateSettings({ enableH265ForChromecast })
+          }
+        />
       </ListGroup>
     </View>
   );

components/settings/GestureControls.tsx

@@ -2,11 +2,10 @@ 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 DisabledSetting from "@/components/settings/DisabledSetting";
+import { SettingsSwitchRow } from "@/components/settings/index/SettingsSwitchRow";
 import { useSettings } from "@/utils/atoms/settings";
 import { ListGroup } from "../list/ListGroup";
-import { ListItem } from "../list/ListItem";
 
 interface Props extends ViewProps {}
 
@@ -32,85 +31,65 @@ export const GestureControls: React.FC<Props> = ({ ...props }) => {
       <ListGroup
         title={t("home.settings.gesture_controls.gesture_controls_title")}
       >
-        <ListItem
+        <SettingsSwitchRow
           title={t("home.settings.gesture_controls.horizontal_swipe_skip")}
           subtitle={t(
             "home.settings.gesture_controls.horizontal_swipe_skip_description",
           )}
           disabled={pluginSettings?.enableHorizontalSwipeSkip?.locked}
-        >
-          <Switch
-            value={settings.enableHorizontalSwipeSkip}
-            disabled={pluginSettings?.enableHorizontalSwipeSkip?.locked}
-            onValueChange={(enableHorizontalSwipeSkip) =>
-              updateSettings({ enableHorizontalSwipeSkip })
-            }
-          />
-        </ListItem>
+          value={settings.enableHorizontalSwipeSkip}
+          onValueChange={(enableHorizontalSwipeSkip) =>
+            updateSettings({ enableHorizontalSwipeSkip })
+          }
+        />
 
-        <ListItem
+        <SettingsSwitchRow
           title={t("home.settings.gesture_controls.left_side_brightness")}
           subtitle={t(
             "home.settings.gesture_controls.left_side_brightness_description",
           )}
           disabled={pluginSettings?.enableLeftSideBrightnessSwipe?.locked}
-        >
-          <Switch
-            value={settings.enableLeftSideBrightnessSwipe}
-            disabled={pluginSettings?.enableLeftSideBrightnessSwipe?.locked}
-            onValueChange={(enableLeftSideBrightnessSwipe) =>
-              updateSettings({ enableLeftSideBrightnessSwipe })
-            }
-          />
-        </ListItem>
+          value={settings.enableLeftSideBrightnessSwipe}
+          onValueChange={(enableLeftSideBrightnessSwipe) =>
+            updateSettings({ enableLeftSideBrightnessSwipe })
+          }
+        />
 
-        <ListItem
+        <SettingsSwitchRow
           title={t("home.settings.gesture_controls.right_side_volume")}
           subtitle={t(
             "home.settings.gesture_controls.right_side_volume_description",
           )}
           disabled={pluginSettings?.enableRightSideVolumeSwipe?.locked}
-        >
-          <Switch
-            value={settings.enableRightSideVolumeSwipe}
-            disabled={pluginSettings?.enableRightSideVolumeSwipe?.locked}
-            onValueChange={(enableRightSideVolumeSwipe) =>
-              updateSettings({ enableRightSideVolumeSwipe })
-            }
-          />
-        </ListItem>
+          value={settings.enableRightSideVolumeSwipe}
+          onValueChange={(enableRightSideVolumeSwipe) =>
+            updateSettings({ enableRightSideVolumeSwipe })
+          }
+        />
 
-        <ListItem
+        <SettingsSwitchRow
           title={t("home.settings.gesture_controls.hide_volume_slider")}
           subtitle={t(
             "home.settings.gesture_controls.hide_volume_slider_description",
           )}
           disabled={pluginSettings?.hideVolumeSlider?.locked}
-        >
-          <Switch
-            value={settings.hideVolumeSlider}
-            disabled={pluginSettings?.hideVolumeSlider?.locked}
-            onValueChange={(hideVolumeSlider) =>
-              updateSettings({ hideVolumeSlider })
-            }
-          />
-        </ListItem>
+          value={settings.hideVolumeSlider}
+          onValueChange={(hideVolumeSlider) =>
+            updateSettings({ hideVolumeSlider })
+          }
+        />
 
-        <ListItem
+        <SettingsSwitchRow
           title={t("home.settings.gesture_controls.hide_brightness_slider")}
           subtitle={t(
             "home.settings.gesture_controls.hide_brightness_slider_description",
           )}
           disabled={pluginSettings?.hideBrightnessSlider?.locked}
-        >
-          <Switch
-            value={settings.hideBrightnessSlider}
-            disabled={pluginSettings?.hideBrightnessSlider?.locked}
-            onValueChange={(hideBrightnessSlider) =>
-              updateSettings({ hideBrightnessSlider })
-            }
-          />
-        </ListItem>
+          value={settings.hideBrightnessSlider}
+          onValueChange={(hideBrightnessSlider) =>
+            updateSettings({ hideBrightnessSlider })
+          }
+        />
       </ListGroup>
     </DisabledSetting>
   );

components/settings/MediaToggles.tsx

@@ -2,11 +2,10 @@ import type React from "react";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import type { ViewProps } from "react-native";
-import { Stepper } from "@/components/inputs/Stepper";
 import DisabledSetting from "@/components/settings/DisabledSetting";
+import { SettingsStepperRow } from "@/components/settings/index/SettingsStepperRow";
 import { useSettings } from "@/utils/atoms/settings";
 import { ListGroup } from "../list/ListGroup";
-import { ListItem } from "../list/ListItem";
 
 interface Props extends ViewProps {}
 
@@ -27,35 +26,27 @@ export const MediaToggles: React.FC<Props> = ({ ...props }) => {
   return (
     <DisabledSetting disabled={disabled} {...props}>
       <ListGroup title={t("home.settings.media_controls.media_controls_title")}>
-        <ListItem
+        <SettingsStepperRow
           title={t("home.settings.media_controls.forward_skip_length")}
           disabled={pluginSettings?.forwardSkipTime?.locked}
-        >
-          <Stepper
-            value={settings.forwardSkipTime}
-            disabled={pluginSettings?.forwardSkipTime?.locked}
-            step={5}
-            appendValue={t("home.settings.media_controls.seconds_unit")}
-            min={0}
-            max={60}
-            onUpdate={(forwardSkipTime) => updateSettings({ forwardSkipTime })}
-          />
-        </ListItem>
+          value={settings.forwardSkipTime}
+          step={5}
+          appendValue={t("home.settings.media_controls.seconds_unit")}
+          min={0}
+          max={60}
+          onUpdate={(forwardSkipTime) => updateSettings({ forwardSkipTime })}
+        />
 
-        <ListItem
+        <SettingsStepperRow
           title={t("home.settings.media_controls.rewind_length")}
           disabled={pluginSettings?.rewindSkipTime?.locked}
-        >
-          <Stepper
-            value={settings.rewindSkipTime}
-            disabled={pluginSettings?.rewindSkipTime?.locked}
-            step={5}
-            appendValue={t("home.settings.media_controls.seconds_unit")}
-            min={0}
-            max={60}
-            onUpdate={(rewindSkipTime) => updateSettings({ rewindSkipTime })}
-          />
-        </ListItem>
+          value={settings.rewindSkipTime}
+          step={5}
+          appendValue={t("home.settings.media_controls.seconds_unit")}
+          min={0}
+          max={60}
+          onUpdate={(rewindSkipTime) => updateSettings({ rewindSkipTime })}
+        />
       </ListGroup>
     </DisabledSetting>
   );

components/settings/MpvBufferSettings.tsx

@@ -1,14 +1,10 @@
-import { Ionicons } from "@expo/vector-icons";
 import type React from "react";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { View } from "react-native";
-import { Stepper } from "@/components/inputs/Stepper";
-import { PlatformDropdown } from "@/components/PlatformDropdown";
+import { SettingsSelectRow } from "@/components/settings/index/SettingsSelectRow";
+import { SettingsStepperRow } from "@/components/settings/index/SettingsStepperRow";
 import { type MpvCacheMode, useSettings } from "@/utils/atoms/settings";
-import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
-import { ListItem } from "../list/ListItem";
 
 const CACHE_MODE_OPTIONS: { key: string; value: MpvCacheMode }[] = [
   { key: "home.settings.buffer.cache_auto", value: "auto" },
@@ -45,56 +41,43 @@ export const MpvBufferSettings: React.FC = () => {
   if (!settings) return null;
 
   return (
-    <ListGroup title={t("home.settings.buffer.title")} className='mb-4'>
-      <ListItem title={t("home.settings.buffer.cache_mode")}>
-        <PlatformDropdown
-          groups={cacheModeOptions}
-          trigger={
-            <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
-              <Text className='mr-1 text-[#8E8D91]'>
-                {currentCacheModeLabel}
-              </Text>
-              <Ionicons name='chevron-expand-sharp' size={18} color='#5A5960' />
-            </View>
-          }
-          title={t("home.settings.buffer.cache_mode")}
-        />
-      </ListItem>
+    <ListGroup title={t("home.settings.buffer.title")}>
+      <SettingsSelectRow
+        title={t("home.settings.buffer.cache_mode")}
+        valueLabel={currentCacheModeLabel}
+        groups={cacheModeOptions}
+        dropdownTitle={t("home.settings.buffer.cache_mode")}
+      />
 
-      <ListItem title={t("home.settings.buffer.buffer_duration")}>
-        <Stepper
-          value={settings.mpvCacheSeconds ?? 10}
-          step={5}
-          min={5}
-          max={120}
-          onUpdate={(value) => updateSettings({ mpvCacheSeconds: value })}
-          appendValue='s'
-        />
-      </ListItem>
+      <SettingsStepperRow
+        title={t("home.settings.buffer.buffer_duration")}
+        value={settings.mpvCacheSeconds ?? 10}
+        step={5}
+        min={5}
+        max={120}
+        onUpdate={(value) => updateSettings({ mpvCacheSeconds: value })}
+        appendValue='s'
+      />
 
-      <ListItem title={t("home.settings.buffer.max_cache_size")}>
-        <Stepper
-          value={settings.mpvDemuxerMaxBytes ?? 150}
-          step={25}
-          min={50}
-          max={500}
-          onUpdate={(value) => updateSettings({ mpvDemuxerMaxBytes: value })}
-          appendValue=' MB'
-        />
-      </ListItem>
+      <SettingsStepperRow
+        title={t("home.settings.buffer.max_cache_size")}
+        value={settings.mpvDemuxerMaxBytes ?? 150}
+        step={25}
+        min={50}
+        max={500}
+        onUpdate={(value) => updateSettings({ mpvDemuxerMaxBytes: value })}
+        appendValue=' MB'
+      />
 
-      <ListItem title={t("home.settings.buffer.max_backward_cache")}>
-        <Stepper
-          value={settings.mpvDemuxerMaxBackBytes ?? 50}
-          step={25}
-          min={25}
-          max={200}
-          onUpdate={(value) =>
-            updateSettings({ mpvDemuxerMaxBackBytes: value })
-          }
-          appendValue=' MB'
-        />
-      </ListItem>
+      <SettingsStepperRow
+        title={t("home.settings.buffer.max_backward_cache")}
+        value={settings.mpvDemuxerMaxBackBytes ?? 50}
+        step={25}
+        min={25}
+        max={200}
+        onUpdate={(value) => updateSettings({ mpvDemuxerMaxBackBytes: value })}
+        appendValue=' MB'
+      />
     </ListGroup>
   );
 };

components/settings/MpvVoSettings.tsx

@@ -1,13 +1,10 @@
-import { Ionicons } from "@expo/vector-icons";
 import type React from "react";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Platform, View } from "react-native";
-import { PlatformDropdown } from "@/components/PlatformDropdown";
+import { Platform } from "react-native";
+import { SettingsSelectRow } from "@/components/settings/index/SettingsSelectRow";
 import { type MpvVoDriver, useSettings } from "@/utils/atoms/settings";
-import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
-import { ListItem } from "../list/ListItem";
 
 const VO_DRIVER_OPTIONS: { key: string; value: MpvVoDriver }[] = [
   { key: "home.settings.vo_driver.gpu_next", value: "gpu-next" },
@@ -46,21 +43,13 @@ export const MpvVoSettings: React.FC = () => {
   if (!settings) return null;
 
   return (
-    <ListGroup title={t("home.settings.vo_driver.title")} className='mb-4'>
-      <ListItem title={t("home.settings.vo_driver.vo_mode")}>
-        <PlatformDropdown
-          groups={voDriverOptions}
-          trigger={
-            <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
-              <Text className='mr-1 text-[#8E8D91]'>
-                {currentVoDriverLabel}
-              </Text>
-              <Ionicons name='chevron-expand-sharp' size={18} color='#5A5960' />
-            </View>
-          }
-          title={t("home.settings.vo_driver.vo_mode")}
-        />
-      </ListItem>
+    <ListGroup title={t("home.settings.vo_driver.title")}>
+      <SettingsSelectRow
+        title={t("home.settings.vo_driver.vo_mode")}
+        valueLabel={currentVoDriverLabel}
+        groups={voDriverOptions}
+        dropdownTitle={t("home.settings.vo_driver.vo_mode")}
+      />
     </ListGroup>
   );
 };

components/settings/OtherSettings.tsx

@@ -196,7 +196,10 @@ export const OtherSettings: React.FC = () => {
             }
           />
         </ListItem>
-        <ListItem title={t("home.settings.other.max_auto_play_episode_count")}>
+        <ListItem
+          title={t("home.settings.other.max_auto_play_episode_count")}
+          disabled={pluginSettings?.maxAutoPlayEpisodeCount?.locked}
+        >
           <PlatformDropdown
             groups={autoPlayEpisodeOptions}
             trigger={

components/settings/PlaybackControlsSettings.tsx

@@ -1,18 +1,15 @@
-import { Ionicons } from "@expo/vector-icons";
 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 { BITRATES } from "@/components/BitrateSelector";
-import { PlatformDropdown } from "@/components/PlatformDropdown";
 import { PLAYBACK_SPEEDS } from "@/components/PlaybackSpeedSelector";
 import DisabledSetting from "@/components/settings/DisabledSetting";
+import { SettingsSelectRow } from "@/components/settings/index/SettingsSelectRow";
+import { SettingsSwitchRow } from "@/components/settings/index/SettingsSwitchRow";
 import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { ScreenOrientationEnum, useSettings } from "@/utils/atoms/settings";
-import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
-import { ListItem } from "../list/ListItem";
 
 export const PlaybackControlsSettings: React.FC = () => {
   const { settings, updateSettings, pluginSettings } = useSettings();
@@ -116,138 +113,77 @@ export const PlaybackControlsSettings: React.FC = () => {
   return (
     <DisabledSetting disabled={disabled}>
       <ListGroup title={t("home.settings.other.other_title")} className=''>
-        <ListItem
+        <SettingsSelectRow
           title={t("home.settings.other.video_orientation")}
           disabled={pluginSettings?.defaultVideoOrientation?.locked}
-        >
-          <PlatformDropdown
-            groups={orientationOptions}
-            trigger={
-              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
-                <Text className='mr-1 text-[#8E8D91]'>
-                  {t(
-                    orientationTranslations[
-                      settings.defaultVideoOrientation as keyof typeof orientationTranslations
-                    ],
-                  ) || "Unknown Orientation"}
-                </Text>
-                <Ionicons
-                  name='chevron-expand-sharp'
-                  size={18}
-                  color='#5A5960'
-                />
-              </View>
-            }
-            title={t("home.settings.other.orientation")}
-          />
-        </ListItem>
+          valueLabel={
+            t(
+              orientationTranslations[
+                settings.defaultVideoOrientation as keyof typeof orientationTranslations
+              ],
+            ) || "Unknown Orientation"
+          }
+          groups={orientationOptions}
+          dropdownTitle={t("home.settings.other.orientation")}
+        />
 
-        <ListItem
+        <SettingsSwitchRow
           title={t("home.settings.other.safe_area_in_controls")}
           disabled={pluginSettings?.safeAreaInControlsEnabled?.locked}
-        >
-          <Switch
-            value={settings.safeAreaInControlsEnabled}
-            disabled={pluginSettings?.safeAreaInControlsEnabled?.locked}
-            onValueChange={(value) =>
-              updateSettings({ safeAreaInControlsEnabled: value })
-            }
-          />
-        </ListItem>
+          value={settings.safeAreaInControlsEnabled}
+          onValueChange={(value) =>
+            updateSettings({ safeAreaInControlsEnabled: value })
+          }
+        />
 
-        <ListItem
+        <SettingsSelectRow
           title={t("home.settings.other.default_quality")}
           disabled={pluginSettings?.defaultBitrate?.locked}
-        >
-          <PlatformDropdown
-            groups={bitrateOptions}
-            trigger={
-              <View className='flex flex-row items-center justify-between pl-3 py-1.5 '>
-                <Text className='mr-1 text-[#8E8D91]'>
-                  {settings.defaultBitrate?.key}
-                </Text>
-                <Ionicons
-                  name='chevron-expand-sharp'
-                  size={18}
-                  color='#5A5960'
-                />
-              </View>
-            }
-            title={t("home.settings.other.default_quality")}
-          />
-        </ListItem>
+          valueLabel={settings.defaultBitrate?.key}
+          groups={bitrateOptions}
+          dropdownTitle={t("home.settings.other.default_quality")}
+        />
 
-        <ListItem
+        <SettingsSelectRow
           title={t("home.settings.other.default_playback_speed")}
           disabled={pluginSettings?.defaultPlaybackSpeed?.locked}
-        >
-          <PlatformDropdown
-            groups={playbackSpeedOptions}
-            trigger={
-              <View className='flex flex-row items-center justify-between pl-3 py-1.5'>
-                <Text className='mr-1 text-[#8E8D91]'>
-                  {PLAYBACK_SPEEDS.find(
-                    (s) => s.value === settings.defaultPlaybackSpeed,
-                  )?.label ?? "1x"}
-                </Text>
-                <Ionicons
-                  name='chevron-expand-sharp'
-                  size={18}
-                  color='#5A5960'
-                />
-              </View>
-            }
-            title={t("home.settings.other.default_playback_speed")}
-          />
-        </ListItem>
+          valueLabel={
+            PLAYBACK_SPEEDS.find(
+              (s) => s.value === settings.defaultPlaybackSpeed,
+            )?.label ?? "1x"
+          }
+          groups={playbackSpeedOptions}
+          dropdownTitle={t("home.settings.other.default_playback_speed")}
+        />
 
-        <ListItem
+        <SettingsSwitchRow
           title={t("home.settings.other.disable_haptic_feedback")}
           disabled={pluginSettings?.disableHapticFeedback?.locked}
-        >
-          <Switch
-            value={settings.disableHapticFeedback}
-            disabled={pluginSettings?.disableHapticFeedback?.locked}
-            onValueChange={(disableHapticFeedback) =>
-              updateSettings({ disableHapticFeedback })
-            }
-          />
-        </ListItem>
+          value={settings.disableHapticFeedback}
+          onValueChange={(disableHapticFeedback) =>
+            updateSettings({ disableHapticFeedback })
+          }
+        />
 
-        <ListItem
+        <SettingsSwitchRow
           title={t("home.settings.other.auto_play_next_episode")}
           disabled={pluginSettings?.autoPlayNextEpisode?.locked}
-        >
-          <Switch
-            value={settings.autoPlayNextEpisode}
-            disabled={pluginSettings?.autoPlayNextEpisode?.locked}
-            onValueChange={(autoPlayNextEpisode) =>
-              updateSettings({ autoPlayNextEpisode })
-            }
-          />
-        </ListItem>
+          value={settings.autoPlayNextEpisode}
+          onValueChange={(autoPlayNextEpisode) =>
+            updateSettings({ autoPlayNextEpisode })
+          }
+        />
 
-        <ListItem
+        <SettingsSelectRow
           title={t("home.settings.other.max_auto_play_episode_count")}
-          disabled={!settings.autoPlayNextEpisode}
-        >
-          <PlatformDropdown
-            groups={autoPlayEpisodeOptions}
-            trigger={
-              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
-                <Text className='mr-1 text-[#8E8D91]'>
-                  {t(settings?.maxAutoPlayEpisodeCount.key)}
-                </Text>
-                <Ionicons
-                  name='chevron-expand-sharp'
-                  size={18}
-                  color='#5A5960'
-                />
-              </View>
-            }
-            title={t("home.settings.other.max_auto_play_episode_count")}
-          />
-        </ListItem>
+          disabled={
+            !settings.autoPlayNextEpisode ||
+            pluginSettings?.maxAutoPlayEpisodeCount?.locked
+          }
+          valueLabel={t(settings?.maxAutoPlayEpisodeCount.key)}
+          groups={autoPlayEpisodeOptions}
+          dropdownTitle={t("home.settings.other.max_auto_play_episode_count")}
+        />
       </ListGroup>
     </DisabledSetting>
   );

components/settings/QuickConnect.tsx

@@ -1,54 +1,57 @@
-import {
-  BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetView,
-} from "@gorhom/bottom-sheet";
 import { getQuickConnectApi } from "@jellyfin/sdk/lib/utils/api";
 import { useAtom } from "jotai";
-import type React from "react";
-import { useCallback, useMemo, useRef, useState } from "react";
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { useTranslation } from "react-i18next";
-import { Alert, Platform, View, type ViewProps } from "react-native";
+import { Alert, Platform, View } from "react-native";
 import { useHaptic } from "@/hooks/useHaptic";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import {
+  type BottomSheetMethods,
+  BottomSheetModal,
+  BottomSheetView,
+} from "@/utils/expoUiBottomSheet";
 import { Button } from "../Button";
 import { Text } from "../common/Text";
 import { PinInput } from "../inputs/PinInput";
-import { ListGroup } from "../list/ListGroup";
-import { ListItem } from "../list/ListItem";
 
-interface Props extends ViewProps {}
+export type QuickConnectSheetRef = { present: () => void };
 
-export const QuickConnect: React.FC<Props> = ({ ...props }) => {
-  const isTv = Platform.isTV;
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-  const [quickConnectCode, setQuickConnectCode] = useState<string>();
-  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
-  const successHapticFeedback = useHaptic("success");
-  const errorHapticFeedback = useHaptic("error");
-  const snapPoints = useMemo(
-    () => (Platform.OS === "android" ? ["100%"] : ["40%"]),
-    [],
-  );
-  const isAndroid = Platform.OS === "android";
+export const QuickConnectSheet = forwardRef<QuickConnectSheetRef>(
+  (_props, ref) => {
+    const isTv = Platform.isTV;
+    const [api] = useAtom(apiAtom);
+    const [user] = useAtom(userAtom);
+    const [quickConnectCode, setQuickConnectCode] = useState<string>();
+    const modalRef = useRef<BottomSheetMethods>(null);
+    const successHapticFeedback = useHaptic("success");
+    const errorHapticFeedback = useHaptic("error");
+    const snapPoints = useMemo(
+      () => (Platform.OS === "android" ? ["100%"] : ["40%"]),
+      [],
+    );
+    const isAndroid = Platform.OS === "android";
+    const { t } = useTranslation();
 
-  const { t } = useTranslation();
+    useImperativeHandle(
+      ref,
+      () => ({
+        present: () => {
+          setQuickConnectCode("");
+          modalRef.current?.present();
+        },
+      }),
+      [],
+    );
 
-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-      />
-    ),
-    [],
-  );
-
-  const authorizeQuickConnect = useCallback(async () => {
-    if (quickConnectCode) {
+    const authorizeQuickConnect = useCallback(async () => {
+      if (!quickConnectCode) return;
       try {
         const res = await getQuickConnectApi(api!).authorizeQuickConnect({
           code: quickConnectCode,
@@ -61,7 +64,7 @@ export const QuickConnect: React.FC<Props> = ({ ...props }) => {
             t("home.settings.quick_connect.quick_connect_autorized"),
           );
           setQuickConnectCode(undefined);
-          bottomSheetModalRef?.current?.close();
+          modalRef.current?.close();
         } else {
           errorHapticFeedback();
           Alert.alert(
@@ -76,39 +79,26 @@ export const QuickConnect: React.FC<Props> = ({ ...props }) => {
           t("home.settings.quick_connect.invalid_code"),
         );
       }
-    }
-  }, [api, user, quickConnectCode]);
+    }, [
+      api,
+      user,
+      quickConnectCode,
+      t,
+      successHapticFeedback,
+      errorHapticFeedback,
+    ]);
 
-  if (isTv) return null;
-
-  return (
-    <View {...props}>
-      <ListGroup title={t("home.settings.quick_connect.quick_connect_title")}>
-        <ListItem
-          onPress={() => {
-            // Reset the code when opening the sheet
-            setQuickConnectCode("");
-            bottomSheetModalRef?.current?.present();
-          }}
-          title={t("home.settings.quick_connect.authorize_button")}
-          textColor='blue'
-        />
-      </ListGroup>
+    if (isTv) return null;
 
+    return (
       <BottomSheetModal
-        ref={bottomSheetModalRef}
+        ref={modalRef}
+        enablePanDownToClose
         snapPoints={snapPoints}
-        handleIndicatorStyle={{
-          backgroundColor: "white",
-        }}
-        backgroundStyle={{
-          backgroundColor: "#171717",
-        }}
-        backdropComponent={renderBackdrop}
+        handleIndicatorStyle={{ backgroundColor: "white" }}
+        backgroundStyle={{ backgroundColor: "#171717" }}
         keyboardBehavior={isAndroid ? "fillParent" : "interactive"}
         keyboardBlurBehavior='restore'
-        android_keyboardInputMode='adjustResize'
-        topInset={isAndroid ? 0 : undefined}
       >
         <BottomSheetView>
           <View className='flex flex-col space-y-4 px-4 pb-8 pt-2'>
@@ -142,6 +132,8 @@ export const QuickConnect: React.FC<Props> = ({ ...props }) => {
           </View>
         </BottomSheetView>
       </BottomSheetModal>
-    </View>
-  );
-};
+    );
+  },
+);
+
+QuickConnectSheet.displayName = "QuickConnectSheet";

components/settings/index/SettingsHero.tsx

@@ -0,0 +1,81 @@
+import { Ionicons } from "@expo/vector-icons";
+import { Image } from "expo-image";
+import { LinearGradient } from "expo-linear-gradient";
+import { useAtomValue } from "jotai";
+import type React from "react";
+import { TouchableOpacity, View } from "react-native";
+import { Text } from "@/components/common/Text";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { getUserImageUrl } from "@/utils/jellyfin/image/getUserImageUrl";
+
+export const SettingsHero: React.FC<{ onPress: () => void }> = ({
+  onPress,
+}) => {
+  const api = useAtomValue(apiAtom);
+  const user = useAtomValue(userAtom);
+  const connected = Boolean(api && user);
+  const imageUrl =
+    api && user?.Id
+      ? (getUserImageUrl({
+          serverAddress: api.basePath,
+          userId: user.Id,
+          primaryImageTag: user.PrimaryImageTag,
+        }) ?? undefined)
+      : undefined;
+  const host = api?.basePath?.replace(/^https?:\/\//, "");
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      className='mx-3 mb-4 rounded-2xl overflow-hidden'
+    >
+      <LinearGradient
+        colors={["#241b33", "#15151a"]}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 1 }}
+      >
+        <View className='flex-row items-center p-4'>
+          {imageUrl ? (
+            <Image
+              source={{ uri: imageUrl }}
+              style={{ width: 52, height: 52, borderRadius: 26 }}
+            />
+          ) : (
+            <LinearGradient
+              colors={["#a855f7", "#6d28d9"]}
+              style={{
+                width: 52,
+                height: 52,
+                borderRadius: 26,
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <Text className='text-white text-[22px] font-bold'>
+                {(user?.Name?.[0] ?? "?").toUpperCase()}
+              </Text>
+            </LinearGradient>
+          )}
+          <View className='flex-1 ml-3'>
+            <Text
+              className='text-white text-[18px] font-bold'
+              numberOfLines={1}
+            >
+              {user?.Name ?? ""}
+            </Text>
+            <View className='flex-row items-center mt-0.5'>
+              <View
+                className='w-2 h-2 rounded-full mr-1.5'
+                style={{ backgroundColor: connected ? "#30D158" : "#8E8D91" }}
+              />
+              <Text className='text-[#9899A1] text-[13px]' numberOfLines={1}>
+                {host}
+              </Text>
+            </View>
+          </View>
+          <Ionicons name='chevron-forward' size={18} color='#5A5960' />
+        </View>
+      </LinearGradient>
+    </TouchableOpacity>
+  );
+};

components/settings/index/SettingsRow.tsx

@@ -0,0 +1,62 @@
+import { Ionicons } from "@expo/vector-icons";
+import type React from "react";
+import { TouchableOpacity, View } from "react-native";
+import { Text } from "@/components/common/Text";
+import { useHaptic } from "@/hooks/useHaptic";
+
+export interface SettingsRowProps {
+  title: string;
+  icon: keyof typeof Ionicons.glyphMap;
+  value?: string;
+  showChevron?: boolean;
+  onPress: () => void;
+  isLast?: boolean;
+}
+
+const ACCENT = "#a855f7"; // single accent (full theming is a separate sub-project)
+
+export const SettingsRow: React.FC<SettingsRowProps> = ({
+  title,
+  icon,
+  value,
+  showChevron = true,
+  onPress,
+  isLast = false,
+}) => {
+  const haptic = useHaptic("light"); // no-op when disableHapticFeedback is set
+
+  return (
+    <TouchableOpacity
+      onPress={() => {
+        haptic();
+        onPress();
+      }}
+      className={`flex flex-row items-center bg-neutral-900 h-[48px] px-3 ${
+        isLast ? "" : "border-b border-[#ffffff14]"
+      }`}
+    >
+      <View
+        className='h-[29px] w-[29px] rounded-[7px] items-center justify-center mr-3'
+        style={{ backgroundColor: `${ACCENT}29` }}
+      >
+        <Ionicons name={icon} size={17} color='#c79bff' />
+      </View>
+      <Text className='flex-1 text-white text-[15px]' numberOfLines={1}>
+        {title}
+      </Text>
+      {value ? (
+        <Text className='text-[#9899A1] text-[15px] ml-2' numberOfLines={1}>
+          {value}
+        </Text>
+      ) : null}
+      {showChevron ? (
+        <Ionicons
+          name='chevron-forward'
+          size={17}
+          color='#5A5960'
+          style={{ marginLeft: 4 }}
+        />
+      ) : null}
+    </TouchableOpacity>
+  );
+};

components/settings/index/SettingsSearchBar.tsx

@@ -0,0 +1,28 @@
+import { Ionicons } from "@expo/vector-icons";
+import { t } from "i18next";
+import type React from "react";
+import { TextInput, TouchableOpacity, View } from "react-native";
+
+export const SettingsSearchBar: React.FC<{
+  value: string;
+  onChange: (v: string) => void;
+}> = ({ value, onChange }) => (
+  <View className='mx-3 mb-4 h-[38px] rounded-xl bg-neutral-800 flex-row items-center px-3'>
+    <Ionicons name='search' size={16} color='#76767c' />
+    <TextInput
+      value={value}
+      onChangeText={onChange}
+      placeholder={t("home.settings.search_placeholder")}
+      placeholderTextColor='#76767c'
+      className='flex-1 ml-2 text-white text-[15px]'
+      autoCapitalize='none'
+      autoCorrect={false}
+      returnKeyType='search'
+    />
+    {value.length > 0 ? (
+      <TouchableOpacity onPress={() => onChange("")} hitSlop={8}>
+        <Ionicons name='close-circle' size={18} color='#76767c' />
+      </TouchableOpacity>
+    ) : null}
+  </View>
+);

components/settings/index/SettingsSection.tsx

@@ -0,0 +1,19 @@
+import type React from "react";
+import { View } from "react-native";
+import { Text } from "@/components/common/Text";
+
+export const SettingsSection: React.FC<{
+  title?: string;
+  children: React.ReactNode;
+}> = ({ title, children }) => (
+  <View className='mb-5'>
+    {title ? (
+      <Text className='ml-4 mb-1.5 uppercase text-[#8E8D91] text-[11px] tracking-wide'>
+        {title}
+      </Text>
+    ) : null}
+    <View className='mx-3 rounded-xl overflow-hidden bg-neutral-900'>
+      {children}
+    </View>
+  </View>
+);

components/settings/index/SettingsSelectRow.tsx

@@ -0,0 +1,38 @@
+import { Ionicons } from "@expo/vector-icons";
+import type React from "react";
+import { View } from "react-native";
+import { Text } from "@/components/common/Text";
+import { ListItem } from "@/components/list/ListItem";
+import {
+  type OptionGroup,
+  PlatformDropdown,
+} from "@/components/PlatformDropdown";
+
+interface Props {
+  title: string;
+  valueLabel?: string;
+  groups: OptionGroup[];
+  dropdownTitle?: string;
+  disabled?: boolean;
+}
+
+export const SettingsSelectRow: React.FC<Props> = ({
+  title,
+  valueLabel,
+  groups,
+  dropdownTitle,
+  disabled,
+}) => (
+  <ListItem title={title} disabled={disabled}>
+    <PlatformDropdown
+      groups={groups}
+      title={dropdownTitle}
+      trigger={
+        <View className='flex flex-row items-center justify-between pl-3'>
+          <Text className='mr-1 text-[#8E8D91]'>{valueLabel}</Text>
+          <Ionicons name='chevron-expand-sharp' size={18} color='#5A5960' />
+        </View>
+      }
+    />
+  </ListItem>
+);

components/settings/index/SettingsStepperRow.tsx

@@ -0,0 +1,39 @@
+import type React from "react";
+import { Stepper } from "@/components/inputs/Stepper";
+import { ListItem } from "@/components/list/ListItem";
+
+interface Props {
+  title: string;
+  subtitle?: string;
+  value: number;
+  step: number;
+  min: number;
+  max: number;
+  onUpdate: (value: number) => void;
+  appendValue?: string;
+  disabled?: boolean;
+}
+
+export const SettingsStepperRow: React.FC<Props> = ({
+  title,
+  subtitle,
+  value,
+  step,
+  min,
+  max,
+  onUpdate,
+  appendValue,
+  disabled,
+}) => (
+  <ListItem title={title} subtitle={subtitle} disabled={disabled}>
+    <Stepper
+      value={value}
+      step={step}
+      min={min}
+      max={max}
+      onUpdate={onUpdate}
+      appendValue={appendValue}
+      disabled={disabled}
+    />
+  </ListItem>
+);

components/settings/index/SettingsSwitchRow.tsx

@@ -0,0 +1,23 @@
+import type React from "react";
+import { Switch } from "react-native";
+import { ListItem } from "@/components/list/ListItem";
+
+interface Props {
+  title: string;
+  subtitle?: string;
+  value: boolean;
+  onValueChange: (value: boolean) => void;
+  disabled?: boolean;
+}
+
+export const SettingsSwitchRow: React.FC<Props> = ({
+  title,
+  subtitle,
+  value,
+  onValueChange,
+  disabled,
+}) => (
+  <ListItem title={title} subtitle={subtitle} disabled={disabled}>
+    <Switch value={value} disabled={disabled} onValueChange={onValueChange} />
+  </ListItem>
+);

components/settings/index/searchFilter.test.ts

@@ -0,0 +1,22 @@
+import { expect, test } from "bun:test";
+import { matchesQuery, normalize } from "./searchFilter";
+
+test("normalize strips accents and lowercases", () => {
+  expect(normalize("Légèreté")).toBe("legerete");
+  expect(normalize("  AUDIO ")).toBe("audio");
+});
+
+test("matchesQuery matches title case/accent-insensitively", () => {
+  expect(matchesQuery({ title: "Apparence", keywords: [] }, "appar")).toBe(
+    true,
+  );
+  expect(
+    matchesQuery({ title: "Audio", keywords: ["sous-titres"] }, "SOUS"),
+  ).toBe(true);
+  expect(matchesQuery({ title: "Music", keywords: [] }, "xyz")).toBe(false);
+});
+
+test("matchesQuery returns true for empty query", () => {
+  expect(matchesQuery({ title: "Anything" }, "")).toBe(true);
+  expect(matchesQuery({ title: "Anything" }, "   ")).toBe(true);
+});

components/settings/index/searchFilter.ts

@@ -0,0 +1,14 @@
+export const normalize = (s: string): string =>
+  s.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase().trim();
+
+export interface Searchable {
+  title: string;
+  keywords?: string[];
+}
+
+export const matchesQuery = (item: Searchable, query: string): boolean => {
+  const q = normalize(query);
+  if (!q) return true;
+  const hay = normalize([item.title, ...(item.keywords ?? [])].join(" "));
+  return hay.includes(q);
+};

components/settings/index/settingsCatalog.ts

@@ -0,0 +1,125 @@
+import type { Ionicons } from "@expo/vector-icons";
+
+export type SettingsTarget =
+  | { type: "route"; route: string }
+  | { type: "action"; action: "quickConnect" };
+
+export interface SettingsEntry {
+  id: string;
+  titleKey: string;
+  icon: keyof typeof Ionicons.glyphMap;
+  target: SettingsTarget;
+  /** extra search terms (English); the title is always searched too */
+  keywords?: string[];
+  /** when set, entry only shows on these platforms */
+  platforms?: ("ios" | "android")[];
+}
+
+export interface SettingsSectionDef {
+  id: string;
+  titleKey: string;
+  entries: SettingsEntry[];
+}
+
+/**
+ * Single source of truth for the Settings index: drives both rendering and search.
+ *
+ * EXTENSIBLE SHELL — to add a setting that lands from an in-flight PR, append one
+ * entry to the right section (and, if it lives inside a sub-page, an entry in
+ * settingsSearchIndex.ts). No screen rewrite needed. Reserved slots (add when the
+ * PR merges): sleep timer #922, sync-play #1612, wake-on-LAN #1539 (advanced);
+ * download location #1486/#1193, clear image cache #1589 (storage/downloads);
+ * double-tap seek #1219/#1289, subtitle background #1543 (playback).
+ */
+export const SETTINGS_CATALOG: SettingsSectionDef[] = [
+  {
+    id: "playback",
+    titleKey: "home.settings.categories.playback",
+    entries: [
+      {
+        id: "playback-controls",
+        titleKey: "home.settings.playback_controls.title",
+        icon: "play",
+        target: { type: "route", route: "/settings/playback-controls/page" },
+        keywords: ["speed", "skip", "autoplay", "orientation"],
+      },
+      {
+        id: "audio-subtitles",
+        titleKey: "home.settings.audio_subtitles.title",
+        icon: "chatbox-ellipses",
+        target: { type: "route", route: "/settings/audio-subtitles/page" },
+        keywords: ["subtitle", "audio", "language"],
+      },
+      {
+        id: "music",
+        titleKey: "home.settings.music.title",
+        icon: "musical-notes",
+        target: { type: "route", route: "/settings/music/page" },
+      },
+    ],
+  },
+  {
+    id: "personalization",
+    titleKey: "home.settings.categories.personalization",
+    entries: [
+      {
+        id: "appearance",
+        titleKey: "home.settings.appearance.title",
+        icon: "color-palette",
+        target: { type: "route", route: "/settings/appearance/page" },
+      },
+      {
+        id: "notifications",
+        titleKey: "home.settings.notifications.title",
+        icon: "notifications",
+        target: { type: "route", route: "/settings/notifications/page" },
+      },
+    ],
+  },
+  {
+    id: "advanced",
+    titleKey: "home.settings.categories.advanced",
+    entries: [
+      {
+        id: "quick-connect",
+        titleKey: "home.settings.quick_connect.quick_connect_title",
+        icon: "key",
+        target: { type: "action", action: "quickConnect" },
+      },
+      {
+        id: "pair",
+        titleKey: "pairing.pair_with_phone",
+        icon: "phone-portrait",
+        target: {
+          type: "route",
+          route: "/(auth)/(tabs)/(home)/companion-login",
+        },
+        platforms: ["android"],
+      },
+      {
+        id: "plugins",
+        titleKey: "home.settings.plugins.plugins_title",
+        icon: "extension-puzzle",
+        target: { type: "route", route: "/settings/plugins/page" },
+      },
+      {
+        id: "network",
+        titleKey: "home.settings.network.title",
+        icon: "wifi",
+        target: { type: "route", route: "/settings/network/page" },
+      },
+      {
+        id: "logs",
+        titleKey: "home.settings.logs.logs_title",
+        icon: "document-text",
+        target: { type: "route", route: "/settings/logs/page" },
+      },
+      {
+        id: "intro",
+        titleKey: "home.settings.intro.title",
+        icon: "information-circle",
+        target: { type: "route", route: "/settings/intro/page" },
+      },
+    ],
+  },
+];

components/settings/index/settingsSearchIndex.ts

@@ -0,0 +1,266 @@
+export interface SearchableOption {
+  titleKey: string;
+  parentRoute: string;
+  parentTitleKey: string;
+  keywords?: string[];
+  platforms?: ("ios" | "android")[];
+}
+
+/**
+ * Internal options of sub-pages, for deep search ("index + internal settings").
+ * Populated from a per-sub-page audit of every user-facing ListItem/dropdown row.
+ * Every titleKey/parentTitleKey MUST be a real existing i18n key.
+ */
+export const SETTINGS_SEARCH_INDEX: SearchableOption[] = [
+  // --- Playback & Controls -------------------------------------------------
+  // MediaToggles
+  {
+    titleKey: "home.settings.media_controls.forward_skip_length",
+    parentRoute: "/settings/playback-controls/page",
+    parentTitleKey: "home.settings.playback_controls.title",
+    keywords: ["skip", "forward", "seconds"],
+  },
+  {
+    titleKey: "home.settings.media_controls.rewind_length",
+    parentRoute: "/settings/playback-controls/page",
+    parentTitleKey: "home.settings.playback_controls.title",
+    keywords: ["rewind", "back", "seconds"],
+  },
+  // GestureControls
+  {
+    titleKey: "home.settings.gesture_controls.horizontal_swipe_skip",
+    parentRoute: "/settings/playback-controls/page",
+    parentTitleKey: "home.settings.playback_controls.title",
+    keywords: ["gesture", "swipe", "skip", "seek"],
+  },
+  {
+    titleKey: "home.settings.gesture_controls.left_side_brightness",
+    parentRoute: "/settings/playback-controls/page",
+    parentTitleKey: "home.settings.playback_controls.title",
+    keywords: ["gesture", "swipe", "brightness", "left"],
+  },
+  {
+    titleKey: "home.settings.gesture_controls.right_side_volume",
+    parentRoute: "/settings/playback-controls/page",
+    parentTitleKey: "home.settings.playback_controls.title",
+    keywords: ["gesture", "swipe", "volume", "right"],
+  },
+  {
+    titleKey: "home.settings.gesture_controls.hide_volume_slider",
+    parentRoute: "/settings/playback-controls/page",
+    parentTitleKey: "home.settings.playback_controls.title",
+    keywords: ["volume", "slider", "hide", "gesture"],
+  },
+  {
+    titleKey: "home.settings.gesture_controls.hide_brightness_slider",
+    parentRoute: "/settings/playback-controls/page",
+    parentTitleKey: "home.settings.playback_controls.title",
+    keywords: ["brightness", "slider", "hide", "gesture"],
+  },
+  // PlaybackControlsSettings (home.settings.other.*)
+  {
+    titleKey: "home.settings.other.video_orientation",
+    parentRoute: "/settings/playback-controls/page",
+    parentTitleKey: "home.settings.playback_controls.title",
+    keywords: ["orientation", "rotate", "landscape", "portrait"],
+  },
+  {
+    titleKey: "home.settings.other.safe_area_in_controls",
+    parentRoute: "/settings/playback-controls/page",
+    parentTitleKey: "home.settings.playback_controls.title",
+    keywords: ["safe", "area", "notch", "controls", "inset"],
+  },
+  {
+    titleKey: "home.settings.other.default_quality",
+    parentRoute: "/settings/playback-controls/page",
+    parentTitleKey: "home.settings.playback_controls.title",
+    keywords: ["quality", "bitrate", "resolution"],
+  },
+  {
+    titleKey: "home.settings.other.default_playback_speed",
+    parentRoute: "/settings/playback-controls/page",
+    parentTitleKey: "home.settings.playback_controls.title",
+    keywords: ["playback", "speed", "rate"],
+  },
+  {
+    titleKey: "home.settings.other.disable_haptic_feedback",
+    parentRoute: "/settings/playback-controls/page",
+    parentTitleKey: "home.settings.playback_controls.title",
+    keywords: ["haptic", "vibration", "feedback"],
+  },
+  {
+    titleKey: "home.settings.other.auto_play_next_episode",
+    parentRoute: "/settings/playback-controls/page",
+    parentTitleKey: "home.settings.playback_controls.title",
+    keywords: ["autoplay", "auto", "next", "episode"],
+  },
+  {
+    titleKey: "home.settings.other.max_auto_play_episode_count",
+    parentRoute: "/settings/playback-controls/page",
+    parentTitleKey: "home.settings.playback_controls.title",
+    keywords: ["autoplay", "auto", "episode", "count", "limit"],
+  },
+  // MpvBufferSettings
+  {
+    titleKey: "home.settings.buffer.cache_mode",
+    parentRoute: "/settings/playback-controls/page",
+    parentTitleKey: "home.settings.playback_controls.title",
+    keywords: ["cache", "buffer", "mode"],
+  },
+  {
+    titleKey: "home.settings.buffer.buffer_duration",
+    parentRoute: "/settings/playback-controls/page",
+    parentTitleKey: "home.settings.playback_controls.title",
+    keywords: ["buffer", "duration", "cache", "seconds"],
+  },
+  {
+    titleKey: "home.settings.buffer.max_cache_size",
+    parentRoute: "/settings/playback-controls/page",
+    parentTitleKey: "home.settings.playback_controls.title",
+    keywords: ["buffer", "cache", "size", "memory"],
+  },
+  // MpvVoSettings (Android only)
+  {
+    titleKey: "home.settings.vo_driver.vo_mode",
+    parentRoute: "/settings/playback-controls/page",
+    parentTitleKey: "home.settings.playback_controls.title",
+    keywords: ["video", "output", "driver", "gpu", "mpv"],
+    platforms: ["android"],
+  },
+
+  // --- Audio & Subtitles ---------------------------------------------------
+  // AudioToggles
+  {
+    titleKey: "home.settings.audio.set_audio_track",
+    parentRoute: "/settings/audio-subtitles/page",
+    parentTitleKey: "home.settings.audio_subtitles.title",
+    keywords: ["audio", "track", "remember", "previous"],
+  },
+  {
+    titleKey: "home.settings.audio.audio_language",
+    parentRoute: "/settings/audio-subtitles/page",
+    parentTitleKey: "home.settings.audio_subtitles.title",
+    keywords: ["audio", "language", "default"],
+  },
+  {
+    titleKey: "home.settings.audio.transcode_mode.title",
+    parentRoute: "/settings/audio-subtitles/page",
+    parentTitleKey: "home.settings.audio_subtitles.title",
+    keywords: ["audio", "transcode", "surround", "stereo", "passthrough"],
+  },
+  // SubtitleToggles
+  {
+    titleKey: "home.settings.subtitles.subtitle_language",
+    parentRoute: "/settings/audio-subtitles/page",
+    parentTitleKey: "home.settings.audio_subtitles.title",
+    keywords: ["subtitle", "caption", "language", "default"],
+  },
+  {
+    titleKey: "home.settings.subtitles.subtitle_mode",
+    parentRoute: "/settings/audio-subtitles/page",
+    parentTitleKey: "home.settings.audio_subtitles.title",
+    keywords: ["subtitle", "caption", "mode", "forced"],
+  },
+  {
+    titleKey: "home.settings.subtitles.set_subtitle_track",
+    parentRoute: "/settings/audio-subtitles/page",
+    parentTitleKey: "home.settings.audio_subtitles.title",
+    keywords: ["subtitle", "caption", "track", "remember", "previous"],
+  },
+  {
+    titleKey: "home.settings.subtitles.subtitle_size",
+    parentRoute: "/settings/audio-subtitles/page",
+    parentTitleKey: "home.settings.audio_subtitles.title",
+    keywords: ["subtitle", "size", "caption", "scale", "font"],
+  },
+
+  // --- Music ---------------------------------------------------------------
+  {
+    titleKey: "home.settings.music.prefer_downloaded",
+    parentRoute: "/settings/music/page",
+    parentTitleKey: "home.settings.music.title",
+    keywords: ["music", "downloaded", "offline", "local"],
+  },
+  {
+    titleKey: "home.settings.music.lookahead_enabled",
+    parentRoute: "/settings/music/page",
+    parentTitleKey: "home.settings.music.title",
+    keywords: ["music", "lookahead", "cache", "prefetch"],
+  },
+  {
+    titleKey: "home.settings.music.lookahead_count",
+    parentRoute: "/settings/music/page",
+    parentTitleKey: "home.settings.music.title",
+    keywords: ["music", "lookahead", "cache", "count", "tracks"],
+  },
+  {
+    titleKey: "home.settings.music.max_cache_size",
+    parentRoute: "/settings/music/page",
+    parentTitleKey: "home.settings.music.title",
+    keywords: ["music", "cache", "size", "storage"],
+  },
+  {
+    titleKey: "home.settings.storage.clear_music_cache",
+    parentRoute: "/settings/music/page",
+    parentTitleKey: "home.settings.music.title",
+    keywords: ["music", "cache", "clear", "storage"],
+  },
+  {
+    titleKey: "home.settings.storage.delete_all_downloaded_songs",
+    parentRoute: "/settings/music/page",
+    parentTitleKey: "home.settings.music.title",
+    keywords: ["music", "downloaded", "delete", "songs", "storage"],
+  },
+
+  // --- Appearance ----------------------------------------------------------
+  {
+    titleKey: "home.settings.other.show_custom_menu_links",
+    parentRoute: "/settings/appearance/page",
+    parentTitleKey: "home.settings.appearance.title",
+    keywords: ["menu", "links", "custom", "navigation"],
+  },
+  {
+    titleKey: "home.settings.appearance.merge_next_up_continue_watching",
+    parentRoute: "/settings/appearance/page",
+    parentTitleKey: "home.settings.appearance.title",
+    keywords: ["continue", "watching", "next", "up", "merge", "home"],
+  },
+  {
+    titleKey: "home.settings.other.hide_libraries",
+    parentRoute: "/settings/appearance/page",
+    parentTitleKey: "home.settings.appearance.title",
+    keywords: ["hide", "libraries", "library", "home"],
+  },
+  {
+    titleKey: "home.settings.appearance.hide_remote_session_button",
+    parentRoute: "/settings/appearance/page",
+    parentTitleKey: "home.settings.appearance.title",
+    keywords: ["remote", "session", "button", "hide", "cast"],
+  },
+
+  // --- Network -------------------------------------------------------------
+  {
+    titleKey: "home.settings.network.remote_url",
+    parentRoute: "/settings/network/page",
+    parentTitleKey: "home.settings.network.title",
+    keywords: ["remote", "url", "server", "address"],
+  },
+  {
+    titleKey: "home.settings.network.active_url",
+    parentRoute: "/settings/network/page",
+    parentTitleKey: "home.settings.network.title",
+    keywords: ["active", "url", "server", "connection"],
+  },
+  {
+    titleKey: "home.settings.network.auto_switch_enabled",
+    parentRoute: "/settings/network/page",
+    parentTitleKey: "home.settings.network.title",
+    keywords: ["auto", "switch", "local", "wifi", "network"],
+  },
+  {
+    titleKey: "home.settings.network.local_url",
+    parentRoute: "/settings/network/page",
+    parentTitleKey: "home.settings.network.title",
+    keywords: ["local", "url", "lan", "server", "address"],
+  },
+];

components/settings/index/useSettingsSearch.ts

@@ -0,0 +1,46 @@
+import { Ionicons } from "@expo/vector-icons";
+import { t } from "i18next";
+import { useMemo } from "react";
+import { Platform } from "react-native";
+import { matchesQuery } from "./searchFilter";
+import { SETTINGS_CATALOG, type SettingsTarget } from "./settingsCatalog";
+import { SETTINGS_SEARCH_INDEX } from "./settingsSearchIndex";
+
+export interface SearchResult {
+  id: string;
+  title: string;
+  icon: keyof typeof Ionicons.glyphMap;
+  subtitle?: string;
+  target: SettingsTarget;
+}
+
+export const useSettingsSearch = (query: string): SearchResult[] => {
+  const os: "ios" | "android" = Platform.OS === "ios" ? "ios" : "android";
+  return useMemo(() => {
+    if (!query.trim()) return [];
+    const results: SearchResult[] = [];
+    for (const section of SETTINGS_CATALOG) {
+      for (const e of section.entries) {
+        if (e.platforms && !e.platforms.includes(os)) continue;
+        const title = t(e.titleKey);
+        if (matchesQuery({ title, keywords: e.keywords }, query)) {
+          results.push({ id: e.id, title, icon: e.icon, target: e.target });
+        }
+      }
+    }
+    for (const o of SETTINGS_SEARCH_INDEX) {
+      if (o.platforms && !o.platforms.includes(os)) continue;
+      const title = t(o.titleKey);
+      if (matchesQuery({ title, keywords: o.keywords }, query)) {
+        results.push({
+          id: `${o.parentRoute}#${o.titleKey}`,
+          title,
+          icon: "search",
+          subtitle: t(o.parentTitleKey),
+          target: { type: "route", route: o.parentRoute },
+        });
+      }
+    }
+    return results;
+  }, [query, os]);
+};

components/video-player/controls/BottomControls.tsx

@@ -8,10 +8,10 @@ import { useTranslation } from "react-i18next";
 import { Pressable, View } from "react-native";
 import { Slider } from "react-native-awesome-slider";
 import { type SharedValue } from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ChapterList } from "@/components/chapters/ChapterList";
 import { ChapterTicks } from "@/components/chapters/ChapterTicks";
 import { Text } from "@/components/common/Text";
+import { useControlsSafeAreaInsets } from "@/hooks/useControlsSafeAreaInsets";
 import { useSettings } from "@/utils/atoms/settings";
 import { chapterMarkers, chapterNameAt } from "@/utils/chapters";
 import NextEpisodeCountDownButton from "./NextEpisodeCountDownButton";
@@ -75,9 +75,6 @@ interface BottomControlsProps {
     minutes: number;
     seconds: number;
   };
-
-  // Chapter props
-  chapterPositions?: number[];
 }
 
 export const BottomControls: FC<BottomControlsProps> = ({
@@ -111,11 +108,10 @@ export const BottomControls: FC<BottomControlsProps> = ({
   trickPlayUrl,
   trickplayInfo,
   time,
-  chapterPositions = [],
 }) => {
   const { settings } = useSettings();
   const { t } = useTranslation();
-  const insets = useSafeAreaInsets();
+  const insets = useControlsSafeAreaInsets();
   const [chapterListVisible, setChapterListVisible] = useState(false);
 
   // Only expose chapter UI when there are at least two real markers.
@@ -146,13 +142,9 @@ export const BottomControls: FC<BottomControlsProps> = ({
       style={[
         {
           position: "absolute",
-          right:
-            (settings?.safeAreaInControlsEnabled ?? true) ? insets.right : 0,
-          left: (settings?.safeAreaInControlsEnabled ?? true) ? insets.left : 0,
-          bottom:
-            (settings?.safeAreaInControlsEnabled ?? true)
-              ? Math.max(insets.bottom - 17, 0)
-              : 0,
+          right: insets.right,
+          left: insets.left,
+          bottom: Math.max(insets.bottom - 17, 0),
         },
       ]}
       className={"flex flex-col px-2"}
@@ -188,17 +180,6 @@ export const BottomControls: FC<BottomControlsProps> = ({
           ) : null}
         </View>
         <View className='flex flex-row items-center space-x-2 shrink-0'>
-          {hasChapters && (
-            <Pressable
-              onPress={() => setChapterListVisible(true)}
-              hitSlop={10}
-              className='justify-center mr-4'
-              accessibilityRole='button'
-              accessibilityLabel={t("chapters.open")}
-            >
-              <Ionicons name='bookmarks' size={24} color='white' />
-            </Pressable>
-          )}
           <SkipButton
             showButton={showSkipButton}
             onPress={skipIntro}
@@ -230,6 +211,17 @@ export const BottomControls: FC<BottomControlsProps> = ({
                 onPress={handleNextEpisodeManual}
               />
             )}
+          {hasChapters && (
+            <Pressable
+              onPress={() => setChapterListVisible(true)}
+              hitSlop={10}
+              className='justify-center ml-4'
+              accessibilityRole='button'
+              accessibilityLabel={t("chapters.open")}
+            >
+              <Ionicons name='bookmarks' size={24} color='white' />
+            </Pressable>
+          )}
         </View>
       </View>
       <View

components/video-player/controls/CenterControls.tsx

@@ -1,9 +1,9 @@
 import { Ionicons } from "@expo/vector-icons";
 import type { FC } from "react";
 import { Platform, TouchableOpacity, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
+import { useControlsSafeAreaInsets } from "@/hooks/useControlsSafeAreaInsets";
 import { useSettings } from "@/utils/atoms/settings";
 import AudioSlider from "./AudioSlider";
 import BrightnessSlider from "./BrightnessSlider";
@@ -42,15 +42,15 @@ export const CenterControls: FC<CenterControlsProps> = ({
   goToNextChapter,
 }) => {
   const { settings } = useSettings();
-  const insets = useSafeAreaInsets();
+  const insets = useControlsSafeAreaInsets();
 
   return (
     <View
       style={{
         position: "absolute",
         top: "50%",
-        left: (settings?.safeAreaInControlsEnabled ?? true) ? insets.left : 0,
-        right: (settings?.safeAreaInControlsEnabled ?? true) ? insets.right : 0,
+        left: insets.left,
+        right: insets.right,
         flexDirection: "row",
         justifyContent: "space-between",
         alignItems: "center",

components/video-player/controls/Controls.tsx

@@ -219,7 +219,6 @@ export const Controls: FC<Props> = ({
     hasNextChapter,
     goToPreviousChapter,
     goToNextChapter,
-    chapterPositions,
   } = useChapterNavigation({
     chapters: item.Chapters,
     progress,
@@ -366,7 +365,9 @@ export const Controls: FC<Props> = ({
         { applyLanguagePreferences: true },
       );
 
-      const queryParams = new URLSearchParams({
+      // Use setParams instead of replace to avoid unmounting/remounting the player,
+      // which would create a new MPV native view and crash with "mp_initialize already initialized".
+      router.setParams({
         ...(offline && { offline: "true" }),
         itemId: item.Id ?? "",
         audioIndex: defaultAudioIndex?.toString() ?? "",
@@ -375,11 +376,17 @@ export const Controls: FC<Props> = ({
         bitrateValue: bitrateValue?.toString(),
         playbackPosition:
           item.UserData?.PlaybackPositionTicks?.toString() ?? "",
-      }).toString();
-
-      router.replace(`player/direct-player?${queryParams}` as any);
+      });
     },
-    [settings, subtitleIndex, audioIndex, mediaSource, bitrateValue, router],
+    [
+      settings,
+      subtitleIndex,
+      audioIndex,
+      mediaSource,
+      bitrateValue,
+      router,
+      offline,
+    ],
   );
 
   const goToPreviousItem = useCallback(() => {
@@ -585,7 +592,6 @@ export const Controls: FC<Props> = ({
               trickPlayUrl={trickPlayUrl}
               trickplayInfo={trickplayInfo}
               time={isSliding || showRemoteBubble ? time : remoteTime}
-              chapterPositions={chapterPositions}
             />
           </Animated.View>
         </>

components/video-player/controls/Controls.tv.tsx

@@ -1254,7 +1254,7 @@ export const Controls: FC<Props> = ({
                 <Text
                   style={[styles.endsAtText, { fontSize: typography.callout }]}
                 >
-                  {t("player.ends_at")} {getFinishTime()}
+                  {t("player.ends_at", { time: getFinishTime() })}
                 </Text>
               </View>
             )}
@@ -1448,7 +1448,7 @@ export const Controls: FC<Props> = ({
                 <Text
                   style={[styles.endsAtText, { fontSize: typography.callout }]}
                 >
-                  {t("player.ends_at")} {getFinishTime()}
+                  {t("player.ends_at", { time: getFinishTime() })}
                 </Text>
               </View>
             )}

components/video-player/controls/EpisodeList.tsx

@@ -5,7 +5,6 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { atom, useAtom } from "jotai";
 import { useEffect, useMemo, useRef } from "react";
 import { TouchableOpacity, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import ContinueWatchingPoster from "@/components/ContinueWatchingPoster";
 import {
   HorizontalScroll,
@@ -17,10 +16,10 @@ import {
   SeasonDropdown,
   type SeasonIndexState,
 } from "@/components/series/SeasonDropdown";
+import { useControlsSafeAreaInsets } from "@/hooks/useControlsSafeAreaInsets";
 import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useOfflineMode } from "@/providers/OfflineModeProvider";
-import { useSettings } from "@/utils/atoms/settings";
 import {
   getDownloadedEpisodesForSeason,
   getDownloadedSeasonNumbers,
@@ -46,8 +45,7 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
     scrollViewRef.current?.scrollToIndex(index, 100);
   };
   const isOffline = useOfflineMode();
-  const { settings } = useSettings();
-  const insets = useSafeAreaInsets();
+  const insets = useControlsSafeAreaInsets();
 
   // Set the initial season index
   useEffect(() => {
@@ -59,6 +57,11 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
     }
   }, []);
 
+  // Read the live (cached) downloads DB inside the query rather than the
+  // provider's downloadedItems snapshot. The snapshot only refreshes on the
+  // provider refreshKey, so after updateDownloadedItem() invalidates
+  // ["episodes"]/["seasons"] (e.g. progress/played writes) the refetch would
+  // return stale data. getAllDownloadedItems() is cached, so this stays cheap.
   const { getDownloadedItems } = useDownload();
 
   const seasonIndex = seasonIndexState[item.ParentId ?? ""];
@@ -182,12 +185,9 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
         backgroundColor: "black",
         height: "100%",
         width: "100%",
-        paddingTop:
-          (settings?.safeAreaInControlsEnabled ?? true) ? insets.top : 0,
-        paddingLeft:
-          (settings?.safeAreaInControlsEnabled ?? true) ? insets.left : 0,
-        paddingRight:
-          (settings?.safeAreaInControlsEnabled ?? true) ? insets.right : 0,
+        paddingTop: insets.top,
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
       }}
     >
       <View

components/video-player/controls/HeaderControls.tsx

@@ -5,12 +5,11 @@ import type {
 } from "@jellyfin/sdk/lib/generated-client";
 import { type FC, useCallback, useState } from "react";
 import { Platform, TouchableOpacity, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import useRouter from "@/hooks/useAppRouter";
+import { useControlsSafeAreaInsets } from "@/hooks/useControlsSafeAreaInsets";
 import { useHaptic } from "@/hooks/useHaptic";
 import { useOrientation } from "@/hooks/useOrientation";
 import { OrientationLock } from "@/packages/expo-screen-orientation";
-import { useSettings } from "@/utils/atoms/settings";
 import { HEADER_LAYOUT, ICON_SIZES } from "./constants";
 import DropdownView from "./dropdown/DropdownView";
 import { PlaybackSpeedScope } from "./utils/playback-speed-settings";
@@ -58,9 +57,8 @@ export const HeaderControls: FC<HeaderControlsProps> = ({
   showTechnicalInfo = false,
   onToggleTechnicalInfo,
 }) => {
-  const { settings } = useSettings();
   const router = useRouter();
-  const insets = useSafeAreaInsets();
+  const insets = useControlsSafeAreaInsets();
   const lightHapticFeedback = useHaptic("light");
   const { orientation, lockOrientation } = useOrientation();
   const [isTogglingOrientation, setIsTogglingOrientation] = useState(false);
@@ -99,10 +97,9 @@ export const HeaderControls: FC<HeaderControlsProps> = ({
       style={[
         {
           position: "absolute",
-          top: (settings?.safeAreaInControlsEnabled ?? true) ? insets.top : 0,
-          left: (settings?.safeAreaInControlsEnabled ?? true) ? insets.left : 0,
-          right:
-            (settings?.safeAreaInControlsEnabled ?? true) ? insets.right : 0,
+          top: insets.top,
+          left: insets.left,
+          right: insets.right,
           padding: HEADER_LAYOUT.CONTAINER_PADDING,
         },
       ]}

components/video-player/controls/TechnicalInfoOverlay.tsx

@@ -16,8 +16,8 @@ import Animated, {
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useScaledTVTypography } from "@/constants/TVTypography";
+import { useControlsSafeAreaInsets } from "@/hooks/useControlsSafeAreaInsets";
 import type { TechnicalInfo } from "@/modules/mpv-player";
-import { useSettings } from "@/utils/atoms/settings";
 import { HEADER_LAYOUT } from "./constants";
 
 type PlayMethod = "DirectPlay" | "DirectStream" | "Transcode";
@@ -184,8 +184,8 @@ export const TechnicalInfoOverlay: FC<TechnicalInfoOverlayProps> = memo(
     currentAudioIndex,
   }) => {
     const typography = useScaledTVTypography();
-    const { settings } = useSettings();
     const insets = useSafeAreaInsets();
+    const safeInsets = useControlsSafeAreaInsets();
     const [info, setInfo] = useState<TechnicalInfo | null>(null);
 
     const opacity = useSharedValue(0);
@@ -268,14 +268,8 @@ export const TechnicalInfoOverlay: FC<TechnicalInfoOverlayProps> = memo(
           left: Math.max(insets.left, 48) + 20,
         }
       : {
-          top:
-            (settings?.safeAreaInControlsEnabled ?? true)
-              ? insets.top + HEADER_LAYOUT.CONTAINER_PADDING + 4
-              : HEADER_LAYOUT.CONTAINER_PADDING + 4,
-          left:
-            (settings?.safeAreaInControlsEnabled ?? true)
-              ? insets.left + HEADER_LAYOUT.CONTAINER_PADDING + 20
-              : HEADER_LAYOUT.CONTAINER_PADDING + 20,
+          top: safeInsets.top + HEADER_LAYOUT.CONTAINER_PADDING + 4,
+          left: safeInsets.left + HEADER_LAYOUT.CONTAINER_PADDING + 20,
         };
 
     const textStyle = Platform.isTV

hooks/useControlsSafeAreaInsets.ts

@@ -0,0 +1,18 @@
+import {
+  type EdgeInsets,
+  useSafeAreaInsets,
+} from "react-native-safe-area-context";
+import { useSettings } from "@/utils/atoms/settings";
+
+const ZERO_INSETS: EdgeInsets = { top: 0, right: 0, bottom: 0, left: 0 };
+
+/**
+ * Returns safe-area insets to apply to in-player controls, honoring the
+ * `safeAreaInControlsEnabled` user setting. When the setting is disabled,
+ * returns zero insets so controls can sit flush against the screen edges.
+ */
+export const useControlsSafeAreaInsets = (): EdgeInsets => {
+  const { settings } = useSettings();
+  const insets = useSafeAreaInsets();
+  return settings.safeAreaInControlsEnabled ? insets : ZERO_INSETS;
+};

hooks/useImageStorage.ts

@@ -1,3 +1,4 @@
+import { File, Paths } from "expo-file-system";
 import { useCallback } from "react";
 import { storage } from "@/utils/mmkv";
 
@@ -12,36 +13,28 @@ const useImageStorage = () => {
     }
   }, []);
 
+  /**
+   * expo-file-system instead of fetch+Blob+FileReader: the latter silently
+   * resolves to an empty payload under RN's New Architecture.
+   */
   const image2Base64 = useCallback(async (url?: string | null) => {
     if (!url) return null;
 
-    let blob: Blob;
+    const tmpFile = new File(
+      Paths.cache,
+      `img-${Date.now()}-${Math.random().toString(36).slice(2)}.jpg`,
+    );
     try {
-      // Fetch the data from the URL
-      const response = await fetch(url);
-      blob = await response.blob();
+      const downloaded = await File.downloadFileAsync(url, tmpFile, {
+        idempotent: true,
+      });
+      return await downloaded.base64();
     } catch (error) {
       console.warn("Error fetching image:", error);
       return null;
+    } finally {
+      if (tmpFile.exists) tmpFile.delete();
     }
-
-    // Create a FileReader instance
-    const reader = new FileReader();
-
-    // Convert blob to base64
-    return new Promise<string>((resolve, reject) => {
-      reader.onloadend = () => {
-        if (typeof reader.result === "string") {
-          // Extract the base64 string (remove the data URL prefix)
-          const base64 = reader.result.split(",")[1];
-          resolve(base64);
-        } else {
-          reject(new Error("Failed to convert image to base64"));
-        }
-      };
-      reader.onerror = reject;
-      reader.readAsDataURL(blob);
-    });
   }, []);
 
   const saveImage = useCallback(

hooks/usePlaybackManager.ts

@@ -109,30 +109,35 @@ export const usePlaybackManager = ({
     staleTime: 0,
   });
 
+  /**
+   * Derive prev/next from the current item's real position in the adjacent
+   * list rather than from the array length. `getEpisodes({ adjacentTo })` does
+   * not guarantee a fixed [prev, current, next] shape — at the first/last
+   * episode it can still return the current item as the first/last entry — so
+   * length-based indexing wrongly surfaces the current episode as "previous".
+   */
+  const currentIndex = useMemo(
+    () => adjacentItems?.findIndex((e) => e.Id === item?.Id) ?? -1,
+    [adjacentItems, item],
+  );
+
+  /** A neighbour is only navigable if it has an actual media file (not a
+   * "Virtual"/missing episode placeholder, e.g. an absent Special). */
+  const isNavigable = (episode?: BaseItemDto | null): episode is BaseItemDto =>
+    !!episode && episode.Id !== item?.Id && episode.LocationType !== "Virtual";
+
   const previousItem = useMemo(() => {
-    if (!adjacentItems || adjacentItems.length <= 1) {
-      return null;
-    }
-
-    if (adjacentItems.length === 2) {
-      return adjacentItems[0].Id === item?.Id ? null : adjacentItems[0];
-    }
-
-    return adjacentItems[0];
-  }, [adjacentItems, item]);
+    if (!adjacentItems || currentIndex <= 0) return null;
+    const candidate = adjacentItems[currentIndex - 1];
+    return isNavigable(candidate) ? candidate : null;
+  }, [adjacentItems, currentIndex, item]);
 
   /** The next item in the series */
   const nextItem = useMemo(() => {
-    if (!adjacentItems || adjacentItems.length <= 1) {
-      return null;
-    }
-
-    if (adjacentItems.length === 2) {
-      return adjacentItems[1].Id === item?.Id ? null : adjacentItems[1];
-    }
-
-    return adjacentItems[2];
-  }, [adjacentItems, item]);
+    if (!adjacentItems || currentIndex < 0) return null;
+    const candidate = adjacentItems[currentIndex + 1];
+    return isNavigable(candidate) ? candidate : null;
+  }, [adjacentItems, currentIndex, item]);
 
   /**
    * Reports playback progress.

modules/mpv-player/ios/MpvPlayerView.swift

@@ -81,7 +81,6 @@ class MpvPlayerView: ExpoView {
 	private func setupView() {
 		clipsToBounds = true
 		backgroundColor = .black
-		configureAudioSession()
 
 		videoContainer = UIView()
 		videoContainer.translatesAutoresizingMaskIntoConstraints = false
@@ -141,21 +140,26 @@ class MpvPlayerView: ExpoView {
 		CATransaction.commit()
 	}
 
+	// MARK: - Audio Session & Notifications
+
 	private func configureAudioSession() {
-		let audioSession = AVAudioSession.sharedInstance()
+		let session = AVAudioSession.sharedInstance()
 		do {
-			try audioSession.setCategory(
-				.playback,
-				mode: .moviePlayback,
-				policy: .longFormAudio,
-				options: []
-			)
-			try audioSession.setActive(true)
+			try session.setCategory(.playback, mode: .moviePlayback, policy: .longFormAudio, options: [])
+			try session.setActive(true)
 		} catch {
 			print("Failed to configure audio session: \(error)")
 		}
 	}
-	// MARK: - Audio Session & Notifications
+
+	/// Deactivate the session AND reset the category — `setActive(false)` alone
+	/// leaves `.playback`/`.longFormAudio` on the shared singleton, so any later
+	/// reactivation (foreground, route change, other modules) re-steals audio.
+	private func tearDownAudioSession() {
+		let session = AVAudioSession.sharedInstance()
+		try? session.setActive(false, options: .notifyOthersOnDeactivation)
+		try? session.setCategory(.ambient, mode: .default, options: [.mixWithOthers])
+	}
 
 	private func setupNotifications() {
 		// Handle audio session interruptions (e.g., incoming calls, other apps playing audio)
@@ -270,6 +274,7 @@ class MpvPlayerView: ExpoView {
 
 	func play() {
 		intendedPlayState = true
+		configureAudioSession()
 		setupRemoteCommands()
 		renderer?.play()
 		pipController?.setPlaybackRate(1.0)
@@ -440,6 +445,7 @@ class MpvPlayerView: ExpoView {
 		renderer?.stop()
 		displayLayer.removeFromSuperlayer()
 		clearNowPlayingInfo()
+		tearDownAudioSession()
 		NotificationCenter.default.removeObserver(self)
 	}
 }
@@ -519,9 +525,7 @@ extension MpvPlayerView: MPVLayerRendererDelegate {
 	}
 
 	func renderer(_: MPVLayerRenderer, didSelectAudioOutput audioOutput: String) {
-		// Audio output is now active - this is the right time to activate audio session and set Now Playing
-		print("[MPV] Audio output ready (\(audioOutput)), activating audio session and syncing Now Playing")
-		nowPlayingManager.activateAudioSession()
+		print("[MPV] Audio output ready (\(audioOutput)), syncing Now Playing")
 		syncNowPlaying(isPlaying: !isPaused())
 	}
 }

package.json

@@ -52,6 +52,7 @@
     "expo-brightness": "~56.0.5",
     "expo-build-properties": "~56.0.15",
     "expo-camera": "~56.0.7",
+    "expo-clipboard": "~56.0.3",
     "expo-constants": "~56.0.16",
     "expo-crypto": "~56.0.4",
     "expo-dev-client": "~56.0.16",
@@ -124,8 +125,10 @@
     "@biomejs/biome": "2.4.16",
     "@react-native-community/cli": "20.1.3",
     "@react-native-tvos/config-tv": "0.1.6",
+    "@types/bun": "^1.3.14",
     "@types/jest": "29.5.14",
     "@types/lodash": "4.17.24",
+    "@types/node": "^24",
     "@types/react": "~19.2.10",
     "@types/react-test-renderer": "19.1.0",
     "cross-env": "10.1.0",

providers/Downloads/database.ts

@@ -4,28 +4,68 @@ import type { DownloadedItem, DownloadsDatabase } from "./types";
 
 const DOWNLOADS_DATABASE_KEY = "downloads.v2.json";
 
+// Performance optimization: Cache the parsed database to avoid repeated JSON.parse calls
+let cachedDb: DownloadsDatabase | null = null;
+let cacheVersion = 0;
+
+// Performance optimization: Cache the flattened items array
+let cachedItems: DownloadedItem[] | null = null;
+let itemsCacheVersion = -1;
+
+// Performance optimization: Index for O(1) item lookups by ID
+let itemIndex: Map<string, DownloadedItem> | null = null;
+let indexCacheVersion = -1;
+
 /**
  * Get the downloads database from storage
+ * PERFORMANCE: Caches the parsed database to avoid repeated JSON.parse calls.
+ * NOTE: Returns the shared cached instance — do NOT mutate it directly. Go
+ * through addDownloadedItem/updateDownloadedItem/removeDownloadedItem so
+ * saveDownloadsDatabase() runs and the derived caches stay consistent.
  */
 export function getDownloadsDatabase(): DownloadsDatabase {
+  // Return cached database if available
+  if (cachedDb !== null) {
+    return cachedDb;
+  }
+
+  // Parse from storage and cache the result
   const file = storage.getString(DOWNLOADS_DATABASE_KEY);
   if (file) {
-    return JSON.parse(file) as DownloadsDatabase;
+    cachedDb = JSON.parse(file) as DownloadsDatabase;
+    return cachedDb;
   }
-  return { movies: {}, series: {}, other: {} };
+
+  const emptyDb = { movies: {}, series: {}, other: {} };
+  cachedDb = emptyDb;
+  return emptyDb;
 }
 
 /**
  * Save the downloads database to storage
+ * PERFORMANCE: Updates cache and invalidates derived caches
  */
 export function saveDownloadsDatabase(db: DownloadsDatabase): void {
   storage.set(DOWNLOADS_DATABASE_KEY, JSON.stringify(db));
+  // Update the cache with the new database
+  cachedDb = db;
+  // Invalidate derived caches (items array and index)
+  cachedItems = null;
+  itemIndex = null;
+  cacheVersion++;
 }
 
 /**
  * Get all downloaded items as a flat array
+ * PERFORMANCE: Caches the flattened array to avoid rebuilding on every call
  */
 export function getAllDownloadedItems(): DownloadedItem[] {
+  // Return cached items if available and up-to-date
+  if (cachedItems !== null && itemsCacheVersion === cacheVersion) {
+    return cachedItems;
+  }
+
+  // Build the items array from the database
   const db = getDownloadsDatabase();
   const items: DownloadedItem[] = [];
 
@@ -47,34 +87,41 @@ export function getAllDownloadedItems(): DownloadedItem[] {
     }
   }
 
+  // Cache the result
+  cachedItems = items;
+  itemsCacheVersion = cacheVersion;
+
   return items;
 }
 
 /**
- * Get a downloaded item by its ID
+ * Build or refresh the item index for O(1) lookups
  */
-export function getDownloadedItemById(id: string): DownloadedItem | undefined {
-  const db = getDownloadsDatabase();
-
-  if (db.movies[id]) {
-    return db.movies[id];
+function ensureItemIndex(): void {
+  if (itemIndex !== null && indexCacheVersion === cacheVersion) {
+    return; // Index is up-to-date
   }
 
-  for (const series of Object.values(db.series)) {
-    for (const season of Object.values(series.seasons)) {
-      for (const episode of Object.values(season.episodes)) {
-        if (episode.item.Id === id) {
-          return episode;
-        }
-      }
+  // Build new index from all items
+  itemIndex = new Map<string, DownloadedItem>();
+  const items = getAllDownloadedItems();
+
+  for (const item of items) {
+    if (item.item.Id) {
+      itemIndex.set(item.item.Id, item);
     }
   }
 
-  if (db.other?.[id]) {
-    return db.other[id];
-  }
+  indexCacheVersion = cacheVersion;
+}
 
-  return undefined;
+/**
+ * Get a downloaded item by its ID
+ * PERFORMANCE: Uses O(1) index lookup instead of O(n²) iteration
+ */
+export function getDownloadedItemById(id: string): DownloadedItem | undefined {
+  ensureItemIndex();
+  return itemIndex!.get(id);
 }
 
 /**
@@ -221,4 +268,5 @@ export function updateDownloadedItem(
  */
 export function clearAllDownloadedItems(): void {
   saveDownloadsDatabase({ movies: {}, series: {}, other: {} });
+  // saveDownloadsDatabase already invalidates caches
 }

providers/Downloads/notifications.ts

@@ -2,6 +2,7 @@ import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import type * as NotificationsType from "expo-notifications";
 import type { TFunction } from "i18next";
 import { Platform } from "react-native";
+import { storage } from "@/utils/mmkv";
 
 // Conditionally import expo-notifications only on non-TV platforms
 const Notifications = Platform.isTV
@@ -67,6 +68,14 @@ export async function sendDownloadNotification(
 ): Promise<void> {
   if (Platform.isTV || !Notifications) return;
 
+  try {
+    const raw = storage.getString("settings");
+    const s = raw ? JSON.parse(raw) : {};
+    if (s.notificationsEnabled === false || s.notifyDownloads === false) return;
+  } catch {
+    // ignore parse errors; fall through to sending (defaults are enabled)
+  }
+
   try {
     await Notifications.scheduleNotificationAsync({
       content: {

translations/en.json

@@ -119,6 +119,9 @@
     "settings": {
       "settings_title": "Settings",
       "log_out_button": "Log Out",
+      "search_placeholder": "Search settings",
+      "search_results": "Results",
+      "search_no_results": "No matching settings",
       "switch_user": {
         "title": "Switch User",
         "account": "Account",
@@ -126,7 +129,25 @@
         "current": "current"
       },
       "categories": {
-        "title": "Categories"
+        "title": "Categories",
+        "playback": "Playback",
+        "personalization": "Personalization",
+        "advanced": "Advanced"
+      },
+      "notifications": {
+        "title": "Notifications",
+        "disabled_title": "Notifications are off",
+        "disabled_description": "Allow notifications to get alerts about your downloads and more.",
+        "enable_button": "Enable notifications",
+        "events_title": "Notify me about",
+        "master": "Enable notifications",
+        "downloads": "Download completed / failed"
+      },
+      "account": {
+        "title": "Account",
+        "copy_token": "Copy token",
+        "copied": "Copied to clipboard",
+        "copy_failed": "Couldn't copy to clipboard"
       },
       "playback_controls": {
         "title": "Playback & Controls"
@@ -199,6 +220,10 @@
         "rewind_length": "Rewind Length",
         "seconds_unit": "s"
       },
+      "chromecast": {
+        "title": "Chromecast",
+        "enable_h265": "Enable H265 for Chromecast"
+      },
       "buffer": {
         "title": "Buffer Settings",
         "cache_mode": "Cache Mode",

utils/atoms/settings.ts

@@ -6,6 +6,7 @@ import {
   type SortOrder,
   SubtitlePlaybackMode,
 } from "@jellyfin/sdk/lib/generated-client";
+import { t } from "i18next";
 import { atom, useAtom, useAtomValue } from "jotai";
 import { useCallback, useEffect, useMemo } from "react";
 import { BITRATES, type Bitrate } from "@/components/BitrateSelector";
@@ -121,6 +122,46 @@ export interface MaxAutoPlayEpisodeCount {
   value: number;
 }
 
+/**
+ * The plugin may send object-typed settings as plain primitives.
+ * Resolve to the proper option object from the available choices.
+ */
+const normalizePluginValue = (
+  settingsKey: keyof Settings,
+  value: unknown,
+): unknown => {
+  if (typeof value !== "object" || value === null) {
+    const defaultVal = defaultValues[settingsKey];
+    if (
+      typeof defaultVal === "object" &&
+      defaultVal !== null &&
+      "key" in defaultVal &&
+      "value" in defaultVal
+    ) {
+      // defaultBitrate needs a lookup because its keys are human-readable
+      // (e.g. "8 Mb/s") that can't be derived from the raw value (e.g. 8000000).
+      // Other { key, value } settings like maxAutoPlayEpisodeCount work with
+      // the fallback because their keys are just String(value) (e.g. "5").
+      if (settingsKey === "defaultBitrate") {
+        const match = BITRATES.find(
+          (b) => b.key === value || b.value === value,
+        );
+        if (match) return match;
+      }
+      // maxAutoPlayEpisodeCount: 0 is invalid (breaks autoplay), clamp to -1
+      // -1 key must match the translated dropdown label so the UI shows "Disabled"
+      if (
+        settingsKey === "maxAutoPlayEpisodeCount" &&
+        (value === 0 || value === -1)
+      ) {
+        return { key: t("home.settings.other.disabled"), value: -1 };
+      }
+      return { key: String(value), value };
+    }
+  }
+  return value;
+};
+
 export type HomeSectionLatestResolver = {
   parentId?: string;
   limit?: number;
@@ -253,6 +294,12 @@ export type Settings = {
   openSubtitlesApiKey?: string;
   // TV-only: Inactivity timeout for auto-logout
   inactivityTimeout: InactivityTimeout;
+  // Settings-redo additions (SP1)
+  notificationsEnabled: boolean;
+  notifyDownloads: boolean;
+  defaultLandingTab: "(home)" | "(search)" | "(favorites)" | "(libraries)";
+  downloadOnWifiOnly: boolean;
+  cellularBitrate?: Bitrate;
 };
 
 export interface Lockable<T> {
@@ -354,6 +401,11 @@ export const defaultValues: Settings = {
   audioTranscodeMode: AudioTranscodeMode.Auto,
   // TV-only: Inactivity timeout (disabled by default)
   inactivityTimeout: InactivityTimeout.Disabled,
+  notificationsEnabled: true,
+  notifyDownloads: true,
+  defaultLandingTab: "(home)",
+  downloadOnWifiOnly: false,
+  cellularBitrate: undefined,
 };
 
 const loadSettings = (): Partial<Settings> => {
@@ -427,61 +479,37 @@ export const useSettings = () => {
     [_setPluginSettings],
   );
 
-  const refreshStreamyfinPluginSettings = useCallback(
-    async (forceOverride = false) => {
-      if (!api) {
-        return;
+  const refreshStreamyfinPluginSettings = useCallback(async () => {
+    if (!api) {
+      return;
+    }
+    const newPluginSettings = await api.getStreamyfinPluginConfig().then(
+      ({ data }) => {
+        writeInfoLog("Got plugin settings", data?.settings);
+        return data?.settings;
+      },
+      (_err) => undefined,
+    );
+    setPluginSettings(newPluginSettings);
+
+    // Locked/unlocked values are handled by the settings memo, which
+    // applies locked values at runtime without overwriting user storage.
+    // We only handle auto-enabling Streamystats here.
+    if (newPluginSettings && _settings) {
+      const streamyStatsUrl = newPluginSettings.streamyStatsServerUrl;
+      if (streamyStatsUrl?.value && _settings.searchEngine !== "Streamystats") {
+        const newSettings = {
+          ...defaultValues,
+          ..._settings,
+          searchEngine: "Streamystats",
+        } as Settings;
+        setSettings(newSettings);
+        saveSettings(newSettings);
       }
-      const newPluginSettings = await api.getStreamyfinPluginConfig().then(
-        ({ data }) => {
-          writeInfoLog("Got plugin settings", data?.settings);
-          return data?.settings;
-        },
-        (_err) => undefined,
-      );
-      setPluginSettings(newPluginSettings);
+    }
 
-      // Apply plugin values to settings
-      if (newPluginSettings && _settings) {
-        const updates: Partial<Settings> = {};
-        for (const [key, setting] of Object.entries(newPluginSettings)) {
-          if (setting && !setting.locked && setting.value !== undefined) {
-            const settingsKey = key as keyof Settings;
-            const effectiveValue = getEffectiveSettingValue(
-              _settings,
-              settingsKey,
-            );
-            // Apply if forceOverride is true, or if neither persisted settings
-            // nor app defaults provide a meaningful value.
-            if (forceOverride || !hasMeaningfulSettingValue(effectiveValue)) {
-              (updates as any)[settingsKey] = setting.value;
-            }
-          }
-        }
-
-        // Auto-enable Streamystats if server URL is provided
-        const streamyStatsUrl = newPluginSettings.streamyStatsServerUrl;
-        if (
-          streamyStatsUrl?.value &&
-          _settings.searchEngine !== "Streamystats"
-        ) {
-          updates.searchEngine = "Streamystats";
-        }
-        if (Object.keys(updates).length > 0) {
-          const newSettings = {
-            ...defaultValues,
-            ..._settings,
-            ...updates,
-          } as Settings;
-          setSettings(newSettings);
-          saveSettings(newSettings);
-        }
-      }
-
-      return newPluginSettings;
-    },
-    [api, _settings],
-  );
+    return newPluginSettings;
+  }, [api, _settings]);
 
   const updateSettings = (update: Partial<Settings>) => {
     if (!_settings) {
@@ -512,8 +540,13 @@ export const useSettings = () => {
       Partial<Settings>
     >((acc, [key, setting]) => {
       if (setting) {
-        const { value, locked } = setting;
+        let { value } = setting;
+        const { locked } = setting;
         const settingsKey = key as keyof Settings;
+
+        // Normalize object-typed settings from plugin (plain primitive → { key, value })
+        value = normalizePluginValue(settingsKey, value);
+
         const effectiveValue = getEffectiveSettingValue(_settings, settingsKey);
 
         (acc as any)[settingsKey] = locked

utils/expoUiBottomSheet.ts

@@ -0,0 +1,23 @@
+import { Platform } from "react-native";
+
+/**
+ * TV-safe re-exports of `@expo/ui/community/bottom-sheet`.
+ *
+ * `@expo/ui` resolves its native bridge at module load via
+ * `requireNativeModule('ExpoUI')`, which does not exist on tvOS — a static
+ * top-level import would crash the whole expo-router route tree. We `require()`
+ * it lazily and only off-TV; on TV the exports are undefined, which is fine
+ * because every call site early-returns on `Platform.isTV`.
+ */
+type BottomSheetMod = typeof import("@expo/ui/community/bottom-sheet");
+
+const mod: BottomSheetMod = Platform.isTV
+  ? ({} as BottomSheetMod)
+  : (require("@expo/ui/community/bottom-sheet") as BottomSheetMod);
+
+export const BottomSheetModal = mod.BottomSheetModal;
+export const BottomSheetView = mod.BottomSheetView;
+export const BottomSheetScrollView = mod.BottomSheetScrollView;
+export const BottomSheetTextInput = mod.BottomSheetTextInput;
+
+export type { BottomSheetMethods } from "@expo/ui/community/bottom-sheet";

utils/pairingService.ts

@@ -27,6 +27,7 @@ export function startPairingListener(
   });
 
   socket.on("error", (err) => {
+    if (!active) return;
     if (__DEV__) console.error("[PairingService] Socket error:", err);
     onError?.(err.message);
     cleanup();