Update AppImage

AppImage/components/proxmox-dashboard.tsx

@@ -13,6 +13,7 @@ import { SystemLogs } from "./system-logs"
 import { Settings } from "./settings"
 import { OnboardingCarousel } from "./onboarding-carousel"
 import { HealthStatusModal } from "./health-status-modal"
+import { ReleaseNotesModal, useVersionCheck } from "./release-notes-modal"
 import { getApiUrl } from "../lib/api-config"
 import {
   RefreshCw,
@@ -76,6 +77,7 @@ export function ProxmoxDashboard() {
   const [showNavigation, setShowNavigation] = useState(true)
   const [lastScrollY, setLastScrollY] = useState(0)
   const [showHealthModal, setShowHealthModal] = useState(false)
+  const { showReleaseNotes, setShowReleaseNotes } = useVersionCheck()
 
   const fetchSystemData = useCallback(async () => {
     const apiUrl = getApiUrl("/api/system-info")
@@ -283,6 +285,7 @@ export function ProxmoxDashboard() {
   return (
     <div className="min-h-screen bg-background">
       <OnboardingCarousel />
+      <ReleaseNotesModal open={showReleaseNotes} onOpenChange={setShowReleaseNotes} />
 
       {!isServerConnected && (
         <div className="bg-red-500/10 border-b border-red-500/20 px-6 py-3">

AppImage/components/release-notes-modal.tsx

@@ -0,0 +1,149 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog"
+import { Button } from "./ui/button"
+import { ScrollArea } from "./ui/scroll-area"
+import { Badge } from "./ui/badge"
+import { Sparkles } from "lucide-react"
+
+const APP_VERSION = "1.0.1" // Sync with package.json
+
+const CHANGELOG = {
+  "1.0.1": {
+    date: "2025-02-11",
+    changes: {
+      added: [
+        "Automatic support for reverse proxies",
+        "New api-config.ts utility for automatic proxy configuration detection",
+        "Complete proxy configuration documentation",
+        "Configuration examples for Nginx, Caddy, Apache, Traefik, and Nginx Proxy Manager",
+      ],
+      changed: [
+        "Refactored API call system to use relative URLs when a proxy is detected",
+        "All components now use the new getApiUrl() utility for URL construction",
+        "Improved Flask server connection detection",
+      ],
+      fixed: [
+        "Issue where charts and metrics wouldn't load when accessed through a reverse proxy",
+        "Hardcoded URLs to port 8008 causing connection errors behind proxies",
+      ],
+    },
+  },
+  "1.0.0": {
+    date: "2025-02-01",
+    changes: {
+      added: [
+        "Complete monitoring dashboard for Proxmox",
+        "Real-time metrics for CPU, memory, network, and storage",
+        "VM and LXC container management",
+        "Detailed hardware information",
+        "System logs viewer",
+        "Light/dark theme support",
+        "Responsive design",
+      ],
+    },
+  },
+}
+
+interface ReleaseNotesModalProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function ReleaseNotesModal({ open, onOpenChange }: ReleaseNotesModalProps) {
+  const currentVersion = CHANGELOG[APP_VERSION as keyof typeof CHANGELOG]
+
+  const handleDontShowAgain = () => {
+    localStorage.setItem("proxmenux-last-seen-version", APP_VERSION)
+    onOpenChange(false)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl max-h-[80vh]">
+        <DialogHeader>
+          <div className="flex items-center gap-2">
+            <Sparkles className="h-5 w-5 text-blue-500" />
+            <DialogTitle>What's New in v{APP_VERSION}</DialogTitle>
+          </div>
+        </DialogHeader>
+
+        <ScrollArea className="max-h-[60vh] pr-4">
+          {currentVersion && (
+            <div className="space-y-4">
+              <div className="text-sm text-muted-foreground">Released on {currentVersion.date}</div>
+
+              {currentVersion.changes.added && (
+                <div>
+                  <Badge variant="default" className="mb-2">
+                    Added
+                  </Badge>
+                  <ul className="list-disc list-inside space-y-1 text-sm">
+                    {currentVersion.changes.added.map((item, idx) => (
+                      <li key={idx}>{item}</li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+
+              {currentVersion.changes.changed && (
+                <div>
+                  <Badge variant="secondary" className="mb-2">
+                    Changed
+                  </Badge>
+                  <ul className="list-disc list-inside space-y-1 text-sm">
+                    {currentVersion.changes.changed.map((item, idx) => (
+                      <li key={idx}>{item}</li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+
+              {currentVersion.changes.fixed && (
+                <div>
+                  <Badge variant="outline" className="mb-2">
+                    Fixed
+                  </Badge>
+                  <ul className="list-disc list-inside space-y-1 text-sm">
+                    {currentVersion.changes.fixed.map((item, idx) => (
+                      <li key={idx}>{item}</li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+            </div>
+          )}
+        </ScrollArea>
+
+        <div className="flex justify-between items-center pt-4 border-t">
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Close
+          </Button>
+          <Button onClick={handleDontShowAgain}>Don't show again for this version</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+// Hook to detect version changes
+export function useVersionCheck() {
+  const [showReleaseNotes, setShowReleaseNotes] = useState(false)
+
+  useEffect(() => {
+    const lastSeenVersion = localStorage.getItem("proxmenux-last-seen-version")
+
+    // Show release notes if:
+    // 1. User has never seen any version
+    // 2. Current version is different from last seen
+    if (!lastSeenVersion || lastSeenVersion !== APP_VERSION) {
+      setShowReleaseNotes(true)
+    }
+  }, [])
+
+  return { showReleaseNotes, setShowReleaseNotes }
+}
+
+// Export version and changelog for Settings page
+export { APP_VERSION, CHANGELOG }

AppImage/components/settings.tsx

@@ -6,6 +6,8 @@ import { Input } from "./ui/input"
 import { Label } from "./ui/label"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card"
 import { Shield, Lock, User, AlertCircle, CheckCircle, Info, LogOut, Wrench, Package } from "lucide-react"
+import { Sparkles, ChevronDown, ChevronUp } from "lucide-react"
+import { APP_VERSION, CHANGELOG } from "./release-notes-modal"
 import { getApiUrl } from "../lib/api-config"
 import { TwoFactorSetup } from "./two-factor-setup"
 
@@ -40,6 +42,9 @@ export function Settings() {
 
   const [proxmenuxTools, setProxmenuxTools] = useState<ProxMenuxTool[]>([])
   const [loadingTools, setLoadingTools] = useState(true)
+  const [expandedVersions, setExpandedVersions] = useState<Record<string, boolean>>({
+    [APP_VERSION]: true, // Current version expanded by default
+  })
 
   useEffect(() => {
     checkAuthStatus()
@@ -274,6 +279,13 @@ export function Settings() {
     window.location.reload()
   }
 
+  const toggleVersion = (version: string) => {
+    setExpandedVersions((prev) => ({
+      ...prev,
+      [version]: !prev[version],
+    }))
+  }
+
   return (
     <div className="space-y-6">
       <div>
@@ -566,6 +578,116 @@ export function Settings() {
         </CardContent>
       </Card>
 
+      {/* Release Notes */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Sparkles className="h-5 w-5 text-blue-500" />
+            <CardTitle>Release Notes</CardTitle>
+          </div>
+          <CardDescription>View changes and improvements in ProxMenux Monitor</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center justify-between p-4 bg-blue-500/10 rounded-lg border border-blue-500/20">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center">
+                <Package className="h-5 w-5 text-blue-500" />
+              </div>
+              <div>
+                <p className="font-medium">Current Version</p>
+                <p className="text-sm text-muted-foreground">ProxMenux Monitor v{APP_VERSION}</p>
+              </div>
+            </div>
+            <div className="px-3 py-1 rounded-full text-sm font-medium bg-blue-500 text-white">Latest</div>
+          </div>
+
+          <div className="space-y-3">
+            {Object.entries(CHANGELOG).map(([version, details]) => {
+              const isExpanded = expandedVersions[version]
+              const isCurrent = version === APP_VERSION
+
+              return (
+                <div key={version} className="border border-border rounded-lg overflow-hidden">
+                  <button
+                    onClick={() => toggleVersion(version)}
+                    className="w-full flex items-center justify-between p-4 hover:bg-muted/50 transition-colors"
+                  >
+                    <div className="flex items-center gap-3">
+                      {isCurrent && <div className="w-2 h-2 rounded-full bg-blue-500 animate-pulse" />}
+                      <div className="text-left">
+                        <div className="flex items-center gap-2">
+                          <span className="font-semibold">Version {version}</span>
+                          {isCurrent && (
+                            <span className="text-xs px-2 py-0.5 rounded-full bg-blue-500/10 text-blue-500">
+                              Current
+                            </span>
+                          )}
+                        </div>
+                        <span className="text-sm text-muted-foreground">{details.date}</span>
+                      </div>
+                    </div>
+                    {isExpanded ? (
+                      <ChevronUp className="h-5 w-5 text-muted-foreground" />
+                    ) : (
+                      <ChevronDown className="h-5 w-5 text-muted-foreground" />
+                    )}
+                  </button>
+
+                  {isExpanded && (
+                    <div className="px-4 pb-4 space-y-4 border-t border-border pt-4">
+                      {details.changes.added && (
+                        <div>
+                          <div className="flex items-center gap-2 mb-2">
+                            <div className="px-2 py-0.5 rounded text-xs font-medium bg-green-500/10 text-green-500">
+                              Added
+                            </div>
+                          </div>
+                          <ul className="list-disc list-inside space-y-1 text-sm text-muted-foreground ml-2">
+                            {details.changes.added.map((item, idx) => (
+                              <li key={idx}>{item}</li>
+                            ))}
+                          </ul>
+                        </div>
+                      )}
+
+                      {details.changes.changed && (
+                        <div>
+                          <div className="flex items-center gap-2 mb-2">
+                            <div className="px-2 py-0.5 rounded text-xs font-medium bg-blue-500/10 text-blue-500">
+                              Changed
+                            </div>
+                          </div>
+                          <ul className="list-disc list-inside space-y-1 text-sm text-muted-foreground ml-2">
+                            {details.changes.changed.map((item, idx) => (
+                              <li key={idx}>{item}</li>
+                            ))}
+                          </ul>
+                        </div>
+                      )}
+
+                      {details.changes.fixed && (
+                        <div>
+                          <div className="flex items-center gap-2 mb-2">
+                            <div className="px-2 py-0.5 rounded text-xs font-medium bg-orange-500/10 text-orange-500">
+                              Fixed
+                            </div>
+                          </div>
+                          <ul className="list-disc list-inside space-y-1 text-sm text-muted-foreground ml-2">
+                            {details.changes.fixed.map((item, idx) => (
+                              <li key={idx}>{item}</li>
+                            ))}
+                          </ul>
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </CardContent>
+      </Card>
+
       {/* ProxMenux Optimizations */}
       <Card>
         <CardHeader>

AppImage/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "proxmenux-monitor",
+  "name": "ProxMenux-Monitor",
   "version": "1.0.1",
   "description": "Proxmox System Monitoring Dashboard",
   "private": true,