i18n

src/features/spotify/components/spotify-sheet.tsx

@@ -15,6 +15,7 @@ import {
   SignOutIcon, 
   ArrowsClockwiseIcon 
 } from '@phosphor-icons/react';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { useSpotify } from '@/lib/spotify/hooks';
 import { useAuth } from '@/contexts/auth-context';
 import Sheet from '@/components/sheet/sheet';
@@ -28,6 +29,7 @@ const SpotifySheet: React.FC<SpotifySheetProps> = ({ opened, onClose }) => {
   const { roles } = useAuth();
   const isAdmin = roles?.includes('Admin') || false;
   const spotify = useSpotify();
+  const { t } = useLingui();
 
   if (!isAdmin || !spotify) return null;
   const {
@@ -63,14 +65,14 @@ const SpotifySheet: React.FC<SpotifySheetProps> = ({ opened, onClose }) => {
     <Sheet 
       opened={opened} 
       onChange={handleChange}
-      title="Spotify Controls"
+      title={t`Spotify Controls`}
     >
           <Stack gap="lg">
             {!isAuthenticated ? (
               <>
                 <Box>
                   <Text size="sm" c="dimmed" mb="md">
-                    Connect your Spotify account
+                    <Trans>Connect your Spotify account</Trans>
                   </Text>
                 </Box>
 
@@ -82,7 +84,7 @@ const SpotifySheet: React.FC<SpotifySheetProps> = ({ opened, onClose }) => {
                   loading={isLoading}
                   fullWidth
                 >
-                  Connect with Spotify
+                  <Trans>Connect with Spotify</Trans>
                 </Button>
               </>
             ) : (
@@ -91,7 +93,7 @@ const SpotifySheet: React.FC<SpotifySheetProps> = ({ opened, onClose }) => {
                 {currentTrack && (
                   <>
                     <Box>
-                      <Title order={5} mb="xs">Now Playing</Title>
+                      <Title order={5} mb="xs"><Trans>Now Playing</Trans></Title>
                       <Group gap="md">
                         {currentTrack.album.images[2] && (
                           <img
@@ -122,7 +124,7 @@ const SpotifySheet: React.FC<SpotifySheetProps> = ({ opened, onClose }) => {
                     <Title order={5}>
                       <Group gap="xs">
                         <DevicesIcon size={20} />
-                        Select Device
+                        <Trans>Select Device</Trans>
                       </Group>
                     </Title>
                     <ActionIcon
@@ -140,25 +142,25 @@ const SpotifySheet: React.FC<SpotifySheetProps> = ({ opened, onClose }) => {
                       value={activeDevice?.id || ''}
                       onChange={(event) => handleDeviceChange(event.currentTarget.value)}
                       data={[
-                        { value: '', label: 'Select a device...' },
+                        { value: '', label: t`Select a device...` },
                         ...devices.map(device => ({
                           value: device.id,
-                          label: `${device.name} ${device.is_active ? '(Active)' : ''} - ${device.type}`,
+                          label: `${device.name} ${device.is_active ? t`(Active)` : ''} - ${device.type}`,
                         })),
                       ]}
                       disabled={isLoading}
                     />
                   ) : (
                     <Text size="sm" c="dimmed">
-                      No devices found.
+                      <Trans>No devices found.</Trans>
                     </Text>
                   )}
 
                   {activeDevice && (
                     <Text size="xs" c="dimmed" mt="xs">
-                      Active device: {activeDevice.name}
-                      {activeDevice.volume_percent !== null && 
-                        ` (Volume: ${activeDevice.volume_percent}%)`
+                      <Trans>Active device: {activeDevice.name}</Trans>
+                      {activeDevice.volume_percent !== null &&
+                        t` (Volume: ${activeDevice.volume_percent}%)`
                       }
                     </Text>
                   )}
@@ -183,7 +185,7 @@ const SpotifySheet: React.FC<SpotifySheetProps> = ({ opened, onClose }) => {
                   onClick={logout}
                   fullWidth
                 >
-                  Disconnect Spotify
+                  <Trans>Disconnect Spotify</Trans>
                 </Button>
               </>
             )}