Ethica/Termix
1
0 Fork 0
mirror of https://github.com/Termix-SSH/Termix.git synced 2026-10-31 07:35:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(hosts): keep compact row actions inline (#1547)

Browse Source
This commit is contained in:
ZacharyZcR authored and GitHub committed 2026-10-03 21:02:54 +08:00
1 parent 2c4de5f705
commit c66702deb1
2 files changed
+74 -50
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/ui/sidebar/tree/HostItem/HostItem.tsx
+73 -50
View File
@@ -1096,7 +1096,10 @@ export function HostItem({
className={`flex flex-col flex-1 min-w-0 ${tokens.rowPadding} ${isCompact ? "" : "gap-[3.5px]"}`} className={`flex flex-col flex-1 min-w-0 ${tokens.rowPadding} ${isCompact ? "" : "gap-[3.5px]"}`}
> >
{/* Name row */} {/* Name row */}
<div data-drag-label className="flex items-center gap-1.5 min-w-0"> <div
data-drag-label
className={`flex items-center gap-1.5 min-w-0 ${isCompact ? "min-h-[19px]" : ""}`}
>
{onToggleExpand && ( {onToggleExpand && (
<button <button
type="button" type="button"
@@ -1190,6 +1193,23 @@ export function HostItem({
{host.ip} {host.ip}
</span> </span>
)} )}
{isCompact && !selectionMode && (
<div
data-testid="host-inline-actions"
className={`flex items-center gap-[2px] min-w-0 max-w-[60%] overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&>*]:shrink-0 ${alwaysShowTray || actionsOnly || trayOpenState || hoverTrayOpen ? "" : "hidden"}`}
>
{connectionButtons}
<div
className={
alwaysShowTray || trayOpenState || hoverTrayOpen
? "flex items-center gap-[2px]"
: "hidden"
}
>
{managementButtons}
</div>
</div>
)}
{!selectionMode && (shouldUseClickTray || actionsOnly) && ( {!selectionMode && (shouldUseClickTray || actionsOnly) && (
<button <button
title={ title={
@@ -1239,7 +1259,8 @@ export function HostItem({
)} )}
{/* Connection buttons: permanent in "always"/"actionsOnly" modes, or shown once the chevron opens the tray in click mode */} {/* Connection buttons: permanent in "always"/"actionsOnly" modes, or shown once the chevron opens the tray in click mode */}
{!selectionMode && {!isCompact &&
!selectionMode &&
(alwaysShowTray || (alwaysShowTray ||
actionsOnly || actionsOnly ||
(shouldUseClickTray && isTrayOpen)) && ( (shouldUseClickTray && isTrayOpen)) && (
@@ -1251,61 +1272,63 @@ export function HostItem({
)} )}
{/* Action tray — slides open on hover (default) or via chevron in click-tray mode */} {/* Action tray — slides open on hover (default) or via chevron in click-tray mode */}
<div className={trayVisibilityClass}> {!isCompact && (
{tokens.showResourceRow && <div className={trayVisibilityClass}>
isOnline && {tokens.showResourceRow &&
((host.cpu != null && host.cpu > 0) || isOnline &&
(host.ram != null && host.ram > 0)) && ( ((host.cpu != null && host.cpu > 0) ||
<div className="flex items-center gap-[10.5px] pt-[5.25px]"> (host.ram != null && host.ram > 0)) && (
{host.cpu != null && host.cpu > 0 && ( <div className="flex items-center gap-[10.5px] pt-[5.25px]">
<div className="flex items-center gap-1.5"> {host.cpu != null && host.cpu > 0 && (
<Cpu className="size-2.5 shrink-0 text-muted-foreground/40" /> <div className="flex items-center gap-1.5">
<div className="w-9 h-1 bg-muted-foreground/15 rounded-full overflow-hidden"> <Cpu className="size-2.5 shrink-0 text-muted-foreground/40" />
<div <div className="w-9 h-1 bg-muted-foreground/15 rounded-full overflow-hidden">
className={`motion-meter h-full rounded-full ${host.cpu > 80 ? "bg-red-400" : host.cpu > 50 ? "bg-yellow-400" : "bg-accent-brand"}`} <div
style={{ width: `${host.cpu}%` }} className={`motion-meter h-full rounded-full ${host.cpu > 80 ? "bg-red-400" : host.cpu > 50 ? "bg-yellow-400" : "bg-accent-brand"}`}
/> style={{ width: `${host.cpu}%` }}
/>
</div>
<span className="text-[9px] tabular-nums text-muted-foreground/50">
{host.cpu}%
</span>
</div> </div>
<span className="text-[9px] tabular-nums text-muted-foreground/50"> )}
{host.cpu}% {host.ram != null && host.ram > 0 && (
</span> <div className="flex items-center gap-1.5">
</div> <MemoryStick className="size-2.5 shrink-0 text-muted-foreground/40" />
)} <div className="w-9 h-1 bg-muted-foreground/15 rounded-full overflow-hidden">
{host.ram != null && host.ram > 0 && ( <div
<div className="flex items-center gap-1.5"> className={`motion-meter h-full rounded-full ${host.ram > 80 ? "bg-red-400" : host.ram > 60 ? "bg-yellow-400" : "bg-accent-brand/60"}`}
<MemoryStick className="size-2.5 shrink-0 text-muted-foreground/40" /> style={{ width: `${host.ram}%` }}
<div className="w-9 h-1 bg-muted-foreground/15 rounded-full overflow-hidden"> />
<div </div>
className={`motion-meter h-full rounded-full ${host.ram > 80 ? "bg-red-400" : host.ram > 60 ? "bg-yellow-400" : "bg-accent-brand/60"}`} <span className="text-[9px] tabular-nums text-muted-foreground/50">
style={{ width: `${host.ram}%` }} {host.ram}%
/> </span>
</div> </div>
<span className="text-[9px] tabular-nums text-muted-foreground/50"> )}
{host.ram}% </div>
</span> )}
</div>
)}
</div>
)}
<div
className={`flex flex-col gap-0.5 ${alwaysShowTray || actionsOnly || shouldUseClickTray ? "" : "pt-1.5"}`}
>
{/* Connection buttons — only shown here when not already shown above */}
{!alwaysShowTray && !actionsOnly && !shouldUseClickTray && (
<div className="flex items-center flex-wrap gap-[1.75px]">
{connectionButtons}
</div>
)}
{/* Management buttons row */}
<div <div
className={`flex items-center gap-[1.75px] border-t border-border/30 ${alwaysShowTray || actionsOnly || shouldUseClickTray ? "pt-[5.25px]" : "pt-[3.5px] mt-[1.75px]"}`} className={`flex flex-col gap-0.5 ${alwaysShowTray || actionsOnly || shouldUseClickTray ? "" : "pt-1.5"}`}
> >
{managementButtons} {/* Connection buttons — only shown here when not already shown above */}
{!alwaysShowTray && !actionsOnly && !shouldUseClickTray && (
<div className="flex items-center flex-wrap gap-[1.75px]">
{connectionButtons}
</div>
)}
{/* Management buttons row */}
<div
className={`flex items-center gap-[1.75px] border-t border-border/30 ${alwaysShowTray || actionsOnly || shouldUseClickTray ? "pt-[5.25px]" : "pt-[3.5px] mt-[1.75px]"}`}
>
{managementButtons}
</div>
</div> </div>
</div> </div>
</div> )}
{authOverrideProtocol && ( {authOverrideProtocol && (
<HostAuthOverrideModal <HostAuthOverrideModal
open open
src/ui/sidebar/tree/SidebarTree.tsx
+1
View File
@@ -754,6 +754,7 @@ export function SidebarTree({
const row = visibleRows[index]; const row = visibleRows[index];
if (!row) return FOLDER_ROW_HEIGHT; if (!row) return FOLDER_ROW_HEIGHT;
if (isFolder(row.item)) return FOLDER_ROW_HEIGHT; if (isFolder(row.item)) return FOLDER_ROW_HEIGHT;
if (isCompactDensity) return 29;
const tagExtra = showTags && row.item.tags?.length ? TAG_ROW_EXTRA : 0; const tagExtra = showTags && row.item.tags?.length ? TAG_ROW_EXTRA : 0;
// The resource bars only render for an online host that reported CPU/RAM. // The resource bars only render for an online host that reported CPU/RAM.
// Reserving their height unconditionally left a gap under every offline // Reserving their height unconditionally left a gap under every offline