diff --git a/src/components/settings/tabs/plugins/index.tsx b/src/components/settings/tabs/plugins/index.tsx index 4894b4eae..896d7f3aa 100644 --- a/src/components/settings/tabs/plugins/index.tsx +++ b/src/components/settings/tabs/plugins/index.tsx @@ -261,10 +261,18 @@ export default function PluginSettings() { .sort((a, b) => a.name.localeCompare(b.name)), []); const [searchValue, setSearchValue] = React.useState({ value: "", 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 })); - const onStatusChange = (status: SearchStatus) => setSearchValue(prev => ({ ...prev, status })); + const onSearch = (query: string) => { + setSearchValue(prev => ({ ...prev, value: query })); + setCurrentPage(1); + }; + const onStatusChange = (status: SearchStatus) => { + setSearchValue(prev => ({ ...prev, status })); + setCurrentPage(1); + }; const pluginFilter = (plugin: typeof Plugins[keyof typeof Plugins]) => { const { status } = searchValue; @@ -469,6 +477,17 @@ export default function PluginSettings() { const enabledStockPlugins = enabledPlugins.filter(p => !PluginMeta[p].userPlugin).length; const enabledUserPlugins = enabledPlugins.filter(p => PluginMeta[p].userPlugin).length; + const paginatedPlugins = plugins.slice( + (currentPage - 1) * pageSize, + currentPage * pageSize + ); + + const totalPages = Math.ceil(plugins.length / pageSize); + + function goToPage(page: number) { + setCurrentPage(Math.max(1, Math.min(page, totalPages))); + } + return ( @@ -518,17 +537,38 @@ export default function PluginSettings() { {plugins.length || requiredPlugins.length ? ( -
- {plugins.length - ? plugins - : No plugins meet the search criteria. - } -
+ <> +
+ {paginatedPlugins.length + ? paginatedPlugins + : No plugins meet the search criteria. + } +
+ + {totalPages > 1 && ( +
+ + {`Page ${currentPage} of ${totalPages}`} + +
+ )} + ) : } - diff --git a/src/components/settings/tabs/plugins/styles.css b/src/components/settings/tabs/plugins/styles.css index b6de7d517..8266b39c8 100644 --- a/src/components/settings/tabs/plugins/styles.css +++ b/src/components/settings/tabs/plugins/styles.css @@ -279,3 +279,11 @@ flex-direction: column; gap: 1.25em; } + +.vc-plugins-page-buttons { + margin-top: 12px; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; +} \ No newline at end of file