Update AppImage

AppImage/components/proxmox-dashboard.tsx

@@ -27,6 +27,7 @@ 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"
@@ -60,6 +61,8 @@ 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)
@@ -294,145 +297,155 @@ 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">
-          <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>
+          <div
+            className={`sticky top-[88px] md:top-[72px] z-40 transition-transform duration-300 ${
+              scrollDirection === "down" && !isAtTop ? "-translate-y-[200%]" : "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"
+              >
+                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>
+            <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>
-          </Sheet>
+              <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>
 
           <TabsContent value="overview" className="space-y-4 md:space-y-6">
             <SystemOverview key={`overview-${componentKey}`} />

AppImage/hooks/use-scroll-direction.ts

@@ -0,0 +1,43 @@
+"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 }
+}