feat: optimize CategoryFilterWidget array iterations

Refactor array methods in CategoryFilterWidget to use a single loop for computing activeCategories and uniqueProfiles. This eliminates intermediate array allocations and improves performance when rendering large amounts of shortcuts.

Co-authored-by: alazndy <78882672+alazndy@users.noreply.github.com>

Author: google-labs-jules[bot]

.jules/bolt.md

@@ -5,3 +5,7 @@
 ## 2025-03-09 - Replace .map() with point updates for React state arrays
 **Learning:** For updating single items in small React state arrays (e.g., layout configurations or task lists), using `array.map()` introduces significant performance overhead by iterating through the entire array and calling the callback for every element. This causes unnecessary processing.
 **Action:** Prefer "point updates" using `findIndex` and array spreading over `array.map()`. This minimizes object allocations and improves fluidity, especially on lower-power devices.
+
+## 2025-03-09 - Consolidate Multiple Array Iterations into Single Loop
+**Learning:** Chaining array methods like `.map()` and `.flatMap()` combined with `new Set()` multiple times on a large data source causes significant performance degradation because each method creates intermediate arrays and iterates over the data multiple times.
+**Action:** When deriving multiple sets of data from the same source array, use a single `for...of` loop inside a single `useMemo` block to minimize iterations and avoid unnecessary object allocations.

components/CategoryFilterWidget.tsx

@@ -6,12 +6,21 @@ import { UsersIcon } from '@heroicons/react/24/outline';
 export const CategoryFilterWidget: React.FC = () => {
   const { shortcuts, filterCategory, setFilterCategory, filterProfile, setFilterProfile } = useGTab();
 
-  const activeCategories = useMemo(() => {
-    return ['All', ...new Set(shortcuts.map(s => s.category))];
-  }, [shortcuts]);
-
-  const uniqueProfiles = useMemo(() => {
-    return Array.from(new Set(shortcuts.flatMap(s => s.profiles?.map(p => p.name) || []))).sort();
+  const { activeCategories, uniqueProfiles } = useMemo(() => {
+    const categoriesSet = new Set<string>();
+    const profilesSet = new Set<string>();
+    for (const s of shortcuts) {
+      if (s.category) categoriesSet.add(s.category);
+      if (s.profiles) {
+        for (const p of s.profiles) {
+          if (p.name) profilesSet.add(p.name);
+        }
+      }
+    }
+    return {
+      activeCategories: ['All', ...categoriesSet],
+      uniqueProfiles: Array.from(profilesSet).sort()
+    };
   }, [shortcuts]);
 
   return (