From 5f2b10fed873f479381148e5d01e491a750e503d Mon Sep 17 00:00:00 2001
From: LukeGus <bugattiguy527@gmail.com>
Date: Wed, 30 Sep 2026 14:03:56 -0500
Subject: [PATCH] feat: tighter compact host rows with inline tags (#1325)

---
 src/ui/sidebar/tree/HostItem/HostItem.tsx     | 25 ++++++++++++++++---
 .../sidebar/tree/HostItem/HostItem.test.tsx   |  7 ++++++
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/ui/sidebar/tree/HostItem/HostItem.tsx b/src/ui/sidebar/tree/HostItem/HostItem.tsx
index 9d4db9d20..6aeee2385 100644
--- a/src/ui/sidebar/tree/HostItem/HostItem.tsx
+++ b/src/ui/sidebar/tree/HostItem/HostItem.tsx
@@ -389,8 +389,7 @@ export function HostItem({
   const depthStyle =
     depth > 0 ? ({ paddingLeft: rem(depth * 12) } as const) : undefined;
 
-  const trayButtonClass =
-    "flex items-center justify-center size-[22.75px] text-muted-foreground/60 hover:text-foreground hover:bg-muted transition-colors";
+  const trayButtonClass = `flex items-center justify-center ${isCompact ? "size-[19px]" : "size-[22.75px]"} text-muted-foreground/60 hover:text-foreground hover:bg-muted transition-colors`;
 
   const availableActions: TabType[] = pluginActions.flatMap((action) =>
     action.tabType ? [action.tabType] : [],
@@ -1167,6 +1166,22 @@ export function HostItem({
               </Tooltip>
             </TooltipProvider>
           )}
+          {isCompact &&
+            showTags &&
+            host.tags?.slice(0, 2).map((tag) => (
+              <span
+                key={tag}
+                data-testid="host-inline-tag"
+                className="text-[9px] px-1 py-px bg-muted/60 text-muted-foreground/70 lowercase leading-none truncate max-w-[5rem] min-w-0"
+              >
+                {tag}
+              </span>
+            ))}
+          {isCompact && showTags && (host.tags?.length ?? 0) > 2 && (
+            <span className="text-[9px] text-muted-foreground/40 shrink-0 leading-none">
+              +{host.tags!.length - 2}
+            </span>
+          )}
           {isCompact && (
             <span
               className="text-[11px] text-muted-foreground/70 truncate leading-none ml-auto max-w-[50%] shrink-0"
@@ -1203,7 +1218,7 @@ export function HostItem({
         )}
 
         {/* Tag pills */}
-        {showTags && host.tags && host.tags.length > 0 && (
+        {showTags && !isCompact && host.tags && host.tags.length > 0 && (
           <div
             className={`flex items-center gap-1 min-w-0 overflow-hidden ${tokens.showTagsRow ? "" : "-mt-0.5"}`}
           >
@@ -1228,7 +1243,9 @@ export function HostItem({
           (alwaysShowTray ||
             actionsOnly ||
             (shouldUseClickTray && isTrayOpen)) && (
-            <div className="flex items-center flex-wrap gap-[3.5px]">
+            <div
+              className={`flex items-center flex-wrap ${isCompact ? "gap-[2px] pt-[3px]" : "gap-[3.5px]"}`}
+            >
               {connectionButtons}
             </div>
           )}
diff --git a/src/ui/tests/sidebar/tree/HostItem/HostItem.test.tsx b/src/ui/tests/sidebar/tree/HostItem/HostItem.test.tsx
index 30a4c6b79..2bbf3762c 100644
--- a/src/ui/tests/sidebar/tree/HostItem/HostItem.test.tsx
+++ b/src/ui/tests/sidebar/tree/HostItem/HostItem.test.tsx
@@ -219,6 +219,13 @@ describe("HostItem density parity", () => {
     expect(screen.getByText("prod")).toBeTruthy();
   });
 
+  it("puts compact tags on the name row instead of their own line", () => {
+    renderHostItem("compact");
+    const tag = screen.getByText("prod");
+    expect(tag.dataset.testid).toBe("host-inline-tag");
+    expect(tag.closest("[data-drag-label]")).toBeTruthy();
+  });
+
   it("hides tags in both densities when showTags is false", () => {
     render(
       <HostItem