Add Jotai to package.json and update Main page to use Jotai instead o…

…f Valtio for state management

package.json

@@ -25,12 +25,12 @@
     "@swan-io/chicane": "1.3.4",
     "@tauri-apps/api": "1.2.0",
     "@total-typescript/ts-reset": "0.4.2",
+    "jotai": "2.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-use": "17.4.0",
     "ress": "5.0.2",
-    "ts-pattern": "4.2.2",
-    "valtio": "1.10.3"
+    "ts-pattern": "4.2.2"
   },
   "devDependencies": {
     "@babel/core": "7.21.3",

src-tauri/tauri.conf.json

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "SensiMouse",
-    "version": "0.0.1"
+    "version": "0.0.2"
   },
   "tauri": {
     "allowlist": {

src/app.tsx

@@ -1,9 +1,11 @@
 import { type MantineThemeOverride } from '@mantine/core'
 import { MantineProvider } from '@mantine/core'
+import { Provider } from 'jotai/react'
 import { lazy, useMemo } from 'react'
 import { match } from 'ts-pattern'
 
 import { Router } from './router'
+import { store } from './store'
 import { styled } from './theme'
 
 const Main = lazy(() => import('./pages/Main'))
@@ -40,7 +42,9 @@ export const App = () => {
     return (
         <MantineProvider withGlobalStyles withCSSVariables theme={theme}>
             <AppShellScreen id="app-shell-screen">
-                <MainContent>{contentView}</MainContent>
+                <Provider store={store}>
+                    <MainContent>{contentView}</MainContent>
+                </Provider>
             </AppShellScreen>
         </MantineProvider>
     )

src/pages/Main/index.tsx

@@ -1,7 +1,7 @@
 import { Input, Text } from '@mantine/core'
-import { useSnapshot } from 'valtio'
+import { useAtom } from 'jotai/react'
 
-import { state, updateAccEnabled, updateSen } from '@/store'
+import { accEnabledAtom, senAtom } from '@/store'
 
 import * as SC from './styles'
 
@@ -14,7 +14,8 @@ const marks = [
 ]
 
 const Main = () => {
-    const data = useSnapshot(state)
+    const [sen, setSen] = useAtom(senAtom)
+    const [accEnabled, setAccEnabled] = useAtom(accEnabledAtom)
 
     return (
         <SC.Container>
@@ -23,12 +24,11 @@ const Main = () => {
                 <Input.Wrapper label="Sensitivity">
                     <SC.xSlider
                         size="lg"
-                        labelAlwaysOn
                         marks={marks}
                         min={0}
                         max={100}
-                        value={data.sen}
-                        onChange={updateSen}
+                        value={sen}
+                        onChange={setSen}
                         styles={theme => ({
                             markLabel: {
                                 color: '#55585f'
@@ -41,9 +41,9 @@ const Main = () => {
                         size="md"
                         onLabel="ON"
                         offLabel="OFF"
-                        checked={data.accEnabled}
+                        checked={accEnabled}
                         onChange={event => {
-                            updateAccEnabled(event.target.checked)
+                            setAccEnabled(event.target.checked)
                         }}
                     />
                 </Input.Wrapper>

src/pages/Main/styles.ts

@@ -32,7 +32,8 @@ export const xSlider = styled(Slider, {
 })
 
 export const xSwitch = styled(Switch, {
-    marginTop: '4px'
+    marginTop: '4px',
+    cursor: 'pointer'
 })
 
 export const xDivider = styled(Divider, {

src/store.ts

@@ -1,29 +1,25 @@
-/* eslint-disable functional/immutable-data */
 import { invoke } from '@tauri-apps/api/tauri'
-import { proxy } from 'valtio'
+import { atom, createStore } from 'jotai'
 
 import { on } from './helper'
 
-export const state = proxy({
-    sen: 0,
-    accEnabled: false
+export const store = createStore()
+
+export const senAtom = atom(0, (get, set, sen: number) => {
+    set(senAtom, sen)
+    invoke('set_mouse_cfg', { sen, accEnabled: get(accEnabledAtom) })
+})
+
+export const accEnabledAtom = atom(false, (get, set, accEnabled: boolean) => {
+    set(accEnabledAtom, accEnabled)
+    invoke('set_mouse_cfg', { sen: get(senAtom), accEnabled })
 })
 
 export const fetchState = async () => {
     const [sen, accEnabled] = await invoke<[number, boolean]>('get_mouse_cfg')
 
-    state.sen = sen
-    state.accEnabled = accEnabled
-}
-
-export const updateSen = async (sen: number) => {
-    state.sen = sen
-    await invoke('set_mouse_cfg', { sen, accEnabled: state.accEnabled })
-}
-
-export const updateAccEnabled = async (accEnabled: boolean) => {
-    state.accEnabled = accEnabled
-    await invoke('set_mouse_cfg', { sen: state.sen, accEnabled })
+    store.set(senAtom, sen)
+    store.set(accEnabledAtom, accEnabled)
 }
 
 fetchState()