From ff51ad01cedeb54a6eccd2e4096b0d727598ee93 Mon Sep 17 00:00:00 2001
From: Peifan Li <frank.li.oxygen@gmail.com>
Date: Sat, 22 Nov 2025 20:00:00 -0500
Subject: [PATCH] style: Update VideoCard component props and logic

---
 frontend/src/App.tsx                  | 2 +-
 frontend/src/components/VideoCard.tsx | 6 ++++--
 frontend/src/pages/CollectionPage.tsx | 1 +
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 3bbb681..c096f77 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -314,7 +314,7 @@ function App() {
             }
 
             setIsSearchMode(false);
-            showSnackbar('Video added successfully');
+            showSnackbar('Video downloading');
             return { success: true };
         } catch (err: any) {
             console.error('Error downloading video:', err);
diff --git a/frontend/src/components/VideoCard.tsx b/frontend/src/components/VideoCard.tsx
index 9be2e85..99a29af 100644
--- a/frontend/src/components/VideoCard.tsx
+++ b/frontend/src/components/VideoCard.tsx
@@ -27,13 +27,15 @@ interface VideoCardProps {
     collections?: Collection[];
     onDeleteVideo?: (id: string) => Promise<void>;
     showDeleteButton?: boolean;
+    disableCollectionGrouping?: boolean;
 }
 
 const VideoCard: React.FC<VideoCardProps> = ({
     video,
     collections = [],
     onDeleteVideo,
-    showDeleteButton = false
+    showDeleteButton = false,
+    disableCollectionGrouping = false
 }) => {
     const navigate = useNavigate();
     const theme = useTheme();
@@ -90,7 +92,7 @@ const VideoCard: React.FC<VideoCardProps> = ({
     );
 
     // Check if this video is the first in any collection
-    const isFirstInAnyCollection = videoCollections.some(collection =>
+    const isFirstInAnyCollection = !disableCollectionGrouping && videoCollections.some(collection =>
         collection.videos[0] === video.id
     );
 
diff --git a/frontend/src/pages/CollectionPage.tsx b/frontend/src/pages/CollectionPage.tsx
index 2c2273e..478ef87 100644
--- a/frontend/src/pages/CollectionPage.tsx
+++ b/frontend/src/pages/CollectionPage.tsx
@@ -131,6 +131,7 @@ const CollectionPage: React.FC<CollectionPageProps> = ({ collections, videos, on
                                 collections={collections}
                                 onDeleteVideo={onDeleteVideo}
                                 showDeleteButton={true}
+                                disableCollectionGrouping={true}
                             />
                         </Grid>
                     ))}