Localization support (#99)

* basic i18n poc * translate home, filters, tabs support dot notation in backend for namespaces * i18n context menu, artist filters, list controls also nothings here fix backend not caching fallback * i18n queue, artist view, search/results * i18n settings and server view * Added translation using Weblate (Norwegian Bokmål) * Translated using Weblate (Norwegian Bokmål) Currently translated at 100.0% (6 of 6 strings) Translation: Subtracks/subtracks Translate-URL: https://hosted.weblate.org/projects/subtracks/subtracks/nb_NO/ * Update translation files Updated by "Cleanup translation files" hook in Weblate. Translation: Subtracks/subtracks Translate-URL: https://hosted.weblate.org/projects/subtracks/subtracks/ * Update translation files Updated by "Cleanup translation files" hook in Weblate. Translation: Subtracks/subtracks Translate-URL: https://hosted.weblate.org/projects/subtracks/subtracks/ * Update translation files Updated by "Cleanup translation files" hook in Weblate. Translation: Subtracks/subtracks Translate-URL: https://hosted.weblate.org/projects/subtracks/subtracks/ * fix url escaping * added some mostly naive text overflow fixes rewrote filter context menu as a slide in because the old one apparently can't handle dynamic width * Added translation using Weblate (French) * Translated using Weblate (French) Currently translated at 17.4% (11 of 63 strings) Translation: Subtracks/subtracks Translate-URL: https://hosted.weblate.org/projects/subtracks/subtracks/fr/ * Translated using Weblate (French) Currently translated at 19.0% (12 of 63 strings) Translation: Subtracks/subtracks Translate-URL: https://hosted.weblate.org/projects/subtracks/subtracks/fr/ * Translated using Weblate (French) Currently translated at 40.0% (26 of 65 strings) Translation: Subtracks/subtracks Translate-URL: https://hosted.weblate.org/projects/subtracks/subtracks/fr/ * add weblate and some pretty badges to readme * fix link * Translated using Weblate (French) Currently translated at 50.7% (33 of 65 strings) Translation: Subtracks/subtracks Translate-URL: https://hosted.weblate.org/projects/subtracks/subtracks/fr/ * Translated using Weblate (English) Currently translated at 100.0% (65 of 65 strings) Translation: Subtracks/subtracks Translate-URL: https://hosted.weblate.org/projects/subtracks/subtracks/en/ * Translated using Weblate (French) Currently translated at 90.7% (59 of 65 strings) Translation: Subtracks/subtracks Translate-URL: https://hosted.weblate.org/projects/subtracks/subtracks/fr/ * i18n now playing context type fix overscroll on new filter menu fix getting default namespace from the i18n backend * Translated using Weblate (French) Currently translated at 96.9% (63 of 65 strings) Translation: Subtracks/subtracks Translate-URL: https://hosted.weblate.org/projects/subtracks/subtracks/fr/ * Translated using Weblate (French) Currently translated at 100.0% (66 of 66 strings) Translation: Subtracks/subtracks Translate-URL: https://hosted.weblate.org/projects/subtracks/subtracks/fr/ * Translated using Weblate (Japanese) (#98) Currently translated at 7.5% (5 of 66 strings) Translation: Subtracks/subtracks Translate-URL: https://hosted.weblate.org/projects/subtracks/subtracks/ja/ Co-authored-by: Austin Riedhammer <austinried@functionkey.xyz> * little note to remind me why that's there * update licenses Co-authored-by: Allan Nordhøy <epost@anotheragency.no> Co-authored-by: Hosted Weblate <hosted@weblate.org> Co-authored-by: Clyhtsuriva <aimeric@adjutor.xyz>
2026-02-10 06:52:43 +01:00 · 2022-04-15 12:11:00 +09:00
parent 4905f75564
commit 860a4cec16
35 changed files with 1186 additions and 316 deletions
--- a/app/App.tsx
+++ b/app/App.tsx
@@ -2,12 +2,12 @@ import RootNavigator from '@app/navigation/RootNavigator'
 import SplashPage from '@app/screens/SplashPage'
 import colors from '@app/styles/colors'
 import React from 'react'
-import { StatusBar, View, StyleSheet } from 'react-native'
-import ProgressHook from './components/ProgressHook'
-import { useStore } from './state/store'
+import { StatusBar, StyleSheet, View } from 'react-native'
 import { MenuProvider } from 'react-native-popup-menu'
 import { QueryClientProvider } from 'react-query'
+import ProgressHook from './components/ProgressHook'
 import queryClient from './queryClient'
+import { useStore } from './state/store'

 const Debug = () => {
  const currentTrackTitle = useStore(store => store.currentTrack?.title)
--- a/app/components/Button.tsx
+++ b/app/components/Button.tsx
@@ -16,7 +16,13 @@ const Button: React.FC<{
      onPress={onPress}
      disabled={disabled}
      style={[styles.container, buttonStyle !== undefined ? styles[buttonStyle] : {}, style]}>
-      {title ? <Text style={styles.text}>{title}</Text> : children}
+      {title ? (
+        <Text style={styles.text} numberOfLines={2} adjustsFontSizeToFit={true}>
+          {title}
+        </Text>
+      ) : (
+        children
+      )}
    </PressableOpacity>
  )
 }
@@ -26,6 +32,7 @@ const styles = StyleSheet.create({
    backgroundColor: colors.accent,
    paddingHorizontal: 10,
    minHeight: 42,
+    maxHeight: 42,
    justifyContent: 'center',
    borderRadius: 1000,
  },
@@ -43,6 +50,7 @@ const styles = StyleSheet.create({
    fontFamily: font.bold,
    color: colors.text.primary,
    paddingHorizontal: 14,
+    textAlign: 'center',
  },
 })

--- a/app/components/ContextMenu.tsx
+++ b/app/components/ContextMenu.tsx
@@ -6,12 +6,14 @@ import font from '@app/styles/font'
 import { NavigationProp, useNavigation } from '@react-navigation/native'
 import { ReactComponentLike } from 'prop-types'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { ScrollView, StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native'
 import { Menu, MenuOption, MenuOptions, MenuTrigger, renderers } from 'react-native-popup-menu'
 import IconFA from 'react-native-vector-icons/FontAwesome'
 import IconFA5 from 'react-native-vector-icons/FontAwesome5'
 import CoverArt from './CoverArt'
 import { Star } from './Star'
+import { withSuspenseMemo } from './withSuspense'

 const { SlideInMenu } = renderers

@@ -106,7 +108,9 @@ const ContextMenuIconTextOption = React.memo<ContextMenuIconTextOptionProps>(
    return (
      <ContextMenuOption onSelect={onSelect}>
        <View style={styles.icon}>{Icon}</View>
-        <Text style={styles.optionText}>{text}</Text>
+        <Text style={styles.optionText} numberOfLines={1} adjustsFontSizeToFit={true} minimumFontScale={0.6}>
+          {text}
+        </Text>
      </ContextMenuOption>
    )
  },
@@ -154,27 +158,30 @@ const MenuHeader = React.memo<{
  </View>
 ))

-const OptionStar = React.memo<{
+const OptionStar = withSuspenseMemo<{
  id: string
  type: StarrableItemType
  additionalText?: string
 }>(({ id, type, additionalText: text }) => {
  const { query, toggle } = useStar(id, type)
+  const { t } = useTranslation('context.actions')

  return (
    <ContextMenuIconTextOption
      IconComponentRaw={<Star starred={!!query.data} size={26} />}
-      text={(query.data ? 'Unstar' : 'Star') + (text ? ` ${text}` : '')}
+      text={(query.data ? t('unstar') : t('star')) + (text ? ` ${text}` : '')}
      onSelect={() => toggle.mutate()}
    />
  )
 })

-const OptionViewArtist = React.memo<{
+const OptionViewArtist = withSuspenseMemo<{
  navigation: NavigationProp<any>
  artist?: string
  artistId?: string
 }>(({ navigation, artist, artistId }) => {
+  const { t } = useTranslation('resources.artist.actions')
+
  if (!artist || !artistId) {
    return <></>
  }
@@ -184,17 +191,19 @@ const OptionViewArtist = React.memo<{
      IconComponent={IconFA}
      name="microphone"
      size={26}
-      text="View Artist"
+      text={t('view')}
      onSelect={() => navigation.navigate('artist', { id: artistId, title: artist })}
    />
  )
 })

-const OptionViewAlbum = React.memo<{
+const OptionViewAlbum = withSuspenseMemo<{
  navigation: NavigationProp<any>
  album?: string
  albumId?: string
 }>(({ navigation, album, albumId }) => {
+  const { t } = useTranslation('resources.album.actions')
+
  if (!album || !albumId) {
    return <></>
  }
@@ -204,7 +213,7 @@ const OptionViewAlbum = React.memo<{
      IconComponent={IconFA5}
      name="compact-disc"
      size={26}
-      text="View Album"
+      text={t('view')}
      onSelect={() => navigation.navigate('album', { id: albumId, title: album })}
    />
  )
@@ -318,6 +327,8 @@ const styles = StyleSheet.create({
  },
  optionsWrapper: {
    // marginBottom: 10,
+    paddingHorizontal: 20,
+    // backgroundColor: 'purple',
  },
  menuHeader: {
    paddingTop: 14,
@@ -348,9 +359,11 @@ const styles = StyleSheet.create({
  },
  option: {
    paddingVertical: 8,
-    paddingHorizontal: 20,
+    // paddingHorizontal: 100,
    flexDirection: 'row',
    alignItems: 'center',
+    // backgroundColor: 'blue',
+    overflow: 'hidden',
  },
  icon: {
    marginRight: 10,
--- a/app/components/FilterButton.tsx
+++ b/app/components/FilterButton.tsx
@@ -1,10 +1,13 @@
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import React from 'react'
-import { Text, StyleSheet } from 'react-native'
-import { MenuOption, Menu, MenuTrigger, MenuOptions } from 'react-native-popup-menu'
+import { Text, StyleSheet, View } from 'react-native'
+import { MenuOption, Menu, MenuTrigger, MenuOptions, renderers } from 'react-native-popup-menu'
 import PressableOpacity from './PressableOpacity'
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
+import { ScrollView } from 'react-native-gesture-handler'
+
+const { SlideInMenu } = renderers

 export type OptionData = {
  value: string
@@ -17,12 +20,14 @@ const Option = React.memo<{
  selected?: boolean
 }>(({ text, value, selected }) => (
  <MenuOption style={styles.option} value={value}>
-    <Text style={styles.optionText}>{text}</Text>
    {selected ? (
-      <Icon name="checkbox-marked-circle" size={26} color={colors.accent} />
+      <Icon name="checkbox-marked-circle" size={32} color={colors.accent} style={styles.icon} />
    ) : (
-      <Icon name="checkbox-blank-circle-outline" size={26} color={colors.text.secondary} />
+      <Icon name="checkbox-blank-circle-outline" size={32} color={colors.text.secondary} style={styles.icon} />
    )}
+    <Text style={styles.optionText} numberOfLines={1} adjustsFontSizeToFit={true} minimumFontScale={0.6}>
+      {text}
+    </Text>
  </MenuOption>
 ))

@@ -30,9 +35,10 @@ const FilterButton = React.memo<{
  value?: string
  data: OptionData[]
  onSelect?: (selection: string) => void
-}>(({ value, data, onSelect }) => {
+  title: string
+}>(({ value, data, onSelect, title }) => {
  return (
-    <Menu onSelect={onSelect}>
+    <Menu onSelect={onSelect} renderer={SlideInMenu}>
      <MenuTrigger
        customStyles={{
          triggerOuterWrapper: styles.filterOuterWrapper,
@@ -40,16 +46,23 @@ const FilterButton = React.memo<{
          triggerTouchable: { style: styles.filter },
          TriggerTouchableComponent: PressableOpacity,
        }}>
-        <Icon name="filter-variant" color="white" size={30} style={styles.filterIcon} />
+        <Icon name="filter-variant" color="white" size={30} />
      </MenuTrigger>
      <MenuOptions
        customStyles={{
          optionsWrapper: styles.optionsWrapper,
          optionsContainer: styles.optionsContainer,
        }}>
-        {data.map(o => (
-          <Option key={o.value} text={o.text} value={o.value} selected={o.value === value} />
-        ))}
+        <ScrollView style={styles.optionsScroll} overScrollMode="never">
+          <View style={styles.header}>
+            <Text style={styles.headerText} numberOfLines={2} ellipsizeMode="clip">
+              {title}
+            </Text>
+          </View>
+          {data.map(o => (
+            <Option key={o.value} text={o.text} value={o.value} selected={o.value === value} />
+          ))}
+        </ScrollView>
      </MenuOptions>
    </Menu>
  )
@@ -71,28 +84,45 @@ const styles = StyleSheet.create({
    alignItems: 'center',
    backgroundColor: colors.accent,
  },
-  filterIcon: {
-    // top: 4,
+  optionsScroll: {
+    maxHeight: 260,
  },
  optionsWrapper: {
-    maxWidth: 145,
+    overflow: 'hidden',
  },
  optionsContainer: {
-    backgroundColor: colors.gradient.high,
-    maxWidth: 145,
+    backgroundColor: 'rgba(45, 45, 45, 0.95)',
+  },
+  header: {
+    paddingHorizontal: 20,
+    // paddingVertical: 10,
+    marginTop: 16,
+    marginBottom: 6,
+  },
+  headerText: {
+    fontFamily: font.bold,
+    fontSize: 20,
+    color: colors.text.primary,
  },
  option: {
-    flexDirection: 'row',
-    paddingHorizontal: 12,
    paddingVertical: 8,
-    justifyContent: 'center',
+    paddingHorizontal: 20,
+    flexDirection: 'row',
    alignItems: 'center',
+    justifyContent: 'flex-start',
  },
  optionText: {
-    color: colors.text.primary,
    fontFamily: font.semiBold,
    fontSize: 16,
-    flex: 1,
+    color: colors.text.primary,
+  },
+  icon: {
+    marginRight: 14,
+    width: 32,
+    height: 32,
+    justifyContent: 'center',
+    alignItems: 'center',
+    // backgroundColor: 'red',
  },
 })

--- a/app/components/ListPlayerControls.tsx
+++ b/app/components/ListPlayerControls.tsx
@@ -2,19 +2,22 @@ import Button from '@app/components/Button'
 import { Song } from '@app/models/library'
 import colors from '@app/styles/colors'
 import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
 import Icon from 'react-native-vector-icons/Ionicons'
 import IconMat from 'react-native-vector-icons/MaterialIcons'
+import { withSuspenseMemo } from './withSuspense'

-const ListPlayerControls = React.memo<{
+const ListPlayerControls = withSuspenseMemo<{
  songs: Song[]
-  typeName: string
+  listType: 'album' | 'playlist'
  style?: StyleProp<ViewStyle>
  play: () => void
  shuffle: () => void
  disabled?: boolean
-}>(({ typeName, style, play, shuffle, disabled }) => {
+}>(({ listType, style, play, shuffle, disabled }) => {
  const [downloaded, setDownloaded] = useState(false)
+  const { t } = useTranslation('resources')

  return (
    <View style={[styles.controls, style]}>
@@ -31,7 +34,7 @@ const ListPlayerControls = React.memo<{
        </Button>
      </View>
      <View style={styles.controlsCenter}>
-        <Button title={`Play ${typeName}`} disabled={disabled} onPress={play} />
+        <Button title={t(`${listType}.actions.play`)} disabled={disabled} onPress={play} />
      </View>
      <View style={styles.controlsSide}>
        <Button disabled={disabled} onPress={shuffle}>
@@ -55,6 +58,7 @@ const styles = StyleSheet.create({
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
+    maxWidth: '65%',
  },
 })

--- a/app/components/NothingHere.tsx
+++ b/app/components/NothingHere.tsx
@@ -1,20 +1,25 @@
 import font from '@app/styles/font'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { Text, View, StyleSheet, ViewStyle } from 'react-native'
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
+import { withSuspenseMemo } from './withSuspense'

-const NothingHere = React.memo<{
+const NothingHere = withSuspenseMemo<{
  height?: number
  width?: number
  style?: ViewStyle
 }>(({ height, width, style }) => {
+  const { t } = useTranslation('messages')
  height = height || 200
  width = width || 200

  return (
    <View style={[styles.container, { height, width }, style]}>
      <Icon name="music-rest-quarter" color={styles.text.color} size={width / 2} />
-      <Text style={[styles.text, { fontSize: width / 8 }]}>Nothing here...</Text>
+      <Text style={[styles.text, { fontSize: width / 8 }]} numberOfLines={3}>
+        {t('nothingHere')}
+      </Text>
    </View>
  )
 })
--- a/app/components/withSuspense.tsx
+++ b/app/components/withSuspense.tsx
@@ -0,0 +1,32 @@
+import React, { ComponentType, FunctionComponent, Suspense, SuspenseProps } from 'react'
+
+export function withSuspense<P extends string | number | object>(
+  WrappedComponent: ComponentType<P>,
+  fallback: SuspenseProps['fallback'] = null,
+): FunctionComponent<P> {
+  function ComponentWithSuspense(props: P) {
+    return (
+      <Suspense fallback={fallback}>
+        <WrappedComponent {...props} />
+      </Suspense>
+    )
+  }
+
+  return ComponentWithSuspense
+}
+
+export function withSuspenseMemo<P extends string | number | object>(
+  WrappedComponent: ComponentType<P>,
+  fallback: SuspenseProps['fallback'] = null,
+  propsAreEqual?: Parameters<typeof React.memo>['1'],
+) {
+  function ComponentWithSuspense(props: P) {
+    return (
+      <Suspense fallback={fallback}>
+        <WrappedComponent {...props} />
+      </Suspense>
+    )
+  }
+
+  return React.memo(ComponentWithSuspense, propsAreEqual)
+}
--- a/app/i18n.ts
+++ b/app/i18n.ts
@@ -0,0 +1,64 @@
+import { BackendModule, LanguageDetectorAsyncModule } from 'i18next'
+import path from 'path'
+import RNFS from 'react-native-fs'
+import * as RNLocalize from 'react-native-localize'
+import _ from 'lodash'
+
+const I18N_ASSETS_DIR = path.join('custom', 'i18n')
+
+const cache: {
+  [language: string]: {
+    [key: string]: any
+  }
+} = {}
+
+async function loadTranslation(language: string) {
+  const text = await RNFS.readFileAssets(path.join(I18N_ASSETS_DIR, `${language}.json`), 'utf8')
+  return JSON.parse(text)
+}
+
+async function readTranslation(language: string, namespace: string) {
+  if (!cache[language]) {
+    cache[language] = await loadTranslation(language)
+  }
+
+  return namespace === 'translation' ? cache[language] : _.get(cache[language], namespace)
+}
+
+export const backend = {
+  type: 'backend',
+  init: () => {},
+  read: async (language, namespace, callback) => {
+    try {
+      callback(null, await readTranslation(language, namespace))
+    } catch (err) {
+      callback(err as any, null)
+    }
+  },
+} as BackendModule
+
+export const languageDetector = {
+  type: 'languageDetector',
+  async: true,
+  detect: async callback => {
+    try {
+      const languageTags = (await RNFS.readDirAssets(I18N_ASSETS_DIR))
+        .map(f => f.name)
+        .filter(n => n.endsWith('.json'))
+        .map(n => n.slice(0, -5))
+
+      console.log('translations available:', languageTags)
+      console.log(
+        'locales list:',
+        RNLocalize.getLocales().map(l => l.languageTag),
+      )
+      console.log('best language:', RNLocalize.findBestAvailableLanguage(languageTags)?.languageTag)
+
+      callback(RNLocalize.findBestAvailableLanguage(languageTags)?.languageTag)
+    } catch {
+      callback(undefined)
+    }
+  },
+  init: () => {},
+  cacheUserLanguage: () => {},
+} as LanguageDetectorAsyncModule
--- a/app/navigation/BottomTabBar.tsx
+++ b/app/navigation/BottomTabBar.tsx
@@ -47,7 +47,9 @@ const BottomTabButton = React.memo<{
  return (
    <PressableOpacity onPress={onPress} style={styles.button} disabled={disabled}>
      <Image source={imgSource} style={imgStyle} fadeDuration={0} />
-      <Text style={textStyle}>{label}</Text>
+      <Text style={textStyle} numberOfLines={1} ellipsizeMode="clip">
+        {label}
+      </Text>
    </PressableOpacity>
  )
 })
@@ -92,6 +94,7 @@ const styles = StyleSheet.create({
  },
  button: {
    alignItems: 'center',
+    flexGrow: 1,
    flex: 1,
    height: '100%',
  },
--- a/app/navigation/BottomTabNavigator.tsx
+++ b/app/navigation/BottomTabNavigator.tsx
@@ -1,3 +1,4 @@
+import { withSuspense } from '@app/components/withSuspense'
 import { useFirstRun } from '@app/hooks/settings'
 import { Album, Playlist } from '@app/models/library'
 import BottomTabBar from '@app/navigation/BottomTabBar'
@@ -16,6 +17,7 @@ import font from '@app/styles/font'
 import { BottomTabNavigationProp, createBottomTabNavigator } from '@react-navigation/bottom-tabs'
 import { RouteProp, StackActions } from '@react-navigation/native'
 import React, { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
 import { StyleSheet } from 'react-native'
 import { createNativeStackNavigator, NativeStackNavigationProp } from 'react-native-screens/native-stack'

@@ -116,7 +118,7 @@ const SearchTab = createTabStackNavigator(Search)
 type SettingsStackParamList = {
  main: undefined
  server?: { id?: string }
-  web: { uri: string }
+  web: { uri: string; title?: string }
 }

 type ServerScreenNavigationProp = NativeStackNavigationProp<SettingsStackParamList, 'server'>
@@ -133,7 +135,9 @@ type WebScreenProps = {
  route: WebScreenRouteProp
  navigation: WebScreenNavigationProp
 }
-const WebScreen: React.FC<WebScreenProps> = ({ route }) => <WebViewScreen uri={route.params.uri} />
+const WebScreen: React.FC<WebScreenProps> = ({ route }) => (
+  <WebViewScreen uri={route.params.uri} title={route.params.title} />
+)

 const SettingsStack = createNativeStackNavigator()

@@ -156,7 +160,6 @@ const SettingsTab = () => {
        name="web"
        component={WebScreen}
        options={{
-          title: 'Web View',
          headerStyle: styles.stackheaderStyle,
          headerHideShadow: true,
          headerTintColor: 'white',
@@ -169,7 +172,8 @@ const SettingsTab = () => {

 const Tab = createBottomTabNavigator()

-const BottomTabNavigator = () => {
+const BottomTabNavigator = withSuspense(() => {
+  const { t } = useTranslation('navigation.tabs')
  const firstRun = useFirstRun()
  const resetServer = useStore(store => store.resetServer)

@@ -179,14 +183,14 @@ 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="home" component={HomeTab} options={{ tabBarLabel: t('home') }} />
+          <Tab.Screen name="library" component={LibraryTab} options={{ tabBarLabel: t('library') }} />
+          <Tab.Screen name="search" component={SearchTab} options={{ tabBarLabel: t('search') }} />
        </>
      )}
-      <Tab.Screen name="settings" component={SettingsTab} options={{ tabBarLabel: 'Settings' }} />
+      <Tab.Screen name="settings" component={SettingsTab} options={{ tabBarLabel: t('settings') }} />
    </Tab.Navigator>
  )
-}
+})

 export default BottomTabNavigator
--- a/app/navigation/LibraryTopTabNavigator.tsx
+++ b/app/navigation/LibraryTopTabNavigator.tsx
@@ -1,3 +1,4 @@
+import { withSuspense } from '@app/components/withSuspense'
 import AlbumsTab from '@app/screens/LibraryAlbums'
 import ArtistsTab from '@app/screens/LibraryArtists'
 import PlaylistsTab from '@app/screens/LibraryPlaylists'
@@ -6,12 +7,14 @@ import dimensions from '@app/styles/dimensions'
 import font from '@app/styles/font'
 import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { StyleSheet } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'

 const Tab = createMaterialTopTabNavigator()

-const LibraryTopTabNavigator = () => {
+const LibraryTopTabNavigator = withSuspense(() => {
+  const { t } = useTranslation('resources')
  const marginTop = useSafeAreaInsets().top

  return (
@@ -22,12 +25,16 @@ const LibraryTopTabNavigator = () => {
        indicatorStyle: styles.tabindicatorStyle,
      }}
      initialRouteName="albums">
-      <Tab.Screen name="albums" component={AlbumsTab} options={{ tabBarLabel: 'Albums' }} />
-      <Tab.Screen name="artists" component={ArtistsTab} options={{ tabBarLabel: 'Artists' }} />
-      <Tab.Screen name="playlists" component={PlaylistsTab} options={{ tabBarLabel: 'Playlists' }} />
+      <Tab.Screen name="albums" component={AlbumsTab} options={{ tabBarLabel: t('album.name', { count: 2 }) }} />
+      <Tab.Screen name="artists" component={ArtistsTab} options={{ tabBarLabel: t('artist.name', { count: 2 }) }} />
+      <Tab.Screen
+        name="playlists"
+        component={PlaylistsTab}
+        options={{ tabBarLabel: t('playlist.name', { count: 2 }) }}
+      />
    </Tab.Navigator>
  )
-}
+})

 const styles = StyleSheet.create({
  tabBar: {
--- a/app/navigation/RootNavigator.tsx
+++ b/app/navigation/RootNavigator.tsx
@@ -1,3 +1,4 @@
+import { withSuspense } from '@app/components/withSuspense'
 import BottomTabNavigator from '@app/navigation/BottomTabNavigator'
 import NowPlayingQueue from '@app/screens/NowPlayingQueue'
 import NowPlayingView from '@app/screens/NowPlayingView'
@@ -5,32 +6,37 @@ import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import { DarkTheme, NavigationContainer } from '@react-navigation/native'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { createNativeStackNavigator } from 'react-native-screens/native-stack'

 const NowPlayingStack = createNativeStackNavigator()

-const NowPlayingNavigator = () => (
-  <NowPlayingStack.Navigator>
-    <NowPlayingStack.Screen name="main" component={NowPlayingView} options={{ headerShown: false }} />
-    <NowPlayingStack.Screen
-      name="queue"
-      component={NowPlayingQueue}
-      options={{
-        title: 'Queue',
-        headerStyle: {
-          backgroundColor: colors.gradient.high,
-        },
-        headerTitleStyle: {
-          fontSize: 18,
-          fontFamily: font.semiBold,
-          color: colors.text.primary,
-        },
-        headerHideShadow: true,
-        headerTintColor: 'white',
-      }}
-    />
-  </NowPlayingStack.Navigator>
-)
+const NowPlayingNavigator = withSuspense(() => {
+  const { t } = useTranslation('resources.queue')
+
+  return (
+    <NowPlayingStack.Navigator>
+      <NowPlayingStack.Screen name="main" component={NowPlayingView} options={{ headerShown: false }} />
+      <NowPlayingStack.Screen
+        name="queue"
+        component={NowPlayingQueue}
+        options={{
+          title: t('name'),
+          headerStyle: {
+            backgroundColor: colors.gradient.high,
+          },
+          headerTitleStyle: {
+            fontSize: 18,
+            fontFamily: font.semiBold,
+            color: colors.text.primary,
+          },
+          headerHideShadow: true,
+          headerTintColor: 'white',
+        }}
+      />
+    </NowPlayingStack.Navigator>
+  )
+})

 const RootStack = createNativeStackNavigator()

--- a/app/screens/ArtistView.tsx
+++ b/app/screens/ArtistView.tsx
@@ -5,6 +5,7 @@ import GradientScrollView from '@app/components/GradientScrollView'
 import Header from '@app/components/Header'
 import HeaderBar from '@app/components/HeaderBar'
 import ListItem from '@app/components/ListItem'
+import { withSuspenseMemo } from '@app/components/withSuspense'
 import { useQueryArtist, useQueryArtistTopSongs } from '@app/hooks/query'
 import { useSetQueue } from '@app/hooks/trackplayer'
 import { Album, Song } from '@app/models/library'
@@ -15,6 +16,7 @@ import { useLayout } from '@react-native-community/hooks'
 import { useNavigation } from '@react-navigation/native'
 import equal from 'fast-deep-equal/es6/react'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
 import { useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated'

@@ -42,53 +44,63 @@ const AlbumItem = React.memo<{
  )
 }, equal)

-const TopSongs = React.memo<{
+const TopSongs = withSuspenseMemo<{
  songs: Song[]
  name: string
-}>(({ songs, name }) => {
-  const { setQueue, isReady, contextId } = useSetQueue('artist', songs)
+}>(
+  ({ songs, name }) => {
+    const { setQueue, isReady, contextId } = useSetQueue('artist', songs)
+    const { t } = useTranslation('resources.song.lists')

-  return (
-    <>
-      <Header>Top Songs</Header>
-      {songs.slice(0, 5).map((s, i) => (
-        <ListItem
-          key={i}
-          item={s}
-          contextId={contextId}
-          queueId={i}
-          showArt={true}
-          subtitle={s.album}
-          onPress={() => setQueue({ title: name, playTrack: i })}
-          disabled={!isReady}
-        />
-      ))}
-    </>
-  )
-}, equal)
-
-const ArtistAlbums = React.memo<{
-  albums: Album[]
-}>(({ albums }) => {
-  const albumsLayout = useLayout()
-
-  const sortedAlbums = [...albums]
-    .sort((a, b) => a.name.localeCompare(b.name))
-    .sort((a, b) => (b.year || 0) - (a.year || 0))
-
-  const albumSize = albumsLayout.width / 2 - styles.contentContainer.paddingHorizontal / 2
-
-  return (
-    <>
-      <Header>Albums</Header>
-      <View style={styles.albums} onLayout={albumsLayout.onLayout}>
-        {sortedAlbums.map(a => (
-          <AlbumItem key={a.id} album={a} height={albumSize} width={albumSize} />
+    return (
+      <>
+        <Header>{t('artistTopSongs')}</Header>
+        {songs.slice(0, 5).map((s, i) => (
+          <ListItem
+            key={i}
+            item={s}
+            contextId={contextId}
+            queueId={i}
+            showArt={true}
+            subtitle={s.album}
+            onPress={() => setQueue({ title: name, playTrack: i })}
+            disabled={!isReady}
+          />
        ))}
-      </View>
-    </>
-  )
-}, equal)
+      </>
+    )
+  },
+  null,
+  equal,
+)
+
+const ArtistAlbums = withSuspenseMemo<{
+  albums: Album[]
+}>(
+  ({ albums }) => {
+    const albumsLayout = useLayout()
+    const { t } = useTranslation('resources.album')
+
+    const sortedAlbums = [...albums]
+      .sort((a, b) => a.name.localeCompare(b.name))
+      .sort((a, b) => (b.year || 0) - (a.year || 0))
+
+    const albumSize = albumsLayout.width / 2 - styles.contentContainer.paddingHorizontal / 2
+
+    return (
+      <>
+        <Header>{t('name', { count: 1 })}</Header>
+        <View style={styles.albums} onLayout={albumsLayout.onLayout}>
+          {sortedAlbums.map(a => (
+            <AlbumItem key={a.id} album={a} height={albumSize} width={albumSize} />
+          ))}
+        </View>
+      </>
+    )
+  },
+  null,
+  equal,
+)

 const ArtistViewFallback = React.memo(() => (
  <GradientBackground style={styles.fallback}>
--- a/app/screens/Home.tsx
+++ b/app/screens/Home.tsx
@@ -3,25 +3,20 @@ import CoverArt from '@app/components/CoverArt'
 import GradientScrollView from '@app/components/GradientScrollView'
 import Header from '@app/components/Header'
 import NothingHere from '@app/components/NothingHere'
+import { withSuspenseMemo } from '@app/components/withSuspense'
 import { useQueryHomeLists } from '@app/hooks/query'
 import { Album } from '@app/models/library'
 import { useStoreDeep } from '@app/state/store'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
-import { GetAlbumList2TypeBase, GetAlbumListType } from '@app/subsonic/params'
+import { GetAlbumList2TypeBase } from '@app/subsonic/params'
 import { useNavigation } from '@react-navigation/native'
 import equal from 'fast-deep-equal/es6/react'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { RefreshControl, ScrollView, StyleSheet, Text, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'

-const titles: { [key in GetAlbumListType]?: string } = {
-  recent: 'Recently Played',
-  random: 'Random Albums',
-  frequent: 'Frequently Played',
-  starred: 'Starred Albums',
-}
-
 const AlbumItem = React.memo<{
  album: Album
 }>(({ album }) => {
@@ -49,6 +44,12 @@ const AlbumItem = React.memo<{
  )
 }, equal)

+const CategoryHeader = withSuspenseMemo<{ type: string }>(({ type }) => {
+  const { t } = useTranslation('resources.album.lists')
+  console.log('type', type, t(type))
+  return <Header style={styles.header}>{t(type)}</Header>
+})
+
 const Category = React.memo<{
  type: string
  albums: Album[]
@@ -74,7 +75,7 @@ const Category = React.memo<{

  return (
    <View style={styles.category}>
-      <Header style={styles.header}>{titles[type as GetAlbumListType] || ''}</Header>
+      <CategoryHeader type={type} />
      {albums.length > 0 ? <Albums /> : <Nothing />}
    </View>
  )
--- a/app/screens/LibraryAlbums.tsx
+++ b/app/screens/LibraryAlbums.tsx
@@ -1,16 +1,18 @@
 import { AlbumContextPressable } from '@app/components/ContextMenu'
 import CoverArt from '@app/components/CoverArt'
-import FilterButton, { OptionData } from '@app/components/FilterButton'
+import FilterButton from '@app/components/FilterButton'
 import GradientFlatList from '@app/components/GradientFlatList'
+import { withSuspenseMemo } from '@app/components/withSuspense'
 import { useQueryAlbumList } from '@app/hooks/query'
 import { Album } from '@app/models/library'
 import { useStore, useStoreDeep } from '@app/state/store'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
-import { GetAlbumList2Type, GetAlbumList2TypeBase } from '@app/subsonic/params'
+import { GetAlbumList2TypeBase } from '@app/subsonic/params'
 import { useNavigation } from '@react-navigation/native'
 import equal from 'fast-deep-equal/es6/react'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { StyleSheet, Text, useWindowDimensions, View } from 'react-native'

 const AlbumItem = React.memo<{
@@ -53,23 +55,36 @@ const AlbumListRenderItem: React.FC<{
  item: { album: Album; size: number; height: number }
 }> = ({ item }) => <AlbumItem album={item.album} size={item.size} height={item.height} />

-const filterOptions: OptionData[] = [
-  { text: 'By Name', value: 'alphabeticalByName' },
-  { text: 'By Artist', value: 'alphabeticalByArtist' },
-  { text: 'Newest', value: 'newest' },
-  { text: 'Frequent', value: 'frequent' },
-  { text: 'Recent', value: 'recent' },
-  { text: 'Starred', value: 'starred' },
-  { text: 'Random', value: 'random' },
-  // { text: 'By Year...', value: 'byYear' },
-  // { text: 'By Genre...', value: 'byGenre' },
+const filterValues: GetAlbumList2TypeBase[] = [
+  'alphabeticalByName', //
+  'alphabeticalByArtist',
+  'newest',
+  'frequent',
+  'recent',
+  'starred',
+  'random',
 ]

-const AlbumsList = () => {
-  const filter = useStoreDeep(store => store.settings.screens.library.albumsFilter)
-  const setFilter = useStore(store => store.setLibraryAlbumFilter)
+const AlbumFilterButton = withSuspenseMemo(() => {
+  const { t } = useTranslation('resources.album.lists')
+  const filterType = useStoreDeep(store => store.settings.screens.library.albumsFilter.type)
+  const setFilterType = useStore(store => store.setLibraryAlbumFilterType)

-  const { isLoading, data, fetchNextPage, refetch } = useQueryAlbumList(filter.type as GetAlbumList2TypeBase, 300)
+  return (
+    <FilterButton
+      data={filterValues.map(value => ({ value, text: t(value) }))}
+      value={filterType}
+      onSelect={selection => {
+        setFilterType(selection as GetAlbumList2TypeBase)
+      }}
+      title={t('sort')}
+    />
+  )
+})
+
+const AlbumsList = () => {
+  const filterType = useStoreDeep(store => store.settings.screens.library.albumsFilter.type)
+  const { isLoading, data, fetchNextPage, refetch } = useQueryAlbumList(filterType as GetAlbumList2TypeBase, 300)

  const layout = useWindowDimensions()

@@ -91,16 +106,7 @@ const AlbumsList = () => {
        onEndReachedThreshold={6}
        windowSize={5}
      />
-      <FilterButton
-        data={filterOptions}
-        value={filter.type}
-        onSelect={selection => {
-          setFilter({
-            ...filter,
-            type: selection as GetAlbumList2Type,
-          })
-        }}
-      />
+      <AlbumFilterButton />
    </View>
  )
 }
--- a/app/screens/LibraryArtists.tsx
+++ b/app/screens/LibraryArtists.tsx
@@ -1,26 +1,42 @@
-import FilterButton, { OptionData } from '@app/components/FilterButton'
+import FilterButton from '@app/components/FilterButton'
 import GradientFlatList from '@app/components/GradientFlatList'
 import ListItem from '@app/components/ListItem'
+import { withSuspenseMemo } from '@app/components/withSuspense'
 import { useQueryArtists } from '@app/hooks/query'
 import { Artist } from '@app/models/library'
 import { ArtistFilterType } from '@app/models/settings'
 import { useStore, useStoreDeep } from '@app/state/store'
 import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { StyleSheet, View } from 'react-native'

 const ArtistRenderItem: React.FC<{ item: Artist }> = ({ item }) => (
  <ListItem item={item} showArt={true} showStar={false} listStyle="big" style={styles.listItem} />
 )

-const filterOptions: OptionData[] = [
-  { text: 'By Name', value: 'alphabeticalByName' },
-  { text: 'Starred', value: 'starred' },
-  { text: 'Random', value: 'random' },
+const filterValues: ArtistFilterType[] = [
+  'alphabeticalByName', //
+  'starred',
+  'random',
 ]

+const ArtistFilterButton = withSuspenseMemo(() => {
+  const { t } = useTranslation('resources.artist.lists')
+  const filterType = useStoreDeep(store => store.settings.screens.library.artistsFilter.type)
+  const setFilterType = useStore(store => store.setLibraryArtistFilterType)
+
+  return (
+    <FilterButton
+      data={filterValues.map(value => ({ value, text: t(value) }))}
+      value={filterType}
+      onSelect={selection => setFilterType(selection as ArtistFilterType)}
+      title={t('sort')}
+    />
+  )
+})
+
 const ArtistsList = () => {
-  const filter = useStoreDeep(store => store.settings.screens.library.artistsFilter)
-  const setFilter = useStore(store => store.setLibraryArtistFiler)
+  const filterType = useStore(store => store.settings.screens.library.artistsFilter.type)

  const { isLoading, data, refetch } = useQueryArtists()
  const [sortedList, setSortedList] = useState<Artist[]>([])
@@ -32,7 +48,7 @@ const ArtistsList = () => {
    }

    const list = Object.values(data.byId)
-    switch (filter.type) {
+    switch (filterType) {
      case 'random':
        setSortedList([...list].sort(() => Math.random() - 0.5))
        break
@@ -46,7 +62,7 @@ const ArtistsList = () => {
        setSortedList([...list])
        break
    }
-  }, [filter.type, data])
+  }, [filterType, data])

  return (
    <View style={styles.container}>
@@ -60,16 +76,7 @@ const ArtistsList = () => {
        windowSize={3}
        contentMarginTop={6}
      />
-      <FilterButton
-        data={filterOptions}
-        value={filter.type}
-        onSelect={selection => {
-          setFilter({
-            ...filter,
-            type: selection as ArtistFilterType,
-          })
-        }}
-      />
+      <ArtistFilterButton />
    </View>
  )
 }
--- a/app/screens/NowPlayingView.tsx
+++ b/app/screens/NowPlayingView.tsx
@@ -3,9 +3,10 @@ import HeaderBar from '@app/components/HeaderBar'
 import ImageGradientBackground from '@app/components/ImageGradientBackground'
 import PressableOpacity from '@app/components/PressableOpacity'
 import { PressableStar } from '@app/components/Star'
+import { withSuspenseMemo } from '@app/components/withSuspense'
 import { useNext, usePause, usePlay, usePrevious, useSeekTo } from '@app/hooks/trackplayer'
 import { mapTrackExtToSong } from '@app/models/map'
-import { QueueContextType, TrackExt } from '@app/models/trackplayer'
+import { TrackExt } from '@app/models/trackplayer'
 import { useStore, useStoreDeep } from '@app/state/store'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
@@ -13,6 +14,7 @@ import formatDuration from '@app/util/formatDuration'
 import Slider from '@react-native-community/slider'
 import { useNavigation } from '@react-navigation/native'
 import React, { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { ActivityIndicator, StyleSheet, Text, TextStyle, View } from 'react-native'
 import { NativeStackScreenProps } from 'react-native-screens/native-stack'
 import { RepeatMode, State } from 'react-native-track-player'
@@ -21,32 +23,27 @@ import IconFA5 from 'react-native-vector-icons/FontAwesome5'
 import Icon from 'react-native-vector-icons/Ionicons'
 import IconMatCom from 'react-native-vector-icons/MaterialCommunityIcons'

-function getContextName(type?: QueueContextType) {
-  switch (type) {
-    case 'album':
-      return 'Album'
-    case 'artist':
-      return 'Top Songs'
-    case 'playlist':
-      return 'Playlist'
-    case 'song':
-      return 'Search Results'
-    default:
-      return undefined
-  }
-}
-
-const NowPlayingHeader = React.memo<{
+const NowPlayingHeader = withSuspenseMemo<{
  track?: TrackExt
 }>(({ track }) => {
  const queueName = useStore(store => store.queueName)
  const queueContextType = useStore(store => store.queueContextType)
+  const { t } = useTranslation()

  if (!track) {
    return <></>
  }

-  let contextName = getContextName(queueContextType)
+  let contextName: string
+  if (queueContextType === 'album') {
+    contextName = t('resources.album.name')
+  } else if (queueContextType === 'artist') {
+    contextName = t('resources.song.lists.artistTopSongs')
+  } else if (queueContextType === 'playlist') {
+    contextName = t('resources.playlist.name')
+  } else if (queueContextType === 'song') {
+    contextName = t('search.nowPlayingContext')
+  }

  return (
    <HeaderBar
--- a/app/screens/Search.tsx
+++ b/app/screens/Search.tsx
@@ -4,6 +4,7 @@ import Header from '@app/components/Header'
 import ListItem from '@app/components/ListItem'
 import NothingHere from '@app/components/NothingHere'
 import TextInput from '@app/components/TextInput'
+import { withSuspense, withSuspenseMemo } from '@app/components/withSuspense'
 import { useQuerySearchResults } from '@app/hooks/query'
 import { useSetQueue } from '@app/hooks/trackplayer'
 import { Album, Artist, SearchResults, Song } from '@app/models/library'
@@ -13,6 +14,7 @@ import { useFocusEffect, useNavigation } from '@react-navigation/native'
 import equal from 'fast-deep-equal/es6/react'
 import _ from 'lodash'
 import React, { useCallback, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import {
  ActivityIndicator,
  InteractionManager,
@@ -39,56 +41,68 @@ const SongItem = React.memo<{ item: Song }>(({ item }) => {
  )
 }, equal)

-const ResultsCategory = React.memo<{
+const ResultsCategory = withSuspenseMemo<{
  name: string
  query: string
  items: (Artist | Album | Song)[]
  type: 'artist' | 'album' | 'song'
-}>(({ name, query, type, items }) => {
-  const navigation = useNavigation()
+}>(
+  ({ name, query, type, items }) => {
+    const navigation = useNavigation()
+    const { t } = useTranslation('search')

-  if (items.length === 0) {
-    return <></>
-  }
+    if (items.length === 0) {
+      return <></>
+    }

-  return (
-    <>
-      <Header>{name}</Header>
-      {items.map(a =>
-        type === 'song' ? (
-          <SongItem key={a.id} item={a as Song} />
-        ) : (
-          <ListItem key={a.id} item={a} showArt={true} showStar={false} />
-        ),
-      )}
-      {items.length === 5 && (
-        <Button
-          title="More..."
-          buttonStyle="hollow"
-          style={styles.more}
-          onPress={() => navigation.navigate('results', { query, type: items[0].itemType })}
-        />
-      )}
-    </>
-  )
-}, equal)
+    return (
+      <>
+        <Header>{name}</Header>
+        {items.map(a =>
+          type === 'song' ? (
+            <SongItem key={a.id} item={a as Song} />
+          ) : (
+            <ListItem key={a.id} item={a} showArt={true} showStar={false} />
+          ),
+        )}
+        {items.length === 5 && (
+          <Button
+            title={t('moreResults')}
+            buttonStyle="hollow"
+            style={styles.more}
+            onPress={() => navigation.navigate('results', { query, type: items[0].itemType })}
+          />
+        )}
+      </>
+    )
+  },
+  null,
+  equal,
+)

-const Results = React.memo<{
+const Results = withSuspenseMemo<{
  results: SearchResults
  query: string
-}>(({ results, query }) => {
-  return (
-    <>
-      <ResultsCategory name="Artists" query={query} type={'artist'} items={results.artists} />
-      <ResultsCategory name="Albums" query={query} type={'album'} items={results.albums} />
-      <ResultsCategory name="Songs" query={query} type={'song'} items={results.songs} />
-    </>
-  )
-}, equal)
+}>(
+  ({ results, query }) => {
+    const { t } = useTranslation('resources')

-const Search = () => {
+    return (
+      <>
+        <ResultsCategory name={t('artist.name', { count: 2 })} query={query} type={'artist'} items={results.artists} />
+        <ResultsCategory name={t('album.name', { count: 2 })} query={query} type={'album'} items={results.albums} />
+        <ResultsCategory name={t('song.name', { count: 2 })} query={query} type={'song'} items={results.songs} />
+      </>
+    )
+  },
+  null,
+  equal,
+)
+
+const Search = withSuspense(() => {
  const [query, setQuery] = useState('')
  const { data, isLoading } = useQuerySearchResults({ query, albumCount: 5, artistCount: 5, songCount: 5 })
+  const { t } = useTranslation('search')

  const [text, setText] = useState('')
  const searchBarRef = useRef<ReactTextInput>(null)
@@ -140,7 +154,7 @@ const Search = () => {
          <TextInput
            ref={searchBarRef}
            style={styles.textInput}
-            placeholder="Search"
+            placeholder={t('inputPlaceholder')}
            value={text}
            onChangeText={onChangeText}
          />
@@ -154,7 +168,7 @@ const Search = () => {
      </View>
    </GradientScrollView>
  )
-}
+})

 const styles = StyleSheet.create({
  scroll: {
--- a/app/screens/SearchResultsView.tsx
+++ b/app/screens/SearchResultsView.tsx
@@ -1,11 +1,13 @@
 import GradientFlatList from '@app/components/GradientFlatList'
 import ListItem from '@app/components/ListItem'
+import { withSuspense } from '@app/components/withSuspense'
 import { useQuerySearchResults } from '@app/hooks/query'
 import { useSetQueue } from '@app/hooks/trackplayer'
 import { Album, Artist, Song } from '@app/models/library'
 import { Search3Params } from '@app/subsonic/params'
 import { useNavigation } from '@react-navigation/native'
 import React, { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
 import { StyleSheet } from 'react-native'

 type SearchListItemType = Album | Song | Artist
@@ -52,11 +54,12 @@ const ResultsListItem: React.FC<{ item: SearchListItemType }> = ({ item }) => {

 const SearchResultsRenderItem: React.FC<{ item: SearchListItemType }> = ({ item }) => <ResultsListItem item={item} />

-const SearchResultsView: React.FC<{
+const SearchResultsView = withSuspense<{
  query: string
  type: 'album' | 'artist' | 'song'
-}> = ({ query, type }) => {
+}>(({ query, type }) => {
  const navigation = useNavigation()
+  const { t } = useTranslation('search')

  const size = 100
  const params: Search3Params = { query }
@@ -82,7 +85,7 @@ const SearchResultsView: React.FC<{

  useEffect(() => {
    navigation.setOptions({
-      title: `Search: "${query}"`,
+      title: t('headerTitle', { query }),
    })
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
@@ -102,7 +105,7 @@ const SearchResultsView: React.FC<{
      windowSize={5}
    />
  )
-}
+})

 const styles = StyleSheet.create({
  listItem: {
--- a/app/screens/ServerView.tsx
+++ b/app/screens/ServerView.tsx
@@ -1,5 +1,7 @@
 import Button from '@app/components/Button'
 import GradientScrollView from '@app/components/GradientScrollView'
+import SettingsSwitch from '@app/components/SettingsSwitch'
+import { withSuspense } from '@app/components/withSuspense'
 import { Server } from '@app/models/settings'
 import { useStore, useStoreDeep } from '@app/state/store'
 import colors from '@app/styles/colors'
@@ -8,15 +10,16 @@ import toast from '@app/util/toast'
 import { useNavigation } from '@react-navigation/native'
 import md5 from 'md5'
 import React, { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { StyleSheet, Text, TextInput, View, ViewStyle } from 'react-native'
 import uuid from 'react-native-uuid'
-import SettingsSwitch from '@app/components/SettingsSwitch'

 const PASSWORD_PLACEHOLDER = 'PASSWORD_PLACEHOLDER'

-const ServerView: React.FC<{
+const ServerView = withSuspense<{
  id?: string
-}> = ({ id }) => {
+}>(({ id }) => {
+  const { t } = useTranslation('settings.servers')
  const navigation = useNavigation()
  const activeServerId = useStore(store => store.settings.activeServerId)
  const servers = useStoreDeep(store => store.settings.servers)
@@ -134,15 +137,16 @@ const ServerView: React.FC<{

    const ping = async () => {
      const res = await pingServer(potential)
-      if (res) {
-        toast(`Connection to ${potential.address} OK!`)
-      } else {
-        toast(`Connection to ${potential.address} failed, check settings or server`)
-      }
+      toast(
+        t(`messages.${res ? 'connectionOk' : 'connectionFailed'}`, {
+          address: potential.address,
+          interpolation: { escapeValue: false },
+        }),
+      )
      setTesting(false)
    }
    ping()
-  }, [createServer, pingServer])
+  }, [createServer, pingServer, t])

  const disableControls = useCallback(() => {
    return !validate() || testing
@@ -169,7 +173,7 @@ const ServerView: React.FC<{
  return (
    <GradientScrollView style={styles.scroll}>
      <View style={styles.content}>
-        <Text style={styles.inputTitle}>Address</Text>
+        <Text style={styles.inputTitle}>{t('fields.address')}</Text>
        <TextInput
          style={styles.input}
          placeholderTextColor="grey"
@@ -182,7 +186,7 @@ const ServerView: React.FC<{
          onChangeText={setAddress}
          onBlur={formatAddress}
        />
-        <Text style={styles.inputTitle}>Username</Text>
+        <Text style={styles.inputTitle}>{t('fields.username')}</Text>
        <TextInput
          style={styles.input}
          placeholderTextColor="grey"
@@ -195,7 +199,7 @@ const ServerView: React.FC<{
          value={username}
          onChangeText={setUsername}
        />
-        <Text style={styles.inputTitle}>Password</Text>
+        <Text style={styles.inputTitle}>{t('fields.password')}</Text>
        <TextInput
          style={styles.input}
          placeholderTextColor="grey"
@@ -210,11 +214,11 @@ const ServerView: React.FC<{
          onChangeText={setPassword}
        />
        <SettingsSwitch
-          title="Force plain text password"
+          title={t('options.forcePlaintextPassword.title')}
          subtitle={
            usePlainPassword
-              ? 'Send password in plain text (legacy, make sure your connection is secure!)'
-              : 'Send password as token + salt'
+              ? t('options.forcePlaintextPassword.descriptionOn')
+              : t('options.forcePlaintextPassword.descriptionOff')
          }
          value={usePlainPassword}
          setValue={togglePlainPassword}
@@ -222,21 +226,21 @@ const ServerView: React.FC<{
        <Button
          disabled={disableControls()}
          style={styles.button}
-          title="Test Connection"
+          title={t('actions.testConnection')}
          buttonStyle="hollow"
          onPress={test}
        />
        <Button
          disabled={disableControls()}
          style={[styles.button, styles.delete, deleteStyle]}
-          title="Delete"
+          title={t('actions.delete')}
          onPress={remove}
        />
-        <Button disabled={disableControls()} style={styles.button} title="Save" onPress={save} />
+        <Button disabled={disableControls()} style={styles.button} title={t('actions.save')} onPress={save} />
      </View>
    </GradientScrollView>
  )
-}
+})

 const styles = StyleSheet.create({
  scroll: {
--- a/app/screens/Settings.tsx
+++ b/app/screens/Settings.tsx
@@ -5,13 +5,15 @@ import PressableOpacity from '@app/components/PressableOpacity'
 import SettingsItem from '@app/components/SettingsItem'
 import SettingsSwitch from '@app/components/SettingsSwitch'
 import TextInput from '@app/components/TextInput'
-import { useSwitchActiveServer, useResetImageCache } from '@app/hooks/settings'
+import { withSuspenseMemo } from '@app/components/withSuspense'
+import { useResetImageCache, useSwitchActiveServer } from '@app/hooks/settings'
 import { Server } from '@app/models/settings'
 import { useStore, useStoreDeep } from '@app/state/store'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import { useNavigation } from '@react-navigation/core'
 import React, { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { KeyboardTypeOptions, Linking, Modal, Pressable, StyleSheet, Text, View } from 'react-native'
 import { ScrollView } from 'react-native-gesture-handler'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
@@ -73,25 +75,23 @@ const ModalChoice = React.memo<{
  )
 })

-function bitrateString(bitrate: number): string {
-  return bitrate === 0 ? 'Unlimited' : `${bitrate}kbps`
-}
-
-const BitrateModal = React.memo<{
+const BitrateModal = withSuspenseMemo<{
  title: string
  bitrate: number
  setBitrate: (bitrate: number) => void
 }>(({ title, bitrate, setBitrate }) => {
+  const { t } = useTranslation('settings.network.values')
  const [visible, setVisible] = useState(false)

  const toggleModal = useCallback(() => setVisible(!visible), [visible])

+  const bitrateText = useCallback((value: number) => (value === 0 ? t('unlimitedKbps') : t('kbps', { value })), [t])
+
  const BitrateChoice: React.FC<{ value: number }> = useCallback(
    ({ value }) => {
-      const text = bitrateString(value)
      return (
        <ModalChoice
-          text={text}
+          text={bitrateText(value)}
          value={value}
          setValue={setBitrate}
          closeModal={toggleModal}
@@ -99,12 +99,12 @@ const BitrateModal = React.memo<{
        />
      )
    },
-    [bitrate, toggleModal, setBitrate],
+    [bitrate, toggleModal, setBitrate, bitrateText],
  )

  return (
    <>
-      <SettingsItem title={title} subtitle={bitrateString(bitrate)} onPress={toggleModal} />
+      <SettingsItem title={title} subtitle={bitrateText(bitrate)} onPress={toggleModal} />
      <Modal animationType="fade" transparent={true} visible={visible} onRequestClose={toggleModal}>
        <Pressable style={styles.modalBackdrop} onPress={toggleModal}>
          <View style={styles.centeredView}>
@@ -135,9 +135,9 @@ const SettingsTextModal = React.memo<{
  title: string
  value: string
  setValue: (text: string) => void
-  getUnit?: (text: string) => string
+  subtitle: (value: string) => string
  keyboardType?: KeyboardTypeOptions
-}>(({ title, value, setValue, getUnit, keyboardType }) => {
+}>(({ title, value, setValue, subtitle, keyboardType }) => {
  const [visible, setVisible] = useState(false)
  const [inputText, setInputText] = useState(value)

@@ -148,16 +148,9 @@ const SettingsTextModal = React.memo<{
    toggleModal()
  }, [inputText, setValue, toggleModal])

-  const getSubtitle = useCallback(() => {
-    if (!getUnit) {
-      return value
-    }
-    return value + ' ' + getUnit(value)
-  }, [getUnit, value])
-
  return (
    <>
-      <SettingsItem title={title} subtitle={getSubtitle()} onPress={toggleModal} />
+      <SettingsItem title={title} subtitle={subtitle(value)} onPress={toggleModal} />
      <Modal animationType="fade" transparent={true} visible={visible} onRequestClose={toggleModal}>
        <Pressable style={styles.modalBackdrop} onPress={toggleModal}>
          <View style={styles.centeredView}>
@@ -183,15 +176,9 @@ const SettingsTextModal = React.memo<{
  )
 })

-function secondsUnit(seconds: string): string {
-  const numberValue = parseFloat(seconds)
-  if (Math.abs(numberValue) !== 1) {
-    return 'seconds'
-  }
-  return 'second'
-}
+const SettingsContent = withSuspenseMemo(() => {
+  const { t } = useTranslation('settings')

-const SettingsContent = React.memo(() => {
  const servers = useStoreDeep(store => store.settings.servers)
  const scrobble = useStore(store => store.settings.scrobble)
  const setScrobble = useStore(store => store.setScrobble)
@@ -221,66 +208,78 @@ const SettingsContent = React.memo(() => {
  const setMinBufferText = useCallback((text: string) => setMinBuffer(parseFloat(text)), [setMinBuffer])
  const setMaxBufferText = useCallback((text: string) => setMaxBuffer(parseFloat(text)), [setMaxBuffer])

+  const secondsText = useCallback((value: string) => t('network.values.seconds', { value }), [t])
+
  return (
    <View style={styles.content}>
-      <Header>Servers</Header>
+      <Header>{t('servers.name')}</Header>
      {Object.values(servers).map(s => (
        <ServerItem key={s.id} server={s} />
      ))}
      <Button
        style={styles.button}
-        title="Add Server"
+        title={t('servers.actions.add')}
        onPress={() => navigation.navigate('server')}
        buttonStyle="hollow"
      />
-      <Header style={styles.header}>Network</Header>
-      <BitrateModal title="Maximum bitrate (Wi-Fi)" bitrate={maxBitrateWifi} setBitrate={setMaxBitrateWifi} />
-      <BitrateModal title="Maximum bitrate (mobile)" bitrate={maxBitrateMobile} setBitrate={setMaxBitrateMobile} />
+      <Header style={styles.header}>{t('network.name')}</Header>
+      <BitrateModal
+        title={t('network.options.maxBitrateWifi.title')}
+        bitrate={maxBitrateWifi}
+        setBitrate={setMaxBitrateWifi}
+      />
+      <BitrateModal
+        title={t('network.options.maxBitrateMobile.title')}
+        bitrate={maxBitrateMobile}
+        setBitrate={setMaxBitrateMobile}
+      />
      <SettingsTextModal
-        title="Minimum buffer time"
+        title={t('network.options.minBuffer.title')}
        value={minBuffer.toString()}
        setValue={setMinBufferText}
-        getUnit={secondsUnit}
+        subtitle={secondsText}
        keyboardType="numeric"
      />
      <SettingsTextModal
-        title="Maximum buffer time"
+        title={t('network.options.maxBuffer.title')}
        value={maxBuffer.toString()}
        setValue={setMaxBufferText}
-        getUnit={secondsUnit}
+        subtitle={secondsText}
        keyboardType="numeric"
      />
-      <Header style={styles.header}>Music</Header>
+      <Header style={styles.header}>{t('music.name')}</Header>
      <SettingsSwitch
-        title="Scrobble plays"
-        subtitle={scrobble ? 'Scrobble play history' : "Don't scrobble play history"}
+        title={t('music.options.scrobble.title')}
+        subtitle={scrobble ? t('music.options.scrobble.descriptionOn') : t('music.options.scrobble.descriptionOff')}
        value={scrobble}
        setValue={setScrobble}
      />
-      <Header style={styles.header}>Reset</Header>
+      <Header style={styles.header}>{t('reset.name')}</Header>
      <Button
        disabled={clearing}
        style={styles.button}
-        title="Clear Image Cache"
+        title={t('reset.actions.clearImageCache')}
        onPress={clear}
        buttonStyle="hollow"
      />
-      <Header style={styles.header}>About</Header>
+      <Header style={styles.header}>{t('about.name')}</Header>
      <Text style={styles.text}>
-        <Text style={styles.bold}>Subtracks</Text> version {version}
+        <Text style={styles.bold}>Subtracks</Text> {t('about.version', { version })}
      </Text>
      <Button
        disabled={clearing}
        style={styles.button}
-        title="Project Homepage"
+        title={t('about.actions.projectHomepage')}
        onPress={() => Linking.openURL('https://github.com/austinried/subtracks')}
        buttonStyle="hollow"
      />
      <Button
        disabled={clearing}
        style={styles.button}
-        title="Licenses"
-        onPress={() => navigation.navigate('web', { uri: 'file:///android_asset/licenses.html' })}
+        title={t('about.actions.licenses')}
+        onPress={() =>
+          navigation.navigate('web', { uri: 'file:///android_asset/licenses.html', title: t('about.actions.licenses') })
+        }
        buttonStyle="hollow"
      />
    </View>
--- a/app/screens/SongListView.tsx
+++ b/app/screens/SongListView.tsx
@@ -56,10 +56,8 @@ const SongListDetails = React.memo<{
  const [headerColor, setHeaderColor] = useState<string | undefined>(undefined)

  const _songs = [...(songs || [])]
-  let typeName = ''

  if (type === 'album') {
-    typeName = 'Album'
    if (_songs.some(s => s.track === undefined)) {
      _songs.sort((a, b) => a.title.localeCompare(b.title))
    } else {
@@ -69,8 +67,6 @@ const SongListDetails = React.memo<{
        return aVal - bVal
      })
    }
-  } else {
-    typeName = 'Playlist'
  }

  const { setQueue, isReady, contextId } = useSetQueue(type, _songs)
@@ -125,7 +121,7 @@ const SongListDetails = React.memo<{
            <ListPlayerControls
              style={styles.controls}
              songs={_songs}
-              typeName={typeName}
+              listType={type}
              play={play(undefined, false)}
              shuffle={play(undefined, true)}
              disabled={disabled}
--- a/app/screens/WebViewScreen.tsx
+++ b/app/screens/WebViewScreen.tsx
@@ -1,9 +1,17 @@
-import React from 'react'
+import { useNavigation } from '@react-navigation/native'
+import React, { useEffect } from 'react'
 import { WebView } from 'react-native-webview'

 const WebViewScreen: React.FC<{
  uri: string
-}> = ({ uri }) => {
+  title?: string
+}> = ({ uri, title }) => {
+  const navigation = useNavigation()
+
+  useEffect(() => {
+    navigation.setOptions({ title })
+  }, [navigation, title])
+
  return <WebView source={{ uri }} />
 }

--- a/app/state/settings.ts
+++ b/app/state/settings.ts
@@ -1,7 +1,8 @@
-import { AlbumFilterSettings, ArtistFilterSettings, Server } from '@app/models/settings'
+import { AlbumFilterSettings, ArtistFilterSettings, ArtistFilterType, Server } from '@app/models/settings'
 import { ById } from '@app/models/state'
 import { GetStore, SetStore } from '@app/state/store'
 import { SubsonicApiClient } from '@app/subsonic/api'
+import { GetAlbumList2TypeBase } from '@app/subsonic/params'
 import uuid from 'react-native-uuid'

 export type SettingsSlice = {
@@ -43,8 +44,8 @@ export type SettingsSlice = {

  pingServer: (server?: Server) => Promise<boolean>

-  setLibraryAlbumFilter: (filter: AlbumFilterSettings) => void
-  setLibraryArtistFiler: (filter: ArtistFilterSettings) => void
+  setLibraryAlbumFilterType: (type: GetAlbumList2TypeBase) => void
+  setLibraryArtistFilterType: (type: ArtistFilterType) => void
 }

 export function newCacheBuster(): string {
@@ -216,15 +217,15 @@ export const createSettingsSlice = (set: SetStore, get: GetStore): SettingsSlice
    }
  },

-  setLibraryAlbumFilter: filter => {
+  setLibraryAlbumFilterType: type => {
    set(state => {
-      state.settings.screens.library.albumsFilter = filter
+      state.settings.screens.library.albumsFilter.type = type
    })
  },

-  setLibraryArtistFiler: filter => {
+  setLibraryArtistFilterType: type => {
    set(state => {
-      state.settings.screens.library.artistsFilter = filter
+      state.settings.screens.library.artistsFilter.type = type
    })
  },
 })