Merge branch 'dev' into page

src/components/settings/tabs/plugins/index.tsx

@@ -197,6 +197,8 @@ export default function PluginSettings() {
     const hasUserPlugins = useMemo(() => !IS_STANDALONE && Object.values(PluginMeta).some(m => m.userPlugin), []);
 
     const [searchValue, setSearchValue] = useState({ value: "", tags: [] as PluginTag[], status: SearchStatus.ALL });
+    const [currentPage, setCurrentPage] = React.useState(1);
+    const pageSize = 36;
 
     const search = searchValue.value.toLowerCase();
     const onSearch = (query: string) => setSearchValue(prev => ({ ...prev, value: query }));
@@ -358,22 +360,13 @@ export default function PluginSettings() {
         const enabledUserPlugins = enabledPlugins.filter(p => PluginMeta[p].userPlugin).length;
         return { totalStockPlugins, totalUserPlugins, enabledStockPlugins, enabledUserPlugins, enabledPlugins };
     }, [settings.plugins]);
-    const pluginsToLoad = Math.min(36, plugins.length);
-    const [visibleCount, setVisibleCount] = React.useState(pluginsToLoad);
-    const loadMore = React.useCallback(() => {
-        setVisibleCount(v => Math.min(v + pluginsToLoad, plugins.length));
-    }, [plugins.length]);
 
-    const dLoadMore = useMemo(() => debounce(loadMore, 100), [loadMore]);
+    const visiblePlugins = plugins.slice((currentPage - 1) * pageSize, currentPage * pageSize);
+    const totalPages = Math.ceil(plugins.length / pageSize);
 
-    const [sentinelRef, isSentinelVisible] = useIntersection();
-    React.useEffect(() => {
-        if (isSentinelVisible && visibleCount < plugins.length) {
-            dLoadMore();
-        }
-    }, [isSentinelVisible, visibleCount, plugins.length, dLoadMore]);
-
-    const visiblePlugins = plugins.slice(0, visibleCount);
+    function goToPage(page: number) {
+        setCurrentPage(Math.max(1, Math.min(page, totalPages)));
+    }
 
     return (
         <SettingsTab>
@@ -449,8 +442,27 @@ export default function PluginSettings() {
                                 : <Paragraph>No plugins meet the search criteria.</Paragraph>
                             }
                         </div>
-                        {visibleCount < plugins.length && (
-                            <div ref={sentinelRef} style={{ height: 32 }} />
+
+                        {totalPages > 1 && (
+                            <div className={cl("page-buttons")}>
+                                <Button
+                                    size="small"
+                                    disabled={currentPage === 1}
+                                    onClick={() => goToPage(currentPage - 1)}
+                                >
+                                    Prev
+                                </Button>
+                                <div className={cl("page-text")}>
+                                    <Paragraph>{`Page ${currentPage} of ${totalPages}`}</Paragraph>
+                                </div>
+                                <Button
+                                    size="small"
+                                    disabled={currentPage === totalPages}
+                                    onClick={() => goToPage(currentPage + 1)}
+                                >
+                                    Next
+                                </Button>
+                            </div>
                         )}
                     </>
                 )

src/components/settings/tabs/plugins/styles.css

@@ -266,11 +266,21 @@
 }
 
 .vc-plugins-page-buttons {
-    margin-top: 12px;
+    margin-top: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
+    position: relative;
+}
+
+.vc-plugins-page-text {
+    width: 120px;
+    font-size: 14px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .vc-plugins-source {