feat: added close button on tab dropdown

This commit is contained in:
LukeGus
2026-01-14 00:26:55 -06:00
parent 7210381f17
commit 264682c5ad

View File

@@ -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 && (
<div className="w-2 h-2 rounded-full bg-blue-500 flex-shrink-0" />
{canClose && (
<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>
);