Major restructuring of the monolithic App.js (2484 lines) into focused,
testable components:
Architecture:
- App.js is now a 189-line routing shell (header, nav, page switching)
- HomePage.js orchestrates all home page state and layout
- Each visual section is its own component with clear props API
Extracted components:
- StatsBar: clickable stat cards that filter by severity
- QuickCVELookup: CVE existence check with inline results
- CVEFilters: search + vendor/severity dropdowns
- CVECard: expandable CVE with vendor entries, docs, tickets
- OpenTicketsPanel: right sidebar open JIRA tickets
- IvantiWorkflowPanel: right sidebar Ivanti workflow status + archive
Extracted modals:
- AddCVEModal: self-contained add form with NVD auto-fill
- EditCVEModal: self-contained edit form with NVD update
- JiraTicketModal: unified add/edit JIRA ticket modal
- ArcherTicketModal: unified add/edit Archer ticket modal
Performance optimizations:
- Debounced search (300ms) via useDebounce hook — eliminates
redundant API calls on every keystroke
- Memoized groupedCVEs, openTicketCount, criticalCount via useMemo
- Proper state updates (no direct mutation of cveDocuments)
- useCallback on fetch functions to stabilize effect dependencies
UX improvements:
- Toast notification system replaces all alert() calls
- Stat cards are now clickable to filter CVE list by severity
- onKeyDown replaces deprecated onKeyPress
- aria-labels added to interactive elements
Infrastructure:
- ToastContext with auto-dismiss, typed toasts (success/error/warning/info)
- useDebounce custom hook for reuse across the app
- Toast slide-in animation in App.css
VISUAL IMPROVEMENTS:
- Increased border thickness from 1px to 2px on all cards for visibility
- Enhanced box shadows with multiple layers for dramatic depth
- Made stat cards much more prominent with stronger borders
STATUS BADGES:
- Increased text brightness (Critical: #FF6B94, High: #FFD966, etc.)
- Added text-shadow glow effects for better contrast
- Made borders thicker (2px) with higher opacity (0.8)
- Enhanced background gradients (0.3/0.2 opacity)
- Larger pulse dots (8px) with stronger glow
CARD DEPTH:
- intel-card: 2px borders, inset top/bottom glow, dramatic shadows
- stat-card: 2px cyan borders, 3px glowing top bar, strong shadows
- vendor-card: 2px borders, nested appearance with lift on hover
- document-item: Recessed look with inset shadows
SHADOWS & EFFECTS:
- Base shadows: 0 8px 16px rgba(0,0,0,0.6)
- Hover glow: 0 0 40px rgba(0,217,255,0.2)
- Inset highlights for dimensional appearance
- Transform on hover for lift effect
All changes maintain the cyber-intelligence aesthetic while making
the depth and hierarchy dramatically more visible.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
