From 3e55dff5423534f29a29409366c05beaf6222681 Mon Sep 17 00:00:00 2001
From: CrissZollo <depth-broaden-oboe@duck.com>
Date: Sat, 20 Sep 2025 09:21:04 +0200
Subject: [PATCH] Fixed mark/unmark as watched (long press) and adding/removing
 from library (long press)

---
 src/components/home/ContentItem.tsx | 21 +++++++++++++++++----
 src/components/home/DropUpMenu.tsx  | 13 +++++++++----
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/components/home/ContentItem.tsx b/src/components/home/ContentItem.tsx
index f4ff1bc..4ad0774 100644
--- a/src/components/home/ContentItem.tsx
+++ b/src/components/home/ContentItem.tsx
@@ -59,6 +59,17 @@ const POSTER_WIDTH = posterLayout.posterWidth;
 const PLACEHOLDER_BLURHASH = 'LEHV6nWB2yk8pyo0adR*.7kCMdnj';
 
 const ContentItem = ({ item, onPress, shouldLoadImage: shouldLoadImageProp, deferMs = 0 }: ContentItemProps) => {
+  // Track inLibrary status locally to force re-render
+  const [inLibrary, setInLibrary] = useState(!!item.inLibrary);
+
+  useEffect(() => {
+    // Subscribe to library updates and update local state if this item's status changes
+    const unsubscribe = catalogService.subscribeToLibraryUpdates((items) => {
+      const found = items.find((libItem) => libItem.id === item.id && libItem.type === item.type);
+      setInLibrary(!!found);
+    });
+    return () => unsubscribe();
+  }, [item.id, item.type]);
   const [menuVisible, setMenuVisible] = useState(false);
   const [isWatched, setIsWatched] = useState(false);
   const [imageLoaded, setImageLoaded] = useState(false);
@@ -95,7 +106,7 @@ const ContentItem = ({ item, onPress, shouldLoadImage: shouldLoadImageProp, defe
   const handleOptionSelect = useCallback((option: string) => {
     switch (option) {
       case 'library':
-        if (item.inLibrary) {
+        if (inLibrary) {
           catalogService.removeFromLibrary(item.type, item.id);
         } else {
           catalogService.addToLibrary(item);
@@ -109,7 +120,7 @@ const ContentItem = ({ item, onPress, shouldLoadImage: shouldLoadImageProp, defe
       case 'share':
         break;
     }
-  }, [item]);
+  }, [item, inLibrary]);
 
   const handleMenuClose = useCallback(() => {
     setMenuVisible(false);
@@ -238,7 +249,7 @@ const ContentItem = ({ item, onPress, shouldLoadImage: shouldLoadImageProp, defe
               </View>
             )}
             {imageError && (
-              <View style={[styles.loadingOverlay, { backgroundColor: currentTheme.colors.elevation1 }]}>
+              <View style={[styles.loadingOverlay, { backgroundColor: currentTheme.colors.elevation1 }]}> 
                 <MaterialIcons name="broken-image" size={24} color={currentTheme.colors.textMuted} />
               </View>
             )}
@@ -247,7 +258,7 @@ const ContentItem = ({ item, onPress, shouldLoadImage: shouldLoadImageProp, defe
                 <MaterialIcons name="check-circle" size={22} color={currentTheme.colors.success} />
               </View>
             )}
-            {item.inLibrary && (
+            {inLibrary && (
               <View style={styles.libraryBadge}>
                 <MaterialIcons name="bookmark" size={16} color={currentTheme.colors.white} />
               </View>
@@ -266,6 +277,8 @@ const ContentItem = ({ item, onPress, shouldLoadImage: shouldLoadImageProp, defe
         onClose={handleMenuClose}
         item={item}
         onOptionSelect={handleOptionSelect}
+        isSaved={inLibrary}
+        isWatched={isWatched}
       />
     </>
   );
diff --git a/src/components/home/DropUpMenu.tsx b/src/components/home/DropUpMenu.tsx
index 7431655..d84ca62 100644
--- a/src/components/home/DropUpMenu.tsx
+++ b/src/components/home/DropUpMenu.tsx
@@ -33,9 +33,11 @@ interface DropUpMenuProps {
   onClose: () => void;
   item: StreamingContent;
   onOptionSelect: (option: string) => void;
+  isSaved?: boolean; // allow parent to pass saved status directly
+  isWatched?: boolean; // allow parent to pass watched status directly
 }
 
-export const DropUpMenu = ({ visible, onClose, item, onOptionSelect }: DropUpMenuProps) => {
+export const DropUpMenu = ({ visible, onClose, item, onOptionSelect, isSaved: isSavedProp, isWatched: isWatchedProp }: DropUpMenuProps) => {
   const translateY = useSharedValue(300);
   const opacity = useSharedValue(0);
   const isDarkMode = useColorScheme() === 'dark';
@@ -87,15 +89,18 @@ export const DropUpMenu = ({ visible, onClose, item, onOptionSelect }: DropUpMen
     borderTopRightRadius: 24,
   }));
 
+  // Robustly determine if the item is in the library (saved)
+  const isSaved = typeof isSavedProp === 'boolean' ? isSavedProp : !!item.inLibrary;
+  const isWatched = !!isWatchedProp;
   const menuOptions = [
     {
-      icon: item.inLibrary ? 'bookmark' : 'bookmark-border',
-      label: item.inLibrary ? 'Remove from Library' : 'Add to Library',
+      icon: isSaved ? 'bookmark' : 'bookmark-border',
+      label: isSaved ? 'Remove from Library' : 'Add to Library',
       action: 'library'
     },
     {
       icon: 'check-circle',
-      label: 'Mark as Watched',
+      label: isWatched ? 'Mark as Unwatched' : 'Mark as Watched',
       action: 'watched'
     },
     {