feat: i18n

src/features/library/LibraryPage.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router';
+import { useTranslation } from 'react-i18next';
 import {
   Tabs,
   TabsList,
@@ -24,6 +25,7 @@ import { getCoverUrl } from '../../api/endpoints/streaming';
 import { formatDuration } from '../../lib/format';
 
 export function LibraryPage() {
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
   const [tab, setTab] = useState('tracks');
@@ -45,7 +47,7 @@ export function LibraryPage() {
           albumArtUrl: t.albumArtUrl,
         })),
         source: 'manual',
-        sourceName: 'Library',
+        sourceName: t('library.title'),
       }),
     );
   };
@@ -63,13 +65,13 @@ export function LibraryPage() {
         }}
       >
         <h2 style={{ margin: 0, fontSize: '1.125rem', fontWeight: 700 }}>
-          Library
+          {t('library.title')}
         </h2>
         <div style={{ flex: 1, maxWidth: '20rem' }}>
           <SearchField
             value={search}
             onChange={(e) => setSearch(e.target.value)}
-            placeholder="Search library…"
+            placeholder={t('library.searchPlaceholder')}
             icon="⌕"
           />
         </div>
@@ -94,9 +96,9 @@ export function LibraryPage() {
         >
           <TabsList
             items={[
-              { value: 'tracks', label: 'Tracks' },
-              { value: 'albums', label: 'Albums' },
-              { value: 'artists', label: 'Artists' },
+              { value: 'tracks', label: t('library.tabs.tracks') },
+              { value: 'albums', label: t('library.tabs.albums') },
+              { value: 'artists', label: t('library.tabs.artists') },
             ]}
           />
         </div>
@@ -110,8 +112,8 @@ export function LibraryPage() {
             {tracksQuery.data && tracksQuery.data.items.length === 0 && (
               <EmptyState
                 icon="♫"
-                title="No tracks"
-                description="Your library is empty. Start by downloading some music."
+                title={t('library.empty.tracks.title')}
+                description={t('library.empty.tracks.description')}
               />
             )}
             {tracksQuery.data &&
@@ -140,7 +142,7 @@ export function LibraryPage() {
                           fontWeight: 500,
                         }}
                       >
-                        ▶ Play all ({data.total})
+                        {t('library.playAll', { count: data.total })}
                       </button>
                     </div>
                     {data.items.map((track, i) => (
@@ -166,8 +168,8 @@ export function LibraryPage() {
             {albumsQuery.data && albumsQuery.data.items.length === 0 && (
               <EmptyState
                 icon="💿"
-                title="No albums"
-                description="No albums in library."
+                title={t('library.empty.albums.title')}
+                description={t('library.empty.albums.description')}
               />
             )}
             {albumsQuery.data && (
@@ -200,8 +202,8 @@ export function LibraryPage() {
             {artistsQuery.data && artistsQuery.data.items.length === 0 && (
               <EmptyState
                 icon="🎤"
-                title="No artists"
-                description="No artists in library."
+                title={t('library.empty.artists.title')}
+                description={t('library.empty.artists.description')}
               />
             )}
             {artistsQuery.data && (
@@ -219,6 +221,7 @@ export function LibraryPage() {
 }
 
 function AlbumCard({ album, onClick }: { album: Album; onClick: () => void }) {
+  const { t } = useTranslation();
   const artUrl = getCoverUrl(album.artUrl);
   return (
     <Card
@@ -282,7 +285,10 @@ function AlbumCard({ album, onClick }: { album: Album; onClick: () => void }) {
           {album.artistName}
         </div>
         <div style={{ fontSize: '0.6875rem', color: 'var(--color-text-3)' }}>
-          {album.trackCount} tracks · {formatDuration(album.totalDurationMs)}
+          {t('library.albumCard.tracksDuration', {
+            count: album.trackCount,
+            duration: formatDuration(album.totalDurationMs),
+          })}
         </div>
       </div>
     </Card>
@@ -290,6 +296,7 @@ function AlbumCard({ album, onClick }: { album: Album; onClick: () => void }) {
 }
 
 function ArtistRow({ artist }: { artist: Artist }) {
+  const { t } = useTranslation();
   return (
     <div
       style={{
@@ -319,7 +326,10 @@ function ArtistRow({ artist }: { artist: Artist }) {
           {artist.name}
         </div>
         <div style={{ fontSize: '0.75rem', color: 'var(--color-text-3)' }}>
-          {artist.albumCount} albums · {artist.trackCount} tracks
+          {t('library.artistRow.meta', {
+            albumCount: artist.albumCount,
+            trackCount: artist.trackCount,
+          })}
         </div>
       </div>
     </div>