Front: First Pass on translations + remove unused setting tabs

front/components/GtkUI/RawElement.tsx

@@ -20,6 +20,7 @@ import {
 } from './ElementTypes';
 import { ArrowDown2 } from 'iconsax-react-native';
 import { useWindowDimensions } from 'react-native';
+import Translate from '../Translate';
 
 type RawElementProps = {
 	element: ElementProps;
@@ -149,7 +150,7 @@ export const RawElement = ({ element }: RawElementProps) => {
 										/>
 									);
 								default:
-									return <Text>Unknown type</Text>;
+									return <Translate translationKey='unknownError'/>
 							}
 						})()}
 					</Row>

front/components/Metronome.tsx

@@ -3,6 +3,7 @@ import { Slider, Text, View, IconButton, Icon } from 'native-base';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { Audio } from 'expo-av';
 import { VolumeHigh, VolumeSlash } from 'iconsax-react-native';
+import { Translate } from '../i18n/i18n';
 
 export const MetronomeControls = ({ paused = false, bpm }: { paused?: boolean; bpm: number }) => {
 	const audio = useRef<Audio.Sound | null>(null);
@@ -43,7 +44,7 @@ export const MetronomeControls = ({ paused = false, bpm }: { paused?: boolean; b
 					justifyContent: 'space-between',
 				}}
 			>
-				<Text>Metronome</Text>
+				<Translate translationKey="metronome" />
 				<Icon as={<MaterialCommunityIcons name="metronome" size={24} color="white" />} />
 			</View>
 			<View

front/components/ProgressBar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { translate } from '../i18n/i18n';
+import { Translate, translate } from '../i18n/i18n';
 import { Box, Text, VStack, Progress, Stack } from 'native-base';
 import { useNavigation } from '../Navigation';
 import Card from '../components/Card';
@@ -18,13 +18,14 @@ const ProgressBar = ({ xp }: { xp: number }) => {
 			<Stack padding={4} space={2} direction="row" alignItems="center">
 				<UserAvatar />
 				<VStack alignItems={'center'} flexGrow={1} space={2}>
-					<Text>{`${translate('level')} ${level}`}</Text>
+					<Translate translationKey="level" format={(e) => `${e} ${level}`} />
 					<Box w="100%">
 						<Progress value={progessValue} mx="4" />
 					</Box>
-					<Text>
-						{xp} / {nextLevelThreshold} {translate('levelProgress')}
-					</Text>
+					<Translate
+						translationKey="levelProgress"
+						format={(e) => `${xp} / ${nextLevelThreshold} ${e}`}
+					/>
 				</VStack>
 			</Stack>
 		</Card>

front/components/SearchResult.tsx

@@ -13,7 +13,7 @@ import {
 import { SafeAreaView } from 'react-native';
 import { SearchContext } from '../views/SearchView';
 import { useQuery } from '../Queries';
-import { translate } from '../i18n/i18n';
+import { Translate, translate } from '../i18n/i18n';
 import API from '../API';
 import LoadingComponent, { LoadingView } from './Loading';
 import ArtistCard from './ArtistCard';
@@ -115,7 +115,7 @@ const SongsSearchComponent = (props: SongsSearchComponentProps) => {
 						/>
 					))
 				) : (
-					<Text>{translate('errNoResults')}</Text>
+					<Translate translationKey="errNoResults" />
 				)}
 			</Box>
 		</ScrollView>
@@ -151,7 +151,7 @@ const ArtistSearchComponent = (props: ItemSearchComponentProps) => {
 					cardComponent={ArtistCard}
 				/>
 			) : (
-				<Text>{translate('errNoResults')}</Text>
+				<Translate translationKey="errNoResults" />
 			)}
 		</Box>
 	);
@@ -180,7 +180,7 @@ const GenreSearchComponent = (props: ItemSearchComponentProps) => {
 					cardComponent={GenreCard}
 				/>
 			) : (
-				<Text>{translate('errNoResults')}</Text>
+				<Translate translationKey="errNoResults" />
 			)}
 		</Box>
 	);
@@ -268,7 +268,7 @@ const FilterSwitch = () => {
 		case 'favorites':
 			return <FavoritesComponent />;
 		default:
-			return <Text>Something very bad happened: {currentFilter}</Text>;
+			return <Translate translationKey='unknownError' format={(e) => `${e}: ${currentFilter}`}/>;
 	}
 };