Merge pull request #801 from elammertsma/dev

[FEAT] Added new A/B test, made sidebar resizable and made all left sidebars use the same component

surfsense_web/components/layout/hooks/SidebarContext.tsx

@@ -6,6 +6,7 @@ interface SidebarContextValue {
 	isCollapsed: boolean;
 	setIsCollapsed: (collapsed: boolean) => void;
 	toggleCollapsed: () => void;
+	sidebarWidth: number;
 }
 
 const SidebarContext = createContext<SidebarContextValue | null>(null);

surfsense_web/components/layout/hooks/useSidebarResize.ts

@@ -0,0 +1,101 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+const SIDEBAR_WIDTH_COOKIE_NAME = "sidebar_width";
+const SIDEBAR_WIDTH_COOKIE_MAX_AGE = 60 * 60 * 24 * 365; // 1 year
+
+export const SIDEBAR_MIN_WIDTH = 240;
+export const SIDEBAR_MAX_WIDTH = 480;
+
+interface UseSidebarResizeReturn {
+	sidebarWidth: number;
+	handleMouseDown: (e: React.MouseEvent) => void;
+	isDragging: boolean;
+}
+
+export function useSidebarResize(defaultWidth = SIDEBAR_MIN_WIDTH): UseSidebarResizeReturn {
+	const [sidebarWidth, setSidebarWidth] = useState(defaultWidth);
+	const [isDragging, setIsDragging] = useState(false);
+
+	const startXRef = useRef(0);
+	const startWidthRef = useRef(defaultWidth);
+
+	// Initialize from cookie on mount
+	useEffect(() => {
+		try {
+			const match = document.cookie.match(/(?:^|; )sidebar_width=([^;]+)/);
+			if (match) {
+				const parsed = Number(match[1]);
+				if (!Number.isNaN(parsed) && parsed >= SIDEBAR_MIN_WIDTH && parsed <= SIDEBAR_MAX_WIDTH) {
+					setSidebarWidth(parsed);
+				}
+			}
+		} catch {
+			// Ignore cookie read errors
+		}
+	}, []);
+
+	// Persist width to cookie
+	const persistWidth = useCallback((width: number) => {
+		try {
+			document.cookie = `${SIDEBAR_WIDTH_COOKIE_NAME}=${width}; path=/; max-age=${SIDEBAR_WIDTH_COOKIE_MAX_AGE}`;
+		} catch {
+			// Ignore cookie write errors
+		}
+	}, []);
+
+	const handleMouseDown = useCallback(
+		(e: React.MouseEvent) => {
+			e.preventDefault();
+			startXRef.current = e.clientX;
+			startWidthRef.current = sidebarWidth;
+			setIsDragging(true);
+
+			document.body.style.cursor = "col-resize";
+			document.body.style.userSelect = "none";
+		},
+		[sidebarWidth]
+	);
+
+	useEffect(() => {
+		if (!isDragging) return;
+
+		const handleMouseMove = (e: MouseEvent) => {
+			const delta = e.clientX - startXRef.current;
+			const newWidth = Math.min(
+				SIDEBAR_MAX_WIDTH,
+				Math.max(SIDEBAR_MIN_WIDTH, startWidthRef.current + delta)
+			);
+			setSidebarWidth(newWidth);
+		};
+
+		const handleMouseUp = () => {
+			setIsDragging(false);
+			document.body.style.cursor = "";
+			document.body.style.userSelect = "";
+
+			// Persist the final width
+			setSidebarWidth((currentWidth) => {
+				persistWidth(currentWidth);
+				return currentWidth;
+			});
+		};
+
+		document.addEventListener("mousemove", handleMouseMove);
+		document.addEventListener("mouseup", handleMouseUp);
+
+		return () => {
+			document.removeEventListener("mousemove", handleMouseMove);
+			document.removeEventListener("mouseup", handleMouseUp);
+			document.body.style.cursor = "";
+			document.body.style.userSelect = "";
+		};
+	}, [isDragging, persistWidth]);
+
+	return {
+		sidebarWidth,
+		handleMouseDown,
+		isDragging,
+	};
+}

surfsense_web/components/layout/providers/LayoutDataProvider.tsx

@@ -33,9 +33,6 @@ import { cacheKeys } from "@/lib/query-client/cache-keys";
 import type { ChatItem, NavItem, SearchSpace } from "../types/layout.types";
 import { CreateSearchSpaceDialog } from "../ui/dialogs";
 import { LayoutShell } from "../ui/shell";
-import { AllPrivateChatsSidebar } from "../ui/sidebar/AllPrivateChatsSidebar";
-import { AllSharedChatsSidebar } from "../ui/sidebar/AllSharedChatsSidebar";
-
 interface LayoutDataProviderProps {
 	searchSpaceId: string;
 	children: React.ReactNode;
@@ -390,7 +387,13 @@ export function LayoutDataProvider({
 		(item: NavItem) => {
 			// Handle inbox specially - toggle sidebar instead of navigating
 			if (item.url === "#inbox") {
-				setIsInboxSidebarOpen((prev) => !prev);
+				setIsInboxSidebarOpen((prev) => {
+					if (!prev) {
+						setIsAllSharedChatsSidebarOpen(false);
+						setIsAllPrivateChatsSidebarOpen(false);
+					}
+					return !prev;
+				});
 				return;
 			}
 			router.push(item.url);
@@ -490,10 +493,14 @@ export function LayoutDataProvider({
 
 	const handleViewAllSharedChats = useCallback(() => {
 		setIsAllSharedChatsSidebarOpen(true);
+		setIsAllPrivateChatsSidebarOpen(false);
+		setIsInboxSidebarOpen(false);
 	}, []);
 
 	const handleViewAllPrivateChats = useCallback(() => {
 		setIsAllPrivateChatsSidebarOpen(true);
+		setIsAllSharedChatsSidebarOpen(false);
+		setIsInboxSidebarOpen(false);
 	}, []);
 
 	// Delete handlers
@@ -614,6 +621,16 @@ export function LayoutDataProvider({
 					isDocked: isInboxDocked,
 					onDockedChange: setIsInboxDocked,
 				}}
+				allSharedChatsPanel={{
+					open: isAllSharedChatsSidebarOpen,
+					onOpenChange: setIsAllSharedChatsSidebarOpen,
+					searchSpaceId,
+				}}
+				allPrivateChatsPanel={{
+					open: isAllPrivateChatsSidebarOpen,
+					onOpenChange: setIsAllPrivateChatsSidebarOpen,
+					searchSpaceId,
+				}}
 			>
 				{children}
 			</LayoutShell>
@@ -796,20 +813,6 @@ export function LayoutDataProvider({
 				</DialogContent>
 			</Dialog>
 
-			{/* All Shared Chats Sidebar */}
-			<AllSharedChatsSidebar
-				open={isAllSharedChatsSidebarOpen}
-				onOpenChange={setIsAllSharedChatsSidebarOpen}
-				searchSpaceId={searchSpaceId}
-			/>
-
-			{/* All Private Chats Sidebar */}
-			<AllPrivateChatsSidebar
-				open={isAllPrivateChatsSidebarOpen}
-				onOpenChange={setIsAllPrivateChatsSidebarOpen}
-				searchSpaceId={searchSpaceId}
-			/>
-
 			{/* Create Search Space Dialog */}
 			<CreateSearchSpaceDialog
 				open={isCreateSearchSpaceDialogOpen}

surfsense_web/components/layout/ui/shell/LayoutShell.tsx

@@ -6,10 +6,18 @@ 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 type { ChatItem, NavItem, PageUsage, SearchSpace, User } from "../../types/layout.types";
 import { Header } from "../header";
 import { IconRail } from "../icon-rail";
-import { InboxSidebar, MobileSidebar, MobileSidebarTrigger, Sidebar } from "../sidebar";
+import {
+	AllPrivateChatsSidebar,
+	AllSharedChatsSidebar,
+	InboxSidebar,
+	MobileSidebar,
+	MobileSidebarTrigger,
+	Sidebar,
+} from "../sidebar";
 
 // Tab-specific data source props
 interface TabDataSource {
@@ -75,6 +83,9 @@ interface LayoutShellProps {
 	// Inbox props
 	inbox?: InboxProps;
 	isLoadingChats?: boolean;
+	// All chats panel props
+	allSharedChatsPanel?: { open: boolean; onOpenChange: (open: boolean) => void; searchSpaceId: string };
+	allPrivateChatsPanel?: { open: boolean; onOpenChange: (open: boolean) => void; searchSpaceId: string };
 }
 
 export function LayoutShell({
@@ -112,15 +123,18 @@ export function LayoutShell({
 	className,
 	inbox,
 	isLoadingChats = false,
+	allSharedChatsPanel,
+	allPrivateChatsPanel,
 }: LayoutShellProps) {
 	const isMobile = useIsMobile();
 	const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 	const { isCollapsed, setIsCollapsed, toggleCollapsed } = useSidebarState(defaultCollapsed);
+	const { sidebarWidth, handleMouseDown: onResizeMouseDown, isDragging: isResizing } = useSidebarResize();
 
 	// Memoize context value to prevent unnecessary re-renders
 	const sidebarContextValue = useMemo(
-		() => ({ isCollapsed, setIsCollapsed, toggleCollapsed }),
-		[isCollapsed, setIsCollapsed, toggleCollapsed]
+		() => ({ isCollapsed, setIsCollapsed, toggleCollapsed, sidebarWidth }),
+		[isCollapsed, setIsCollapsed, toggleCollapsed, sidebarWidth]
 	);
 
 	// Mobile layout
@@ -236,6 +250,9 @@ export function LayoutShell({
 							setTheme={setTheme}
 							className="hidden md:flex border-r shrink-0"
 							isLoadingChats={isLoadingChats}
+							sidebarWidth={sidebarWidth}
+							onResizeMouseDown={onResizeMouseDown}
+							isResizing={isResizing}
 						/>
 
 						{/* Docked Inbox Sidebar - renders as flex sibling between sidebar and content */}
@@ -275,6 +292,24 @@ export function LayoutShell({
 								onDockedChange={inbox.onDockedChange}
 							/>
 						)}
+
+						{/* All Shared Chats - slide-out panel */}
+						{allSharedChatsPanel && (
+							<AllSharedChatsSidebar
+								open={allSharedChatsPanel.open}
+								onOpenChange={allSharedChatsPanel.onOpenChange}
+								searchSpaceId={allSharedChatsPanel.searchSpaceId}
+							/>
+						)}
+
+						{/* All Private Chats - slide-out panel */}
+						{allPrivateChatsPanel && (
+							<AllPrivateChatsSidebar
+								open={allPrivateChatsPanel.open}
+								onOpenChange={allPrivateChatsPanel.onOpenChange}
+								searchSpaceId={allPrivateChatsPanel.searchSpaceId}
+							/>
+						)}
 					</div>
 				</div>
 			</TooltipProvider>

surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx

@@ -12,11 +12,9 @@ import {
 	User,
 	X,
 } from "lucide-react";
-import { AnimatePresence, motion } from "motion/react";
 import { useParams, useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { createPortal } from "react-dom";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import {
@@ -40,6 +38,7 @@ import {
 	updateThread,
 } from "@/lib/chat/thread-persistence";
 import { cn } from "@/lib/utils";
+import { SidebarSlideOutPanel } from "./SidebarSlideOutPanel";
 
 interface AllPrivateChatsSidebarProps {
 	open: boolean;
@@ -69,16 +68,11 @@ export function AllPrivateChatsSidebar({
 	const [archivingThreadId, setArchivingThreadId] = useState<number | null>(null);
 	const [searchQuery, setSearchQuery] = useState("");
 	const [showArchived, setShowArchived] = useState(false);
-	const [mounted, setMounted] = useState(false);
 	const [openDropdownId, setOpenDropdownId] = useState<number | null>(null);
 	const debouncedSearchQuery = useDebouncedValue(searchQuery, 300);
 
 	const isSearchMode = !!debouncedSearchQuery.trim();
 
-	useEffect(() => {
-		setMounted(true);
-	}, []);
-
 	useEffect(() => {
 		const handleEscape = (e: KeyboardEvent) => {
 			if (e.key === "Escape" && open) {
@@ -89,17 +83,6 @@ export function AllPrivateChatsSidebar({
 		return () => document.removeEventListener("keydown", handleEscape);
 	}, [open, onOpenChange]);
 
-	useEffect(() => {
-		if (open) {
-			document.body.style.overflow = "hidden";
-		} else {
-			document.body.style.overflow = "";
-		}
-		return () => {
-			document.body.style.overflow = "";
-		};
-	}, [open]);
-
 	const {
 		data: threadsData,
 		error: threadsError,
@@ -214,33 +197,13 @@ export function AllPrivateChatsSidebar({
 	const activeCount = activeChats.length;
 	const archivedCount = archivedChats.length;
 
-	if (!mounted) return null;
-
-	return createPortal(
-		<AnimatePresence>
-			{open && (
-				<>
-					<motion.div
-						initial={{ opacity: 0 }}
-						animate={{ opacity: 1 }}
-						exit={{ opacity: 0 }}
-						transition={{ duration: 0.2 }}
-						className="fixed inset-0 z-70 bg-black/50"
-						onClick={() => onOpenChange(false)}
-						aria-hidden="true"
-					/>
-
-					<motion.div
-						initial={{ x: "-100%" }}
-						animate={{ x: 0 }}
-						exit={{ x: "-100%" }}
-						transition={{ type: "tween", duration: 0.3, ease: "easeOut" }}
-						className="fixed inset-y-0 left-0 z-70 w-80 bg-background shadow-xl flex flex-col pointer-events-auto isolate"
-						role="dialog"
-						aria-modal="true"
-						aria-label={t("chats") || "Private Chats"}
-					>
-						<div className="shrink-0 p-4 pb-2 space-y-3">
+	return (
+		<SidebarSlideOutPanel
+			open={open}
+			onOpenChange={onOpenChange}
+			ariaLabel={t("chats") || "Private Chats"}
+		>
+			<div className="shrink-0 p-4 pb-2 space-y-3">
 							<div className="flex items-center gap-2">
 								<User className="h-5 w-5 text-primary" />
 								<h2 className="text-lg font-semibold">{t("chats") || "Private Chats"}</h2>
@@ -451,11 +414,7 @@ export function AllPrivateChatsSidebar({
 									)}
 								</div>
 							)}
-						</div>
-					</motion.div>
-				</>
-			)}
-		</AnimatePresence>,
-		document.body
+				</div>
+		</SidebarSlideOutPanel>
 	);
 }

surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx

@@ -12,11 +12,9 @@ import {
 	Users,
 	X,
 } from "lucide-react";
-import { AnimatePresence, motion } from "motion/react";
 import { useParams, useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { createPortal } from "react-dom";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import {
@@ -40,6 +38,7 @@ import {
 	updateThread,
 } from "@/lib/chat/thread-persistence";
 import { cn } from "@/lib/utils";
+import { SidebarSlideOutPanel } from "./SidebarSlideOutPanel";
 
 interface AllSharedChatsSidebarProps {
 	open: boolean;
@@ -69,16 +68,11 @@ export function AllSharedChatsSidebar({
 	const [archivingThreadId, setArchivingThreadId] = useState<number | null>(null);
 	const [searchQuery, setSearchQuery] = useState("");
 	const [showArchived, setShowArchived] = useState(false);
-	const [mounted, setMounted] = useState(false);
 	const [openDropdownId, setOpenDropdownId] = useState<number | null>(null);
 	const debouncedSearchQuery = useDebouncedValue(searchQuery, 300);
 
 	const isSearchMode = !!debouncedSearchQuery.trim();
 
-	useEffect(() => {
-		setMounted(true);
-	}, []);
-
 	useEffect(() => {
 		const handleEscape = (e: KeyboardEvent) => {
 			if (e.key === "Escape" && open) {
@@ -89,17 +83,6 @@ export function AllSharedChatsSidebar({
 		return () => document.removeEventListener("keydown", handleEscape);
 	}, [open, onOpenChange]);
 
-	useEffect(() => {
-		if (open) {
-			document.body.style.overflow = "hidden";
-		} else {
-			document.body.style.overflow = "";
-		}
-		return () => {
-			document.body.style.overflow = "";
-		};
-	}, [open]);
-
 	const {
 		data: threadsData,
 		error: threadsError,
@@ -214,33 +197,13 @@ export function AllSharedChatsSidebar({
 	const activeCount = activeChats.length;
 	const archivedCount = archivedChats.length;
 
-	if (!mounted) return null;
-
-	return createPortal(
-		<AnimatePresence>
-			{open && (
-				<>
-					<motion.div
-						initial={{ opacity: 0 }}
-						animate={{ opacity: 1 }}
-						exit={{ opacity: 0 }}
-						transition={{ duration: 0.2 }}
-						className="fixed inset-0 z-70 bg-black/50"
-						onClick={() => onOpenChange(false)}
-						aria-hidden="true"
-					/>
-
-					<motion.div
-						initial={{ x: "-100%" }}
-						animate={{ x: 0 }}
-						exit={{ x: "-100%" }}
-						transition={{ type: "tween", duration: 0.3, ease: "easeOut" }}
-						className="fixed inset-y-0 left-0 z-70 w-80 bg-background shadow-xl flex flex-col pointer-events-auto isolate"
-						role="dialog"
-						aria-modal="true"
-						aria-label={t("shared_chats") || "Shared Chats"}
-					>
-						<div className="shrink-0 p-4 pb-2 space-y-3">
+	return (
+		<SidebarSlideOutPanel
+			open={open}
+			onOpenChange={onOpenChange}
+			ariaLabel={t("shared_chats") || "Shared Chats"}
+		>
+			<div className="shrink-0 p-4 pb-2 space-y-3">
 							<div className="flex items-center gap-2">
 								<Users className="h-5 w-5 text-primary" />
 								<h2 className="text-lg font-semibold">{t("shared_chats") || "Shared Chats"}</h2>
@@ -451,11 +414,7 @@ export function AllSharedChatsSidebar({
 									)}
 								</div>
 							)}
-						</div>
-					</motion.div>
-				</>
-			)}
-		</AnimatePresence>,
-		document.body
+				</div>
+		</SidebarSlideOutPanel>
 	);
 }

surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx

@@ -19,7 +19,6 @@ import {
 	Search,
 	X,
 } from "lucide-react";
-import { AnimatePresence, motion } from "motion/react";
 import { useParams, useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -59,11 +58,7 @@ import { useMediaQuery } from "@/hooks/use-media-query";
 import { notificationsApiService } from "@/lib/apis/notifications-api.service";
 import { cacheKeys } from "@/lib/query-client/cache-keys";
 import { cn } from "@/lib/utils";
-import { useSidebarContextSafe } from "../../hooks";
-
-// Sidebar width constants
-const SIDEBAR_COLLAPSED_WIDTH = 60;
-const SIDEBAR_EXPANDED_WIDTH = 240;
+import { SidebarSlideOutPanel } from "./SidebarSlideOutPanel";
 
 /**
  * Get initials from name or email for avatar fallback
@@ -561,13 +556,6 @@ export function InboxSidebar({
 		};
 	};
 
-	// Get sidebar collapsed state from context (provided by LayoutShell)
-	const sidebarContext = useSidebarContextSafe();
-	const isCollapsed = sidebarContext?.isCollapsed ?? false;
-
-	// Calculate the left position for the inbox panel (relative to sidebar)
-	const sidebarWidth = isCollapsed ? SIDEBAR_COLLAPSED_WIDTH : SIDEBAR_EXPANDED_WIDTH;
-
 	if (!mounted) return null;
 
 	// Shared content component for both docked and floating modes
@@ -1126,49 +1114,8 @@ export function InboxSidebar({
 
 	// FLOATING MODE: Render with animation and click-away layer
 	return (
-		<AnimatePresence>
-			{open && (
-				<>
-					{/* Click-away layer - only covers the content area, not the sidebar */}
-					<motion.div
-						initial={{ opacity: 0 }}
-						animate={{ opacity: 1 }}
-						exit={{ opacity: 0 }}
-						transition={{ duration: 0.15 }}
-						style={{
-							left: isMobile ? 0 : sidebarWidth,
-						}}
-						className="absolute inset-y-0 right-0"
-						onClick={() => onOpenChange(false)}
-						aria-hidden="true"
-					/>
-
-					{/* Clip container - positioned at sidebar edge with overflow hidden */}
-					<div
-						style={{
-							left: isMobile ? 0 : sidebarWidth,
-							width: isMobile ? "100%" : 360,
-						}}
-						className={cn("absolute z-10 overflow-hidden pointer-events-none", "inset-y-0")}
-					>
-						<motion.div
-							initial={{ x: "-100%" }}
-							animate={{ x: 0 }}
-							exit={{ x: "-100%" }}
-							transition={{ type: "tween", duration: 0.2, ease: [0.4, 0, 0.2, 1] }}
-							className={cn(
-								"h-full w-full bg-background flex flex-col pointer-events-auto",
-								"sm:border-r sm:shadow-xl"
-							)}
-							role="dialog"
-							aria-modal="true"
-							aria-label={t("inbox") || "Inbox"}
-						>
-							{inboxContent}
-						</motion.div>
-					</div>
-				</>
-			)}
-		</AnimatePresence>
+		<SidebarSlideOutPanel open={open} onOpenChange={onOpenChange} ariaLabel={t("inbox") || "Inbox"}>
+			{inboxContent}
+		</SidebarSlideOutPanel>
 	);
 }

surfsense_web/components/layout/ui/sidebar/Sidebar.tsx

@@ -7,6 +7,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import type { ChatItem, NavItem, PageUsage, SearchSpace, User } from "../../types/layout.types";
+import { SIDEBAR_MIN_WIDTH } from "../../hooks/useSidebarResize";
 import { ChatListItem } from "./ChatListItem";
 import { NavSection } from "./NavSection";
 import { PageUsageDisplay } from "./PageUsageDisplay";
@@ -51,6 +52,9 @@ interface SidebarProps {
 	className?: string;
 	isLoadingChats?: boolean;
 	disableTooltips?: boolean;
+	sidebarWidth?: number;
+	onResizeMouseDown?: (e: React.MouseEvent) => void;
+	isResizing?: boolean;
 }
 
 export function Sidebar({
@@ -80,17 +84,29 @@ export function Sidebar({
 	className,
 	isLoadingChats = false,
 	disableTooltips = false,
+	sidebarWidth = SIDEBAR_MIN_WIDTH,
+	onResizeMouseDown,
+	isResizing = false,
 }: SidebarProps) {
 	const t = useTranslations("sidebar");
 
 	return (
 		<div
 			className={cn(
-				"flex h-full flex-col bg-sidebar text-sidebar-foreground transition-all duration-200 overflow-hidden",
-				isCollapsed ? "w-[60px]" : "w-[240px]",
+				"relative flex h-full flex-col bg-sidebar text-sidebar-foreground overflow-hidden",
+				isCollapsed ? "w-[60px] transition-all duration-200" : "",
+				!isCollapsed && !isResizing ? "transition-all duration-200" : "",
 				className
 			)}
+			style={!isCollapsed ? { width: sidebarWidth } : undefined}
 		>
+			{/* Resize handle on right border */}
+			{!isCollapsed && onResizeMouseDown && (
+				<div
+					onMouseDown={onResizeMouseDown}
+					className="absolute right-0 top-0 h-full w-1 cursor-col-resize hover:bg-border active:bg-border z-10"
+				/>
+			)}
 			{/* Header - search space name or collapse button when collapsed */}
 			{isCollapsed ? (
 				<div className="flex h-14 shrink-0 items-center justify-center border-b">

surfsense_web/components/layout/ui/sidebar/SidebarSlideOutPanel.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { AnimatePresence, motion } from "motion/react";
+import { cn } from "@/lib/utils";
+import { useMediaQuery } from "@/hooks/use-media-query";
+import { useSidebarContextSafe } from "../../hooks";
+
+const SIDEBAR_COLLAPSED_WIDTH = 60;
+
+interface SidebarSlideOutPanelProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	ariaLabel: string;
+	width?: number;
+	children: React.ReactNode;
+}
+
+/**
+ * Reusable slide-out panel that appears from the right edge of the sidebar.
+ * Used by InboxSidebar (floating mode), AllSharedChatsSidebar, and AllPrivateChatsSidebar.
+ *
+ * Must be rendered inside a positioned container (the LayoutShell's relative flex container)
+ * and within the SidebarProvider context.
+ */
+export function SidebarSlideOutPanel({
+	open,
+	onOpenChange,
+	ariaLabel,
+	width = 360,
+	children,
+}: SidebarSlideOutPanelProps) {
+	const isMobile = !useMediaQuery("(min-width: 640px)");
+	const sidebarContext = useSidebarContextSafe();
+	const isCollapsed = sidebarContext?.isCollapsed ?? false;
+	const sidebarWidth = isCollapsed
+		? SIDEBAR_COLLAPSED_WIDTH
+		: (sidebarContext?.sidebarWidth ?? 240);
+
+	return (
+		<AnimatePresence>
+			{open && (
+				<>
+				{/* Click-away layer - covers the full container including the sidebar */}
+				<motion.div
+						initial={{ opacity: 0 }}
+						animate={{ opacity: 1 }}
+						exit={{ opacity: 0 }}
+						transition={{ duration: 0.15 }}
+						className="absolute inset-0 z-[5]"
+						onClick={() => onOpenChange(false)}
+						aria-hidden="true"
+					/>
+
+					{/* Clip container - positioned at sidebar edge with overflow hidden */}
+					<div
+						style={{
+							left: isMobile ? 0 : sidebarWidth,
+							width: isMobile ? "100%" : width,
+						}}
+						className={cn("absolute z-10 overflow-hidden pointer-events-none", "inset-y-0")}
+					>
+						<motion.div
+							initial={{ x: "-100%" }}
+							animate={{ x: 0 }}
+							exit={{ x: "-100%" }}
+							transition={{ type: "tween", duration: 0.2, ease: [0.4, 0, 0.2, 1] }}
+							className={cn(
+								"h-full w-full bg-background flex flex-col pointer-events-auto",
+								"sm:border-r sm:shadow-xl"
+							)}
+							role="dialog"
+							aria-modal="true"
+							aria-label={ariaLabel}
+						>
+							{children}
+						</motion.div>
+					</div>
+				</>
+			)}
+		</AnimatePresence>
+	);
+}