src/ui/desktop/navigation/tabs/TabDropdown.tsx

@@ -18,12 +18,13 @@ import {
   Network as SshManagerIcon,
   User as UserIcon,
   Network,
+  X,
 } from "lucide-react";
 import { useTabs, type Tab } from "@/ui/desktop/navigation/tabs/TabContext.tsx";
 import { useTranslation } from "react-i18next";
 
 export function TabDropdown(): React.ReactElement {
-  const { tabs, currentTab, setCurrentTab } = useTabs();
+  const { tabs, currentTab, setCurrentTab, removeTab } = useTabs();
   const { t } = useTranslation();
 
   const getTabIcon = (tabType: Tab["type"]) => {
@@ -83,6 +84,16 @@ export function TabDropdown(): React.ReactElement {
     setCurrentTab(tabId);
   };
 
+  const handleCloseTab = (
+    e: React.MouseEvent,
+    tabId: number,
+    tabType: Tab["type"],
+  ) => {
+    e.stopPropagation();
+    if (tabType === "home") return;
+    removeTab(tabId);
+  };
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -100,6 +111,7 @@ export function TabDropdown(): React.ReactElement {
       >
         {tabs.map((tab) => {
           const isActive = tab.id === currentTab;
+          const canClose = tab.type !== "home";
           return (
             <DropdownMenuItem
               key={tab.id}
@@ -112,8 +124,14 @@ export function TabDropdown(): React.ReactElement {
             >
               {getTabIcon(tab.type)}
               <span className="flex-1 truncate">{getTabDisplayTitle(tab)}</span>
-              {isActive && (
+              {canClose && (
-                <div className="w-2 h-2 rounded-full bg-blue-500 flex-shrink-0" />
+                <button
+                  onClick={(e) => handleCloseTab(e, tab.id, tab.type)}
+                  className="ml-1 p-0.5 rounded hover:bg-hover-secondary flex-shrink-0 transition-colors"
+                  title={t("nav.closeTab", { defaultValue: "Close tab" })}
+                >
+                  <X className="h-3.5 w-3.5" />
+                </button>
               )}
             </DropdownMenuItem>
           );