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] [MERGED] feat: Add card/list view toggle with enhanced list view #182

New Issue
Open
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

📋 Pull Request Information

Original PR: https://github.com/community-scripts/ProxmoxVE-Local/pull/101
Author: @michelroegl-brunner
Created: 10/10/2025
Status: ✅ Merged
Merged: 10/10/2025
Merged by: @michelroegl-brunner

Base: main ← Head: feature/view-toggle-card-list

📝 Commits (2)

  • db73624 feat: Add card/list view toggle with enhanced list view
  • 3f303a4 fix: Resolve TypeScript/ESLint build errors

📊 Changes

7 files changed (+473 additions, -59 deletions)

View changed files

📝 src/app/_components/DownloadedScriptsTab.tsx (+86 -39)
➕ src/app/_components/ScriptCardList.tsx (+164 -0)
📝 src/app/_components/ScriptsGrid.tsx (+84 -20)
➕ src/app/_components/ViewToggle.tsx (+45 -0)
➕ src/app/api/settings/view-mode/route.ts (+81 -0)
📝 src/server/api/routers/scripts.ts (+10 -0)
📝 src/types/script.ts (+3 -0)

📄 Description

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

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/community-scripts/ProxmoxVE-Local/pull/101 **Author:** [@michelroegl-brunner](https://github.com/michelroegl-brunner) **Created:** 10/10/2025 **Status:** ✅ Merged **Merged:** 10/10/2025 **Merged by:** [@michelroegl-brunner](https://github.com/michelroegl-brunner) **Base:** `main` ← **Head:** `feature/view-toggle-card-list` --- ### 📝 Commits (2) - [`db73624`](https://github.com/community-scripts/ProxmoxVE-Local/commit/db73624517c905cdea7700a1b5731a7a7ff929b0) feat: Add card/list view toggle with enhanced list view - [`3f303a4`](https://github.com/community-scripts/ProxmoxVE-Local/commit/3f303a40ccb3fe78eefffc68e2282e59128faabb) fix: Resolve TypeScript/ESLint build errors ### 📊 Changes **7 files changed** (+473 additions, -59 deletions) <details> <summary>View changed files</summary> 📝 `src/app/_components/DownloadedScriptsTab.tsx` (+86 -39) ➕ `src/app/_components/ScriptCardList.tsx` (+164 -0) 📝 `src/app/_components/ScriptsGrid.tsx` (+84 -20) ➕ `src/app/_components/ViewToggle.tsx` (+45 -0) ➕ `src/app/api/settings/view-mode/route.ts` (+81 -0) 📝 `src/server/api/routers/scripts.ts` (+10 -0) 📝 `src/types/script.ts` (+3 -0) </details> ### 📄 Description ## 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 --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
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#182
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?