chore(deps): Update dependency lint-staged to v17.0.8

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

.github/workflows/build-apps.yml

@@ -57,7 +57,7 @@ jobs:
           bun-version: "1.3.14"
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        uses: actions/cache@2c8a9bd7457de244a408f35966fab2fb45fda9c8 # v6.0.0
         with:
           path: ~/.bun/install/cache
           key: ${{ runner.os }}-${{ runner.arch }}-bun-${{ hashFiles('bun.lock') }}
@@ -79,7 +79,7 @@ jobs:
           java-version: "17"
 
       - name: 💾 Cache Gradle global
-        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        uses: actions/cache@2c8a9bd7457de244a408f35966fab2fb45fda9c8 # v6.0.0
         with:
           path: |
             ~/.gradle/caches/modules-2
@@ -92,7 +92,7 @@ jobs:
         run: bun run prebuild
 
       - name: 💾 Cache project Gradle (.gradle)
-        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        uses: actions/cache@2c8a9bd7457de244a408f35966fab2fb45fda9c8 # v6.0.0
         with:
           path: android/.gradle
           key: ${{ runner.os }}-${{ runner.arch }}-android-gradle-develop-${{ hashFiles('android/**/build.gradle', 'android/gradle/wrapper/gradle-wrapper.properties') }}
@@ -157,7 +157,7 @@ jobs:
           bun-version: "1.3.14"
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        uses: actions/cache@2c8a9bd7457de244a408f35966fab2fb45fda9c8 # v6.0.0
         with:
           path: ~/.bun/install/cache
           key: ${{ runner.os }}-${{ runner.arch }}-bun-${{ hashFiles('bun.lock') }}
@@ -179,7 +179,7 @@ jobs:
           java-version: "17"
 
       - name: 💾 Cache Gradle global
-        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        uses: actions/cache@2c8a9bd7457de244a408f35966fab2fb45fda9c8 # v6.0.0
         with:
           path: |
             ~/.gradle/caches/modules-2
@@ -192,7 +192,7 @@ jobs:
         run: bun run prebuild:tv
 
       - name: 💾 Cache project Gradle (.gradle)
-        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        uses: actions/cache@2c8a9bd7457de244a408f35966fab2fb45fda9c8 # v6.0.0
         with:
           path: android/.gradle
           key: ${{ runner.os }}-${{ runner.arch }}-android-gradle-develop-${{ hashFiles('android/**/build.gradle', 'android/gradle/wrapper/gradle-wrapper.properties') }}
@@ -244,7 +244,7 @@ jobs:
           bun-version: "1.3.14"
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        uses: actions/cache@2c8a9bd7457de244a408f35966fab2fb45fda9c8 # v6.0.0
         with:
           path: ~/.bun/install/cache
           key: ${{ runner.os }}-${{ runner.arch }}-bun-${{ hashFiles('bun.lock') }}
@@ -316,7 +316,7 @@ jobs:
           bun-version: "1.3.14"
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        uses: actions/cache@2c8a9bd7457de244a408f35966fab2fb45fda9c8 # v6.0.0
         with:
           path: ~/.bun/install/cache
           key: ${{ runner.os }}-${{ runner.arch }}-bun-${{ hashFiles('bun.lock') }}
@@ -383,7 +383,7 @@ jobs:
           bun-version: "1.3.14"
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        uses: actions/cache@2c8a9bd7457de244a408f35966fab2fb45fda9c8 # v6.0.0
         with:
           path: ~/.bun/install/cache
           key: ${{ runner.os }}-${{ runner.arch }}-bun-${{ hashFiles('bun.lock') }}
@@ -453,7 +453,7 @@ jobs:
           bun-version: "1.3.14"
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        uses: actions/cache@2c8a9bd7457de244a408f35966fab2fb45fda9c8 # v6.0.0
         with:
           path: ~/.bun/install/cache
           key: ${{ runner.os }}-${{ runner.arch }}-bun-${{ hashFiles('bun.lock') }}

.github/workflows/check-lockfile.yml

@@ -33,7 +33,7 @@ jobs:
           bun-version: "1.3.14"
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        uses: actions/cache@2c8a9bd7457de244a408f35966fab2fb45fda9c8 # v6.0.0
         with:
           path: |
             ~/.bun/install/cache

.github/workflows/linting.yml

@@ -114,7 +114,7 @@ jobs:
         uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
         with:
           # renovate: datasource=node-version depName=node versioning=node
-          node-version: "24.17.0"
+          node-version: "24.18.0"
 
       - name: "🍞 Setup Bun"
         uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0

.github/workflows/release.yml

@@ -77,7 +77,7 @@ jobs:
           bun-version: "1.3.14"
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        uses: actions/cache@2c8a9bd7457de244a408f35966fab2fb45fda9c8 # v6.0.0
         with:
           path: ~/.bun/install/cache
           key: ${{ runner.os }}-${{ runner.arch }}-bun-${{ hashFiles('bun.lock') }}

README.md

@@ -73,7 +73,7 @@ Thanks to [@Alexk2309](https://github.com/Alexk2309) for the hard work building
 
 ## 🛣️ Roadmap
 
-Check out our [Roadmap](https://github.com/users/fredrikburmester/projects/5) To see what we're working on next, we are always open to feedback and suggestions. Please let us know if you have any ideas or feature requests.
+Check out our [Roadmap](https://github.com/orgs/streamyfin/projects/3/views/1) to see what we're working on next, we are always open to feedback and suggestions. Please let us know if you have any ideas or feature requests.
 
 ## 📥 Download Streamyfin
 

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

@@ -3,16 +3,24 @@ import {
   type NativeBottomTabNavigationEventMap,
   type NativeBottomTabNavigationOptions,
 } from "@bottom-tabs/react-navigation";
-import { withLayoutContext } from "expo-router";
+import { Stack, useSegments, withLayoutContext } from "expo-router";
 import type {
   ParamListBase,
   TabNavigationState,
 } from "expo-router/react-navigation";
+import { useCallback, useEffect, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, View } from "react-native";
 import { SystemBars } from "react-native-edge-to-edge";
+import type { TVNavBarTab } from "@/components/tv/TVNavBar";
+import { TVNavBar } from "@/components/tv/TVNavBar";
 import { Colors } from "@/constants/Colors";
-import { useTVHomeBackHandler } from "@/hooks/useTVBackHandler";
+import useRouter from "@/hooks/useAppRouter";
+import {
+  isTabRoute,
+  useTVHomeBackHandler,
+  useTVTabRootBackHandler,
+} from "@/hooks/useTVBackHandler";
 import { useSettings } from "@/utils/atoms/settings";
 import { eventBus } from "@/utils/eventBus";
 
@@ -33,13 +41,108 @@ export const NativeTabs = withLayoutContext<
   NativeBottomTabNavigationEventMap
 >(Navigator);
 
+const IS_ANDROID_TV = Platform.isTV && Platform.OS === "android";
+
+function TVTabLayout() {
+  const { settings } = useSettings();
+  const { t } = useTranslation();
+  const segments = useSegments();
+  const router = useRouter();
+
+  const currentTab = segments.find(isTabRoute);
+  const lastSegment = segments[segments.length - 1] ?? "";
+  const atTabRoot = isTabRoute(lastSegment) || lastSegment === "index";
+
+  const tabs: TVNavBarTab[] = useMemo(
+    () =>
+      [
+        { key: "(home)", label: t("tabs.home") },
+        { key: "(search)", label: t("tabs.search") },
+        { key: "(favorites)", label: t("tabs.favorites") },
+        !settings?.streamyStatsServerUrl || settings?.hideWatchlistsTab
+          ? null
+          : { key: "(watchlists)", label: t("watchlists.title") },
+        { key: "(libraries)", label: t("tabs.library") },
+        !settings?.showCustomMenuLinks
+          ? null
+          : { key: "(custom-links)", label: t("tabs.custom_links") },
+        { key: "(settings)", label: t("tabs.settings") },
+      ].filter((tab): tab is TVNavBarTab => tab !== null),
+    [
+      settings?.streamyStatsServerUrl,
+      settings?.hideWatchlistsTab,
+      settings?.showCustomMenuLinks,
+      t,
+    ],
+  );
+
+  const activeTabKey = currentTab ?? "(home)";
+
+  const visibleKeys = useMemo(
+    () => new Set(tabs.map((tab) => tab.key)),
+    [tabs],
+  );
+
+  const handleTabChange = useCallback(
+    (key: string) => {
+      if (key === currentTab) return;
+
+      if (key === "(home)") eventBus.emit("scrollToTop");
+      if (key === "(search)") eventBus.emit("searchTabPressed");
+
+      router.replace(`/(auth)/(tabs)/${key}`);
+    },
+    [currentTab, router],
+  );
+
+  const navigateHome = useCallback(() => {
+    router.replace("/(auth)/(tabs)/(home)");
+  }, [router]);
+  useTVTabRootBackHandler(navigateHome, atTabRoot, currentTab);
+
+  // If current tab is no longer visible (setting changed), navigate to home
+  useEffect(() => {
+    if (!visibleKeys.has(activeTabKey) && activeTabKey !== "(home)") {
+      router.replace("/(auth)/(tabs)/(home)");
+    }
+  }, [visibleKeys, activeTabKey, router]);
+
+  return (
+    <View style={{ flex: 1 }}>
+      <SystemBars hidden={false} style='light' />
+      <Stack
+        screenOptions={{ headerShown: false, animation: "none" }}
+        initialRouteName='(home)'
+      >
+        <Stack.Screen name='index' redirect />
+      </Stack>
+      <TVNavBar
+        tabs={tabs}
+        activeTabKey={activeTabKey}
+        onTabChange={handleTabChange}
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          zIndex: 1000,
+        }}
+      />
+    </View>
+  );
+}
+
 export default function TabLayout() {
   const { settings } = useSettings();
   const { t } = useTranslation();
 
-  // Handle TV back button - prevent app exit when at root
+  // Must be called before any conditional return (rules of hooks)
   useTVHomeBackHandler();
 
+  if (IS_ANDROID_TV) {
+    return <TVTabLayout />;
+  }
+
   return (
     <View style={{ flex: 1 }}>
       <SystemBars hidden={false} style='light' />

bun.lock

@@ -111,7 +111,7 @@
         "cross-env": "10.1.0",
         "expo-doctor": "1.19.9",
         "husky": "9.1.7",
-        "lint-staged": "17.0.7",
+        "lint-staged": "17.0.8",
         "react-test-renderer": "19.2.3",
         "typescript": "6.0.3",
       },
@@ -1270,7 +1270,7 @@
 
     "lines-and-columns": ["lines-and-columns@1.2.4", "", {}, "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="],
 
-    "lint-staged": ["lint-staged@17.0.7", "", { "dependencies": { "listr2": "^10.2.1", "picomatch": "^4.0.4", "string-argv": "^0.3.2", "tinyexec": "^1.2.4" }, "optionalDependencies": { "yaml": "^2.9.0" }, "bin": { "lint-staged": "bin/lint-staged.js" } }, "sha512-JrSobt+tW3rH8IOMi8tDZd3foorM5yPEkLD/V2NxobgHrFfHWGee4MOLVuZeScgxftEwbHrPHIFA/ZL+nUJeuA=="],
+    "lint-staged": ["lint-staged@17.0.8", "", { "dependencies": { "listr2": "^10.2.1", "picomatch": "^4.0.4", "string-argv": "^0.3.2", "tinyexec": "^1.2.4" }, "optionalDependencies": { "yaml": "^2.9.0" }, "bin": { "lint-staged": "bin/lint-staged.js" } }, "sha512-B2P/d+jVW0UXOQ0MVMLrB/9ydA1P+zz6jYfdrbbEd9ur3S2rcbduFWKiUCC02Sm5hbC8nrm7y24WuYMG54HfxA=="],
 
     "listr2": ["listr2@10.2.1", "", { "dependencies": { "cli-truncate": "^5.2.0", "eventemitter3": "^5.0.4", "log-update": "^6.1.0", "rfdc": "^1.4.1", "wrap-ansi": "^10.0.0" } }, "sha512-7I5knELsJKTUjXG+A6BkKAiGkW1i25fNa/xlUl9hFtk15WbE9jndA89xu5FzQKrY5llajE1hfZZFMILXkDHk/Q=="],
 

components/home/TVHeroCarousel.tsx

@@ -379,7 +379,7 @@ export const TVHeroCarousel: React.FC<TVHeroCarouselProps> = ({
   if (items.length === 0) return null;
 
   // Extra top padding for tvOS to clear the menu bar
-  const tvosTopPadding = Platform.OS === "ios" ? scaleSize(145) : 0;
+  const tvosTopPadding = scaleSize(145);
   const heroHeight = SCREEN_HEIGHT * sizes.padding.heroHeight;
 
   return (

components/tv/TVNavBar.tsx

@@ -0,0 +1,155 @@
+import React from "react";
+import {
+  Animated,
+  Pressable,
+  ScrollView,
+  StyleProp,
+  View,
+  ViewStyle,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "@/components/common/Text";
+import { useTVFocusAnimation } from "@/components/tv/hooks/useTVFocusAnimation";
+import { TVPadding } from "@/constants/TVSizes";
+import { useScaledTVTypography } from "@/constants/TVTypography";
+import { scaleSize } from "@/utils/scaleSize";
+
+export interface TVNavBarTab {
+  key: string;
+  label: string;
+}
+
+export interface TVNavBarProps {
+  tabs: TVNavBarTab[];
+  activeTabKey: string;
+  onTabChange: (key: string) => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+const TVNavBarTabItem: React.FC<{
+  label: string;
+  isActive: boolean;
+  onSelect: () => void;
+  onLayout: (e: {
+    nativeEvent: { layout: { x: number; width: number } };
+  }) => void;
+  hasTVPreferredFocus: boolean;
+}> = ({ label, isActive, onSelect, onLayout, hasTVPreferredFocus }) => {
+  const typography = useScaledTVTypography();
+  const { focused, handleFocus, handleBlur, animatedStyle } =
+    useTVFocusAnimation({
+      scaleAmount: 1.05,
+      duration: 120,
+    });
+
+  const bg = focused
+    ? "rgba(255, 255, 255, 0.95)"
+    : isActive
+      ? "rgba(255, 255, 255, 0.15)"
+      : "transparent";
+
+  const textColor = focused
+    ? "#000"
+    : isActive
+      ? "#fff"
+      : "rgba(255, 255, 255, 0.7)";
+
+  return (
+    <Pressable
+      onPress={onSelect}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      hasTVPreferredFocus={hasTVPreferredFocus}
+      onLayout={onLayout}
+    >
+      <Animated.View
+        style={[
+          animatedStyle,
+          {
+            backgroundColor: bg,
+            borderRadius: scaleSize(24),
+            borderWidth: isActive && !focused ? 1 : 0,
+            borderColor: "rgba(255, 255, 255, 0.3)",
+            paddingHorizontal: scaleSize(28),
+            paddingVertical: scaleSize(14),
+          },
+        ]}
+      >
+        <Text
+          style={{
+            fontSize: typography.heading,
+            color: textColor,
+            fontWeight: isActive || focused ? "600" : "400",
+          }}
+        >
+          {label}
+        </Text>
+      </Animated.View>
+    </Pressable>
+  );
+};
+
+export const TVNavBar: React.FC<TVNavBarProps> = ({
+  tabs,
+  activeTabKey,
+  onTabChange,
+  style,
+}) => {
+  const scrollRef = React.useRef<ScrollView>(null);
+  const tabLayouts = React.useRef<Record<string, { x: number; width: number }>>(
+    {},
+  );
+  const insets = useSafeAreaInsets();
+
+  const handleTabLayout = React.useCallback(
+    (key: string) =>
+      (e: { nativeEvent: { layout: { x: number; width: number } } }) => {
+        tabLayouts.current[key] = e.nativeEvent.layout;
+      },
+    [],
+  );
+
+  const handleTabChange = React.useCallback(
+    (key: string) => {
+      onTabChange(key);
+
+      const layout = tabLayouts.current[key];
+      if (layout && scrollRef.current) {
+        scrollRef.current.scrollTo({
+          x: Math.max(0, layout.x - TVPadding.horizontal / 2),
+          animated: true,
+        });
+      }
+    },
+    [onTabChange],
+  );
+
+  if (tabs.length === 0) return null;
+
+  return (
+    <View style={[{ paddingTop: insets.top + 16, paddingBottom: 8 }, style]}>
+      <ScrollView
+        ref={scrollRef}
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        keyboardShouldPersistTaps='handled'
+        contentContainerStyle={{
+          flexGrow: 1,
+          justifyContent: "center",
+          gap: scaleSize(12),
+        }}
+      >
+        {tabs.map((tab) => (
+          <TVNavBarTabItem
+            key={tab.key}
+            label={tab.label}
+            isActive={tab.key === activeTabKey}
+            onSelect={() => handleTabChange(tab.key)}
+            onLayout={handleTabLayout(tab.key)}
+            hasTVPreferredFocus={tab.key === activeTabKey}
+          />
+        ))}
+      </ScrollView>
+    </View>
+  );
+};

components/tv/index.ts

@@ -35,6 +35,8 @@ export type { TVLanguageCardProps } from "./TVLanguageCard";
 export { TVLanguageCard } from "./TVLanguageCard";
 export type { TVMetadataBadgesProps } from "./TVMetadataBadges";
 export { TVMetadataBadges } from "./TVMetadataBadges";
+export type { TVNavBarProps, TVNavBarTab } from "./TVNavBar";
+export { TVNavBar } from "./TVNavBar";
 export type { TVNextEpisodeCountdownProps } from "./TVNextEpisodeCountdown";
 export { TVNextEpisodeCountdown } from "./TVNextEpisodeCountdown";
 export type { TVOptionButtonProps } from "./TVOptionButton";

hooks/useTVBackHandler.ts

@@ -4,41 +4,42 @@ import { Platform } from "react-native";
 import {
   disableTVMenuKeyInterception,
   enableTVMenuKeyInterception,
+  useTVBackPress,
 } from "./useTVBackPress";
 
 export { enableTVMenuKeyInterception } from "./useTVBackPress";
 
+/** All tab route names used in the bottom tab navigator. */
+export const TAB_ROUTES = [
+  "(home)",
+  "(search)",
+  "(favorites)",
+  "(libraries)",
+  "(watchlists)",
+  "(custom-links)",
+  "(settings)",
+] as const;
+
+export type TabRoute = (typeof TAB_ROUTES)[number];
+
+/** Check if a segment string is a tab route. */
+export function isTabRoute(s: string): s is TabRoute {
+  return (TAB_ROUTES as readonly string[]).includes(s);
+}
+
 /**
  * Check if we're at the root of a tab
  */
 function isAtTabRoot(segments: string[]): boolean {
   const lastSegment = segments[segments.length - 1];
-  const tabNames = [
-    "(home)",
-    "(search)",
-    "(favorites)",
-    "(libraries)",
-    "(watchlists)",
-    "(settings)",
-    "(custom-links)",
-  ];
-  return tabNames.includes(lastSegment) || lastSegment === "index";
+  return isTabRoute(lastSegment) || lastSegment === "index";
 }
 
 /**
  * Get the current tab name from segments
  */
-function getCurrentTab(segments: string[]): string | undefined {
-  return segments.find(
-    (s) =>
-      s === "(home)" ||
-      s === "(search)" ||
-      s === "(favorites)" ||
-      s === "(libraries)" ||
-      s === "(watchlists)" ||
-      s === "(settings)" ||
-      s === "(custom-links)",
-  );
+function getCurrentTab(segments: string[]): TabRoute | undefined {
+  return segments.find(isTabRoute);
 }
 
 /**
@@ -49,7 +50,6 @@ function getCurrentTab(segments: string[]): string | undefined {
 export function useTVHomeBackHandler() {
   const segments = useSegments();
 
-  // Get current state
   const currentTab = getCurrentTab(segments);
   const atTabRoot = isAtTabRoot(segments);
   const isOnHomeRoot = atTabRoot && currentTab === "(home)";
@@ -65,3 +65,24 @@ export function useTVHomeBackHandler() {
     enableTVMenuKeyInterception();
   }, [isOnHomeRoot]);
 }
+
+/**
+ * Handles back press at a non-Home tab root on Android TV by navigating to Home.
+ *
+ * Without NativeTabs, the Stack navigator used for the Android TV nav bar has no
+ * built-in tab-level back handling — pressing back at a tab root would pop the
+ * Stack entirely and exit the tab navigator. This hook intercepts that and routes
+ * to Home instead.
+ */
+export function useTVTabRootBackHandler(
+  onNavigateHome: () => void,
+  isAtTabRoot: boolean,
+  currentTab: string | undefined,
+) {
+  useTVBackPress(() => {
+    if (!Platform.isTV || Platform.OS !== "android") return false;
+    if (!isAtTabRoot || currentTab === "(home)") return false;
+    onNavigateHome();
+    return true;
+  }, [isAtTabRoot, currentTab, onNavigateHome]);
+}

package.json

@@ -134,7 +134,7 @@
     "cross-env": "10.1.0",
     "expo-doctor": "1.19.9",
     "husky": "9.1.7",
-    "lint-staged": "17.0.7",
+    "lint-staged": "17.0.8",
     "react-test-renderer": "19.2.3",
     "typescript": "6.0.3"
   },