From 799d6c5d4a59c65d3e2f902843dfc86910b8496f Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Sat, 19 Oct 2024 10:27:31 +0200
Subject: [PATCH] fix: color scheme manager should use cookie and not session
 value (#1329)

* fix: color scheme manager should use cookie and not session value

* fix: cookie saved for random path
---
 .../[locale]/_client-providers/mantine.tsx    | 46 +++++--------------
 1 file changed, 12 insertions(+), 34 deletions(-)

diff --git a/apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx b/apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx
index b5b4a5b34..867ecfd94 100644
--- a/apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx
+++ b/apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx
@@ -1,9 +1,8 @@
 "use client";
 
 import type { PropsWithChildren } from "react";
-import { useState } from "react";
 import type { MantineColorScheme, MantineColorSchemeManager } from "@mantine/core";
-import { createTheme, DirectionProvider, isMantineColorScheme, MantineProvider } from "@mantine/core";
+import { createTheme, DirectionProvider, MantineProvider } from "@mantine/core";
 import dayjs from "dayjs";
 
 import { clientApi } from "@homarr/api/client";
@@ -32,27 +31,23 @@ export const CustomMantineProvider = ({ children }: PropsWithChildren) => {
 function useColorSchemeManager(): MantineColorSchemeManager {
   const key = "homarr-color-scheme";
   const { data: session } = useSession();
-  const [sessionColorScheme, setSessionColorScheme] = useState<MantineColorScheme | undefined>(
-    session?.user.colorScheme,
-  );
+
+  const updateCookieValue = (value: Exclude<MantineColorScheme, "auto">) => {
+    setClientCookie(key, value, { expires: dayjs().add(1, "year").toDate(), path: "/" });
+  };
+
   const { mutate: mutateColorScheme } = clientApi.user.changeColorScheme.useMutation({
     onSuccess: (_, variables) => {
-      setSessionColorScheme(variables.colorScheme);
+      updateCookieValue(variables.colorScheme);
     },
   });
 
-  let handleStorageEvent: (event: StorageEvent) => void;
-
   return {
     get: (defaultValue) => {
       if (typeof window === "undefined") {
         return defaultValue;
       }
 
-      if (sessionColorScheme) {
-        return sessionColorScheme;
-      }
-
       try {
         const cookies = parseCookies(document.cookie);
         return (cookies[key] as MantineColorScheme | undefined) ?? defaultValue;
@@ -67,30 +62,13 @@ function useColorSchemeManager(): MantineColorSchemeManager {
         if (session) {
           mutateColorScheme({ colorScheme: value });
         }
-        setClientCookie(key, value, { expires: dayjs().add(1, "year").toDate() });
-        window.localStorage.setItem(key, value);
+        updateCookieValue(value);
       } catch (error) {
-        console.warn("[@mantine/core] Local storage color scheme manager was unable to save color scheme.", error);
+        console.warn("[@mantine/core] Color scheme manager was unable to save color scheme.", error);
       }
     },
-
-    subscribe: (onUpdate) => {
-      handleStorageEvent = (event) => {
-        if (session) return; // Ignore updates when session is available as we are using session color scheme
-        if (event.storageArea === window.localStorage && event.key === key && isMantineColorScheme(event.newValue)) {
-          onUpdate(event.newValue);
-        }
-      };
-
-      window.addEventListener("storage", handleStorageEvent);
-    },
-
-    unsubscribe: () => {
-      window.removeEventListener("storage", handleStorageEvent);
-    },
-
-    clear: () => {
-      window.localStorage.removeItem(key);
-    },
+    subscribe: () => undefined,
+    unsubscribe: () => undefined,
+    clear: () => undefined,
   };
 }