real settings view impl

server management mostly working
changing active server needs work

app/state/settings.ts

@@ -1,8 +1,9 @@
 import { atom } from 'jotai'
-import { AppSettings } from '@app/models/settings'
+import { AppSettings, Server } from '@app/models/settings'
 import atomWithAsyncStorage from '@app/storage/atomWithAsyncStorage'
 import { useEffect } from 'react'
 import { useAtomValue } from 'jotai/utils'
+import equal from 'fast-deep-equal'
 
 export const appSettingsAtom = atomWithAsyncStorage<AppSettings>('@appSettings', {
   servers: [],
@@ -11,10 +12,38 @@ export const appSettingsAtom = atomWithAsyncStorage<AppSettings>('@appSettings',
   },
 })
 
-export const activeServerAtom = atom(get => {
-  const appSettings = get(appSettingsAtom)
-  return appSettings.servers.find(x => x.id === appSettings.activeServer)
-})
+export const activeServerAtom = atom<Server | undefined, string>(
+  get => {
+    const appSettings = get(appSettingsAtom)
+    return appSettings.servers.find(x => x.id === appSettings.activeServer)
+  },
+  (get, set, update) => {
+    const appSettings = get(appSettingsAtom)
+    if (!appSettings.servers.find(s => s.id === update)) {
+      return
+    }
+    if (appSettings.activeServer === update) {
+      return
+    }
+    set(appSettingsAtom, {
+      ...appSettings,
+      activeServer: update,
+    })
+  },
+)
+
+export const serversAtom = atom<Server[], Server[]>(
+  get => get(appSettingsAtom).servers,
+  (get, set, update) => {
+    const settings = get(appSettingsAtom)
+    if (!equal(settings.servers, update)) {
+      set(appSettingsAtom, {
+        ...settings,
+        servers: update,
+      })
+    }
+  },
+)
 
 export const useActiveServerRefresh = (update: () => any) => {
   const activeServer = useAtomValue(activeServerAtom)