From 1387ecaccb1339f4d2b55e7d9fdf935a5dc84ddf Mon Sep 17 00:00:00 2001
From: Randall Stillwell <me@randallstillwell.com>
Date: Fri, 25 Jul 2025 23:55:54 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Redesigned=20Card=20Hover=20with?=
 =?UTF-8?q?=20Side=20Information=20Panel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✨ New Side Panel Design:
- Information panel slides out from the right side of cards
- 500ms hover delay to prevent accidental triggers
- 320px wide panel with comprehensive card details
- Smooth slide-in animation with backdrop blur effect

🎯 TCG-Specific Information:
- MTG: Mana cost, Power/Toughness, Colors with proper styling
- Pokemon: HP display with yellow highlighting
- Lorcana: Ink cost, Strength/Willpower stats
- Oracle text/description for all card types

🌙 Dark Theme Support:
- Full dark mode styling for all panel elements
- Dark-aware color schemes for TCG-specific badges
- Proper contrast ratios for accessibility

⚡ Enhanced Features:
- Structured layout: Header, Body, Footer sections
- Grid-based action buttons with tooltips
- Copy card info functionality
- Responsive design (hidden on mobile/tablet)
- Better grid spacing with right padding for panels

🎨 Professional Polish:
- Backdrop blur effects for depth
- Smooth transitions with proper easing
- Z-index management for layering
- Reduced grid columns to accommodate panels

Perfect for detailed card inspection! 🃏✨
---
 components/CardItem.js | 284 ++++++++++++++++++++++++++++-------------
 pages/cards.js         |   2 +-
 styles/globals.css     |  52 +++++---
 3 files changed, 233 insertions(+), 105 deletions(-)

diff --git a/components/CardItem.js b/components/CardItem.js
index 45508c0..2259390 100644
--- a/components/CardItem.js
+++ b/components/CardItem.js
@@ -134,7 +134,7 @@ export default function CardItem({
       <div className={`relative bg-white rounded-xl border transition-all duration-300 overflow-hidden ${
         isSelected 
           ? 'border-purple-500 shadow-xl ring-2 ring-purple-200' 
-          : 'border-gray-200 group-hover:border-gray-300'
+          : 'border-gray-200 group-hover:border-gray-300 group-hover:shadow-lg'
       }`}>
         {/* Selection Checkbox */}
         <div className="absolute top-3 left-3 z-20">
@@ -187,113 +187,219 @@ export default function CardItem({
         </div>
       </div>
 
-      {/* Sliding Information Panel */}
-      <div className={`card-slide-panel absolute inset-0 bg-white rounded-xl border border-gray-200 shadow-xl transition-all duration-300 ease-out z-10 ${
+      {/* Side Hover Panel */}
+      <div className={`card-side-panel absolute left-full top-0 ml-2 w-80 h-full transition-all duration-300 ease-out z-30 ${
         isSelected 
-          ? 'translate-y-2 opacity-100' 
-          : 'translate-y-0 opacity-0 group-hover:translate-y-2 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto'
+          ? 'opacity-100 translate-x-0 pointer-events-auto' 
+          : 'opacity-0 translate-x-2 pointer-events-none group-hover:opacity-100 group-hover:translate-x-0 group-hover:pointer-events-auto delay-300 group-hover:delay-500'
       }`}>
-        {/* Card Info Content */}
-        <div className="p-4 h-full flex flex-col justify-between">
-          {/* Top Section - Card Details */}
-          <div>
-            <div className="flex items-start justify-between mb-3">
-              <h3 className="font-bold text-gray-900 text-sm leading-tight line-clamp-2 flex-1 mr-2">
+        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-2xl h-full overflow-hidden">
+          {/* Panel Header */}
+          <div className="p-4 border-b border-gray-200 dark:border-gray-700">
+            <div className="flex items-start justify-between mb-2">
+              <h3 className="font-bold text-gray-900 dark:text-white text-lg leading-tight pr-2">
                 {card.name}
               </h3>
-              <span className="text-xl font-bold text-green-600 flex-shrink-0">
+              <span className="text-2xl font-bold text-green-600 dark:text-green-400 flex-shrink-0">
                 ${card.market_price}
               </span>
             </div>
+            
+            {/* TCG-Specific Info */}
+            {card.game === 'MTG' && (
+              <div className="flex items-center space-x-3 mb-2">
+                {card.mana_cost && (
+                  <div className="flex items-center space-x-1">
+                    <span className="text-sm text-gray-600 dark:text-gray-400">Cost:</span>
+                    <span className="px-2 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded text-sm font-mono">
+                      {card.mana_cost}
+                    </span>
+                  </div>
+                )}
+                {card.power && card.toughness && (
+                  <div className="flex items-center space-x-1">
+                    <span className="text-sm text-gray-600 dark:text-gray-400">P/T:</span>
+                    <span className="px-2 py-1 bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 rounded text-sm font-bold">
+                      {card.power}/{card.toughness}
+                    </span>
+                  </div>
+                )}
+              </div>
+            )}
 
-            <div className="space-y-1 mb-4">
-              <p className="text-sm text-gray-700 font-medium">{card.set_name}</p>
-              <p className="text-sm text-gray-600">{card.rarity} • {card.card_type}</p>
-            </div>
+            {card.game === 'Pokemon' && card.power && (
+              <div className="flex items-center space-x-3 mb-2">
+                <div className="flex items-center space-x-1">
+                  <span className="text-sm text-gray-600 dark:text-gray-400">HP:</span>
+                  <span className="px-2 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 rounded text-sm font-bold">
+                    {card.power}
+                  </span>
+                </div>
+              </div>
+            )}
 
-            {/* Game Badge */}
-            <div className="mb-4">
-              <span className="px-3 py-1 text-sm font-medium rounded-full bg-blue-100 text-blue-800">
+            {card.game === 'Lorcana' && card.cmc && (
+              <div className="flex items-center space-x-3 mb-2">
+                <div className="flex items-center space-x-1">
+                  <span className="text-sm text-gray-600 dark:text-gray-400">Cost:</span>
+                  <span className="px-2 py-1 bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded text-sm font-bold">
+                    {card.cmc}
+                  </span>
+                </div>
+                {card.power && card.toughness && (
+                  <div className="flex items-center space-x-1">
+                    <span className="text-sm text-gray-600 dark:text-gray-400">Str/Will:</span>
+                    <span className="px-2 py-1 bg-amber-100 dark:bg-amber-900 text-amber-800 dark:text-amber-200 rounded text-sm font-bold">
+                      {card.power}/{card.toughness}
+                    </span>
+                  </div>
+                )}
+              </div>
+            )}
+
+            <div className="flex items-center space-x-2">
+              <span className="px-2 py-1 text-sm font-medium rounded-full bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">
                 {card.game}
               </span>
+              <span className="text-sm text-gray-600 dark:text-gray-400">{card.set_name}</span>
             </div>
           </div>
 
-          {/* Bottom Section - Actions */}
-          <div className="space-y-3">
-            {/* Primary Actions */}
-            <div className="grid grid-cols-2 gap-2">
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onAddToCollection([card]);
-                }}
-                className="flex items-center justify-center space-x-2 px-3 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium"
-              >
-                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
-                </svg>
-                <span>Collection</span>
-              </button>
+          {/* Panel Body */}
+          <div className="p-4 flex-1 overflow-y-auto">
+            <div className="space-y-4">
+              {/* Card Details */}
+              <div>
+                <div className="grid grid-cols-2 gap-4 mb-4">
+                  <div>
+                    <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Rarity</span>
+                    <p className="text-sm text-gray-900 dark:text-white font-medium">{card.rarity}</p>
+                  </div>
+                  <div>
+                    <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Type</span>
+                    <p className="text-sm text-gray-900 dark:text-white font-medium">{card.card_type}</p>
+                  </div>
+                </div>
 
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onAddToDeck([card]);
-                }}
-                className="flex items-center justify-center space-x-2 px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-sm font-medium"
-              >
-                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
-                </svg>
-                <span>Deck</span>
-              </button>
+                {/* Oracle Text */}
+                {card.oracle_text && (
+                  <div className="mb-4">
+                    <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Description</span>
+                    <p className="text-sm text-gray-700 dark:text-gray-300 mt-1 leading-relaxed">
+                      {card.oracle_text}
+                    </p>
+                  </div>
+                )}
+
+                {/* Colors for MTG */}
+                {card.game === 'MTG' && card.colors && card.colors.length > 0 && (
+                  <div className="mb-4">
+                    <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Colors</span>
+                    <div className="flex flex-wrap gap-1 mt-1">
+                      {card.colors.map((color, index) => (
+                        <span key={index} className="px-2 py-1 text-xs rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
+                          {color}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
             </div>
+          </div>
 
-            {/* Secondary Actions */}
-            <div className="grid grid-cols-3 gap-2">
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  // Mark as owned functionality
-                  alert('Mark as owned (coming soon)');
-                }}
-                className="flex items-center justify-center px-2 py-2 bg-purple-100 text-purple-700 rounded-lg hover:bg-purple-200 transition-colors text-xs font-medium"
-              >
-                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                </svg>
-              </button>
+          {/* Panel Footer - Actions */}
+          <div className="p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
+            <div className="space-y-3">
+              {/* Primary Actions */}
+              <div className="grid grid-cols-2 gap-2">
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onAddToCollection([card]);
+                  }}
+                  className="flex items-center justify-center space-x-2 px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors text-sm font-medium"
+                >
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+                  </svg>
+                  <span>Collection</span>
+                </button>
 
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onToggleFavorite(card);
-                }}
-                className={`flex items-center justify-center px-2 py-2 rounded-lg transition-colors text-xs font-medium ${
-                  isFavorited 
-                    ? 'bg-red-100 text-red-700 hover:bg-red-200' 
-                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-                }`}
-              >
-                <svg className="w-4 h-4" fill={isFavorited ? "currentColor" : "none"} stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
-                </svg>
-              </button>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onAddToDeck([card]);
+                  }}
+                  className="flex items-center justify-center space-x-2 px-3 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors text-sm font-medium"
+                >
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+                  </svg>
+                  <span>Deck</span>
+                </button>
+              </div>
 
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  // View details functionality
-                  window.open(`/card/${card.id}`, '_blank');
-                }}
-                className="flex items-center justify-center px-2 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors text-xs font-medium"
-              >
-                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-                </svg>
-              </button>
+              {/* Secondary Actions */}
+              <div className="grid grid-cols-4 gap-2">
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    alert('Mark as owned (coming soon)');
+                  }}
+                  className="flex items-center justify-center p-2 bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-300 rounded-lg hover:bg-purple-200 dark:hover:bg-purple-800 transition-colors"
+                  title="Mark as Owned"
+                >
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                  </svg>
+                </button>
+
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onToggleFavorite(card);
+                  }}
+                  className={`flex items-center justify-center p-2 rounded-lg transition-colors ${
+                    isFavorited 
+                      ? 'bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300 hover:bg-red-200 dark:hover:bg-red-800' 
+                      : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
+                  }`}
+                  title="Toggle Favorite"
+                >
+                  <svg className="w-4 h-4" fill={isFavorited ? "currentColor" : "none"} stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+                  </svg>
+                </button>
+
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    window.open(`/card/${card.id}`, '_blank');
+                  }}
+                  className="flex items-center justify-center p-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
+                  title="View Details"
+                >
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                  </svg>
+                </button>
+
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    navigator.clipboard.writeText(`${card.name} - ${card.set_name}`);
+                    // Could add a toast notification here
+                  }}
+                  className="flex items-center justify-center p-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
+                  title="Copy Card Info"
+                >
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                  </svg>
+                </button>
+              </div>
             </div>
           </div>
         </div>
diff --git a/pages/cards.js b/pages/cards.js
index 344ebab..8f39d26 100644
--- a/pages/cards.js
+++ b/pages/cards.js
@@ -699,7 +699,7 @@ export default function Cards() {
           </div>
         ) : (
           <>
-            <div className={viewMode === 'grid' ? 'card-grid-container grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8 gap-8 p-8' : 'space-y-4 p-6'}>
+            <div className={viewMode === 'grid' ? 'card-grid-container grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-8 p-8 pr-96' : 'space-y-4 p-6'}>
               {cards.map(card => (
                 <CardItem
                   key={card.id}
diff --git a/styles/globals.css b/styles/globals.css
index 1f47627..eb610eb 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -335,7 +335,7 @@ body {
     0 0 60px rgba(168, 85, 247, 0.1);
 } 
 
-/* Card Sliding Effect Styles */
+/* Card Hover Panel Styles */
 .card-item-container {
   position: relative;
 }
@@ -348,11 +348,6 @@ body {
   z-index: 60;
 }
 
-/* Smooth transitions for card interactions */
-.card-slide-panel {
-  transform-origin: top center;
-}
-
 /* Ensure proper layering during animations */
 .card-grid-container {
   position: relative;
@@ -364,13 +359,40 @@ body {
   user-select: none;
 }
 
-/* Add subtle backdrop blur effect for sliding panels */
-.card-slide-panel::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(2px);
-  border-radius: inherit;
-  z-index: -1;
+/* Side panel specific styles */
+.card-side-panel {
+  transform-origin: left center;
+  backdrop-filter: blur(8px);
+}
+
+/* Responsive adjustments for side panels */
+@media (max-width: 1280px) {
+  .card-side-panel {
+    width: 16rem; /* w-64 */
+  }
+}
+
+@media (max-width: 1024px) {
+  .card-side-panel {
+    display: none; /* Hide panels on smaller screens */
+  }
+}
+
+/* Dark mode improvements */
+@media (prefers-color-scheme: dark) {
+  .card-side-panel {
+    backdrop-filter: blur(8px) brightness(0.8);
+  }
+}
+
+/* Smooth panel transitions */
+.card-panel-enter {
+  opacity: 0;
+  transform: translateX(8px);
+}
+
+.card-panel-enter-active {
+  opacity: 1;
+  transform: translateX(0);
+  transition: all 300ms ease-out;
 } 
\ No newline at end of file