From 30957c75a57efbd46f0202d9790b9074f9ab2b64 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 17 Feb 2026 19:15:27 +0000
Subject: [PATCH 1/3] feat: Add event searching and responsive footer

- Implemented `searchEvents` service to search for events by name or SKU.
- Added search functionality to the "Robotevents.com link" section.
- Added a dropdown to display search results.
- Users can now search for events by name or SKU and load them directly.
- Updated footer to hide copyright text on mobile devices (`hidden sm:block`).

Co-authored-by: axcdeng <121896294+axcdeng@users.noreply.github.com>
---
 src/pages/Viewer.jsx        | 95 +++++++++++++++++++++++++++++--------
 src/services/robotevents.js | 25 ++++++++++
 2 files changed, 100 insertions(+), 20 deletions(-)

diff --git a/src/pages/Viewer.jsx b/src/pages/Viewer.jsx
index fe1a992..da5e84f 100644
--- a/src/pages/Viewer.jsx
+++ b/src/pages/Viewer.jsx
@@ -18,7 +18,8 @@ import {
     getRankingsForEvent,
     getSkillsForEvent,
     getEventsForTeam,
-    getActiveSeasons
+    getActiveSeasons,
+    searchEvents
 } from '../services/robotevents';
 import { extractVideoId, getStreamStartTime } from '../services/youtube';
 import { findWebcastCandidates } from '../services/webcastDetection';
@@ -118,6 +119,11 @@ function Viewer() {
     const [eventUrl, setEventUrl] = useState('');
     const [teamNumber, setTeamNumber] = useState('');
 
+    // Search State
+    const [searchResults, setSearchResults] = useState([]);
+    const [isSearching, setIsSearching] = useState(false);
+    const [showSearchResults, setShowSearchResults] = useState(false);
+
     // UI State
     /** @type {'search' | 'list' | 'matches'} */
     const [activeTab, setActiveTab] = useState('list');
@@ -598,12 +604,7 @@ function Viewer() {
         }
     }, [streams, activeStreamId]);
 
-    const handleEventSearch = async () => {
-        if (!eventUrl.trim()) {
-            setError('Please enter an event URL');
-            return;
-        }
-
+    const loadEvent = async (sku) => {
         isInternalLoading.current = true;
         setEventLoading(true);
         setError('');
@@ -612,11 +613,6 @@ function Viewer() {
         urlPresetRef.current = null; // Sync ref immediately
 
         try {
-            const skuMatch = eventUrl.match(/(RE-[A-Z0-9]+-\d{2}-\d{4})/);
-            if (!skuMatch) {
-                throw new Error('Invalid RobotEvents URL. Could not find SKU.');
-            }
-            const sku = skuMatch[1];
             setUrlSku(sku); // Set SKU immediately
             const foundEvent = await getEventBySku(sku);
 
@@ -661,8 +657,6 @@ function Viewer() {
                     idx === 0 ? { ...s, url: cached.url, videoId: cached.videoId } : s
                 ));
             }
-
-
         } catch (err) {
             setError(err.message);
         } finally {
@@ -672,6 +666,39 @@ function Viewer() {
         }
     };
 
+    const handleEventSearch = async () => {
+        if (!eventUrl.trim()) {
+            setError('Please enter an event URL or search term');
+            return;
+        }
+
+        setShowSearchResults(false);
+
+        // Check for SKU pattern match first
+        const skuMatch = eventUrl.match(/(RE-[A-Z0-9]+-\d{2}-\d{4})/);
+        if (skuMatch) {
+            await loadEvent(skuMatch[1]);
+            return;
+        }
+
+        // Otherwise perform search
+        setIsSearching(true);
+        setError('');
+        try {
+            const results = await searchEvents(eventUrl);
+            setSearchResults(results);
+            if (results.length === 0) {
+                setError('No events found.');
+            } else {
+                setShowSearchResults(true);
+            }
+        } catch (err) {
+            setError(err.message);
+        } finally {
+            setIsSearching(false);
+        }
+    };
+
     const handleWebcastSelect = (selectedVideoId, selectedUrl, method) => {
         // Populate first stream with selected webcast
         setStreams(prev => prev.map((s, idx) =>
@@ -1645,9 +1672,9 @@ function Viewer() {
                                     <div className="space-y-2">
                                         <label className="flex items-center gap-1.5 text-[10px] font-bold text-gray-400 uppercase tracking-widest ml-1">
                                             <Link className="w-3 h-3 text-gray-500" />
-                                            Search by URL
+                                            Search Event
                                         </label>
-                                        <div className="flex gap-2">
+                                        <div className="flex gap-2 relative">
                                             <input
                                                 type="text"
                                                 value={eventUrl}
@@ -1657,18 +1684,46 @@ function Viewer() {
                                                     // If input changes, we are no longer strictly following the preset
                                                     if (urlPreset) setUrlPreset(null);
                                                     if (selectedPresetSku) setSelectedPresetSku('');
+                                                    if (showSearchResults) setShowSearchResults(false);
                                                 }}
-                                                placeholder="Paste RobotEvents URL..."
+                                                placeholder="Paste RobotEvents URL or Search..."
                                                 className="flex-1 bg-black border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:border-[#4FCEEC] focus:ring-1 focus:ring-[#4FCEEC] outline-none transition-all"
                                                 onKeyDown={(e) => e.key === 'Enter' && handleEventSearch()}
                                             />
                                             <button
                                                 onClick={handleEventSearch}
-                                                disabled={eventLoading}
+                                                disabled={eventLoading || isSearching}
                                                 className="bg-[#4FCEEC] hover:bg-[#3db8d6] disabled:opacity-50 text-black px-4 py-2 rounded-lg font-bold text-sm transition-colors flex items-center gap-2"
                                             >
-                                                {eventLoading ? <Loader className="w-4 h-4 animate-spin" /> : 'Search'}
+                                                {eventLoading || isSearching ? <Loader className="w-4 h-4 animate-spin" /> : 'Search'}
                                             </button>
+
+                                            {/* Search Results Dropdown */}
+                                            {showSearchResults && searchResults.length > 0 && (
+                                                <div className="absolute top-full left-0 right-0 z-50 bg-gray-900 border border-gray-700 rounded-b-lg shadow-xl mt-1 max-h-60 overflow-y-auto">
+                                                    {searchResults.map((evt) => (
+                                                        <button
+                                                            key={evt.id}
+                                                            onClick={() => {
+                                                                setEventUrl(`https://www.robotevents.com/${evt.sku}.html`);
+                                                                loadEvent(evt.sku);
+                                                                setShowSearchResults(false);
+                                                            }}
+                                                            className="w-full text-left p-3 hover:bg-gray-800 border-b border-gray-800 last:border-0 transition-colors"
+                                                        >
+                                                            <div className="font-bold text-white text-sm line-clamp-1">{evt.name}</div>
+                                                            <div className="flex justify-between items-center mt-1">
+                                                                <span className="text-xs text-gray-400">
+                                                                    {evt.location?.city}{evt.location?.region ? `, ${evt.location.region}` : ''}
+                                                                </span>
+                                                                <span className="text-xs text-gray-500">
+                                                                    {format(new Date(evt.start), 'MMM d, yyyy')}
+                                                                </span>
+                                                            </div>
+                                                        </button>
+                                                    ))}
+                                                </div>
+                                            )}
                                         </div>
                                     </div>
 
@@ -2508,7 +2563,7 @@ function Viewer() {
                 />
 
                 {/* Copyright Footer */}
-                <footer className="fixed bottom-4 right-4 text-xs text-slate-400 text-center sm:text-right max-w-xs sm:max-w-2xl">
+                <footer className="fixed bottom-4 right-4 text-xs text-slate-400 text-center sm:text-right max-w-xs sm:max-w-2xl hidden sm:block">
                     <p className="bg-slate-900/80 backdrop-blur-sm px-4 py-2 rounded-lg border border-slate-700/50">
                         © 2025 RoboSTEM Foundation |{' '}
                         <a
diff --git a/src/services/robotevents.js b/src/services/robotevents.js
index 5282a3f..de1adf3 100644
--- a/src/services/robotevents.js
+++ b/src/services/robotevents.js
@@ -31,6 +31,31 @@ export const getEventBySku = async (sku) => {
     throw new Error('Event not found');
 };
 
+export const searchEvents = async (query) => {
+    const client = getClient();
+    // Check if it's a SKU
+    const skuMatch = query.match(/(RE-[A-Z0-9]+-\d{2}-\d{4})/);
+    if (skuMatch) {
+        // Return as an array to match search results format
+        try {
+            const event = await getEventBySku(skuMatch[1]);
+            return [event];
+        } catch (e) {
+            return [];
+        }
+    }
+
+    // Search by name
+    const response = await client.get('/events', {
+        params: {
+            name: query,
+            per_page: 20
+        },
+    });
+
+    return response.data.data;
+};
+
 export const getTeamByNumber = async (number) => {
     const client = getClient();
     const response = await client.get('/teams', {

From 5b3d1bc0e0c5c6c130a28eb0b7cfd8a2a53d2465 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 17 Feb 2026 19:32:34 +0000
Subject: [PATCH 2/3] fix: Improve search UX and results sorting

- Implemented debounced instant search in Viewer.jsx.
- Fixed UI issue where dropdown was cut off by removing overflow-hidden from parent.
- Updated sorting logic in searchEvents to prioritize Signature events, exact name matches, and date.

Co-authored-by: axcdeng <121896294+axcdeng@users.noreply.github.com>
---
 src/pages/Viewer.jsx        | 56 +++++++++++++++++++++++++------------
 src/services/robotevents.js | 20 ++++++++++++-
 2 files changed, 57 insertions(+), 19 deletions(-)

diff --git a/src/pages/Viewer.jsx b/src/pages/Viewer.jsx
index da5e84f..cd0a244 100644
--- a/src/pages/Viewer.jsx
+++ b/src/pages/Viewer.jsx
@@ -666,6 +666,40 @@ function Viewer() {
         }
     };
 
+    const performSearch = async (query) => {
+        if (!query.trim()) {
+            setSearchResults([]);
+            setShowSearchResults(false);
+            return;
+        }
+
+        setIsSearching(true);
+        try {
+            const results = await searchEvents(query);
+            setSearchResults(results);
+            setShowSearchResults(true); // Always show, empty list handling in UI if needed
+        } catch (err) {
+            console.error(err);
+        } finally {
+            setIsSearching(false);
+        }
+    };
+
+    // Debounced Search Effect
+    useEffect(() => {
+        // Don't auto-search if deep linking or if it looks like a SKU (let user finish typing or hit enter for SKU)
+        if (isDeepLinking || !eventUrl.trim()) return;
+
+        const timer = setTimeout(() => {
+            // Check if it matches SKU pattern to avoid searching for partial SKUs unnecessarily?
+            // Actually, we WANT to search names. SKU detection happens on 'Enter' or click.
+            // If it IS a SKU, performSearch will return it as a result anyway (searchEvents handles SKU).
+            performSearch(eventUrl);
+        }, 500);
+
+        return () => clearTimeout(timer);
+    }, [eventUrl, isDeepLinking]);
+
     const handleEventSearch = async () => {
         if (!eventUrl.trim()) {
             setError('Please enter an event URL or search term');
@@ -674,29 +708,15 @@ function Viewer() {
 
         setShowSearchResults(false);
 
-        // Check for SKU pattern match first
+        // Check for SKU pattern match first for direct load
         const skuMatch = eventUrl.match(/(RE-[A-Z0-9]+-\d{2}-\d{4})/);
         if (skuMatch) {
             await loadEvent(skuMatch[1]);
             return;
         }
 
-        // Otherwise perform search
-        setIsSearching(true);
-        setError('');
-        try {
-            const results = await searchEvents(eventUrl);
-            setSearchResults(results);
-            if (results.length === 0) {
-                setError('No events found.');
-            } else {
-                setShowSearchResults(true);
-            }
-        } catch (err) {
-            setError(err.message);
-        } finally {
-            setIsSearching(false);
-        }
+        // Force immediate search if not SKU
+        performSearch(eventUrl);
     };
 
     const handleWebcastSelect = (selectedVideoId, selectedUrl, method) => {
@@ -1620,7 +1640,7 @@ function Viewer() {
                     {/* Right Column: Controls */}
                     <div className="xl:col-span-4 flex flex-col gap-4">
                         {/* Event Search Section */}
-                        <div className="bg-gray-900 border border-gray-800 rounded-xl overflow-hidden flex-shrink-0">
+                        <div className="bg-gray-900 border border-gray-800 rounded-xl flex-shrink-0">
                             <button
                                 onClick={() => setIsEventSearchCollapsed(!isEventSearchCollapsed)}
                                 className="w-full p-4 flex justify-between items-center hover:bg-gray-800/50 transition-colors"
diff --git a/src/services/robotevents.js b/src/services/robotevents.js
index de1adf3..0c126c6 100644
--- a/src/services/robotevents.js
+++ b/src/services/robotevents.js
@@ -53,7 +53,25 @@ export const searchEvents = async (query) => {
         },
     });
 
-    return response.data.data;
+    const results = response.data.data || [];
+
+    // Sort results to prioritize Signature events and relevance
+    return results.sort((a, b) => {
+        // 1. Prioritize 'Signature' level
+        const aSig = a.level === 'Signature';
+        const bSig = b.level === 'Signature';
+        if (aSig && !bSig) return -1;
+        if (!aSig && bSig) return 1;
+
+        // 2. Prioritize exact name matches
+        const aExact = a.name.toLowerCase() === query.toLowerCase();
+        const bExact = b.name.toLowerCase() === query.toLowerCase();
+        if (aExact && !bExact) return -1;
+        if (!aExact && bExact) return 1;
+
+        // 3. Sort by date (newest first)
+        return new Date(b.start) - new Date(a.start);
+    });
 };
 
 export const getTeamByNumber = async (number) => {

From 720d341cb88c03e079fd4945dc025d57d83a916c Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 17 Feb 2026 23:04:20 +0000
Subject: [PATCH 3/3] feat: Add event searching and responsive footer

Co-authored-by: axcdeng <121896294+axcdeng@users.noreply.github.com>
---
 src/services/robotevents.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/services/robotevents.js b/src/services/robotevents.js
index 0c126c6..95884f8 100644
--- a/src/services/robotevents.js
+++ b/src/services/robotevents.js
@@ -57,18 +57,18 @@ export const searchEvents = async (query) => {
 
     // Sort results to prioritize Signature events and relevance
     return results.sort((a, b) => {
-        // 1. Prioritize 'Signature' level
-        const aSig = a.level === 'Signature';
-        const bSig = b.level === 'Signature';
-        if (aSig && !bSig) return -1;
-        if (!aSig && bSig) return 1;
-
-        // 2. Prioritize exact name matches
+        // 1. Prioritize exact name matches
         const aExact = a.name.toLowerCase() === query.toLowerCase();
         const bExact = b.name.toLowerCase() === query.toLowerCase();
         if (aExact && !bExact) return -1;
         if (!aExact && bExact) return 1;
 
+        // 2. Prioritize 'Signature' level
+        const aSig = a.level === 'Signature';
+        const bSig = b.level === 'Signature';
+        if (aSig && !bSig) return -1;
+        if (!aSig && bSig) return 1;
+
         // 3. Sort by date (newest first)
         return new Date(b.start) - new Date(a.start);
     });