fixed typo

Signed-off-by: Lance Chant <13349722+lancechant@users.noreply.github.com>

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

@@ -12,11 +12,16 @@ import {
 import { FlashList } from "@shopify/flash-list";
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
-import { useLocalSearchParams, useNavigation } from "expo-router";
+import {
+  useFocusEffect,
+  useLocalSearchParams,
+  useNavigation,
+} from "expo-router";
 import { useAtom } from "jotai";
-import React, { useCallback, useEffect, useMemo } from "react";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import {
+  BackHandler,
   FlatList,
   Platform,
   ScrollView,
@@ -80,8 +85,9 @@ const Page = () => {
     sortBy?: string;
     sortOrder?: string;
     filterBy?: string;
+    fromSeeAll?: string;
   };
-  const { libraryId } = searchParams;
+  const { libraryId, fromSeeAll } = searchParams;
 
   const typography = useScaledTVTypography();
   const posterSizes = useScaledTVPosterSizes();
@@ -112,6 +118,22 @@ const Page = () => {
   const { t } = useTranslation();
   const router = useRouter();
   const { showOptions } = useTVOptionModal();
+
+  // When this library detail was opened from the home "See All" button, its
+  // libraries stack is just [detail], so the default TV Back would exit to home.
+  // Intercept Back (scoped to while this screen is focused via useFocusEffect) and
+  // route to the library list instead, so the user can switch libraries. Normal
+  // entries from the list keep their native pop-to-list behavior.
+  useFocusEffect(
+    useCallback(() => {
+      if (!Platform.isTV || fromSeeAll !== "true") return;
+      const sub = BackHandler.addEventListener("hardwareBackPress", () => {
+        router.replace("/(auth)/(tabs)/(libraries)");
+        return true;
+      });
+      return () => sub.remove();
+    }, [fromSeeAll, router]),
+  );
   const { showItemActions } = useTVItemActionModal();
 
   // TV Filter queries
@@ -269,6 +291,23 @@ const Page = () => {
     });
   }, [library]);
 
+  // If this See-All detail was deep-linked on top of the libraries index, collapse
+  // the libraries stack to just this screen. Otherwise the stack is [index, detail],
+  // which the native bottom tab reliably auto-pops back to the index (the detail
+  // "bounces" to the library list ~0.5s after opening). With [detail] alone it stays
+  // put, and Back is handled explicitly by the fromSeeAll interceptor above.
+  const didCollapseRef = useRef(false);
+  useEffect(() => {
+    if (!Platform.isTV || fromSeeAll !== "true" || didCollapseRef.current)
+      return;
+    const state = navigation.getState();
+    if (state?.routes && state.routes.length > 1) {
+      didCollapseRef.current = true;
+      const top = state.routes[state.routes.length - 1];
+      navigation.reset({ index: 0, routes: [top] } as any);
+    }
+  }, [navigation, fromSeeAll]);
+
   const fetchItems = useCallback(
     async ({
       pageParam,

components/WatchedIndicator.tsx

@@ -1,43 +1,116 @@
 import { Ionicons } from "@expo/vector-icons";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import type React from "react";
+import React from "react";
-import { Platform, View } from "react-native";
+import { Platform, View, type ViewStyle } from "react-native";
+import { Text } from "@/components/common/Text";
+import { scaleSize } from "@/utils/scaleSize";
 
-export const WatchedIndicator: React.FC<{ item: BaseItemDto }> = ({ item }) => {
+const isAggregateType = (item: BaseItemDto) =>
-  if (Platform.isTV) {
+  item.Type === "Series" || item.Type === "BoxSet";
-    // TV: Show white checkmark when watched
+
-    if (
+// TV sizes are scaled relative to a 1920×1080 reference (see scaleSize).
-      item.UserData?.Played &&
+const tvBadgeBase: ViewStyle = {
-      (item.Type === "Movie" || item.Type === "Episode")
+  position: "absolute",
-    ) {
+  top: scaleSize(8),
+  right: scaleSize(8),
+  height: scaleSize(28),
+  borderRadius: scaleSize(14),
+  backgroundColor: "rgba(255,255,255,0.92)",
+  alignItems: "center",
+  justifyContent: "center",
+};
+
+// Mobile uses raw dp — no scaling.
+const mobileBadgeBase: ViewStyle = {
+  position: "absolute",
+  top: 4,
+  right: 4,
+  height: 20,
+  borderRadius: 10,
+  backgroundColor: "#9333ea",
+  alignItems: "center",
+  justifyContent: "center",
+};
+
+/**
+ * Renders the unplayed-episode count badge for Series/BoxSet items that still
+ * have episodes left to watch. Returns null for non-aggregate types, fully
+ * watched items, or items with no unplayed count, so it is safe to mount
+ * unconditionally as an overlay (e.g. on top of the tvOS glass poster, where
+ * the watched checkmark is drawn natively and only the count needs RN).
+ */
+export const UnplayedCountBadge: React.FC<{ item: BaseItemDto }> = React.memo(
+  ({ item }) => {
+    if (!isAggregateType(item)) return null;
+    if (item.UserData?.Played) return null;
+    const unplayed = item.UserData?.UnplayedItemCount ?? 0;
+    if (unplayed <= 0) return null;
+
+    if (Platform.isTV) {
       return (
         <View
-          style={{
+          style={[
-            position: "absolute",
+            tvBadgeBase,
-            top: 8,
+            { minWidth: scaleSize(28), paddingHorizontal: scaleSize(7) },
-            right: 8,
+          ]}
-            backgroundColor: "rgba(255,255,255,0.9)",
-            borderRadius: 14,
-            width: 28,
-            height: 28,
-            alignItems: "center",
-            justifyContent: "center",
-          }}
         >
-          <Ionicons name='checkmark' size={18} color='black' />
+          <Text
+            style={{
+              fontSize: scaleSize(15),
+              fontWeight: "700",
+              color: "black",
+            }}
+          >
+            {unplayed}
+          </Text>
         </View>
       );
     }
-    return null;
+
+    return (
+      <View style={[mobileBadgeBase, { minWidth: 20, paddingHorizontal: 5 }]}>
+        <Text style={{ fontSize: 12, fontWeight: "700", color: "white" }}>
+          {unplayed}
+        </Text>
+      </View>
+    );
+  },
+);
+
+export const WatchedIndicator: React.FC<{ item: BaseItemDto }> = ({ item }) => {
+  const isMovieOrEpisode = item.Type === "Movie" || item.Type === "Episode";
+  const isAggregate = isAggregateType(item);
+  const isPlayed = item.UserData?.Played === true;
+
+  if (Platform.isTV) {
+    // Fully watched → white checkmark badge (top-right)
+    if (isPlayed && (isMovieOrEpisode || isAggregate)) {
+      return (
+        <View style={[tvBadgeBase, { width: scaleSize(28) }]}>
+          <Ionicons name='checkmark' size={scaleSize(18)} color='black' />
+        </View>
+      );
+    }
+    // Series/BoxSet with remaining episodes → count badge
+    return <UnplayedCountBadge item={item} />;
   }
 
-  // Mobile: Show purple triangle for unwatched
+  // Mobile: purple corner ribbon for unwatched Movie/Episode (existing behavior)
   return (
     <>
-      {item.UserData?.Played === false &&
+      {isMovieOrEpisode && !isPlayed && (
-        (item.Type === "Movie" || item.Type === "Episode") && (
+        <View className='bg-purple-600 w-8 h-8 absolute -top-4 -right-4 rotate-45' />
-          <View className='bg-purple-600 w-8 h-8 absolute -top-4 -right-4 rotate-45' />
+      )}
-        )}
+
+      {/* Fully watched Series/BoxSet → small purple checkmark */}
+      {isAggregate && isPlayed && (
+        <View style={[mobileBadgeBase, { width: 20 }]}>
+          <Ionicons name='checkmark' size={13} color='white' />
+        </View>
+      )}
+
+      {/* Series/BoxSet with remaining episodes → count badge */}
+      <UnplayedCountBadge item={item} />
     </>
   );
 };

components/home/InfiniteScrollingCollectionList.tv.tsx

@@ -201,12 +201,18 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
 
   const handleSeeAllPress = useCallback(() => {
     if (!parentId) return;
+    // Navigate into the library detail (lives in the libraries tab) sorted by most
+    // recently added. The `fromSeeAll` flag tells the detail page to (a) collapse
+    // the libraries stack so the native tab can't auto-pop it back to the list, and
+    // (b) intercept Back to route to the library list so the user can switch
+    // libraries. See app/(auth)/(tabs)/(libraries)/[libraryId].tsx.
     router.push({
-      pathname: "/(auth)/(tabs)/(libraries)/[libraryId]",
+      pathname: "/[libraryId]",
       params: {
         libraryId: parentId,
         sortBy: SortByOption.DateCreated,
         sortOrder: SortOrderOption.Descending,
+        fromSeeAll: "true",
       },
     } as any);
   }, [router, parentId]);
@@ -348,11 +354,14 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
           // contentOffset={{ x: -sizes.padding.horizontal, y: 0 }}
           // contentContainerStyle={{ paddingVertical: SCALE_PADDING }}
           ListFooterComponent={
+            // No fixed width: the footer must size to the "See All" card so the
+            // FlatList's scrollable content extends to fully reveal it. A fixed
+            // (narrow) width clipped the card at the right edge. Trailing space is
+            // provided by contentContainerStyle.paddingRight.
             <View
               style={{
                 flexDirection: "row",
                 alignItems: "center",
-                width: sizes.padding.horizontal,
               }}
             >
               {isFetchingNextPage && (

components/posters/ItemPoster.tsx

@@ -1,8 +1,8 @@
 import { type BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { useState } from "react";
 import { View, type ViewProps } from "react-native";
+import { WatchedIndicator } from "@/components/WatchedIndicator";
 import { ItemImage } from "../common/ItemImage";
-import { WatchedIndicator } from "../WatchedIndicator";
 
 interface Props extends ViewProps {
   item: BaseItemDto;

components/posters/SeriesPoster.tsx

@@ -3,6 +3,7 @@ import { Image } from "expo-image";
 import { useAtom } from "jotai";
 import { useMemo } from "react";
 import { View } from "react-native";
+import { WatchedIndicator } from "@/components/WatchedIndicator";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 
@@ -52,6 +53,7 @@ const SeriesPoster: React.FC<MoviePosterProps> = ({ item }) => {
           width: "100%",
         }}
       />
+      <WatchedIndicator item={item} />
     </View>
   );
 };

components/tv/TVPosterCard.tsx

@@ -12,7 +12,10 @@ import {
 } from "react-native";
 import { ProgressBar } from "@/components/common/ProgressBar";
 import { Text } from "@/components/common/Text";
-import { WatchedIndicator } from "@/components/WatchedIndicator";
+import {
+  UnplayedCountBadge,
+  WatchedIndicator,
+} from "@/components/WatchedIndicator";
 import { useScaledTVPosterSizes } from "@/constants/TVPosterSizes";
 import { useScaledTVTypography } from "@/constants/TVTypography";
 import {
@@ -427,6 +430,12 @@ export const TVPosterCard: React.FC<TVPosterCardProps> = ({
           />
           {PlayButtonOverlay}
           {NowPlayingBadge}
+          {/*
+            The glass view draws the watched checkmark natively but cannot show
+            an unplayed-episode count, so render it as an RN overlay on top.
+            Returns null when not applicable (non-series / fully watched).
+          */}
+          <UnplayedCountBadge item={item} />
         </View>
       );
     }