apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-04-30 19:36:25 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: update sidebar layout for shared and private chats to optimize space usage

Browse source
This commit is contained in:
Anish Sarkar 2026-01-31 23:33:20 +05:30
parent ca7e45405c
commit e5f7e87f42
2 changed files with 15 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

11
surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
View file

@ -125,11 +125,12 @@ export function Sidebar({
<div className="flex-1 w-[60px]" /> <div className="flex-1 w-[60px]" />
) : ( ) : (
<div className="flex-1 flex flex-col gap-1 py-2 w-[240px] min-h-0 overflow-hidden"> <div className="flex-1 flex flex-col gap-1 py-2 w-[240px] min-h-0 overflow-hidden">
{/* Shared Chats Section - takes half the space */} {/* Shared Chats Section - takes only space needed, max 50% */}
<SidebarSection <SidebarSection
title={t("shared_chats")} title={t("shared_chats")}
defaultOpen={true} defaultOpen={true}
fillHeight={true} fillHeight={false}
className="shrink-0 max-h-[50%] flex flex-col"
action={ action={
onViewAllSharedChats ? ( onViewAllSharedChats ? (
<Tooltip> <Tooltip>
@ -151,9 +152,9 @@ export function Sidebar({
} }
> >
{sharedChats.length > 0 ? ( {sharedChats.length > 0 ? (
<div className="relative flex-1 min-h-0"> <div className="relative min-h-0 flex-1">
<div <div
className={`flex flex-col gap-0.5 h-full overflow-y-auto scrollbar-thin scrollbar-thumb-muted-foreground/20 scrollbar-track-transparent ${sharedChats.length > 4 ? "pb-8" : ""}`} className={`flex flex-col gap-0.5 max-h-full overflow-y-auto scrollbar-thin scrollbar-thumb-muted-foreground/20 scrollbar-track-transparent ${sharedChats.length > 4 ? "pb-8" : ""}`}
> >
{sharedChats.slice(0, 20).map((chat) => ( {sharedChats.slice(0, 20).map((chat) => (
<ChatListItem <ChatListItem
@ -177,7 +178,7 @@ export function Sidebar({
)} )}
</SidebarSection> </SidebarSection>
{/* Private Chats Section - takes half the space */} {/* Private Chats Section - fills remaining space */}
<SidebarSection <SidebarSection
title={t("chats")} title={t("chats")}
defaultOpen={true} defaultOpen={true}

18
surfsense_web/components/layout/ui/sidebar/SidebarSection.tsx
View file

@ -30,7 +30,7 @@ export function SidebarSection({
<Collapsible <Collapsible
open={isOpen} open={isOpen}
onOpenChange={setIsOpen} onOpenChange={setIsOpen}
className={cn("overflow-hidden", fillHeight && "flex flex-col flex-1 min-h-0", className)} className={cn("overflow-hidden", fillHeight && "flex flex-col min-h-0", fillHeight && isOpen && "flex-1", className)}
> >
<div className="flex items-center group/section shrink-0"> <div className="flex items-center group/section shrink-0">
<CollapsibleTrigger className="flex flex-1 items-center gap-1.5 px-2 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors min-w-0"> <CollapsibleTrigger className="flex flex-1 items-center gap-1.5 px-2 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors min-w-0">
@ -56,15 +56,15 @@ export function SidebarSection({
)} )}
</div> </div>
<CollapsibleContent <CollapsibleContent
className={cn("overflow-hidden", fillHeight && "flex-1 flex flex-col min-h-0")} className={cn("overflow-hidden flex-1 flex flex-col min-h-0")}
>
<div
className={cn("px-2 pb-2 flex-1 flex flex-col min-h-0 overflow-hidden")}
> >
<div {children}
className={cn("px-2 pb-2", fillHeight && "flex-1 flex flex-col min-h-0 overflow-hidden")} </div>
> </CollapsibleContent>
{children}
</div>
</CollapsibleContent>
</Collapsible> </Collapsible>
); );
} }