From c89404cf26cce040147de7e04fd0b440e9251038 Mon Sep 17 00:00:00 2001
From: jramos <jramos@apophisnetworking.net>
Date: Mon, 23 Feb 2026 12:37:44 -0700
Subject: [PATCH] Add CVE list pagination to prevent endless scrolling

Shows 5 CVEs by default with 'Show 5 more' and 'Show all' controls.
Resets to 5 when filters or search change. Collapses back when fully expanded.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/App.js | 38 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/frontend/src/App.js b/frontend/src/App.js
index 22a0b66..8df8716 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -200,6 +200,7 @@ export default function App() {
   const [editNvdError, setEditNvdError] = useState(null);
   const [editNvdAutoFilled, setEditNvdAutoFilled] = useState(false);
   const [expandedCVEs, setExpandedCVEs] = useState({});
+  const [visibleCount, setVisibleCount] = useState(5);
   const [jiraTickets, setJiraTickets] = useState([]);
   const [showAddTicket, setShowAddTicket] = useState(false);
   const [showEditTicket, setShowEditTicket] = useState(false);
@@ -869,6 +870,7 @@ export default function App() {
   useEffect(() => {
     if (isAuthenticated) {
       fetchCVEs();
+      setVisibleCount(5);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchQuery, selectedVendor, selectedSeverity]);
@@ -1829,7 +1831,7 @@ export default function App() {
               </div>
             ) : (
               <div className="space-y-4">
-            {Object.entries(filteredGroupedCVEs).map(([cveId, vendorEntries]) => {
+            {Object.entries(filteredGroupedCVEs).slice(0, visibleCount).map(([cveId, vendorEntries]) => {
               const isCVEExpanded = expandedCVEs[cveId];
               const severityOrder = { 'Critical': 0, 'High': 1, 'Medium': 2, 'Low': 3 };
               const highestSeverity = vendorEntries.reduce((highest, entry) => {
@@ -2101,6 +2103,40 @@ export default function App() {
               </div>
               );
             })}
+            {/* Show more / pagination footer */}
+            {Object.keys(filteredGroupedCVEs).length > visibleCount && (
+              <div className="flex items-center justify-between pt-2">
+                <span className="text-gray-500 font-mono text-xs">
+                  Showing {visibleCount} of {Object.keys(filteredGroupedCVEs).length} CVEs
+                </span>
+                <div className="flex gap-2">
+                  <button
+                    onClick={() => setVisibleCount(v => v + 5)}
+                    className="intel-button intel-button-primary text-xs px-3 py-1"
+                  >
+                    Show 5 more
+                  </button>
+                  <button
+                    onClick={() => setVisibleCount(Object.keys(filteredGroupedCVEs).length)}
+                    className="intel-button text-xs px-3 py-1"
+                    style={{ background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)', color: '#94A3B8' }}
+                  >
+                    Show all
+                  </button>
+                </div>
+              </div>
+            )}
+            {visibleCount > 5 && Object.keys(filteredGroupedCVEs).length <= visibleCount && Object.keys(filteredGroupedCVEs).length > 5 && (
+              <div className="flex justify-end pt-2">
+                <button
+                  onClick={() => setVisibleCount(5)}
+                  className="intel-button text-xs px-3 py-1"
+                  style={{ background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)', color: '#94A3B8' }}
+                >
+                  Collapse
+                </button>
+              </div>
+            )}
               </div>
             )}