feat: added close button on tab dropdown
This commit is contained in:
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user