From 02434b6e1daef65b95fc2466d1c25f53c9d24e8b Mon Sep 17 00:00:00 2001
From: xintaofei <itpkcn@gmail.com>
Date: Thu, 23 Apr 2026 10:33:42 +0800
Subject: [PATCH] refactor(sidebar): align folder and conversation rail on a
 shared axis

---
 .../sidebar-conversation-card.tsx              |  9 ++++++---
 .../sidebar-conversation-list.tsx              | 18 ++++++++++++++++--
 .../conversations/sidebar-status-icon.tsx      |  2 +-
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/components/conversations/sidebar-conversation-card.tsx b/src/components/conversations/sidebar-conversation-card.tsx
index 0354bf3..61c1841 100644
--- a/src/components/conversations/sidebar-conversation-card.tsx
+++ b/src/components/conversations/sidebar-conversation-card.tsx
@@ -152,14 +152,17 @@ export const SidebarConversationCard = memo(function SidebarConversationCard({
               <span
                 aria-hidden
                 className={cn(
-                  "pointer-events-none absolute -top-px -bottom-px z-0",
+                  "pointer-events-none absolute z-0",
                   isOpenInTab
                     ? "bg-sidebar-primary/85"
                     : "bg-sidebar-primary/30"
                 )}
                 style={{
-                  left: "calc(0.875rem + 0.5px)",
-                  width: "1px",
+                  top: "-0.0625rem",
+                  bottom: "-0.0625rem",
+                  left: "var(--conv-rail-axis, 0.875rem)",
+                  width: "0.125rem",
+                  transform: "translateX(-50%)",
                 }}
               />
               <SidebarStatusIcon status={beadStatus} emphasized={isOpenInTab} />
diff --git a/src/components/conversations/sidebar-conversation-list.tsx b/src/components/conversations/sidebar-conversation-list.tsx
index 159fac6..8366aa6 100644
--- a/src/components/conversations/sidebar-conversation-list.tsx
+++ b/src/components/conversations/sidebar-conversation-list.tsx
@@ -168,15 +168,24 @@ const FolderHeader = memo(function FolderHeader({
               data-folder-id={folderId}
               onClick={() => onToggle(folderId)}
               className={cn(
-                "flex h-full min-w-0 flex-1 items-center gap-[0.5rem] px-2 outline-none",
+                "relative flex h-full min-w-0 flex-1 items-center pr-[0.5rem] outline-none",
                 "text-sidebar-foreground",
                 isDragging ? "cursor-grabbing" : "cursor-grab"
               )}
+              style={{ paddingLeft: "calc(var(--conv-rail-axis) + 0.875rem)" }}
             >
               <span
+                aria-hidden
                 className={cn(
-                  "flex h-[0.75rem] w-[0.75rem] shrink-0 items-center justify-center text-muted-foreground/75"
+                  "pointer-events-none absolute flex items-center justify-center text-muted-foreground/75"
                 )}
+                style={{
+                  top: "50%",
+                  left: "var(--conv-rail-axis)",
+                  width: "0.75rem",
+                  height: "0.75rem",
+                  transform: "translate(-50%, -50%)",
+                }}
               >
                 {expanded ? (
                   <ChevronDown className="h-[0.6875rem] w-[0.6875rem]" />
@@ -919,6 +928,11 @@ export function SidebarConversationList({
                   values={orderedFolderIds}
                   onReorder={handleReorder}
                   className="flex flex-col"
+                  style={
+                    {
+                      "--conv-rail-axis": "0.875rem",
+                    } as React.CSSProperties
+                  }
                 >
                   {orderedFolderIds.map((folderId, index) => {
                     const folderName =
diff --git a/src/components/conversations/sidebar-status-icon.tsx b/src/components/conversations/sidebar-status-icon.tsx
index 571a387..de700a8 100644
--- a/src/components/conversations/sidebar-status-icon.tsx
+++ b/src/components/conversations/sidebar-status-icon.tsx
@@ -28,7 +28,7 @@ function IconFrame({
         className
       )}
       style={{
-        left: "0.875rem",
+        left: "var(--conv-rail-axis, 0.875rem)",
         width: "0.75rem",
         height: "0.75rem",
         transform: "translate(-50%, -50%)",