real settings view impl

server management mostly working
changing active server needs work

.eslintrc.js

@@ -6,5 +6,6 @@ module.exports = {
     radix: 0,
     '@typescript-eslint/no-unused-vars': ['warn'],
     semi: 0,
+    'no-spaced-func': 0,
   },
 }

app/components/Button.tsx

@@ -1,18 +1,21 @@
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import React from 'react'
-import { GestureResponderEvent, StyleSheet, Text } from 'react-native'
+import { GestureResponderEvent, StyleProp, StyleSheet, Text, ViewStyle } from 'react-native'
 import PressableOpacity from './PressableOpacity'
 
 const Button: React.FC<{
   title?: string
   buttonStyle?: 'hollow' | 'highlight'
   onPress: (event: GestureResponderEvent) => void
-}> = ({ title, buttonStyle, onPress, children }) => {
+  style?: StyleProp<ViewStyle>
+  disabled?: boolean
+}> = ({ title, buttonStyle, onPress, children, style, disabled }) => {
   return (
     <PressableOpacity
       onPress={onPress}
-      style={[styles.container, buttonStyle !== undefined ? styles[buttonStyle] : {}]}>
+      disabled={disabled}
+      style={[styles.container, buttonStyle !== undefined ? styles[buttonStyle] : {}, style]}>
       {title ? <Text style={styles.text}>{title}</Text> : children}
     </PressableOpacity>
   )
@@ -28,7 +31,7 @@ const styles = StyleSheet.create({
   },
   hollow: {
     backgroundColor: 'transparent',
-    borderColor: colors.text.secondary,
+    borderColor: colors.text.primary,
     borderWidth: 1.5,
   },
   highlight: {

app/components/ListPlayerControls.tsx

@@ -23,7 +23,7 @@ const ListPlayerControls = React.memo<{
           {downloaded ? (
             <IconMat name="file-download-done" size={26} color={colors.text.primary} />
           ) : (
-            <IconMat name="file-download" size={26} color={colors.text.secondary} />
+            <IconMat name="file-download" size={26} color={colors.text.primary} />
           )}
         </Button>
       </View>

app/components/SettingsItem.tsx

@@ -0,0 +1,47 @@
+import colors from '@app/styles/colors'
+import font from '@app/styles/font'
+import React from 'react'
+import { StyleSheet, View, Text } from 'react-native'
+import PressableOpacity from './PressableOpacity'
+
+const SettingsItem: React.FC<{
+  title: string
+  subtitle?: string
+  onPress?: () => void
+}> = ({ title, subtitle, onPress, children }) => {
+  return (
+    <View style={styles.item}>
+      <PressableOpacity style={styles.itemText} onPress={onPress}>
+        <Text style={styles.itemTitle}>{title}</Text>
+        {subtitle ? <Text style={styles.itemSubtitle}>{subtitle}</Text> : <></>}
+      </PressableOpacity>
+      {children}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  item: {
+    height: 60,
+    marginBottom: 10,
+    alignItems: 'stretch',
+    flexDirection: 'row',
+  },
+  itemText: {
+    flex: 1,
+    alignSelf: 'stretch',
+    alignItems: 'flex-start',
+  },
+  itemTitle: {
+    fontFamily: font.regular,
+    color: colors.text.primary,
+    fontSize: 15,
+  },
+  itemSubtitle: {
+    fontFamily: font.regular,
+    color: colors.text.secondary,
+    fontSize: 15,
+  },
+})
+
+export default SettingsItem

app/navigation/BottomTabNavigator.tsx

@@ -5,6 +5,7 @@ import ArtistView from '@app/screens/ArtistView'
 import Home from '@app/screens/Home'
 import PlaylistView from '@app/screens/PlaylistView'
 import Search from '@app/screens/Search'
+import ServerView from '@app/screens/ServerView'
 import SettingsView from '@app/screens/Settings'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
@@ -15,7 +16,7 @@ import { StyleSheet } from 'react-native'
 import { createNativeStackNavigator, NativeStackNavigationProp } from 'react-native-screens/native-stack'
 
 type TabStackParamList = {
-  main: { toTop?: boolean }
+  main: undefined
   album: { id: string; title: string }
   artist: { id: string; title: string }
   playlist: { id: string; title: string }
@@ -83,7 +84,8 @@ function createTabStackNavigator(Component: React.ComponentType<any>) {
       return navigation.addListener('tabPress', () => {
         navigation.dispatch(StackActions.popToTop())
       })
-    })
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
 
     return (
       <Stack.Navigator initialRouteName="main">
@@ -102,6 +104,41 @@ const HomeTab = createTabStackNavigator(Home)
 const LibraryTab = createTabStackNavigator(LibraryTopTabNavigator)
 const SearchTab = createTabStackNavigator(Search)
 
+type SettingsStackParamList = {
+  main: undefined
+  server?: { id?: string }
+}
+
+type ServerScreenNavigationProp = NativeStackNavigationProp<SettingsStackParamList, 'server'>
+type ServerScreenRouteProp = RouteProp<SettingsStackParamList, 'server'>
+type ServerScreenProps = {
+  route: ServerScreenRouteProp
+  navigation: ServerScreenNavigationProp
+}
+
+const ServerScreen: React.FC<ServerScreenProps> = ({ route }) => <ServerView id={route.params?.id} />
+
+const SettingsStack = createNativeStackNavigator()
+
+const SettingsTab = () => {
+  return (
+    <SettingsStack.Navigator initialRouteName="main">
+      <SettingsStack.Screen name="main" component={SettingsView} options={{ headerShown: false }} />
+      <SettingsStack.Screen
+        name="server"
+        component={ServerScreen}
+        options={{
+          title: 'Edit Server',
+          headerStyle: styles.stackheaderStyle,
+          headerHideShadow: true,
+          headerTintColor: 'white',
+          headerTitleStyle: styles.stackheaderTitleStyle,
+        }}
+      />
+    </SettingsStack.Navigator>
+  )
+}
+
 const Tab = createBottomTabNavigator()
 
 const BottomTabNavigator = () => {
@@ -110,7 +147,7 @@ const BottomTabNavigator = () => {
       <Tab.Screen name="home" component={HomeTab} options={{ tabBarLabel: 'Home' }} />
       <Tab.Screen name="library" component={LibraryTab} options={{ tabBarLabel: 'Library' }} />
       <Tab.Screen name="search" component={SearchTab} options={{ tabBarLabel: 'Search' }} />
-      <Tab.Screen name="settings" component={SettingsView} options={{ tabBarLabel: 'Settings' }} />
+      <Tab.Screen name="settings" component={SettingsTab} options={{ tabBarLabel: 'Settings' }} />
     </Tab.Navigator>
   )
 }

app/screens/NowPlayingLayout.tsx

@@ -29,7 +29,6 @@ import dimensions from '@app/styles/dimensions'
 import { NativeStackScreenProps } from 'react-native-screens/native-stack'
 import { useFocusEffect } from '@react-navigation/native'
 
-// eslint-disable-next-line no-spaced-func
 const NowPlayingHeader = React.memo<{
   backHandler: () => void
 }>(({ backHandler }) => {

app/screens/ServerView.tsx

@@ -0,0 +1,201 @@
+import Button from '@app/components/Button'
+import GradientScrollView from '@app/components/GradientScrollView'
+import SettingsItem from '@app/components/SettingsItem'
+import { Server } from '@app/models/settings'
+import { activeServerAtom, serversAtom } from '@app/state/settings'
+import colors from '@app/styles/colors'
+import font from '@app/styles/font'
+import { useNavigation } from '@react-navigation/native'
+import { useAtom } from 'jotai'
+import md5 from 'md5'
+import React, { useCallback, useState } from 'react'
+import { StyleSheet, Text, TextInput, View } from 'react-native'
+import { Switch } from 'react-native-gesture-handler'
+import { v4 as uuidv4 } from 'uuid'
+
+function replaceIndex<T>(array: T[], index: number, replacement: T): T[] {
+  const start = array.slice(0, index)
+  const end = array.slice(index + 1)
+  return [...start, replacement, ...end]
+}
+
+const ServerView: React.FC<{
+  id?: string
+}> = ({ id }) => {
+  const navigation = useNavigation()
+  const [activeServer, setActiveServer] = useAtom(activeServerAtom)
+  const [servers, setServers] = useAtom(serversAtom)
+  const server = id ? servers.find(s => s.id === id) : undefined
+
+  const [address, setAddress] = useState(server?.address || '')
+  const [username, setUsername] = useState(server?.username || '')
+  const [password, setPassword] = useState(server?.token ? 'password' : '')
+
+  const validate = useCallback(() => {
+    return !!address && !!username && !!password
+  }, [address, username, password])
+
+  const canRemove = useCallback(() => {
+    return id && servers.length > 1 && activeServer?.id !== id
+  }, [id, servers, activeServer])
+
+  const exit = useCallback(() => {
+    if (navigation.canGoBack()) {
+      navigation.goBack()
+    } else {
+      navigation.navigate('main')
+    }
+  }, [navigation])
+
+  const save = () => {
+    if (!validate()) {
+      return
+    }
+
+    const salt = server?.salt || uuidv4()
+    let token: string
+    if (password === 'password' && server?.token) {
+      token = server.token
+    } else {
+      token = md5(password + salt)
+    }
+
+    const update: Server = {
+      id: server?.id || uuidv4(),
+      address,
+      username,
+      salt,
+      token,
+    }
+
+    if (server) {
+      setServers(
+        replaceIndex(
+          servers,
+          servers.findIndex(s => s.id === id),
+          update,
+        ),
+      )
+    } else {
+      setServers([...servers, update])
+    }
+
+    if (!activeServer) {
+      setActiveServer(update.id)
+    }
+
+    exit()
+  }
+
+  const remove = useCallback(() => {
+    if (!canRemove()) {
+      return
+    }
+
+    const update = [...servers]
+    update.splice(
+      update.findIndex(s => s.id === id),
+      1,
+    )
+
+    setServers(update)
+    exit()
+  }, [canRemove, exit, id, servers, setServers])
+
+  return (
+    <GradientScrollView style={styles.scroll} contentContainerStyle={styles.scrollContentContainer}>
+      <View style={styles.content}>
+        <Text style={styles.inputTitle}>Address</Text>
+        <TextInput
+          style={styles.input}
+          placeholderTextColor="grey"
+          selectionColor={colors.text.secondary}
+          textContentType="URL"
+          placeholder="Address"
+          value={address}
+          onChangeText={setAddress}
+        />
+        <Text style={styles.inputTitle}>Username</Text>
+        <TextInput
+          style={styles.input}
+          placeholderTextColor="grey"
+          selectionColor={colors.text.secondary}
+          textContentType="username"
+          autoCompleteType="username"
+          placeholder="Username"
+          value={username}
+          onChangeText={setUsername}
+        />
+        <Text style={styles.inputTitle}>Password</Text>
+        <TextInput
+          style={styles.input}
+          placeholderTextColor="grey"
+          selectionColor={colors.text.secondary}
+          textContentType="password"
+          autoCompleteType="password"
+          secureTextEntry={true}
+          placeholder="Password"
+          value={password}
+          onChangeText={setPassword}
+        />
+        <SettingsItem title="Scrobble" subtitle="Don't scrobble play history">
+          <Switch
+            trackColor={{
+              false: colors.accentLow,
+              true: colors.accent,
+            }}
+            thumbColor={colors.text.primary}
+            value={false}
+          />
+        </SettingsItem>
+        <Button
+          disabled={!validate()}
+          style={styles.button}
+          title="Test Connection"
+          buttonStyle="hollow"
+          onPress={() => {}}
+        />
+        <Button
+          style={[styles.button, styles.delete, { display: canRemove() ? 'flex' : 'none' }]}
+          title="Delete"
+          onPress={remove}
+        />
+        <Button disabled={!validate()} style={styles.button} title="Save" onPress={save} />
+      </View>
+    </GradientScrollView>
+  )
+}
+
+const styles = StyleSheet.create({
+  scroll: {
+    flex: 1,
+  },
+  scrollContentContainer: {
+    // paddingTop: StatusBar.currentHeight,
+  },
+  content: {
+    paddingHorizontal: 20,
+  },
+  inputTitle: {
+    fontFamily: font.semiBold,
+    fontSize: 16,
+    color: colors.text.primary,
+    marginTop: 10,
+  },
+  input: {
+    borderBottomWidth: 1.5,
+    borderColor: colors.text.primary,
+    fontFamily: font.regular,
+    fontSize: 16,
+    color: colors.text.primary,
+    marginBottom: 26,
+  },
+  button: {
+    marginTop: 16,
+  },
+  delete: {
+    backgroundColor: 'red',
+  },
+})
+
+export default ServerView

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 { useAtomValue } from 'jotai/utils'
-import React from 'react'
+import React, { useCallback } from 'react'
-import { Button, StyleSheet, Text, View } from 'react-native'
+import { StatusBar, StyleSheet, View } from 'react-native'
-import { v4 as uuidv4 } from 'uuid'
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
-import { appSettingsAtom } from '@app/state/settings'
-import { getAllKeys, multiRemove } from '@app/storage/asyncstorage'
 
-const TestControls = () => {
+const ServerItem = React.memo<{
+  server: Server
+}>(({ server }) => {
+  const [activeServer, setActiveServer] = useAtom(activeServerAtom)
   const navigation = useNavigation()
 
-  const removeAllKeys = async () => {
+  const setActive = useCallback(() => {
-    const allKeys = await getAllKeys()
+    if (activeServer?.id === server.id) {
-    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) {
       return
     }
-
+    setActiveServer(server.id)
-    const id = uuidv4()
+  }, [activeServer?.id, server.id, setActiveServer])
-    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,
-    })
-  }
 
   return (
-    <View>
+    <SettingsItem
-      <Button title="Add default server" onPress={bootstrapServer} />
+      title={server.address}
-      {appSettings.servers.map(s => (
+      subtitle={server.username}
-        <View key={s.id}>
+      onPress={() => navigation.navigate('server', { id: server.id })}>
-          <Text style={styles.text}>{s.address}</Text>
+      <PressableOpacity style={styles.serverActive} onPress={setActive}>
-          <Text style={styles.text}>{s.username}</Text>
+        {activeServer && activeServer.id === server.id ? (
-        </View>
+          <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

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 => {
+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)