refactor(sidebar): tighten list padding and round conversation and folder rows into pills
This commit is contained in:
@@ -138,7 +138,7 @@ export const SidebarConversationCard = memo(function SidebarConversationCard({
|
||||
onDoubleClick={handleDblClick}
|
||||
className={cn(
|
||||
"relative flex h-[1.9375rem] w-full items-center gap-[0.625rem] text-left outline-none",
|
||||
"rounded-[0.375rem] text-sidebar-foreground",
|
||||
"rounded-full text-sidebar-foreground",
|
||||
"transition-colors duration-[120ms]",
|
||||
"pr-[0.5rem] pl-7",
|
||||
isSelected
|
||||
|
||||
@@ -150,7 +150,7 @@ const FolderHeader = memo(function FolderHeader({
|
||||
<div
|
||||
className={cn(
|
||||
"flex h-[1.9375rem] w-full items-center",
|
||||
"rounded-[0.4375rem]",
|
||||
"rounded-full",
|
||||
"transition-colors duration-150",
|
||||
"hover:bg-[color-mix(in_oklab,var(--sidebar-accent),var(--sidebar-foreground)_2%)]"
|
||||
)}
|
||||
@@ -759,9 +759,9 @@ export function SidebarConversationList({
|
||||
>
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-0 right-[0.5rem] bg-sidebar"
|
||||
className="absolute inset-0 right-[0.25rem] bg-sidebar"
|
||||
/>
|
||||
<div className="relative px-2">
|
||||
<div className="relative px-1">
|
||||
<FolderHeader
|
||||
key={`sticky-${stickyFolderItem.folderId}`}
|
||||
folderId={stickyFolderItem.folderId}
|
||||
@@ -781,7 +781,7 @@ export function SidebarConversationList({
|
||||
)}
|
||||
<ScrollArea
|
||||
className={cn(
|
||||
"h-full min-h-0 px-2 pb-[1.25rem]",
|
||||
"h-full min-h-0 px-1 pb-[1.25rem]",
|
||||
"[overflow-anchor:none]"
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -130,7 +130,7 @@ export function Sidebar() {
|
||||
|
||||
{/* On mobile, clicking a conversation card auto-closes the Sheet */}
|
||||
<div
|
||||
className="flex flex-col flex-1 min-h-0 overflow-hidden pt-2"
|
||||
className="flex flex-col flex-1 min-h-0 overflow-hidden pt-1"
|
||||
onClick={
|
||||
isMobile
|
||||
? (e) => {
|
||||
|
||||
Reference in New Issue
Block a user