apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-21 18:55:16 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(sidebar): remove sidebarWidth from context and update resize handling

Browse source
This commit is contained in:
Anish Sarkar 2026-05-02 14:01:33 +05:30
parent 9b1b5a504e
commit 315f4229f9
3 changed files with 15 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

1
surfsense_web/components/layout/hooks/SidebarContext.tsx
View file

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

1
surfsense_web/components/layout/hooks/useSidebarResize.ts
View file

@ -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

33
surfsense_web/components/layout/ui/shell/LayoutShell.tsx
View file

@ -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}