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,6 +297,11 @@ 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] 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"
@@ -396,7 +404,9 @@ export function ProxmoxDashboard() {
                       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" : ""
+                      activeTab === "vms"
+                        ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
+                        : ""
                     }`}
                   >
                     <Box className="h-5 w-5" />
@@ -424,7 +434,9 @@ export function ProxmoxDashboard() {
                       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" : ""
+                      activeTab === "logs"
+                        ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
+                        : ""
                     }`}
                   >
                     <FileText className="h-5 w-5" />
@@ -433,6 +445,7 @@ export function ProxmoxDashboard() {
                 </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 }
+}