mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-05-21 18:55:16 +02:00
refactor(sidebar): update sidebar resizing logic to use pointer events; enhance drag cursor handling and improve sidebar width persistence
This commit is contained in:
Anish Sarkar
parent
331589275b
commit
147be71238
5 changed files with 208 additions and 166 deletions
|
|
@ -11,7 +11,11 @@ import type { InboxItem } from "@/hooks/use-inbox";
|
|||
import { useIsMobile } from "@/hooks/use-mobile";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { SidebarProvider, useSidebarState } from "../../hooks";
|
||||
import { useSidebarResize } from "../../hooks/useSidebarResize";
|
||||
import {
|
||||
SIDEBAR_MAX_WIDTH,
|
||||
SIDEBAR_MIN_WIDTH,
|
||||
useSidebarResize,
|
||||
} from "../../hooks/useSidebarResize";
|
||||
import type { ChatItem, NavItem, PageUsage, SearchSpace, User } from "../../types/layout.types";
|
||||
import { Header } from "../header";
|
||||
import { IconRail } from "../icon-rail";
|
||||
|
|
@ -25,7 +29,6 @@ import {
|
|||
MobileSidebarTrigger,
|
||||
Sidebar,
|
||||
} from "../sidebar";
|
||||
import { SidebarCollapseButton } from "../sidebar/SidebarCollapseButton";
|
||||
import { SidebarSlideOutPanel } from "../sidebar/SidebarSlideOutPanel";
|
||||
import { TabBar } from "../tabs/TabBar";
|
||||
|
||||
|
|
@ -123,13 +126,11 @@ function MainContentPanel({
|
|||
isChatPage,
|
||||
onTabSwitch,
|
||||
onNewChat,
|
||||
leftActions,
|
||||
children,
|
||||
}: {
|
||||
isChatPage: boolean;
|
||||
onTabSwitch?: (tab: Tab) => void;
|
||||
onNewChat?: () => void;
|
||||
leftActions?: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const activeTab = useAtomValue(activeTabAtom);
|
||||
|
|
@ -140,7 +141,6 @@ function MainContentPanel({
|
|||
<TabBar
|
||||
onTabSwitch={onTabSwitch}
|
||||
onNewChat={onNewChat}
|
||||
leftActions={leftActions}
|
||||
rightActions={<RightPanelExpandButton />}
|
||||
className="min-w-0"
|
||||
/>
|
||||
|
|
@ -214,7 +214,7 @@ export function LayoutShell({
|
|||
const { isCollapsed, setIsCollapsed, toggleCollapsed } = useSidebarState(defaultCollapsed);
|
||||
const {
|
||||
sidebarWidth,
|
||||
handleMouseDown: onResizeMouseDown,
|
||||
handlePointerDown: onResizePointerDown,
|
||||
isDragging: isResizing,
|
||||
} = useSidebarResize();
|
||||
|
||||
|
|
@ -382,10 +382,7 @@ export function LayoutShell({
|
|||
onSearchSpaceDelete={onSearchSpaceDelete}
|
||||
onSearchSpaceSettings={onSearchSpaceSettings}
|
||||
onAddSearchSpace={onAddSearchSpace}
|
||||
isSingleRailMode={isCollapsed}
|
||||
onNewChat={onNewChat}
|
||||
navItems={navItems}
|
||||
onNavItemClick={onNavItemClick}
|
||||
isSingleRailMode={false}
|
||||
user={user}
|
||||
onUserSettings={onUserSettings}
|
||||
onAnnouncements={onAnnouncements}
|
||||
|
|
@ -397,58 +394,54 @@ export function LayoutShell({
|
|||
</div>
|
||||
|
||||
{/* Sidebar + slide-out panels share one container; overflow visible so panels can overlay main content. Negative right margin closes the flex gap so the sidebar sits flush against the main panel, separated only by a border. */}
|
||||
<div
|
||||
className={cn(
|
||||
"relative hidden md:flex shrink-0 z-20 -mr-2 border-r",
|
||||
!isCollapsed && "bg-panel"
|
||||
)}
|
||||
>
|
||||
{!isCollapsed && (
|
||||
<Sidebar
|
||||
searchSpace={searchSpace}
|
||||
isCollapsed={isCollapsed}
|
||||
onToggleCollapse={toggleCollapsed}
|
||||
navItems={navItems}
|
||||
onNavItemClick={onNavItemClick}
|
||||
chats={chats}
|
||||
sharedChats={sharedChats}
|
||||
activeChatId={activeChatId}
|
||||
onNewChat={onNewChat}
|
||||
onChatSelect={onChatSelect}
|
||||
onChatRename={onChatRename}
|
||||
onChatDelete={onChatDelete}
|
||||
onChatArchive={onChatArchive}
|
||||
onViewAllSharedChats={onViewAllSharedChats}
|
||||
onViewAllPrivateChats={onViewAllPrivateChats}
|
||||
isSharedChatsPanelOpen={activeSlideoutPanel === "shared"}
|
||||
isPrivateChatsPanelOpen={activeSlideoutPanel === "private"}
|
||||
user={user}
|
||||
onSettings={onSettings}
|
||||
onManageMembers={onManageMembers}
|
||||
onUserSettings={onUserSettings}
|
||||
onAnnouncements={onAnnouncements}
|
||||
announcementUnreadCount={announcementUnreadCount}
|
||||
onLogout={onLogout}
|
||||
pageUsage={pageUsage}
|
||||
theme={theme}
|
||||
setTheme={setTheme}
|
||||
renderUserProfile={false}
|
||||
className="flex shrink-0"
|
||||
isLoadingChats={isLoadingChats}
|
||||
sidebarWidth={sidebarWidth}
|
||||
isResizing={isResizing}
|
||||
/>
|
||||
)}
|
||||
<div className="relative hidden md:flex shrink-0 z-20 -mr-2 border-r bg-panel">
|
||||
<Sidebar
|
||||
searchSpace={searchSpace}
|
||||
isCollapsed={isCollapsed}
|
||||
onToggleCollapse={toggleCollapsed}
|
||||
navItems={navItems}
|
||||
onNavItemClick={onNavItemClick}
|
||||
chats={chats}
|
||||
sharedChats={sharedChats}
|
||||
activeChatId={activeChatId}
|
||||
onNewChat={onNewChat}
|
||||
onChatSelect={onChatSelect}
|
||||
onChatRename={onChatRename}
|
||||
onChatDelete={onChatDelete}
|
||||
onChatArchive={onChatArchive}
|
||||
onViewAllSharedChats={onViewAllSharedChats}
|
||||
onViewAllPrivateChats={onViewAllPrivateChats}
|
||||
isSharedChatsPanelOpen={activeSlideoutPanel === "shared"}
|
||||
isPrivateChatsPanelOpen={activeSlideoutPanel === "private"}
|
||||
user={user}
|
||||
onSettings={onSettings}
|
||||
onManageMembers={onManageMembers}
|
||||
onUserSettings={onUserSettings}
|
||||
onAnnouncements={onAnnouncements}
|
||||
announcementUnreadCount={announcementUnreadCount}
|
||||
onLogout={onLogout}
|
||||
pageUsage={pageUsage}
|
||||
theme={theme}
|
||||
setTheme={setTheme}
|
||||
renderUserProfile={false}
|
||||
className="flex shrink-0"
|
||||
isLoadingChats={isLoadingChats}
|
||||
sidebarWidth={sidebarWidth}
|
||||
isResizing={isResizing}
|
||||
/>
|
||||
|
||||
{/* Drag hit-area straddling the right border — wider for a forgiving grab,
|
||||
z-50 + pointer-events-auto to beat any neighboring stacking context. */}
|
||||
{!isCollapsed && (
|
||||
<button
|
||||
type="button"
|
||||
<hr
|
||||
aria-orientation="vertical"
|
||||
aria-label="Resize sidebar"
|
||||
onMouseDown={onResizeMouseDown}
|
||||
aria-valuemin={SIDEBAR_MIN_WIDTH}
|
||||
aria-valuemax={SIDEBAR_MAX_WIDTH}
|
||||
aria-valuenow={sidebarWidth}
|
||||
tabIndex={0}
|
||||
onPointerDown={onResizePointerDown}
|
||||
style={{ touchAction: "none" }}
|
||||
className={cn(
|
||||
"absolute top-0 right-0 h-full w-4 translate-x-1/2 cursor-col-resize z-50 pointer-events-auto select-none bg-transparent border-0 p-0 focus:outline-none",
|
||||
"absolute top-0 right-0 h-full w-4 translate-x-1/2 z-50 select-none cursor-col-resize",
|
||||
"after:content-[''] after:absolute after:inset-y-0 after:left-1/2 after:w-px after:-translate-x-1/2 after:bg-transparent hover:after:bg-border/80 after:transition-colors",
|
||||
isResizing && "after:bg-border"
|
||||
)}
|
||||
|
|
@ -518,11 +511,6 @@ export function LayoutShell({
|
|||
isChatPage={isChatPage}
|
||||
onTabSwitch={onTabSwitch}
|
||||
onNewChat={onNewChat}
|
||||
leftActions={
|
||||
isCollapsed ? (
|
||||
<SidebarCollapseButton isCollapsed={isCollapsed} onToggle={toggleCollapsed} />
|
||||
) : undefined
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</MainContentPanel>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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% */}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue