apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-07-20 23:21:06 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(layout): implement cookie-based state management for playground sidebar visibility

Browse source
This commit is contained in:
Anish Sarkar 2026-07-14 03:39:02 +05:30
parent 2c6724206e
commit 79c7d1ecdf
4 changed files with 38 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

8
surfsense_web/components/layout/providers/LayoutDataProvider.tsx
View file

@ -56,10 +56,15 @@ import { LayoutShell } from "../ui/shell";
interface LayoutDataProviderProps {
workspaceId: string;
initialPlaygroundSidebarCollapsed: boolean;
children: React.ReactNode;
}
export function LayoutDataProvider({ workspaceId, children }: LayoutDataProviderProps) {
export function LayoutDataProvider({
workspaceId,
initialPlaygroundSidebarCollapsed,
children,
}: LayoutDataProviderProps) {
const t = useTranslations("dashboard");
const tCommon = useTranslations("common");
const tSidebar = useTranslations("sidebar");
@ -720,6 +725,7 @@ export function LayoutDataProvider({ workspaceId, children }: LayoutDataProvider
onTabSwitch={handleTabSwitch}
onTabPrefetch={handleTabPrefetch}
playgroundSidebar={<PlaygroundSidebar workspaceId={workspaceId} />}
initialPlaygroundSidebarCollapsed={initialPlaygroundSidebarCollapsed}
>
<Fragment key={chatResetKey}>{children}</Fragment>
</LayoutShell>

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

@ -2,7 +2,7 @@
import { useAtomValue } from "jotai";
import dynamic from "next/dynamic";
import { useEffect, useMemo, useState } from "react";
import { useMemo, useState } from "react";
import { activeTabAtom, type Tab } from "@/atoms/tabs/tabs.atom";
import { Logo } from "@/components/Logo";
import { Spinner } from "@/components/ui/spinner";
@ -41,7 +41,8 @@ const DocumentTabContent = dynamic(
}
);
const PLAYGROUND_SIDEBAR_COLLAPSED_STORAGE_KEY = "surfsense:layout:v1:playground-sidebar-collapsed";
const PLAYGROUND_SIDEBAR_COLLAPSED_COOKIE = "surfsense_playground_sidebar_collapsed";
const PLAYGROUND_SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 365;
function MacDesktopTitleBar({
isSidebarCollapsed,
@ -115,6 +116,7 @@ interface LayoutShellProps {
onTabSwitch?: (tab: Tab) => void;
onTabPrefetch?: (tab: Tab) => void;
playgroundSidebar?: React.ReactNode;
initialPlaygroundSidebarCollapsed?: boolean;
}
function MainContentPanel({
@ -216,12 +218,15 @@ export function LayoutShell({
onTabSwitch,
onTabPrefetch,
playgroundSidebar,
initialPlaygroundSidebarCollapsed = false,
}: LayoutShellProps) {
const isMobile = useIsMobile();
const electronAPI = useElectronAPI();
const isMacDesktop = electronAPI?.versions.platform === "darwin";
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const [isPlaygroundSidebarCollapsed, setIsPlaygroundSidebarCollapsed] = useState(false);
const [isPlaygroundSidebarCollapsed, setIsPlaygroundSidebarCollapsed] = useState(
initialPlaygroundSidebarCollapsed
);
const { isCollapsed, setIsCollapsed, toggleCollapsed } = useSidebarState(defaultCollapsed);
const {
sidebarWidth,
@ -234,23 +239,11 @@ export function LayoutShell({
() => ({ isCollapsed, setIsCollapsed, toggleCollapsed }),
[isCollapsed, setIsCollapsed, toggleCollapsed]
);
useEffect(() => {
try {
setIsPlaygroundSidebarCollapsed(
window.localStorage.getItem(PLAYGROUND_SIDEBAR_COLLAPSED_STORAGE_KEY) === "true"
);
} catch {}
}, []);
const handlePlaygroundSidebarToggle = () => {
setIsPlaygroundSidebarCollapsed((collapsed) => {
const nextCollapsed = !collapsed;
try {
window.localStorage.setItem(
PLAYGROUND_SIDEBAR_COLLAPSED_STORAGE_KEY,
String(nextCollapsed)
);
} catch {}
const secureAttribute = window.location.protocol === "https:" ? "; Secure" : "";
document.cookie = `${PLAYGROUND_SIDEBAR_COLLAPSED_COOKIE}=${nextCollapsed}; Path=/; Max-Age=${PLAYGROUND_SIDEBAR_COOKIE_MAX_AGE}; SameSite=Lax${secureAttribute}`;
return nextCollapsed;
});
};