Refactor: use key-based active tab matching in SearchTypeMenuNarrow

Return activeKey from useSearchTypeMenuSections hook and use key comparison
instead of fragile index-based matching in SearchTypeMenuNarrow. This avoids
potential offset issues when menu sections include items rendered differently.

Co-authored-by: Bruno Rocha <brunovjk@users.noreply.github.com>

Author: MelvinBot

src/hooks/useSearchTypeMenuSections.ts

@@ -172,9 +172,18 @@ const useSearchTypeMenuSections = (queryParams?: UseSearchTypeMenuSectionsParams
         return -1;
     }, [typeMenuSections, savedSearches, hash, similarSearchHash, sortBy, sortOrder, type]);
 
+    const activeKey = useMemo(() => {
+        if (activeItemIndex < 0) {
+            return undefined;
+        }
+        const flatItems = typeMenuSections.flatMap((section) => section.menuItems);
+        return flatItems.at(activeItemIndex)?.key;
+    }, [typeMenuSections, activeItemIndex]);
+
     return {
         typeMenuSections,
         activeItemIndex,
+        activeKey,
     };
 };
 

src/pages/Search/SearchTypeMenuNarrow.tsx

@@ -74,7 +74,7 @@ function SearchTypeMenuNarrow({queryJSON, onTabPress}: SearchTypeMenuNarrowProps
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
     const navigation = useNavigation();
-    const {typeMenuSections, activeItemIndex} = useSearchTypeMenuSections({
+    const {typeMenuSections, activeKey: activeTypeMenuKey} = useSearchTypeMenuSections({
         hash: queryJSON?.hash,
         similarSearchHash: queryJSON?.similarSearchHash,
         sortBy: queryJSON?.sortBy,
@@ -169,7 +169,6 @@ function SearchTypeMenuNarrow({queryJSON, onTabPress}: SearchTypeMenuNarrowProps
               .filter((item) => item !== null)
         : [];
 
-    let typeMenuItemIndex = 0;
     for (const section of typeMenuSections) {
         if (section.translationPath === 'search.savedSearchesMenuItemTitle') {
             tabItems.push(...savedSearchesTabItems);
@@ -185,10 +184,9 @@ function SearchTypeMenuNarrow({queryJSON, onTabPress}: SearchTypeMenuNarrowProps
                     badgeText,
                 });
                 queryMap.set(item.key, {query: item.searchQuery});
-                if (activeItemIndex === typeMenuItemIndex) {
+                if (item.key === activeTypeMenuKey) {
                     activeKey = item.key;
                 }
-                typeMenuItemIndex++;
             }
         }
     }