SVI/ProxmoxVE-Local
1
0
Fork 0
mirror of https://github.com/community-scripts/ProxmoxVE-Local.git synced 2026-03-31 06:23:54 -04:00
Code Issues 56 Packages Projects Releases 7 Wiki Activity

[PR #101] feat: Add card/list view toggle with enhanced list view #186

New Issue
Closed
opened 2025-11-20 04:13:24 -05:00 by saavagebueno · 0 comments
saavagebueno commented 2025-11-20 04:13:24 -05:00
Owner
Copy Link

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

State: closed
Merged: Yes

Overview

This PR adds a view toggle feature that allows users to switch between card view (default) and list view on both the Available Scripts and Downloaded Scripts pages.

Features Added

  • View Toggle Component: Clean toggle button with grid/list icons positioned below the FilterBar
  • List View Layout: Horizontal card design showing scripts in a compact row format
  • Enhanced Information Display: List view shows additional metadata:
    • Categories with tag icon
    • Creation date with calendar icon
    • OS and version with computer icon (e.g., 'Debian 12')
    • Default port with terminal icon (e.g., 'Port: 8080')
    • Script ID with info icon
  • Persistent Settings: View preference is saved and restored across page reloads
  • Consistent Experience: Same view mode applies to both Available and Downloaded scripts pages

Technical Implementation

  • Added ViewToggle.tsx component with active state styling
  • Created ScriptCardList.tsx component with horizontal layout design
  • Implemented /api/settings/view-mode endpoint following existing settings pattern
  • Updated ScriptCard interface to include OS, version, and port information
  • Enhanced getScriptCardsWithCategories API to provide additional metadata
  • Modified ScriptsGrid.tsx and DownloadedScriptsTab.tsx with conditional rendering

User Experience

  • Default view remains card (grid) layout for familiarity
  • Toggle button is easily accessible below the filter controls
  • List view provides more information density for power users
  • Smooth transitions between views
  • Settings persist across browser sessions

Files Changed

  • src/app/_components/ViewToggle.tsx (new)
  • src/app/_components/ScriptCardList.tsx (new)
  • src/app/api/settings/view-mode/route.ts (new)
  • src/app/_components/ScriptsGrid.tsx (modified)
  • src/app/_components/DownloadedScriptsTab.tsx (modified)
  • src/server/api/routers/scripts.ts (modified)
  • src/types/script.ts (modified)

Testing

  • ✅ View toggle works on both Available and Downloaded scripts pages
  • ✅ View preference persists across page reloads
  • ✅ List view displays all enhanced information correctly
  • ✅ Card view remains unchanged and functional
  • ✅ No linting errors introduced
**Original Pull Request:** https://github.com/community-scripts/ProxmoxVE-Local/pull/101 **State:** closed **Merged:** Yes --- ## Overview This PR adds a view toggle feature that allows users to switch between card view (default) and list view on both the Available Scripts and Downloaded Scripts pages. ## Features Added - **View Toggle Component**: Clean toggle button with grid/list icons positioned below the FilterBar - **List View Layout**: Horizontal card design showing scripts in a compact row format - **Enhanced Information Display**: List view shows additional metadata: - Categories with tag icon - Creation date with calendar icon - OS and version with computer icon (e.g., 'Debian 12') - Default port with terminal icon (e.g., 'Port: 8080') - Script ID with info icon - **Persistent Settings**: View preference is saved and restored across page reloads - **Consistent Experience**: Same view mode applies to both Available and Downloaded scripts pages ## Technical Implementation - Added `ViewToggle.tsx` component with active state styling - Created `ScriptCardList.tsx` component with horizontal layout design - Implemented `/api/settings/view-mode` endpoint following existing settings pattern - Updated `ScriptCard` interface to include OS, version, and port information - Enhanced `getScriptCardsWithCategories` API to provide additional metadata - Modified `ScriptsGrid.tsx` and `DownloadedScriptsTab.tsx` with conditional rendering ## User Experience - Default view remains card (grid) layout for familiarity - Toggle button is easily accessible below the filter controls - List view provides more information density for power users - Smooth transitions between views - Settings persist across browser sessions ## Files Changed - `src/app/_components/ViewToggle.tsx` (new) - `src/app/_components/ScriptCardList.tsx` (new) - `src/app/api/settings/view-mode/route.ts` (new) - `src/app/_components/ScriptsGrid.tsx` (modified) - `src/app/_components/DownloadedScriptsTab.tsx` (modified) - `src/server/api/routers/scripts.ts` (modified) - `src/types/script.ts` (modified) ## Testing - ✅ View toggle works on both Available and Downloaded scripts pages - ✅ View preference persists across page reloads - ✅ List view displays all enhanced information correctly - ✅ Card view remains unchanged and functional - ✅ No linting errors introduced
saavagebueno added the pull-request label 2025-11-20 04:13:24 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
bug
enhancement
enhancement
feature
in progress
pull-request
Mirrored from GitHub Pull Request
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
saavagebueno
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: SVI/ProxmoxVE-Local#186
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?