don't use i18n namespaces

there's no need to keep reloading different parts of the object we already cached

app/components/ContextMenu.tsx

@@ -164,12 +164,12 @@ const OptionStar = withSuspenseMemo<{
   additionalText?: string
 }>(({ id, type, additionalText: text }) => {
   const { query, toggle } = useStar(id, type)
-  const { t } = useTranslation('context.actions')
+  const { t } = useTranslation()
 
   return (
     <ContextMenuIconTextOption
       IconComponentRaw={<Star starred={!!query.data} size={26} />}
-      text={(query.data ? t('unstar') : t('star')) + (text ? ` ${text}` : '')}
+      text={(query.data ? t('unstar') : t('context.actions.star')) + (text ? ` ${text}` : '')}
       onSelect={() => toggle.mutate()}
     />
   )
@@ -180,7 +180,7 @@ const OptionViewArtist = withSuspenseMemo<{
   artist?: string
   artistId?: string
 }>(({ navigation, artist, artistId }) => {
-  const { t } = useTranslation('resources.artist.actions')
+  const { t } = useTranslation()
 
   if (!artist || !artistId) {
     return <></>
@@ -192,7 +192,7 @@ const OptionViewArtist = withSuspenseMemo<{
       name="microphone"
       size={26}
       text={t('view')}
-      onSelect={() => navigation.navigate('artist', { id: artistId, title: artist })}
+      onSelect={() => navigation.navigate('resources.artist.actions.artist', { id: artistId, title: artist })}
     />
   )
 })
@@ -202,7 +202,7 @@ const OptionViewAlbum = withSuspenseMemo<{
   album?: string
   albumId?: string
 }>(({ navigation, album, albumId }) => {
-  const { t } = useTranslation('resources.album.actions')
+  const { t } = useTranslation()
 
   if (!album || !albumId) {
     return <></>
@@ -214,7 +214,7 @@ const OptionViewAlbum = withSuspenseMemo<{
       name="compact-disc"
       size={26}
       text={t('view')}
-      onSelect={() => navigation.navigate('album', { id: albumId, title: album })}
+      onSelect={() => navigation.navigate('resources.album.actions.album', { id: albumId, title: album })}
     />
   )
 })

app/components/ListPlayerControls.tsx

@@ -17,7 +17,7 @@ const ListPlayerControls = withSuspenseMemo<{
   disabled?: boolean
 }>(({ listType, style, play, shuffle, disabled }) => {
   const [downloaded, setDownloaded] = useState(false)
-  const { t } = useTranslation('resources')
+  const { t } = useTranslation()
 
   return (
     <View style={[styles.controls, style]}>
@@ -34,7 +34,7 @@ const ListPlayerControls = withSuspenseMemo<{
         </Button>
       </View>
       <View style={styles.controlsCenter}>
-        <Button title={t(`${listType}.actions.play`)} disabled={disabled} onPress={play} />
+        <Button title={t(`resources.${listType}.actions.play`)} disabled={disabled} onPress={play} />
       </View>
       <View style={styles.controlsSide}>
         <Button disabled={disabled} onPress={shuffle}>

app/components/NothingHere.tsx

@@ -10,7 +10,7 @@ const NothingHere = withSuspenseMemo<{
   width?: number
   style?: ViewStyle
 }>(({ height, width, style }) => {
-  const { t } = useTranslation('messages')
+  const { t } = useTranslation()
   height = height || 200
   width = width || 200
 
@@ -18,7 +18,7 @@ const NothingHere = withSuspenseMemo<{
     <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 }]} numberOfLines={3}>
-        {t('nothingHere')}
+        {t('messages.nothingHere')}
       </Text>
     </View>
   )

app/navigation/BottomTabNavigator.tsx

@@ -174,7 +174,7 @@ const SettingsTab = () => {
 const Tab = createBottomTabNavigator()
 
 const BottomTabNavigator = withSuspense(() => {
-  const { t } = useTranslation('navigation.tabs')
+  const { t } = useTranslation()
   const firstRun = useFirstRun()
   const resetServer = useStore(store => store.resetServer)
 
@@ -184,12 +184,12 @@ const BottomTabNavigator = withSuspense(() => {
         <></>
       ) : (
         <>
-          <Tab.Screen name="home" component={HomeTab} options={{ tabBarLabel: t('home') }} />
+          <Tab.Screen name="home" component={HomeTab} options={{ tabBarLabel: t('navigation.tabs.home') }} />
-          <Tab.Screen name="library" component={LibraryTab} options={{ tabBarLabel: t('library') }} />
+          <Tab.Screen name="library" component={LibraryTab} options={{ tabBarLabel: t('navigation.tabs.library') }} />
-          <Tab.Screen name="search" component={SearchTab} options={{ tabBarLabel: t('search') }} />
+          <Tab.Screen name="search" component={SearchTab} options={{ tabBarLabel: t('navigation.tabs.search') }} />
         </>
       )}
-      <Tab.Screen name="settings" component={SettingsTab} options={{ tabBarLabel: t('settings') }} />
+      <Tab.Screen name="settings" component={SettingsTab} options={{ tabBarLabel: t('navigation.tabs.settings') }} />
     </Tab.Navigator>
   )
 })

app/navigation/LibraryTopTabNavigator.tsx

@@ -14,9 +14,11 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'
 const Tab = createMaterialTopTabNavigator()
 
 const LibraryTopTabNavigator = withSuspense(() => {
-  const { t } = useTranslation('resources')
+  const { t } = useTranslation()
   const marginTop = useSafeAreaInsets().top
 
+  console.log('Albums:', t('resources.album.name', { count: 2 }))
+
   return (
     <Tab.Navigator
       tabBarOptions={{
@@ -25,12 +27,20 @@ const LibraryTopTabNavigator = withSuspense(() => {
         indicatorStyle: styles.tabindicatorStyle,
       }}
       initialRouteName="albums">
-      <Tab.Screen name="albums" component={AlbumsTab} options={{ tabBarLabel: t('album.name', { count: 2 }) }} />
+      <Tab.Screen
-      <Tab.Screen name="artists" component={ArtistsTab} options={{ tabBarLabel: t('artist.name', { count: 2 }) }} />
+        name="albums"
+        component={AlbumsTab}
+        options={{ tabBarLabel: t('resources.album.name', { count: 2 }) }}
+      />
+      <Tab.Screen
+        name="artists"
+        component={ArtistsTab}
+        options={{ tabBarLabel: t('resources.artist.name', { count: 2 }) }}
+      />
       <Tab.Screen
         name="playlists"
         component={PlaylistsTab}
-        options={{ tabBarLabel: t('playlist.name', { count: 2 }) }}
+        options={{ tabBarLabel: t('resources.playlist.name', { count: 2 }) }}
       />
     </Tab.Navigator>
   )

app/navigation/RootNavigator.tsx

@@ -12,7 +12,7 @@ import { createNativeStackNavigator } from 'react-native-screens/native-stack'
 const NowPlayingStack = createNativeStackNavigator()
 
 const NowPlayingNavigator = withSuspense(() => {
-  const { t } = useTranslation('resources.queue')
+  const { t } = useTranslation()
 
   return (
     <NowPlayingStack.Navigator>
@@ -21,7 +21,7 @@ const NowPlayingNavigator = withSuspense(() => {
         name="queue"
         component={NowPlayingQueue}
         options={{
-          title: t('name'),
+          title: t('resources.queue.name'),
           headerStyle: {
             backgroundColor: colors.gradient.high,
           },

app/screens/ArtistView.tsx

@@ -50,11 +50,11 @@ const TopSongs = withSuspenseMemo<{
 }>(
   ({ songs, name }) => {
     const { setQueue, isReady, contextId } = useSetQueue('artist', songs)
-    const { t } = useTranslation('resources.song.lists')
+    const { t } = useTranslation()
 
     return (
       <>
-        <Header>{t('artistTopSongs')}</Header>
+        <Header>{t('resources.song.lists.artistTopSongs')}</Header>
         {songs.slice(0, 5).map((s, i) => (
           <ListItem
             key={i}
@@ -79,7 +79,7 @@ const ArtistAlbums = withSuspenseMemo<{
 }>(
   ({ albums }) => {
     const albumsLayout = useLayout()
-    const { t } = useTranslation('resources.album')
+    const { t } = useTranslation()
 
     const sortedAlbums = [...albums]
       .sort((a, b) => a.name.localeCompare(b.name))
@@ -89,7 +89,7 @@ const ArtistAlbums = withSuspenseMemo<{
 
     return (
       <>
-        <Header>{t('name', { count: 2 })}</Header>
+        <Header>{t('resources.album.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/Home.tsx

@@ -45,9 +45,9 @@ const AlbumItem = React.memo<{
 }, equal)
 
 const CategoryHeader = withSuspenseMemo<{ type: string }>(({ type }) => {
-  const { t } = useTranslation('resources.album.lists')
+  const { t } = useTranslation()
-  console.log('type', type, t(type))
+  console.log('type', type, t(`resources.album.lists.${type}`))
-  return <Header style={styles.header}>{t(type)}</Header>
+  return <Header style={styles.header}>{t(`resources.album.lists.${type}`)}</Header>
 })
 
 const Category = React.memo<{

app/screens/LibraryAlbums.tsx

@@ -66,18 +66,18 @@ const filterValues: GetAlbumList2TypeBase[] = [
 ]
 
 const AlbumFilterButton = withSuspenseMemo(() => {
-  const { t } = useTranslation('resources.album.lists')
+  const { t } = useTranslation()
   const filterType = useStoreDeep(store => store.settings.screens.library.albumsFilter.type)
   const setFilterType = useStore(store => store.setLibraryAlbumFilterType)
 
   return (
     <FilterButton
-      data={filterValues.map(value => ({ value, text: t(value) }))}
+      data={filterValues.map(value => ({ value, text: t(`resources.album.lists.${value}`) }))}
       value={filterType}
       onSelect={selection => {
         setFilterType(selection as GetAlbumList2TypeBase)
       }}
-      title={t('sort')}
+      title={t('resources.album.lists.sort')}
     />
   )
 })

app/screens/LibraryArtists.tsx

@@ -21,16 +21,16 @@ const filterValues: ArtistFilterType[] = [
 ]
 
 const ArtistFilterButton = withSuspenseMemo(() => {
-  const { t } = useTranslation('resources.artist.lists')
+  const { t } = useTranslation()
   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) }))}
+      data={filterValues.map(value => ({ value, text: t(`resources.artist.lists.${value}`) }))}
       value={filterType}
       onSelect={selection => setFilterType(selection as ArtistFilterType)}
-      title={t('sort')}
+      title={t('resources.artist.lists.sort')}
     />
   )
 })

app/screens/Search.tsx

@@ -49,7 +49,7 @@ const ResultsCategory = withSuspenseMemo<{
 }>(
   ({ name, query, type, items }) => {
     const navigation = useNavigation()
-    const { t } = useTranslation('search')
+    const { t } = useTranslation()
 
     if (items.length === 0) {
       return <></>
@@ -67,7 +67,7 @@ const ResultsCategory = withSuspenseMemo<{
         )}
         {items.length === 5 && (
           <Button
-            title={t('moreResults')}
+            title={t('search.moreResults')}
             buttonStyle="hollow"
             style={styles.more}
             onPress={() => navigation.navigate('results', { query, type: items[0].itemType })}
@@ -85,13 +85,28 @@ const Results = withSuspenseMemo<{
   query: string
 }>(
   ({ results, query }) => {
-    const { t } = useTranslation('resources')
+    const { t } = useTranslation()
 
     return (
       <>
-        <ResultsCategory name={t('artist.name', { count: 2 })} query={query} type={'artist'} items={results.artists} />
+        <ResultsCategory
-        <ResultsCategory name={t('album.name', { count: 2 })} query={query} type={'album'} items={results.albums} />
+          name={t('resources.artist.name', { count: 2 })}
-        <ResultsCategory name={t('song.name', { count: 2 })} query={query} type={'song'} items={results.songs} />
+          query={query}
+          type={'artist'}
+          items={results.artists}
+        />
+        <ResultsCategory
+          name={t('resources.album.name', { count: 2 })}
+          query={query}
+          type={'album'}
+          items={results.albums}
+        />
+        <ResultsCategory
+          name={t('resources.song.name', { count: 2 })}
+          query={query}
+          type={'song'}
+          items={results.songs}
+        />
       </>
     )
   },
@@ -102,7 +117,7 @@ const Results = withSuspenseMemo<{
 const Search = withSuspense(() => {
   const [query, setQuery] = useState('')
   const { data, isLoading } = useQuerySearchResults({ query, albumCount: 5, artistCount: 5, songCount: 5 })
-  const { t } = useTranslation('search')
+  const { t } = useTranslation()
 
   const [text, setText] = useState('')
   const searchBarRef = useRef<ReactTextInput>(null)
@@ -154,7 +169,7 @@ const Search = withSuspense(() => {
           <TextInput
             ref={searchBarRef}
             style={styles.textInput}
-            placeholder={t('inputPlaceholder')}
+            placeholder={t('search.inputPlaceholder')}
             value={text}
             onChangeText={onChangeText}
           />

app/screens/SearchResultsView.tsx

@@ -59,7 +59,7 @@ const SearchResultsView = withSuspense<{
   type: 'album' | 'artist' | 'song'
 }>(({ query, type }) => {
   const navigation = useNavigation()
-  const { t } = useTranslation('search')
+  const { t } = useTranslation()
 
   const size = 100
   const params: Search3Params = { query }
@@ -85,7 +85,7 @@ const SearchResultsView = withSuspense<{
 
   useEffect(() => {
     navigation.setOptions({
-      title: t('headerTitle', { query }),
+      title: t('search.headerTitle', { query }),
     })
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])

app/screens/ServerView.tsx

@@ -20,7 +20,7 @@ const ServerView = withSuspense<{
   id?: string
   title?: string
 }>(({ id, title }) => {
-  const { t } = useTranslation('settings.servers')
+  const { t } = useTranslation()
   const navigation = useNavigation()
   const activeServerId = useStore(store => store.settings.activeServerId)
   const servers = useStoreDeep(store => store.settings.servers)
@@ -143,7 +143,7 @@ const ServerView = withSuspense<{
     const ping = async () => {
       const res = await pingServer(potential)
       toast(
-        t(`messages.${res ? 'connectionOk' : 'connectionFailed'}`, {
+        t(`settings.servers.messages.${res ? 'connectionOk' : 'connectionFailed'}`, {
           address: potential.address,
           interpolation: { escapeValue: false },
         }),
@@ -178,7 +178,7 @@ const ServerView = withSuspense<{
   return (
     <GradientScrollView style={styles.scroll}>
       <View style={styles.content}>
-        <Text style={styles.inputTitle}>{t('fields.address')}</Text>
+        <Text style={styles.inputTitle}>{t('settings.servers.fields.address')}</Text>
         <TextInput
           style={styles.input}
           placeholderTextColor="grey"
@@ -191,7 +191,7 @@ const ServerView = withSuspense<{
           onChangeText={setAddress}
           onBlur={formatAddress}
         />
-        <Text style={styles.inputTitle}>{t('fields.username')}</Text>
+        <Text style={styles.inputTitle}>{t('settings.servers.fields.username')}</Text>
         <TextInput
           style={styles.input}
           placeholderTextColor="grey"
@@ -204,7 +204,7 @@ const ServerView = withSuspense<{
           value={username}
           onChangeText={setUsername}
         />
-        <Text style={styles.inputTitle}>{t('fields.password')}</Text>
+        <Text style={styles.inputTitle}>{t('settings.servers.fields.password')}</Text>
         <TextInput
           style={styles.input}
           placeholderTextColor="grey"
@@ -219,11 +219,11 @@ const ServerView = withSuspense<{
           onChangeText={setPassword}
         />
         <SettingsSwitch
-          title={t('options.forcePlaintextPassword.title')}
+          title={t('settings.servers.options.forcePlaintextPassword.title')}
           subtitle={
             usePlainPassword
-              ? t('options.forcePlaintextPassword.descriptionOn')
+              ? t('settings.servers.options.forcePlaintextPassword.descriptionOn')
-              : t('options.forcePlaintextPassword.descriptionOff')
+              : t('settings.servers.options.forcePlaintextPassword.descriptionOff')
           }
           value={usePlainPassword}
           setValue={togglePlainPassword}
@@ -231,17 +231,22 @@ const ServerView = withSuspense<{
         <Button
           disabled={disableControls()}
           style={styles.button}
-          title={t('actions.testConnection')}
+          title={t('settings.servers.actions.testConnection')}
           buttonStyle="hollow"
           onPress={test}
         />
         <Button
           disabled={disableControls()}
           style={[styles.button, styles.delete, deleteStyle]}
-          title={t('actions.delete')}
+          title={t('settings.servers.actions.delete')}
           onPress={remove}
         />
-        <Button disabled={disableControls()} style={styles.button} title={t('actions.save')} onPress={save} />
+        <Button
+          disabled={disableControls()}
+          style={styles.button}
+          title={t('settings.servers.actions.save')}
+          onPress={save}
+        />
       </View>
     </GradientScrollView>
   )

app/screens/Settings.tsx

@@ -26,7 +26,7 @@ const ServerItem = withSuspenseMemo<{
   const activeServerId = useStore(store => store.settings.activeServerId)
   const switchActiveServer = useSwitchActiveServer()
   const navigation = useNavigation()
-  const { t } = useTranslation('settings.servers.actions')
+  const { t } = useTranslation()
 
   const setActive = useCallback(() => {
     switchActiveServer(server.id)
@@ -36,7 +36,7 @@ const ServerItem = withSuspenseMemo<{
     <SettingsItem
       title={server.address}
       subtitle={server.username}
-      onPress={() => navigation.navigate('server', { id: server.id, title: t('edit') })}>
+      onPress={() => navigation.navigate('server', { id: server.id, title: t('settings.servers.actions.edit') })}>
       <PressableOpacity style={styles.serverActive} onPress={setActive}>
         {activeServerId === server.id ? (
           <Icon name="checkbox-marked-circle" size={30} color={colors.accent} />
@@ -81,12 +81,16 @@ const BitrateModal = withSuspenseMemo<{
   bitrate: number
   setBitrate: (bitrate: number) => void
 }>(({ title, bitrate, setBitrate }) => {
-  const { t } = useTranslation('settings.network.values')
+  const { t } = useTranslation()
   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 bitrateText = useCallback(
+    (value: number) =>
+      value === 0 ? t('settings.network.values.unlimitedKbps') : t('settings.network.values.kbps', { value }),
+    [t],
+  )
 
   const BitrateChoice: React.FC<{ value: number }> = useCallback(
     ({ value }) => {
@@ -178,7 +182,7 @@ const SettingsTextModal = React.memo<{
 })
 
 const SettingsContent = withSuspenseMemo(() => {
-  const { t } = useTranslation('settings')
+  const { t } = useTranslation()
 
   const servers = useStoreDeep(store => store.settings.servers)
   const scrobble = useStore(store => store.settings.scrobble)
@@ -209,77 +213,84 @@ const SettingsContent = withSuspenseMemo(() => {
   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])
+  const secondsText = useCallback((value: string) => t('settings.network.values.seconds', { value }), [t])
 
   return (
     <View style={styles.content}>
-      <Header>{t('servers.name')}</Header>
+      <Header>{t('settings.servers.name')}</Header>
       {Object.values(servers).map(s => (
         <ServerItem key={s.id} server={s} />
       ))}
       <Button
         style={styles.button}
-        title={t('servers.actions.add')}
+        title={t('settings.servers.actions.add')}
-        onPress={() => navigation.navigate('server', { title: t('servers.actions.add') })}
+        onPress={() => navigation.navigate('server', { title: t('settings.servers.actions.add') })}
         buttonStyle="hollow"
       />
-      <Header style={styles.header}>{t('network.name')}</Header>
+      <Header style={styles.header}>{t('settings.network.name')}</Header>
       <BitrateModal
-        title={t('network.options.maxBitrateWifi.title')}
+        title={t('settings.network.options.maxBitrateWifi.title')}
         bitrate={maxBitrateWifi}
         setBitrate={setMaxBitrateWifi}
       />
       <BitrateModal
-        title={t('network.options.maxBitrateMobile.title')}
+        title={t('settings.network.options.maxBitrateMobile.title')}
         bitrate={maxBitrateMobile}
         setBitrate={setMaxBitrateMobile}
       />
       <SettingsTextModal
-        title={t('network.options.minBuffer.title')}
+        title={t('settings.network.options.minBuffer.title')}
         value={minBuffer.toString()}
         setValue={setMinBufferText}
         subtitle={secondsText}
         keyboardType="numeric"
       />
       <SettingsTextModal
-        title={t('network.options.maxBuffer.title')}
+        title={t('settings.network.options.maxBuffer.title')}
         value={maxBuffer.toString()}
         setValue={setMaxBufferText}
         subtitle={secondsText}
         keyboardType="numeric"
       />
-      <Header style={styles.header}>{t('music.name')}</Header>
+      <Header style={styles.header}>{t('settings.music.name')}</Header>
       <SettingsSwitch
-        title={t('music.options.scrobble.title')}
+        title={t('settings.music.options.scrobble.title')}
-        subtitle={scrobble ? t('music.options.scrobble.descriptionOn') : t('music.options.scrobble.descriptionOff')}
+        subtitle={
+          scrobble
+            ? t('settings.music.options.scrobble.descriptionOn')
+            : t('settings.music.options.scrobble.descriptionOff')
+        }
         value={scrobble}
         setValue={setScrobble}
       />
-      <Header style={styles.header}>{t('reset.name')}</Header>
+      <Header style={styles.header}>{t('settings.reset.name')}</Header>
       <Button
         disabled={clearing}
         style={styles.button}
-        title={t('reset.actions.clearImageCache')}
+        title={t('settings.reset.actions.clearImageCache')}
         onPress={clear}
         buttonStyle="hollow"
       />
-      <Header style={styles.header}>{t('about.name')}</Header>
+      <Header style={styles.header}>{t('settings.about.name')}</Header>
       <Text style={styles.text}>
-        <Text style={styles.bold}>Subtracks</Text> {t('about.version', { version })}
+        <Text style={styles.bold}>Subtracks</Text> {t('settings.about.version', { version })}
       </Text>
       <Button
         disabled={clearing}
         style={styles.button}
-        title={t('about.actions.projectHomepage')}
+        title={t('settings.about.actions.projectHomepage')}
         onPress={() => Linking.openURL('https://github.com/austinried/subtracks')}
         buttonStyle="hollow"
       />
       <Button
         disabled={clearing}
         style={styles.button}
-        title={t('about.actions.licenses')}
+        title={t('settings.about.actions.licenses')}
         onPress={() =>
-          navigation.navigate('web', { uri: 'file:///android_asset/licenses.html', title: t('about.actions.licenses') })
+          navigation.navigate('web', {
+            uri: 'file:///android_asset/licenses.html',
+            title: t('settings.about.actions.licenses'),
+          })
         }
         buttonStyle="hollow"
       />