Update AppImage

AppImage/components/onboarding-carousel.tsx

@@ -17,8 +17,13 @@ import {
   Cpu,
   FileText,
   Rocket,
+  Zap,
+  Shield,
+  Link2,
+  Gauge,
 } from "lucide-react"
 import Image from "next/image"
+import { Checkbox } from "./ui/checkbox"
 
 interface OnboardingSlide {
   id: number
@@ -27,6 +32,7 @@ interface OnboardingSlide {
   image?: string
   icon: React.ReactNode
   gradient: string
+  features?: { icon: React.ReactNode; text: string }[]
 }
 
 const slides: OnboardingSlide[] = [
@@ -40,6 +46,35 @@ const slides: OnboardingSlide[] = [
   },
   {
     id: 1,
+    title: "What's New in This Version",
+    description: "We've added exciting new features and improvements to make ProxMenux Monitor even better!",
+    icon: <Zap className="h-16 w-16" />,
+    gradient: "from-amber-500 via-orange-500 to-red-500",
+    features: [
+      {
+        icon: <Link2 className="h-5 w-5" />,
+        text: "Proxy Support - Access ProxMenux through reverse proxies with full functionality",
+      },
+      {
+        icon: <Shield className="h-5 w-5" />,
+        text: "Authentication System - Secure your dashboard with password protection",
+      },
+      {
+        icon: <Gauge className="h-5 w-5" />,
+        text: "PCIe Link Speed Detection - View NVMe drive connection speeds and detect performance issues",
+      },
+      {
+        icon: <HardDrive className="h-5 w-5" />,
+        text: "Enhanced Storage Display - Better formatting for disk sizes (auto-converts GB to TB when needed)",
+      },
+      {
+        icon: <Network className="h-5 w-5" />,
+        text: "SATA/SAS Information - View detailed interface information for all storage devices",
+      },
+    ],
+  },
+  {
+    id: 2,
     title: "System Overview",
     description:
       "Monitor your server's status in real-time: CPU, memory, temperature, system load and more. Everything in an intuitive and easy-to-understand dashboard.",
@@ -48,7 +83,7 @@ const slides: OnboardingSlide[] = [
     gradient: "from-blue-500 to-cyan-500",
   },
   {
-    id: 2,
+    id: 3,
     title: "Storage Management",
     description:
       "Visualize the status of all your disks and volumes. Detailed information on capacity, usage, SMART health, temperature and performance of each storage device.",
@@ -57,7 +92,7 @@ const slides: OnboardingSlide[] = [
     gradient: "from-cyan-500 to-teal-500",
   },
   {
-    id: 3,
+    id: 4,
     title: "Network Metrics",
     description:
       "Monitor network traffic in real-time. Bandwidth statistics, active interfaces, transfer speeds and historical usage graphs.",
@@ -66,7 +101,7 @@ const slides: OnboardingSlide[] = [
     gradient: "from-teal-500 to-green-500",
   },
   {
-    id: 4,
+    id: 5,
     title: "Virtual Machines & Containers",
     description:
       "Manage all your VMs and LXC containers from one place. Status, allocated resources, current usage and quick controls for each virtual machine.",
@@ -75,7 +110,7 @@ const slides: OnboardingSlide[] = [
     gradient: "from-green-500 to-emerald-500",
   },
   {
-    id: 5,
+    id: 6,
     title: "Hardware Information",
     description:
       "Complete details of your server hardware: CPU, RAM, GPU, disks, network, UPS and more. Technical specifications, models, serial numbers and status of each component.",
@@ -84,7 +119,7 @@ const slides: OnboardingSlide[] = [
     gradient: "from-emerald-500 to-blue-500",
   },
   {
-    id: 6,
+    id: 7,
     title: "System Logs",
     description:
       "Access system logs in real-time. Filter by event type, search for specific errors and keep complete track of your server activity. Download the displayed logs for further analysis.",
@@ -93,7 +128,7 @@ const slides: OnboardingSlide[] = [
     gradient: "from-blue-500 to-indigo-500",
   },
   {
-    id: 7,
+    id: 8,
     title: "Ready for the Future!",
     description:
       "ProxMenux Monitor is prepared to receive updates and improvements that will be added gradually, improving the user experience and being able to execute ProxMenux functions from the web panel.",
@@ -106,6 +141,7 @@ export function OnboardingCarousel() {
   const [open, setOpen] = useState(false)
   const [currentSlide, setCurrentSlide] = useState(0)
   const [direction, setDirection] = useState<"next" | "prev">("next")
+  const [dontShowAgain, setDontShowAgain] = useState(false)
 
   useEffect(() => {
     const hasSeenOnboarding = localStorage.getItem("proxmenux-onboarding-seen")
@@ -119,6 +155,9 @@ export function OnboardingCarousel() {
       setDirection("next")
       setCurrentSlide(currentSlide + 1)
     } else {
+      if (dontShowAgain) {
+        localStorage.setItem("proxmenux-onboarding-seen", "true")
+      }
       setOpen(false)
     }
   }
@@ -131,11 +170,9 @@ export function OnboardingCarousel() {
   }
 
   const handleSkip = () => {
-    setOpen(false)
-  }
-
-  const handleDontShowAgain = () => {
-    localStorage.setItem("proxmenux-onboarding-seen", "true")
+    if (dontShowAgain) {
+      localStorage.setItem("proxmenux-onboarding-seen", "true")
+    }
     setOpen(false)
   }
 
@@ -205,6 +242,20 @@ export function OnboardingCarousel() {
               </p>
             </div>
 
+            {slide.features && (
+              <div className="space-y-3 py-2">
+                {slide.features.map((feature, index) => (
+                  <div
+                    key={index}
+                    className="flex items-start gap-3 p-3 rounded-lg bg-muted/50 border border-border/50"
+                  >
+                    <div className="text-blue-500 mt-0.5">{feature.icon}</div>
+                    <p className="text-sm text-foreground leading-relaxed">{feature.text}</p>
+                  </div>
+                ))}
+              </div>
+            )}
+
             {/* Progress dots */}
             <div className="flex items-center justify-center gap-2 py-2 md:py-4">
               {slides.map((_, index) => (
@@ -255,17 +306,19 @@ export function OnboardingCarousel() {
               </div>
             </div>
 
-            {/* Don't show again */}
-            {currentSlide === slides.length - 1 && (
-              <div className="text-center pt-2">
-                <button
-                  onClick={handleDontShowAgain}
-                  className="text-sm text-muted-foreground hover:text-foreground transition-colors underline"
-                >
-                  Don't show again
-                </button>
-              </div>
-            )}
+            <div className="flex items-center justify-center gap-2 pt-2">
+              <Checkbox
+                id="dont-show-again"
+                checked={dontShowAgain}
+                onCheckedChange={(checked) => setDontShowAgain(checked as boolean)}
+              />
+              <label
+                htmlFor="dont-show-again"
+                className="text-sm text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
+              >
+                Don't show this again
+              </label>
+            </div>
           </div>
         </div>
       </DialogContent>