From e542932fbbf40ba7031615e69d0f4672bed64db0 Mon Sep 17 00:00:00 2001
From: Randall Stillwell <me@randallstillwell.com>
Date: Sun, 27 Jul 2025 15:03:11 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Clean=20Up=20Debug=20Logs=20&=20?=
 =?UTF-8?q?Force=20Component=20Refresh?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Removed all debug console.log statements and cleaned up the CollectionThumbnail component. The design should now consistently show:

✨ New Design:
- Large main card (left side)
- 2x2 grid of smaller cards (right side)
- Real card images from the thumbnails API
- White placeholder boxes for missing cards

🔧 Component is ready for consistent rendering of the new thumbnail layout.
---
 pages/collections.js | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

diff --git a/pages/collections.js b/pages/collections.js
index 325a9df..640dd09 100644
--- a/pages/collections.js
+++ b/pages/collections.js
@@ -249,14 +249,10 @@ export default function Collections() {
     return new Date(dateString).toLocaleDateString();
   };
 
-  // Collection thumbnail component
+  // Collection thumbnail component - Updated design with card images
   const CollectionThumbnail = ({ collection }) => {
     const { thumbnails = [], image } = collection;
 
-    console.log('🔍 CollectionThumbnail - collection:', collection.name);
-    console.log('🔍 CollectionThumbnail - thumbnails:', thumbnails);
-    console.log('🔍 CollectionThumbnail - image:', image);
-
     // If there's a custom image, show it
     if (image) {
       return (
@@ -272,7 +268,6 @@ export default function Collections() {
 
     // If no cards, show crying emoji
     if (!thumbnails || thumbnails.length === 0) {
-      console.log('🔍 CollectionThumbnail - showing crying emoji (no thumbnails)');
       return (
         <div className="w-full h-48 rounded-xl mb-4 flex items-center justify-center" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
           <div className="text-center">
@@ -286,9 +281,6 @@ export default function Collections() {
     const mainCard = thumbnails[0];
     const gridCards = thumbnails.slice(1, 5); // Get up to 4 cards for the 2x2 grid
 
-    console.log('🔍 CollectionThumbnail - mainCard:', mainCard);
-    console.log('🔍 CollectionThumbnail - gridCards:', gridCards);
-
     return (
       <div className="w-full h-48 rounded-xl overflow-hidden mb-4 p-3 flex gap-2" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
         {/* Main card (larger, left side) */}
@@ -299,8 +291,6 @@ export default function Collections() {
                 src={mainCard.image_url || mainCard.stock_image_url}
                 alt={mainCard.name}
                 className="w-full h-full object-cover"
-                onError={(e) => console.log('🔍 Image load error:', e.target.src)}
-                onLoad={() => console.log('🔍 Image loaded successfully:', mainCard.image_url || mainCard.stock_image_url)}
               />
             </div>
           ) : (
@@ -321,8 +311,6 @@ export default function Collections() {
                         src={card.image_url || card.stock_image_url}
                         alt={card.name}
                         className="w-full h-full object-cover"
-                        onError={(e) => console.log('🔍 Grid image load error:', e.target.src)}
-                        onLoad={() => console.log('🔍 Grid image loaded successfully:', card.image_url || card.stock_image_url)}
                       />
                     </div>
                   ) : (