From cf148f5fa3415b6868e94f18adb04a0ed7d4d222 Mon Sep 17 00:00:00 2001
From: Randall Stillwell <me@randallstillwell.com>
Date: Sat, 26 Jul 2025 09:00:26 -0500
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=20Ultra-Smooth=20Hover=20System=20wit?=
 =?UTF-8?q?h=20Expanding=20Actions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🎯 Optimized Button Layout:
- Moved checkbox to top-left corner
- Moved favorite to top-right corner
- Created expanding add button in bottom-left

🚀 Performance Enhancements:
- Reduced all animations from 200ms → 150ms
- Reduced card scaling from 105% → 102% (subtle but smooth)
- Simplified button padding and shadows
- Reduced focus ring intensity

✨ Expanding Add Button Features:
- Click to expand: Shows Collection, Deck, Own options
- Fire-themed colors: Flame orange, Gold, Wood brown
- Smooth rotation animation (45° when expanded)
- Click outside to close functionality
- Default action: Add to Collection when expanded

🎨 Fire-Themed Action Colors:
- Collection: Flame orange (var(--accent-flame))
- Deck: Golden yellow (var(--accent-gold))
- Own: Wood brown (var(--accent-wood))
- Main button: Wood → Ember when expanded

⚡ Micro-Performance Optimizations:
- Reduced button padding: p-1.5 → p-1
- Smaller shadows and hover effects
- Faster transitions across all elements
- Custom scale-102 for subtle card lift
- Optimized z-index layering

🔧 Technical Improvements:
- Self-contained ExpandingAddButton component
- Proper event propagation handling
- State management for expand/collapse
- Click-outside-to-close behavior
- Added scale-102 to Tailwind config

The cards page should now feel incredibly responsive! ⚡🔥
---
 components/CardItem.js | 153 +++++++++++++++++++++++++++++++----------
 tailwind.config.js     |   3 +
 2 files changed, 118 insertions(+), 38 deletions(-)

diff --git a/components/CardItem.js b/components/CardItem.js
index 209fbd1..10b1737 100644
--- a/components/CardItem.js
+++ b/components/CardItem.js
@@ -1,6 +1,104 @@
 import { useState } from 'react';
 import { useRouter } from 'next/router';
 
+// Expanding Add Button Component
+function ExpandingAddButton({ card, onAddToCollection, onAddToDeck, onMarkAsOwned }) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const handleMainClick = (e) => {
+    e.stopPropagation();
+    if (!isExpanded) {
+      setIsExpanded(true);
+    } else {
+      // Default action when expanded - add to collection
+      onAddToCollection([card]);
+      setIsExpanded(false);
+    }
+  };
+
+  const handleOptionClick = (e, action) => {
+    e.stopPropagation();
+    action();
+    setIsExpanded(false);
+  };
+
+  return (
+    <div className="relative">
+      {/* Expanded Options */}
+      {isExpanded && (
+        <div className="absolute bottom-full left-0 mb-1 flex flex-col space-y-1">
+          <button
+            onClick={(e) => handleOptionClick(e, () => onAddToCollection([card]))}
+            className="p-1.5 rounded-md shadow-lg transition-all duration-150 hover:scale-105 flex items-center space-x-1 text-xs whitespace-nowrap"
+            style={{ backgroundColor: 'var(--accent-flame)', color: 'white' }}
+            title="Add to Collection"
+          >
+            <svg className="w-3 h-3" 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) => handleOptionClick(e, () => onAddToDeck([card]))}
+            className="p-1.5 rounded-md shadow-lg transition-all duration-150 hover:scale-105 flex items-center space-x-1 text-xs whitespace-nowrap"
+            style={{ backgroundColor: 'var(--accent-gold)', color: 'white' }}
+            title="Add to Deck"
+          >
+            <svg className="w-3 h-3" 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>
+          
+          <button
+            onClick={(e) => handleOptionClick(e, onMarkAsOwned)}
+            className="p-1.5 rounded-md shadow-lg transition-all duration-150 hover:scale-105 flex items-center space-x-1 text-xs whitespace-nowrap"
+            style={{ backgroundColor: 'var(--accent-wood)', color: 'white' }}
+            title="Mark as Owned"
+          >
+            <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+            </svg>
+            <span>Own</span>
+          </button>
+        </div>
+      )}
+
+      {/* Main Add Button */}
+      <button
+        onClick={handleMainClick}
+        className="p-1.5 rounded-md shadow-lg transition-all duration-150 hover:scale-105 relative"
+        style={{ 
+          backgroundColor: isExpanded ? 'var(--accent-ember)' : 'var(--accent-wood)',
+          color: 'white'
+        }}
+        title={isExpanded ? "Add to Collection" : "Show Options"}
+      >
+        <svg 
+          className={`w-4 h-4 transition-transform duration-150 ${isExpanded ? 'rotate-45' : ''}`} 
+          fill="none" 
+          stroke="currentColor" 
+          viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+        </svg>
+      </button>
+
+      {/* Click outside to close */}
+      {isExpanded && (
+        <div 
+          className="fixed inset-0 z-[-1]" 
+          onClick={(e) => {
+            e.stopPropagation();
+            setIsExpanded(false);
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
 export default function CardItem({ 
   card, 
   viewMode = 'grid', 
@@ -186,7 +284,7 @@ export default function CardItem({
 
   // Grid view
   return (
-    <div className="card-item-container relative group bg-transparent rounded-xl transition-all duration-200 overflow-visible transform hover:scale-105 hover:z-10">
+    <div className="card-item-container relative group bg-transparent rounded-xl transition-all duration-150 overflow-visible transform hover:scale-102 hover:z-10">
       {/* Main Card Container */}
       <div 
         className={`relative rounded-xl border-2 transition-all duration-200 overflow-hidden cursor-pointer ${
@@ -232,22 +330,21 @@ export default function CardItem({
       </div>
 
       {/* Hover Action Buttons */}
-      {/* Top Right - Checkbox and Favorite */}
-      <div className="absolute top-2 right-2 flex items-center space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-20">
-        {/* Selection Checkbox */}
+      {/* Top Left - Checkbox */}
+      <div className="absolute top-2 left-2 opacity-0 group-hover:opacity-100 transition-opacity duration-150 z-20">
         <button
           onClick={(e) => {
             e.stopPropagation();
             onToggleSelect(card);
           }}
-          className="p-1.5 rounded-lg shadow-lg transition-all duration-200 hover:scale-110"
+          className="p-1 rounded-md shadow-lg transition-all duration-150 hover:scale-105"
           style={{ backgroundColor: 'var(--bg-primary)' }}
         >
           <input
             type="checkbox"
             checked={isSelected}
             onChange={() => {}}
-            className="w-4 h-4 rounded focus:ring-2 focus:ring-offset-2"
+            className="w-4 h-4 rounded focus:ring-1 focus:ring-offset-1"
             style={{ 
               accentColor: 'var(--accent-ember)',
               backgroundColor: 'var(--bg-primary)',
@@ -255,14 +352,16 @@ export default function CardItem({
             }}
           />
         </button>
+      </div>
 
-        {/* Favorite Button */}
+      {/* Top Right - Favorite */}
+      <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-150 z-20">
         <button
           onClick={(e) => {
             e.stopPropagation();
             onToggleFavorite(card);
           }}
-          className="p-1.5 rounded-lg shadow-lg transition-all duration-200 hover:scale-110"
+          className="p-1 rounded-md shadow-lg transition-all duration-150 hover:scale-105"
           style={{ 
             backgroundColor: isFavorited ? 'var(--accent-ember)' : 'var(--bg-primary)',
             color: isFavorited ? 'white' : 'var(--accent-ember)'
@@ -275,36 +374,14 @@ export default function CardItem({
         </button>
       </div>
 
-      {/* Bottom Left - Ownership Status & Add Button */}
-      <div className="absolute bottom-2 left-2 flex items-center space-x-1 z-20">
-        {/* Ownership Indicator - Always visible */}
-        <div className="flex items-center space-x-1">
-          {/* This would be connected to actual ownership data */}
-          <div 
-            className="w-2 h-2 rounded-full"
-            style={{ 
-              backgroundColor: false ? 'var(--accent-gold)' : 'var(--text-secondary)',
-              opacity: 0.7
-            }}
-            title={false ? "You own this card" : "Not owned"}
-          />
-        </div>
-
-        {/* Add/Own Button - Appears on hover */}
-        <button
-          onClick={(e) => {
-            e.stopPropagation();
-            // This would toggle ownership status
-            alert('Mark as owned (coming soon)');
-          }}
-          className="opacity-0 group-hover:opacity-100 transition-all duration-200 p-1.5 rounded-lg shadow-lg hover:scale-110"
-          style={{ backgroundColor: 'var(--accent-wood)' }}
-          title="Mark as Owned"
-        >
-          <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
-          </svg>
-        </button>
+      {/* Bottom Left - Expanding Add Button */}
+      <div className="absolute bottom-2 left-2 opacity-0 group-hover:opacity-100 transition-opacity duration-150 z-20">
+        <ExpandingAddButton 
+          card={card}
+          onAddToCollection={onAddToCollection}
+          onAddToDeck={onAddToDeck}
+          onMarkAsOwned={() => alert('Mark as owned (coming soon)')}
+        />
       </div>
     </div>
   );
diff --git a/tailwind.config.js b/tailwind.config.js
index acca36c..7913239 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -23,6 +23,9 @@ export default {
           mahogany: '#3d2317',
         }
       },
+      scale: {
+        '102': '1.02',
+      },
     },
   },
   plugins: [],