refactor: consolidated secondary sidebars into a reusable slide-out panel

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,10 +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 constant for collapsed state
-const SIDEBAR_COLLAPSED_WIDTH = 60;
+import { SidebarSlideOutPanel } from "./SidebarSlideOutPanel";
 
 /**
  * Get initials from name or email for avatar fallback
@@ -560,14 +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)
-	// Use dynamic width from context (tracks resize) for expanded state
-	const sidebarWidth = isCollapsed ? SIDEBAR_COLLAPSED_WIDTH : (sidebarContext?.sidebarWidth ?? 240);
-
 	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>
 	);
 }