fix(sidebar): center guide line under folder chevron and tighten list paddings

- Align conversation guide line and status icon to the folder chevron center (left: 0.875rem)
- Use fixed 1px guide line with darker shade (sidebar-primary/15) for better visibility
- Add bottom border to sidebar title and a top gap above the folder list
- Tighten list horizontal padding to px-2 with matching pt-2 for consistency
- Fill the done status icon frame directly to avoid sub-pixel off-centering
This commit is contained in:
xintaofei
2026-04-21 18:44:20 +08:00
parent 7a6e19097e
commit e567181b58
4 changed files with 12 additions and 13 deletions

View File

@@ -151,10 +151,10 @@ export const SidebarConversationCard = memo(function SidebarConversationCard({
> >
<span <span
aria-hidden aria-hidden
className="pointer-events-none absolute top-0 bottom-0 rounded-[0.125rem] bg-sidebar-primary/5" className="pointer-events-none absolute top-0 bottom-0 rounded-[0.125rem] bg-sidebar-primary/15"
style={{ style={{
left: "1rem", left: "0.875rem",
width: "0.125rem", width: "1px",
transform: "translateX(-50%)", transform: "translateX(-50%)",
}} }}
/> />

View File

@@ -709,7 +709,7 @@ export function SidebarConversationList({
aria-hidden aria-hidden
className="absolute inset-0 right-[0.5rem] bg-sidebar" className="absolute inset-0 right-[0.5rem] bg-sidebar"
/> />
<div className="relative pl-[0.625rem] pr-[0.625rem]"> <div className="relative px-2">
<FolderHeader <FolderHeader
key={`sticky-${stickyFolderItem.folderId}`} key={`sticky-${stickyFolderItem.folderId}`}
folderId={stickyFolderItem.folderId} folderId={stickyFolderItem.folderId}
@@ -731,7 +731,7 @@ export function SidebarConversationList({
)} )}
<ScrollArea <ScrollArea
className={cn( className={cn(
"h-full min-h-0 pl-[0.625rem] pr-[0.625rem] pt-[0.125rem] pb-[1.25rem]", "h-full min-h-0 px-2 pb-[1.25rem]",
"[overflow-anchor:none]" "[overflow-anchor:none]"
)} )}
> >

View File

@@ -27,7 +27,7 @@ function IconFrame({
className className
)} )}
style={{ style={{
left: "1rem", left: "0.875rem",
width: "0.625rem", width: "0.625rem",
height: "0.625rem", height: "0.625rem",
transform: "translate(-50%, -50%)", transform: "translate(-50%, -50%)",
@@ -141,13 +141,12 @@ export function SidebarStatusIcon({
return ( return (
<IconFrame colorClass="text-sidebar-primary/40" className={className}> <IconFrame colorClass="text-sidebar-primary/40" className={className}>
<svg <svg
width="0.45rem" width="0.625rem"
height="0.45rem" height="0.625rem"
viewBox="0 0 12 12" viewBox="0 0 10 10"
preserveAspectRatio="xMidYMid meet" preserveAspectRatio="xMidYMid meet"
style={{ overflow: "visible" }}
> >
<circle cx="6" cy="6" r="5" fill="currentColor" /> <circle cx="5" cy="5" r="3" fill="currentColor" />
</svg> </svg>
</IconFrame> </IconFrame>
) )

View File

@@ -88,7 +88,7 @@ export function Sidebar() {
return ( return (
<aside className="flex h-full min-h-0 flex-col overflow-hidden bg-sidebar text-sidebar-foreground select-none"> <aside className="flex h-full min-h-0 flex-col overflow-hidden bg-sidebar text-sidebar-foreground select-none">
<TooltipProvider> <TooltipProvider>
<div className="flex h-10 shrink-0 items-center justify-between gap-2 pl-[1.125rem] pr-2"> <div className="flex h-10 shrink-0 items-center justify-between gap-2 border-b border-border pl-4 pr-2">
<div className="flex min-w-0 items-baseline gap-[0.375rem]"> <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"> <h2 className="truncate text-[0.875rem] font-bold tracking-[-0.00625rem] text-sidebar-foreground">
{t("title")} {t("title")}
@@ -154,7 +154,7 @@ export function Sidebar() {
{/* On mobile, clicking a conversation card auto-closes the Sheet */} {/* On mobile, clicking a conversation card auto-closes the Sheet */}
<div <div
className="flex flex-col flex-1 min-h-0 overflow-hidden" className="flex flex-col flex-1 min-h-0 overflow-hidden pt-2"
onClick={ onClick={
isMobile isMobile
? (e) => { ? (e) => {