From f1244f467bd2b57a575399e0fbb61712a11f9f2c Mon Sep 17 00:00:00 2001
From: Naiyuan Qing <145280634+NevilleQingNY@users.noreply.github.com>
Date: Fri, 30 Jan 2026 22:48:19 +0800
Subject: [PATCH] refactor(ui): replace absolute-positioned delete with flex
 layout in HubSidebar

Drop SidebarMenuAction (absolute positioning) in favor of a flex row:
left side (SidebarMenuButton) gets flex-1 min-w-0 for natural truncation,
right side (delete button) sits as a normal flex child with hover reveal.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 apps/web/app/components/hub-sidebar.tsx | 39 +++++++++++++------------
 1 file changed, 20 insertions(+), 19 deletions(-)

diff --git a/apps/web/app/components/hub-sidebar.tsx b/apps/web/app/components/hub-sidebar.tsx
index 9120ff5c..732a2d38 100644
--- a/apps/web/app/components/hub-sidebar.tsx
+++ b/apps/web/app/components/hub-sidebar.tsx
@@ -8,7 +8,6 @@ import {
   SidebarMenu,
   SidebarMenuItem,
   SidebarMenuButton,
-  SidebarMenuAction,
 } from "@multica/ui/components/ui/sidebar"
 import { Button } from "@multica/ui/components/ui/button"
 import { HugeiconsIcon } from "@hugeicons/react"
@@ -73,24 +72,26 @@ export function HubSidebar() {
                 </div>
               )}
               {agents.map(agent => (
-                <SidebarMenuItem key={agent.id}>
-                  <SidebarMenuButton
-                    isActive={agent.id === activeAgentId}
-                    onClick={() => setActiveAgentId(agent.id)}
-                    className="font-mono text-xs truncate"
-                  >
-                    {agent.id}
-                  </SidebarMenuButton>
-                  <SidebarMenuAction
-                    showOnHover
-                    onClick={() => {
-                      if (activeAgentId === agent.id) setActiveAgentId(null)
-                      deleteAgent(agent.id)
-                    }}
-                    title="Delete agent"
-                  >
-                    <HugeiconsIcon icon={Delete02Icon} strokeWidth={1.5} className="size-3.5 text-muted-foreground" />
-                  </SidebarMenuAction>
+                <SidebarMenuItem key={agent.id} className="group/agent-item">
+                  <div className="flex items-center gap-1 w-full">
+                    <SidebarMenuButton
+                      isActive={agent.id === activeAgentId}
+                      onClick={() => setActiveAgentId(agent.id)}
+                      className="font-mono text-xs flex-1 min-w-0"
+                    >
+                      {agent.id}
+                    </SidebarMenuButton>
+                    <button
+                      onClick={() => {
+                        if (activeAgentId === agent.id) setActiveAgentId(null)
+                        deleteAgent(agent.id)
+                      }}
+                      title="Delete agent"
+                      className="shrink-0 size-5 flex items-center justify-center rounded-md opacity-0 group-hover/agent-item:opacity-100 hover:bg-sidebar-accent text-muted-foreground transition-opacity cursor-pointer"
+                    >
+                      <HugeiconsIcon icon={Delete02Icon} strokeWidth={1.5} className="size-3.5" />
+                    </button>
+                  </div>
                 </SidebarMenuItem>
               ))}
             </SidebarMenu>