From 315f4229f9a49f9811a26c8822f433dc07ba613e Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sat, 2 May 2026 14:01:33 +0530
Subject: [PATCH] refactor(sidebar): remove sidebarWidth from context and
 update resize handling

---
 .../layout/hooks/SidebarContext.tsx           |  1 -
 .../layout/hooks/useSidebarResize.ts          |  1 +
 .../layout/ui/shell/LayoutShell.tsx           | 33 ++++++++-----------
 3 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/surfsense_web/components/layout/hooks/SidebarContext.tsx b/surfsense_web/components/layout/hooks/SidebarContext.tsx
index bfb5b5aeb..35f76929d 100644
--- a/surfsense_web/components/layout/hooks/SidebarContext.tsx
+++ b/surfsense_web/components/layout/hooks/SidebarContext.tsx
@@ -6,7 +6,6 @@ interface SidebarContextValue {
 	isCollapsed: boolean;
 	setIsCollapsed: (collapsed: boolean) => void;
 	toggleCollapsed: () => void;
-	sidebarWidth: number;
 }
 
 const SidebarContext = createContext<SidebarContextValue | null>(null);
diff --git a/surfsense_web/components/layout/hooks/useSidebarResize.ts b/surfsense_web/components/layout/hooks/useSidebarResize.ts
index 887c86dce..35ef7bf8b 100644
--- a/surfsense_web/components/layout/hooks/useSidebarResize.ts
+++ b/surfsense_web/components/layout/hooks/useSidebarResize.ts
@@ -39,6 +39,7 @@ export function useSidebarResize(defaultWidth = SIDEBAR_MIN_WIDTH): UseSidebarRe
 	// Persist width to cookie
 	const persistWidth = useCallback((width: number) => {
 		try {
+			// biome-ignore lint/suspicious/noDocumentCookie: SSR-readable preference, not security-sensitive
 			document.cookie = `${SIDEBAR_WIDTH_COOKIE_NAME}=${width}; path=/; max-age=${SIDEBAR_WIDTH_COOKIE_MAX_AGE}`;
 		} catch {
 			// Ignore cookie write errors
diff --git a/surfsense_web/components/layout/ui/shell/LayoutShell.tsx b/surfsense_web/components/layout/ui/shell/LayoutShell.tsx
index d57cd148a..701b89b39 100644
--- a/surfsense_web/components/layout/ui/shell/LayoutShell.tsx
+++ b/surfsense_web/components/layout/ui/shell/LayoutShell.tsx
@@ -217,8 +217,8 @@ export function LayoutShell({
 
 	// Memoize context value to prevent unnecessary re-renders
 	const sidebarContextValue = useMemo(
-		() => ({ isCollapsed, setIsCollapsed, toggleCollapsed, sidebarWidth }),
-		[isCollapsed, setIsCollapsed, toggleCollapsed, sidebarWidth]
+		() => ({ isCollapsed, setIsCollapsed, toggleCollapsed }),
+		[isCollapsed, setIsCollapsed, toggleCollapsed]
 	);
 
 	const closeSlideout = useCallback(
@@ -403,10 +403,10 @@ export function LayoutShell({
 						/>
 					</div>
 
-					{/* Sidebar + slide-out panels share one container; overflow visible so panels can overlay main content */}
+					{/* 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",
+							"relative hidden md:flex shrink-0 z-20 -mr-2 border-r border-border/60",
 							!isCollapsed && "bg-sidebar"
 						)}
 					>
@@ -445,6 +445,16 @@ export function LayoutShell({
 							/>
 						)}
 
+						{/* Invisible drag hit-area straddling the right border — provides resize affordance without any visible UI */}
+						{!isCollapsed && (
+							<button
+								type="button"
+								aria-label="Resize sidebar"
+								onMouseDown={onResizeMouseDown}
+								className="absolute top-0 right-0 h-full w-2 translate-x-1/2 cursor-col-resize z-30 bg-transparent border-0 p-0 focus:outline-none"
+							/>
+						)}
+
 						{/* Unified slide-out panel — shell stays open, content cross-fades */}
 						<SidebarSlideOutPanel
 							open={anySlideOutOpen}
@@ -515,21 +525,6 @@ export function LayoutShell({
 						</SidebarSlideOutPanel>
 					</div>
 
-					{/* Resize handle — negative margins eat the flex gap so spacing stays unchanged */}
-					{!isCollapsed && (
-						<div
-							role="slider"
-							aria-label="Resize sidebar"
-							aria-valuemin={0}
-							aria-valuemax={100}
-							aria-valuenow={50}
-							tabIndex={0}
-							onMouseDown={onResizeMouseDown}
-							className="hidden md:block h-full cursor-col-resize z-30 focus:outline-none"
-							style={{ width: 8, marginLeft: -8, marginRight: -8 }}
-						/>
-					)}
-
 					{/* Main content panel */}
 					<MainContentPanel
 						isChatPage={isChatPage}