add edit server string i18n

set add/edit header title with i18n
fix albums plural in artist view

android/app/src/main/assets/custom/i18n/en.json

@@ -92,6 +92,7 @@
             },
             "actions": {
                 "add": "Add Server",
+                "edit": "Edit Server",
                 "testConnection": "Test Connection",
                 "delete": "Delete",
                 "save": "Save"

app/navigation/BottomTabNavigator.tsx

@@ -117,7 +117,7 @@ const SearchTab = createTabStackNavigator(Search)
 
 type SettingsStackParamList = {
   main: undefined
-  server?: { id?: string }
+  server?: { id?: string; title?: string }
   web: { uri: string; title?: string }
 }
 
@@ -127,7 +127,9 @@ type ServerScreenProps = {
   route: ServerScreenRouteProp
   navigation: ServerScreenNavigationProp
 }
-const ServerScreen: React.FC<ServerScreenProps> = ({ route }) => <ServerView id={route.params?.id} />
+const ServerScreen: React.FC<ServerScreenProps> = ({ route }) => (
+  <ServerView id={route.params?.id} title={route.params?.title} />
+)
 
 type WebScreenNavigationProp = NativeStackNavigationProp<SettingsStackParamList, 'web'>
 type WebScreenRouteProp = RouteProp<SettingsStackParamList, 'web'>
@@ -149,7 +151,6 @@ const SettingsTab = () => {
         name="server"
         component={ServerScreen}
         options={{
-          title: 'Edit Server',
           headerStyle: styles.stackheaderStyle,
           headerHideShadow: true,
           headerTintColor: 'white',

app/screens/ArtistView.tsx

@@ -89,7 +89,7 @@ const ArtistAlbums = withSuspenseMemo<{
 
     return (
       <>
-        <Header>{t('name', { count: 1 })}</Header>
+        <Header>{t('name', { count: 2 })}</Header>
         <View style={styles.albums} onLayout={albumsLayout.onLayout}>
           {sortedAlbums.map(a => (
             <AlbumItem key={a.id} album={a} height={albumSize} width={albumSize} />

app/screens/ServerView.tsx

@@ -9,7 +9,7 @@ import font from '@app/styles/font'
 import toast from '@app/util/toast'
 import { useNavigation } from '@react-navigation/native'
 import md5 from 'md5'
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { StyleSheet, Text, TextInput, View, ViewStyle } from 'react-native'
 import uuid from 'react-native-uuid'
@@ -18,7 +18,8 @@ const PASSWORD_PLACEHOLDER = 'PASSWORD_PLACEHOLDER'
 
 const ServerView = withSuspense<{
   id?: string
-}>(({ id }) => {
+  title?: string
+}>(({ id, title }) => {
   const { t } = useTranslation('settings.servers')
   const navigation = useNavigation()
   const activeServerId = useStore(store => store.settings.activeServerId)
@@ -39,6 +40,10 @@ const ServerView = withSuspense<{
 
   const [testing, setTesting] = useState(false)
 
+  useEffect(() => {
+    navigation.setOptions({ title })
+  }, [navigation, title])
+
   const validate = useCallback(() => {
     return !!address && !!username && !!password
   }, [address, username, password])

app/screens/Settings.tsx

@@ -20,12 +20,13 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
 import { version } from '../../package.json'
 
-const ServerItem = React.memo<{
+const ServerItem = withSuspenseMemo<{
   server: Server
 }>(({ server }) => {
   const activeServerId = useStore(store => store.settings.activeServerId)
   const switchActiveServer = useSwitchActiveServer()
   const navigation = useNavigation()
+  const { t } = useTranslation('settings.servers.actions')
 
   const setActive = useCallback(() => {
     switchActiveServer(server.id)
@@ -35,7 +36,7 @@ const ServerItem = React.memo<{
     <SettingsItem
       title={server.address}
       subtitle={server.username}
-      onPress={() => navigation.navigate('server', { id: server.id })}>
+      onPress={() => navigation.navigate('server', { id: server.id, title: t('edit') })}>
       <PressableOpacity style={styles.serverActive} onPress={setActive}>
         {activeServerId === server.id ? (
           <Icon name="checkbox-marked-circle" size={30} color={colors.accent} />
@@ -219,7 +220,7 @@ const SettingsContent = withSuspenseMemo(() => {
       <Button
         style={styles.button}
         title={t('servers.actions.add')}
-        onPress={() => navigation.navigate('server')}
+        onPress={() => navigation.navigate('server', { title: t('servers.actions.add') })}
         buttonStyle="hollow"
       />
       <Header style={styles.header}>{t('network.name')}</Header>