Update AppImage

AppImage/components/interface-details-modal.tsx

@@ -1,6 +1,8 @@
+"use client"
+import { useState, useEffect } from "react"
+import { Dialog, DialogContent } from "@radix-ui/react-dialog"
 import { getUnitsSettings, formatNetworkTraffic, getNetworkLabel } from "@/lib/network-utils"
 
-
 export function InterfaceDetailsModal({ interface_, onClose, timeframe }: InterfaceDetailsModalProps) {
   const [metricsData, setMetricsData] = useState<any[]>([])
   const [loading, setLoading] = useState(false)
@@ -10,16 +12,20 @@ export function InterfaceDetailsModal({ interface_, onClose, timeframe }: Interf
     const settings = getUnitsSettings()
     setNetworkUnit(settings.networkUnit as "Bytes" | "Bits")
     
-    const handleStorageChange = () => {
+    const handleSettingsChange = () => {
       const settings = getUnitsSettings()
       setNetworkUnit(settings.networkUnit as "Bytes" | "Bits")
     }
     
-    window.addEventListener('storage', handleStorageChange)
+    window.addEventListener('storage', handleSettingsChange)
-    return () => window.removeEventListener('storage', handleStorageChange)
+    window.addEventListener('unitsSettingsChanged', handleSettingsChange)
+    
+    return () => {
+      window.removeEventListener('storage', handleSettingsChange)
+      window.removeEventListener('unitsSettingsChanged', handleSettingsChange)
+    }
   }, [])
 
-
   const totalReceived = metricsData.length > 0
     ? Math.max(0, (metricsData[metricsData.length - 1].netin || 0) - (metricsData[0].netin || 0))
     : 0

AppImage/components/network-card.tsx

@@ -5,7 +5,7 @@ import { Badge } from "./ui/badge"
 import { Wifi, Zap } from 'lucide-react'
 import { useState, useEffect } from "react"
 import { fetchApi } from "../lib/api-config"
-import { getUnitsSettings, formatNetworkTraffic, getNetworkLabel } from "../lib/network-utils"
+import { getUnitsSettings, formatNetworkTraffic } from "../lib/network-utils"
 
 interface NetworkCardProps {
   interface_: {
@@ -99,13 +99,18 @@ export function NetworkCard({ interface_, timeframe, onClick }: NetworkCardProps
     const settings = getUnitsSettings()
     setNetworkUnit(settings.networkUnit as "Bytes" | "Bits")
     
-    const handleStorageChange = () => {
+    const handleSettingsChange = () => {
       const settings = getUnitsSettings()
       setNetworkUnit(settings.networkUnit as "Bytes" | "Bits")
     }
     
-    window.addEventListener('storage', handleStorageChange)
+    window.addEventListener('storage', handleSettingsChange)
-    return () => window.removeEventListener('storage', handleStorageChange)
+    window.addEventListener('unitsSettingsChanged', handleSettingsChange)
+    
+    return () => {
+      window.removeEventListener('storage', handleSettingsChange)
+      window.removeEventListener('unitsSettingsChanged', handleSettingsChange)
+    }
   }, [])
 
   useEffect(() => {

AppImage/components/settings.tsx

@@ -71,7 +71,7 @@ export function Settings() {
     setNetworkUnitSettings(unit);
     
     // Dispatch custom event to notify other components
-    window.dispatchEvent(new Event('unitsSettingsChanged'))
+    window.dispatchEvent(new CustomEvent('unitsSettingsChanged', { detail: settings }))
     window.dispatchEvent(new Event('storage'))
   };
 

AppImage/components/system-overview.tsx

@@ -9,6 +9,7 @@ import { NodeMetricsCharts } from "./node-metrics-charts"
 import { NetworkTrafficChart } from "./network-traffic-chart"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select"
 import { fetchApi } from "../lib/api-config"
+import { getUnitsSettings } from "../lib/network-utils"
 
 interface SystemData {
   cpu_usage: number
@@ -164,34 +165,20 @@ export function SystemOverview() {
   const [networkUnit, setNetworkUnit] = useState<"Bytes" | "Bits">("Bytes")
 
   useEffect(() => {
-    const getSettings = () => {
+    const settings = getUnitsSettings()
-      if (typeof window === 'undefined') return { networkUnit: 'Bytes' as const }
-      try {
-        const settings = window.localStorage.getItem('unitsSettings')
-        if (settings) {
-          const parsed = JSON.parse(settings)
-          return { networkUnit: parsed.networkUnit || 'Bytes' }
-        }
-      } catch (e) {
-        console.error('[v0] Error reading units settings:', e)
-      }
-      return { networkUnit: 'Bytes' as const }
-    }
-    
-    const settings = getSettings()
     setNetworkUnit(settings.networkUnit as "Bytes" | "Bits")
     
-    const handleStorageChange = () => {
+    const handleSettingsChange = () => {
-      const settings = getSettings()
+      const settings = getUnitsSettings()
       setNetworkUnit(settings.networkUnit as "Bytes" | "Bits")
     }
     
-    window.addEventListener('storage', handleStorageChange)
+    window.addEventListener('storage', handleSettingsChange)
-    window.addEventListener('unitsSettingsChanged', handleStorageChange)
+    window.addEventListener('unitsSettingsChanged', handleSettingsChange)
     
     return () => {
-      window.removeEventListener('storage', handleStorageChange)
+      window.removeEventListener('storage', handleSettingsChange)
-      window.removeEventListener('unitsSettingsChanged', handleStorageChange)
+      window.removeEventListener('unitsSettingsChanged', handleSettingsChange)
     }
   }, [])
 
@@ -341,27 +328,6 @@ export function SystemOverview() {
     }
   }
 
-  const formatNetworkTraffic = (sizeInGB: number, unit: "Bytes" | "Bits" = "Bytes"): string => {
-    if (unit === "Bits") {
-      const sizeInBits = sizeInGB * 8
-      if (sizeInBits < 1024) {
-        return `${sizeInBits.toFixed(1)} b`
-      } else if (sizeInBits < 1024 ** 2) {
-        return `${(sizeInBits / 1024).toFixed(1)} Kb`
-      } else if (sizeInBits < 1024 ** 3) {
-        return `${(sizeInBits / 1024 ** 2).toFixed(1)} Mb`
-      } else if (sizeInBits < 1024 ** 4) {
-        return `${(sizeInBits / 1024 ** 3).toFixed(2)} Gb`
-      } else if (sizeInBits < 1024 ** 5) {
-        return `${(sizeInBits / 1024 ** 4).toFixed(2)} Tb`
-      } else {
-        return `${(sizeInBits / 1024 ** 5).toFixed(2)} Pb`
-      }
-    } else {
-      return formatStorage(sizeInGB)
-    }
-  }
-
   const tempStatus = getTemperatureStatus(systemData.temperature)
 
   const localStorage = proxmoxStorageData?.storage.find((s) => s.name === "local")

AppImage/lib/network-utils.ts

@@ -16,18 +16,22 @@ export const getUnitsSettings = () => {
 
 export const formatNetworkTraffic = (sizeInGB: number, unit: "Bytes" | "Bits" = "Bytes"): string => {
   if (unit === "Bits") {
-    const sizeInGb = sizeInGB * 8
+    const sizeInGb = sizeInGB * 8 // Convert gigabytes to gigabits
     
+    // Use decimal (base 1000) for bits
     if (sizeInGb < 0.001) {
-      return `${(sizeInGb * 1024).toFixed(1)} Mb`
+      return `${(sizeInGb * 1000 * 1000).toFixed(2)} Mb`
     } else if (sizeInGb < 1) {
-      return `${(sizeInGb * 1024).toFixed(1)} Mb`
+      return `${(sizeInGb * 1000).toFixed(2)} Mb`
-    } else if (sizeInGb < 1024) {
+    } else if (sizeInGb < 1000) {
       return `${sizeInGb.toFixed(1)} Gb`
+    } else if (sizeInGb < 1000000) {
+      return `${(sizeInGb / 1000).toFixed(2)} Tb`
     } else {
-      return `${(sizeInGb / 1024).toFixed(1)} Tb`
+      return `${(sizeInGb / 1000000).toFixed(2)} Pb`
     }
   } else {
+    // Bytes mode - use binary base (1024)
     if (sizeInGB < 1) {
       return `${(sizeInGB * 1024).toFixed(1)} MB`
     } else if (sizeInGB < 1024) {