feat(sidebar): implement inbox sidebar with docked and floating modes, add sidebar context for state management

surfsense_web/components/assistant-ui/thread.tsx

@@ -110,7 +110,7 @@ const ThreadContent: FC<{ header?: React.ReactNode }> = ({ header }) => {
 					}}
 				/>
 
-				<ThreadPrimitive.ViewportFooter className="aui-thread-viewport-footer sticky bottom-0 z-20 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible rounded-t-3xl bg-background pb-4 md:pb-6">
+				<ThreadPrimitive.ViewportFooter className="aui-thread-viewport-footer sticky bottom-0 z-10 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible rounded-t-3xl bg-background pb-4 md:pb-6">
 					<ThreadScrollToBottom />
 					<AssistantIf condition={({ thread }) => !thread.isEmpty}>
 						<div className="fade-in slide-in-from-bottom-4 animate-in duration-500 ease-out fill-mode-both">

surfsense_web/components/layout/hooks/SidebarContext.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { createContext, useContext, type ReactNode } from "react";
+
+interface SidebarContextValue {
+	isCollapsed: boolean;
+	setIsCollapsed: (collapsed: boolean) => void;
+	toggleCollapsed: () => void;
+}
+
+const SidebarContext = createContext<SidebarContextValue | null>(null);
+
+interface SidebarProviderProps {
+	children: ReactNode;
+	value: SidebarContextValue;
+}
+
+export function SidebarProvider({ children, value }: SidebarProviderProps) {
+	return <SidebarContext.Provider value={value}>{children}</SidebarContext.Provider>;
+}
+
+export function useSidebarContext(): SidebarContextValue {
+	const context = useContext(SidebarContext);
+	if (!context) {
+		throw new Error("useSidebarContext must be used within a SidebarProvider");
+	}
+	return context;
+}
+
+/**
+ * Safe version that returns null if not within provider
+ * Useful for components that may be rendered outside the sidebar context
+ */
+export function useSidebarContextSafe(): SidebarContextValue | null {
+	return useContext(SidebarContext);
+}
+

surfsense_web/components/layout/hooks/index.ts

@@ -1 +1,2 @@
 export { useSidebarState } from "./useSidebarState";
+export { SidebarProvider, useSidebarContext, useSidebarContextSafe } from "./SidebarContext";

surfsense_web/components/layout/providers/LayoutDataProvider.tsx

@@ -32,7 +32,6 @@ import { CreateSearchSpaceDialog } from "../ui/dialogs";
 import { LayoutShell } from "../ui/shell";
 import { AllPrivateChatsSidebar } from "../ui/sidebar/AllPrivateChatsSidebar";
 import { AllSharedChatsSidebar } from "../ui/sidebar/AllSharedChatsSidebar";
-import { InboxSidebar } from "../ui/sidebar/InboxSidebar";
 
 interface LayoutDataProviderProps {
 	searchSpaceId: string;
@@ -100,6 +99,7 @@ export function LayoutDataProvider({
 
 	// Inbox sidebar state
 	const [isInboxSidebarOpen, setIsInboxSidebarOpen] = useState(false);
+	const [isInboxDocked, setIsInboxDocked] = useState(false);
 
 	// Search space dialog state
 	const [isCreateSearchSpaceDialogOpen, setIsCreateSearchSpaceDialogOpen] = useState(false);
@@ -298,9 +298,9 @@ export function LayoutDataProvider({
 
 	const handleNavItemClick = useCallback(
 		(item: NavItem) => {
-			// Handle inbox specially - open sidebar instead of navigating
+			// Handle inbox specially - toggle sidebar instead of navigating
 			if (item.url === "#inbox") {
-				setIsInboxSidebarOpen(true);
+				setIsInboxSidebarOpen((prev) => !prev);
 				return;
 			}
 			router.push(item.url);
@@ -462,6 +462,20 @@ export function LayoutDataProvider({
 				theme={theme}
 				setTheme={setTheme}
 				isChatPage={isChatPage}
+				inbox={{
+					isOpen: isInboxSidebarOpen,
+					onOpenChange: setIsInboxSidebarOpen,
+					items: inboxItems,
+					unreadCount,
+					loading: inboxLoading,
+					loadingMore: inboxLoadingMore,
+					hasMore: inboxHasMore,
+					loadMore: inboxLoadMore,
+					markAsRead,
+					markAllAsRead,
+					isDocked: isInboxDocked,
+					onDockedChange: setIsInboxDocked,
+				}}
 			>
 				{children}
 			</LayoutShell>
@@ -607,20 +621,6 @@ export function LayoutDataProvider({
 				searchSpaceId={searchSpaceId}
 			/>
 
-			{/* Inbox Sidebar */}
-			<InboxSidebar
-				open={isInboxSidebarOpen}
-				onOpenChange={setIsInboxSidebarOpen}
-				inboxItems={inboxItems}
-				unreadCount={unreadCount}
-				loading={inboxLoading}
-				loadingMore={inboxLoadingMore}
-				hasMore={inboxHasMore}
-				loadMore={inboxLoadMore}
-				markAsRead={markAsRead}
-				markAllAsRead={markAllAsRead}
-			/>
-
 			{/* Create Search Space Dialog */}
 			<CreateSearchSpaceDialog
 				open={isCreateSearchSpaceDialogOpen}

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

@@ -1,14 +1,33 @@
 "use client";
 
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { TooltipProvider } from "@/components/ui/tooltip";
+import type { InboxItem } from "@/hooks/use-inbox";
 import { useIsMobile } from "@/hooks/use-mobile";
 import { cn } from "@/lib/utils";
-import { useSidebarState } from "../../hooks";
+import { SidebarProvider, useSidebarState } from "../../hooks";
 import type { ChatItem, NavItem, PageUsage, SearchSpace, User } from "../../types/layout.types";
 import { Header } from "../header";
 import { IconRail } from "../icon-rail";
-import { MobileSidebar, MobileSidebarTrigger, Sidebar } from "../sidebar";
+import { InboxSidebar, MobileSidebar, MobileSidebarTrigger, Sidebar } from "../sidebar";
+
+// Inbox-related props
+interface InboxProps {
+	isOpen: boolean;
+	onOpenChange: (open: boolean) => void;
+	items: InboxItem[];
+	unreadCount: number;
+	loading: boolean;
+	loadingMore?: boolean;
+	hasMore?: boolean;
+	loadMore?: () => void;
+	markAsRead: (id: number) => Promise<boolean>;
+	markAllAsRead: () => Promise<boolean>;
+	/** Whether the inbox is docked (permanent) */
+	isDocked?: boolean;
+	/** Callback to change docked state */
+	onDockedChange?: (docked: boolean) => void;
+}
 
 interface LayoutShellProps {
 	searchSpaces: SearchSpace[];
@@ -42,6 +61,8 @@ interface LayoutShellProps {
 	isChatPage?: boolean;
 	children: React.ReactNode;
 	className?: string;
+	// Inbox props
+	inbox?: InboxProps;
 }
 
 export function LayoutShell({
@@ -76,111 +97,176 @@ export function LayoutShell({
 	isChatPage = false,
 	children,
 	className,
+	inbox,
 }: LayoutShellProps) {
 	const isMobile = useIsMobile();
 	const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-	const { isCollapsed, toggleCollapsed } = useSidebarState(defaultCollapsed);
+	const { isCollapsed, setIsCollapsed, toggleCollapsed } = useSidebarState(defaultCollapsed);
+
+	// Memoize context value to prevent unnecessary re-renders
+	const sidebarContextValue = useMemo(
+		() => ({ isCollapsed, setIsCollapsed, toggleCollapsed }),
+		[isCollapsed, setIsCollapsed, toggleCollapsed]
+	);
 
 	// Mobile layout
 	if (isMobile) {
 		return (
-			<TooltipProvider delayDuration={0}>
-				<div className={cn("flex h-screen w-full flex-col bg-background", className)}>
-					<Header
-						breadcrumb={breadcrumb}
-						mobileMenuTrigger={<MobileSidebarTrigger onClick={() => setMobileMenuOpen(true)} />}
-					/>
+			<SidebarProvider value={sidebarContextValue}>
+				<TooltipProvider delayDuration={0}>
+					<div className={cn("flex h-screen w-full flex-col bg-background", className)}>
+						<Header
+							breadcrumb={breadcrumb}
+							mobileMenuTrigger={<MobileSidebarTrigger onClick={() => setMobileMenuOpen(true)} />}
+						/>
 
-					<MobileSidebar
-						isOpen={mobileMenuOpen}
-						onOpenChange={setMobileMenuOpen}
-						searchSpaces={searchSpaces}
-						activeSearchSpaceId={activeSearchSpaceId}
-						onSearchSpaceSelect={onSearchSpaceSelect}
-						onSearchSpaceDelete={onSearchSpaceDelete}
-						onSearchSpaceSettings={onSearchSpaceSettings}
-						onAddSearchSpace={onAddSearchSpace}
-						searchSpace={searchSpace}
-						navItems={navItems}
-						onNavItemClick={onNavItemClick}
-						chats={chats}
-						sharedChats={sharedChats}
-						activeChatId={activeChatId}
-						onNewChat={onNewChat}
-						onChatSelect={onChatSelect}
-						onChatDelete={onChatDelete}
-						onChatArchive={onChatArchive}
-						onViewAllSharedChats={onViewAllSharedChats}
-						onViewAllPrivateChats={onViewAllPrivateChats}
-						user={user}
-						onSettings={onSettings}
-						onManageMembers={onManageMembers}
-						onUserSettings={onUserSettings}
-						onLogout={onLogout}
-						pageUsage={pageUsage}
-						theme={theme}
-						setTheme={setTheme}
-					/>
+						<MobileSidebar
+							isOpen={mobileMenuOpen}
+							onOpenChange={setMobileMenuOpen}
+							searchSpaces={searchSpaces}
+							activeSearchSpaceId={activeSearchSpaceId}
+							onSearchSpaceSelect={onSearchSpaceSelect}
+							onSearchSpaceDelete={onSearchSpaceDelete}
+							onSearchSpaceSettings={onSearchSpaceSettings}
+							onAddSearchSpace={onAddSearchSpace}
+							searchSpace={searchSpace}
+							navItems={navItems}
+							onNavItemClick={onNavItemClick}
+							chats={chats}
+							sharedChats={sharedChats}
+							activeChatId={activeChatId}
+							onNewChat={onNewChat}
+							onChatSelect={onChatSelect}
+							onChatDelete={onChatDelete}
+							onChatArchive={onChatArchive}
+							onViewAllSharedChats={onViewAllSharedChats}
+							onViewAllPrivateChats={onViewAllPrivateChats}
+							user={user}
+							onSettings={onSettings}
+							onManageMembers={onManageMembers}
+							onUserSettings={onUserSettings}
+							onLogout={onLogout}
+							pageUsage={pageUsage}
+							theme={theme}
+							setTheme={setTheme}
+						/>
 
-					<main className={cn("flex-1", isChatPage ? "overflow-hidden" : "overflow-auto")}>
-						{children}
-					</main>
-				</div>
-			</TooltipProvider>
+						<main className={cn("flex-1", isChatPage ? "overflow-hidden" : "overflow-auto")}>
+							{children}
+						</main>
+
+						{/* Mobile Inbox Sidebar */}
+						{inbox && (
+							<InboxSidebar
+								open={inbox.isOpen}
+								onOpenChange={inbox.onOpenChange}
+								inboxItems={inbox.items}
+								unreadCount={inbox.unreadCount}
+								loading={inbox.loading}
+								loadingMore={inbox.loadingMore}
+								hasMore={inbox.hasMore}
+								loadMore={inbox.loadMore}
+								markAsRead={inbox.markAsRead}
+								markAllAsRead={inbox.markAllAsRead}
+								onCloseMobileSidebar={() => setMobileMenuOpen(false)}
+							/>
+						)}
+					</div>
+				</TooltipProvider>
+			</SidebarProvider>
 		);
 	}
 
 	// Desktop layout
 	return (
-		<TooltipProvider delayDuration={0}>
-			<div className={cn("flex h-screen w-full gap-2 p-2 overflow-hidden bg-muted/40", className)}>
-				<div className="hidden md:flex overflow-hidden">
-					<IconRail
-						searchSpaces={searchSpaces}
-						activeSearchSpaceId={activeSearchSpaceId}
-						onSearchSpaceSelect={onSearchSpaceSelect}
-						onSearchSpaceDelete={onSearchSpaceDelete}
-						onSearchSpaceSettings={onSearchSpaceSettings}
-						onAddSearchSpace={onAddSearchSpace}
-					/>
+		<SidebarProvider value={sidebarContextValue}>
+			<TooltipProvider delayDuration={0}>
+				<div className={cn("flex h-screen w-full gap-2 p-2 overflow-hidden bg-muted/40", className)}>
+					<div className="hidden md:flex overflow-hidden">
+						<IconRail
+							searchSpaces={searchSpaces}
+							activeSearchSpaceId={activeSearchSpaceId}
+							onSearchSpaceSelect={onSearchSpaceSelect}
+							onSearchSpaceDelete={onSearchSpaceDelete}
+							onSearchSpaceSettings={onSearchSpaceSettings}
+							onAddSearchSpace={onAddSearchSpace}
+						/>
+					</div>
+
+					{/* Main container with sidebar and content - relative for inbox positioning */}
+					<div className="relative flex flex-1 rounded-xl border bg-background overflow-hidden">
+						<Sidebar
+							searchSpace={searchSpace}
+							isCollapsed={isCollapsed}
+							onToggleCollapse={toggleCollapsed}
+							navItems={navItems}
+							onNavItemClick={onNavItemClick}
+							chats={chats}
+							sharedChats={sharedChats}
+							activeChatId={activeChatId}
+							onNewChat={onNewChat}
+							onChatSelect={onChatSelect}
+							onChatDelete={onChatDelete}
+							onChatArchive={onChatArchive}
+							onViewAllSharedChats={onViewAllSharedChats}
+							onViewAllPrivateChats={onViewAllPrivateChats}
+							user={user}
+							onSettings={onSettings}
+							onManageMembers={onManageMembers}
+							onUserSettings={onUserSettings}
+							onLogout={onLogout}
+							pageUsage={pageUsage}
+							theme={theme}
+							setTheme={setTheme}
+							className="hidden md:flex border-r shrink-0"
+						/>
+
+						{/* Docked Inbox Sidebar - renders as flex sibling between sidebar and content */}
+						{inbox?.isDocked && (
+							<InboxSidebar
+								open={inbox.isOpen}
+								onOpenChange={inbox.onOpenChange}
+								inboxItems={inbox.items}
+								unreadCount={inbox.unreadCount}
+								loading={inbox.loading}
+								loadingMore={inbox.loadingMore}
+								hasMore={inbox.hasMore}
+								loadMore={inbox.loadMore}
+								markAsRead={inbox.markAsRead}
+								markAllAsRead={inbox.markAllAsRead}
+								isDocked={inbox.isDocked}
+								onDockedChange={inbox.onDockedChange}
+							/>
+						)}
+
+						<main className="flex-1 flex flex-col min-w-0">
+							<Header breadcrumb={breadcrumb} />
+
+							<div className={cn("flex-1", isChatPage ? "overflow-hidden" : "overflow-auto")}>
+								{children}
+							</div>
+						</main>
+
+						{/* Floating Inbox Sidebar - positioned absolutely on top of content */}
+						{inbox && !inbox.isDocked && (
+							<InboxSidebar
+								open={inbox.isOpen}
+								onOpenChange={inbox.onOpenChange}
+								inboxItems={inbox.items}
+								unreadCount={inbox.unreadCount}
+								loading={inbox.loading}
+								loadingMore={inbox.loadingMore}
+								hasMore={inbox.hasMore}
+								loadMore={inbox.loadMore}
+								markAsRead={inbox.markAsRead}
+								markAllAsRead={inbox.markAllAsRead}
+								isDocked={false}
+								onDockedChange={inbox.onDockedChange}
+							/>
+						)}
+					</div>
 				</div>
-
-				<div className="flex flex-1 rounded-xl border bg-background overflow-hidden">
-					<Sidebar
-						searchSpace={searchSpace}
-						isCollapsed={isCollapsed}
-						onToggleCollapse={toggleCollapsed}
-						navItems={navItems}
-						onNavItemClick={onNavItemClick}
-						chats={chats}
-						sharedChats={sharedChats}
-						activeChatId={activeChatId}
-						onNewChat={onNewChat}
-						onChatSelect={onChatSelect}
-						onChatDelete={onChatDelete}
-						onChatArchive={onChatArchive}
-						onViewAllSharedChats={onViewAllSharedChats}
-						onViewAllPrivateChats={onViewAllPrivateChats}
-						user={user}
-						onSettings={onSettings}
-						onManageMembers={onManageMembers}
-						onUserSettings={onUserSettings}
-						onLogout={onLogout}
-						pageUsage={pageUsage}
-						theme={theme}
-						setTheme={setTheme}
-						className="hidden md:flex border-r shrink-0"
-					/>
-
-					<main className="flex-1 flex flex-col min-w-0">
-						<Header breadcrumb={breadcrumb} />
-
-						<div className={cn("flex-1", isChatPage ? "overflow-hidden" : "overflow-auto")}>
-							{children}
-						</div>
-					</main>
-				</div>
-			</div>
-		</TooltipProvider>
+			</TooltipProvider>
+		</SidebarProvider>
 	);
 }

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

@@ -11,6 +11,8 @@ import {
 	Inbox,
 	LayoutGrid,
 	ListFilter,
+	PanelLeftClose,
+	PanelLeft,
 	Search,
 	X,
 } from "lucide-react";
@@ -18,7 +20,6 @@ import { AnimatePresence, motion } from "motion/react";
 import { useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { createPortal } from "react-dom";
 import { convertRenderedToDisplay } from "@/components/chat-comments/comment-item/comment-item";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
@@ -50,6 +51,11 @@ import {
 import type { InboxItem } from "@/hooks/use-inbox";
 import { useMediaQuery } from "@/hooks/use-media-query";
 import { cn } from "@/lib/utils";
+import { useSidebarContextSafe } from "../../hooks";
+
+// Sidebar width constants
+const SIDEBAR_COLLAPSED_WIDTH = 60;
+const SIDEBAR_EXPANDED_WIDTH = 240;
 
 /**
  * Get initials from name or email for avatar fallback
@@ -109,6 +115,7 @@ function getConnectorTypeDisplayName(connectorType: string): string {
 		YOUTUBE_CONNECTOR: "YouTube",
 		CIRCLEBACK_CONNECTOR: "Circleback",
 		MCP_CONNECTOR: "MCP",
+		OBSIDIAN_CONNECTOR: "Obsidian",
 		TAVILY_API: "Tavily",
 		SEARXNG_API: "SearXNG",
 		LINKUP_API: "Linkup",
@@ -139,6 +146,10 @@ interface InboxSidebarProps {
 	markAsRead: (id: number) => Promise<boolean>;
 	markAllAsRead: () => Promise<boolean>;
 	onCloseMobileSidebar?: () => void;
+	/** Whether the inbox is docked (permanent) or floating */
+	isDocked?: boolean;
+	/** Callback to toggle docked state */
+	onDockedChange?: (docked: boolean) => void;
 }
 
 export function InboxSidebar({
@@ -153,6 +164,8 @@ export function InboxSidebar({
 	markAsRead,
 	markAllAsRead,
 	onCloseMobileSidebar,
+	isDocked = false,
+	onDockedChange,
 }: InboxSidebarProps) {
 	const t = useTranslations("sidebar");
 	const router = useRouter();
@@ -186,8 +199,9 @@ export function InboxSidebar({
 		return () => document.removeEventListener("keydown", handleEscape);
 	}, [open, onOpenChange]);
 
+	// Only lock body scroll on mobile (Notion-style keeps desktop content scrollable)
 	useEffect(() => {
-		if (open) {
+		if (open && isMobile) {
 			document.body.style.overflow = "hidden";
 		} else {
 			document.body.style.overflow = "";
@@ -195,7 +209,7 @@ export function InboxSidebar({
 		return () => {
 			document.body.style.overflow = "";
 		};
-	}, [open]);
+	}, [open, isMobile]);
 
 	// Reset connector filter when switching away from status tab
 	useEffect(() => {
@@ -440,36 +454,21 @@ 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;
 
-	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-90 bg-background shadow-xl flex flex-col pointer-events-auto isolate"
-						role="dialog"
-						aria-modal="true"
-						aria-label={t("inbox") || "Inbox"}
-					>
-						<div className="shrink-0 p-4 pb-2 space-y-3">
+	// Shared content component for both docked and floating modes
+	const inboxContent = (
+		<>
+			<div className="shrink-0 p-4 pb-2 space-y-3">
 							<div className="flex items-center justify-between">
 								<div className="flex items-center gap-2">
-									<Inbox className="h-5 w-5 text-primary" />
 									<h2 className="text-lg font-semibold">{t("inbox") || "Inbox"}</h2>
 								</div>
 								<div className="flex items-center gap-1">
@@ -703,6 +702,40 @@ export function InboxSidebar({
 											{t("mark_all_read") || "Mark all as read"}
 										</TooltipContent>
 									</Tooltip>
+									{/* Dock/Undock button - desktop only */}
+									{!isMobile && onDockedChange && (
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<Button
+													variant="ghost"
+													size="icon"
+													className="h-8 w-8 rounded-full"
+													onClick={() => {
+														if (isDocked) {
+															// Undocking: close the inbox completely
+															onDockedChange(false);
+															onOpenChange(false);
+														} else {
+															// Docking: keep open and dock
+															onDockedChange(true);
+														}
+													}}
+												>
+													{isDocked ? (
+														<PanelLeftClose className="h-4 w-4 text-muted-foreground" />
+													) : (
+														<PanelLeft className="h-4 w-4 text-muted-foreground" />
+													)}
+													<span className="sr-only">
+														{isDocked ? "Close inbox" : "Dock inbox"}
+													</span>
+												</Button>
+											</TooltipTrigger>
+											<TooltipContent className="z-80">
+												{isDocked ? "Close inbox" : "Dock inbox"}
+											</TooltipContent>
+										</Tooltip>
+									)}
 								</div>
 							</div>
 
@@ -858,11 +891,70 @@ export function InboxSidebar({
 									</p>
 								</div>
 							)}
-						</div>
-					</motion.div>
+			</div>
+		</>
+	);
+
+	// DOCKED MODE: Render as a static flex child (no animation, no click-away)
+	if (isDocked && open && !isMobile) {
+		return (
+			<aside
+				className="h-full w-[360px] shrink-0 bg-background flex flex-col border-r"
+				aria-label={t("inbox") || "Inbox"}
+			>
+				{inboxContent}
+			</aside>
+		);
+	}
+
+	// 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>,
-		document.body
+		</AnimatePresence>
 	);
 }

surfsense_web/messages/zh.json

@@ -686,7 +686,7 @@
 		"system": "系统",
 		"logout": "退出登录",
 		"inbox": "收件箱",
-		"search_inbox": "搜索收件箱...",
+		"search_inbox": "搜索收件箱",
 		"mark_all_read": "全部标记为已读",
 		"mark_as_read": "标记为已读",
 		"mentions": "提及",