refactor setting

apps/cli/src/commands/start_server/middlewares/i18n.ts

@@ -14,7 +14,7 @@ export default (ctx: Context & I18nMiddleware, next: Next) => {
   let lang: Language | null = null;
   const getLang = () => {
     if (!lang) {
-      // @ts-expect-error
+      // @ts-expect-error: known types
       ({ __lang: lang } = ctx.query as { [CommonQuery.LANGUAGE]: unknown });
       if (!lang || !ACCEPT_LANGUAGES.includes(lang)) {
         const negotiator = new Negotiator(ctx.request);

apps/pwa/src/global_states/server.ts

@@ -25,7 +25,11 @@ export const useServer = create(
     },
 );
 
-useServer.subscribe((server) => storage.setItem(Key.SERVER, server));
+useServer.subscribe((server) =>
+  storage
+    .setItem(Key.SERVER, server)
+    .catch((error) => logger.error(error, 'Failed to store server')),
+);
 
 window.setInterval(() => {
   const selectedServer = getSelectedServer(useServer.getState());

apps/pwa/src/global_states/setting.ts

@@ -1,4 +1,4 @@
-import XState from '@/utils/x_state';
+import { create } from 'zustand';
 import storage, { Key } from '@/storage';
 import { Setting } from '@/constants/setting';
 import logger from '@/utils/logger';
@@ -26,26 +26,23 @@ const DEFAULT_SETTING: Setting = {
   language: getInitialLanguage(),
 };
 const initialSetting = await storage.getItem(Key.SETTING);
-const setting = new XState<Setting>({
+export const useSetting = create<Setting>(() => ({
   ...DEFAULT_SETTING,
   ...initialSetting,
-});
+}));
 
 /**
  * correct language
  * @author mebtte<i@mebtte.com>
  */
-if (!LANGUAGES.includes(setting.get().language)) {
-  setting.set((s) => ({
-    ...s,
+if (!LANGUAGES.includes(useSetting.getState().language)) {
+  useSetting.setState({
     language: DEFAULT_LANGUAGE,
-  }));
+  });
 }
 
-setting.onChange((s) =>
+useSetting.subscribe((setting) =>
   storage
-    .setItem(Key.SETTING, s)
-    .catch((error) => logger.error(error, 'Failed to save setting')),
+    .setItem(Key.SETTING, setting)
+    .catch((error) => logger.error(error, 'Failed to store setting')),
 );
-
-export default setting;

apps/pwa/src/i18n/index.ts

@@ -1,9 +1,9 @@
 import { Language } from '#/constants';
-import setting from '../global_states/setting';
+import { useSetting } from '@/global_states/setting';
 import type { Key } from './constants';
 
 let translation: { [key in Key]: string };
-switch (setting.get().language) {
+switch (useSetting.getState().language) {
   case Language.ZH_HANS: {
     ({ default: translation } = await import('./zh_hans'));
     break;
@@ -40,4 +40,4 @@ export const LANGUAGE_MAP: Record<
   [Language.JA]: { label: '日本語' },
 };
 
-export { Key };
+export type { Key };

apps/pwa/src/pages/login/first_step/language.tsx

@@ -1,7 +1,7 @@
 import { LANGUAGES, Language } from '#/constants';
 import Label from '@/components/label';
 import { Select, Option } from '@/components/select';
-import setting from '@/global_states/setting';
+import { useSetting } from '@/global_states/setting';
 import { LANGUAGE_MAP, t } from '@/i18n';
 
 const languageOptions: Option<Language>[] = LANGUAGES.map((l) => ({
@@ -11,7 +11,7 @@ const languageOptions: Option<Language>[] = LANGUAGES.map((l) => ({
 }));
 
 function Wrapper({ disabled }: { disabled: boolean }) {
-  const { language } = setting.useState();
+  const { language } = useSetting();
   return (
     <Label label={t('language')}>
       <Select<Language>
@@ -21,10 +21,9 @@ function Wrapper({ disabled }: { disabled: boolean }) {
           actualValue: language,
         }}
         onChange={(option) => {
-          setting.set((s) => ({
-            ...s,
+          useSetting.setState({
             language: option.actualValue,
-          }));
+          });
           return window.setTimeout(() => window.location.reload(), 0);
         }}
         options={languageOptions}

apps/pwa/src/pages/player/pages/setting/language.tsx

@@ -1,11 +1,11 @@
 import { memo, CSSProperties } from 'react';
-import setting from '@/global_states/setting';
 import { Select, Option } from '@/components/select';
 import { LANGUAGE_MAP, t } from '@/i18n';
 import { Language } from '#/constants';
 import dialog from '@/utils/dialog';
 import Item from './item';
 import { itemStyle } from './constants';
+import { useSetting } from '@/global_states/setting';
 
 const LANGUAGES = Object.values(Language);
 const style: CSSProperties = {
@@ -18,7 +18,7 @@ const options: Option<Language>[] = LANGUAGES.map((l) => ({
 }));
 
 function Wrapper() {
-  const { language } = setting.useState();
+  const { language } = useSetting();
   return (
     <Item label={t('language')} style={itemStyle}>
       <Select<Language>
@@ -32,10 +32,9 @@ function Wrapper() {
             dialog.confirm({
               content: t('change_language_question'),
               onConfirm: () => {
-                setting.set((prev) => ({
-                  ...prev,
+                useSetting.setState({
                   language: option.actualValue,
-                }));
+                });
                 window.setTimeout(() => window.location.reload(), 0);
               },
             });

apps/pwa/src/pages/player/pages/setting/volume.tsx

@@ -1,16 +1,15 @@
 import { type CSSProperties, memo } from 'react';
-import setting from '@/global_states/setting';
 import Slider from '@/components/slider';
 import { useTheme } from '@/global_states/theme';
 import { t } from '@/i18n';
 import Item from './item';
 import { itemStyle } from './constants';
+import { useSetting } from '@/global_states/setting';
 
 const onVolumnChange = (v: number) =>
-  setting.set((s) => ({
-    ...s,
+  useSetting.setState({
     playerVolume: v,
-  }));
+  });
 const sliderStyle: CSSProperties = {
   width: 200,
 };
@@ -20,7 +19,7 @@ const miniModeSliderStyle: CSSProperties = {
 };
 
 function Volume() {
-  const { playerVolume } = setting.useState();
+  const { playerVolume } = useSetting();
   return (
     <Item label={t('relative_volume')} style={itemStyle}>
       <Slider

apps/pwa/src/pages/player/use_audio/use_volume.ts

@@ -1,10 +1,10 @@
 import { useEffect } from 'react';
-import setting from '@/global_states/setting';
 import CustomAudio from '@/utils/custom_audio';
 import { QueueMusic } from '../constants';
+import { useSetting } from '@/global_states/setting';
 
 export default (audio: CustomAudio<QueueMusic> | null) => {
-  const { playerVolume } = setting.useState();
+  const { playerVolume } = useSetting();
 
   useEffect(() => {
     if (audio) {

apps/pwa/src/server/index.ts

@@ -4,14 +4,14 @@ import {
   getSelectedServer,
   getSelectedUser,
 } from '@/global_states/server';
-import setting from '@/global_states/setting';
 import ErrorWithCode from '@/utils/error_with_code';
 import sleep from '#/utils/sleep';
 import definition from '@/definition';
 import { NORMAL_REQUEST_MINIMAL_DURATION } from '@/constants';
 import timeoutFn from '#/utils/timeout';
 import { CommonQuery } from '#/constants';
 import { t } from '@/i18n';
+import { useSetting } from '@/global_states/setting';
 
 export enum Method {
   GET = 'get',
@@ -24,7 +24,7 @@ export enum Method {
 export function getCommonParams() {
   return {
     [CommonQuery.VERSION]: definition.VERSION,
-    [CommonQuery.LANGUAGE]: setting.get().language,
+    [CommonQuery.LANGUAGE]: useSetting.getState().language,
   };
 }