From 00e3a3a9024155513f3b4e98b7dddae9e94cfe0f Mon Sep 17 00:00:00 2001
From: Randall Stillwell <me@randallstillwell.com>
Date: Sun, 27 Jul 2025 14:02:33 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=96=BC=EF=B8=8F=20Update=20Collection=20T?=
 =?UTF-8?q?humbnails=20to=20Card=20Layout=20Design?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✨ New Thumbnail Design:
- Clean white card boxes representing collection cards
- Main card (2/3 width) + 4 smaller cards in 2x2 grid (1/3 width)
- Subtle borders and shadows for card-like appearance
- Consistent rounded corners (lg for main, md for grid cards)

🎨 Visual Improvements:
- Background uses --bg-tertiary for consistent theming
- White card containers with --border colored borders
- Proper padding (p-3) and gap spacing (gap-2)
- Shadow-sm for subtle depth on card boxes

😢 Enhanced Placeholder:
- Crying emoji (😢) when no cards or thumbnails exist
- Larger emoji size (text-6xl) for better visibility
- 'No cards yet' message for user guidance

🔧 Technical Updates:
- Removed rarity glow effects and overlays for cleaner look
- Simplified card rendering with focus on layout structure
- Consistent implementation across both pages:
  - /collections (My Collections)
  - /community/collections (Community Collections)

📱 User Experience:
- Clear visual representation of collection contents
- Custom thumbnails still override card layout when uploaded
- Empty card slots show as clean white boxes
- Maintains responsive design and accessibility

The thumbnail design now matches the mockup perfectly! 🎯
---
 pages/collections.js           | 54 +++++++++++++---------------------
 pages/community/collections.js | 44 ++++++++++-----------------
 2 files changed, 37 insertions(+), 61 deletions(-)

diff --git a/pages/collections.js b/pages/collections.js
index de93bdd..ef3740f 100644
--- a/pages/collections.js
+++ b/pages/collections.js
@@ -249,9 +249,10 @@ export default function Collections() {
     return new Date(dateString).toLocaleDateString();
   };
 
+  // Collection thumbnail component
   const CollectionThumbnail = ({ collection }) => {
     const { thumbnails = [], image } = collection;
-    
+
     // If collection has a custom hero image, use it
     if (image) {
       return (
@@ -265,69 +266,56 @@ export default function Collections() {
       );
     }
 
-    // If no thumbnails available, show placeholder
+    // If no thumbnails available, show crying emoji placeholder
     if (!thumbnails || thumbnails.length === 0) {
       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">
-            <div className="text-4xl mb-2">📦</div>
+            <div className="text-6xl mb-2">😢</div>
             <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>No cards yet</p>
           </div>
         </div>
       );
     }
 
-    // Show main card (rarest) and grid of 4 others
-    const mainCard = thumbnails[0]; // Rarest card
-    const gridCards = thumbnails.slice(1, 5); // Next 4 cards
+    // Show card layout with white boxes
+    const mainCard = thumbnails[0]; // Featured card (largest)
+    const gridCards = thumbnails.slice(1, 5); // Up to 4 additional cards
 
     return (
-      <div className="w-full h-48 rounded-xl overflow-hidden mb-4 flex gap-2">
-        {/* Main card (rarest) - takes up 2/3 of the space */}
-        <div className="flex-2 h-full relative group">
+      <div className="w-full h-48 rounded-xl overflow-hidden mb-4 p-3 flex gap-2" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
+        {/* Main card (left side - 2/3 width) */}
+        <div className="flex-2 h-full">
           {mainCard ? (
-            <div className="relative h-full">
+            <div className="w-full h-full bg-white rounded-lg overflow-hidden shadow-sm border" style={{ borderColor: 'var(--border)' }}>
               <img 
-                src={mainCard.image_url || mainCard.stock_image_url || '/placeholder-card.png'} 
+                src={mainCard.image_url || mainCard.stock_image_url} 
                 alt={mainCard.name}
-                className="w-full h-full object-cover rounded-lg"
+                className="w-full h-full object-cover"
               />
-              {/* Rarity glow effect */}
-              <div className={`absolute inset-0 rounded-lg rarity-glow-${mainCard.rarity?.toLowerCase() || 'common'}`}></div>
-              {/* Card name overlay */}
-              <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-2 rounded-b-lg">
-                <p className="text-white text-xs font-medium truncate">{mainCard.name}</p>
-                <p className="text-white/80 text-xs capitalize">{mainCard.rarity}</p>
-              </div>
             </div>
           ) : (
-            <div className="w-full h-full bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center">
-              <span className="text-gray-400 text-xs">No image</span>
-            </div>
+            <div className="w-full h-full bg-white rounded-lg border" style={{ borderColor: 'var(--border)' }}></div>
           )}
         </div>
 
-        {/* Grid of 4 other cards - takes up 1/3 of the space */}
+        {/* Grid of smaller cards (right side - 1/3 width) */}
         <div className="flex-1 h-full">
-          <div className="grid grid-cols-2 gap-1 h-full">
+          <div className="grid grid-cols-2 gap-2 h-full">
             {Array.from({ length: 4 }).map((_, index) => {
               const card = gridCards[index];
               return (
-                <div key={index} className="relative group">
+                <div key={index} className="relative">
                   {card ? (
-                    <div className="relative h-full">
+                    <div className="w-full h-full bg-white rounded-md overflow-hidden shadow-sm border" style={{ borderColor: 'var(--border)' }}>
                       <img 
-                        src={card.image_url || card.stock_image_url || '/placeholder-card.png'} 
+                        src={card.image_url || card.stock_image_url} 
                         alt={card.name}
-                        className="w-full h-full object-cover rounded"
+                        className="w-full h-full object-cover"
                       />
-                      {/* Subtle rarity glow for grid cards */}
-                      <div className={`absolute inset-0 rounded rarity-glow-${card.rarity?.toLowerCase() || 'common'} opacity-50`}></div>
                     </div>
                   ) : (
-                    <div className="w-full h-full bg-gray-100 dark:bg-gray-800 rounded flex items-center justify-center">
-                      <span className="text-gray-300 text-xs">+</span>
-                    </div>
+                    <div className="w-full h-full bg-white rounded-md border" style={{ borderColor: 'var(--border)' }}></div>
                   )}
                 </div>
               );
diff --git a/pages/community/collections.js b/pages/community/collections.js
index 5d68878..9a3740a 100644
--- a/pages/community/collections.js
+++ b/pages/community/collections.js
@@ -122,7 +122,7 @@ export default function CommunityCollections() {
     // If collection has a custom hero image, use it
     if (image) {
       return (
-        <div className="w-full h-48 rounded-xl overflow-hidden mb-4">
+        <div className="w-full h-48 rounded-xl overflow-hidden mb-4" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
           <img 
             src={image} 
             alt={collection.name}
@@ -132,68 +132,56 @@ export default function CommunityCollections() {
       );
     }
 
-    // If no thumbnails available, show placeholder
+    // If no thumbnails available, show crying emoji placeholder
     if (!thumbnails || thumbnails.length === 0) {
       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">
-            <div className="text-4xl mb-2">📦</div>
+            <div className="text-6xl mb-2">😢</div>
             <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>No cards yet</p>
           </div>
         </div>
       );
     }
 
-    // Show main card (rarest) and grid of 4 others
-    const mainCard = thumbnails[0]; // Rarest card
-    const gridCards = thumbnails.slice(1, 5); // Next 4 cards
+    // Show card layout with white boxes
+    const mainCard = thumbnails[0]; // Featured card (largest)
+    const gridCards = thumbnails.slice(1, 5); // Up to 4 additional cards
 
     return (
-      <div className="w-full h-48 rounded-xl overflow-hidden mb-4 flex gap-2">
-        {/* Main card (rarest) - takes up 2/3 of the space */}
-        <div className="flex-2 h-full relative group">
+      <div className="w-full h-48 rounded-xl overflow-hidden mb-4 p-3 flex gap-2" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
+        {/* Main card (left side - 2/3 width) */}
+        <div className="flex-2 h-full">
           {mainCard ? (
-            <div className="w-full h-full relative">
+            <div className="w-full h-full bg-white rounded-lg overflow-hidden shadow-sm border" style={{ borderColor: 'var(--border)' }}>
               <img 
                 src={mainCard.image_url || mainCard.stock_image_url} 
                 alt={mainCard.name}
                 className="w-full h-full object-cover"
               />
-              {/* Rarity glow effect */}
-              <div className={`absolute inset-0 rarity-glow-${mainCard.rarity?.toLowerCase()}`}></div>
-              {/* Card name overlay */}
-              <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-2">
-                <p className="text-white text-xs font-medium truncate">{mainCard.name}</p>
-              </div>
             </div>
           ) : (
-            <div className="w-full h-full flex items-center justify-center" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
-              <div className="text-2xl">🃏</div>
-            </div>
+            <div className="w-full h-full bg-white rounded-lg border" style={{ borderColor: 'var(--border)' }}></div>
           )}
         </div>
 
-        {/* Grid of 4 other cards - takes up 1/3 of the space */}
+        {/* Grid of smaller cards (right side - 1/3 width) */}
         <div className="flex-1 h-full">
-          <div className="grid grid-cols-2 gap-1 h-full">
+          <div className="grid grid-cols-2 gap-2 h-full">
             {Array.from({ length: 4 }).map((_, index) => {
               const card = gridCards[index];
               return (
                 <div key={index} className="relative">
                   {card ? (
-                    <div className="w-full h-full relative">
+                    <div className="w-full h-full bg-white rounded-md overflow-hidden shadow-sm border" style={{ borderColor: 'var(--border)' }}>
                       <img 
                         src={card.image_url || card.stock_image_url} 
                         alt={card.name}
-                        className="w-full h-full object-cover rounded"
+                        className="w-full h-full object-cover"
                       />
-                      {/* Subtle rarity glow */}
-                      <div className={`absolute inset-0 rarity-glow-${card.rarity?.toLowerCase()} opacity-50 rounded`}></div>
                     </div>
                   ) : (
-                    <div className="w-full h-full flex items-center justify-center rounded" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
-                      <div className="text-lg opacity-50">🃏</div>
-                    </div>
+                    <div className="w-full h-full bg-white rounded-md border" style={{ borderColor: 'var(--border)' }}></div>
                   )}
                 </div>
               );