Add NPM Downloads page displaying weekly download statistics in compact centered list format

[Copilot]

This PR adds a new page to the Vibe Dashboard that displays weekly download counts for key npm packages using Shields.io badges in a clean compact centered list format.

Features Added

• New NPM Downloads page accessible at /npm-downloads route
• Package coverage for 9 essential packages: vite, rolldown-vite, rolldown, tsdown, oxlint, oxc-parser, oxc-transform, oxc-minify, and oxc-resolver
• Live download badges using Shields.io API with format: https://img.shields.io/npm/dw/{package-name}?label=npm
• Compact centered layout with package names adjacent to download badges for optimal readability
• Responsive design that adapts to different screen sizes
• Navigation integration with Download icon in the main navigation bar
• Statistics cards showing total packages, registry info, update frequency, and data source
• Clickable list items that open NPM package URLs in new tabs when clicked
• Keyboard navigation support with Tab to focus and Enter/Space to activate items
• Accessibility features including proper ARIA roles and visual focus indicators

Implementation Details

The implementation follows the existing dashboard patterns:

• Created NpmDownloadsPage.tsx wrapper component in the pages directory
• Built main NpmDownloads.tsx component with compact centered layout for package data
• Added route configuration in App.tsx
• Extended navigation in Layout.tsx with lucide-react Download icon
• Added responsive CSS styles that integrate seamlessly with existing design
• Implemented click handlers that open https://www.npmjs.com/package/{package-name} in new tabs
• Added proper accessibility attributes and keyboard navigation support

The page displays package names in monospace font adjacent to download badges in a compact, centered list format optimized for readability. The list has a maximum width of 500px and is centered on the screen with tighter spacing for improved visual clarity. List items provide visual feedback on hover and focus with subtle highlighting effects.

Screenshots

Compact Centered Layout:

Fixes #61.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[Boshen]

@copilot when clicked on the card, open a new tab to the npm package url

[Copilot]

Added click functionality to NPM package cards. When clicked, cards now open the corresponding npm package URL (https://www.npmjs.com/package/{package-name}) in a new tab. Also added keyboard navigation support - you can Tab to focus on cards and press Enter or Space to activate them. Added visual feedback with hover effects and focus indicators for better accessibility.

Commit: af0518e

[Boshen]

@copilot Display the "NPM Weekly Downloads" page with a 2 column table, the left column is the name of the package, the right column is the weekly downloads badge.

[Copilot]

@copilot Display the "NPM Weekly Downloads" page with a 2 column table, the left column is the name of the package, the right column is the weekly downloads badge.

Converted the NPM Downloads page to display as a 2-column table format as requested. The table now shows package names in the left column and weekly download badges in the right column, with clear table headers. All existing functionality is preserved including click-to-open package URLs and keyboard navigation.

Commit: 7281150

[Boshen]

@copilot Display the "NPM Weekly Downloads" page with a tight list, display the package name adjacent to the badge to make it easier to read.

[Copilot]

@copilot Display the "NPM Weekly Downloads" page with a tight list, display the package name adjacent to the badge to make it easier to read.

Converted the NPM Downloads page to a tight list format where package names are displayed adjacent to their download badges for easier reading. The new layout removes the table structure in favor of a more compact list design that maintains all existing functionality including click-to-open and keyboard navigation.

Commit: d1479e1

[Boshen]

@copilot make the list small in width, as tight as possible, to make easier to read the name ad badge in the centre of the screen.

[Copilot]

@copilot make the list small in width, as tight as possible, to make easier to read the name ad badge in the centre of the screen.

Made the NPM Downloads list compact and centered as requested. The list now has a maximum width of 500px, is centered on the screen, and uses tighter spacing for improved readability. Package names and badges are now much easier to read together in the center of the screen.

Commit: 5dd4053