Scroll to lowest stage of team or group stage if none are available

js/components/FavoriteBar.js

@@ -46,13 +46,34 @@ export function FavoriteBar({teams}) {
     };
 
     const scrollToFavorite = () => {
-        if (favorite) {
+        if (!favorite) {
-            const el = document.getElementById(`favorite-team-groupstage-${favorite.id}`);
+            return;
-            if (el) {
-                el.scrollIntoView({behavior: 'smooth', block: 'end'});
         }
-            setIsPulsing(false); // Stop pulsing when the button is clicked
+
+        const stageElements = document.querySelectorAll(`[id^='favorite-team-level-'][id$='-${favorite.id}']`);
+        let lowestStageEl = null;
+        let lowestStageNum = Infinity;
+
+        stageElements.forEach(el => {
+            const match = el.id.match(/^favorite-team-level-(\d+)-(\d+)$/);
+            if (match) {
+                const stage = parseInt(match[1]);
+                if (stage < lowestStageNum) {
+                    lowestStageNum = stage;
+                    lowestStageEl = el;
                 }
+            }
+        });
+
+        if (lowestStageEl) {
+            lowestStageEl.scrollIntoView({behavior: 'smooth', block: 'end'});
+        } else {
+            const groupEl = document.getElementById(`favorite-team-groupstage-${favorite.id}`);
+            if (groupEl) {
+                groupEl.scrollIntoView({behavior: 'smooth', block: 'end'});
+            }
+        }
+        setIsPulsing(false);
     };
 
     if (isLoading) {

js/components/MatchTable.js

@@ -41,8 +41,8 @@ export function MatchTable(props) {
             </tbody>
         </Table>);
     } else {
-        const team1Id = `favorite-team-level-${props.stageLevel}-${props.match.team1.id}`;
+        const team1Id = props.stageLevel !== undefined ? `favorite-team-level-${props.stageLevel}-${props.match.team1.id}` : undefined;
-        const team2Id = `favorite-team-level-${props.stageLevel}-${props.match.team1.id}`;
+        const team2Id = props.stageLevel !== undefined ? `favorite-team-level-${props.stageLevel}-${props.match.team2.id}` : undefined;
 
         return (<Table className='mb-0'>
             <tbody>