From e404557d629b1c3ae8bc55d2431e87b7877a184a Mon Sep 17 00:00:00 2001 From: MacRimi Date: Sun, 28 Sep 2025 22:53:42 +0200 Subject: [PATCH] Update AppImage --- AppImage/app/globals.css | 141 +++++++++++------------ AppImage/app/layout.tsx | 21 +--- AppImage/app/page.tsx | 4 +- AppImage/components/network-metrics.tsx | 12 +- AppImage/components/storage-metrics.tsx | 6 +- AppImage/components/system-logs.tsx | 12 +- AppImage/components/system-overview.tsx | 6 +- AppImage/components/theme-toggle.tsx | 2 +- AppImage/components/virtual-machines.tsx | 6 +- 9 files changed, 99 insertions(+), 111 deletions(-) diff --git a/AppImage/app/globals.css b/AppImage/app/globals.css index 2cfb3a7..f08e712 100644 --- 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-bg { + background-color: var(--header-bg); + color: var(--header-foreground); + backdrop-filter: none; /* Remove any blur effects */ + } + /* Custom scrollbar with better contrast */ + ::-webkit-scrollbar { + width: 6px; + } -/* Header styling that adapts to theme */ -.header-bg { - background-color: var(--header-bg); - color: var(--header-foreground); -} + ::-webkit-scrollbar-track { + background: var(--background); + } -/* Custom scrollbar with better contrast */ -::-webkit-scrollbar { - width: 6px; -} + ::-webkit-scrollbar-thumb { + background: var(--muted); + border-radius: 3px; + } -::-webkit-scrollbar-track { - background: var(--background); -} + ::-webkit-scrollbar-thumb:hover { + background: var(--muted-foreground); + } -::-webkit-scrollbar-thumb { - background: var(--muted); - border-radius: 3px; -} + /* Better contrast for dark mode content */ + .dark .metric-card { + background: var(--card); + border: 1px solid var(--border); + } -::-webkit-scrollbar-thumb:hover { - background: var(--muted-foreground); -} + .dark .metric-value { + color: var(--foreground); + font-weight: 600; + } -/* Better contrast for dark mode content */ -.dark .metric-card { - background: var(--card); - border: 1px solid var(--border); -} + .dark .metric-label { + color: var(--muted-foreground); + } -.dark .metric-value { - color: var(--foreground); - font-weight: 600; -} + /* Fix chart axis visibility in dark mode */ + .dark .recharts-cartesian-axis-tick-value { + fill: var(--muted-foreground) !important; + } -.dark .metric-label { - color: var(--muted-foreground); -} + .dark .recharts-text { + fill: var(--muted-foreground) !important; + } -/* Fix chart axis visibility in dark mode */ -.dark .recharts-cartesian-axis-tick-value { - fill: var(--muted-foreground) !important; -} + /* 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 .recharts-text { - fill: var(--muted-foreground) !important; -} + .dark .server-info { + border: 1px solid rgba(255, 255, 255, 0.1); + } -/* 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); -} + /* Better spacing for VM/LXC badges */ + .vm-badges { + display: flex; + flex-wrap: wrap; + gap: 0.25rem; + align-items: center; + } -.dark .server-info { - border: 1px solid rgba(255, 255, 255, 0.1); -} - -/* Better spacing for VM/LXC badges */ -.vm-badges { - display: flex; - flex-wrap: wrap; - gap: 0.25rem; - align-items: center; -} - -.vm-badge { - 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; + } } diff --git a/AppImage/app/layout.tsx b/AppImage/app/layout.tsx index 27a5ad7..f4009cc 100644 --- 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 ( - - Loading...}> + + {children} - + ) diff --git a/AppImage/app/page.tsx b/AppImage/app/page.tsx index 47629db..c6d59e1 100644 --- 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 (
diff --git a/AppImage/components/network-metrics.tsx b/AppImage/components/network-metrics.tsx index 3144de8..8d3a714 100644 --- 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() { - - Latency - + + + + Latency +
12ms
diff --git a/AppImage/components/storage-metrics.tsx b/AppImage/components/storage-metrics.tsx index 5299789..b22a03f 100644 --- 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" diff --git a/AppImage/components/system-logs.tsx b/AppImage/components/system-logs.tsx index b8c9a07..5ef052b 100644 --- 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" diff --git a/AppImage/components/system-overview.tsx b/AppImage/components/system-overview.tsx index a4f0127..5c9b319 100644 --- 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" diff --git a/AppImage/components/theme-toggle.tsx b/AppImage/components/theme-toggle.tsx index 68eccf5..eb4c91c 100644 --- 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() diff --git a/AppImage/components/virtual-machines.tsx b/AppImage/components/virtual-machines.tsx index 890cb5d..8a8ea83 100644 --- 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 = [