Translate genres

front/packages/ui/src/details/header.tsx

@@ -429,7 +429,7 @@ const Description = ({
 						{isLoading ? (
 							<Skeleton {...css({ width: rem(5) })} />
 						) : (
-							<A href={`/genres/${genre.toLowerCase()}`}>{genre}</A>
+							<A href={`/genres/${genre.toLowerCase()}`}>{t(`genres.${genre}`)}</A>
 						)}
 					</Fragment>
 				))}
@@ -481,7 +481,7 @@ const Description = ({
 								{isLoading ? (
 									<Skeleton {...css({ marginBottom: 0 })} />
 								) : (
-									<A href={`/genres/${genre.toLowerCase()}`}>{genre}</A>
+									<A href={`/genres/${genre.toLowerCase()}`}>{t(`genres.${genre}`)}</A>
 								)}
 							</LI>
 						))}

front/packages/ui/src/home/genre.tsx

@@ -69,7 +69,9 @@ export const GenreGrid = ({ genre }: { genre: Genre }) => {
 
 	return (
 		<>
-			{(displayEmpty.current || query.items?.length !== 0) && <Header title={genre} />}
+			{(displayEmpty.current || query.items?.length !== 0) && (
+				<Header title={t(`genres.${genre}`)} />
+			)}
 			<InfiniteFetchList
 				query={query}
 				layout={{ ...ItemGrid.layout, layout: "horizontal" }}

front/packages/ui/src/home/recommended.tsx

@@ -193,7 +193,7 @@ export const ItemDetails = ({
 				{genres && (
 					<ScrollView horizontal contentContainerStyle={{ alignItems: "center" }}>
 						{genres.map((x, i) => (
-							<Chip key={x ?? i} label={x} size="small" {...css({ mX: ts(0.5) })} />
+							<Chip key={x ?? i} label={t(`genres.${x}`)} size="small" {...css({ mX: ts(0.5) })} />
 						))}
 					</ScrollView>
 				)}

front/translations/en.json

@@ -61,6 +61,32 @@
 		"switchToGrid": "Switch to grid view",
 		"switchToList": "Switch to list view"
 	},
+	"genres": {
+		"Action": "Action",
+		"Adventure": "Adventure",
+		"Animation": "Animation",
+		"Comedy": "Comedy",
+		"Crime": "Crime",
+		"Documentary": "Documentary",
+		"Drama": "Drama",
+		"Family": "Family",
+		"Fantasy": "Fantasy",
+		"History": "History",
+		"Horror": "Horror",
+		"Music": "Music",
+		"Mystery": "Mystery",
+		"Romance": "Romance",
+		"ScienceFiction": "Science Fiction",
+		"Thriller": "Thriller",
+		"War": "War",
+		"Western": "Western",
+		"Kids": "Kids",
+		"News": "News",
+		"Reality": "Reality",
+		"Soap": "Soap",
+		"Talk": "Talk",
+		"Politics": "Politics"
+	},
 	"misc": {
 		"settings": "Settings",
 		"prev-page": "Previous page",