Replaced colormode context with a generic solution

client/src/App.tsx

@@ -13,7 +13,6 @@ import routerBindings, {
 import dataProvider from "./components/dataProvider";
 import { useTranslation } from "react-i18next";
 import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom";
-import { ColorModeContextProvider } from "./contexts/color-mode";
 import { FileOutlined, HighlightOutlined, UserOutlined } from "@ant-design/icons";
 import { ConfigProvider } from "antd";
 import React from "react";
@@ -23,6 +22,7 @@ import loadable from "@loadable/component";
 import SpoolmanNotificationProvider from "./components/notificationProvider";
 import { SpoolmanLayout } from "./components/layout";
 import liveProvider from "./components/liveProvider";
+import { SettingsContextProvider } from "./contexts/settings";
 
 interface PageProps {
   resource: "spools" | "filaments" | "vendors";
@@ -71,7 +71,7 @@ function App() {
   return (
     <BrowserRouter>
       <RefineKbarProvider>
-        <ColorModeContextProvider>
+        <SettingsContextProvider>
           <ConfigProvider
             locale={antdLocale}
             theme={{
@@ -173,7 +173,7 @@ function App() {
               <ReactQueryDevtools />
             </Refine>
           </ConfigProvider>
-        </ColorModeContextProvider>
+        </SettingsContextProvider>
       </RefineKbarProvider>
     </BrowserRouter>
   );

client/src/components/header/index.tsx

@@ -1,13 +1,13 @@
-import { DownOutlined } from "@ant-design/icons";
+import { BulbFilled, SettingFilled } from "@ant-design/icons";
 import type { RefineThemedLayoutV2HeaderProps } from "@refinedev/antd";
 import { useGetLocale, useSetLocale } from "@refinedev/core";
-import { Button, Dropdown, Layout as AntdLayout, MenuProps, Space, Switch, theme } from "antd";
+import { Button, Dropdown, Layout as AntdLayout, MenuProps, theme } from "antd";
 import React, { useContext } from "react";
-import { ColorModeContext } from "../../contexts/color-mode";
 
 import "/node_modules/flag-icons/css/flag-icons.min.css";
 import { languages } from "../../i18n";
 import QRCodeScannerModal from "../qrCodeScanner";
+import { SettingsContext } from "../../contexts/settings";
 
 const { useToken } = theme;
 
@@ -15,7 +15,7 @@ export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({ sticky }) =>
   const { token } = useToken();
   const locale = useGetLocale();
   const changeLanguage = useSetLocale();
-  const { mode, setMode } = useContext(ColorModeContext);
+  const { settings, setSetting } = useContext(SettingsContext);
 
   const currentLocale = locale();
 
@@ -43,29 +43,27 @@ export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({ sticky }) =>
 
   return (
     <AntdLayout.Header style={headerStyles}>
-      <Space>
-        <Dropdown
-          menu={{
-            items: menuItems,
-            selectedKeys: currentLocale ? [currentLocale] : [],
-          }}
-        >
-          <Button type="text">
-            <Space>
-              <span className={"fi fi-" + languages[currentLocale ?? "en"].countryCode} />
-              {languages[currentLocale ?? "en"].name}
-              <DownOutlined />
-            </Space>
-          </Button>
-        </Dropdown>
-        <Switch
-          checkedChildren="🌛"
-          unCheckedChildren="🔆"
-          onChange={() => setMode(mode === "light" ? "dark" : "light")}
-          defaultChecked={mode === "dark"}
-        />
-        <QRCodeScannerModal />
-      </Space>
+      <Dropdown
+        menu={{
+          items: [
+            {
+              key: "colorMode",
+              onClick: () => setSetting("colorMode", settings.colorMode === "light" ? "dark" : "light"),
+              icon: settings.colorMode === "dark" ? <BulbFilled /> : <BulbFilled />,
+              label: settings.colorMode === "dark" ? "Light Theme" : "Dark Theme",
+            },
+            {
+              key: "language",
+              label: languages[currentLocale ?? "en"].name,
+              icon: <span className={"fi fi-" + languages[currentLocale ?? "en"].countryCode} />,
+              children: menuItems,
+            },
+          ],
+        }}
+      >
+        <Button size="large" type="text" icon={<SettingFilled />} />
+      </Dropdown>
+      <QRCodeScannerModal />
     </AntdLayout.Header>
   );
 };

client/src/contexts/color-mode/index.tsx

@@ -1,51 +0,0 @@
-import { RefineThemes } from "@refinedev/antd";
-import { ConfigProvider, theme } from "antd";
-import { createContext, PropsWithChildren, useEffect, useState } from "react";
-
-type ColorModeContextType = {
-  mode: string;
-  setMode: (mode: string) => void;
-};
-
-export const ColorModeContext = createContext<ColorModeContextType>({} as ColorModeContextType);
-
-export const ColorModeContextProvider: React.FC<PropsWithChildren> = ({ children }) => {
-  const colorModeFromLocalStorage = localStorage.getItem("colorMode");
-  const isSystemPreferenceDark = window?.matchMedia("(prefers-color-scheme: dark)").matches;
-
-  const systemPreference = isSystemPreferenceDark ? "dark" : "light";
-  const [mode, setMode] = useState(colorModeFromLocalStorage || systemPreference);
-
-  useEffect(() => {
-    window.localStorage.setItem("colorMode", mode);
-  }, [mode]);
-
-  const setColorMode = () => {
-    if (mode === "light") {
-      setMode("dark");
-    } else {
-      setMode("light");
-    }
-  };
-
-  const { darkAlgorithm, defaultAlgorithm } = theme;
-
-  return (
-    <ColorModeContext.Provider
-      value={{
-        setMode: setColorMode,
-        mode,
-      }}
-    >
-      <ConfigProvider
-        // you can change the theme colors here. example: ...RefineThemes.Magenta,
-        theme={{
-          ...RefineThemes.Yellow,
-          algorithm: mode === "light" ? defaultAlgorithm : darkAlgorithm,
-        }}
-      >
-        {children}
-      </ConfigProvider>
-    </ColorModeContext.Provider>
-  );
-};

client/src/contexts/settings.tsx

@@ -0,0 +1,44 @@
+import { RefineThemes } from "@refinedev/antd";
+import { ConfigProvider, theme } from "antd";
+import { createContext, PropsWithChildren } from "react";
+import { useSavedState } from "../utils/saveload";
+
+type Settings = {
+  colorMode: "light" | "dark";
+};
+
+type SettingsContextType = {
+  settings: Settings;
+  setSetting: <K extends keyof Settings>(key: K, value: Settings[K]) => void;
+};
+
+const defaultSettings: Settings = {
+  colorMode: window?.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light",
+};
+
+export const SettingsContext = createContext<SettingsContextType>({} as SettingsContextType);
+
+export const SettingsContextProvider: React.FC<PropsWithChildren> = ({ children }) => {
+  const [settings, setSetting] = useSavedState("settings", defaultSettings);
+
+  const { darkAlgorithm, defaultAlgorithm } = theme;
+
+  return (
+    <SettingsContext.Provider
+      value={{
+        setSetting: (key, value) => setSetting({ ...settings, [key]: value }),
+        settings,
+      }}
+    >
+      <ConfigProvider
+        // you can change the theme colors here. example: ...RefineThemes.Magenta,
+        theme={{
+          ...RefineThemes.Yellow,
+          algorithm: settings.colorMode === "light" ? defaultAlgorithm : darkAlgorithm,
+        }}
+      >
+        {children}
+      </ConfigProvider>
+    </SettingsContext.Provider>
+  );
+};