From 985136ac3fa8267da7574b3608d88f7891f4c144 Mon Sep 17 00:00:00 2001
From: Randall Stillwell <me@randallstillwell.com>
Date: Fri, 25 Jul 2025 17:19:52 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Improved=20Collection=20Detail?=
 =?UTF-8?q?=20UI=20Hierarchy?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Enhanced visual hierarchy and button styling:

✅ Repositioned TCG Tags:
- Moved from header to under description
- Shows only games with cards (dynamic filtering)
- Clean rounded blue tags for better UX

🎯 Improved Button Hierarchy:
- Changed Generate AI Image to ghost outline button
- Changed Invite Collaborator to ghost outline button
- Changed view toggle to white buttons with shadow
- Add Cards remains the only primary purple button

🎨 Visual Improvements:
- Cleaner header with just back button
- Better information flow: title → description → tags → stats
- Consistent ghost styling for secondary actions
- Primary action (Add Cards) now stands out clearly

📱 Enhanced UX:
- TCG tags dynamically show only relevant games
- Clear visual hierarchy guides user attention
- Consistent button styling throughout interface
- Better spacing and information organization

Result: Cleaner, more focused collection interface! 🚀
---
 pages/collection/[id].js | 43 +++++++++++++++++++---------------------
 1 file changed, 20 insertions(+), 23 deletions(-)

diff --git a/pages/collection/[id].js b/pages/collection/[id].js
index 130ac06..ed61b6a 100644
--- a/pages/collection/[id].js
+++ b/pages/collection/[id].js
@@ -189,8 +189,8 @@ export default function CollectionView() {
         {/* Header */}
         <div className="p-6 border-b" style={{ backgroundColor: 'var(--bg-secondary)', borderColor: 'var(--border)' }}>
           <div className="flex items-center justify-between mb-6">
-            {/* Back button and TCG tabs */}
-            <div className="flex items-center space-x-6">
+            {/* Back button */}
+            <div className="flex items-center">
               <Link href="/collections">
                 <button className="flex items-center text-sm font-medium hover:underline" style={{ color: 'var(--text-secondary)' }}>
                   <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -199,23 +199,6 @@ export default function CollectionView() {
                   Back to collections
                 </button>
               </Link>
-              
-              {/* TCG Tabs */}
-              <div className="flex space-x-1">
-                {['MTG', 'Lorcana', 'Pokemon'].map((tcg) => (
-                  <button
-                    key={tcg}
-                    onClick={() => setSelectedTCG(tcg)}
-                    className={`px-3 py-1 text-xs font-medium rounded ${
-                      selectedTCG === tcg 
-                        ? 'bg-blue-100 text-blue-800' 
-                        : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
-                    }`}
-                  >
-                    {tcg}
-                  </button>
-                ))}
-              </div>
             </div>
 
             {/* Action buttons */}
@@ -223,7 +206,7 @@ export default function CollectionView() {
               <button className="px-4 py-2 text-sm font-medium border rounded-lg hover:bg-gray-50" style={{ borderColor: 'var(--border)', color: 'var(--text-primary)' }}>
                 Upload Image
               </button>
-              <button className="px-4 py-2 text-sm font-medium bg-purple-600 text-white rounded-lg hover:bg-purple-700">
+              <button className="px-4 py-2 text-sm font-medium border rounded-lg hover:bg-gray-50" style={{ borderColor: 'var(--border)', color: 'var(--text-primary)' }}>
                 🪄 Generate AI Image
               </button>
             </div>
@@ -238,6 +221,20 @@ export default function CollectionView() {
               {collection.description}
             </p>
             
+            {/* TCG Tags */}
+            <div className="flex items-center space-x-2 mb-4">
+              {Object.entries(gameStats).map(([game, count]) => 
+                count > 0 ? (
+                  <span
+                    key={game}
+                    className="px-3 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800"
+                  >
+                    {game}
+                  </span>
+                ) : null
+              )}
+            </div>
+            
             {/* Creator and Stats */}
             <div className="flex items-center space-x-6 text-sm" style={{ color: 'var(--text-secondary)' }}>
               <div className="flex items-center space-x-2">
@@ -297,7 +294,7 @@ export default function CollectionView() {
             </div>
 
             <div className="flex items-center space-x-4">
-              <button className="px-4 py-2 text-sm font-medium bg-blue-600 text-white rounded-lg hover:bg-blue-700">
+              <button className="px-4 py-2 text-sm font-medium border rounded-lg hover:bg-gray-50" style={{ borderColor: 'var(--border)', color: 'var(--text-primary)' }}>
                 📧 Invite Collaborator
               </button>
               
@@ -403,7 +400,7 @@ export default function CollectionView() {
               <div className="flex rounded-lg border" style={{ borderColor: 'var(--border)' }}>
                 <button
                   onClick={() => setViewMode('grid')}
-                  className={`p-2 rounded-l-lg ${viewMode === 'grid' ? 'bg-purple-600 text-white' : 'bg-transparent'}`}
+                  className={`p-2 rounded-l-lg ${viewMode === 'grid' ? 'bg-white text-gray-900 shadow-sm' : 'bg-transparent hover:bg-gray-50'}`}
                   style={viewMode !== 'grid' ? { color: 'var(--text-secondary)' } : {}}
                 >
                   <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -412,7 +409,7 @@ export default function CollectionView() {
                 </button>
                 <button
                   onClick={() => setViewMode('list')}
-                  className={`p-2 rounded-r-lg ${viewMode === 'list' ? 'bg-purple-600 text-white' : 'bg-transparent'}`}
+                  className={`p-2 rounded-r-lg ${viewMode === 'list' ? 'bg-white text-gray-900 shadow-sm' : 'bg-transparent hover:bg-gray-50'}`}
                   style={viewMode !== 'list' ? { color: 'var(--text-secondary)' } : {}}
                 >
                   <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">