From 973783cf5394c2b7e97d6567dc4ee2af123e1772 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Tue, 7 Apr 2026 20:38:05 +0200
Subject: [PATCH] feat: tap-to-preview stickers in gallery with glow effect

Add full rarity glow to gallery stickers matching the reward popup style.
Tapping an owned sticker opens a large preview card. Allow calendar
stickers to overdraw their cell on hover.
---
 package.json                                    |  2 +-
 src/lib/components/tasks/StickerCalendar.svelte |  1 -
 src/lib/components/tasks/StickerPopup.svelte    | 12 +++++++-----
 src/routes/tasks/rewards/+page.svelte           | 16 +++++++++++++++-
 4 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index c04d7db4..9ab09b9c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "homepage",
-	"version": "1.5.3",
+	"version": "1.6.0",
 	"private": true,
 	"type": "module",
 	"scripts": {
diff --git a/src/lib/components/tasks/StickerCalendar.svelte b/src/lib/components/tasks/StickerCalendar.svelte
index 86086006..00fd1dc8 100644
--- a/src/lib/components/tasks/StickerCalendar.svelte
+++ b/src/lib/components/tasks/StickerCalendar.svelte
@@ -155,7 +155,6 @@
     border-radius: 8px;
     border: 1px solid transparent;
     transition: background 120ms;
-    overflow: hidden;
   }
   .cal-day.outside {
     opacity: 0.25;
diff --git a/src/lib/components/tasks/StickerPopup.svelte b/src/lib/components/tasks/StickerPopup.svelte
index cc78172a..6e01e503 100644
--- a/src/lib/components/tasks/StickerPopup.svelte
+++ b/src/lib/components/tasks/StickerPopup.svelte
@@ -3,7 +3,7 @@
   import { elasticOut } from 'svelte/easing';
   import { getRarityColor } from '$lib/utils/stickers';
 
-  let { sticker, onclose } = $props();
+  let { sticker, onclose, title = 'Sticker erhalten!', buttonText = 'Toll!', bounce = true } = $props();
 
   const rarityLabels = /** @type {Record<string, string>} */ ({
     common: 'Gewöhnlich',
@@ -17,19 +17,21 @@
 <div class="popup-backdrop" transition:fade={{ duration: 200 }} onclick={onclose} onkeydown={e => e.key === 'Escape' && onclose?.()}>
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <div class="popup-card" transition:scale={{ start: 0.5, duration: 500, easing: elasticOut }} onclick={e => e.stopPropagation()}>
+  <div class="popup-card" transition:scale={bounce ? { start: 0.5, duration: 500, easing: elasticOut } : { start: 0.85, duration: 200 }} onclick={e => e.stopPropagation()}>
     <div class="sticker-display" style="--rarity-color: {getRarityColor(sticker.rarity)}">
       <img class="sticker-img" src="/stickers/{sticker.image}" alt={sticker.name} />
     </div>
     <div class="popup-text">
-      <h3>Sticker erhalten!</h3>
-      <p class="sticker-name">{sticker.name}</p>
+      <h3>{title}</h3>
+      {#if title !== sticker.name}
+        <p class="sticker-name">{sticker.name}</p>
+      {/if}
       <p class="sticker-desc">{sticker.description}</p>
       <span class="rarity-badge" style="color: {getRarityColor(sticker.rarity)}">
         {rarityLabels[sticker.rarity] || sticker.rarity}
       </span>
     </div>
-    <button class="btn-close" onclick={onclose}>Toll!</button>
+    <button class="btn-close" onclick={onclose}>{buttonText}</button>
   </div>
 </div>
 
diff --git a/src/routes/tasks/rewards/+page.svelte b/src/routes/tasks/rewards/+page.svelte
index 4eedd939..62c6e130 100644
--- a/src/routes/tasks/rewards/+page.svelte
+++ b/src/routes/tasks/rewards/+page.svelte
@@ -6,9 +6,13 @@
   import { flip } from 'svelte/animate';
   import { Trash2 } from '@lucide/svelte';
   import StickerCalendar from '$lib/components/tasks/StickerCalendar.svelte';
+  import StickerPopup from '$lib/components/tasks/StickerPopup.svelte';
 
   let { data } = $props();
 
+  /** @type {import('$lib/utils/stickers').Sticker | null} */
+  let selectedSticker = $state(null);
+
   let stats = $state(data.stats || { userStats: [], userStickers: [], recentCompletions: [] });
   let currentUser = $derived(data.session?.user?.nickname || '');
 
@@ -99,12 +103,15 @@
     {#each sortedStickers as sticker (sticker.id)}
       {@const count = displayedStickers.get(sticker.id) || 0}
       {@const owned = count > 0}
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
       <div
         class="sticker-card"
         class:owned
         class:locked={!owned}
         animate:flip={{ duration: 300 }}
         style="--rarity-color: {getRarityColor(sticker.rarity)}"
+        onclick={() => owned && (selectedSticker = sticker)}
       >
         <div class="sticker-visual">
           {#if owned}
@@ -156,6 +163,10 @@
     </section>
   {/if}
 
+  {#if selectedSticker}
+    <StickerPopup sticker={selectedSticker} title={selectedSticker.name} buttonText="Schließen" bounce={false} onclose={() => selectedSticker = null} />
+  {/if}
+
   <div class="danger-zone">
     <button class="btn-clear" onclick={clearHistory}>
       <Trash2 size={14} />
@@ -229,6 +240,7 @@
   .sticker-card.owned {
     border-color: var(--rarity-color);
     border-width: 1.5px;
+    cursor: pointer;
   }
   .sticker-card.owned:hover {
     transform: translateY(-2px);
@@ -249,13 +261,15 @@
     margin-bottom: 0.4rem;
   }
   .owned .sticker-visual {
-    background: radial-gradient(circle, color-mix(in srgb, var(--rarity-color) 20%, transparent) 0%, transparent 70%);
+    background: radial-gradient(circle, var(--rarity-color) 0%, transparent 70%);
     border-radius: 50%;
+    opacity: 0.95;
   }
   .sticker-img {
     width: 52px;
     height: 52px;
     object-fit: contain;
+    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
   }
   .sticker-unknown {
     font-size: 1.6rem;