From 7a6e19097e64b8a982c0dddd5a5f1c4c2f648840 Mon Sep 17 00:00:00 2001
From: xintaofei <itpkcn@gmail.com>
Date: Tue, 21 Apr 2026 17:47:35 +0800
Subject: [PATCH] fix(sidebar): align title/folder/item start position and
 stabilize status icon rendering

---
 .../sidebar-conversation-card.tsx             |   8 +-
 .../sidebar-conversation-list.tsx             |   2 +-
 .../conversations/sidebar-status-icon.tsx     | 142 ++++++++----------
 src/components/layout/sidebar.tsx             |   2 +-
 4 files changed, 73 insertions(+), 81 deletions(-)

diff --git a/src/components/conversations/sidebar-conversation-card.tsx b/src/components/conversations/sidebar-conversation-card.tsx
index 0779223..be5de83 100644
--- a/src/components/conversations/sidebar-conversation-card.tsx
+++ b/src/components/conversations/sidebar-conversation-card.tsx
@@ -143,7 +143,7 @@ export const SidebarConversationCard = memo(function SidebarConversationCard({
                 "relative flex h-[1.9375rem] w-full items-center gap-[0.625rem] text-left outline-none",
                 "rounded-[0.375rem] text-sidebar-foreground",
                 "transition-colors duration-[120ms]",
-                "pr-[0.5rem] pl-[1.875rem]",
+                "pr-[0.5rem] pl-7",
                 isSelected
                   ? "bg-sidebar-primary/15"
                   : "hover:bg-[color-mix(in_oklab,var(--sidebar-accent),var(--sidebar-foreground)_2%)]"
@@ -152,7 +152,11 @@ export const SidebarConversationCard = memo(function SidebarConversationCard({
               <span
                 aria-hidden
                 className="pointer-events-none absolute top-0 bottom-0 rounded-[0.125rem] bg-sidebar-primary/5"
-                style={{ left: "0.9375rem", width: "0.125rem" }}
+                style={{
+                  left: "1rem",
+                  width: "0.125rem",
+                  transform: "translateX(-50%)",
+                }}
               />
               <SidebarStatusIcon status={beadStatus} />
 
diff --git a/src/components/conversations/sidebar-conversation-list.tsx b/src/components/conversations/sidebar-conversation-list.tsx
index 2e24fa8..4c85da5 100644
--- a/src/components/conversations/sidebar-conversation-list.tsx
+++ b/src/components/conversations/sidebar-conversation-list.tsx
@@ -138,7 +138,7 @@ const FolderHeader = memo(function FolderHeader({
             onClick={() => onToggle(folderId)}
             className={cn(
               "flex h-[1.9375rem] w-full items-center gap-[0.5rem] cursor-pointer outline-none",
-              "rounded-[0.4375rem] px-[0.625rem]",
+              "rounded-[0.4375rem] px-2",
               "text-sidebar-foreground hover:bg-[color-mix(in_oklab,var(--sidebar-accent),var(--sidebar-foreground)_2%)]",
               "transition-[background-color,color] duration-150",
               highlighted && "ring-2 ring-sidebar-primary ring-offset-1"
diff --git a/src/components/conversations/sidebar-status-icon.tsx b/src/components/conversations/sidebar-status-icon.tsx
index beb4b74..2e54fa1 100644
--- a/src/components/conversations/sidebar-status-icon.tsx
+++ b/src/components/conversations/sidebar-status-icon.tsx
@@ -9,44 +9,52 @@ interface SidebarStatusIconProps {
   className?: string
 }
 
+function IconFrame({
+  children,
+  colorClass,
+  className,
+}: {
+  children: React.ReactNode
+  colorClass: string
+  className?: string
+}) {
+  return (
+    <div
+      className={cn(
+        "pointer-events-none absolute top-1/2",
+        "flex items-center justify-center",
+        colorClass,
+        className
+      )}
+      style={{
+        left: "1rem",
+        width: "0.625rem",
+        height: "0.625rem",
+        transform: "translate(-50%, -50%)",
+      }}
+      aria-hidden
+    >
+      {children}
+    </div>
+  )
+}
+
 export function SidebarStatusIcon({
   status,
   className,
 }: SidebarStatusIconProps) {
   if (status === "running") {
     return (
-      <div
-        className={cn(
-          "pointer-events-none absolute top-1/2",
-          "flex items-center justify-center",
-          "text-amber-600 dark:text-amber-400",
-          className
-        )}
-        style={{
-          left: "0.625rem",
-          width: "0.75rem",
-          height: "0.75rem",
-          transform: "translateY(-50%)",
-        }}
-        aria-hidden
+      <IconFrame
+        colorClass="text-amber-600 dark:text-amber-400"
+        className={className}
       >
         <svg
-          width="0.75rem"
-          height="0.75rem"
-          viewBox="0 0 12 12"
-          className="absolute inset-0"
+          width="0.625rem"
+          height="0.625rem"
+          viewBox="0 0 10 10"
+          preserveAspectRatio="xMidYMid meet"
         >
-          <circle
-            cx="6"
-            cy="6"
-            r="5.4"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="1"
-            opacity="0.18"
-          />
-        </svg>
-        <svg width="0.625rem" height="0.625rem" viewBox="0 0 10 10">
           <circle
             cx="5"
             cy="5"
@@ -73,28 +81,19 @@ export function SidebarStatusIcon({
             />
           </path>
         </svg>
-      </div>
+      </IconFrame>
     )
   }
 
   if (status === "failed") {
     return (
-      <div
-        className={cn(
-          "pointer-events-none absolute top-1/2",
-          "flex items-center justify-center",
-          "text-destructive",
-          className
-        )}
-        style={{
-          left: "0.6875rem",
-          width: "0.625rem",
-          height: "0.625rem",
-          transform: "translateY(-50%)",
-        }}
-        aria-hidden
-      >
-        <svg width="0.625rem" height="0.625rem" viewBox="0 0 10 10">
+      <IconFrame colorClass="text-destructive" className={className}>
+        <svg
+          width="0.625rem"
+          height="0.625rem"
+          viewBox="0 0 10 10"
+          preserveAspectRatio="xMidYMid meet"
+        >
           <circle
             cx="5"
             cy="5"
@@ -111,28 +110,19 @@ export function SidebarStatusIcon({
             strokeLinecap="round"
           />
         </svg>
-      </div>
+      </IconFrame>
     )
   }
 
   if (status === "active") {
     return (
-      <div
-        className={cn(
-          "pointer-events-none absolute top-1/2",
-          "flex items-center justify-center",
-          "text-sidebar-primary",
-          className
-        )}
-        style={{
-          left: "0.6875rem",
-          width: "0.625rem",
-          height: "0.625rem",
-          transform: "translateY(-50%)",
-        }}
-        aria-hidden
-      >
-        <svg width="0.625rem" height="0.625rem" viewBox="0 0 10 10">
+      <IconFrame colorClass="text-sidebar-primary" className={className}>
+        <svg
+          width="0.625rem"
+          height="0.625rem"
+          viewBox="0 0 10 10"
+          preserveAspectRatio="xMidYMid meet"
+        >
           <circle
             cx="5"
             cy="5"
@@ -144,24 +134,22 @@ export function SidebarStatusIcon({
           />
           <circle cx="5" cy="5" r="2" fill="currentColor" />
         </svg>
-      </div>
+      </IconFrame>
     )
   }
 
   return (
-    <div
-      className={cn(
-        "pointer-events-none absolute top-1/2 rounded-full bg-sidebar-primary/40",
-        className
-      )}
-      style={{
-        left: "0.8125rem",
-        width: "0.375rem",
-        height: "0.375rem",
-        transform: "translateY(-50%)",
-      }}
-      aria-hidden
-    />
+    <IconFrame colorClass="text-sidebar-primary/40" className={className}>
+      <svg
+        width="0.45rem"
+        height="0.45rem"
+        viewBox="0 0 12 12"
+        preserveAspectRatio="xMidYMid meet"
+        style={{ overflow: "visible" }}
+      >
+        <circle cx="6" cy="6" r="5" fill="currentColor" />
+      </svg>
+    </IconFrame>
   )
 }
 
diff --git a/src/components/layout/sidebar.tsx b/src/components/layout/sidebar.tsx
index 578cceb..6bc1ed9 100644
--- a/src/components/layout/sidebar.tsx
+++ b/src/components/layout/sidebar.tsx
@@ -88,7 +88,7 @@ export function Sidebar() {
   return (
     <aside className="flex h-full min-h-0 flex-col overflow-hidden bg-sidebar text-sidebar-foreground select-none">
       <TooltipProvider>
-        <div className="flex h-10 shrink-0 items-center justify-between gap-2 pl-[1.25rem] pr-2">
+        <div className="flex h-10 shrink-0 items-center justify-between gap-2 pl-[1.125rem] pr-2">
           <div className="flex min-w-0 items-baseline gap-[0.375rem]">
             <h2 className="truncate text-[0.875rem] font-bold tracking-[-0.00625rem] text-sidebar-foreground">
               {t("title")}