Ethica/Termix
1
0
Fork 0
mirror of https://github.com/Termix-SSH/Termix.git synced 2026-07-15 21:03:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #763 from ZacharyZcR/feat/pinned-hosts-quick-actions

Browse Source 
feat: show pinned hosts in quick actions card
This commit is contained in:
ZacharyZcR
2026-05-18 04:35:52 +08:00
committed by GitHub
parent d79fb809de 9f316922c3
commit 3d5296cdaa
1 changed files with 64 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ui/dashboard/DashboardTab.tsx
+64 -33
View File
@@ -276,10 +276,15 @@ function CountersBarCard({
function QuickActionsCard({ function QuickActionsCard({
onOpenSingletonTab, onOpenSingletonTab,
hosts,
onOpenTab,
}: { }: {
onOpenSingletonTab: (type: TabType, pendingEvent?: string) => void; onOpenSingletonTab: (type: TabType, pendingEvent?: string) => void;
hosts: Host[];
onOpenTab: (host: Host, type: TabType) => void;
}) { }) {
const { t } = useTranslation(); const { t } = useTranslation();
const pinnedHosts = hosts.filter((h) => h.pin);
return ( return (
<Card className="flex flex-col overflow-hidden w-full h-full py-0 gap-0"> <Card className="flex flex-col overflow-hidden w-full h-full py-0 gap-0">
<div className="flex items-center gap-2 px-4 py-2.5 border-b border-border shrink-0"> <div className="flex items-center gap-2 px-4 py-2.5 border-b border-border shrink-0">
@@ -328,38 +333,64 @@ function QuickActionsCard({
</button> </button>
</div> </div>
<div className="flex flex-col flex-1"> <div className="flex flex-col flex-1">
<button {pinnedHosts.length > 0 ? (
onClick={() => onOpenSingletonTab("admin-settings")} <div className="flex flex-col flex-1 overflow-y-auto thin-scrollbar">
className="group/btn flex items-center gap-2.5 px-4 py-2.5 hover:bg-muted transition-colors cursor-pointer border-b border-border flex-1" {pinnedHosts.slice(0, 4).map((host) => (
> <button
<div className="size-7 border border-border bg-muted flex items-center justify-center shrink-0 group-hover/btn:bg-accent-brand/20 group-hover/btn:border-accent-brand/40 transition-colors"> key={host.id}
<Settings className="size-3 text-accent-brand" /> onClick={() => onOpenTab(host, "terminal")}
className="group/btn flex items-center gap-2.5 px-4 py-2 hover:bg-muted transition-colors cursor-pointer border-b border-border last:border-b-0"
>
<div className="size-7 border border-border bg-muted flex items-center justify-center shrink-0 group-hover/btn:bg-accent-brand/20 group-hover/btn:border-accent-brand/40 transition-colors">
<Terminal className="size-3 text-accent-brand" />
</div>
<div className="flex flex-col items-start text-left min-w-0">
<span className="text-xs font-semibold truncate w-full">
{host.name || host.ip}
</span>
<span className="text-[10px] text-muted-foreground truncate w-full">
{host.ip}:{host.sshPort}
</span>
</div>
</button>
))}
</div> </div>
<div className="flex flex-col items-start text-left"> ) : (
<span className="text-xs font-semibold"> <>
{t("dashboard.adminSettings")} <button
</span> onClick={() => onOpenSingletonTab("admin-settings")}
<span className="text-[10px] text-muted-foreground"> className="group/btn flex items-center gap-2.5 px-4 py-2.5 hover:bg-muted transition-colors cursor-pointer border-b border-border flex-1"
{t("dashboardTab.manageUsersAndRoles")} >
</span> <div className="size-7 border border-border bg-muted flex items-center justify-center shrink-0 group-hover/btn:bg-accent-brand/20 group-hover/btn:border-accent-brand/40 transition-colors">
</div> <Settings className="size-3 text-accent-brand" />
</button> </div>
<button <div className="flex flex-col items-start text-left">
onClick={() => onOpenSingletonTab("user-profile")} <span className="text-xs font-semibold">
className="group/btn flex items-center gap-2.5 px-4 py-2.5 hover:bg-muted transition-colors cursor-pointer flex-1" {t("dashboard.adminSettings")}
> </span>
<div className="size-7 border border-border bg-muted flex items-center justify-center shrink-0 group-hover/btn:bg-accent-brand/20 group-hover/btn:border-accent-brand/40 transition-colors"> <span className="text-[10px] text-muted-foreground">
<User className="size-3 text-accent-brand" /> {t("dashboardTab.manageUsersAndRoles")}
</div> </span>
<div className="flex flex-col items-start text-left"> </div>
<span className="text-xs font-semibold"> </button>
{t("dashboard.userProfile")} <button
</span> onClick={() => onOpenSingletonTab("user-profile")}
<span className="text-[10px] text-muted-foreground"> className="group/btn flex items-center gap-2.5 px-4 py-2.5 hover:bg-muted transition-colors cursor-pointer flex-1"
{t("dashboardTab.manageYourAccount")} >
</span> <div className="size-7 border border-border bg-muted flex items-center justify-center shrink-0 group-hover/btn:bg-accent-brand/20 group-hover/btn:border-accent-brand/40 transition-colors">
</div> <User className="size-3 text-accent-brand" />
</button> </div>
<div className="flex flex-col items-start text-left">
<span className="text-xs font-semibold">
{t("dashboard.userProfile")}
</span>
<span className="text-[10px] text-muted-foreground">
{t("dashboardTab.manageYourAccount")}
</span>
</div>
</button>
</>
)}
</div> </div>
</div> </div>
</Card> </Card>
@@ -706,7 +737,7 @@ function CardItem({
/> />
)} )}
{slot.id === "quick_actions" && ( {slot.id === "quick_actions" && (
<QuickActionsCard onOpenSingletonTab={onOpenSingletonTab} /> <QuickActionsCard onOpenSingletonTab={onOpenSingletonTab} hosts={hosts} onOpenTab={onOpenTab} />
)} )}
{slot.id === "host_status" && ( {slot.id === "host_status" && (
<HostStatusCard <HostStatusCard
@@ -1364,7 +1395,7 @@ export function DashboardTab({
/> />
)} )}
{slot.id === "quick_actions" && ( {slot.id === "quick_actions" && (
<QuickActionsCard onOpenSingletonTab={onOpenSingletonTab} /> <QuickActionsCard onOpenSingletonTab={onOpenSingletonTab} hosts={hosts} onOpenTab={onOpenTab} />
)} )}
{slot.id === "host_status" && ( {slot.id === "host_status" && (
<HostStatusCard <HostStatusCard