From 674952da59c5b1fc8be71cad69ad89a3d5cc661f Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Fri, 8 Dec 2023 22:05:34 +0800
Subject: [PATCH] refactor: add persist for settings store

---
 src/client/App.tsx                            |  4 ++--
 src/client/components/ColorSchemeSwitcher.tsx |  6 +++---
 src/client/store/global.ts                    |  2 --
 src/client/store/settings.ts                  | 18 ++++++++++++++++++
 4 files changed, 23 insertions(+), 7 deletions(-)
 create mode 100644 src/client/store/settings.ts

diff --git a/src/client/App.tsx b/src/client/App.tsx
index 7b03043..75e3011 100644
--- a/src/client/App.tsx
+++ b/src/client/App.tsx
@@ -16,8 +16,8 @@ import { WebsitePage } from './pages/Website';
 import { useGlobalConfig } from './hooks/useConfig';
 import { useInjectWebsiteScript } from './hooks/useInjectWebsiteScript';
 import { ConfigProvider, theme } from 'antd';
-import { useGlobalStateStore } from './store/global';
 import clsx from 'clsx';
+import { useSettingsStore } from './store/settings';
 
 export const AppRoutes: React.FC = React.memo(() => {
   const { info } = useUserStore();
@@ -54,7 +54,7 @@ export const AppRoutes: React.FC = React.memo(() => {
 AppRoutes.displayName = 'AppRoutes';
 
 export const App: React.FC = React.memo(() => {
-  const colorScheme = useGlobalStateStore((state) => state.colorScheme);
+  const colorScheme = useSettingsStore((state) => state.colorScheme);
   const algorithm =
     colorScheme === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm;
 
diff --git a/src/client/components/ColorSchemeSwitcher.tsx b/src/client/components/ColorSchemeSwitcher.tsx
index 24c955f..f6d22a0 100644
--- a/src/client/components/ColorSchemeSwitcher.tsx
+++ b/src/client/components/ColorSchemeSwitcher.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
-import { useGlobalStateStore } from '../store/global';
 import { LuMoon, LuSun } from 'react-icons/lu';
 import { useEvent } from '../hooks/useEvent';
 import { Button } from 'antd';
+import { useSettingsStore } from '../store/settings';
 
 export const ColorSchemeSwitcher: React.FC = React.memo(() => {
-  const colorScheme = useGlobalStateStore((state) => state.colorScheme);
+  const colorScheme = useSettingsStore((state) => state.colorScheme);
   const handleSwitchColorScheme = useEvent(() => {
-    useGlobalStateStore.setState({
+    useSettingsStore.setState({
       colorScheme: colorScheme === 'dark' ? 'light' : 'dark',
     });
   });
diff --git a/src/client/store/global.ts b/src/client/store/global.ts
index d1e9204..e63ea14 100644
--- a/src/client/store/global.ts
+++ b/src/client/store/global.ts
@@ -18,12 +18,10 @@ interface GlobalState {
   dateRange: DateRange;
   startDate: Dayjs | null;
   endDate: Dayjs | null;
-  colorScheme: 'light' | 'dark';
 }
 
 export const useGlobalStateStore = create<GlobalState>(() => ({
   dateRange: DateRange.Last24Hours,
   startDate: null,
   endDate: null,
-  colorScheme: 'light',
 }));
diff --git a/src/client/store/settings.ts b/src/client/store/settings.ts
new file mode 100644
index 0000000..4959ce4
--- /dev/null
+++ b/src/client/store/settings.ts
@@ -0,0 +1,18 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+interface SettingsState {
+  colorScheme: 'light' | 'dark';
+}
+
+export const useSettingsStore = create<SettingsState>()(
+  persist(
+    () =>
+      ({
+        colorScheme: 'light' as const,
+      } as SettingsState),
+    {
+      name: 'settings',
+    }
+  )
+);