Update AppImage

AppImage/components/proxmox-dashboard.tsx

@@ -27,7 +27,6 @@ import {
 import Image from "next/image"
 import { ThemeToggle } from "./theme-toggle"
 import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet"
-import { useScrollDirection } from "@/hooks/use-scroll-direction"
 
 interface SystemStatus {
   status: "healthy" | "warning" | "critical"
@@ -61,8 +60,6 @@ export function ProxmoxDashboard() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
   const [activeTab, setActiveTab] = useState("overview")
 
-  const { scrollDirection, isAtTop } = useScrollDirection()
-
   const fetchSystemData = useCallback(async () => {
     console.log("[v0] Fetching system data from Flask server...")
     console.log("[v0] Current window location:", window.location.href)
@@ -297,185 +294,169 @@ export function ProxmoxDashboard() {
 
       <div className="container mx-auto px-4 md:px-6 py-4 md:py-6">
         <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4 md:space-y-6">
-          <div className="sticky top-[88px] md:top-[72px] left-0 right-0 z-40 mt-4 md:mt-4">
-            <div
-              className={`transition-transform duration-300 ${
-                scrollDirection === "down" && !isAtTop ? "-translate-y-[200px]" : "translate-y-0"
-              }`}
+          <TabsList className="hidden md:grid w-full grid-cols-6 bg-card border border-border">
+            <TabsTrigger
+              value="overview"
+              className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
             >
-              <div className="container mx-auto">
-                <TabsList className="hidden md:grid w-full grid-cols-6 bg-card border border-border">
-                  <TabsTrigger
-                    value="overview"
-                    className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
-                  >
-                    Overview
-                  </TabsTrigger>
-                  <TabsTrigger
-                    value="storage"
-                    className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
-                  >
-                    Storage
-                  </TabsTrigger>
-                  <TabsTrigger
-                    value="network"
-                    className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
-                  >
-                    Network
-                  </TabsTrigger>
-                  <TabsTrigger
-                    value="vms"
-                    className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
-                  >
-                    VMs & LXCs
-                  </TabsTrigger>
-                  <TabsTrigger
-                    value="hardware"
-                    className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
-                  >
-                    Hardware
-                  </TabsTrigger>
-                  <TabsTrigger
-                    value="logs"
-                    className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
-                  >
-                    System Logs
-                  </TabsTrigger>
-                </TabsList>
+              Overview
+            </TabsTrigger>
+            <TabsTrigger
+              value="storage"
+              className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
+            >
+              Storage
+            </TabsTrigger>
+            <TabsTrigger
+              value="network"
+              className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
+            >
+              Network
+            </TabsTrigger>
+            <TabsTrigger
+              value="vms"
+              className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
+            >
+              VMs & LXCs
+            </TabsTrigger>
+            <TabsTrigger
+              value="hardware"
+              className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
+            >
+              Hardware
+            </TabsTrigger>
+            <TabsTrigger
+              value="logs"
+              className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
+            >
+              System Logs
+            </TabsTrigger>
+          </TabsList>
 
-                <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
-                  <div className="md:hidden">
-                    <SheetTrigger asChild>
-                      <Button variant="outline" className="w-full justify-between bg-card border-border">
-                        <span>{getActiveTabLabel()}</span>
-                        <Menu className="h-4 w-4" />
-                      </Button>
-                    </SheetTrigger>
-                  </div>
-                  <SheetContent side="top" className="bg-card border-border">
-                    <div className="flex flex-col gap-2 mt-4">
-                      <Button
-                        variant="ghost"
-                        onClick={() => {
-                          setActiveTab("overview")
-                          setMobileMenuOpen(false)
-                        }}
-                        className={`w-full justify-start gap-3 ${
-                          activeTab === "overview"
-                            ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
-                            : ""
-                        }`}
-                      >
-                        <LayoutDashboard className="h-5 w-5" />
-                        <span>Overview</span>
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        onClick={() => {
-                          setActiveTab("storage")
-                          setMobileMenuOpen(false)
-                        }}
-                        className={`w-full justify-start gap-3 ${
-                          activeTab === "storage"
-                            ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
-                            : ""
-                        }`}
-                      >
-                        <HardDrive className="h-5 w-5" />
-                        <span>Storage</span>
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        onClick={() => {
-                          setActiveTab("network")
-                          setMobileMenuOpen(false)
-                        }}
-                        className={`w-full justify-start gap-3 ${
-                          activeTab === "network"
-                            ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
-                            : ""
-                        }`}
-                      >
-                        <NetworkIcon className="h-5 w-5" />
-                        <span>Network</span>
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        onClick={() => {
-                          setActiveTab("vms")
-                          setMobileMenuOpen(false)
-                        }}
-                        className={`w-full justify-start gap-3 ${
-                          activeTab === "vms"
-                            ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
-                            : ""
-                        }`}
-                      >
-                        <Box className="h-5 w-5" />
-                        <span>VMs & LXCs</span>
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        onClick={() => {
-                          setActiveTab("hardware")
-                          setMobileMenuOpen(false)
-                        }}
-                        className={`w-full justify-start gap-3 ${
-                          activeTab === "hardware"
-                            ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
-                            : ""
-                        }`}
-                      >
-                        <Cpu className="h-5 w-5" />
-                        <span>Hardware</span>
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        onClick={() => {
-                          setActiveTab("logs")
-                          setMobileMenuOpen(false)
-                        }}
-                        className={`w-full justify-start gap-3 ${
-                          activeTab === "logs"
-                            ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
-                            : ""
-                        }`}
-                      >
-                        <FileText className="h-5 w-5" />
-                        <span>System Logs</span>
-                      </Button>
-                    </div>
-                  </SheetContent>
-                </Sheet>
-              </div>
+          <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
+            <div className="md:hidden">
+              <SheetTrigger asChild>
+                <Button variant="outline" className="w-full justify-between bg-card border-border">
+                  <span>{getActiveTabLabel()}</span>
+                  <Menu className="h-4 w-4" />
+                </Button>
+              </SheetTrigger>
             </div>
-          </div>
+            <SheetContent side="top" className="bg-card border-border">
+              <div className="flex flex-col gap-2 mt-4">
+                <Button
+                  variant="ghost"
+                  onClick={() => {
+                    setActiveTab("overview")
+                    setMobileMenuOpen(false)
+                  }}
+                  className={`w-full justify-start gap-3 ${
+                    activeTab === "overview"
+                      ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
+                      : ""
+                  }`}
+                >
+                  <LayoutDashboard className="h-5 w-5" />
+                  <span>Overview</span>
+                </Button>
+                <Button
+                  variant="ghost"
+                  onClick={() => {
+                    setActiveTab("storage")
+                    setMobileMenuOpen(false)
+                  }}
+                  className={`w-full justify-start gap-3 ${
+                    activeTab === "storage"
+                      ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
+                      : ""
+                  }`}
+                >
+                  <HardDrive className="h-5 w-5" />
+                  <span>Storage</span>
+                </Button>
+                <Button
+                  variant="ghost"
+                  onClick={() => {
+                    setActiveTab("network")
+                    setMobileMenuOpen(false)
+                  }}
+                  className={`w-full justify-start gap-3 ${
+                    activeTab === "network"
+                      ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
+                      : ""
+                  }`}
+                >
+                  <NetworkIcon className="h-5 w-5" />
+                  <span>Network</span>
+                </Button>
+                <Button
+                  variant="ghost"
+                  onClick={() => {
+                    setActiveTab("vms")
+                    setMobileMenuOpen(false)
+                  }}
+                  className={`w-full justify-start gap-3 ${
+                    activeTab === "vms" ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none" : ""
+                  }`}
+                >
+                  <Box className="h-5 w-5" />
+                  <span>VMs & LXCs</span>
+                </Button>
+                <Button
+                  variant="ghost"
+                  onClick={() => {
+                    setActiveTab("hardware")
+                    setMobileMenuOpen(false)
+                  }}
+                  className={`w-full justify-start gap-3 ${
+                    activeTab === "hardware"
+                      ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
+                      : ""
+                  }`}
+                >
+                  <Cpu className="h-5 w-5" />
+                  <span>Hardware</span>
+                </Button>
+                <Button
+                  variant="ghost"
+                  onClick={() => {
+                    setActiveTab("logs")
+                    setMobileMenuOpen(false)
+                  }}
+                  className={`w-full justify-start gap-3 ${
+                    activeTab === "logs" ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none" : ""
+                  }`}
+                >
+                  <FileText className="h-5 w-5" />
+                  <span>System Logs</span>
+                </Button>
+              </div>
+            </SheetContent>
+          </Sheet>
 
-          <div className="pt-4 md:pt-4">
-            <TabsContent value="overview" className="space-y-4 md:space-y-6">
-              <SystemOverview key={`overview-${componentKey}`} />
-            </TabsContent>
+          <TabsContent value="overview" className="space-y-4 md:space-y-6">
+            <SystemOverview key={`overview-${componentKey}`} />
+          </TabsContent>
 
-            <TabsContent value="storage" className="space-y-4 md:space-y-6">
-              <StorageOverview key={`storage-${componentKey}`} />
-            </TabsContent>
+          <TabsContent value="storage" className="space-y-4 md:space-y-6">
+            <StorageOverview key={`storage-${componentKey}`} />
+          </TabsContent>
 
-            <TabsContent value="network" className="space-y-4 md:space-y-6">
-              <NetworkMetrics key={`network-${componentKey}`} />
-            </TabsContent>
+          <TabsContent value="network" className="space-y-4 md:space-y-6">
+            <NetworkMetrics key={`network-${componentKey}`} />
+          </TabsContent>
 
-            <TabsContent value="vms" className="space-y-4 md:space-y-6">
-              <VirtualMachines key={`vms-${componentKey}`} />
-            </TabsContent>
+          <TabsContent value="vms" className="space-y-4 md:space-y-6">
+            <VirtualMachines key={`vms-${componentKey}`} />
+          </TabsContent>
 
-            <TabsContent value="hardware" className="space-y-4 md:space-y-6">
-              <Hardware key={`hardware-${componentKey}`} />
-            </TabsContent>
+          <TabsContent value="hardware" className="space-y-4 md:space-y-6">
+            <Hardware key={`hardware-${componentKey}`} />
+          </TabsContent>
 
-            <TabsContent value="logs" className="space-y-4 md:space-y-6">
-              <SystemLogs key={`logs-${componentKey}`} />
-            </TabsContent>
-          </div>
+          <TabsContent value="logs" className="space-y-4 md:space-y-6">
+            <SystemLogs key={`logs-${componentKey}`} />
+          </TabsContent>
         </Tabs>
 
         <footer className="mt-8 md:mt-12 pt-4 md:pt-6 border-t border-border text-center text-xs md:text-sm text-muted-foreground">

AppImage/hooks/use-scroll-direction.ts

@@ -1,43 +0,0 @@
-"use client"
-
-import { useState, useEffect } from "react"
-
-export function useScrollDirection() {
-  const [scrollDirection, setScrollDirection] = useState<"up" | "down" | null>(null)
-  const [isAtTop, setIsAtTop] = useState(true)
-
-  useEffect(() => {
-    let lastScrollY = window.scrollY
-    let ticking = false
-
-    const updateScrollDirection = () => {
-      const scrollY = window.scrollY
-
-      // Check if we're at the top of the page
-      setIsAtTop(scrollY < 10)
-
-      // Only update direction if we've scrolled more than 5px
-      if (Math.abs(scrollY - lastScrollY) < 5) {
-        ticking = false
-        return
-      }
-
-      setScrollDirection(scrollY > lastScrollY ? "down" : "up")
-      lastScrollY = scrollY > 0 ? scrollY : 0
-      ticking = false
-    }
-
-    const onScroll = () => {
-      if (!ticking) {
-        window.requestAnimationFrame(updateScrollDirection)
-        ticking = true
-      }
-    }
-
-    window.addEventListener("scroll", onScroll)
-
-    return () => window.removeEventListener("scroll", onScroll)
-  }, [])
-
-  return { scrollDirection, isAtTop }
-}