feat: i18n

src/features/album-detail/AlbumDetailPage.tsx

@@ -1,4 +1,5 @@
 import { useParams, useNavigate } from 'react-router';
+import { useTranslation } from 'react-i18next';
 import { ScrollArea, IconButton, Button } from '@olly/modern-sk';
 import {
   useGetAlbumQuery,
@@ -14,6 +15,7 @@ import { formatDuration } from '../../lib/format';
 import { getCoverUrl } from '../../api/endpoints/streaming';
 
 export function AlbumDetailPage() {
+  const { t } = useTranslation();
   const { albumId } = useParams<{ albumId: string }>();
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
@@ -32,7 +34,7 @@ export function AlbumDetailPage() {
   if (albumQuery.isError) {
     return (
       <ErrorState
-        message="Failed to load album"
+        message={t('album.error')}
         onRetry={() => albumQuery.refetch()}
       />
     );
@@ -63,7 +65,6 @@ export function AlbumDetailPage() {
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-      {/* header */}
       <div
         style={{
           padding: '1.25rem 1.5rem',
@@ -78,7 +79,7 @@ export function AlbumDetailPage() {
           variant="ghost"
           size="sm"
           onClick={() => navigate(-1)}
-          aria-label="Back"
+          aria-label={t('common.back')}
         >
           ←
         </IconButton>
@@ -125,7 +126,7 @@ export function AlbumDetailPage() {
                 letterSpacing: '0.05em',
               }}
             >
-              Album
+              {t('album.type')}
             </p>
             <h1
               style={{
@@ -146,7 +147,7 @@ export function AlbumDetailPage() {
               {album?.artistName}
               {album?.year && ` · ${album.year}`}
               {album &&
-                ` · ${album.trackCount} tracks · ${formatDuration(album.totalDurationMs)}`}
+                ` · ${album.trackCount} · ${formatDuration(album.totalDurationMs)}`}
             </p>
           </div>
         </div>
@@ -155,16 +156,15 @@ export function AlbumDetailPage() {
           onClick={handlePlayAll}
           disabled={!tracks.length}
         >
-          ▶ Play
+          {t('album.play')}
         </Button>
       </div>
 
-      {/* tracks */}
       <ScrollArea style={{ flex: 1 }}>
         {tracksQuery.isLoading && <LoadingSkeleton rows={10} />}
         {tracksQuery.isError && (
           <ErrorState
-            message="Failed to load tracks"
+            message={t('album.tracksError')}
             onRetry={() => tracksQuery.refetch()}
           />
         )}
@@ -173,8 +173,8 @@ export function AlbumDetailPage() {
           tracks.length === 0 && (
             <EmptyState
               icon="♫"
-              title="No tracks"
-              description="This album has no tracks."
+              title={t('album.empty.title')}
+              description={t('album.empty.description')}
             />
           )}
         {tracks.map((track, i) => (