fix: Fixed various issues with the dashboard, tab bar, and database issues

src/ui/Desktop/Navigation/Hosts/Host.tsx

@@ -1,11 +1,17 @@
 import React, { useEffect, useState } from "react";
 import { Status, StatusIndicator } from "@/components/ui/shadcn-io/status";
-import { Button } from "@/components/ui/button.tsx";
-import { ButtonGroup } from "@/components/ui/button-group.tsx";
-import { Server, Terminal } from "lucide-react";
-import { useTabs } from "@/ui/Desktop/Navigation/Tabs/TabContext.tsx";
-import { getServerStatusById } from "@/ui/main-axios.ts";
-import type { HostProps } from "../../../../types/index.js";
+import { Button } from "@/components/ui/button";
+import { ButtonGroup } from "@/components/ui/button-group";
+import { EllipsisVertical, Terminal } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from "@/components/ui/dropdown-menu";
+import { useTabs } from "@/ui/Desktop/Navigation/Tabs/TabContext";
+import { getServerStatusById } from "@/ui/main-axios";
+import type { HostProps } from "../../../../types";
 
 export function Host({ host }: HostProps): React.ReactElement {
   const { addTab } = useTabs();
@@ -35,8 +41,6 @@ export function Host({ host }: HostProps): React.ReactElement {
             setServerStatus("offline");
           } else if (err?.response?.status === 504) {
             setServerStatus("degraded");
-          } else if (err?.response?.status === 404) {
-            setServerStatus("offline");
           } else {
             setServerStatus("offline");
           }
@@ -45,7 +49,6 @@ export function Host({ host }: HostProps): React.ReactElement {
     };
 
     fetchStatus();
-
     const intervalId = window.setInterval(fetchStatus, 30000);
 
     return () => {
@@ -58,10 +61,6 @@ export function Host({ host }: HostProps): React.ReactElement {
     addTab({ type: "terminal", title, hostConfig: host });
   };
 
-  const handleServerClick = () => {
-    addTab({ type: "server", title, hostConfig: host });
-  };
-
   return (
     <div>
       <div className="flex items-center gap-2">
@@ -71,17 +70,12 @@ export function Host({ host }: HostProps): React.ReactElement {
         >
           <StatusIndicator />
         </Status>
+
         <p className="font-semibold flex-1 min-w-0 break-words text-sm">
           {host.name || host.ip}
         </p>
+
         <ButtonGroup className="flex-shrink-0">
-          <Button
-            variant="outline"
-            className="!px-2 border-1 border-dark-border"
-            onClick={handleServerClick}
-          >
-            <Server />
-          </Button>
           {host.enableTerminal && (
             <Button
               variant="outline"
@@ -91,8 +85,46 @@ export function Host({ host }: HostProps): React.ReactElement {
               <Terminal />
             </Button>
           )}
+
+          <DropdownMenu modal={false}>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="outline"
+                className={`!px-2 border-1 border-dark-border ${
+                  host.enableTerminal ? "rounded-tl-none rounded-bl-none" : ""
+                }`}
+              >
+                <EllipsisVertical />
+              </Button>
+            </DropdownMenuTrigger>
+
+            <DropdownMenuContent
+              align="start"
+              side="right"
+              className="min-w-[160px]"
+            >
+              <DropdownMenuItem
+                onClick={() =>
+                  addTab({ type: "server", title, hostConfig: host })
+                }
+              >
+                Open Server Details
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() =>
+                  addTab({ type: "file_manager", title, hostConfig: host })
+                }
+              >
+                Open File Manager
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => alert("Settings clicked")}>
+                Edit
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
         </ButtonGroup>
       </div>
+
       {hasTags && (
         <div className="flex flex-wrap items-center gap-2 mt-1">
           {tags.map((tag: string) => (