Move filtering to "groupExtensionsByLanguage"

src/modules/extension/Extensions.utils.ts

@@ -17,6 +17,7 @@ import {
 } from '@/modules/extension/Extensions.types.ts';
 import { DefaultLanguage, langCodeToName, langSortCmp } from '@/modules/core/utils/Languages.ts';
 import { extensionLanguageToTranslationKey } from '@/modules/extension/Extensions.constants.ts';
+import { enhancedCleanup } from '@/util/Strings.ts';
 
 export const getInstalledState = (
     isInstalled: boolean,
@@ -81,11 +82,24 @@ export function groupExtensionsByLanguage(extensions: TExtension[]): GroupedExte
         return langSortCmp(a, b);
     });
 
-    return extensionsBySortedLanguage.map(([language, extensionsOfLanguage]) => [
+    const groupedExtensionsSortedByLanguage = extensionsBySortedLanguage.map(([language, extensionsOfLanguage]) => [
         language,
         (extensionsOfLanguage ?? []).toSorted((a, b) => langSortCmp(a.lang, b.lang)),
-    ]);
+    ]) satisfies GroupedExtensionsResult;
+
+    return groupedExtensionsSortedByLanguage.filter(([, extensionsOfLanguage]) => !!extensionsOfLanguage.length);
 }
 
 export const getLanguagesFromExtensions = (extensions: TExtension[]): string[] =>
     [...new Set(extensions.map((extension) => extension.lang))].toSorted(langSortCmp);
+
+export const filterExtensions = (
+    extensions: TExtension[],
+    selectedLanguages: string[],
+    showNsfw: boolean,
+    query: string | null | undefined,
+): TExtension[] =>
+    extensions
+        .filter((extension) => selectedLanguages.includes(extension.lang))
+        .filter((extension) => showNsfw || !extension.isNsfw)
+        .filter((extension) => !query || enhancedCleanup(extension.name).includes(enhancedCleanup(query)));

src/modules/extension/screens/Extensions.tsx

@@ -35,7 +35,7 @@ import {
     groupExtensionsByLanguage,
     getLanguagesFromExtensions,
     translateExtensionLanguage,
-    isExtensionState,
+    filterExtensions,
 } from '@/modules/extension/Extensions.utils.ts';
 import {
     ExtensionAction,
@@ -98,37 +98,24 @@ export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
     const allLangs = useMemo(() => getLanguagesFromExtensions(allExtensions ?? []), [allExtensions]);
 
     const filteredExtensions = useMemo(
-        () =>
+        () => filterExtensions(allExtensions ?? [], shownLangs, showNsfw, query),
-            (allExtensions ?? []).filter((ext) => {
+        [allExtensions, shownLangs, shownLangs, query],
-                const nsfwFilter = showNsfw || !ext.isNsfw;
-                if (!query) return nsfwFilter;
-                return nsfwFilter && ext.name.toLowerCase().includes(query.toLowerCase());
-            }),
-        [allExtensions, showNsfw, query],
     );
 
     const groupedExtensions = useMemo(() => groupExtensionsByLanguage(filteredExtensions), [filteredExtensions]);
 
-    const filteredGroupedExtensions = useMemo(
-        () =>
-            groupedExtensions
-                .filter((group) => group[EXTENSIONS].length > 0)
-                .filter((group) => isExtensionState(group[LANGUAGE]) || shownLangs.includes(group[LANGUAGE])),
-        [shownLangs, groupedExtensions],
-    );
-
     const groupCounts = useMemo(
-        () => filteredGroupedExtensions.map((extensionGroup) => extensionGroup[EXTENSIONS].length),
+        () => groupedExtensions.map((extensionGroup) => extensionGroup[EXTENSIONS].length),
-        [filteredGroupedExtensions],
+        [groupedExtensions],
     );
     const visibleExtensions = useMemo(
-        () => filteredGroupedExtensions.map(([, extensions]) => extensions).flat(1),
+        () => groupedExtensions.map(([, extensions]) => extensions).flat(1),
-        [filteredGroupedExtensions],
+        [groupedExtensions],
     );
 
     const computeItemKey = VirtuosoUtil.useCreateGroupedComputeItemKey(
         groupCounts,
-        useCallback((index) => filteredGroupedExtensions[index][LANGUAGE], [filteredGroupedExtensions]),
+        useCallback((index) => groupedExtensions[index][LANGUAGE], [groupedExtensions]),
         useCallback((index) => visibleExtensions[index].pkgName, [visibleExtensions]),
     );
 
@@ -262,7 +249,7 @@ export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
                 overscan={window.innerHeight * 0.5}
                 groupCounts={groupCounts}
                 groupContent={(index) => {
-                    const [groupName, groupExtensions] = filteredGroupedExtensions[index];
+                    const [groupName, groupExtensions] = groupedExtensions[index];
                     const isUpdateGroup = groupName === ExtensionGroupState.UPDATE_PENDING;
 
                     return (