feat(i18n): use dictionary in batches

apps/web/src/app/[locale]/app/batches/[id]/batch-upload-list.tsx

@@ -5,6 +5,7 @@ import { SymbolIcon } from '@radix-ui/react-icons'
 import { Cable, CopyIcon, Loader2, ReceiptText } from 'lucide-react'
 import Image from 'next/image'
 import Link from 'next/link'
+import { useDictionary } from '@/state/dictionary'
 
 import { CopyButton } from '@/components/copy-button'
 import { TranscriptionPreview } from '@/components/transcription-preview'
@@ -33,6 +34,7 @@ export interface BatchUploadListProps {
 }
 
 export function BatchUploadList({ batchId }: BatchUploadListProps) {
+  const dictionary = useDictionary()
   const {
     data,
     isLoading: isLoadingBatch,
@@ -57,24 +59,24 @@ export function BatchUploadList({ batchId }: BatchUploadListProps) {
               <TableHead style={{ width: 54 }}></TableHead>
               <TableHead style={{ width: 400 }}>
                 <div className="flex items-center gap-2">
-                  <span>Video</span>
+                  {dictionary.batch_upload_list_video_column}
                   {isRefetchingBatch && (
                     <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />
                   )}
                 </div>
               </TableHead>
-              <TableHead style={{ width: 120 }}>Duration</TableHead>
-              <TableHead style={{ width: 140 }}>Size</TableHead>
+              <TableHead style={{ width: 120 }}>{dictionary.batch_upload_list_duration_column}</TableHead>
+              <TableHead style={{ width: 140 }}>{dictionary.batch_upload_list_size_column}</TableHead>
               <TableHead style={{ width: 200 }}>
                 <div className="flex items-center gap-2">
                   <ReceiptText className="size-4" />
-                  Transcription
+                  {dictionary.batch_upload_list_transcription_column}
                 </div>
               </TableHead>
               <TableHead style={{ width: 200 }}>
                 <div className="flex items-center gap-2">
                   <Cable className="size-4" />
-                  External ID
+                  {dictionary.batch_upload_list_external_id_column}
                 </div>
               </TableHead>
               <TableHead style={{ width: 200 }}></TableHead>
@@ -121,9 +123,7 @@ export function BatchUploadList({ batchId }: BatchUploadListProps) {
                       ) : (
                         <div className="flex items-center font-medium">
                           <SymbolIcon className="mr-2 h-3 w-3 animate-spin" />
-                          <span className="text-muted-foreground">
-                            Processing
-                          </span>
+                          {dictionary.batch_upload_list_processing_status}
                         </div>
                       )}
                     </TableCell>
@@ -139,15 +139,13 @@ export function BatchUploadList({ batchId }: BatchUploadListProps) {
                             textToCopy={video.externalProviderId}
                           >
                             <CopyIcon className="mr-1 h-3 w-3" />
-                            Copy
+                            {dictionary.batch_upload_list_copy_button}
                           </CopyButton>
                         </div>
                       ) : (
                         <div className="flex items-center font-medium">
                           <SymbolIcon className="mr-2 h-3 w-3 animate-spin" />
-                          <span className="text-muted-foreground">
-                            Processing
-                          </span>
+                          {dictionary.batch_upload_list_processing_status}
                         </div>
                       )}
                     </TableCell>
@@ -159,7 +157,7 @@ export function BatchUploadList({ batchId }: BatchUploadListProps) {
                         {video.author?.image && (
                           <Tooltip>
                             <div className="flex items-center gap-2">
-                              <span>by</span>
+                              <span>{dictionary.batch_upload_list_by}</span>
                               <TooltipTrigger asChild>
                                 <Image
                                   src={video.author?.image}
@@ -180,14 +178,14 @@ export function BatchUploadList({ batchId }: BatchUploadListProps) {
                       </div>
                     </TableCell>
                     <TableCell>
-                      <UploadItemActions videoId={video.id} />
+                      <UploadItemActions videoId={video.id} uploadBatchId={null} />
                     </TableCell>
                   </TableRow>
                 ))
               ) : (
                 <TableRow>
                   <TableCell colSpan={99} className="h-24 text-center">
-                    No results.
+                    {dictionary.batch_upload_list_no_results}
                   </TableCell>
                 </TableRow>
               )}

apps/web/src/app/[locale]/app/batches/[id]/page.tsx

@@ -1,30 +1,34 @@
 import { Metadata } from 'next'
 
 import { BatchUploadList } from './batch-upload-list'
+import { Locale, getDictionary } from '@nivo/i18n'
 
 interface BatchPageProps {
-  params: { id: string }
+  params: { id: string, locale: Locale }
 }
 
 export async function generateMetadata({
   params,
 }: BatchPageProps): Promise<Metadata> {
+  const dictionary = await getDictionary(params.locale)
   const id = params.id
 
   return {
-    title: `Batch ${id}`,
+    title: `${dictionary.batch_page_generate_metadata_title} ${id}`,
   }
 }
 
 export default async function BatchPage({ params }: BatchPageProps) {
+  const dictionary = await getDictionary(params.locale)
+
   return (
     <>
       <div className="flex items-center justify-between">
-        <h2 className="text-3xl font-bold tracking-tight">Batch details</h2>
+        <h2 className="text-3xl font-bold tracking-tight">{dictionary.batch_page_header_title}</h2>
 
         <div className="flex items-center gap-4">
           <span className="text-sm text-muted-foreground">
-            This page refreshes every 15s
+            {dictionary.batch_page_refresh_notice}
           </span>
         </div>
       </div>

packages/i18n/dictionaries/en.json

@@ -258,5 +258,17 @@
   "uploads_pagination_go_to_first_page": "Go to first page",
   "uploads_pagination_go_to_previous_page": "Go to previous page",
   "uploads_pagination_go_to_next_page": "Go to next page",
-  "uploads_pagination_go_to_last_page": "Go to last page"
+  "uploads_pagination_go_to_last_page": "Go to last page",
+  "batch_upload_list_video_column": "Video",
+  "batch_upload_list_duration_column": "Duration",
+  "batch_upload_list_size_column": "Size",
+  "batch_upload_list_transcription_column": "Transcription",
+  "batch_upload_list_external_id_column": "External ID",
+  "batch_upload_list_processing_status": "Processing",
+  "batch_upload_list_copy_button": "Copy",
+  "batch_upload_list_by": "by",
+  "batch_upload_list_no_results": "No results.",
+  "batch_page_header_title": "Batch details",
+  "batch_page_refresh_notice": "This page refreshes every 15s",
+  "batch_page_generate_metadata_title": "Batch"
 }

packages/i18n/dictionaries/pt.json

@@ -252,5 +252,17 @@
   "uploads_pagination_go_to_first_page": "Ir para a primeira página",
   "uploads_pagination_go_to_previous_page": "Ir para a página anterior",
   "uploads_pagination_go_to_next_page": "Ir para a próxima página",
-  "uploads_pagination_go_to_last_page": "Ir para a última página"
+  "uploads_pagination_go_to_last_page": "Ir para a última página",
+  "batch_upload_list_video_column": "Vídeo",
+  "batch_upload_list_duration_column": "Duração",
+  "batch_upload_list_size_column": "Tamanho",
+  "batch_upload_list_transcription_column": "Transcrição",
+  "batch_upload_list_external_id_column": "ID Externo",
+  "batch_upload_list_processing_status": "Processando",
+  "batch_upload_list_copy_button": "Copiar",
+  "batch_upload_list_by": "por",
+  "batch_upload_list_no_results": "Sem resultados.",
+  "batch_page_header_title": "Detalhes do Lote",
+  "batch_page_refresh_notice": "Esta página é atualizada a cada 15s",
+  "batch_page_generate_metadata_title": "Lote"
 }