From 9082d8d8c8eb9c95412bc9788fe167b99b77863f Mon Sep 17 00:00:00 2001
From: cottongin <cottongin@users.noreply.github.com>
Date: Mon, 24 Aug 2026 01:45:03 -0400
Subject: [PATCH] feat: integrate sticker wall preview into Picker's sticker
 toggle card

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 frontend/src/pages/Picker.jsx | 32 ++++++++++++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/Picker.jsx b/frontend/src/pages/Picker.jsx
index b9a0959..1e1405d 100644
--- a/frontend/src/pages/Picker.jsx
+++ b/frontend/src/pages/Picker.jsx
@@ -6,6 +6,9 @@ import GamePoolModal from '../components/GamePoolModal';
 import RoomCodeModal from '../components/RoomCodeModal';
 import { formatLocalTime } from '../utils/dateUtils';
 import PopularityBadge from '../components/PopularityBadge';
+import { useStickerWall } from '../hooks/useStickerWall';
+import StickerWallThumbnail from '../components/StickerWallThumbnail';
+import StickerWallModal from '../components/StickerWallModal';
 
 function Picker() {
   const { isAuthenticated, loading: authLoading, token } = useAuth();
@@ -37,6 +40,8 @@ function Picker() {
   const [stickerWsReady, setStickerWsReady] = useState(false);
   const [stickerPulse, setStickerPulse] = useState(false);
   const prevStickerModeRef = useRef(stickerMode);
+  const [showStickerWallModal, setShowStickerWallModal] = useState(false);
+  const { imageUrl: stickerWallUrl, loading: stickerWallLoading, error: stickerWallError, refresh: refreshStickerWall } = useStickerWall(activeSession?.id);
   useEffect(() => {
     if (stickerMode === 'auto' && prevStickerModeRef.current !== 'auto') {
       setStickerPulse(true);
@@ -881,6 +886,12 @@ function Picker() {
           gameName={pendingGameAction?.game?.title}
         />
 
+        <StickerWallModal
+          isOpen={showStickerWallModal}
+          onClose={() => setShowStickerWallModal(false)}
+          imageUrl={stickerWallUrl}
+        />
+
         {/* Results Panel */}
         <div className="md:col-span-2">
           {error && (
@@ -891,13 +902,30 @@ function Picker() {
 
           {/* Sticker Visibility Toggle */}
           <div
-            className={`flex items-center justify-between border rounded-lg p-3 mb-4 transition-all duration-300 ${
+            className={`flex items-center border rounded-lg p-3 mb-4 transition-all duration-300 ${
               stickerPulse
                 ? 'border-indigo-400 dark:border-indigo-500 bg-indigo-50 dark:bg-indigo-900/20 animate-pulse'
                 : 'border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800'
             }`}
           >
-            <span className="text-sm font-semibold text-gray-700 dark:text-gray-300">Stickers</span>
+            <StickerWallThumbnail
+              imageUrl={stickerWallUrl}
+              loading={stickerWallLoading}
+              error={stickerWallError}
+              onClick={() => stickerWallUrl && setShowStickerWallModal(true)}
+            />
+            <button
+              onClick={refreshStickerWall}
+              disabled={stickerWallLoading}
+              className="ml-2 p-1.5 text-gray-400 hover:text-indigo-500 dark:text-gray-500 dark:hover:text-indigo-400 transition rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed flex-shrink-0"
+              title="Refresh sticker wall"
+            >
+              <svg className={`w-4 h-4 ${stickerWallLoading ? 'animate-spin' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+              </svg>
+            </button>
+            <div className="flex-1" />
+            <span className="text-sm font-semibold text-gray-700 dark:text-gray-300 mr-3">Stickers</span>
             <div className="flex border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden">
               {[
                 { value: 'auto', label: 'Auto', activeClass: 'bg-gray-500 text-white' },