🔍 Added Debug Logging for TCG Tags and CollaboratorFacepile

- Made gameStats calculation dynamic to show all games present
- Added console logging to debug missing TCG tags
- Added debug logging to CollaboratorFacepile component
- Added fallback display for missing creator email
- This will help identify why the facepile and tags aren't showing

components/CollaboratorFacepile.js

@@ -73,6 +73,14 @@ export default function CollaboratorFacepile({ collectionId, creatorEmail }) {
     }
   };
 
+  console.log('CollaboratorFacepile render:', { 
+    collectionId, 
+    creatorEmail, 
+    collaborators: collaborators.length, 
+    allUsers: allUsers.length,
+    loading 
+  });
+
   return (
     <div className="flex items-center space-x-2">
       <span className="text-sm" style={{ color: 'var(--text-secondary)' }}>

pages/collection/[id].js

@@ -299,12 +299,17 @@ export default function CollectionView() {
     return acc;
   }, {});
 
-  // Get game display names and counts
-  const gameStats = {
-    'MTG': groupedCards['MTG']?.length || 0,
-    'Lorcana': groupedCards['Lorcana']?.length || 0,
-    'Pokemon': groupedCards['Pokemon']?.length || 0
-  };
+  // Debug: Log the grouped cards to see what games we have
+  console.log('Grouped cards:', groupedCards);
+  console.log('Available games:', Object.keys(groupedCards));
+
+  // Get game display names and counts - make it more flexible
+  const gameStats = {};
+  Object.keys(groupedCards).forEach(game => {
+    if (game && game !== 'Other') {
+      gameStats[game] = groupedCards[game].length;
+    }
+  });
 
   if (loading) {
     return (
@@ -393,10 +398,17 @@ export default function CollectionView() {
             
             {/* Creator and Stats */}
             <div className="flex items-center space-x-6 text-sm" style={{ color: 'var(--text-secondary)' }}>
-              <CollaboratorFacepile 
-                collectionId={id} 
-                creatorEmail={collection.creator_email} 
-              />
+              {console.log('Collection data for facepile:', { id, creator_email: collection.creator_email, collection })}
+              {collection.creator_email ? (
+                <CollaboratorFacepile 
+                  collectionId={id} 
+                  creatorEmail={collection.creator_email} 
+                />
+              ) : (
+                <span className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+                  Crafted by Unknown User
+                </span>
+              )}
               <div>Cards: <span className="font-medium">{cards.length}</span></div>
               <div>Cost: <span className="font-medium">${collection.totalValue || '0'}</span></div>
             </div>