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

refactor(sidebar): update sidebar resizing logic to use pointer events; enhance drag cursor handling and improve sidebar width persistence

Browse source
This commit is contained in:
Anish Sarkar 2026-05-04 01:47:17 +05:30
parent 331589275b
commit 147be71238
5 changed files with 208 additions and 166 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -137,7 +137,7 @@ function CollapsedOverlay({ item }: { item: NavItem }) {
export function NavSection({ items, onItemClick, isCollapsed = false }: NavSectionProps) {
return (
<div className={cn("flex flex-col gap-0.5 py-2", isCollapsed && "items-center")}>
<div className="flex flex-col gap-0.5 py-2">
{items.map((item) => {
const { tooltip } = getStatusInfo(item.statusIndicator);

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

@ -113,45 +113,43 @@ export function Sidebar({
[navItems]
);
const collapsedWidth = 51;
return (
<div
className={cn(
"relative flex h-full flex-col bg-panel text-sidebar-foreground overflow-hidden select-none",
isCollapsed ? "w-[60px] transition-[width] duration-200" : "",
!isCollapsed && !isResizing ? "transition-[width] duration-200" : "",
!isResizing && "transition-[width] duration-200 ease-out",
className
)}
style={!isCollapsed ? { width: sidebarWidth } : undefined}
style={{ width: isCollapsed ? collapsedWidth : sidebarWidth }}
>
{/* Header - search space name or collapse button when collapsed */}
{isCollapsed ? (
<div className="flex h-12 shrink-0 items-center justify-center border-b">
<div className="flex h-12 shrink-0 items-center gap-0 px-1 border-b">
<div
className={cn(
"min-w-0 overflow-hidden",
"transition-[max-width,opacity,margin-right] duration-200 ease-out",
isCollapsed ? "max-w-0 opacity-0 mr-0" : "max-w-[400px] flex-1 opacity-100"
)}
aria-hidden={isCollapsed}
>
<SidebarHeader
searchSpace={searchSpace}
isCollapsed={false}
onSettings={onSettings}
onManageMembers={onManageMembers}
/>
</div>
<div className={cn("shrink-0", isCollapsed && "mx-auto")}>
<SidebarCollapseButton
isCollapsed={isCollapsed}
onToggle={onToggleCollapse ?? (() => {})}
disableTooltip={disableTooltips}
/>
</div>
) : (
<div className="flex h-12 shrink-0 items-center gap-0 px-1 border-b">
<SidebarHeader
searchSpace={searchSpace}
isCollapsed={isCollapsed}
onSettings={onSettings}
onManageMembers={onManageMembers}
/>
<div className="shrink-0">
<SidebarCollapseButton
isCollapsed={isCollapsed}
onToggle={onToggleCollapse ?? (() => {})}
disableTooltip={disableTooltips}
/>
</div>
</div>
)}
</div>
{/* New chat button + Inbox */}
<div className={cn("flex flex-col gap-0.5 py-1.5", isCollapsed && "items-center")}>
<div className="flex flex-col gap-0.5 py-1.5">
<SidebarButton
icon={SquarePen}
label={t("new_chat")}
@ -177,7 +175,7 @@ export function Sidebar({
{/* Chat sections - fills available space */}
{isCollapsed ? (
<div className="flex-1 w-[60px]" />
<div className="flex-1 w-full" />
) : (
<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% */}

103
surfsense_web/components/layout/ui/sidebar/SidebarButton.tsx
View file

@ -27,15 +27,9 @@ interface SidebarButtonProps {
buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
}
const expandedClassName = cn(
"flex items-center gap-2 rounded-md mx-2 px-2 py-1.5 text-sm transition-colors text-left",
"hover:bg-accent hover:text-accent-foreground",
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
);
const collapsedClassName = cn(
"relative flex h-10 w-10 items-center justify-center rounded-md transition-colors",
"hover:bg-accent hover:text-accent-foreground",
const baseClassName = cn(
"group/sidebar-button relative flex h-9 items-center rounded-md mx-2 px-2 text-sm text-left",
"transition-colors hover:bg-accent hover:text-accent-foreground",
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
);
@ -56,53 +50,67 @@ export function SidebarButton({
}: SidebarButtonProps) {
const activeClassName = "bg-accent text-accent-foreground";
if (isCollapsed) {
return (
<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
onClick={onClick}
className={cn(collapsedClassName, isActive && activeClassName, className)}
{...buttonProps}
>
{collapsedIconNode ?? <Icon className="h-3.5 w-3.5" />}
{collapsedOverlay}
<span className="sr-only">{label}</span>
</button>
</TooltipTrigger>
<TooltipContent side="right" className="max-w-xs">
{tooltipContent ?? (
<>
{label}
{typeof badge === "string" && ` (${badge})`}
</>
)}
</TooltipContent>
</Tooltip>
);
}
const iconNode = isCollapsed
? (collapsedIconNode ?? <Icon className="h-3.5 w-3.5" />)
: (expandedIconNode ?? <Icon className="h-3.5 w-3.5 shrink-0" />);
const button = (
<button
type="button"
onClick={onClick}
className={cn(expandedClassName, isActive && activeClassName, className)}
aria-label={isCollapsed ? label : undefined}
className={cn(baseClassName, isActive && activeClassName, className)}
{...buttonProps}
>
{expandedIconNode ?? <Icon className="h-3.5 w-3.5 shrink-0" />}
<span className="flex-1 truncate">{label}</span>
{trailingContent}
{badge && typeof badge !== "string" ? badge : null}
{badge && typeof badge === "string" ? (
<span className="inline-flex items-center justify-center min-w-4 h-4 px-1 rounded-full bg-red-500 text-white text-[10px] font-medium">
<span
className={cn(
"flex min-w-0 items-center translate-x-0.5 transition-transform duration-200 ease-out",
isCollapsed ? "shrink-0" : "flex-1"
)}
>
<span className="flex h-3.5 w-3.5 shrink-0 items-center justify-center">
{iconNode}
</span>
<span
className={cn(
"min-w-0 overflow-hidden whitespace-nowrap text-left",
"transition-[max-width,opacity,margin-left] duration-200 ease-out",
isCollapsed
? "max-w-0 opacity-0 ml-0"
: "max-w-[260px] flex-1 opacity-100 ml-2"
)}
>
<span className="block truncate">{label}</span>
</span>
</span>
{!isCollapsed && trailingContent}
{!isCollapsed && badge && typeof badge !== "string" ? badge : null}
{!isCollapsed && badge && typeof badge === "string" ? (
<span className="ml-1 inline-flex items-center justify-center min-w-4 h-4 px-1 rounded-full bg-red-500 text-white text-[10px] font-medium">
{badge}
</span>
) : null}
{collapsedOverlay && (
<span
aria-hidden={!isCollapsed}
className={cn(
"pointer-events-none absolute inset-0 transition-opacity duration-150",
isCollapsed ? "opacity-100" : "opacity-0"
)}
>
{collapsedOverlay}
</span>
)}
<span className="sr-only">{label}</span>
</button>
);
if (!tooltipContent) {
const renderTooltip = isCollapsed || !!tooltipContent;
if (!renderTooltip) {
return button;
}
@ -110,7 +118,14 @@ export function SidebarButton({
<Tooltip>
<TooltipTrigger asChild>{button}</TooltipTrigger>
<TooltipContent side="right" className="max-w-xs">
{tooltipContent}
{isCollapsed
? (tooltipContent ?? (
<>
{label}
{typeof badge === "string" && ` (${badge})`}
</>
))
: tooltipContent}
</TooltipContent>
</Tooltip>
);