[PR #179] feat: Add newest scripts highlighting section #241

Closed
opened 2025-11-20 04:13:41 -05:00 by saavagebueno · 0 comments
Owner

Original Pull Request: https://github.com/community-scripts/ProxmoxVE-Local/pull/179

State: closed
Merged: Yes


Overview

This PR adds a new 'Newest Scripts' section to the Available Scripts tab that highlights the 6 most recently created scripts.

Features

  • Horizontal scrollable carousel displaying the 6 newest scripts based on field
  • Smart visibility logic - only shows when no filters are active to avoid duplication
  • Visual distinction - subtle left border accent and Clock icon for clear identification
  • NEW badges on script cards in the carousel to highlight recent additions
  • Responsive design - works on mobile, tablet, and desktop
  • Proper exclusion - newest scripts are excluded from main grid when carousel is visible

Technical Details

  • Added logic to detect when filters are active
  • Created memo to extract and sort scripts by date
  • Modified to exclude newest scripts when carousel is visible
  • Added horizontal scrollable carousel with proper responsive sizing
  • Used Lucide React Clock icon for professional appearance
  • Styled with theme-consistent colors and proper badge positioning

Testing

  • TypeScript compilation passes
  • No linting errors
  • Responsive design verified
  • Proper filter integration
  • Date sorting works correctly
**Original Pull Request:** https://github.com/community-scripts/ProxmoxVE-Local/pull/179 **State:** closed **Merged:** Yes --- ## Overview This PR adds a new 'Newest Scripts' section to the Available Scripts tab that highlights the 6 most recently created scripts. ## Features - **Horizontal scrollable carousel** displaying the 6 newest scripts based on field - **Smart visibility logic** - only shows when no filters are active to avoid duplication - **Visual distinction** - subtle left border accent and Clock icon for clear identification - **NEW badges** on script cards in the carousel to highlight recent additions - **Responsive design** - works on mobile, tablet, and desktop - **Proper exclusion** - newest scripts are excluded from main grid when carousel is visible ## Technical Details - Added logic to detect when filters are active - Created memo to extract and sort scripts by date - Modified to exclude newest scripts when carousel is visible - Added horizontal scrollable carousel with proper responsive sizing - Used Lucide React Clock icon for professional appearance - Styled with theme-consistent colors and proper badge positioning ## Testing - ✅ TypeScript compilation passes - ✅ No linting errors - ✅ Responsive design verified - ✅ Proper filter integration - ✅ Date sorting works correctly
saavagebueno added the pull-request label 2025-11-20 04:13:41 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: SVI/ProxmoxVE-Local#241