feat: Implement comprehensive help system with contextual icons (#122)

* feat: implement comprehensive help system with contextual icons

- 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

* fix: resolve linting errors in HelpModal component

- Remove unused Filter import
- Fix unescaped entities by replacing apostrophes and quotes with HTML entities
- All linting errors resolved

* feat: implement release notes modal system

- 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

* fix: use nullish coalescing operator in ReleaseNotesModal

- Replace logical OR (||) with nullish coalescing (??) operator
- Fixes ESLint prefer-nullish-coalescing rule violation
- Ensures build passes successfully

Author: michelroegl-brunner

src/app/_components/CategorySidebar.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import { ContextualHelpIcon } from './ContextualHelpIcon';
 
 interface CategorySidebarProps {
   categories: string[];
@@ -201,9 +202,12 @@ export function CategorySidebar({
       {/* Header */}
       <div className="flex items-center justify-between p-4 border-b border-border">
         {!isCollapsed && (
-          <div>
-            <h3 className="text-lg font-semibold text-foreground">Categories</h3>
-            <p className="text-sm text-muted-foreground">{totalScripts} Total scripts</p>
+          <div className="flex items-center justify-between w-full">
+            <div>
+              <h3 className="text-lg font-semibold text-foreground">Categories</h3>
+              <p className="text-sm text-muted-foreground">{totalScripts} Total scripts</p>
+            </div>
+            <ContextualHelpIcon section="available-scripts" tooltip="Help with categories" />
           </div>
         )}
         <button

src/app/_components/ContextualHelpIcon.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { useState } from 'react';
+import { HelpModal } from './HelpModal';
+import { Button } from './ui/button';
+import { HelpCircle } from 'lucide-react';
+
+interface ContextualHelpIconProps {
+  section: string;
+  className?: string;
+  size?: 'sm' | 'default';
+  tooltip?: string;
+}
+
+export function ContextualHelpIcon({ 
+  section, 
+  className = '', 
+  size = 'sm',
+  tooltip = 'Help'
+}: ContextualHelpIconProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const sizeClasses = size === 'sm' 
+    ? 'h-7 w-7 p-1.5' 
+    : 'h-9 w-9 p-2';
+
+  return (
+    <>
+      <Button
+        onClick={() => setIsOpen(true)}
+        variant="ghost"
+        size="icon"
+        className={`${sizeClasses} text-muted-foreground hover:text-foreground hover:bg-muted ${className}`}
+        title={tooltip}
+      >
+        <HelpCircle className="w-4 h-4" />
+      </Button>
+
+      <HelpModal 
+        isOpen={isOpen} 
+        onClose={() => setIsOpen(false)} 
+        initialSection={section}
+      />
+    </>
+  );
+}

src/app/_components/FilterBar.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState } from "react";
 import { Button } from "./ui/button";
+import { ContextualHelpIcon } from "./ContextualHelpIcon";
 import { Package, Monitor, Wrench, Server, FileText, Calendar, RefreshCw, Filter } from "lucide-react";
 
 export interface FilterState {
@@ -104,6 +105,14 @@ export function FilterBar({
         </div>
       )}
 
+      {/* Filter Header */}
+      {!isLoadingFilters && (
+        <div className="mb-4 flex items-center justify-between">
+          <h3 className="text-lg font-medium text-foreground">Filter Scripts</h3>
+          <ContextualHelpIcon section="available-scripts" tooltip="Help with filtering and searching" />
+        </div>
+      )}
+
       {/* Search Bar */}
       <div className="mb-4">
         <div className="relative max-w-md w-full">

src/app/_components/Footer.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { api } from '~/trpc/react';
+import { Button } from './ui/button';
+import { ExternalLink, FileText } from 'lucide-react';
+
+interface FooterProps {
+  onOpenReleaseNotes: () => void;
+}
+
+export function Footer({ onOpenReleaseNotes }: FooterProps) {
+  const { data: versionData } = api.version.getCurrentVersion.useQuery();
+
+  return (
+    <footer className="sticky bottom-0 mt-auto border-t border-border bg-muted/30 py-6 backdrop-blur-sm">
+      <div className="container mx-auto px-4">
+        <div className="flex flex-col sm:flex-row items-center justify-between gap-4 text-sm text-muted-foreground">
+          <div className="flex items-center gap-4">
+            <span>© 2024 PVE Scripts Local</span>
+            {versionData?.success && versionData.version && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={onOpenReleaseNotes}
+                className="h-auto p-1 text-xs hover:text-foreground"
+              >
+                v{versionData.version}
+              </Button>
+            )}
+          </div>
+          
+          <div className="flex items-center gap-4">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onOpenReleaseNotes}
+              className="h-auto p-2 text-xs hover:text-foreground"
+            >
+              <FileText className="h-3 w-3 mr-1" />
+              Release Notes
+            </Button>
+            
+            <Button
+              variant="ghost"
+              size="sm"
+              asChild
+              className="h-auto p-2 text-xs hover:text-foreground"
+            >
+              <a
+                href="https://github.com/community-scripts/ProxmoxVE-Local"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-1"
+              >
+                <ExternalLink className="h-3 w-3" />
+                GitHub
+              </a>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

src/app/_components/GeneralSettingsModal.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
 import { Toggle } from './ui/toggle';
+import { ContextualHelpIcon } from './ContextualHelpIcon';
 
 interface GeneralSettingsModalProps {
   isOpen: boolean;
@@ -280,7 +281,10 @@ export function GeneralSettingsModal({ isOpen, onClose }: GeneralSettingsModalPr
       <div className="bg-card rounded-lg shadow-xl max-w-4xl w-full max-h-[95vh] sm:max-h-[90vh] overflow-hidden">
         {/* Header */}
         <div className="flex items-center justify-between p-4 sm:p-6 border-b border-border">
-          <h2 className="text-xl sm:text-2xl font-bold text-card-foreground">Settings</h2>
+          <div className="flex items-center gap-2">
+            <h2 className="text-xl sm:text-2xl font-bold text-card-foreground">Settings</h2>
+            <ContextualHelpIcon section="general-settings" tooltip="Help with General Settings" />
+          </div>
           <Button
             onClick={onClose}
             variant="ghost"

src/app/_components/HelpButton.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { useState } from 'react';
+import { HelpModal } from './HelpModal';
+import { Button } from './ui/button';
+import { HelpCircle } from 'lucide-react';
+
+interface HelpButtonProps {
+  initialSection?: string;
+}
+
+export function HelpButton({ initialSection }: HelpButtonProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <div className="flex flex-col sm:flex-row sm:items-center gap-3">
+        <div className="text-sm text-muted-foreground font-medium">
+          Need help? 
+        </div>
+        <Button
+          onClick={() => setIsOpen(true)}
+          variant="outline"
+          size="default"
+          className="inline-flex items-center"
+          title="Open Help"
+        >
+          <HelpCircle className="w-5 h-5 mr-2" />
+          Help
+        </Button>
+      </div>
+
+      <HelpModal 
+        isOpen={isOpen} 
+        onClose={() => setIsOpen(false)} 
+        initialSection={initialSection}
+      />
+    </>
+  );
+}