feat(plugins/settings/pages/Plugins): add "no results" view

revenge-mod · Dec 4, 2024 · 73abe1a · 73abe1a
1 parent 94dc837
commit 73abe1a
Showing 1 changed file with 41 additions and 21 deletions.
diff --git a/src/plugins/settings/pages/Plugins.tsx b/src/plugins/settings/pages/Plugins.tsx
@@ -235,36 +235,47 @@ export default function PluginsSettingsPage() {
         ? corePluginsData.length + externalPluginsData.length
         : externalPluginsData.length)
 
+    // TODO: Maybe create 2 separate data lists for non-filtered and filtered plugins
+    const pluginListNoResults = pluginListEmpty && query
+
     return (
         <PageWrapper>
             <PluginSettingsPageContext.Provider
                 value={{ setQuery, showCorePlugins, sortMode, ContextMenuComponent: MemoizedContextMenu }}
             >
-                {pluginListEmpty ? (
+                {pluginListEmpty && !pluginListNoResults ? (
                     <PluginsSettingsPageEmptyView />
                 ) : (
                     <>
                         <PluginsSettingsPageSearch />
-                        <ScrollView fadingEdgeLength={32} keyboardShouldPersistTaps="handled" style={styles.resizable}>
-                            <PluginsSettingsPageMasonaryFlashList data={externalPluginsData} />
-                            {showCorePluginsInformationAlert && (
-                                <PluginsSettingsPageMasonaryFlashList
-                                    header={
-                                        <View style={styles.headerContainer}>
-                                            {/* TableRowGroupTitle probably has some margin, setting it to flex-end causes it to be in the center, lucky. */}
-                                            <TableRowGroupTitle title="Core Plugins" />
-                                            <IconButton
-                                                icon={getAssetIndexByName('CircleQuestionIcon-primary')!}
-                                                size="sm"
-                                                variant="tertiary"
-                                                onPress={showCorePluginsInformationAlert}
-                                            />
-                                        </View>
-                                    }
-                                    data={corePluginsData}
-                                />
-                            )}
-                        </ScrollView>
+                        {pluginListNoResults ? (
+                            <PluginsSettingsPageNoResultsView />
+                        ) : (
+                            <ScrollView
+                                fadingEdgeLength={32}
+                                keyboardShouldPersistTaps="handled"
+                                style={styles.resizable}
+                            >
+                                <PluginsSettingsPageMasonaryFlashList data={externalPluginsData} />
+                                {showCorePluginsInformationAlert && (
+                                    <PluginsSettingsPageMasonaryFlashList
+                                        header={
+                                            <View style={styles.headerContainer}>
+                                                {/* TableRowGroupTitle probably has some margin, setting it to flex-end causes it to be in the center, lucky. */}
+                                                <TableRowGroupTitle title="Core Plugins" />
+                                                <IconButton
+                                                    icon={getAssetIndexByName('CircleQuestionIcon-primary')!}
+                                                    size="sm"
+                                                    variant="tertiary"
+                                                    onPress={showCorePluginsInformationAlert}
+                                                />
+                                            </View>
+                                        }
+                                        data={corePluginsData}
+                                    />
+                                )}
+                            </ScrollView>
+                        )}
                     </>
                 )}
             </PluginSettingsPageContext.Provider>
@@ -303,6 +314,15 @@ function PluginsSettingsPageEmptyView() {
     )
 }
 
+function PluginsSettingsPageNoResultsView() {
+    return (
+        <Stack spacing={24} style={[styles.growable, styles.centerChildren]}>
+            <Image source={getAssetIndexByName('empty_quick_switcher')} style={styles.emptyImage} />
+            <Text variant="heading-lg/semibold">No results...</Text>
+        </Stack>
+    )
+}
+
 type PluginsSettingsPageMasonaryFlashListData = Omit<PluginCardProps, 'horizontalGaps'>[]
 
 function PluginsSettingsPageMasonaryFlashList({