From 58288e51953bfd387ce09e93d0f63aba0b74b02e Mon Sep 17 00:00:00 2001
From: dnviti <dnviti@gmail.com>
Date: Wed, 17 Dec 2025 01:13:49 +0100
Subject: [PATCH] refactor: export `FoilOverlay` component and apply it
 universally to foil cards in `PackCard` and `StackView` for consistent
 animation.

---
 docs/development/CENTRAL.md                      |  1 +
 ...25-12-17-022500_universal_foil_application.md | 16 ++++++++++++++++
 src/client/src/components/CardPreview.tsx        |  2 +-
 src/client/src/components/PackCard.tsx           |  4 ++--
 src/client/src/components/StackView.tsx          |  4 ++--
 5 files changed, 22 insertions(+), 5 deletions(-)
 create mode 100644 docs/development/devlog/2025-12-17-022500_universal_foil_application.md

diff --git a/docs/development/CENTRAL.md b/docs/development/CENTRAL.md
index d067c5b..31621cb 100644
--- a/docs/development/CENTRAL.md
+++ b/docs/development/CENTRAL.md
@@ -54,3 +54,4 @@
 - [Mobile Touch Interaction](./devlog/2025-12-17-021000_mobile_touch_fix.md): Completed. Updated long-press logic to persist preview during finger movement, closing only on release.
 - [Entrance Animation Fix](./devlog/2025-12-17-021500_entrance_animation_fix.md): Completed. Implemented 'isMounted' state to ensuring scale-in animation triggers correctly on first render.
 - [Foil Bug Fix](./devlog/2025-12-17-022000_foil_bug_fix.md): Completed. Fixed regression where foil animations applied to non-foil cards on desktop.
+- [Universal Foil Application](./devlog/2025-12-17-022500_universal_foil_application.md): Completed. Applied foil animation to Grid View and Stack View card thumbnails.
diff --git a/docs/development/devlog/2025-12-17-022500_universal_foil_application.md b/docs/development/devlog/2025-12-17-022500_universal_foil_application.md
new file mode 100644
index 0000000..89bfbc9
--- /dev/null
+++ b/docs/development/devlog/2025-12-17-022500_universal_foil_application.md
@@ -0,0 +1,16 @@
+# Universal Foil Animation
+
+## Objective
+Apply the high-fidelity foil animation to **all** card image instances, including the "Grid View" and "Stack View" thumbnails, not just the magnified hover preview.
+
+## Changes
+- **CardPreview.tsx**: Exported the `FoilOverlay` component so it can be reused across the application.
+- **PackCard.tsx**:
+    - Imported `FoilOverlay`.
+    - Replaced the previous generic static foil gradient in `Grid View` with the `<FoilOverlay />` component.
+- **StackView.tsx**:
+    - Imported `FoilOverlay`.
+    - Replaced the simple opacity layer for foil cards with the `<FoilOverlay />` component.
+
+## Result
+Now, whenever a foil card is displayed on the screen—whether as a thumbnail in a pack grid, a card in a stack pile, or a magnified preview—it consistently features the generic holographic animation and rotating glare effect.
diff --git a/src/client/src/components/CardPreview.tsx b/src/client/src/components/CardPreview.tsx
index af8b25a..6e7ac4e 100644
--- a/src/client/src/components/CardPreview.tsx
+++ b/src/client/src/components/CardPreview.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import { DraftCard } from '../services/PackGeneratorService';
 
 // --- Floating Preview Component ---
-const FoilOverlay = () => (
+export const FoilOverlay = () => (
   <div className="absolute inset-0 z-20 pointer-events-none rounded-xl overflow-hidden">
     {/* CSS-based Holographic Pattern */}
     <div className="absolute inset-0 foil-holo" />
diff --git a/src/client/src/components/PackCard.tsx b/src/client/src/components/PackCard.tsx
index 3f168f1..b21a433 100644
--- a/src/client/src/components/PackCard.tsx
+++ b/src/client/src/components/PackCard.tsx
@@ -8,7 +8,7 @@ interface PackCardProps {
   viewMode: 'list' | 'grid' | 'stack';
 }
 
-import { CardHoverWrapper } from './CardPreview';
+import { CardHoverWrapper, FoilOverlay } from './CardPreview';
 
 
 const ListItem: React.FC<{ card: DraftCard }> = ({ card }) => {
@@ -103,7 +103,7 @@ export const PackCard: React.FC<PackCardProps> = ({ pack, viewMode }) => {
                 <div className="relative group bg-slate-900 rounded-lg">
                   {/* Visual Card */}
                   <div className={`relative aspect-[2.5/3.5] overflow-hidden rounded-lg shadow-xl border transition-all duration-200 group-hover:ring-2 group-hover:ring-purple-400 group-hover:shadow-purple-500/30 cursor-pointer ${isFoil(card) ? 'border-purple-400 shadow-purple-500/20' : 'border-slate-800'}`}>
-                    {isFoil(card) && <div className="absolute inset-0 z-20 bg-gradient-to-tr from-purple-500/10 via-transparent to-pink-500/10 mix-blend-color-dodge pointer-events-none" />}
+                    {isFoil(card) && <FoilOverlay />}
                     {isFoil(card) && <div className="absolute top-1 right-1 z-30 text-[10px] font-bold text-white bg-purple-600/80 px-1 rounded backdrop-blur-sm">FOIL</div>}
 
                     {card.image ? (
diff --git a/src/client/src/components/StackView.tsx b/src/client/src/components/StackView.tsx
index 2e780f0..6b13d31 100644
--- a/src/client/src/components/StackView.tsx
+++ b/src/client/src/components/StackView.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { DraftCard } from '../services/PackGeneratorService';
-import { CardHoverWrapper } from './CardPreview';
+import { CardHoverWrapper, FoilOverlay } from './CardPreview';
 
 interface StackViewProps {
   cards: DraftCard[];
@@ -86,7 +86,7 @@ export const StackView: React.FC<StackViewProps> = ({ cards }) => {
                     >
                       <img src={card.image} alt={card.name} className="w-full h-full object-cover" />
                       {/* Optional: Shine effect for foils if visible? */}
-                      {card.finish === 'foil' && <div className="absolute inset-0 bg-white/10 opacity-30 pointer-events-none" />}
+                      {card.finish === 'foil' && <FoilOverlay />}
                     </div>
                   </CardHoverWrapper>
                 )