feat: i18n

src/features/admin/AdminPage.tsx

@@ -1,9 +1,12 @@
+import { useTranslation } from 'react-i18next';
 import { Window } from '@olly/modern-sk';
+
 export function AdminPage() {
+  const { t } = useTranslation();
   return (
     <div style={{ padding: '1.5rem' }}>
-      <Window title="Admin">
-        <p style={{ color: 'var(--color-text-2)' }}>Coming soon</p>
+      <Window title={t('pages.admin')}>
+        <p style={{ color: 'var(--color-text-2)' }}>{t('common.comingSoon')}</p>
       </Window>
     </div>
   );

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) => (

src/features/connect/ConnectPage.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router';
+import { useTranslation } from 'react-i18next';
 import { Card, TextField, Button, Callout, Badge } from '@olly/modern-sk';
 import { Icon } from '../../components/common/Icon';
 import { useAppDispatch } from '../../hooks/useAppDispatch';
@@ -14,10 +15,10 @@ import {
 import type { User } from '../../api/types';
 
 export function ConnectPage() {
+  const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
 
-  // Re-read on each render trigger; instance ops below force a remount via state.
   const [rev, setRev] = useState(0);
   const instances = listInstances();
   const activeId = getActiveInstanceId();
@@ -26,8 +27,6 @@ export function ConnectPage() {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
 
-  // Switching to a saved backend reloads the app so every slice re-initialises
-  // from that instance's namespaced storage (its own session, prefs, cache).
   const switchTo = (id: string) => {
     setActiveInstanceId(id);
     window.location.assign('/');
@@ -38,11 +37,9 @@ export function ConnectPage() {
     setRev((r) => r + 1);
   };
 
-  // STUB: no backend yet. Register the instance, then fake a session so the rest
-  // of the app is reachable. Replace with the real useLoginMutation() flow later.
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    setApiBaseUrl(apiUrl); // upsert + activate this backend
+    setApiBaseUrl(apiUrl);
 
     const fakeUser: User = {
       id: 'dev-user',
@@ -114,7 +111,7 @@ export function ConnectPage() {
               }}
             >
               <span className="msk-label" style={{ marginBottom: '0.25rem' }}>
-                Saved instances
+                {t('connect.savedInstances')}
               </span>
               {instances.map((inst) => (
                 <div
@@ -165,21 +162,21 @@ export function ConnectPage() {
                     </div>
                   </div>
                   {inst.id === activeId ? (
-                    <Badge variant="lime">active</Badge>
+                    <Badge variant="lime">{t('connect.active')}</Badge>
                   ) : (
                     <Button
                       variant="ghost"
                       size="sm"
                       onClick={() => switchTo(inst.id)}
                     >
-                      Use
+                      {t('connect.use')}
                     </Button>
                   )}
                   <button
                     type="button"
                     className="iconbtn sm"
                     onClick={() => forget(inst.id)}
-                    title="Forget this instance"
+                    title={t('connect.forgetTitle')}
                   >
                     <Icon name="trash" />
                   </button>
@@ -199,9 +196,9 @@ export function ConnectPage() {
               padding: '1.5rem',
             }}
           >
-            <span className="msk-label">Connect to a backend</span>
+            <span className="msk-label">{t('connect.form.title')}</span>
             <div>
-              <label style={labelStyle}>Server URL</label>
+              <label style={labelStyle}>{t('connect.form.serverUrl')}</label>
               <TextField
                 value={apiUrl}
                 onChange={(e) => setApiUrl(e.target.value)}
@@ -210,7 +207,7 @@ export function ConnectPage() {
               />
             </div>
             <div>
-              <label style={labelStyle}>Username</label>
+              <label style={labelStyle}>{t('connect.form.username')}</label>
               <TextField
                 value={username}
                 onChange={(e) => setUsername(e.target.value)}
@@ -220,7 +217,7 @@ export function ConnectPage() {
               />
             </div>
             <div>
-              <label style={labelStyle}>Password</label>
+              <label style={labelStyle}>{t('connect.form.password')}</label>
               <TextField
                 type="password"
                 value={password}
@@ -231,15 +228,14 @@ export function ConnectPage() {
               />
             </div>
             <Callout variant="warning">
-              Stub mode — backend not wired. Connect signs in with a fake admin
-              session, scoped to this instance.
+              {t('connect.form.stubNote')}
             </Callout>
             <Button
               type="submit"
               variant="primary"
               style={{ marginTop: '0.5rem' }}
             >
-              Connect
+              {t('connect.form.submit')}
             </Button>
           </form>
         </Card>

src/features/downloads-manager/DownloadsManagerPage.tsx

@@ -1,9 +1,12 @@
+import { useTranslation } from 'react-i18next';
 import { Window } from '@olly/modern-sk';
+
 export function DownloadsManagerPage() {
+  const { t } = useTranslation();
   return (
     <div style={{ padding: '1.5rem' }}>
-      <Window title="Downloads">
-        <p style={{ color: 'var(--color-text-2)' }}>Coming soon</p>
+      <Window title={t('pages.downloads')}>
+        <p style={{ color: 'var(--color-text-2)' }}>{t('common.comingSoon')}</p>
       </Window>
     </div>
   );

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>

src/features/playlist-detail/PlaylistDetailPage.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 {
   useGetPlaylistQuery,
@@ -13,6 +14,7 @@ import { setQueue } from '../../store/slices/queue';
 import { formatDuration } from '../../lib/format';
 
 export function PlaylistDetailPage() {
+  const { t } = useTranslation();
   const { playlistId } = useParams<{ playlistId: string }>();
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
@@ -35,7 +37,7 @@ export function PlaylistDetailPage() {
   if (playlistQuery.isError) {
     return (
       <ErrorState
-        message="Failed to load playlist"
+        message={t('playlist.error')}
         onRetry={() => playlistQuery.refetch()}
       />
     );
@@ -79,7 +81,7 @@ export function PlaylistDetailPage() {
           variant="ghost"
           size="sm"
           onClick={() => navigate(-1)}
-          aria-label="Back"
+          aria-label={t('common.back')}
         >
           ←
         </IconButton>
@@ -93,7 +95,7 @@ export function PlaylistDetailPage() {
               letterSpacing: '0.05em',
             }}
           >
-            Playlist
+            {t('playlist.type')}
           </p>
           <h1
             style={{ margin: '0.25rem 0', fontSize: '1.5rem', fontWeight: 700 }}
@@ -119,7 +121,7 @@ export function PlaylistDetailPage() {
             }}
           >
             {playlist &&
-              `${playlist.trackCount} tracks · ${formatDuration(playlist.totalDurationMs)}`}
+              `${playlist.trackCount} · ${formatDuration(playlist.totalDurationMs)}`}
           </p>
         </div>
         <Button
@@ -127,7 +129,7 @@ export function PlaylistDetailPage() {
           onClick={handlePlayAll}
           disabled={!tracks.length}
         >
-          ▶ Play
+          {t('playlist.play')}
         </Button>
       </div>
 
@@ -135,7 +137,7 @@ export function PlaylistDetailPage() {
         {tracksQuery.isLoading && <LoadingSkeleton rows={10} />}
         {tracksQuery.isError && (
           <ErrorState
-            message="Failed to load tracks"
+            message={t('playlist.tracksError')}
             onRetry={() => tracksQuery.refetch()}
           />
         )}
@@ -144,8 +146,8 @@ export function PlaylistDetailPage() {
           tracks.length === 0 && (
             <EmptyState
               icon="♫"
-              title="Empty playlist"
-              description="This playlist has no tracks yet."
+              title={t('playlist.empty.title')}
+              description={t('playlist.empty.description')}
             />
           )}
         {tracks.map((track, i) => (

src/features/search-download/SearchDownloadPage.tsx

@@ -1,9 +1,12 @@
+import { useTranslation } from 'react-i18next';
 import { Window } from '@olly/modern-sk';
+
 export function SearchDownloadPage() {
+  const { t } = useTranslation();
   return (
     <div style={{ padding: '1.5rem' }}>
-      <Window title="Search & Download">
-        <p style={{ color: 'var(--color-text-2)' }}>Coming soon</p>
+      <Window title={t('pages.search')}>
+        <p style={{ color: 'var(--color-text-2)' }}>{t('common.comingSoon')}</p>
       </Window>
     </div>
   );

src/features/settings/SettingsPage.tsx

@@ -1,9 +1,25 @@
-import { Window } from '@olly/modern-sk';
+import { useTranslation } from 'react-i18next';
+import { Window, SegmentedControl } from '@olly/modern-sk';
+import { SUPPORTED_LANGUAGES, setLanguage } from '../../i18n';
+
 export function SettingsPage() {
+  const { t, i18n } = useTranslation();
+
   return (
-    <div style={{ padding: '1.5rem' }}>
-      <Window title="Settings">
-        <p style={{ color: 'var(--color-text-2)' }}>Coming soon</p>
+    <div style={{ padding: '1.5rem', display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
+      <Window title={t('pages.settings')}>
+        <div style={{ padding: '0.75rem 0', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+            <span style={{ fontSize: '0.875rem', color: 'var(--color-text-2)', minWidth: '6rem' }}>
+              Language
+            </span>
+            <SegmentedControl
+              value={i18n.language}
+              onValueChange={setLanguage}
+              items={SUPPORTED_LANGUAGES.map((l) => ({ value: l.code, label: l.label }))}
+            />
+          </div>
+        </div>
       </Window>
     </div>
   );

src/features/storage/StoragePage.tsx

@@ -1,9 +1,12 @@
+import { useTranslation } from 'react-i18next';
 import { Window } from '@olly/modern-sk';
+
 export function StoragePage() {
+  const { t } = useTranslation();
   return (
     <div style={{ padding: '1.5rem' }}>
-      <Window title="Storage">
-        <p style={{ color: 'var(--color-text-2)' }}>Coming soon</p>
+      <Window title={t('pages.storage')}>
+        <p style={{ color: 'var(--color-text-2)' }}>{t('common.comingSoon')}</p>
       </Window>
     </div>
   );