Update AppImage

AppImage/app/terminal/page.tsx

@@ -1,41 +0,0 @@
-"use client"
-import dynamic from "next/dynamic"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { TerminalIcon } from "lucide-react"
-
-const TerminalPanel = dynamic(() => import("@/components/terminal-panel").then((mod) => mod.TerminalPanel), {
-  ssr: false,
-  loading: () => (
-    <div className="flex items-center justify-center h-full">
-      <div className="text-muted-foreground">Loading terminal...</div>
-    </div>
-  ),
-})
-
-export default function TerminalPage() {
-  return (
-    <div className="min-h-screen bg-background p-6">
-      <div className="max-w-7xl mx-auto space-y-6">
-        <div className="flex items-center gap-3">
-          <TerminalIcon className="h-8 w-8 text-primary" />
-          <div>
-            <h1 className="text-3xl font-bold">System Terminal</h1>
-            <p className="text-muted-foreground">Execute commands and manage your Proxmox system</p>
-          </div>
-        </div>
-
-        <Card className="h-[calc(100vh-200px)]">
-          <CardHeader>
-            <CardTitle>Interactive Shell</CardTitle>
-            <CardDescription>
-              Full bash terminal with support for all system commands. Use touch gestures or keyboard shortcuts.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="h-[calc(100%-80px)]">
-            <TerminalPanel />
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  )
-}

AppImage/components/proxmox-dashboard.tsx

@@ -15,6 +15,8 @@ import { OnboardingCarousel } from "./onboarding-carousel"
 import { HealthStatusModal } from "./health-status-modal"
 import { ReleaseNotesModal, useVersionCheck } from "./release-notes-modal"
 import { getApiUrl, fetchApi } from "../lib/api-config"
+import TerminalPanel from "./terminal-panel"
+import TerminalIcon from "lucide-react/Terminal"
 import {
   RefreshCw,
   AlertTriangle,
@@ -259,6 +261,8 @@ export function ProxmoxDashboard() {
         return "VMs & LXCs"
       case "hardware":
         return "Hardware"
+      case "terminal":
+        return "Terminal"
       case "logs":
         return "System Logs"
       case "settings":
@@ -412,7 +416,7 @@ export function ProxmoxDashboard() {
       >
         <div className="container mx-auto px-4 md:px-6 pt-4 md:pt-6">
           <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-0">
-            <TabsList className="hidden md:grid w-full grid-cols-7 bg-card border border-border">
+            <TabsList className="hidden md:grid w-full grid-cols-8 bg-card border border-border">
               <TabsTrigger
                 value="overview"
                 className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
@@ -443,6 +447,12 @@ export function ProxmoxDashboard() {
               >
                 Hardware
               </TabsTrigger>
+              <TabsTrigger
+                value="terminal"
+                className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
+              >
+                Terminal
+              </TabsTrigger>
               <TabsTrigger
                 value="logs"
                 className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
@@ -548,6 +558,21 @@ export function ProxmoxDashboard() {
                     <Cpu className="h-5 w-5" />
                     <span>Hardware</span>
                   </Button>
+                  <Button
+                    variant="ghost"
+                    onClick={() => {
+                      setActiveTab("terminal")
+                      setMobileMenuOpen(false)
+                    }}
+                    className={`w-full justify-start gap-3 ${
+                      activeTab === "terminal"
+                        ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
+                        : ""
+                    }`}
+                  >
+                    <TerminalIcon className="h-5 w-5" />
+                    <span>Terminal</span>
+                  </Button>
                   <Button
                     variant="ghost"
                     onClick={() => {
@@ -607,6 +632,10 @@ export function ProxmoxDashboard() {
             <Hardware key={`hardware-${componentKey}`} />
           </TabsContent>
 
+          <TabsContent value="terminal" className="space-y-4 md:space-y-6 mt-0">
+            <TerminalPanel key={`terminal-${componentKey}`} />
+          </TabsContent>
+
           <TabsContent value="logs" className="space-y-4 md:space-y-6 mt-0">
             <SystemLogs key={`logs-${componentKey}`} />
           </TabsContent>

AppImage/components/sidebar.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { LayoutDashboard, HardDrive, Network, Server, Cpu, FileText, SettingsIcon, Terminal } from "lucide-react"
 
 const menuItems = [
@@ -10,3 +12,114 @@ const menuItems = [
   { name: "System Logs", href: "/logs", icon: FileText },
   { name: "Settings", href: "/settings", icon: SettingsIcon },
 ]
+
+const Sidebar = ({ currentPath, setOpen }) => {
+  const handleNavigation = (tabName: string) => {
+    // Dispatch custom event to change tab in dashboard
+    const event = new CustomEvent("changeTab", { detail: { tab: tabName } })
+    window.dispatchEvent(event)
+    setOpen(false)
+  }
+
+  return (
+    <div>
+      <button
+        onClick={() => handleNavigation("overview")}
+        className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
+          currentPath === "/" || currentPath === "/overview"
+            ? "bg-blue-500/10 text-blue-500"
+            : "text-muted-foreground hover:text-foreground hover:bg-accent"
+        }`}
+      >
+        <LayoutDashboard className="h-5 w-5" />
+        <span>Overview</span>
+      </button>
+
+      <button
+        onClick={() => handleNavigation("storage")}
+        className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
+          currentPath === "/storage"
+            ? "bg-blue-500/10 text-blue-500"
+            : "text-muted-foreground hover:text-foreground hover:bg-accent"
+        }`}
+      >
+        <HardDrive className="h-5 w-5" />
+        <span>Storage</span>
+      </button>
+
+      <button
+        onClick={() => handleNavigation("network")}
+        className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
+          currentPath === "/network"
+            ? "bg-blue-500/10 text-blue-500"
+            : "text-muted-foreground hover:text-foreground hover:bg-accent"
+        }`}
+      >
+        <Network className="h-5 w-5" />
+        <span>Network</span>
+      </button>
+
+      <button
+        onClick={() => handleNavigation("vms")}
+        className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
+          currentPath === "/virtual-machines"
+            ? "bg-blue-500/10 text-blue-500"
+            : "text-muted-foreground hover:text-foreground hover:bg-accent"
+        }`}
+      >
+        <Server className="h-5 w-5" />
+        <span>VMs & LXCs</span>
+      </button>
+
+      <button
+        onClick={() => handleNavigation("hardware")}
+        className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
+          currentPath === "/hardware"
+            ? "bg-blue-500/10 text-blue-500"
+            : "text-muted-foreground hover:text-foreground hover:bg-accent"
+        }`}
+      >
+        <Cpu className="h-5 w-5" />
+        <span>Hardware</span>
+      </button>
+
+      <button
+        onClick={() => handleNavigation("terminal")}
+        className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
+          currentPath === "/terminal"
+            ? "bg-blue-500/10 text-blue-500"
+            : "text-muted-foreground hover:text-foreground hover:bg-accent"
+        }`}
+      >
+        <Terminal className="h-5 w-5" />
+        <span>Terminal</span>
+      </button>
+
+      <button
+        onClick={() => handleNavigation("logs")}
+        className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
+          currentPath === "/logs"
+            ? "bg-blue-500/10 text-blue-500"
+            : "text-muted-foreground hover:text-foreground hover:bg-accent"
+        }`}
+      >
+        <FileText className="h-5 w-5" />
+        <span>System Logs</span>
+      </button>
+
+      <button
+        onClick={() => handleNavigation("settings")}
+        className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
+          currentPath === "/settings"
+            ? "bg-blue-500/10 text-blue-500"
+            : "text-muted-foreground hover:text-foreground hover:bg-accent"
+        }`}
+      >
+        <SettingsIcon className="h-5 w-5" />
+        <span>Settings</span>
+      </button>
+    </div>
+  )
+}
+
+export default Sidebar