Skip to content

feat: Implement comprehensive help system with contextual icons #122

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 4 commits into from
Oct 13, 2025
Merged

feat: Implement comprehensive help system with contextual icons #122

merged 4 commits into from
Oct 13, 2025

Conversation

@michelroegl-brunner
Copy link
Member

@michelroegl-brunner michelroegl-brunner commented Oct 13, 2025 •
edited
Loading

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.

@michelroegl-brunner
feat: implement comprehensive help system with contextual icons
8bab4c4 
- Add HelpModal component with navigation sidebar and 7 help sections
- Add HelpButton component for main header controls
- Add ContextualHelpIcon component for contextual help throughout UI
- Add help icons to all major UI sections:
  - Settings modals (Server Settings, General Settings)
  - Sync button with update system help
  - Tab headers (Available, Downloaded, Installed Scripts)
  - FilterBar and CategorySidebar
- Add comprehensive help content covering:
  - Server Settings: PVE server management, auth types, color coding
  - General Settings: Save filters, GitHub integration, authentication
  - Sync Button: Script metadata syncing explanation
  - Available Scripts: Browsing, filtering, downloading
  - Downloaded Scripts: Local script management and updates
  - Installed Scripts: Auto-detection feature (primary focus), manual management
  - Update System: Automatic/manual update process, release notes
- Improve VersionDisplay: remove 'Update Available' text, add 'Release Notes:' label
- Make help icons more noticeable with increased size
- Fix dark theme compatibility issues in help modal
@michelroegl-brunner michelroegl-brunner requested a review from a team as a code owner October 13, 2025 12:32
@michelroegl-brunner michelroegl-brunner self-assigned this Oct 13, 2025
@michelroegl-brunner
fix: resolve linting errors in HelpModal component
c975beb 
- Remove unused Filter import
- Fix unescaped entities by replacing apostrophes and quotes with HTML entities
- All linting errors resolved
@michelroegl-brunner
feat: implement release notes modal system
68f3711 
- Add getAllReleases API endpoint to fetch GitHub releases with notes
- Create ReleaseNotesModal component with localStorage version tracking
- Add sticky Footer component with release notes link
- Make version badge clickable to open release notes
- Auto-show modal after updates when version changes
- Track last seen version in localStorage to prevent repeated shows
- Highlight new version in modal when opened after update
- Add manual access via footer and version badge clicks
@michelroegl-brunner
fix: use nullish coalescing operator in ReleaseNotesModal
3a4047c 
- Replace logical OR (||) with nullish coalescing (??) operator
- Fixes ESLint prefer-nullish-coalescing rule violation
- Ensures build passes successfully
@michelroegl-brunner michelroegl-brunner merged commit aaa09b4 into main Oct 13, 2025
4 checks passed
@michelroegl-brunner michelroegl-brunner deleted the feat/help_system branch October 14, 2025 06:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@michelroegl-brunner michelroegl-brunner

Labels

feature

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@michelroegl-brunner