Refactor settings store

packages/renderer/src/components/virtual-table/table-config-dropdown.tsx

@@ -3,7 +3,7 @@ import { Stack } from '@mantine/core';
 import { Slider } from '/@/components/slider';
 import { Switch } from '/@/components/switch';
 import { Text } from '/@/components/text';
-import { useSettingsStore } from '/@/store/settings.store';
+import { useSettingsStore, useSettingsStoreActions } from '/@/store/settings.store';
 import type { TableType } from '/@/types';
 import { TableColumn } from '/@/types';
 import { MultiSelect } from '/@/components/select';
@@ -36,7 +36,7 @@ interface TableConfigDropdownProps {
 }
 
 export const TableConfigDropdown = ({ type }: TableConfigDropdownProps) => {
-  const setSettings = useSettingsStore((state) => state.setSettings);
+  const { setSettings } = useSettingsStoreActions();
   const tableConfig = useSettingsStore((state) => state.tables);
 
   const handleAddOrRemoveColumns = (values: TableColumn[]) => {

packages/renderer/src/features/now-playing/components/play-queue.tsx

@@ -15,7 +15,11 @@ import {
   usePreviousSong,
   useQueueControls,
 } from '/@/store';
-import { useSettingsStore } from '/@/store/settings.store';
+import {
+  useSettingsStore,
+  useSettingsStoreActions,
+  useTableSettings,
+} from '/@/store/settings.store';
 import type { QueueSong, TableType } from '/@/types';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 import { ErrorBoundary } from 'react-error-boundary';
@@ -34,9 +38,9 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: any) => {
   const { reorderQueue, setCurrentTrack } = useQueueControls();
   const currentSong = useCurrentSong();
   const previousSong = usePreviousSong();
-  const setSettings = useSettingsStore((state) => state.setSettings);
+  const { setSettings } = useSettingsStoreActions();
   const { setAppStore } = useAppStoreActions();
-  const tableConfig = useSettingsStore((state) => state.tables[type]);
+  const tableConfig = useTableSettings(type);
 
   useImperativeHandle(ref, () => ({
     get grid() {

packages/renderer/src/features/settings/components/general-tab.tsx

@@ -3,7 +3,7 @@ import isElectron from 'is-electron';
 import { Switch, Select } from '/@/components';
 import { SettingsOptions } from '/@/features/settings/components/settings-option';
 import { THEME_DATA } from '/@/hooks';
-import { useSettingsStore } from '/@/store/settings.store';
+import { useGeneralSettings, useSettingsStoreActions } from '/@/store/settings.store';
 import type { AppTheme } from '/@/themes/types';
 
 const FONT_OPTIONS = [
@@ -29,8 +29,8 @@ const FONT_OPTIONS = [
 ];
 
 export const GeneralTab = () => {
-  const settings = useSettingsStore((state) => state.general);
+  const settings = useGeneralSettings();
-  const update = useSettingsStore((state) => state.setSettings);
+  const { setSettings } = useSettingsStoreActions();
 
   const options = [
     {
@@ -63,7 +63,7 @@ export const GeneralTab = () => {
           defaultValue={settings.fontContent}
           onChange={(e) => {
             if (!e) return;
-            update({
+            setSettings({
               general: {
                 ...settings,
                 fontContent: e,
@@ -83,7 +83,7 @@ export const GeneralTab = () => {
           defaultValue={settings.fontHeader}
           onChange={(e) => {
             if (!e) return;
-            update({
+            setSettings({
               general: {
                 ...settings,
                 fontHeader: e,
@@ -104,7 +104,7 @@ export const GeneralTab = () => {
         <Switch
           defaultChecked={settings.followSystemTheme}
           onChange={(e) => {
-            update({
+            setSettings({
               general: {
                 ...settings,
                 followSystemTheme: e.currentTarget.checked,
@@ -123,7 +123,7 @@ export const GeneralTab = () => {
           data={THEME_DATA}
           defaultValue={settings.theme}
           onChange={(e) => {
-            update({
+            setSettings({
               general: {
                 ...settings,
                 theme: e as AppTheme,
@@ -142,7 +142,7 @@ export const GeneralTab = () => {
           data={THEME_DATA}
           defaultValue={settings.themeDark}
           onChange={(e) => {
-            update({
+            setSettings({
               general: {
                 ...settings,
                 themeDark: e as AppTheme,
@@ -161,7 +161,7 @@ export const GeneralTab = () => {
           data={THEME_DATA}
           defaultValue={settings.themeLight}
           onChange={(e) => {
-            update({
+            setSettings({
               general: {
                 ...settings,
                 themeLight: e as AppTheme,

packages/renderer/src/features/settings/components/playback-tab.tsx

@@ -17,7 +17,7 @@ import {
 import { mpvPlayer } from '#preload';
 import { SettingsOptions } from '/@/features/settings/components/settings-option';
 import { useCurrentStatus, usePlayerStore } from '/@/store';
-import { useSettingsStore } from '/@/store/settings.store';
+import { useSettingsStore, useSettingsStoreActions } from '/@/store/settings.store';
 import { Play, PlaybackStyle, PlaybackType, PlayerStatus, CrossfadeStyle } from '/@/types';
 import { localSettings } from '#preload';
 
@@ -28,7 +28,7 @@ const getAudioDevice = async () => {
 
 export const PlaybackTab = () => {
   const settings = useSettingsStore((state) => state.player);
-  const update = useSettingsStore((state) => state.setSettings);
+  const { setSettings } = useSettingsStoreActions();
   const status = useCurrentStatus();
   const [audioDevices, setAudioDevices] = useState<SelectItem[]>([]);
   const [mpvPath, setMpvPath] = useState('');
@@ -81,7 +81,7 @@ export const PlaybackTab = () => {
           defaultValue={settings.type}
           disabled={status === PlayerStatus.PLAYING}
           onChange={(e) => {
-            update({ player: { ...settings, type: e as PlaybackType } });
+            setSettings({ player: { ...settings, type: e as PlaybackType } });
             if (isElectron() && e === PlaybackType.LOCAL) {
               const queueData = usePlayerStore.getState().actions.getPlayerData();
               mpvPlayer.setQueue(queueData);
@@ -152,7 +152,7 @@ export const PlaybackTab = () => {
           data={audioDevices}
           defaultValue={settings.audioDeviceId}
           disabled={settings.type !== PlaybackType.WEB}
-          onChange={(e) => update({ player: { ...settings, audioDeviceId: e } })}
+          onChange={(e) => setSettings({ player: { ...settings, audioDeviceId: e } })}
         />
       ),
       description: 'The audio device to use for playback (web player only)',
@@ -168,7 +168,7 @@ export const PlaybackTab = () => {
           ]}
           defaultValue={settings.style}
           disabled={settings.type !== PlaybackType.WEB || status === PlayerStatus.PLAYING}
-          onChange={(e) => update({ player: { ...settings, style: e as PlaybackStyle } })}
+          onChange={(e) => setSettings({ player: { ...settings, style: e as PlaybackStyle } })}
         />
       ),
       description: 'Adjust the playback style (web player only)',
@@ -188,7 +188,7 @@ export const PlaybackTab = () => {
           max={15}
           min={0}
           w={100}
-          onChangeEnd={(e) => update({ player: { ...settings, crossfadeDuration: e } })}
+          onChangeEnd={(e) => setSettings({ player: { ...settings, crossfadeDuration: e } })}
         />
       ),
       description: 'Adjust the crossfade duration (web player only)',
@@ -222,7 +222,7 @@ export const PlaybackTab = () => {
           width={200}
           onChange={(e) => {
             if (!e) return;
-            update({
+            setSettings({
               player: { ...settings, crossfadeStyle: e as CrossfadeStyle },
             });
           }}
@@ -240,7 +240,7 @@ export const PlaybackTab = () => {
           defaultChecked={settings.globalMediaHotkeys}
           disabled={!isElectron()}
           onChange={(e) => {
-            update({
+            setSettings({
               player: {
                 ...settings,
                 globalMediaHotkeys: e.currentTarget.checked,
@@ -274,7 +274,7 @@ export const PlaybackTab = () => {
           ]}
           defaultValue={settings.playButtonBehavior}
           onChange={(e) =>
-            update({
+            setSettings({
               player: {
                 ...settings,
                 playButtonBehavior: e as Play,
@@ -293,7 +293,7 @@ export const PlaybackTab = () => {
           aria-label="Toggle skip buttons"
           defaultChecked={settings.skipButtons?.enabled}
           onChange={(e) =>
-            update({
+            setSettings({
               player: {
                 ...settings,
                 skipButtons: {
@@ -318,7 +318,7 @@ export const PlaybackTab = () => {
               min={0}
               width={75}
               onBlur={(e) =>
-                update({
+                setSettings({
                   player: {
                     ...settings,
                     skipButtons: {
@@ -338,7 +338,7 @@ export const PlaybackTab = () => {
               min={0}
               width={75}
               onBlur={(e) =>
-                update({
+                setSettings({
                   player: {
                     ...settings,
                     skipButtons: {

packages/renderer/src/features/settings/components/settings.tsx

@@ -5,11 +5,11 @@ import { motion } from 'framer-motion';
 import { Tabs } from '/@/components';
 import { GeneralTab } from '/@/features/settings/components/general-tab';
 import { PlaybackTab } from '/@/features/settings/components/playback-tab';
-import { useSettingsStore } from '/@/store/settings.store';
+import { useSettingsStore, useSettingsStoreActions } from '/@/store/settings.store';
 
 export const Settings = () => {
   const currentTab = useSettingsStore((state) => state.tab);
-  const update = useSettingsStore((state) => state.setSettings);
+  const { setSettings } = useSettingsStoreActions();
 
   const tabVariants: Variants = {
     in: {
@@ -42,7 +42,7 @@ export const Settings = () => {
           }}
           value={currentTab}
           variant="pills"
-          onTabChange={(e) => e && update({ tab: e })}
+          onTabChange={(e) => e && setSettings({ tab: e })}
         >
           <Tabs.List>
             <Tabs.Tab value="general">General</Tabs.Tab>

packages/renderer/src/layouts/default-layout.tsx

@@ -18,7 +18,7 @@ import { useAppStoreActions } from '/@/store/app.store';
 import { DrawerPlayQueue, SidebarPlayQueue } from '/@/features/now-playing';
 
 if (!isElectron()) {
-  useSettingsStore.getState().setSettings({
+  useSettingsStore.getState().actions.setSettings({
     player: {
       ...useSettingsStore.getState().player,
       type: PlaybackType.WEB,

packages/renderer/src/store/settings.store.ts

@@ -5,6 +5,7 @@ import create from 'zustand';
 import { devtools, persist } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
 import { AppTheme } from '/@/themes/types';
+import type { TableType } from '/@/types';
 import { CrossfadeStyle, Play, PlaybackStyle, PlaybackType, TableColumn } from '/@/types';
 
 export type PersistedTableColumn = {
@@ -56,13 +57,20 @@ export interface SettingsState {
 }
 
 export interface SettingsSlice extends SettingsState {
-  setSettings: (data: Partial<SettingsState>) => void;
+  actions: {
+    setSettings: (data: Partial<SettingsState>) => void;
+  };
 }
 
 export const useSettingsStore = create<SettingsSlice>()(
   persist(
     devtools(
       immer((set, get) => ({
+        actions: {
+          setSettings: (data) => {
+            set({ ...get(), ...data });
+          },
+        },
         general: {
           followSystemTheme: false,
           fontContent: 'Circular STD',
@@ -90,9 +98,7 @@ export const useSettingsStore = create<SettingsSlice>()(
           style: PlaybackStyle.GAPLESS,
           type: PlaybackType.LOCAL,
         },
-        setSettings: (data) => {
+
-          set({ ...get(), ...data });
-        },
         tab: 'general',
         tables: {
           nowPlaying: {
@@ -177,3 +183,12 @@ export const useSettingsStore = create<SettingsSlice>()(
     },
   ),
 );
+
+export const useSettingsStoreActions = () => useSettingsStore((state) => state.actions);
+
+export const usePlayerSettings = () => useSettingsStore((state) => state.player);
+
+export const useTableSettings = (type: TableType) =>
+  useSettingsStore((state) => state.tables[type]);
+
+export const useGeneralSettings = () => useSettingsStore((state) => state.general);