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,13 +294,6 @@ 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"
-              }`}
-            >
-              <div className="container mx-auto">
           <TabsList className="hidden md:grid w-full grid-cols-6 bg-card border border-border">
             <TabsTrigger
               value="overview"
@@ -406,9 +396,7 @@ 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" />
@@ -436,9 +424,7 @@ 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" />
@@ -447,11 +433,7 @@ export function ProxmoxDashboard() {
               </div>
             </SheetContent>
           </Sheet>
-              </div>
-            </div>
-          </div>
 
-          <div className="pt-4 md:pt-4">
           <TabsContent value="overview" className="space-y-4 md:space-y-6">
             <SystemOverview key={`overview-${componentKey}`} />
           </TabsContent>
@@ -475,7 +457,6 @@ export function ProxmoxDashboard() {
           <TabsContent value="logs" className="space-y-4 md:space-y-6">
             <SystemLogs key={`logs-${componentKey}`} />
           </TabsContent>
-          </div>
         </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 }
-}