apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-21 18:55:16 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(sidebar): adjust padding and gradient heights for improved layout consistency; enhance SidebarUsageFooter to conditionally render border based on navigation items

Browse source
This commit is contained in:
Anish Sarkar 2026-05-03 19:18:30 +05:30
parent 4e8c552440
commit 2e1367b00e
2 changed files with 20 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -179,7 +179,7 @@ export function Sidebar({
{isCollapsed ? ( {isCollapsed ? (
<div className="flex-1 w-[60px]" /> <div className="flex-1 w-[60px]" />
) : ( ) : (
<div className="flex-1 flex flex-col gap-1 py-2 w-full min-h-0 overflow-hidden"> <div className="flex-1 flex flex-col gap-1 pt-2 w-full min-h-0 overflow-hidden">
{/* Shared Chats Section - takes only space needed, max 50% */} {/* Shared Chats Section - takes only space needed, max 50% */}
<SidebarSection <SidebarSection
title={t("shared_chats")} title={t("shared_chats")}
@ -210,7 +210,7 @@ export function Sidebar({
) : sharedChats.length > 0 ? ( ) : sharedChats.length > 0 ? (
<div className="relative min-h-0 flex-1"> <div className="relative min-h-0 flex-1">
<div <div
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" : ""}`} 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-2" : ""}`}
> >
{sharedChats.slice(0, 20).map((chat) => ( {sharedChats.slice(0, 20).map((chat) => (
<ChatListItem <ChatListItem
@ -229,7 +229,7 @@ export function Sidebar({
</div> </div>
{/* Gradient fade indicator when more than 4 items */} {/* Gradient fade indicator when more than 4 items */}
{sharedChats.length > 4 && ( {sharedChats.length > 4 && (
<div className="pointer-events-none absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-sidebar via-sidebar/90 to-transparent" /> <div className="pointer-events-none absolute bottom-0 left-0 right-0 h-5 bg-gradient-to-t from-sidebar/80 to-transparent" />
)} )}
</div> </div>
) : ( ) : (
@ -266,7 +266,7 @@ export function Sidebar({
) : chats.length > 0 ? ( ) : chats.length > 0 ? (
<div className="relative flex-1 min-h-0"> <div className="relative flex-1 min-h-0">
<div <div
className={`flex flex-col gap-0.5 h-full overflow-y-auto scrollbar-thin scrollbar-thumb-muted-foreground/20 scrollbar-track-transparent ${chats.length > 4 ? "pb-8" : ""}`} className={`flex flex-col gap-0.5 h-full overflow-y-auto scrollbar-thin scrollbar-thumb-muted-foreground/20 scrollbar-track-transparent ${chats.length > 4 ? "pb-2" : ""}`}
> >
{chats.slice(0, 20).map((chat) => ( {chats.slice(0, 20).map((chat) => (
<ChatListItem <ChatListItem
@ -285,7 +285,7 @@ export function Sidebar({
</div> </div>
{/* Gradient fade indicator when more than 4 items */} {/* Gradient fade indicator when more than 4 items */}
{chats.length > 4 && ( {chats.length > 4 && (
<div className="pointer-events-none absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-sidebar via-sidebar/90 to-transparent" /> <div className="pointer-events-none absolute bottom-0 left-0 right-0 h-5 bg-gradient-to-t from-sidebar/80 to-transparent" />
)} )}
</div> </div>
) : ( ) : (
@ -306,7 +306,11 @@ export function Sidebar({
/> />
)} )}
<SidebarUsageFooter pageUsage={pageUsage} isCollapsed={isCollapsed} /> <SidebarUsageFooter
pageUsage={pageUsage}
isCollapsed={isCollapsed}
hasNavSectionAbove={footerNavItems.length > 0}
/>
{renderUserProfile && ( {renderUserProfile && (
<SidebarUserProfile <SidebarUserProfile
@ -328,9 +332,11 @@ export function Sidebar({
function SidebarUsageFooter({ function SidebarUsageFooter({
pageUsage, pageUsage,
isCollapsed, isCollapsed,
hasNavSectionAbove = false,
}: { }: {
pageUsage?: PageUsage; pageUsage?: PageUsage;
isCollapsed: boolean; isCollapsed: boolean;
hasNavSectionAbove?: boolean;
}) { }) {
const params = useParams(); const params = useParams();
const searchSpaceId = params?.search_space_id ?? ""; const searchSpaceId = params?.search_space_id ?? "";
@ -338,9 +344,14 @@ function SidebarUsageFooter({
if (isCollapsed) return null; if (isCollapsed) return null;
const containerClass = cn(
"px-3 py-3 space-y-3",
hasNavSectionAbove && "border-t border-border/60"
);
if (isAnonymous) { if (isAnonymous) {
return ( return (
<div className="px-3 py-3 border-t border-border/60 space-y-3"> <div className={containerClass}>
{pageUsage && ( {pageUsage && (
<div className="space-y-1.5"> <div className="space-y-1.5">
<div className="flex justify-between items-center text-xs"> <div className="flex justify-between items-center text-xs">
@ -373,7 +384,7 @@ function SidebarUsageFooter({
} }
return ( return (
<div className="px-3 py-3 border-t border-border/60 space-y-3"> <div className={containerClass}>
<PremiumTokenUsageDisplay /> <PremiumTokenUsageDisplay />
<AuthenticatedPageUsageDisplay /> <AuthenticatedPageUsageDisplay />
<div className="space-y-0.5"> <div className="space-y-0.5">

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

@ -69,7 +69,7 @@ export function SidebarSection({
</div> </div>
<CollapsibleContent className={cn("overflow-hidden flex-1 flex flex-col min-h-0")}> <CollapsibleContent 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 className={cn("px-2 flex-1 flex flex-col min-h-0 overflow-hidden")}>
{children} {children}
</div> </div>
</CollapsibleContent> </CollapsibleContent>