feat: add sticker visibility toggle UI with pulse animation

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/pages/Picker.jsx

@@ -34,6 +34,16 @@ function Picker() {
   const [sessionEnded, setSessionEnded] = useState(false);
   const [stickerMode, setStickerMode] = useState('auto');
   const stickerSendRef = useRef(null);
+  const [stickerPulse, setStickerPulse] = useState(false);
+  const prevStickerModeRef = useRef(stickerMode);
+  useEffect(() => {
+    if (stickerMode === 'auto' && prevStickerModeRef.current !== 'auto') {
+      setStickerPulse(true);
+      const timer = setTimeout(() => setStickerPulse(false), 2000);
+      return () => clearTimeout(timer);
+    }
+    prevStickerModeRef.current = stickerMode;
+  }, [stickerMode]);
 
   // Filters
   const [playerCount, setPlayerCount] = useState('');
@@ -874,6 +884,44 @@ function Picker() {
             </div>
           )}
 
+          {/* Sticker Visibility Toggle */}
+          <div
+            className={`flex items-center justify-between 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>
+            <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' },
+                { value: 'show', label: 'Show', activeClass: 'bg-green-500 text-white' },
+                { value: 'hide', label: 'Hide', activeClass: 'bg-red-500 text-white' },
+              ].map((opt, i) => (
+                <button
+                  key={opt.value}
+                  onClick={() => {
+                    setStickerMode(opt.value);
+                    stickerSendRef.current?.(opt.value);
+                  }}
+                  disabled={!stickerSendRef.current}
+                  className={`px-3 py-1.5 text-xs font-medium transition ${
+                    i === 1 ? 'border-x border-gray-300 dark:border-gray-600 ' : ''
+                  }${
+                    stickerMode === opt.value
+                      ? opt.activeClass
+                      : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300'
+                  }${
+                    !stickerSendRef.current ? ' opacity-50 cursor-not-allowed' : ''
+                  }`}
+                >
+                  {opt.label}
+                </button>
+              ))}
+            </div>
+          </div>
+
           {/* Poll Leader Indicator */}
           {leadingGame && (
             <div className="bg-indigo-50 dark:bg-indigo-900/20 border border-indigo-200 dark:border-indigo-800 rounded-lg p-3 sm:p-4 mb-4">