From cea0e8c2beaaccecd2265f1f278ba9cc31e883a2 Mon Sep 17 00:00:00 2001
From: cottongin <cottongin@users.noreply.github.com>
Date: Sun, 23 Aug 2026 17:10:35 -0400
Subject: [PATCH] feat: add sticker visibility toggle UI with pulse animation

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

diff --git a/frontend/src/pages/Picker.jsx b/frontend/src/pages/Picker.jsx
index b0263fa..3d68001 100644
--- a/frontend/src/pages/Picker.jsx
+++ b/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">