refactor: add persist for settings store

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;
 

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',
     });
   });

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',
 }));

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',
+    }
+  )
+);