Update AppImage

AppImage/app/globals.css

@@ -4,6 +4,7 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
+  /* Proxmox light theme colors */
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
@@ -31,11 +32,10 @@
   --radius: 0.625rem;
   --sidebar: oklch(0.985 0 0);
   --sidebar-foreground: oklch(0.145 0 0);
-  --header-bg: oklch(1 0 0);
-  --header-foreground: oklch(0.145 0 0);
 }
 
 .dark {
+  /* Proxmox dark theme with proper gray background (#2b2f36) */
   --background: oklch(0.205 0.005 240); /* Proxmox dark gray #2b2f36 */
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.235 0.005 240); /* Slightly lighter gray for cards #363c45 */
@@ -55,15 +55,12 @@
   --border: oklch(0.335 0.005 240); /* More visible borders */
   --input: oklch(0.285 0.005 240);
   --ring: oklch(0.439 0 0);
+  /* Updated chart colors to be more vibrant and visible in dark mode */
   --chart-1: oklch(0.65 0.2 220); /* Bright Blue */
   --chart-2: oklch(0.65 0.2 140); /* Bright Green */
   --chart-3: oklch(0.7 0.2 50); /* Bright Yellow */
   --chart-4: oklch(0.65 0.2 300); /* Bright Purple */
   --chart-5: oklch(0.65 0.2 20); /* Bright Orange */
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
   --sidebar: oklch(0.205 0 0);
   --sidebar-foreground: oklch(0.985 0 0);
   --sidebar-primary: oklch(0.488 0.243 264.376);
@@ -72,13 +69,12 @@
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(0.285 0.005 240);
   --sidebar-ring: oklch(0.439 0 0);
+  /* Header is black only in dark mode */
   --header-bg: oklch(0 0 0);
   --header-foreground: oklch(1 0 0);
 }
 
 @theme inline {
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
@@ -115,6 +111,9 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  /* Custom header colors */
+  --color-header-bg: var(--header-bg);
+  --color-header-foreground: var(--header-foreground);
 }
 
 @layer base {
@@ -124,78 +123,80 @@
   body {
     @apply bg-background text-foreground;
   }
-  .header-bg {
+}
-    background-color: var(--header-bg);
+
-    color: var(--header-foreground);
+/* Header styling that adapts to theme */
-    backdrop-filter: none; /* Remove any blur effects */
+.header-bg {
-  }
+  background-color: var(--header-bg);
-  /* Custom scrollbar with better contrast */
+  color: var(--header-foreground);
-  ::-webkit-scrollbar {
+}
-    width: 6px;
+
-  }
+/* Custom scrollbar with better contrast */
-
+::-webkit-scrollbar {
-  ::-webkit-scrollbar-track {
+  width: 6px;
-    background: var(--background);
+}
-  }
+
-
+::-webkit-scrollbar-track {
-  ::-webkit-scrollbar-thumb {
+  background: var(--background);
-    background: var(--muted);
+}
-    border-radius: 3px;
+
-  }
+::-webkit-scrollbar-thumb {
-
+  background: var(--muted);
-  ::-webkit-scrollbar-thumb:hover {
+  border-radius: 3px;
-    background: var(--muted-foreground);
+}
-  }
+
-
+::-webkit-scrollbar-thumb:hover {
-  /* Better contrast for dark mode content */
+  background: var(--muted-foreground);
-  .dark .metric-card {
+}
-    background: var(--card);
+
-    border: 1px solid var(--border);
+/* Better contrast for dark mode content */
-  }
+.dark .metric-card {
-
+  background: var(--card);
-  .dark .metric-value {
+  border: 1px solid var(--border);
-    color: var(--foreground);
+}
-    font-weight: 600;
+
-  }
+.dark .metric-value {
-
+  color: var(--foreground);
-  .dark .metric-label {
+  font-weight: 600;
-    color: var(--muted-foreground);
+}
-  }
+
-
+.dark .metric-label {
-  /* Fix chart axis visibility in dark mode */
+  color: var(--muted-foreground);
-  .dark .recharts-cartesian-axis-tick-value {
+}
-    fill: var(--muted-foreground) !important;
+
-  }
+/* Fix chart axis visibility in dark mode */
-
+.dark .recharts-cartesian-axis-tick-value {
-  .dark .recharts-text {
+  fill: var(--muted-foreground) !important;
-    fill: var(--muted-foreground) !important;
+}
-  }
+
-
+.dark .recharts-text {
-  /* Improve server info layout in header - clean design without transparency */
+  fill: var(--muted-foreground) !important;
-  .server-info {
+}
-    display: flex;
+
-    align-items: center;
+/* Improve server info layout in header - clean design without transparency */
-    gap: 0.5rem;
+.server-info {
-    padding: 0.25rem 0.75rem;
+  display: flex;
-    border-radius: 0.375rem;
+  align-items: center;
-    border: 1px solid rgba(255, 255, 255, 0.2);
+  gap: 0.5rem;
-  }
+  padding: 0.25rem 0.75rem;
-
+  border-radius: 0.375rem;
-  .dark .server-info {
+  border: 1px solid rgba(255, 255, 255, 0.2);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+}
-  }
+
-
+.dark .server-info {
-  /* Better spacing for VM/LXC badges */
+  border: 1px solid rgba(255, 255, 255, 0.1);
-  .vm-badges {
+}
-    display: flex;
+
-    flex-wrap: wrap;
+/* Better spacing for VM/LXC badges */
-    gap: 0.25rem;
+.vm-badges {
-    align-items: center;
+  display: flex;
-  }
+  flex-wrap: wrap;
-
+  gap: 0.25rem;
-  .vm-badge {
+  align-items: center;
-    font-size: 0.75rem;
+}
-    padding: 0.125rem 0.5rem;
+
-    white-space: nowrap;
+.vm-badge {
-  }
+  font-size: 0.75rem;
+  padding: 0.125rem 0.5rem;
+  white-space: nowrap;
 }

AppImage/app/layout.tsx

@@ -9,8 +9,21 @@ import "./globals.css"
 
 export const metadata: Metadata = {
   title: "ProxMenux Monitor",
-  description: "Proxmox System Dashboard",
+  description: "Proxmox System Dashboard and Monitor",
   generator: "v0.app",
+  manifest: "/manifest.json",
+  icons: {
+    icon: [
+      { url: "/favicon-16x16.png", sizes: "16x16", type: "image/png" },
+      { url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
+    ],
+    apple: [{ url: "/apple-touch-icon.png", sizes: "180x180", type: "image/png" }],
+  },
+  viewport: "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no",
+  themeColor: [
+    { media: "(prefers-color-scheme: light)", color: "#ffffff" },
+    { media: "(prefers-color-scheme: dark)", color: "#1a1a1a" },
+  ],
 }
 
 export default function RootLayout({
@@ -20,13 +33,13 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={`font-sans ${GeistSans.variable} ${GeistMono.variable}`}>
+      <body className={`${GeistSans.variable} ${GeistMono.variable} antialiased`}>
-        <Suspense fallback={null}>
+        <Suspense fallback={<div>Loading...</div>}>
           <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
             {children}
           </ThemeProvider>
+          <Analytics />
         </Suspense>
-        <Analytics />
       </body>
     </html>
   )

AppImage/app/page.tsx

@@ -1,6 +1,6 @@
-import { ProxmoxDashboard } from "../AppImage/components/proxmox-dashboard"
+import { ProxmoxDashboard } from "../components/proxmox-dashboard"
 
-export default function Page() {
+export default function Home() {
   return (
     <main className="min-h-screen bg-background">
       <ProxmoxDashboard />