Update AppImage

2025-10-01 23:56:18 +00:00 · 2025-09-28 22:53:42 +02:00
parent 96cbc75a5e
commit e404557d62
9 changed files with 99 additions and 111 deletions
--- a/AppImage/app/globals.css
+++ b/AppImage/app/globals.css
@@ -4,7 +4,6 @@
@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);
@@ -32,10 +31,11 @@
  --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,12 +55,15 @@
  --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);
@@ -69,12 +72,13 @@
  --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);
@@ -111,9 +115,6 @@
  --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 {
@@ -123,80 +124,78 @@
  body {
    @apply bg-background text-foreground;
  }
-}
-
-/* Header styling that adapts to theme */
-.header-bg {
+  .header-bg {
    background-color: var(--header-bg);
    color: var(--header-foreground);
-}
-
-/* Custom scrollbar with better contrast */
-::-webkit-scrollbar {
+    backdrop-filter: none; /* Remove any blur effects */
+  }
+  /* Custom scrollbar with better contrast */
+  ::-webkit-scrollbar {
    width: 6px;
-}
+  }

-::-webkit-scrollbar-track {
+  ::-webkit-scrollbar-track {
    background: var(--background);
-}
+  }

-::-webkit-scrollbar-thumb {
+  ::-webkit-scrollbar-thumb {
    background: var(--muted);
    border-radius: 3px;
-}
+  }

-::-webkit-scrollbar-thumb:hover {
+  ::-webkit-scrollbar-thumb:hover {
    background: var(--muted-foreground);
-}
+  }

-/* Better contrast for dark mode content */
-.dark .metric-card {
+  /* Better contrast for dark mode content */
+  .dark .metric-card {
    background: var(--card);
    border: 1px solid var(--border);
-}
+  }

-.dark .metric-value {
+  .dark .metric-value {
    color: var(--foreground);
    font-weight: 600;
-}
+  }

-.dark .metric-label {
+  .dark .metric-label {
    color: var(--muted-foreground);
-}
+  }

-/* Fix chart axis visibility in dark mode */
-.dark .recharts-cartesian-axis-tick-value {
+  /* Fix chart axis visibility in dark mode */
+  .dark .recharts-cartesian-axis-tick-value {
    fill: var(--muted-foreground) !important;
-}
+  }

-.dark .recharts-text {
+  .dark .recharts-text {
    fill: var(--muted-foreground) !important;
-}
+  }

-/* Improve server info layout in header - clean design without transparency */
-.server-info {
+  /* Improve server info layout in header - clean design without transparency */
+  .server-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
-}
+  }

-.dark .server-info {
+  .dark .server-info {
    border: 1px solid rgba(255, 255, 255, 0.1);
-}
+  }

-/* Better spacing for VM/LXC badges */
-.vm-badges {
+  /* Better spacing for VM/LXC badges */
+  .vm-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
-}
+  }

-.vm-badge {
+  .vm-badge {
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    white-space: nowrap;
+  }
 }
--- a/AppImage/app/layout.tsx
+++ b/AppImage/app/layout.tsx
@@ -9,21 +9,8 @@ import "./globals.css"

 export const metadata: Metadata = {
  title: "ProxMenux Monitor",
-  description: "Proxmox System Dashboard and Monitor",
+  description: "Proxmox System Dashboard",
  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({
@@ -33,13 +20,13 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="en" suppressHydrationWarning>
-      <body className={`${GeistSans.variable} ${GeistMono.variable} antialiased`}>
-        <Suspense fallback={<div>Loading...</div>}>
+      <body className={`font-sans ${GeistSans.variable} ${GeistMono.variable}`}>
+        <Suspense fallback={null}>
          <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
            {children}
          </ThemeProvider>
-          <Analytics />
        </Suspense>
+        <Analytics />
      </body>
    </html>
  )
--- a/AppImage/app/page.tsx
+++ b/AppImage/app/page.tsx
@@ -1,6 +1,6 @@
-import { ProxmoxDashboard } from "../components/proxmox-dashboard"
+import { ProxmoxDashboard } from "../AppImage/components/proxmox-dashboard"

-export default function Home() {
+export default function Page() {
  return (
    <main className="min-h-screen bg-background">
      <ProxmoxDashboard />
--- a/AppImage/components/network-metrics.tsx
+++ b/AppImage/components/network-metrics.tsx
@@ -1,7 +1,7 @@
 "use client"

-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
+import { Badge } from "./ui/badge"
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from "recharts"
 import { Wifi, Globe, Shield, Activity, Network, Router } from "lucide-react"

@@ -80,9 +80,11 @@ export function NetworkMetrics() {
        </Card>

        <Card className="bg-card border-border">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium text-muted-foreground">Latency</CardTitle>
-            <Globe className="h-4 w-4 text-muted-foreground" />
+          <CardHeader>
+            <CardTitle className="text-foreground flex items-center">
+              <Globe className="h-5 w-5 mr-2" />
+              Latency
+            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-foreground">12ms</div>
--- a/AppImage/components/storage-metrics.tsx
+++ b/AppImage/components/storage-metrics.tsx
@@ -1,8 +1,8 @@
 "use client"

-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Progress } from "@/components/ui/progress"
-import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
+import { Progress } from "./ui/progress"
+import { Badge } from "./ui/badge"
 import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip } from "recharts"
 import { HardDrive, Database, Archive, AlertTriangle, CheckCircle, Activity } from "lucide-react"

--- a/AppImage/components/system-logs.tsx
+++ b/AppImage/components/system-logs.tsx
@@ -1,11 +1,11 @@
 "use client"

-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { ScrollArea } from "@/components/ui/scroll-area"
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
+import { Badge } from "./ui/badge"
+import { Button } from "./ui/button"
+import { Input } from "./ui/input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select"
+import { ScrollArea } from "./ui/scroll-area"
 import { FileText, Search, Download, AlertTriangle, Info, CheckCircle, XCircle } from "lucide-react"
 import { useState } from "react"

--- a/AppImage/components/system-overview.tsx
+++ b/AppImage/components/system-overview.tsx
@@ -1,8 +1,8 @@
 "use client"

-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Progress } from "@/components/ui/progress"
-import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
+import { Progress } from "./ui/progress"
+import { Badge } from "./ui/badge"
 import { XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from "recharts"
 import { Cpu, MemoryStick, Thermometer, Users, Activity, Server, Zap } from "lucide-react"

--- a/AppImage/components/theme-toggle.tsx
+++ b/AppImage/components/theme-toggle.tsx
@@ -2,7 +2,7 @@
 import { Moon, Sun } from "lucide-react"
 import { useTheme } from "next-themes"

-import { Button } from "@/components/ui/button"
+import { Button } from "./ui/button"

 export function ThemeToggle() {
  const { theme, setTheme } = useTheme()
--- a/AppImage/components/virtual-machines.tsx
+++ b/AppImage/components/virtual-machines.tsx
@@ -1,8 +1,8 @@
 "use client"

-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Badge } from "@/components/ui/badge"
-import { Progress } from "@/components/ui/progress"
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
+import { Badge } from "./ui/badge"
+import { Progress } from "./ui/progress"
 import { Server, Play, Square, RotateCcw, Monitor, Cpu, MemoryStick } from "lucide-react"

 const virtualMachines = [