feat: add favorites screen and integrate it into navigation; enhance detail screen with favorite toggle functionality

app/_layout.tsx

@@ -63,7 +63,7 @@ export default function RootLayout() {
         <Stack.Screen name="search" options={{ headerShown: false }} />
         <Stack.Screen name="live" options={{ headerShown: false }} />
         <Stack.Screen name="settings" options={{ headerShown: false }} />
-        {/* <Stack.Screen name="favorites" options={{ headerShown: false }} /> */}
+        <Stack.Screen name="favorites" options={{ headerShown: false }} />
         <Stack.Screen name="+not-found" />
       </Stack>
       <Toast />

app/detail.tsx

@@ -77,17 +77,23 @@ export default function DetailScreen() {
         <View style={styles.topContainer}>
           <Image source={{ uri: detail.poster }} style={styles.poster} />
           <View style={styles.infoContainer}>
-            <ThemedText style={styles.title} numberOfLines={1}>
-              {detail.title}
-            </ThemedText>
+            <View style={styles.titleContainer}>
+              <ThemedText style={styles.title} numberOfLines={1} ellipsizeMode="tail">
+                {detail.title}
+              </ThemedText>
+              <StyledButton onPress={toggleFavorite} variant="ghost" style={styles.favoriteButton}>
+                <FontAwesome
+                  name={isFavorited ? "heart" : "heart-o"}
+                  size={24}
+                  color={isFavorited ? "#FFD700" : "#ccc"}
+                />
+              </StyledButton>
+            </View>
             <View style={styles.metaContainer}>
               <ThemedText style={styles.metaText}>{detail.year}</ThemedText>
               <ThemedText style={styles.metaText}>{detail.type_name}</ThemedText>
             </View>
-            {/* <Pressable onPress={toggleFavorite} style={styles.favoriteButton}>
-              <FontAwesome name={isFavorited ? "star" : "star-o"} size={24} color={isFavorited ? "#FFD700" : "#ccc"} />
-              <ThemedText style={styles.favoriteButtonText}>{isFavorited ? "已收藏" : "收藏"}</ThemedText>
-            </Pressable> */}
+
             <ScrollView style={styles.descriptionScrollView}>
               <ThemedText style={styles.description}>{detail.desc}</ThemedText>
             </ScrollView>
@@ -167,11 +173,15 @@ const styles = StyleSheet.create({
     marginLeft: 20,
     justifyContent: "flex-start",
   },
+  titleContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
   title: {
+    paddingTop: 16,
     fontSize: 28,
     fontWeight: "bold",
-    marginBottom: 10,
-    paddingTop: 20,
+    flexShrink: 1,
   },
   metaContainer: {
     flexDirection: "row",
@@ -191,13 +201,9 @@ const styles = StyleSheet.create({
     lineHeight: 22,
   },
   favoriteButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    marginTop: 10,
     padding: 10,
-    backgroundColor: "rgba(255, 255, 255, 0.1)",
-    borderRadius: 5,
-    alignSelf: "flex-start",
+    marginLeft: 10,
+    backgroundColor: "transparent",
   },
   favoriteButtonText: {
     marginLeft: 8,

app/favorites.tsx

@@ -1,27 +1,19 @@
 import React, { useEffect } from "react";
-import { View, FlatList, StyleSheet, ActivityIndicator, Image, Pressable } from "react-native";
-import { useRouter } from "expo-router";
+import { View, FlatList, StyleSheet, ActivityIndicator } from "react-native";
 import { ThemedView } from "@/components/ThemedView";
 import { ThemedText } from "@/components/ThemedText";
 import useFavoritesStore from "@/stores/favoritesStore";
 import { Favorite } from "@/services/storage";
+import VideoCard from "@/components/VideoCard.tv";
+import { api } from "@/services/api";
 
 export default function FavoritesScreen() {
-  const router = useRouter();
   const { favorites, loading, error, fetchFavorites } = useFavoritesStore();
 
   useEffect(() => {
     fetchFavorites();
   }, [fetchFavorites]);
 
-  const handlePress = (favorite: Favorite & { key: string }) => {
-    const [source, id] = favorite.key.split("+");
-    router.push({
-      pathname: "/detail",
-      params: { q: favorite.title, source, id },
-    });
-  };
-
   if (loading) {
     return (
       <ThemedView style={styles.centered}>
@@ -46,17 +38,22 @@ export default function FavoritesScreen() {
     );
   }
 
-  const renderItem = ({ item }: { item: Favorite & { key: string } }) => (
-    <Pressable onPress={() => handlePress(item)} style={styles.itemContainer}>
-      <Image source={{ uri: item.poster }} style={styles.poster} />
-      <View style={styles.infoContainer}>
-        <ThemedText style={styles.title} numberOfLines={1}>
-          {item.title}
-        </ThemedText>
-        <ThemedText style={styles.year}>{item.year}</ThemedText>
-      </View>
-    </Pressable>
-  );
+  const renderItem = ({ item }: { item: Favorite & { key: string } }) => {
+    const [source, id] = item.key.split("+");
+    return (
+      <VideoCard
+        id={id}
+        source={source}
+        title={item.title}
+        sourceName={item.source_name}
+        poster={item.cover}
+        year={item.year}
+        api={api}
+        episodeIndex={1}
+        progress={0}
+      />
+    );
+  };
 
   return (
     <ThemedView style={styles.container}>
@@ -67,7 +64,7 @@ export default function FavoritesScreen() {
         data={favorites}
         renderItem={renderItem}
         keyExtractor={(item) => item.key}
-        numColumns={3}
+        numColumns={5}
         contentContainerStyle={styles.list}
       />
     </ThemedView>
@@ -99,26 +96,4 @@ const styles = StyleSheet.create({
   list: {
     padding: 10,
   },
-  itemContainer: {
-    flex: 1,
-    margin: 10,
-    alignItems: "center",
-  },
-  poster: {
-    width: 120,
-    height: 180,
-    borderRadius: 8,
-  },
-  infoContainer: {
-    marginTop: 8,
-    alignItems: "center",
-  },
-  title: {
-    fontSize: 16,
-    fontWeight: "bold",
-  },
-  year: {
-    fontSize: 14,
-    color: "#888",
-  },
 });

app/index.tsx

@@ -124,9 +124,9 @@ export default function HomeScreen() {
           </Pressable>
         </View>
         <View style={styles.rightHeaderButtons}>
-          {/* <StyledButton style={styles.searchButton} onPress={() => router.push("/favorites")} variant="ghost">
+          <StyledButton style={styles.searchButton} onPress={() => router.push("/favorites")} variant="ghost">
             <Heart color={colorScheme === "dark" ? "white" : "black"} size={24} />
-          </StyledButton> */}
+          </StyledButton>
           <StyledButton
             style={styles.searchButton}
             onPress={() => router.push({ pathname: "/search" })}

app/settings.tsx

@@ -6,18 +6,17 @@ import { ThemedView } from "@/components/ThemedView";
 import { StyledButton } from "@/components/StyledButton";
 import { useThemeColor } from "@/hooks/useThemeColor";
 import { useSettingsStore } from "@/stores/settingsStore";
-import useAuthStore from "@/stores/authStore";
+// import useAuthStore from "@/stores/authStore";
 import { useRemoteControlStore } from "@/stores/remoteControlStore";
 import { APIConfigSection } from "@/components/settings/APIConfigSection";
 import { LiveStreamSection } from "@/components/settings/LiveStreamSection";
 import { RemoteInputSection } from "@/components/settings/RemoteInputSection";
-import { VideoSourceSection } from "@/components/settings/VideoSourceSection";
+// import { VideoSourceSection } from "@/components/settings/VideoSourceSection";
 import Toast from "react-native-toast-message";
 
 export default function SettingsScreen() {
   const { loadSettings, saveSettings, setApiBaseUrl, setM3uUrl } = useSettingsStore();
   const { lastMessage } = useRemoteControlStore();
-  const { isLoggedIn, logout } = useAuthStore();
   const backgroundColor = useThemeColor({}, "background");
 
   const [hasChanges, setHasChanges] = useState(false);