supermemory/apps/web/lib/view-mode-context.tsx

"use client";

import {
	createContext,
	type ReactNode,
	useContext,
	useEffect,
	useState,
} from "react";
import { analytics } from "@/lib/analytics";

type ViewMode = "graph" | "list";

interface ViewModeContextType {
	viewMode: ViewMode;
	setViewMode: (mode: ViewMode) => void;
	isInitialized: boolean;
}

const ViewModeContext = createContext<ViewModeContextType | undefined>(
	undefined,
);

// Cookie utility functions
const setCookie = (name: string, value: string, days = 365) => {
	if (typeof document === "undefined") return;
	const expires = new Date();
	expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
	document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`;
};

const getCookie = (name: string): string | null => {
	if (typeof document === "undefined") return null;
	const nameEQ = `${name}=`;
	const ca = document.cookie.split(";");
	for (let i = 0; i < ca.length; i++) {
		let c = ca[i];
		if (!c) continue;
		while (c.charAt(0) === " ") c = c.substring(1, c.length);
		if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
	}
	return null;
};

const isMobileDevice = () => {
	if (typeof window === "undefined") return false;
	return window.innerWidth < 768;
};

export function ViewModeProvider({ children }: { children: ReactNode }) {
	// Start with a default that works for SSR
	const [viewMode, setViewModeState] = useState<ViewMode>("graph");
	const [isInitialized, setIsInitialized] = useState(false);

	// Load preferences on the client side
	useEffect(() => {
		if (!isInitialized) {
			// Check for saved preference first
			const savedMode = getCookie("memoryViewMode");
			if (savedMode === "list" || savedMode === "graph") {
				setViewModeState(savedMode);
			} else {
				// If no saved preference, default to list on mobile, graph on desktop
				setViewModeState(isMobileDevice() ? "list" : "graph");
			}
			setIsInitialized(true);
		}
	}, [isInitialized]);

	// Save to cookie whenever view mode changes
	const handleSetViewMode = (mode: ViewMode) => {
		analytics.viewModeChanged(mode);
		setViewModeState(mode);
		setCookie("memoryViewMode", mode);
	};

	return (
		<ViewModeContext.Provider
			value={{
				viewMode,
				setViewMode: handleSetViewMode,
				isInitialized,
			}}
		>
			{children}
		</ViewModeContext.Provider>
	);
}

export function useViewMode() {
	const context = useContext(ViewModeContext);
	if (!context) {
		throw new Error("useViewMode must be used within a ViewModeProvider");
	}
	return context;
}