real settings view impl

server management mostly working
changing active server needs work

app/screens/Settings.tsx

@@ -1,82 +1,93 @@
+import Button from '@app/components/Button'
+import GradientScrollView from '@app/components/GradientScrollView'
+import Header from '@app/components/Header'
+import PressableOpacity from '@app/components/PressableOpacity'
+import SettingsItem from '@app/components/SettingsItem'
+import { Server } from '@app/models/settings'
+import { activeServerAtom, appSettingsAtom } from '@app/state/settings'
+import colors from '@app/styles/colors'
 import { useNavigation } from '@react-navigation/core'
 import { useAtom } from 'jotai'
-import md5 from 'md5'
-import React from 'react'
-import { Button, StyleSheet, Text, View } from 'react-native'
-import { v4 as uuidv4 } from 'uuid'
-import { appSettingsAtom } from '@app/state/settings'
-import { getAllKeys, multiRemove } from '@app/storage/asyncstorage'
+import { useAtomValue } from 'jotai/utils'
+import React, { useCallback } from 'react'
+import { StatusBar, StyleSheet, View } from 'react-native'
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
 
-const TestControls = () => {
+const ServerItem = React.memo<{
+  server: Server
+}>(({ server }) => {
+  const [activeServer, setActiveServer] = useAtom(activeServerAtom)
   const navigation = useNavigation()
 
-  const removeAllKeys = async () => {
-    const allKeys = await getAllKeys()
-    await multiRemove(allKeys)
-  }
-
-  return (
-    <View>
-      <Button title="Remove all keys" onPress={removeAllKeys} />
-      <Button title="Now Playing" onPress={() => navigation.navigate('now-playing')} />
-    </View>
-  )
-}
-
-const ServerSettingsView = () => {
-  const [appSettings, setAppSettings] = useAtom(appSettingsAtom)
-
-  const bootstrapServer = () => {
-    if (appSettings.servers.length !== 0) {
+  const setActive = useCallback(() => {
+    if (activeServer?.id === server.id) {
       return
     }
-
-    const id = uuidv4()
-    const salt = uuidv4()
-    const address = 'http://demo.subsonic.org'
-
-    setAppSettings({
-      ...appSettings,
-      servers: [
-        ...appSettings.servers,
-        {
-          id,
-          salt,
-          address,
-          username: 'guest',
-          token: md5('guest' + salt),
-        },
-      ],
-      activeServer: id,
-    })
-  }
+    setActiveServer(server.id)
+  }, [activeServer?.id, server.id, setActiveServer])
 
   return (
-    <View>
-      <Button title="Add default server" onPress={bootstrapServer} />
-      {appSettings.servers.map(s => (
-        <View key={s.id}>
-          <Text style={styles.text}>{s.address}</Text>
-          <Text style={styles.text}>{s.username}</Text>
-        </View>
+    <SettingsItem
+      title={server.address}
+      subtitle={server.username}
+      onPress={() => navigation.navigate('server', { id: server.id })}>
+      <PressableOpacity style={styles.serverActive} onPress={setActive}>
+        {activeServer && activeServer.id === server.id ? (
+          <Icon name="checkbox-marked-circle" size={30} color={colors.accent} />
+        ) : (
+          <Icon name="checkbox-blank-circle-outline" size={30} color={colors.text.secondary} />
+        )}
+      </PressableOpacity>
+    </SettingsItem>
+  )
+})
+
+const SettingsContent = React.memo(() => {
+  const settings = useAtomValue(appSettingsAtom)
+  const navigation = useNavigation()
+
+  return (
+    <View style={styles.content}>
+      <Header>Servers</Header>
+      {settings.servers.map(s => (
+        <ServerItem key={s.id} server={s} />
       ))}
+      <Button title="Add Server" onPress={() => navigation.navigate('server')} buttonStyle="hollow" />
+      <Header>Network</Header>
+      <SettingsItem title="Max bitrate (Wi-Fi)" subtitle="Unlimited" />
+      <SettingsItem title="Max bitrate (mobile)" subtitle="192kbps" />
+      <Header>Reset</Header>
+      <Button title="Reset everything to default" onPress={() => {}} buttonStyle="hollow" />
     </View>
   )
+})
+
+const Settings = () => {
+  return (
+    <GradientScrollView style={styles.scroll} contentContainerStyle={styles.scrollContentContainer}>
+      <React.Suspense fallback={() => <></>}>
+        <SettingsContent />
+      </React.Suspense>
+    </GradientScrollView>
+  )
 }
 
-const SettingsView = () => (
-  <View>
-    <TestControls />
-    <React.Suspense fallback={<Text>Loading...</Text>}>
-      <ServerSettingsView />
-    </React.Suspense>
-  </View>
-)
-
 const styles = StyleSheet.create({
+  scroll: {
+    flex: 1,
+  },
+  scrollContentContainer: {
+    paddingTop: StatusBar.currentHeight,
+  },
+  content: {
+    paddingHorizontal: 20,
+  },
   text: {
     color: 'white',
   },
+  serverActive: {
+    paddingLeft: 12,
+  },
 })
 
-export default SettingsView
+export default Settings