"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( 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("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 ( {children} ); } export function useViewMode() { const context = useContext(ViewModeContext); if (!context) { throw new Error("useViewMode must be used within a ViewModeProvider"); } return context; }