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 #122] [MERGED] feat: Implement comprehensive help system with contextual icons #198

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

📋 Pull Request Information

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

Base: main ← Head: feat/help_system

📝 Commits (4)

  • 8bab4c4 feat: implement comprehensive help system with contextual icons
  • c975beb fix: resolve linting errors in HelpModal component
  • 68f3711 feat: implement release notes modal system
  • 3a4047c fix: use nullish coalescing operator in ReleaseNotesModal

📊 Changes

13 files changed (+1050 additions, -97 deletions)

View changed files

📝 src/app/_components/CategorySidebar.tsx (+7 -3)
➕ src/app/_components/ContextualHelpIcon.tsx (+46 -0)
📝 src/app/_components/FilterBar.tsx (+9 -0)
➕ src/app/_components/Footer.tsx (+64 -0)
📝 src/app/_components/GeneralSettingsModal.tsx (+5 -1)
➕ src/app/_components/HelpButton.tsx (+40 -0)
➕ src/app/_components/HelpModal.tsx (+492 -0)
➕ src/app/_components/ReleaseNotesModal.tsx (+202 -0)
📝 src/app/_components/ResyncButton.tsx (+25 -21)
📝 src/app/_components/SettingsModal.tsx (+5 -1)
📝 src/app/_components/VersionDisplay.tsx (+16 -21)
📝 src/app/page.tsx (+101 -50)
📝 src/server/api/routers/version.ts (+38 -0)

📄 Description

Overview

This PR implements a comprehensive help system for the PVE Scripts Management application, featuring contextual help icons throughout the UI, a detailed help modal with navigation, and a complete release notes modal system.

Features Added

🆕 New Components

  • HelpModal: Comprehensive modal with navigation sidebar containing 7 help sections
  • HelpButton: Main help button for header controls
  • ContextualHelpIcon: Reusable help icon component for contextual help
  • ReleaseNotesModal: Modal displaying GitHub release notes with version tracking
  • Footer: Sticky footer with release notes link and version display

📍 Help Icons Added

  • Settings Modals: Help icons in Server Settings and General Settings modal headers
  • Sync Button: Help icon next to sync button with update system documentation
  • Tab Headers: Help icons for Available Scripts, Downloaded Scripts, and Installed Scripts tabs
  • FilterBar: Help icon in filter section header
  • CategorySidebar: Help icon in categories section header

📚 Help Content Sections

  1. Server Settings: PVE server management, authentication types, color coding
  2. General Settings: Save filters, GitHub integration, authentication
  3. Sync Button: Script metadata syncing explanation
  4. Available Scripts: Browsing, filtering, downloading scripts
  5. Downloaded Scripts: Local script management and updates
  6. Installed Scripts: Auto-detection feature (primary focus), manual management
  7. Update System: Automatic/manual update process, release notes

🆕 Release Notes System

  • Auto-show after updates: Modal automatically opens when current version > last seen version
  • Manual access: Click version badge or footer link to open modal anytime
  • Version tracking: Uses localStorage to remember which version user has seen
  • GitHub integration: Fetches release notes directly from GitHub API
  • Highlighting: Shows "New" badge for the updated version
  • All release notes: Shows complete history, not just latest

🎨 UI Improvements

  • VersionDisplay: Removed redundant 'Update Available' text, added 'Release Notes:' label, made version badge clickable
  • Help Icons: Made more noticeable with increased size (33% larger)
  • Dark Theme: Fixed compatibility issues with proper color schemes
  • Responsive Design: Works on mobile, tablet, and desktop
  • Sticky Footer: Footer stays at bottom of viewport with backdrop blur

Technical Details

  • Uses lucide-react icons for consistency
  • Contextual help icons open modal directly to relevant section
  • Comprehensive documentation covering all major features
  • Special emphasis on script auto-detection feature as requested
  • Clean, professional appearance that doesn't clutter the interface
  • localStorage-based version tracking for release notes
  • GitHub API integration for fetching release data
  • TRPC endpoints for version and release management

Testing

  • All help icons are functional and open correct sections
  • Modal navigation works properly
  • Responsive design tested on different screen sizes
  • Dark theme compatibility verified
  • Release notes modal auto-shows after version changes
  • Manual access via version badge and footer works
  • Version tracking prevents repeated modal shows
  • No linting errors

Files Changed

New Files

  • src/app/_components/HelpModal.tsx
  • src/app/_components/HelpButton.tsx
  • src/app/_components/ContextualHelpIcon.tsx
  • src/app/_components/ReleaseNotesModal.tsx
  • src/app/_components/Footer.tsx

Modified Files

  • src/app/page.tsx - Added HelpButton, tab help icons, release notes modal integration
  • src/app/_components/SettingsModal.tsx - Added help icon
  • src/app/_components/GeneralSettingsModal.tsx - Added help icon
  • src/app/_components/ResyncButton.tsx - Added help icon
  • src/app/_components/FilterBar.tsx - Added help icon and header
  • src/app/_components/CategorySidebar.tsx - Added help icon
  • src/app/_components/VersionDisplay.tsx - UI improvements, help icon, clickable version badge
  • src/server/api/routers/version.ts - Added getAllReleases endpoint

This comprehensive update significantly improves user experience by providing contextual assistance, comprehensive documentation, and automatic release notes display after updates.

🔄 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/122 **Author:** [@michelroegl-brunner](https://github.com/michelroegl-brunner) **Created:** 10/13/2025 **Status:** ✅ Merged **Merged:** 10/13/2025 **Merged by:** [@michelroegl-brunner](https://github.com/michelroegl-brunner) **Base:** `main` ← **Head:** `feat/help_system` --- ### 📝 Commits (4) - [`8bab4c4`](https://github.com/community-scripts/ProxmoxVE-Local/commit/8bab4c4bff1d3f960fbd8ac82691b25637abdece) feat: implement comprehensive help system with contextual icons - [`c975beb`](https://github.com/community-scripts/ProxmoxVE-Local/commit/c975beba2ec983ce94593b37606439961fe3ad61) fix: resolve linting errors in HelpModal component - [`68f3711`](https://github.com/community-scripts/ProxmoxVE-Local/commit/68f3711c99f2f85c05229739a5721c52eb6587fd) feat: implement release notes modal system - [`3a4047c`](https://github.com/community-scripts/ProxmoxVE-Local/commit/3a4047c146abbaa399776e566fec8871dc31bb64) fix: use nullish coalescing operator in ReleaseNotesModal ### 📊 Changes **13 files changed** (+1050 additions, -97 deletions) <details> <summary>View changed files</summary> 📝 `src/app/_components/CategorySidebar.tsx` (+7 -3) ➕ `src/app/_components/ContextualHelpIcon.tsx` (+46 -0) 📝 `src/app/_components/FilterBar.tsx` (+9 -0) ➕ `src/app/_components/Footer.tsx` (+64 -0) 📝 `src/app/_components/GeneralSettingsModal.tsx` (+5 -1) ➕ `src/app/_components/HelpButton.tsx` (+40 -0) ➕ `src/app/_components/HelpModal.tsx` (+492 -0) ➕ `src/app/_components/ReleaseNotesModal.tsx` (+202 -0) 📝 `src/app/_components/ResyncButton.tsx` (+25 -21) 📝 `src/app/_components/SettingsModal.tsx` (+5 -1) 📝 `src/app/_components/VersionDisplay.tsx` (+16 -21) 📝 `src/app/page.tsx` (+101 -50) 📝 `src/server/api/routers/version.ts` (+38 -0) </details> ### 📄 Description ## Overview This PR implements a comprehensive help system for the PVE Scripts Management application, featuring contextual help icons throughout the UI, a detailed help modal with navigation, and a complete release notes modal system. ## Features Added ### 🆕 New Components - **HelpModal**: Comprehensive modal with navigation sidebar containing 7 help sections - **HelpButton**: Main help button for header controls - **ContextualHelpIcon**: Reusable help icon component for contextual help - **ReleaseNotesModal**: Modal displaying GitHub release notes with version tracking - **Footer**: Sticky footer with release notes link and version display ### 📍 Help Icons Added - **Settings Modals**: Help icons in Server Settings and General Settings modal headers - **Sync Button**: Help icon next to sync button with update system documentation - **Tab Headers**: Help icons for Available Scripts, Downloaded Scripts, and Installed Scripts tabs - **FilterBar**: Help icon in filter section header - **CategorySidebar**: Help icon in categories section header ### 📚 Help Content Sections 1. **Server Settings**: PVE server management, authentication types, color coding 2. **General Settings**: Save filters, GitHub integration, authentication 3. **Sync Button**: Script metadata syncing explanation 4. **Available Scripts**: Browsing, filtering, downloading scripts 5. **Downloaded Scripts**: Local script management and updates 6. **Installed Scripts**: Auto-detection feature (primary focus), manual management 7. **Update System**: Automatic/manual update process, release notes ### 🆕 Release Notes System - **Auto-show after updates**: Modal automatically opens when current version > last seen version - **Manual access**: Click version badge or footer link to open modal anytime - **Version tracking**: Uses localStorage to remember which version user has seen - **GitHub integration**: Fetches release notes directly from GitHub API - **Highlighting**: Shows "New" badge for the updated version - **All release notes**: Shows complete history, not just latest ### 🎨 UI Improvements - **VersionDisplay**: Removed redundant 'Update Available' text, added 'Release Notes:' label, made version badge clickable - **Help Icons**: Made more noticeable with increased size (33% larger) - **Dark Theme**: Fixed compatibility issues with proper color schemes - **Responsive Design**: Works on mobile, tablet, and desktop - **Sticky Footer**: Footer stays at bottom of viewport with backdrop blur ## Technical Details - Uses lucide-react icons for consistency - Contextual help icons open modal directly to relevant section - Comprehensive documentation covering all major features - Special emphasis on script auto-detection feature as requested - Clean, professional appearance that doesn't clutter the interface - localStorage-based version tracking for release notes - GitHub API integration for fetching release data - TRPC endpoints for version and release management ## Testing - All help icons are functional and open correct sections - Modal navigation works properly - Responsive design tested on different screen sizes - Dark theme compatibility verified - Release notes modal auto-shows after version changes - Manual access via version badge and footer works - Version tracking prevents repeated modal shows - No linting errors ## Files Changed ### New Files - `src/app/_components/HelpModal.tsx` - `src/app/_components/HelpButton.tsx` - `src/app/_components/ContextualHelpIcon.tsx` - `src/app/_components/ReleaseNotesModal.tsx` - `src/app/_components/Footer.tsx` ### Modified Files - `src/app/page.tsx` - Added HelpButton, tab help icons, release notes modal integration - `src/app/_components/SettingsModal.tsx` - Added help icon - `src/app/_components/GeneralSettingsModal.tsx` - Added help icon - `src/app/_components/ResyncButton.tsx` - Added help icon - `src/app/_components/FilterBar.tsx` - Added help icon and header - `src/app/_components/CategorySidebar.tsx` - Added help icon - `src/app/_components/VersionDisplay.tsx` - UI improvements, help icon, clickable version badge - `src/server/api/routers/version.ts` - Added getAllReleases endpoint This comprehensive update significantly improves user experience by providing contextual assistance, comprehensive documentation, and automatic release notes display after updates. --- <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:28 -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#198
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?