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} /> + setShowStickerWallModal(false)} + imageUrl={stickerWallUrl} + /> + {/* Results Panel */}
{error && ( @@ -891,13 +902,30 @@ function Picker() { {/* Sticker Visibility Toggle */}
- Stickers + stickerWallUrl && setShowStickerWallModal(true)} + /> + +
+ Stickers
{[ { value: 'auto', label: 'Auto', activeClass: 'bg-gray-500 text-white' },