Marco/einfach-produktiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make Spotlight's wishlist heart hover-only, matching the shop grid

Browse Source 
Was always visible in ProductSpotlight.tsx, unlike ProductGrid.tsx's
cards — inconsistent for what's still a single card in a hoverable
context. The `group` ancestor needed for revealOnHover already exists
there (used for the image's hover-zoom effect), so this is just the
prop.
This commit is contained in:
Marco
2026-08-01 10:28:51 +00:00
parent 45bd321bb0
commit 77a9ef27a9
2 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/ProductSpotlight.tsx
+1 -1
View File
@@ -74,7 +74,7 @@ export async function ProductSpotlight() {
)
)}
{wishlistEnabled && product.spotlightShowWishlist && (
<WishlistButton productId={product.numericId} className="absolute top-3 right-3" />
<WishlistButton productId={product.numericId} className="absolute top-3 right-3" revealOnHover />
)}
</div>
app/components/WishlistButton.tsx
+9 -8
View File
@@ -19,14 +19,15 @@ export function WishlistButton({
productId: number;
variant?: string;
className?: string;
/** false (default): always visible — right for single-product contexts
* (ProductSpotlight, /konto/merkliste, the product detail page) where
* there's no "wall of hearts" to thin out. true: invisible until the
* card is hovered/focused, unless the product is already wishlisted (a
* filled heart stays as a permanent status indicator) — right for a
* multi-card grid (ProductGrid.tsx), where a heart on every single card
* reads as visual noise. Relies on the parent card already carrying
* `group`/`focus-within` (see ProductGrid.tsx).
/** false (default): always visible — right for /konto/merkliste (every
* card there is already-wishlisted, so hover-reveal would be pointless)
* and the product detail page. true: invisible until the card is
* hovered/focused, unless the product is already wishlisted (a filled
* heart stays as a permanent status indicator) — right for any grid or
* card-like feature (ProductGrid.tsx, ProductSpotlight.tsx) where a
* heart sitting there unprompted reads as visual noise. Relies on the
* parent card already carrying `group`/`focus-within` (see
* ProductGrid.tsx/ProductSpotlight.tsx).
*
* On coarse-pointer (touch) devices, hover-reveal can't work at all —
* touch has no persistent `:hover`, so a tap on the card never reliably