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

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

.eas/build/android-production-apk.yml

@@ -0,0 +1,25 @@
+# Custom EAS Build config for Android phone APK (downloadable artifact).
+# Same bun-forcing flow as android-production.yml, but builds an APK
+# (assembleRelease) instead of an AAB — for sideloading / GitHub artifact.
+# Referenced from eas.json: build.production-apk.android.config
+build:
+  name: Android phone APK (bun)
+  steps:
+    - eas/checkout
+
+    - run:
+        name: Install dependencies (bun, frozen)
+        command: bun install --frozen-lockfile
+
+    - run:
+        name: Prebuild (Android, bun)
+        command: bunx expo prebuild --platform android --no-install
+
+    - eas/configure_android_version
+    - eas/inject_android_credentials
+
+    - eas/run_gradle:
+        inputs:
+          command: :app:assembleRelease
+
+    - eas/find_and_upload_build_artifacts

.eas/build/android-production-tv.yml

@@ -0,0 +1,27 @@
+# Custom EAS Build config for Android TV APK (downloadable artifact).
+# Same bun-forcing flow, with EXPO_TV=1 (set via the profile env in
+# eas.json) so prebuild generates the TV variant. Builds an APK for
+# sideloading onto Android TV devices.
+# Referenced from eas.json: build.production-apk-tv.android.config
+build:
+  name: Android TV APK (bun)
+  steps:
+    - eas/checkout
+
+    - run:
+        name: Install dependencies (bun, frozen)
+        command: bun install --frozen-lockfile
+
+    # EXPO_TV=1 comes from the profile env, so prebuild targets Android TV.
+    - run:
+        name: Prebuild (Android TV, bun)
+        command: bunx expo prebuild --platform android --no-install
+
+    - eas/configure_android_version
+    - eas/inject_android_credentials
+
+    - eas/run_gradle:
+        inputs:
+          command: :app:assembleRelease
+
+    - eas/find_and_upload_build_artifacts

.eas/build/android-production.yml

@@ -0,0 +1,38 @@
+# Custom EAS Build config for Android (production AAB).
+#
+# Why this exists: EAS's managed build can't detect Bun's text lockfile
+# (bun.lock) and falls back to yarn, which breaks our install. The managed
+# steps `eas/install_node_modules` and `eas/prebuild` both use "the package
+# manager detected based on your project", so we replace them with explicit
+# `bun` commands. Everything else uses EAS's built-in functions so we still
+# get remote versioning, credentials, and artifact upload.
+#
+# Referenced from eas.json: build.production.android.config = android-production.yml
+build:
+  name: Android production (bun)
+  steps:
+    - eas/checkout
+
+    - run:
+        name: Install dependencies (bun, frozen)
+        command: bun install --frozen-lockfile
+
+    # android/ is gitignored, so generate native code fresh. --no-install
+    # because deps are already installed above; bunx keeps it on bun.
+    - run:
+        name: Prebuild (Android, bun)
+        command: bunx expo prebuild --platform android --no-install
+
+    # Applies the EAS-resolved remote versionCode/versionName (autoIncrement
+    # in eas.json) into the freshly prebuilt android/ project.
+    - eas/configure_android_version
+
+    # Injects the remote Android keystore / signing config.
+    - eas/inject_android_credentials
+
+    # Build the Play Store app bundle (.aab).
+    - eas/run_gradle:
+        inputs:
+          command: :app:bundleRelease
+
+    - eas/find_and_upload_build_artifacts

.eas/build/ios-production.yml

@@ -0,0 +1,44 @@
+# Custom EAS Build config for iOS + tvOS (App Store), forcing bun.
+#
+# Shared by both the iPhone profile (production) and the tvOS profile
+# (production_tv). The profile decides the rest:
+#   - production_tv sets EXPO_TV=1 (env) so prebuild targets tvOS, and
+#     credentialsSource: local (EAS can't manage tvOS creds remotely).
+#   - production uses remote-managed iOS credentials.
+#
+# Like the Android configs, this replaces eas/install_node_modules and
+# eas/prebuild (both auto-detect the wrong package manager) with explicit
+# bun commands, and keeps EAS built-ins for credentials/version/fastlane.
+build:
+  name: iOS/tvOS App Store (bun)
+  steps:
+    - eas/checkout
+
+    - run:
+        name: Install dependencies (bun, frozen)
+        command: bun install --frozen-lockfile
+
+    - eas/resolve_apple_team_id_from_credentials:
+        id: resolve_team
+
+    # android/ + ios/ are gitignored, so generate native code fresh.
+    # EXPO_TV (from the profile env) selects iPhone vs tvOS. --no-install
+    # skips JS + pod install; we install pods explicitly below with bun deps.
+    - run:
+        name: Prebuild (iOS/tvOS, bun)
+        command: bunx expo prebuild --platform ios --no-install
+
+    - run:
+        name: Install CocoaPods
+        working_directory: ./ios
+        command: pod install
+
+    - eas/configure_ios_credentials
+    - eas/configure_ios_version
+
+    - eas/generate_gymfile_from_template:
+        inputs:
+          credentials: ${ eas.job.secrets.buildCredentials }
+
+    - eas/run_fastlane
+    - eas/find_and_upload_build_artifacts

.github/pull_request_template.md

@@ -1,91 +1,54 @@
-<!--
-  Pull Request Template for Streamyfin
-  ====================================
-  Use this template to help reviewers understand the purpose of your PR
-  and to ensure all necessary checks are completed before merging.
+<!-- 
+Use a conventional commit title for the PR title, 
+for example `feat(auth): add MFA`
+All sections below are required. Write N/A if a section is not applicable.
+If you use AI to help implement this PR, you must declare it below. It's very important that the feature or fix implemented has been tested thoroughly by you personally on all target platforms. Only adding AI generated code without proper testing is not allowed and this PR will be closed immediately.
 -->
 
 # 📦 Pull Request
 
-## 🔖 Summary
+<!-- 
+  🤖 AI ASSISTED? 
+  Uncomment the line below if AI was used to assist with this PR:
+-->
+<!-- 
+[![AI Assisted](https://img.shields.io/badge/AI_Assisted-18181b?style=for-the-badge&logo=openai&logoColor=white)](#) -->
+
+## 📝 Description
 <!--
-A concise description of the changes introduced by this PR.
-Example:
-“Add real-time currency conversion widget to dashboard.”
+A short description of the changes and why you're making them.
+Example: “Add option to clean image cache, to mitigate stuck/blank movie poster issues.”
 -->
 
 ## 🏷️ Ticket / Issue
 <!--
 Link to the related ticket, issue or user story.
-You can also indicate if this PR supersedes a previous one.
-Example:
-- Closes #123
-- Fixes STREAMYFIN-456
-- Resolves #789
-- Supersedes #120
-- Related: #130
+Example: Fixes #123
 -->
 
-## 🛠️ What’s Changed
-<!-- Use a Conventional Commit in the PR title, e.g., `feat(auth): add MFA`. 
-If this PR introduces a breaking change, include a `BREAKING CHANGE:` block in the description.
-Spec: https://www.conventionalcommits.org/ -->
-
-- Type: feat | fix | docs | style | refactor | perf | test | chore | build | ci | revert
-- Scope (optional): e.g., auth, billing, mobile
-- Short summary: what changed and why (1–2 lines)
--->
-
-## 📋 Details
-<!--
-Provide more context or background. Explain any non-obvious decisions.
-Include screenshots or GIFs for UI changes if applicable.
--->
-
-### ⚠️ Breaking Changes
-<!-- List any breaking API/contract changes and migration guidance. If none, write “None”. -->
-
-### 🔐 Security & Privacy Impact
-<!-- Data touched, new permissions/scopes, PII, secrets, threat considerations. If none, write “None”. -->
-
-### ⚡ Performance Impact
-<!-- Hot paths, memory/CPU/latency implications, benchmarks if available. -->
-
 ### 🖼️ Screenshots / GIFs (if UI)
-<!-- Before/After, dark mode, responsive states. -->
+<!-- 
+Include screenshots of relevant UI changes for both Android and iOS.
+Before/After, responsive states (if relevant). 
+-->
 
 ## ✅ Checklist
 <!--
 Review and check off items as you complete them.
 -->
 - [ ] I’ve read the [contribution guidelines](CONTRIBUTING.md)
-- [ ] Code follows project style and passes lint/format (`npm|pnpm|yarn|bun` scripts)
-- [ ] Type checks pass (tsc/biome/etc.)
-- [ ] Docs updated (README/ADR/usage/API)
-- [ ] No secrets/credentials included; env vars documented
-- [ ] Release notes/CHANGELOG entry added (if applicable)
-- [ ] Verified locally that changes behave as expected
+- [ ] Verified that changes behave as expected for all platforms
+- [ ] Code passes lint/formatting and type checks (`tsc`/`biome`)
+- [ ] No secrets, hardcoded credentials, or private config files are included
+- [ ] I've declared if AI was used to assist with this PR (by uncommenting the line at the bottom, or not)
 
 ## 🔍 Testing Instructions
 <!--
-Describe how reviewers can test your changes.
+Describe how reviewers can test your changes. This will help the PR get merged faster.
 Example:
-1. `git fetch origin pull/<PR_ID>/head:branchname && git checkout branchname`
-2. Install deps: `npm|pnpm|yarn|bun install`
-3. Start service/app: `npm|pnpm|yarn|bun run [target]` (e.g., `npm run ios` or `bun run android:tv`)
-4. Run tests: `npm|pnpm|yarn|bun test`
-5. Verification steps:
-   - [ ] Expected UI/endpoint behavior
-   - [ ] Logs show no errors
-   - [ ] Edge cases covered (list)
+1. Open the settings page and scroll to the bottom
+2. Verify that the clear data button is visible and pressable
+3. Verify that when you click the clear data button, a dialog appears prompting you to confirm
+4. Verify that when you click the confirm button, the data is cleared and a toast message is displayed
 -->
 
-## ⚙️ Deployment Notes
-<!--
-Describe any deployment considerations such as config, environment vars, or native builds.
--->
-
-## 📝 Additional Notes
-<!--
-Any other information or references related to this PR.
--->

.github/renovate.json

@@ -25,6 +25,25 @@
   "osvVulnerabilityAlerts": true,
   "configMigration": true,
   "separateMinorPatch": true,
+  "customManagers": [
+    {
+      "customType": "regex",
+      "managerFilePatterns": ["/\\.ya?ml$/"],
+      "matchStrings": [
+        "# renovate: datasource=(?<datasource>\\S+) depName=(?<depName>\\S+)(?: versioning=(?<versioning>\\S+))?\\s+xcode-version:\\s*[\"']?(?<currentValue>[^\"'\\s]+)"
+      ],
+      "versioningTemplate": "{{#if versioning}}{{{versioning}}}{{else}}loose{{/if}}"
+    }
+  ],
+  "customDatasources": {
+    "xcode": {
+      "defaultRegistryUrlTemplate": "https://xcodereleases.com/data.json",
+      "format": "json",
+      "transformTemplates": [
+        "{ \"releases\": [$[version.release.release=true].{\"version\": version.number}] }"
+      ]
+    }
+  },
   "lockFileMaintenance": {
     "vulnerabilityAlerts": {
       "enabled": true,

.github/workflows/build-apps.yml

@@ -218,7 +218,8 @@ jobs:
       - name: 🔧 Setup Xcode
         uses: maxim-lobanov/setup-xcode@ed7a3b1fda3918c0306d1b724322adc0b8cc0a90 # v1
         with:
-          xcode-version: "26.2"
+          # renovate: datasource=custom.xcode depName=xcode versioning=loose
+          xcode-version: "26.4"
 
       - name: 🏗️ Setup EAS
         uses: expo/expo-github-action@b184ff86a3c926240f1b6db41764c83a01c02eef # main
@@ -282,7 +283,8 @@ jobs:
       - name: 🔧 Setup Xcode
         uses: maxim-lobanov/setup-xcode@ed7a3b1fda3918c0306d1b724322adc0b8cc0a90 # v1
         with:
-          xcode-version: "26.2"
+          # renovate: datasource=custom.xcode depName=xcode versioning=loose
+          xcode-version: "26.4"
 
       - name: 🚀 Build iOS app
         env:
@@ -341,7 +343,8 @@ jobs:
       - name: 🔧 Setup Xcode
         uses: maxim-lobanov/setup-xcode@ed7a3b1fda3918c0306d1b724322adc0b8cc0a90 # v1
         with:
-          xcode-version: "26.2"
+          # renovate: datasource=custom.xcode depName=xcode versioning=loose
+          xcode-version: "26.4"
 
       - name: 🏗️ Setup EAS
         uses: expo/expo-github-action@b184ff86a3c926240f1b6db41764c83a01c02eef # main
@@ -366,9 +369,10 @@ jobs:
           retention-days: 7
 
   build-ios-tv-unsigned:
-    # Temporarily disabled until feat/tv-interface is merged (TV UI not ready).
-    # Re-enable by removing the `false &&` prefix below.
-    if: false && (!contains(github.event.head_commit.message, '[skip ci]'))
+    # Unsigned tvOS build is enabled (compiles without Apple credentials).
+    # The signed tvOS job above stays disabled until tvOS provisioning
+    # profiles are set up in EAS (app + TopShelf targets).
+    if: (!contains(github.event.head_commit.message, '[skip ci]'))
     runs-on: macos-26
     name: 🍎 Build tvOS IPA (Unsigned)
     permissions:
@@ -407,7 +411,8 @@ jobs:
       - name: 🔧 Setup Xcode
         uses: maxim-lobanov/setup-xcode@ed7a3b1fda3918c0306d1b724322adc0b8cc0a90 # v1
         with:
-          xcode-version: "26.2"
+          # renovate: datasource=custom.xcode depName=xcode versioning=loose
+          xcode-version: "26.4"
 
       - name: 🚀 Build iOS app
         env:

.github/workflows/release.yml

@@ -0,0 +1,216 @@
+name: 🚀 Release (EAS build + submit)
+
+# On merge to main (gated by the `production` GitHub Environment approval),
+# build all targets on EAS in parallel via custom bun build configs:
+#   1. iOS phone        → App Store (auto-submit)
+#   2. tvOS             → App Store (auto-submit)
+#   3. Android AAB      → Google Play (auto-submit)
+#   4. Android phone APK→ downloadable artifact
+#   5. Android TV APK   → downloadable artifact
+# Note: EAS queues builds based on your plan's concurrency; parallel jobs
+# here just submit them — EAS may still run them serially.
+
+concurrency:
+  group: release-${{ github.ref }}
+  cancel-in-progress: false
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+jobs:
+  approve:
+    name: 🔐 Approve release
+    runs-on: ubuntu-24.04
+    environment: production
+    steps:
+      - name: ✅ Release approved
+        run: echo "Release approved for ${{ github.sha }}"
+
+  build:
+    name: 🚀 ${{ matrix.name }}
+    needs: approve
+    runs-on: ubuntu-24.04
+    permissions:
+      contents: read
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - name: 🍎 iOS
+            platform: ios
+            profile: production
+            submit: true
+          - name: 📺 tvOS
+            platform: ios
+            profile: production_tv
+            submit: true
+          - name: 🤖 Android AAB
+            platform: android
+            profile: production
+            submit: true
+          - name: 🤖 Android APK
+            platform: android
+            profile: production-apk
+            submit: false
+            artifact_name: streamyfin-android-phone-apk
+          - name: 📺 Android TV APK
+            platform: android
+            profile: production-apk-tv
+            submit: false
+            artifact_name: streamyfin-android-tv-apk
+
+    steps:
+      - name: 📥 Checkout code
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          fetch-depth: 0
+          submodules: recursive
+          show-progress: false
+
+      - name: 🍞 Setup Bun
+        uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
+        with:
+          bun-version: latest
+
+      - name: 💾 Cache Bun dependencies
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        with:
+          path: ~/.bun/install/cache
+          key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-bun-cache
+
+      - name: 📦 Install dependencies and reload submodules
+        run: |
+          bun install --frozen-lockfile
+          bun run submodule-reload
+
+      - name: 🏗️ Setup EAS
+        uses: expo/expo-github-action@b184ff86a3c926240f1b6db41764c83a01c02eef # main
+        with:
+          eas-version: latest
+          token: ${{ secrets.EXPO_TOKEN }}
+          eas-cache: true
+
+      # tvOS uses credentialsSource: local — restore the gitignored
+      # credentials.json + cert + provisioning profiles from secrets.
+      - name: 🔐 Restore tvOS signing credentials
+        if: matrix.profile == 'production_tv'
+        env:
+          EAS_CREDENTIALS_JSON: ${{ secrets.EAS_CREDENTIALS_JSON }}
+          TVOS_DIST_CERT_P12_BASE64: ${{ secrets.TVOS_DIST_CERT_P12_BASE64 }}
+          TVOS_APP_PROFILE_BASE64: ${{ secrets.TVOS_APP_PROFILE_BASE64 }}
+          TVOS_TOPSHELF_PROFILE_BASE64: ${{ secrets.TVOS_TOPSHELF_PROFILE_BASE64 }}
+        run: |
+          mkdir -p certs profiles
+          printf '%s' "$EAS_CREDENTIALS_JSON" > credentials.json
+          echo "$TVOS_DIST_CERT_P12_BASE64" | base64 -d > certs/distribution.p12
+          echo "$TVOS_APP_PROFILE_BASE64" | base64 -d > profiles/Streamyfin_tvOS_App_Store.mobileprovision
+          echo "$TVOS_TOPSHELF_PROFILE_BASE64" | base64 -d > profiles/Streamyfin_TopShelf_tvOS_App_Store.mobileprovision
+
+      # Android Play submit needs the Google Play service account JSON.
+      - name: 🔐 Restore Google Play service account
+        if: matrix.platform == 'android' && matrix.submit
+        env:
+          GOOGLE_SERVICE_ACCOUNT_KEY: ${{ secrets.GOOGLE_SERVICE_ACCOUNT_KEY }}
+        run: printf '%s' "$GOOGLE_SERVICE_ACCOUNT_KEY" > google-service-account.json
+
+      # App Store Connect API key for iOS/tvOS submit (raw-PEM or base64).
+      - name: 🔐 Restore App Store Connect API key
+        if: matrix.platform == 'ios'
+        env:
+          APPLE_KEY_CONTENT: ${{ secrets.APPLE_KEY_CONTENT }}
+        run: |
+          if printf '%s' "$APPLE_KEY_CONTENT" | grep -q "BEGIN PRIVATE KEY"; then
+            printf '%s' "$APPLE_KEY_CONTENT" > "$RUNNER_TEMP/asc_api_key.p8"
+          else
+            printf '%s' "$APPLE_KEY_CONTENT" | base64 -d > "$RUNNER_TEMP/asc_api_key.p8"
+          fi
+
+      # ── Submit builds: cloud build + auto-submit to the store ──
+      - name: 🚀 Build & submit (${{ matrix.name }})
+        if: matrix.submit
+        env:
+          EXPO_TOKEN: ${{ secrets.EXPO_TOKEN }}
+          EXPO_ASC_API_KEY_PATH: ${{ runner.temp }}/asc_api_key.p8
+          EXPO_ASC_KEY_ID: ${{ secrets.APPLE_KEY_ID }}
+          EXPO_ASC_ISSUER_ID: ${{ secrets.APPLE_KEY_ISSUER_ID }}
+        run: |
+          eas build \
+            --platform ${{ matrix.platform }} \
+            --profile ${{ matrix.profile }} \
+            --auto-submit \
+            --non-interactive \
+            --wait
+
+      # ── Artifact builds: cloud build, then download + upload the APK ──
+      - name: 🏗️ Build artifact (${{ matrix.name }})
+        if: ${{ !matrix.submit }}
+        env:
+          EXPO_TOKEN: ${{ secrets.EXPO_TOKEN }}
+        run: |
+          eas build \
+            --platform ${{ matrix.platform }} \
+            --profile ${{ matrix.profile }} \
+            --non-interactive \
+            --wait \
+            --json > build-result.json
+          URL=$(node -e "const b=require('./build-result.json'); const x=Array.isArray(b)?b[0]:b; console.log(x.artifacts.applicationArchiveUrl)")
+          echo "Downloading artifact: $URL"
+          curl -fL "$URL" -o "${{ matrix.artifact_name }}.apk"
+
+      - name: 📤 Upload APK artifact (${{ matrix.name }})
+        if: ${{ !matrix.submit }}
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: ${{ matrix.artifact_name }}
+          path: ${{ matrix.artifact_name }}.apk
+          retention-days: 14
+
+  # Draft a GitHub Release with the two APKs attached. The tag comes from the
+  # merged-in app version (app.json → expo.version), NOT the auto-incremented
+  # build number — so cutting a release is a deliberate version bump via PR.
+  github-release:
+    name: 📦 Draft GitHub Release
+    needs: build
+    if: ${{ !cancelled() }}
+    runs-on: ubuntu-24.04
+    permissions:
+      contents: write
+      actions: read # required for `gh run download` to list/fetch this run's artifacts
+    steps:
+      - name: 📥 Checkout code
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          fetch-depth: 0
+          show-progress: false
+
+      - name: 📦 Download APK artifacts from this run
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          mkdir -p apks
+          gh run download ${{ github.run_id }} --name streamyfin-android-phone-apk --dir apks
+          gh run download ${{ github.run_id }} --name streamyfin-android-tv-apk --dir apks
+          ls -la apks
+
+      - name: 📝 Draft release (tag = app.json version, not auto-bumped)
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          VERSION=$(node -e "console.log(require('./app.json').expo.version)")
+          TAG="v$VERSION"
+          echo "Release tag from merged app version: $TAG"
+          if gh release view "$TAG" >/dev/null 2>&1; then
+            echo "Release $TAG exists — updating APK assets"
+            gh release upload "$TAG" apks/*.apk --clobber
+          else
+            echo "Creating draft release $TAG"
+            gh release create "$TAG" \
+              --draft \
+              --generate-notes \
+              --title "$TAG" \
+              apks/*.apk
+          fi

.gitignore

@@ -18,6 +18,9 @@ web-build/
 /androidmobile
 /androidtv
 
+# Gradle caches (top-level + per-module native projects)
+**/.gradle/
+
 # Module-specific Builds
 modules/mpv-player/android/build
 modules/player/android
@@ -73,4 +76,12 @@ modules/background-downloader/android/build/*
 
 # ios:unsigned-build Artifacts
 build/
+# but keep EAS custom build configs (the generic build/ rule above matches .eas/build/)
+!.eas/build/
+!.eas/build/**
 .claude/
+.agents/skills/**
+skills-lock.json
+
+# CI-injected Google Play service account key (written at build time)
+google-service-account.json

app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "Streamyfin",
     "slug": "streamyfin",
-    "version": "0.54.0",
+    "version": "0.54.1",
     "orientation": "default",
     "icon": "./assets/images/icon.png",
     "scheme": "streamyfin",
@@ -36,7 +36,6 @@
       "appleTeamId": "MWD5K362T8"
     },
     "android": {
-      "versionCode": 93,
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/icon-android-plain.png",
         "monochromeImage": "./assets/images/icon-android-themed.png",
@@ -78,15 +77,16 @@
         "expo-build-properties",
         {
           "ios": {
-            "deploymentTarget": "15.6",
-            "useFrameworks": "static"
+            "deploymentTarget": "16.4",
+            "useFrameworks": "static",
+            "forceStaticLinking": ["ExpoUI", "GlassEffectView", "GlassPoster"]
           },
           "android": {
             "buildArchs": ["arm64-v8a", "x86_64", "armeabi-v7a"],
             "compileSdkVersion": 36,
             "targetSdkVersion": 35,
             "buildToolsVersion": "35.0.0",
-            "kotlinVersion": "2.0.21",
+            "kotlinVersion": "2.1.20",
             "minSdkVersion": 26,
             "usesCleartextTraffic": true,
             "packagingOptions": {
@@ -143,8 +143,8 @@
       [
         "./plugins/withGitPod.js",
         {
-          "podName": "MPVKit-GPL",
-          "podspecUrl": "https://raw.githubusercontent.com/streamyfin/MPVKit/0.40.0-av/MPVKit-GPL.podspec"
+          "podName": "MPVKit",
+          "podspecUrl": "https://raw.githubusercontent.com/mpv-ios/MPVKit/0.41.0-av/MPVKit.podspec"
         }
       ]
     ],

app/(auth)/(tabs)/(custom-links)/index.tsx

@@ -16,7 +16,7 @@ export interface MenuLink {
   icon: string;
 }
 
-export default function menuLinks() {
+export default function CustomLinksPage() {
   const [api] = useAtom(apiAtom);
   const insets = useSafeAreaInsets();
   const [menuLinks, setMenuLinks] = useState<MenuLink[]>([]);

app/(auth)/(tabs)/(favorites)/index.tsx

@@ -5,7 +5,7 @@ import { Favorites } from "@/components/home/Favorites";
 import { Favorites as TVFavorites } from "@/components/home/Favorites.tv";
 import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
 
-export default function favorites() {
+export default function FavoritesPage() {
   const invalidateCache = useInvalidatePlaybackProgressCache();
 
   const [loading, setLoading] = useState(false);

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

@@ -9,6 +9,7 @@ import useRouter from "@/hooks/useAppRouter";
 const Chromecast = Platform.isTV ? null : require("@/components/Chromecast");
 
 import { useAtom } from "jotai";
+import { HeaderBackButton } from "@/components/common/HeaderBackButton";
 import { useSessions, type useSessionsProps } from "@/hooks/useSessions";
 import { userAtom } from "@/providers/JellyfinProvider";
 
@@ -47,15 +48,7 @@ export default function IndexLayout() {
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           title: t("home.downloads.downloads_title"),
-          headerLeft: () => (
-            <Pressable
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
+          headerLeft: () => <HeaderBackButton />,
         }}
       />
       <Stack.Screen
@@ -66,15 +59,7 @@ export default function IndexLayout() {
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
-          headerLeft: () => (
-            <Pressable
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
+          headerLeft: () => <HeaderBackButton />,
         }}
       />
       <Stack.Screen
@@ -104,15 +89,7 @@ export default function IndexLayout() {
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
-          headerLeft: () => (
-            <Pressable
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
+          headerLeft: () => <HeaderBackButton />,
         }}
       />
       <Stack.Screen
@@ -123,15 +100,7 @@ export default function IndexLayout() {
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
-          headerLeft: () => (
-            <Pressable
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
+          headerLeft: () => <HeaderBackButton />,
         }}
       />
       <Stack.Screen
@@ -142,15 +111,7 @@ export default function IndexLayout() {
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
-          headerLeft: () => (
-            <Pressable
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
+          headerLeft: () => <HeaderBackButton />,
         }}
       />
       <Stack.Screen
@@ -161,15 +122,7 @@ export default function IndexLayout() {
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
-          headerLeft: () => (
-            <Pressable
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
+          headerLeft: () => <HeaderBackButton />,
         }}
       />
       <Stack.Screen
@@ -180,15 +133,7 @@ export default function IndexLayout() {
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
-          headerLeft: () => (
-            <Pressable
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
+          headerLeft: () => <HeaderBackButton />,
         }}
       />
       <Stack.Screen
@@ -199,15 +144,7 @@ export default function IndexLayout() {
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
-          headerLeft: () => (
-            <Pressable
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
+          headerLeft: () => <HeaderBackButton />,
         }}
       />
       <Stack.Screen
@@ -237,15 +174,7 @@ export default function IndexLayout() {
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
-          headerLeft: () => (
-            <Pressable
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
+          headerLeft: () => <HeaderBackButton />,
         }}
       />
       <Stack.Screen
@@ -256,15 +185,7 @@ export default function IndexLayout() {
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
-          headerLeft: () => (
-            <Pressable
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
+          headerLeft: () => <HeaderBackButton />,
         }}
       />
       <Stack.Screen
@@ -275,15 +196,7 @@ export default function IndexLayout() {
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
-          headerLeft: () => (
-            <Pressable
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
+          headerLeft: () => <HeaderBackButton />,
         }}
       />
       <Stack.Screen
@@ -294,15 +207,7 @@ export default function IndexLayout() {
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
-          headerLeft: () => (
-            <Pressable
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
+          headerLeft: () => <HeaderBackButton />,
         }}
       />
       <Stack.Screen
@@ -313,15 +218,7 @@ export default function IndexLayout() {
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
-          headerLeft: () => (
-            <Pressable
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
+          headerLeft: () => <HeaderBackButton />,
         }}
       />
       <Stack.Screen
@@ -332,15 +229,7 @@ export default function IndexLayout() {
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
-          headerLeft: () => (
-            <Pressable
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
+          headerLeft: () => <HeaderBackButton />,
         }}
       />
       <Stack.Screen
@@ -351,15 +240,29 @@ export default function IndexLayout() {
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
-          headerLeft: () => (
-            <Pressable
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
+          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]) => (
@@ -369,11 +272,7 @@ export default function IndexLayout() {
         name='collections/[collectionId]'
         options={{
           title: "",
-          headerLeft: () => (
-            <Pressable onPress={() => _router.back()} className='pl-0.5'>
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
+          headerLeft: () => <HeaderBackButton />,
           headerShown: !Platform.isTV,
           headerBlurEffect: "prominent",
           headerTransparent: Platform.OS === "ios",

app/(auth)/(tabs)/(home)/downloads/index.tsx

@@ -1,4 +1,9 @@
-import { BottomSheetModal } from "@gorhom/bottom-sheet";
+import {
+  BottomSheetBackdrop,
+  type BottomSheetBackdropProps,
+  BottomSheetModal,
+  BottomSheetView,
+} from "@gorhom/bottom-sheet";
 import { useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -7,6 +12,7 @@ import { Alert, Platform, ScrollView, View } from "react-native";
 import { Pressable } from "react-native-gesture-handler";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { toast } from "sonner-native";
+import { Button } from "@/components/Button";
 import { Text } from "@/components/common/Text";
 import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import ActiveDownloads from "@/components/downloads/ActiveDownloads";
@@ -20,7 +26,7 @@ import { OfflineModeProvider } from "@/providers/OfflineModeProvider";
 import { queueAtom } from "@/utils/atoms/queue";
 import { writeToLog } from "@/utils/log";
 
-export default function page() {
+export default function DownloadsPage() {
   const navigation = useNavigation();
   const { t } = useTranslation();
   const [_queue, _setQueue] = useAtom(queueAtom);
@@ -101,7 +107,7 @@ export default function page() {
     navigation.setOptions({
       headerRight: () => (
         <Pressable
-          onPress={bottomSheetModalRef.current?.present}
+          onPress={() => bottomSheetModalRef.current?.present()}
           className='px-2'
         >
           <DownloadSize items={downloadedFiles?.map((f) => f.item) || []} />
@@ -116,7 +122,7 @@ export default function page() {
     }
   }, [showMigration]);
 
-  const _deleteMovies = () =>
+  const deleteMovies = () =>
     deleteFileByType("Movie")
       .then(() =>
         toast.success(
@@ -127,7 +133,7 @@ export default function page() {
         writeToLog("ERROR", reason);
         toast.error(t("home.downloads.toasts.failed_to_delete_all_movies"));
       });
-  const _deleteShows = () =>
+  const deleteShows = () =>
     deleteFileByType("Episode")
       .then(() =>
         toast.success(
@@ -138,7 +144,7 @@ export default function page() {
         writeToLog("ERROR", reason);
         toast.error(t("home.downloads.toasts.failed_to_delete_all_tvseries"));
       });
-  const _deleteOtherMedia = () =>
+  const deleteOtherMedia = () =>
     Promise.all(
       otherMedia
         .filter((item) => item.item.Type)
@@ -162,6 +168,9 @@ export default function page() {
         ),
     );
 
+  const deleteAllMedia = async () =>
+    await Promise.all([deleteMovies(), deleteShows(), deleteOtherMedia()]);
+
   return (
     <OfflineModeProvider isOffline={true}>
       <ScrollView
@@ -256,6 +265,42 @@ export default function page() {
           )}
         </View>
       </ScrollView>
+      <BottomSheetModal
+        ref={bottomSheetModalRef}
+        enableDynamicSizing
+        handleIndicatorStyle={{
+          backgroundColor: "white",
+        }}
+        backgroundStyle={{
+          backgroundColor: "#171717",
+        }}
+        backdropComponent={(props: BottomSheetBackdropProps) => (
+          <BottomSheetBackdrop
+            {...props}
+            disappearsOnIndex={-1}
+            appearsOnIndex={0}
+          />
+        )}
+      >
+        <BottomSheetView>
+          <View className='p-4 space-y-4 mb-4'>
+            <Button color='purple' onPress={deleteMovies}>
+              {t("home.downloads.delete_all_movies_button")}
+            </Button>
+            <Button color='purple' onPress={deleteShows}>
+              {t("home.downloads.delete_all_tvseries_button")}
+            </Button>
+            {otherMedia.length > 0 && (
+              <Button color='purple' onPress={deleteOtherMedia}>
+                {t("home.downloads.delete_all_other_media_button")}
+              </Button>
+            )}
+            <Button color='red' onPress={deleteAllMedia}>
+              {t("home.downloads.delete_all_button")}
+            </Button>
+          </View>
+        </BottomSheetView>
+      </BottomSheetModal>
     </OfflineModeProvider>
   );
 }

app/(auth)/(tabs)/(home)/sessions/index.tsx

@@ -23,7 +23,7 @@ import { formatBitrate } from "@/utils/bitrate";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 import { formatTimeString } from "@/utils/time";
 
-export default function page() {
+export default function SessionsPage() {
   const { sessions, isLoading } = useSessions({} as useSessionsProps);
   const { t } = useTranslation();
 
@@ -72,7 +72,7 @@ const SessionCard = ({ session }: SessionCardProps) => {
   };
 
   const getProgressPercentage = () => {
-    if (!session.NowPlayingItem || !session.NowPlayingItem.RunTimeTicks) {
+    if (!session.NowPlayingItem?.RunTimeTicks) {
       return 0;
     }
 

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>
+        </>
+      )}
 
-        <TouchableOpacity
-          className='mb-4 p-4 rounded-xl bg-neutral-900 border border-neutral-800'
-          onPress={() => router.push("/(auth)/(tabs)/(home)/companion-login")}
-        >
-          <Text className='text-white font-bold text-base mb-1'>
-            {t("pairing.pair_with_phone_title")}
-          </Text>
-          <Text className='text-neutral-400 text-sm'>
-            {t("pairing.pair_with_phone_description")}
-          </Text>
-        </TouchableOpacity>
-
-        <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/appearance/hide-libraries/page.tsx

@@ -12,7 +12,7 @@ import DisabledSetting from "@/components/settings/DisabledSetting";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 
-export default function page() {
+export default function AppearanceHideLibrariesPage() {
   const { settings, updateSettings, pluginSettings } = useSettings();
   const user = useAtomValue(userAtom);
   const api = useAtomValue(apiAtom);

app/(auth)/(tabs)/(home)/settings/hide-libraries/page.tsx

@@ -11,7 +11,7 @@ import DisabledSetting from "@/components/settings/DisabledSetting";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 
-export default function page() {
+export default function HideLibrariesPage() {
   const { settings, updateSettings, pluginSettings } = useSettings();
   const user = useAtomValue(userAtom);
   const api = useAtomValue(apiAtom);

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/jellyseerr/page.tsx

@@ -4,7 +4,7 @@ import DisabledSetting from "@/components/settings/DisabledSetting";
 import { JellyseerrSettings } from "@/components/settings/Jellyseerr";
 import { useSettings } from "@/utils/atoms/settings";
 
-export default function page() {
+export default function JellyseerrPluginPage() {
   const { pluginSettings } = useSettings();
   const insets = useSafeAreaInsets();
 

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

@@ -4,7 +4,7 @@ import DisabledSetting from "@/components/settings/DisabledSetting";
 import { KefinTweaksSettings } from "@/components/settings/KefinTweaks";
 import { useSettings } from "@/utils/atoms/settings";
 
-export default function page() {
+export default function KefinTweaksPage() {
   const { pluginSettings } = useSettings();
   const insets = useSafeAreaInsets();
 

app/(auth)/(tabs)/(home)/settings/plugins/marlin-search/page.tsx

@@ -18,7 +18,7 @@ import DisabledSetting from "@/components/settings/DisabledSetting";
 import { useNetworkAwareQueryClient } from "@/hooks/useNetworkAwareQueryClient";
 import { useSettings } from "@/utils/atoms/settings";
 
-export default function page() {
+export default function MarlinSearchPage() {
   const navigation = useNavigation();
 
   const { t } = useTranslation();

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

@@ -17,7 +17,7 @@ import { ListItem } from "@/components/list/ListItem";
 import { useNetworkAwareQueryClient } from "@/hooks/useNetworkAwareQueryClient";
 import { useSettings } from "@/utils/atoms/settings";
 
-export default function page() {
+export default function StreamystatsPage() {
   const { t } = useTranslation();
   const navigation = useNavigation();
   const insets = useSafeAreaInsets();
@@ -114,7 +114,7 @@ export default function page() {
   };
 
   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)/(home,libraries,search,favorites,watchlists)/items/page.tsx

@@ -37,8 +37,10 @@ const Page: React.FC = () => {
     ItemFields.MediaStreams,
   ]);
 
-  // Lazily preload item with full media sources in background
-  const { data: itemWithSources } = useItemQuery(id, isOffline, undefined, []);
+  // Lazily preload item with full media sources in background — never cache
+  const { data: itemWithSources } = useItemQuery(id, isOffline, undefined, [], {
+    gcTime: 0,
+  });
 
   const opacity = useSharedValue(1);
   const animatedStyle = useAnimatedStyle(() => {

app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/jellyseerr/company/[companyId].tsx

@@ -13,7 +13,7 @@ import {
 } from "@/utils/jellyseerr/server/models/Search";
 import { COMPANY_LOGO_IMAGE_FILTER } from "@/utils/jellyseerr/src/components/Discover/NetworkSlider";
 
-export default function page() {
+export default function JellyseerrCompanyPage() {
   const local = useLocalSearchParams();
   const { jellyseerrApi, isJellyseerrMovieOrTvResult } = useJellyseerr();
 

app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/jellyseerr/genre/[genreId].tsx

@@ -9,7 +9,7 @@ import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
 import { Endpoints, useJellyseerr } from "@/hooks/useJellyseerr";
 import { DiscoverSliderType } from "@/utils/jellyseerr/server/constants/discover";
 
-export default function page() {
+export default function JellyseerrGenrePage() {
   const local = useLocalSearchParams();
   const { jellyseerrApi, isJellyseerrMovieOrTvResult } = useJellyseerr();
 

app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/jellyseerr/page.tsx

@@ -6,6 +6,7 @@ import {
   BottomSheetTextInput,
   BottomSheetView,
 } from "@gorhom/bottom-sheet";
+import type { BottomSheetModalMethods } from "@gorhom/bottom-sheet/lib/typescript/types";
 import { useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
 import { useLocalSearchParams, useNavigation } from "expo-router";
@@ -76,7 +77,7 @@ const MobilePage: React.FC = () => {
   const [issueMessage, setIssueMessage] = useState<string>();
   const [requestBody, _setRequestBody] = useState<MediaRequestBody>();
   const [issueTypeDropdownOpen, setIssueTypeDropdownOpen] = useState(false);
-  const advancedReqModalRef = useRef<BottomSheetModal>(null);
+  const advancedReqModalRef = useRef<BottomSheetModalMethods>(null);
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
 
   const {

app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/jellyseerr/person/[personId].tsx

@@ -11,7 +11,7 @@ import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
 import { useJellyseerr } from "@/hooks/useJellyseerr";
 import type { PersonCreditCast } from "@/utils/jellyseerr/server/models/Person";
 
-export default function page() {
+export default function JellyseerrPersonPage() {
   const local = useLocalSearchParams();
   const { t } = useTranslation();
 

app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/livetv/_layout.tsx

@@ -1,13 +1,13 @@
+import { Slot, Stack, withLayoutContext } from "expo-router";
 import {
   createMaterialTopTabNavigator,
   MaterialTopTabNavigationEventMap,
   MaterialTopTabNavigationOptions,
-} from "@react-navigation/material-top-tabs";
+} from "expo-router/js-top-tabs";
 import type {
   ParamListBase,
   TabNavigationState,
-} from "@react-navigation/native";
-import { Slot, Stack, withLayoutContext } from "expo-router";
+} from "expo-router/react-navigation";
 import { Platform } from "react-native";
 
 const { Navigator } = createMaterialTopTabNavigator();

app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/livetv/channels.tsx

@@ -8,7 +8,7 @@ import { ItemImage } from "@/components/common/ItemImage";
 import { Text } from "@/components/common/Text";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 
-export default function page() {
+export default function LiveTvChannelsPage() {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
   const _insets = useSafeAreaInsets();

app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/livetv/guide.tsx

@@ -17,7 +17,7 @@ const ITEMS_PER_PAGE = 20;
 
 const MemoizedLiveTVGuideRow = React.memo(LiveTVGuideRow);
 
-export default function page() {
+export default function LiveTvGuidePage() {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
   const insets = useSafeAreaInsets();

app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/livetv/recordings.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from "react-i18next";
 import { View } from "react-native";
 import { Text } from "@/components/common/Text";
 
-export default function page() {
+export default function LiveTvRecordingsPage() {
   const { t } = useTranslation();
   return (
     <View className='flex items-center justify-center h-full -mt-12'>

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

@@ -40,6 +40,7 @@ import { useScaledTVPosterSizes } from "@/constants/TVPosterSizes";
 import { useScaledTVTypography } from "@/constants/TVTypography";
 import useRouter from "@/hooks/useAppRouter";
 import { useOrientation } from "@/hooks/useOrientation";
+import { useRefreshLibraryOnFocus } from "@/hooks/useRefreshLibraryOnFocus";
 import { useTVItemActionModal } from "@/hooks/useTVItemActionModal";
 import { useTVOptionModal } from "@/hooks/useTVOptionModal";
 import * as ScreenOrientation from "@/packages/expo-screen-orientation";
@@ -104,6 +105,10 @@ const Page = () => {
 
   const { orientation } = useOrientation();
 
+  // Fallback refresh for newly added content when returning to the library
+  // (primary path is the LibraryChanged WebSocket event).
+  useRefreshLibraryOnFocus();
+
   const { t } = useTranslation();
   const router = useRouter();
   const { showOptions } = useTVOptionModal();

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

@@ -1,13 +1,13 @@
+import { Stack, useLocalSearchParams, withLayoutContext } from "expo-router";
 import {
   createMaterialTopTabNavigator,
   MaterialTopTabNavigationEventMap,
   MaterialTopTabNavigationOptions,
-} from "@react-navigation/material-top-tabs";
+} from "expo-router/js-top-tabs";
 import type {
   ParamListBase,
   TabNavigationState,
-} from "@react-navigation/native";
-import { Stack, useLocalSearchParams, withLayoutContext } from "expo-router";
+} from "expo-router/react-navigation";
 import { useTranslation } from "react-i18next";
 
 const { Navigator } = createMaterialTopTabNavigator();
@@ -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)/(tabs)/(libraries)/music/[libraryId]/albums.tsx

@@ -1,8 +1,8 @@
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
-import { useRoute } from "@react-navigation/native";
 import { FlashList } from "@shopify/flash-list";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { useLocalSearchParams } from "expo-router";
+import { useRoute } from "expo-router/react-navigation";
 import { useAtom } from "jotai";
 import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";

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

@@ -1,8 +1,8 @@
 import { getArtistsApi } from "@jellyfin/sdk/lib/utils/api";
-import { useRoute } from "@react-navigation/native";
 import { FlashList } from "@shopify/flash-list";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { useLocalSearchParams } from "expo-router";
+import { useRoute } from "expo-router/react-navigation";
 import { useAtom } from "jotai";
 import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";

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

@@ -1,9 +1,9 @@
 import { Ionicons } from "@expo/vector-icons";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
-import { useNavigation, useRoute } from "@react-navigation/native";
 import { FlashList } from "@shopify/flash-list";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { useLocalSearchParams } from "expo-router";
+import { useNavigation, useRoute } from "expo-router/react-navigation";
 import { useAtom } from "jotai";
 import { useCallback, useLayoutEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";

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

@@ -1,9 +1,9 @@
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
-import { useRoute } from "@react-navigation/native";
 import { FlashList } from "@shopify/flash-list";
 import { useQuery } from "@tanstack/react-query";
 import { useLocalSearchParams } from "expo-router";
+import { useRoute } from "expo-router/react-navigation";
 import { useAtom } from "jotai";
 import { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";

app/(auth)/(tabs)/(search)/index.tsx

@@ -66,7 +66,7 @@ const exampleSearches = [
   "The Mandalorian",
 ];
 
-export default function search() {
+export default function SearchPage() {
   const params = useLocalSearchParams();
   const insets = useSafeAreaInsets();
   const router = useRouter();
@@ -221,7 +221,7 @@ export default function search() {
 
         const ids = response1.data.ids;
 
-        if (!ids || !ids.length) {
+        if (!ids?.length) {
           return [];
         }
 

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

@@ -3,11 +3,11 @@ import {
   type NativeBottomTabNavigationEventMap,
   type NativeBottomTabNavigationOptions,
 } from "@bottom-tabs/react-navigation";
+import { withLayoutContext } from "expo-router";
 import type {
   ParamListBase,
   TabNavigationState,
-} from "@react-navigation/native";
-import { withLayoutContext } from "expo-router";
+} from "expo-router/react-navigation";
 import { useTranslation } from "react-i18next";
 import { Platform, View } from "react-native";
 import { SystemBars } from "react-native-edge-to-edge";

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

@@ -63,7 +63,7 @@ import { writeToLog } from "@/utils/log";
 import { msToTicks, ticksToSeconds } from "@/utils/time";
 import { generateDeviceProfile } from "../../../utils/profiles/native";
 
-export default function page() {
+export default function DirectPlayerPage() {
   const videoRef = useRef<MpvPlayerViewRef>(null);
   const user = useAtomValue(userAtom);
   const api = useAtomValue(apiAtom);
@@ -185,11 +185,11 @@ export default function page() {
     return undefined;
   }, [audioIndexFromUrl, offline, downloadedItem?.userData?.audioStreamIndex]);
 
-  // Initialize TV audio/subtitle indices from URL params
+  // Initialize TV audio/subtitle indices from URL params.
+  // No undefined guard: when a new episode's URL omits audioIndex, reset to
+  // undefined (media default) rather than leaking the previous episode's track.
   useEffect(() => {
-    if (audioIndex !== undefined) {
-      setCurrentAudioIndex(audioIndex);
-    }
+    setCurrentAudioIndex(audioIndex);
   }, [audioIndex]);
 
   useEffect(() => {
@@ -274,6 +274,11 @@ export default function page() {
     };
 
     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,8 +321,14 @@ export default function page() {
           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 && downloadedItem.mediaSource) {
+        if (offline && downloadedItem?.mediaSource) {
           const url = downloadedItem.videoFilePath;
           if (item) {
             result = {
@@ -388,6 +399,7 @@ export default function page() {
     item,
     user?.Id,
     downloadedItem,
+    offline,
   ]);
 
   useEffect(() => {
@@ -470,8 +482,11 @@ export default function page() {
 
     return {
       ItemId: item.Id,
-      AudioStreamIndex: audioIndex ? audioIndex : undefined,
-      SubtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
+      // Report the live selection so server-side session/resume state reflects
+      // mid-playback track changes. Note: index 0 is valid (don't treat as
+      // falsy); -1 means "off" and is reported as-is.
+      AudioStreamIndex: currentAudioIndex,
+      SubtitleStreamIndex: currentSubtitleIndex,
       MediaSourceId: mediaSourceId,
       PositionTicks: msToTicks(progress.get()),
       IsPaused: !isPlaying,
@@ -485,8 +500,8 @@ export default function page() {
   }, [
     stream,
     item?.Id,
-    audioIndex,
-    subtitleIndex,
+    currentAudioIndex,
+    currentSubtitleIndex,
     mediaSourceId,
     progress,
     isPlaying,
@@ -553,8 +568,8 @@ export default function page() {
     },
     [
       item?.Id,
-      audioIndex,
-      subtitleIndex,
+      currentAudioIndex,
+      currentSubtitleIndex,
       mediaSourceId,
       isPlaying,
       stream,
@@ -822,12 +837,10 @@ export default function page() {
     ],
   );
 
-  /** PiP handler for MPV */
   const _onPictureInPictureChange = useCallback(
     (e: { nativeEvent: { isActive: boolean } }) => {
       const { isActive } = e.nativeEvent;
       setIsPipMode(isActive);
-      // Hide controls when entering PiP
       if (isActive) {
         _setShowControls(false);
       }
@@ -845,6 +858,9 @@ export default function page() {
 
   // Memoize video ref functions to prevent unnecessary re-renders
   const startPictureInPicture = useCallback(async () => {
+    // Hide controls BEFORE entering PiP so the window captures a clean view
+    _setShowControls(false);
+    setIsPipMode(true);
     return videoRef.current?.startPictureInPicture?.();
   }, []);
 
@@ -1009,8 +1025,9 @@ export default function page() {
       subtitleIndex: defaultSubtitleIndex,
     } = getDefaultPlaySettings(previousItem, settings, {
       indexes: {
-        subtitleIndex: subtitleIndex,
-        audioIndex: audioIndex,
+        // Use the live selection, not the stale URL params (see goToNextItem).
+        subtitleIndex: currentSubtitleIndex,
+        audioIndex: currentAudioIndex,
       },
       source: stream?.mediaSource ?? undefined,
     });
@@ -1029,8 +1046,8 @@ export default function page() {
   }, [
     previousItem,
     settings,
-    subtitleIndex,
-    audioIndex,
+    currentSubtitleIndex,
+    currentAudioIndex,
     stream?.mediaSource,
     bitrateValue,
     router,
@@ -1075,8 +1092,10 @@ export default function page() {
       subtitleIndex: defaultSubtitleIndex,
     } = getDefaultPlaySettings(nextItem, settings, {
       indexes: {
-        subtitleIndex: subtitleIndex,
-        audioIndex: audioIndex,
+        // Use the live selection (updated when the user changes tracks
+        // mid-playback), not the stale URL params the episode started with.
+        subtitleIndex: currentSubtitleIndex,
+        audioIndex: currentAudioIndex,
       },
       source: stream?.mediaSource ?? undefined,
     });
@@ -1095,8 +1114,8 @@ export default function page() {
   }, [
     nextItem,
     settings,
-    subtitleIndex,
-    audioIndex,
+    currentSubtitleIndex,
+    currentAudioIndex,
     stream?.mediaSource,
     bitrateValue,
     router,
@@ -1247,6 +1266,7 @@ export default function page() {
                 nowPlayingMetadata={nowPlayingMetadata}
                 onProgress={onProgress}
                 onPlaybackStateChange={onPlaybackStateChanged}
+                onPictureInPictureChange={_onPictureInPictureChange}
                 onLoad={() => setIsVideoLoaded(true)}
                 onError={(e: { nativeEvent: MpvOnErrorEventPayload }) => {
                   console.error("Video Error:", e.nativeEvent);

app/(auth)/tv-subtitle-modal.tsx

@@ -1248,7 +1248,7 @@ const styles = StyleSheet.create({
     color: "#fff",
   },
   downloadingOverlay: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     backgroundColor: "rgba(0,0,0,0.5)",
     borderRadius: scaleSize(14),
     justifyContent: "center",

app/_layout.tsx

@@ -2,12 +2,12 @@ import "@/augmentations";
 import { ActionSheetProvider } from "@expo/react-native-action-sheet";
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
 import NetInfo from "@react-native-community/netinfo";
-import { DarkTheme, ThemeProvider } from "@react-navigation/native";
 import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
 import { onlineManager, QueryClient } from "@tanstack/react-query";
 import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
 import * as BackgroundTask from "expo-background-task";
 import * as Device from "expo-device";
+import { DarkTheme, ThemeProvider } from "expo-router/react-navigation";
 import { Platform } from "react-native";
 import { GlobalModal } from "@/components/GlobalModal";
 import { enableTVMenuKeyInterception } from "@/hooks/useTVBackHandler";
@@ -395,8 +395,9 @@ function Layout() {
         maxAge: 1000 * 60 * 60 * 24, // 24 hours max cache age
         dehydrateOptions: {
           shouldDehydrateQuery: (query) => {
-            // Only persist successful queries
-            return query.state.status === "success";
+            return (
+              query.state.status === "success" && query.options.gcTime !== 0
+            );
           },
         },
       }}

biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.3.11/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.4.16/schema.json",
   "files": {
     "includes": [
       "**/*",

bun-patches/@react-native%2Fcodegen@0.83.6.patch

@@ -1,29 +0,0 @@
-diff --git a/lib/generators/modules/GenerateModuleObjCpp/index.js b/lib/generators/modules/GenerateModuleObjCpp/index.js
-index 927711514d2deaa3c795fb98e676e0a1f596eddc..0364d66204a76fccd3e06a0dc72bf801aa04a50d 100644
---- a/lib/generators/modules/GenerateModuleObjCpp/index.js
-+++ b/lib/generators/modules/GenerateModuleObjCpp/index.js
-@@ -67,9 +67,12 @@ const HeaderFileTemplate = ({
-  * must have a single output. More files => more genrule()s => slower builds.
-  */
- 
--#ifndef __cplusplus
--#error This file must be compiled as Obj-C++. If you are importing it, you must change your file extension to .mm.
--#endif
-+// Patched: guard the Obj-C++ body with __cplusplus instead of hard-#error-ing.
-+// With use_frameworks! :static + New Arch, plain Obj-C .m TUs can trigger a
-+// Clang module build (via Swift-interop -Swift.h umbrellas) that pulls this
-+// header in Obj-C mode. Skipping the body (instead of erroring) lets the module
-+// build; .mm consumers still get the full Obj-C++ contents unchanged.
-+#if defined(__cplusplus)
- 
- // Avoid multiple includes of ${headerFileNameWithNoExt} symbols
- #ifndef ${headerFileNameWithNoExt}_H
-@@ -93,7 +96,7 @@ const HeaderFileTemplate = ({
-     structInlineMethods +
-     (assumeNonnull ? '\nNS_ASSUME_NONNULL_END\n' : '\n') +
-     `#endif // ${headerFileNameWithNoExt}_H` +
--    '\n'
-+    '\n#endif // defined(__cplusplus)\n'
-   );
- };
- const SourceFileTemplate = ({headerFileName, moduleImplementations}) => `/**

bun-patches/react-native-screens@4.18.0.patch

@@ -1,191 +0,0 @@
-diff --git a/node_modules/react-native-screens/.bun-tag-10a3b0add1bd4de6 b/.bun-tag-10a3b0add1bd4de6
-new file mode 100644
-index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
-diff --git a/node_modules/react-native-screens/.bun-tag-6a8504b742d5cfff b/.bun-tag-6a8504b742d5cfff
-new file mode 100644
-index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
-diff --git a/node_modules/react-native-screens/.bun-tag-d28396854bc27a3d b/.bun-tag-d28396854bc27a3d
-new file mode 100644
-index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
-diff --git a/ios/RNSScreenStack.mm b/ios/RNSScreenStack.mm
-index 51f021831aed26a4eed3c85014020423b7b3108b..2f621547932806b94ab1e75ecc73772facd209d0 100644
---- a/ios/RNSScreenStack.mm
-+++ b/ios/RNSScreenStack.mm
-@@ -34,6 +34,11 @@
- #import "integrations/RNSDismissibleModalProtocol.h"
- #import "utils/UINavigationBar+RNSUtility.h"
- 
-+#if TARGET_OS_TV
-+#import <React/RCTTVNavigationEventNotification.h>
-+#import <React/RCTTVRemoteHandler.h>
-+#endif // TARGET_OS_TV
-+
- #ifdef RNS_GAMMA_ENABLED
- #import "RNSFrameCorrectionProvider.h"
- #import "Swift-Bridging.h"
-@@ -43,6 +48,12 @@
- namespace react = facebook::react;
- #endif // RCT_NEW_ARCH_ENABLED
- 
-+#if TARGET_OS_TV
-+@interface RNSNavigationController ()
-+@property (nonatomic, strong) UITapGestureRecognizer *rnscreens_menuGestureRecognizer;
-+@end
-+#endif // TARGET_OS_TV
-+
- @interface RNSScreenStackView () <
-     UINavigationControllerDelegate,
-     UIAdaptivePresentationControllerDelegate,
-@@ -62,6 +73,57 @@ namespace react = facebook::react;
- 
- @implementation RNSNavigationController
- 
-+#if TARGET_OS_TV
-+- (void)viewDidLoad
-+{
-+  [super viewDidLoad];
-+
-+  self.rnscreens_menuGestureRecognizer =
-+      [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(rnscreens_menuPressed:)];
-+  self.rnscreens_menuGestureRecognizer.allowedPressTypes = @[ @(UIPressTypeMenu) ];
-+
-+  [[NSNotificationCenter defaultCenter] addObserver:self
-+                                           selector:@selector(rnscreens_enableMenuGesture)
-+                                               name:RCTTVEnableMenuKeyNotification
-+                                             object:nil];
-+  [[NSNotificationCenter defaultCenter] addObserver:self
-+                                           selector:@selector(rnscreens_disableMenuGesture)
-+                                               name:RCTTVDisableMenuKeyNotification
-+                                             object:nil];
-+
-+  if ([RCTTVRemoteHandler useMenuKey]) {
-+    [self rnscreens_enableMenuGesture];
-+  }
-+}
-+
-+- (void)dealloc
-+{
-+  [[NSNotificationCenter defaultCenter] removeObserver:self];
-+}
-+
-+- (void)rnscreens_enableMenuGesture
-+{
-+  if (![self.view.gestureRecognizers containsObject:self.rnscreens_menuGestureRecognizer]) {
-+    [self.view addGestureRecognizer:self.rnscreens_menuGestureRecognizer];
-+  }
-+}
-+
-+- (void)rnscreens_disableMenuGesture
-+{
-+  if ([self.view.gestureRecognizers containsObject:self.rnscreens_menuGestureRecognizer]) {
-+    [self.view removeGestureRecognizer:self.rnscreens_menuGestureRecognizer];
-+  }
-+}
-+
-+- (void)rnscreens_menuPressed:(UIGestureRecognizer *)recognizer
-+{
-+  [[NSNotificationCenter defaultCenter] postNavigationPressEventWithType:RCTTVRemoteEventMenu
-+                                                               keyAction:recognizer.eventKeyAction
-+                                                                     tag:nil
-+                                                                  target:nil];
-+}
-+#endif // TARGET_OS_TV
-+
- #if !TARGET_OS_TV
- - (UIViewController *)childViewControllerForStatusBarStyle
- {
-diff --git a/ios/gamma/split-view/RNSSplitViewAppearanceApplicator.swift b/ios/gamma/split-view/RNSSplitViewAppearanceApplicator.swift
-index 95c76ccf3528d3a8828e90b272a1d79b0828a139..f29d4df21440d23523ae7a2f6fe71c32154e3928 100644
---- a/ios/gamma/split-view/RNSSplitViewAppearanceApplicator.swift
-+++ b/ios/gamma/split-view/RNSSplitViewAppearanceApplicator.swift
-@@ -79,11 +79,13 @@ class RNSSplitViewAppearanceApplicator {
-       maxWidth: splitView.maximumSupplementaryColumnWidth)
- 
-     #if compiler(>=6.2)
-+      #if !os(tvOS)
-       if #available(iOS 26.0, *) {
-         validateColumnConstraints(
-           minWidth: splitView.minimumInspectorColumnWidth,
-           maxWidth: splitView.maximumInspectorColumnWidth)
-       }
-+      #endif
-     #endif
- 
-     // Step 2.2 - applying updates to columns
-@@ -126,6 +128,7 @@ class RNSSplitViewAppearanceApplicator {
-     }
- 
-     #if compiler(>=6.2)
-+      #if !os(tvOS)
-       if #available(iOS 26.0, *) {
-         if splitView.minimumSecondaryColumnWidth >= 0 {
-           splitViewController.minimumSecondaryColumnWidth = splitView.minimumSecondaryColumnWidth
-@@ -159,6 +162,7 @@ class RNSSplitViewAppearanceApplicator {
-             splitView.preferredInspectorColumnWidthOrFraction
-         }
-       }
-+      #endif
-     #endif
- 
-     // Step 2.3 - manipulating with inspector column
-diff --git a/ios/gamma/split-view/RNSSplitViewHostController.swift b/ios/gamma/split-view/RNSSplitViewHostController.swift
-index 0421e3ea92fc7bcdf57417b5ee3a62348fce34f5..cd878ab638d3c78a661e2df4c4c1b21011dfcf48 100644
---- a/ios/gamma/split-view/RNSSplitViewHostController.swift
-+++ b/ios/gamma/split-view/RNSSplitViewHostController.swift
-@@ -386,7 +386,7 @@ extension RNSSplitViewHostController: RNSSplitViewNavigationControllerViewFrameO
-     /// @param inspectors An array of inspector-type RNSSplitViewScreenComponentView subviews.
-     ///
-     func maybeSetupInspector(_ inspectors: [RNSSplitViewScreenComponentView]) {
--
-+      #if !os(tvOS)
-       if #available(iOS 26.0, *) {
-         let inspector = inspectors.first
-         if inspector != nil {
-@@ -395,6 +395,7 @@ extension RNSSplitViewHostController: RNSSplitViewNavigationControllerViewFrameO
-           setViewController(inspectorViewController, for: .inspector)
-         }
-       }
-+      #endif
-     }
- 
-     ///
-@@ -404,9 +405,11 @@ extension RNSSplitViewHostController: RNSSplitViewNavigationControllerViewFrameO
-     /// Uses the UISplitViewController's new API introduced in iOS 26 to show the inspector column.
-     ///
-     func maybeShowInspector() {
-+      #if !os(tvOS)
-       if #available(iOS 26.0, *) {
-         show(.inspector)
-       }
-+      #endif
-     }
- 
-     ///
-@@ -416,9 +419,11 @@ extension RNSSplitViewHostController: RNSSplitViewNavigationControllerViewFrameO
-     /// Uses the UISplitViewController's new API introduced in iOS 26 to hide the inspector column.
-     ///
-     func maybeHideInspector() {
-+      #if !os(tvOS)
-       if #available(iOS 26.0, *) {
-         hide(.inspector)
-       }
-+      #endif
-     }
-   }
- #endif
-@@ -444,6 +449,7 @@ extension RNSSplitViewHostController: UISplitViewControllerDelegate {
-     public func splitViewController(
-       _ svc: UISplitViewController, didHide column: UISplitViewController.Column
-     ) {
-+      #if !os(tvOS)
-       if #available(iOS 26.0, *) {
-         // TODO: we may consider removing this logic, because it could be handled by onViewDidDisappear on the column level
-         // On the other hand, maybe dedicated event related to the inspector would be a better approach.
-@@ -461,6 +467,7 @@ extension RNSSplitViewHostController: UISplitViewControllerDelegate {
-           }
-         }
-       }
-+      #endif
-     }
-   #endif
- 

components/DownloadItem.tsx

@@ -9,6 +9,7 @@ import type {
   BaseItemDto,
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client/models";
+import { getUserLibraryApi } from "@jellyfin/sdk/lib/utils/api";
 import { type Href } from "expo-router";
 import { t } from "i18next";
 import { useAtom } from "jotai";
@@ -199,9 +200,30 @@ export const DownloadItems: React.FC<DownloadProps> = ({
         );
       }
       const downloadDetailsPromises = items.map(async (item) => {
+        // Ensure the snapshot we store offline carries the Chapters array.
+        // Page-level fetches sometimes use a fields filter that omits it; the
+        // offline player would then render no chapter ticks / list.
+        let itemForDownload = item;
+        if (!itemForDownload.Chapters && itemForDownload.Id) {
+          try {
+            const enriched = await getUserLibraryApi(api).getItem({
+              itemId: itemForDownload.Id,
+              userId: user.Id!,
+            });
+            if (enriched.data) {
+              itemForDownload = enriched.data;
+            }
+          } catch (e) {
+            console.warn(
+              "[DownloadItem] failed to refresh item for Chapters, falling back to original",
+              e,
+            );
+          }
+        }
+
         const { mediaSource, audioIndex, subtitleIndex } =
           itemsNotDownloaded.length > 1
-            ? getDefaultPlaySettings(item, settings!)
+            ? getDefaultPlaySettings(itemForDownload, settings!)
             : {
                 mediaSource: selectedOptions?.mediaSource,
                 audioIndex: selectedOptions?.audioIndex,
@@ -210,7 +232,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
 
         const downloadDetails = await getDownloadUrl({
           api,
-          item,
+          item: itemForDownload,
           userId: user.Id!,
           mediaSource: mediaSource!,
           audioStreamIndex: audioIndex ?? -1,
@@ -222,7 +244,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
 
         return {
           url: downloadDetails?.url,
-          item,
+          item: itemForDownload,
           mediaSource: downloadDetails?.mediaSource,
         };
       });

components/PlatformDropdown.tsx

@@ -1,25 +1,22 @@
-import {
-  Button,
-  Host,
-  Menu,
-  Picker,
-  Text as SwiftUIText,
-} from "@expo/ui/swift-ui";
-import { disabled, tag } from "@expo/ui/swift-ui/modifiers";
 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";
 
+// @expo/ui's SwiftUI native module (ExpoUI) does not exist in tvOS builds.
+// A static top-level import evaluates requireNativeModule('ExpoUI') at module
+// load and crashes the entire route tree on tvOS (expo-router requires every
+// route file). Load it lazily and only off-TV; TV never renders these.
+const { Button, Host, Menu } = Platform.isTV
+  ? ({} as typeof import("@expo/ui/swift-ui"))
+  : require("@expo/ui/swift-ui");
+const { disabled } = Platform.isTV
+  ? ({} as typeof import("@expo/ui/swift-ui/modifiers"))
+  : require("@expo/ui/swift-ui/modifiers");
+
 // Option types
 export type RadioOption<T = any> = {
   type: "radio";
@@ -214,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) {
@@ -261,25 +240,15 @@ const PlatformDropdownComponent = ({
     }
   }, [isVisible, controlledOpen, controlledOnOpenChange]);
 
-  if (Platform.OS === "ios") {
+  if (Platform.OS === "ios" && !Platform.isTV) {
+    // @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>
-        {/* Hidden measurer: lays the trigger out normally to capture its
-            intrinsic size, which we then pin onto the Host below. */}
-        <View style={StyleSheet.absoluteFill} pointerEvents='none' aria-hidden>
-          <View
-            style={{ alignSelf: "flex-start" }}
-            onLayout={handleMeasureTrigger}
-          >
-            {trigger}
-          </View>
+        <View pointerEvents='none' aria-hidden style={{ opacity: 0 }}>
+          {trigger}
         </View>
-        <Host
-          style={[
-            triggerSize ?? { opacity: 0 },
-            expoUIConfig?.hostStyle as any,
-          ]}
-        >
+        <Host style={[StyleSheet.absoluteFill, expoUIConfig?.hostStyle as any]}>
           <Menu label={trigger}>
             {groups.flatMap((group, groupIndex) => {
               // Check if this group has radio options
@@ -295,41 +264,40 @@ const PlatformDropdownComponent = ({
 
               const items = [];
 
-              // Add Picker for radio options ONLY if there's a group title
+              // Group radio options under a submenu ONLY if there's a title
               // Otherwise render as individual buttons
               if (radioOptions.length > 0) {
                 if (group.title) {
-                  // Use Picker for grouped options.
-                  // Use the option index (a stable primitive) as the
-                  // tag/selection value and React key. Option `value`s can be
-                  // objects (e.g. bitrate / media source), which collapse to
-                  // "[object Object]" as a key and never match the Picker's
-                  // primitive selection.
-                  const selectedRadioIndex = radioOptions.findIndex(
+                  // Use a nested Menu as a submenu for grouped options. This
+                  // reads as "Title: Selected" and expands to the choices on
+                  // tap, keeping the nested look while staying a dropdown.
+                  // (Menu opens on a single tap and nests cleanly; ContextMenu
+                  // would require a long-press and read as a context menu.)
+                  const selectedOption = radioOptions.find(
                     (opt) => opt.selected,
                   );
+                  const displayTitle = selectedOption
+                    ? `${group.title}: ${selectedOption.label}`
+                    : group.title;
                   items.push(
-                    <Picker
-                      key={`picker-${groupIndex}`}
-                      label={group.title}
-                      selection={
-                        selectedRadioIndex >= 0 ? selectedRadioIndex : undefined
-                      }
-                      onSelectionChange={(index) => {
-                        const selectedOption = radioOptions[index as number];
-                        selectedOption?.onPress();
-                        onOptionSelect?.(selectedOption?.value);
-                      }}
-                    >
-                      {radioOptions.map((opt, optionIndex) => (
-                        <SwiftUIText
+                    <Menu key={`submenu-${groupIndex}`} label={displayTitle}>
+                      {radioOptions.map((option, optionIndex) => (
+                        <Button
                           key={`radio-${groupIndex}-${optionIndex}`}
-                          modifiers={[tag(optionIndex)]}
-                        >
-                          {opt.label}
-                        </SwiftUIText>
+                          label={option.label}
+                          systemImage={
+                            option.selected ? "checkmark.circle.fill" : "circle"
+                          }
+                          modifiers={
+                            option.disabled ? [disabled(true)] : undefined
+                          }
+                          onPress={() => {
+                            option.onPress();
+                            onOptionSelect?.(option.value);
+                          }}
+                        />
                       ))}
-                    </Picker>,
+                    </Menu>,
                   );
                 } else {
                   // Render radio options as direct buttons

components/PlayButton.tsx

@@ -414,7 +414,7 @@ export const PlayButton: React.FC<Props> = ({
   ]);
 
   const derivedTargetWidth = useDerivedValue(() => {
-    if (!item || !item.RunTimeTicks) return 0;
+    if (!item?.RunTimeTicks) return 0;
     const userData = item.UserData;
     if (userData?.PlaybackPositionTicks) {
       return userData.PlaybackPositionTicks > 0

components/PlayButton.tv.tsx

@@ -78,7 +78,7 @@ export const PlayButton: React.FC<Props> = ({
   };
 
   const derivedTargetWidth = useDerivedValue(() => {
-    if (!item || !item.RunTimeTicks) return 0;
+    if (!item?.RunTimeTicks) return 0;
     const userData = item.UserData;
     if (userData?.PlaybackPositionTicks) {
       return userData.PlaybackPositionTicks > 0

components/chapters/ChapterList.tsx

@@ -0,0 +1,209 @@
+/**
+ * A modal listing an item's chapters. Each row shows the chapter name and its
+ * timestamp; the current chapter is highlighted. Tapping a row seeks to that
+ * chapter and closes the modal. Player-agnostic — the seek is injected.
+ */
+
+import { Ionicons } from "@expo/vector-icons";
+import type { ChapterInfo } from "@jellyfin/sdk/lib/generated-client/models";
+import { memo, useEffect, useMemo, useRef } from "react";
+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,
+  formatChapterTime,
+  sortedChapters,
+} from "@/utils/chapters";
+
+interface ChapterListProps {
+  visible: boolean;
+  chapters: ChapterInfo[] | null | undefined;
+  /** Current playback position in milliseconds (to highlight the row). */
+  currentPositionMs: number;
+  /** Seek the player to this millisecond position. */
+  onSeek: (positionMs: number) => void;
+  onClose: () => void;
+}
+
+const ROW_HEIGHT = 48;
+
+function ChapterListComponent({
+  visible,
+  chapters,
+  currentPositionMs,
+  onSeek,
+  onClose,
+}: ChapterListProps) {
+  const { t } = useTranslation();
+  const safeArea = useControlsSafeAreaInsets();
+  const listRef = useRef<FlatList<ChapterEntry>>(null);
+
+  const entries = useMemo(() => sortedChapters(chapters), [chapters]);
+  // Memoize starts so currentChapterIndex computation doesn't re-sort/filter
+  // every tick — chapters is the only input that drives the underlying array.
+  const starts = useMemo(() => chapterStartsMs(chapters), [chapters]);
+  const activeIndex = useMemo(() => {
+    let idx = -1;
+    for (let i = 0; i < starts.length; i++) {
+      if (currentPositionMs >= starts[i]) idx = i;
+      else break;
+    }
+    return idx;
+  }, [currentPositionMs, starts]);
+
+  // FlatList.initialScrollIndex only fires at first mount; <Modal> keeps its
+  // children mounted across visible toggles, so subsequent opens never scroll.
+  // Trigger an imperative scroll each time the sheet becomes visible.
+  useEffect(() => {
+    if (!visible || activeIndex < 0 || entries.length === 0) return;
+    const raf = requestAnimationFrame(() => {
+      listRef.current?.scrollToIndex({
+        index: activeIndex,
+        animated: false,
+        viewPosition: 0.5,
+      });
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [visible, activeIndex, entries.length]);
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType='slide'
+      onRequestClose={onClose}
+      // iOS defaults <Modal> to portrait-only; without this it rotates the app
+      // back to portrait when opened from the landscape player. Android ignores it.
+      supportedOrientations={["portrait", "landscape"]}
+    >
+      <Pressable onPress={onClose} style={styles.backdrop}>
+        <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
+              onPress={onClose}
+              hitSlop={10}
+              accessibilityRole='button'
+              accessibilityLabel={t("chapters.close")}
+            >
+              <Ionicons name='close' size={24} color={Colors.text} />
+            </Pressable>
+          </View>
+          <FlatList
+            ref={listRef}
+            data={entries}
+            keyExtractor={(item, index) => `${item.positionMs}-${index}`}
+            getItemLayout={(_, index) => ({
+              length: ROW_HEIGHT,
+              offset: ROW_HEIGHT * index,
+              index,
+            })}
+            onScrollToIndexFailed={(info) => {
+              // Required when getItemLayout is provided and the target index
+              // is outside the currently rendered window. Fallback to an
+              // offset-based scroll, then retry the precise scroll once a
+              // frame has elapsed.
+              listRef.current?.scrollToOffset({
+                offset: info.averageItemLength * info.index,
+                animated: false,
+              });
+              setTimeout(() => {
+                listRef.current?.scrollToIndex({
+                  index: info.index,
+                  animated: false,
+                  viewPosition: 0.5,
+                });
+              }, 50);
+            }}
+            renderItem={({ item, index }) => {
+              const positionMs = item.positionMs;
+              const isActive = index === activeIndex;
+              return (
+                <Pressable
+                  onPress={() => {
+                    onSeek(positionMs);
+                    onClose();
+                  }}
+                  style={[
+                    styles.row,
+                    isActive && { backgroundColor: `${Colors.primary}33` },
+                  ]}
+                >
+                  <Text
+                    style={[
+                      styles.rowText,
+                      { color: isActive ? Colors.primary : Colors.text },
+                    ]}
+                    numberOfLines={1}
+                  >
+                    {item.chapter.Name ||
+                      t("chapters.chapter_number", { number: index + 1 })}
+                  </Text>
+                  <Text style={styles.rowTime}>
+                    {formatChapterTime(positionMs)}
+                  </Text>
+                </Pressable>
+              );
+            }}
+          />
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+}
+
+export const ChapterList = memo(ChapterListComponent);
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    justifyContent: "flex-end",
+  },
+  sheet: {
+    backgroundColor: Colors.background,
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    maxHeight: "70%",
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: 16,
+  },
+  title: {
+    color: Colors.text,
+    fontSize: 17,
+    fontWeight: "700",
+  },
+  row: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    height: ROW_HEIGHT,
+  },
+  rowText: {
+    fontSize: 15,
+    flex: 1,
+  },
+  rowTime: {
+    color: Colors.icon,
+    fontSize: 13,
+    marginLeft: 12,
+  },
+});

components/chapters/ChapterTicks.tsx

@@ -0,0 +1,87 @@
+/**
+ * Chapter tick marks drawn as an absolute overlay over a progress slider.
+ * Renders nothing for media with one or zero chapters. `pointerEvents: "none"`
+ * so the slider underneath still receives touches.
+ */
+
+import { memo, useState } from "react";
+import { type LayoutChangeEvent, PixelRatio, View } from "react-native";
+import type { ChapterMarker } from "@/utils/chapters";
+
+interface ChapterTicksProps {
+  /** Pre-computed markers (caller memoizes — avoids double-computing here). */
+  markers: ChapterMarker[];
+  /** Tick colour. */
+  color?: string;
+  /** Tick height in px — slightly less than the slider track thickness. */
+  height?: number;
+  /** Tick width in px — integer to avoid sub-pixel anti-aliasing. */
+  width?: number;
+}
+
+function ChapterTicksComponent({
+  markers,
+  // Semi-transparent black contrasts against both the filled progress
+  // (#fff) and the unfilled track (rgba(255,255,255,0.2)) so the ticks
+  // stay visible across the whole bar as playback advances.
+  color = "rgba(0,0,0,0.55)",
+  height = 14,
+  width = 2,
+}: ChapterTicksProps) {
+  // Hooks must run unconditionally — keep them before any early return.
+  const [sliderWidth, setSliderWidth] = useState(0);
+
+  const handleLayout = (e: LayoutChangeEvent) => {
+    setSliderWidth(e.nativeEvent.layout.width);
+  };
+
+  // One chapter (typically a single marker at 0) is not worth marking.
+  if (markers.length <= 1) return null;
+
+  return (
+    <View
+      pointerEvents='none'
+      onLayout={handleLayout}
+      style={{
+        position: "absolute",
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        // Let ticks taller than this container bleed beyond its bounds.
+        overflow: "visible",
+      }}
+    >
+      {sliderWidth > 0 &&
+        markers
+          // Skip the leading 0ms marker — it overlaps the slider start and
+          // adds visual noise at an already-rendered boundary.
+          .filter((marker) => marker.positionMs > 0)
+          .map((marker, index) => {
+            // Align both the position AND the width onto the device's
+            // physical pixel grid. Without this, fractional dp values land
+            // at different sub-pixel fractions per tick — Android samples
+            // each one differently and some ticks render visibly thicker.
+            const centerDp = (marker.percent / 100) * sliderWidth;
+            const left = PixelRatio.roundToNearestPixel(centerDp - width / 2);
+            const snappedWidth = PixelRatio.roundToNearestPixel(width);
+            return (
+              <View
+                key={`${marker.positionMs}-${index}`}
+                style={{
+                  position: "absolute",
+                  left,
+                  top: "50%",
+                  marginTop: -height / 2,
+                  height,
+                  width: snappedWidth,
+                  backgroundColor: color,
+                }}
+              />
+            );
+          })}
+    </View>
+  );
+}
+
+export const ChapterTicks = memo(ChapterTicksComponent);

components/common/Input.tsx

@@ -10,6 +10,7 @@ import {
   type TextInputProps,
   View,
 } from "react-native";
+import { useScaledTVTypography } from "@/constants/TVTypography";
 
 interface InputProps extends TextInputProps {
   extraClassName?: string;
@@ -20,6 +21,9 @@ export function Input(props: InputProps) {
   const inputRef = useRef<TextInput>(null);
   const [isFocused, setIsFocused] = useState(false);
   const scale = useRef(new Animated.Value(1)).current;
+  // TV-only: scales the input font with the tvTypographyScale setting.
+  // Not consumed by the mobile branch below.
+  const tvTypography = useScaledTVTypography();
 
   const animateFocus = (focused: boolean) => {
     Animated.timing(scale, {
@@ -41,8 +45,18 @@ export function Input(props: InputProps) {
   };
 
   if (Platform.isTV) {
+    // Scale the whole input (box height, padding, icon) proportionally with the
+    // font so the component grows/shrinks with the tvTypographyScale setting.
+    // Uses the `body` token (primary reading size); it resolves to 28 at Default.
+    const fontSize = tvTypography.body;
+    const factor = fontSize / 28;
+    const height = Math.round(56 * factor);
+    const paddingLeft = Math.round(24 * factor);
+    const iconSize = Math.round(26 * factor);
+    const iconMarginRight = Math.round(14 * factor);
+
     const containerStyle = {
-      height: 48,
+      height,
       borderRadius: 50,
       borderWidth: isFocused ? 1.5 : 1,
       borderColor: isFocused
@@ -51,16 +65,16 @@ export function Input(props: InputProps) {
       overflow: "hidden" as const,
       flexDirection: "row" as const,
       alignItems: "center" as const,
-      paddingLeft: 16,
+      paddingLeft,
     };
 
     const inputElement = (
       <>
         <Ionicons
           name='search'
-          size={20}
+          size={iconSize}
           color={isFocused ? "#999" : "#666"}
-          style={{ marginRight: 12 }}
+          style={{ marginRight: iconMarginRight }}
         />
         <TextInput
           ref={inputRef}
@@ -69,8 +83,8 @@ export function Input(props: InputProps) {
           style={[
             {
               flex: 1,
-              height: 48,
-              fontSize: 18,
+              height,
+              fontSize,
               fontWeight: "400",
               color: "#FFFFFF",
               backgroundColor: "transparent",

components/common/ProgressBar.tsx

@@ -37,11 +37,12 @@ export const ProgressBar: React.FC<ProgressBarProps> = ({ item }) => {
         }
       />
       <View
-        style={{
-          width: `${progress}%`,
-          backgroundColor: Platform.isTV ? "#ffffff" : undefined,
-        }}
-        className={`absolute bottom-0 left-0 h-1 w-full ${Platform.isTV ? "" : "bg-purple-600"}`}
+        style={
+          Platform.isTV
+            ? { width: `${progress}%`, backgroundColor: "#ffffff" }
+            : { width: `${progress}%` }
+        }
+        className={`absolute bottom-0 left-0 h-1 ${Platform.isTV ? "" : "bg-purple-600"}`}
       />
     </>
   );

components/common/TouchableItemRouter.tsx

@@ -2,6 +2,7 @@ import { useActionSheet } from "@expo/react-native-action-sheet";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { useSegments } from "expo-router";
 import { type PropsWithChildren, useCallback } from "react";
+import { useTranslation } from "react-i18next";
 import {
   Platform,
   TouchableOpacity,
@@ -149,6 +150,7 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
   children,
   ...props
 }) => {
+  const { t } = useTranslation();
   const segments = useSegments();
   const { showActionSheetWithOptions } = useActionSheet();
   const markAsPlayedStatus = useMarkAsPlayed([item]);
@@ -182,11 +184,13 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
       return;
 
     const options: string[] = [
-      "Mark as Played",
-      "Mark as Not Played",
-      isFavorite ? "Unmark as Favorite" : "Mark as Favorite",
-      ...(isOffline ? ["Delete Download"] : []),
-      "Cancel",
+      t("common.mark_as_played"),
+      t("common.mark_as_not_played"),
+      isFavorite
+        ? t("music.track_options.remove_from_favorites")
+        : t("music.track_options.add_to_favorites"),
+      ...(isOffline ? [t("home.downloads.delete_download")] : []),
+      t("common.cancel"),
     ];
     const cancelButtonIndex = options.length - 1;
     const destructiveButtonIndex = isOffline
@@ -219,6 +223,7 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
     isOffline,
     deleteFile,
     item.Id,
+    t,
   ]);
 
   if (

components/downloads/DownloadCard.tsx

@@ -116,7 +116,7 @@ export const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
   }, [process?.progress]);
 
   // Return null after all hooks have been called
-  if (!process || !process.item || !process.item.Id) {
+  if (!process?.item?.Id) {
     return null;
   }
 

components/home/Home.tsx

@@ -35,6 +35,7 @@ import { MediaListSection } from "@/components/medialists/MediaListSection";
 import { Colors } from "@/constants/Colors";
 import useRouter from "@/hooks/useAppRouter";
 import { useNetworkStatus } from "@/hooks/useNetworkStatus";
+import { useRefreshLibraryOnFocus } from "@/hooks/useRefreshLibraryOnFocus";
 import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
 import { useDownload } from "@/providers/DownloadProvider";
 import { useIntroSheet } from "@/providers/IntroSheetProvider";
@@ -89,6 +90,10 @@ const HomeMobile = () => {
   const [loadedSections, setLoadedSections] = useState<Set<string>>(new Set());
   const { showIntro } = useIntroSheet();
 
+  // Fallback refresh for newly added content when returning to the home screen
+  // (primary path is the LibraryChanged WebSocket event).
+  useRefreshLibraryOnFocus();
+
   // Show intro modal on first launch
   useEffect(() => {
     const hasShownIntro = storage.getBoolean("hasShownIntro");
@@ -128,7 +133,6 @@ const HomeMobile = () => {
           onPress={() => {
             router.push("/(auth)/downloads");
           }}
-          className='ml-1.5'
           style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
         >
           <Feather

components/home/Home.tv.tsx

@@ -35,6 +35,7 @@ import { Loader } from "@/components/Loader";
 import { useScaledTVTypography } from "@/constants/TVTypography";
 import useRouter from "@/hooks/useAppRouter";
 import { useNetworkStatus } from "@/hooks/useNetworkStatus";
+import { useRefreshLibraryOnFocus } from "@/hooks/useRefreshLibraryOnFocus";
 import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
 import { useTVItemActionModal } from "@/hooks/useTVItemActionModal";
 import {
@@ -86,6 +87,10 @@ export const Home = () => {
   const _invalidateCache = useInvalidatePlaybackProgressCache();
   const { showItemActions } = useTVItemActionModal();
 
+  // Fallback refresh for newly added content when returning to the home screen
+  // (primary path is the LibraryChanged WebSocket event).
+  useRefreshLibraryOnFocus();
+
   // Dynamic backdrop state with debounce
   const [focusedItem, setFocusedItem] = useState<BaseItemDto | null>(null);
   const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);

components/home/TVHeroCarousel.tsx

@@ -351,7 +351,7 @@ export const TVHeroCarousel: React.FC<TVHeroCarouselProps> = ({
 
   // Get subtitle for episodes
   const episodeSubtitle = useMemo(() => {
-    if (!activeItem || activeItem.Type !== "Episode") return null;
+    if (activeItem?.Type !== "Episode") return null;
     return `S${activeItem.ParentIndexNumber} E${activeItem.IndexNumber} · ${activeItem.Name}`;
   }, [activeItem]);
 

components/item/ItemPeopleSections.tsx

@@ -37,7 +37,20 @@ export const ItemPeopleSections: React.FC<Props> = ({ item, ...props }) => {
     return { ...item, People: people } as BaseItemDto;
   }, [item, people]);
 
-  const topPeople = useMemo(() => people.slice(0, 3), [people]);
+  // Jellyfin can list the same person several times (e.g. an actor also
+  // credited as writer). Dedupe by Id so the same actor section isn't rendered
+  // twice and we still surface 3 distinct people.
+  const topPeople = useMemo(() => {
+    const seen = new Set<string>();
+    const unique: BaseItemPerson[] = [];
+    for (const person of people) {
+      if (!person.Id || seen.has(person.Id)) continue;
+      seen.add(person.Id);
+      unique.push(person);
+      if (unique.length >= 3) break;
+    }
+    return unique;
+  }, [people]);
 
   const renderActorSection = useCallback(
     (person: BaseItemPerson, idx: number, total: number) => {

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/livetv/TVChannelCard.tsx

@@ -180,4 +180,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export { CARD_WIDTH, CARD_HEIGHT };
+export { CARD_HEIGHT, CARD_WIDTH };

components/livetv/TVLiveTVGuide.tsx

@@ -155,7 +155,7 @@ export const TVLiveTVGuide: React.FC = () => {
   );
 
   // Fetch programs for visible channels
-  const { data: programsData, isLoading: isLoadingPrograms } = useQuery({
+  const { data: programsData } = useQuery({
     queryKey: [
       "livetv",
       "tv-guide",

components/login/Login.tsx

@@ -382,16 +382,18 @@ export const Login: React.FC = () => {
                 </View>
               </View>
             </View>
+
+            <View className='absolute bottom-0 left-0 w-full px-4 mb-2' />
           </View>
         ) : (
-          <View className='flex flex-col flex-1 w-full'>
-            <View className='flex flex-col gap-y-2 px-4 w-full'>
+          <View className='flex flex-col flex-1 items-center justify-center w-full'>
+            <View className='flex flex-col gap-y-2 px-4 w-full -mt-36'>
               <Image
                 style={{
                   width: 100,
                   height: 100,
+                  marginLeft: -23,
                   marginBottom: -20,
-                  alignSelf: "center",
                 }}
                 source={require("@/assets/images/icon-ios-plain.png")}
               />
@@ -429,8 +431,6 @@ export const Login: React.FC = () => {
                   await handleConnect(server.address);
                 }}
               />
-            </View>
-            <View className='px-4 pb-2'>
               <PreviousServersList
                 onServerSelect={async (s) => {
                   await handleConnect(s.address);

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/login/TVPasswordEntryModal.tsx

@@ -14,6 +14,7 @@ import {
 } from "react-native";
 import { Text } from "@/components/common/Text";
 import { useTVFocusAnimation } from "@/components/tv";
+import { useTVBackPress } from "@/hooks/useTVBackPress";
 import { scaleSize } from "@/utils/scaleSize";
 
 interface TVPasswordEntryModalProps {
@@ -201,6 +202,13 @@ export const TVPasswordEntryModal: React.FC<TVPasswordEntryModalProps> = ({
     setIsReady(false);
   }, [visible]);
 
+  // Close the modal on the TV remote back/menu button while it is open.
+  useTVBackPress(() => {
+    if (!visible) return false;
+    onClose();
+    return true;
+  }, [visible, onClose]);
+
   const handleSubmit = async () => {
     if (!password) {
       setError(t("password.enter_password"));

components/search/DiscoverFilters.tsx

@@ -1,15 +1,17 @@
-import {
-  Button,
-  ContextMenu,
-  Host,
-  Picker,
-  Text as SwiftUIText,
-} from "@expo/ui/swift-ui";
-import { buttonStyle, tag } from "@expo/ui/swift-ui/modifiers";
 import { Platform, View } from "react-native";
 import { FilterButton } from "@/components/filters/FilterButton";
 import { JellyseerrSearchSort } from "@/components/jellyseerr/JellyseerrIndexPage";
 
+// @expo/ui's SwiftUI native module (ExpoUI) does not exist in tvOS builds.
+// A static top-level import crashes the route tree on tvOS at module load.
+// Load it lazily and only off-TV; TV never renders this component.
+const { Button, Host, Menu } = Platform.isTV
+  ? ({} as typeof import("@expo/ui/swift-ui"))
+  : require("@expo/ui/swift-ui");
+const { buttonStyle } = Platform.isTV
+  ? ({} as typeof import("@expo/ui/swift-ui/modifiers"))
+  : require("@expo/ui/swift-ui/modifiers");
+
 interface DiscoverFiltersProps {
   searchFilterId: string;
   orderFilterId: string;
@@ -35,7 +37,7 @@ export const DiscoverFilters: React.FC<DiscoverFiltersProps> = ({
   setJellyseerrSortOrder,
   t,
 }) => {
-  if (Platform.OS === "ios") {
+  if (Platform.OS === "ios" && !Platform.isTV) {
     return (
       <Host
         style={{
@@ -47,42 +49,54 @@ export const DiscoverFilters: React.FC<DiscoverFiltersProps> = ({
           marginLeft: "auto",
         }}
       >
-        <ContextMenu>
-          <ContextMenu.Trigger>
+        <Menu
+          label={
             <Button
               modifiers={[buttonStyle("glass")]}
               systemImage='line.3.horizontal.decrease.circle'
-            ></Button>
-          </ContextMenu.Trigger>
-          <ContextMenu.Items>
-            <Picker
-              label={t("library.filters.sort_by")}
-              selection={jellyseerrOrderBy as unknown as string}
-              onSelectionChange={(value) => {
-                setJellyseerrOrderBy(value as unknown as JellyseerrSearchSort);
-              }}
-            >
-              {sortOptions.map((item) => (
-                <SwiftUIText key={item} modifiers={[tag(item)]}>
-                  {t(`home.settings.plugins.jellyseerr.order_by.${item}`)}
-                </SwiftUIText>
-              ))}
-            </Picker>
-            <Picker
-              label={t("library.filters.sort_order")}
-              selection={jellyseerrSortOrder}
-              onSelectionChange={(value) => {
-                setJellyseerrSortOrder(value as "asc" | "desc");
-              }}
-            >
-              {orderOptions.map((item) => (
-                <SwiftUIText key={item} modifiers={[tag(item)]}>
-                  {t(`library.filters.${item}`)}
-                </SwiftUIText>
-              ))}
-            </Picker>
-          </ContextMenu.Items>
-        </ContextMenu>
+            />
+          }
+        >
+          <Menu
+            label={`${t("library.filters.sort_by")}: ${t(
+              `home.settings.plugins.jellyseerr.order_by.${jellyseerrOrderBy}`,
+            )}`}
+          >
+            {sortOptions.map((item) => {
+              const isSelected =
+                jellyseerrOrderBy === (item as unknown as JellyseerrSearchSort);
+              return (
+                <Button
+                  key={item}
+                  label={t(`home.settings.plugins.jellyseerr.order_by.${item}`)}
+                  systemImage={isSelected ? "checkmark.circle.fill" : "circle"}
+                  onPress={() =>
+                    setJellyseerrOrderBy(
+                      item as unknown as JellyseerrSearchSort,
+                    )
+                  }
+                />
+              );
+            })}
+          </Menu>
+          <Menu
+            label={`${t("library.filters.sort_order")}: ${t(
+              `library.filters.${jellyseerrSortOrder}`,
+            )}`}
+          >
+            {orderOptions.map((item) => {
+              const isSelected = jellyseerrSortOrder === item;
+              return (
+                <Button
+                  key={item}
+                  label={t(`library.filters.${item}`)}
+                  systemImage={isSelected ? "checkmark.circle.fill" : "circle"}
+                  onPress={() => setJellyseerrSortOrder(item)}
+                />
+              );
+            })}
+          </Menu>
+        </Menu>
       </Host>
     );
   }

components/search/SearchTabButtons.tsx

@@ -1,9 +1,16 @@
-import { Button, Host } from "@expo/ui/swift-ui";
-import { buttonStyle } from "@expo/ui/swift-ui/modifiers";
 import { Platform, TouchableOpacity, View } from "react-native";
-import { Text } from "@/components/common/Text";
 import { Tag } from "@/components/GenreTags";
 
+// @expo/ui's SwiftUI native module (ExpoUI) does not exist in tvOS builds.
+// A static top-level import crashes the route tree on tvOS at module load.
+// Load it lazily and only off-TV; TV never renders this component.
+const { Button, Host, HStack, Spacer } = Platform.isTV
+  ? ({} as typeof import("@expo/ui/swift-ui"))
+  : require("@expo/ui/swift-ui");
+const { buttonStyle } = Platform.isTV
+  ? ({} as typeof import("@expo/ui/swift-ui/modifiers"))
+  : require("@expo/ui/swift-ui/modifiers");
+
 type SearchType = "Library" | "Discover";
 
 interface SearchTabButtonsProps {
@@ -17,18 +24,10 @@ export const SearchTabButtons: React.FC<SearchTabButtonsProps> = ({
   setSearchType,
   t,
 }) => {
-  if (Platform.OS === "ios") {
+  if (Platform.OS === "ios" && !Platform.isTV) {
     return (
-      <>
-        <Host
-          style={{
-            height: 40,
-            width: 80,
-            flexDirection: "row",
-            gap: 10,
-            justifyContent: "space-between",
-          }}
-        >
+      <Host style={{ height: 40, flex: 1 }}>
+        <HStack spacing={8}>
           <Button
             modifiers={[
               buttonStyle(
@@ -36,19 +35,8 @@ export const SearchTabButtons: React.FC<SearchTabButtonsProps> = ({
               ),
             ]}
             onPress={() => setSearchType("Library")}
-          >
-            <Text>{t("search.library")}</Text>
-          </Button>
-        </Host>
-        <Host
-          style={{
-            height: 40,
-            width: 100,
-            flexDirection: "row",
-            gap: 10,
-            justifyContent: "space-between",
-          }}
-        >
+            label={t("search.library")}
+          />
           <Button
             modifiers={[
               buttonStyle(
@@ -56,11 +44,11 @@ export const SearchTabButtons: React.FC<SearchTabButtonsProps> = ({
               ),
             ]}
             onPress={() => setSearchType("Discover")}
-          >
-            <Text>{t("search.discover")}</Text>
-          </Button>
-        </Host>
-      </>
+            label={t("search.discover")}
+          />
+          <Spacer />
+        </HStack>
+      </Host>
     );
   }
 

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

@@ -4,10 +4,11 @@ import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Input } from "@/components/common/Input";
 import { Text } from "@/components/common/Text";
 import { TVDiscover } from "@/components/jellyseerr/discover/TVDiscover";
+import { useScaledTVSizes } from "@/constants/TVSizes";
 import { useScaledTVTypography } from "@/constants/TVTypography";
+import { TvSearchView } from "@/modules/tv-search";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 import type DiscoverSlider from "@/utils/jellyseerr/server/entity/DiscoverSlider";
@@ -16,36 +17,46 @@ import type {
   PersonResult,
   TvResult,
 } from "@/utils/jellyseerr/server/models/Search";
+import { scaleSize } from "@/utils/scaleSize";
 import { TVJellyseerrSearchResults } from "./TVJellyseerrSearchResults";
 import { TVSearchSection } from "./TVSearchSection";
 import { TVSearchTabBadges } from "./TVSearchTabBadges";
 
 const HORIZONTAL_PADDING = 60;
 const TOP_PADDING = 100;
+// Height of the native search bar itself. The tvOS grid keyboard presents as
+// its own overlay when the field is focused, so we only reserve the bar height
+// here — not the whole keyboard. Tunable once seen on device.
+const SEARCH_AREA_HEIGHT = 250;
 const SECTION_GAP = 10;
 const SCALE_PADDING = 20;
 
-// Loading skeleton for TV
+// Loading skeleton for TV.
+// Mirrors TVSearchSection's scaled layout (poster width, item gap, edge
+// padding, heading typography, poster radius) so the placeholder lines up with
+// the real content that replaces it.
 const TVLoadingSkeleton: React.FC = () => {
   const typography = useScaledTVTypography();
-  const itemWidth = 210;
+  const sizes = useScaledTVSizes();
+  const itemWidth = sizes.posters.poster;
   return (
     <View style={{ overflow: "visible" }}>
+      {/* Section header placeholder — matches the heading typography + margins */}
       <View
         style={{
-          width: 200,
-          height: 28,
+          width: itemWidth,
+          height: typography.heading,
           backgroundColor: "#262626",
           borderRadius: 8,
-          marginBottom: 16,
-          marginLeft: SCALE_PADDING,
+          marginBottom: 20,
+          marginLeft: sizes.padding.horizontal,
         }}
       />
       <View
         style={{
           flexDirection: "row",
-          gap: 16,
-          paddingHorizontal: SCALE_PADDING,
+          gap: sizes.gaps.item,
+          paddingLeft: sizes.padding.horizontal,
           paddingVertical: SCALE_PADDING,
         }}
       >
@@ -56,15 +67,14 @@ const TVLoadingSkeleton: React.FC = () => {
                 backgroundColor: "#262626",
                 width: itemWidth,
                 aspectRatio: 10 / 15,
-                borderRadius: 12,
-                marginBottom: 8,
+                borderRadius: scaleSize(24),
+                marginBottom: scaleSize(8),
               }}
             />
             <View
               style={{
                 borderRadius: 6,
                 overflow: "hidden",
-                marginBottom: 4,
                 alignSelf: "flex-start",
               }}
             >
@@ -124,7 +134,6 @@ interface TVSearchPageProps {
 }
 
 export const TVSearchPage: React.FC<TVSearchPageProps> = ({
-  search,
   setSearch,
   debouncedSearch,
   movies,
@@ -215,125 +224,136 @@ export const TVSearchPage: React.FC<TVSearchPageProps> = ({
   const currentNoResults = isLibraryMode ? noResults : jellyseerrNoResults;
 
   return (
-    <ScrollView
-      nestedScrollEnabled
-      showsVerticalScrollIndicator={false}
-      keyboardDismissMode='on-drag'
-      contentContainerStyle={{
-        paddingTop: insets.top + TOP_PADDING,
-        paddingBottom: insets.bottom + 60,
-      }}
-    >
-      {/* Search Input */}
+    <View style={{ flex: 1 }}>
+      {/* Sticky header: search field stays pinned while results scroll below. */}
       <View
         style={{
-          marginBottom: 24,
-          marginHorizontal: HORIZONTAL_PADDING + 200,
+          paddingTop: insets.top + TOP_PADDING,
         }}
       >
-        <Input
-          placeholder={t("search.search")}
-          value={search}
-          onChangeText={setSearch}
-          keyboardType='default'
-          returnKeyType='done'
-          autoCapitalize='none'
-          clearButtonMode='while-editing'
-          maxLength={500}
-          hasTVPreferredFocus={
-            debouncedSearch.length === 0 &&
-            sections.length === 0 &&
-            !showDiscover
-          }
-        />
-      </View>
-
-      {/* Search Type Tab Badges */}
-      {showDiscover && (
-        <View style={{ marginHorizontal: HORIZONTAL_PADDING }}>
-          <TVSearchTabBadges
-            searchType={searchType}
-            setSearchType={setSearchType}
-            showDiscover={showDiscover}
+        {/* Native tvOS search field (SwiftUI `.searchable`, our `tv-search`
+            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,
+            height: SEARCH_AREA_HEIGHT,
+          }}
+        >
+          <TvSearchView
+            style={{ width: "100%", height: "100%" }}
+            placeholder={t("search.search")}
+            onChangeText={(e) => setSearch(e.nativeEvent.text)}
           />
         </View>
-      )}
+      </View>
 
-      {/* Loading State */}
-      {currentLoading && (
-        <View style={{ gap: SECTION_GAP }}>
-          <TVLoadingSkeleton />
-          <TVLoadingSkeleton />
-        </View>
-      )}
-
-      {/* Library Search Results */}
-      {isLibraryMode && !loading && (
-        <View style={{ gap: SECTION_GAP }}>
-          {sections.map((section, index) => (
-            <TVSearchSection
-              key={section.key}
-              title={section.title}
-              items={section.items!}
-              orientation={section.orientation || "vertical"}
-              isFirstSection={index === 0}
-              onItemPress={onItemPress}
-              onItemLongPress={onItemLongPress}
-              imageUrlGetter={
-                ["artists", "albums", "songs", "playlists"].includes(
-                  section.key,
-                )
-                  ? getImageUrl
-                  : undefined
-              }
+      <ScrollView
+        nestedScrollEnabled
+        showsVerticalScrollIndicator={false}
+        keyboardDismissMode='on-drag'
+        contentContainerStyle={{
+          paddingBottom: insets.bottom + 60,
+        }}
+      >
+        {/* Search Type Tab Badges */}
+        {showDiscover && (
+          <View style={{ marginHorizontal: HORIZONTAL_PADDING }}>
+            <TVSearchTabBadges
+              searchType={searchType}
+              setSearchType={setSearchType}
+              showDiscover={showDiscover}
             />
-          ))}
-        </View>
-      )}
+          </View>
+        )}
 
-      {/* Jellyseerr/Discover Search Results */}
-      {isDiscoverMode && !jellyseerrLoading && debouncedSearch.length > 0 && (
-        <TVJellyseerrSearchResults
-          movieResults={jellyseerrMovies}
-          tvResults={jellyseerrTv}
-          personResults={jellyseerrPersons}
-          loading={jellyseerrLoading}
-          noResults={jellyseerrNoResults}
-          searchQuery={debouncedSearch}
-          onMoviePress={onJellyseerrMoviePress || (() => {})}
-          onTvPress={onJellyseerrTvPress || (() => {})}
-          onPersonPress={onJellyseerrPersonPress || (() => {})}
-        />
-      )}
+        {/* Loading State */}
+        {currentLoading && (
+          <View style={{ gap: SECTION_GAP }}>
+            <TVLoadingSkeleton />
+            <TVLoadingSkeleton />
+          </View>
+        )}
 
-      {/* Discover Content (when no search query in Discover mode) */}
-      {isDiscoverMode && !jellyseerrLoading && debouncedSearch.length === 0 && (
-        <TVDiscover sliders={discoverSliders} />
-      )}
+        {/* Library Search Results */}
+        {isLibraryMode && !loading && (
+          <View style={{ gap: SECTION_GAP }}>
+            {sections.map((section) => (
+              <TVSearchSection
+                key={section.key}
+                title={section.title}
+                items={section.items!}
+                orientation={section.orientation || "vertical"}
+                // 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={
+                  ["artists", "albums", "songs", "playlists"].includes(
+                    section.key,
+                  )
+                    ? getImageUrl
+                    : undefined
+                }
+              />
+            ))}
+          </View>
+        )}
 
-      {/* No Results State */}
-      {!currentLoading && currentNoResults && debouncedSearch.length > 0 && (
-        <View style={{ alignItems: "center", paddingTop: 40 }}>
-          <Text
-            style={{
-              fontSize: typography.heading,
-              fontWeight: "bold",
-              color: "#FFFFFF",
-              marginBottom: 8,
-            }}
-          >
-            {t("search.no_results_found_for")}
-          </Text>
-          <Text
-            style={{
-              fontSize: typography.body,
-              color: "rgba(255,255,255,0.6)",
-            }}
-          >
-            "{debouncedSearch}"
-          </Text>
-        </View>
-      )}
-    </ScrollView>
+        {/* Jellyseerr/Discover Search Results */}
+        {isDiscoverMode && !jellyseerrLoading && debouncedSearch.length > 0 && (
+          <TVJellyseerrSearchResults
+            movieResults={jellyseerrMovies}
+            tvResults={jellyseerrTv}
+            personResults={jellyseerrPersons}
+            loading={jellyseerrLoading}
+            noResults={jellyseerrNoResults}
+            searchQuery={debouncedSearch}
+            onMoviePress={onJellyseerrMoviePress || (() => {})}
+            onTvPress={onJellyseerrTvPress || (() => {})}
+            onPersonPress={onJellyseerrPersonPress || (() => {})}
+          />
+        )}
+
+        {/* Discover Content (when no search query in Discover mode) */}
+        {isDiscoverMode &&
+          !jellyseerrLoading &&
+          debouncedSearch.length === 0 && (
+            <TVDiscover sliders={discoverSliders} />
+          )}
+
+        {/* No Results State */}
+        {!currentLoading && currentNoResults && debouncedSearch.length > 0 && (
+          <View style={{ alignItems: "center", paddingTop: 40 }}>
+            <Text
+              style={{
+                fontSize: typography.heading,
+                fontWeight: "bold",
+                color: "#FFFFFF",
+                marginBottom: 8,
+              }}
+            >
+              {t("search.no_results_found_for")}
+            </Text>
+            <Text
+              style={{
+                fontSize: typography.body,
+                color: "rgba(255,255,255,0.6)",
+              }}
+            >
+              "{debouncedSearch}"
+            </Text>
+          </View>
+        )}
+      </ScrollView>
+    </View>
   );
 };

components/search/TVSearchSection.tsx

@@ -20,6 +20,8 @@ interface TVSearchSectionProps extends ViewProps {
   onItemPress: (item: BaseItemDto) => void;
   onItemLongPress?: (item: BaseItemDto) => void;
   imageUrlGetter?: (item: BaseItemDto) => string | undefined;
+  /** Override the horizontal edge padding (defaults to the scaled TV padding). */
+  horizontalPadding?: number;
 }
 
 export const TVSearchSection: React.FC<TVSearchSectionProps> = ({
@@ -31,12 +33,14 @@ export const TVSearchSection: React.FC<TVSearchSectionProps> = ({
   onItemPress,
   onItemLongPress,
   imageUrlGetter,
+  horizontalPadding,
   ...props
 }) => {
   const typography = useScaledTVTypography();
   const posterSizes = useScaledTVPosterSizes();
   const sizes = useScaledTVSizes();
   const ITEM_GAP = sizes.gaps.item;
+  const edgePadding = horizontalPadding ?? sizes.padding.horizontal;
   const flatListRef = useRef<FlatList<BaseItemDto>>(null);
   const [focusedCount, setFocusedCount] = useState(0);
   const prevFocusedCount = useRef(0);
@@ -273,7 +277,7 @@ export const TVSearchSection: React.FC<TVSearchSectionProps> = ({
           fontWeight: "700",
           color: "#FFFFFF",
           marginBottom: 20,
-          marginLeft: sizes.padding.horizontal,
+          marginLeft: edgePadding,
           letterSpacing: 0.5,
         }}
       >
@@ -293,12 +297,12 @@ export const TVSearchSection: React.FC<TVSearchSectionProps> = ({
         removeClippedSubviews={false}
         getItemLayout={getItemLayout}
         style={{ overflow: "visible" }}
-        contentInset={{
-          left: sizes.padding.horizontal,
-          right: sizes.padding.horizontal,
-        }}
-        contentOffset={{ x: -sizes.padding.horizontal, 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);
@@ -100,7 +104,7 @@ export const SeasonEpisodesCarousel: React.FC<Props> = ({
           onPress={() => {
             router.setParams({ id: _item.Id });
           }}
-          className={`flex flex-col w-44 
+          className={`flex flex-col w-44
                   ${item?.Id === _item.Id ? "" : "opacity-50"}
                 `}
         >

components/series/TVSeriesPage.tsx

@@ -193,7 +193,7 @@ const TVSeasonButton: React.FC<{
         >
           <Text
             style={{
-              fontSize: typography.body,
+              fontSize: typography.callout,
               color: focused ? "#000" : "#FFFFFF",
               fontWeight: "bold",
             }}
@@ -538,7 +538,7 @@ export const TVSeriesPage: React.FC<TVSeriesPageProps> = ({
                 />
                 <Text
                   style={{
-                    fontSize: typography.body,
+                    fontSize: typography.callout,
                     fontWeight: "bold",
                     color: "#000000",
                   }}

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/LibraryOptionsSheet.tsx

@@ -229,7 +229,7 @@ export const LibraryOptionsSheet: React.FC<Props> = ({
             />
           </OptionGroup>
 
-          <OptionGroup title='Options'>
+          <OptionGroup title={t("library.options.options_title")}>
             <ToggleItem
               label={t("library.options.show_titles")}
               value={settings.showTitles}

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/stacks/NestedTabPageStack.tsx

@@ -1,14 +1,9 @@
-import type { ParamListBase, RouteProp } from "@react-navigation/native";
-import type { NativeStackNavigationOptions } from "@react-navigation/native-stack";
+import { Stack } from "expo-router";
+import type { ComponentProps } from "react";
 import { Platform } from "react-native";
 import { HeaderBackButton } from "../common/HeaderBackButton";
 
-type ICommonScreenOptions =
-  | NativeStackNavigationOptions
-  | ((prop: {
-      route: RouteProp<ParamListBase, string>;
-      navigation: any;
-    }) => NativeStackNavigationOptions);
+type ICommonScreenOptions = ComponentProps<typeof Stack.Screen>["options"];
 
 export const commonScreenOptions: ICommonScreenOptions = {
   title: "",

components/tv/TVNextEpisodeCountdown.tsx

@@ -63,6 +63,7 @@ export const TVNextEpisodeCountdown: FC<TVNextEpisodeCountdownProps> = ({
   const typography = useScaledTVTypography();
   const { t } = useTranslation();
   const progress = useSharedValue(0);
+  const cancelled = useSharedValue(false);
   const onFinishRef = useRef(onFinish);
   const { focused, handleFocus, handleBlur, animatedStyle } =
     useTVFocusAnimation({
@@ -120,13 +121,15 @@ export const TVNextEpisodeCountdown: FC<TVNextEpisodeCountdownProps> = ({
       return;
     }
 
+    cancelled.value = false;
+
     // Resume from current position
     const remainingDuration = (1 - progress.value) * 8000;
     progress.value = withTiming(
       1,
       { duration: remainingDuration, easing: Easing.linear },
       (finished) => {
-        if (finished) {
+        if (finished && !cancelled.value) {
           runOnJS(onFinishRef.current)();
         }
       },
@@ -134,9 +137,10 @@ export const TVNextEpisodeCountdown: FC<TVNextEpisodeCountdownProps> = ({
 
     // Cancel animation on unmount to prevent onFinish from firing after exit
     return () => {
+      cancelled.value = true;
       cancelAnimation(progress);
     };
-  }, [show, isPlaying, progress]);
+  }, [show, isPlaying, progress, cancelled]);
 
   const progressStyle = useAnimatedStyle(() => ({
     width: `${progress.value * 100}%`,