feat(i18n): use dictionary in components

Author: vmnog

apps/web/src/components/copy-button.tsx

@@ -4,12 +4,14 @@ import { ComponentProps, useRef, useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 
 import { Button } from './ui/button'
+import { useDictionary } from '@/state/dictionary'
 
 export interface CopyButtonProps extends ComponentProps<typeof Button> {
   textToCopy: string
 }
 
 export function CopyButton({ textToCopy, ...props }: CopyButtonProps) {
+  const dictionary = useDictionary()
   const [wasCopiedRecently, setWasCopiedRecently] = useState(false)
   const copyTimeoutRef = useRef<NodeJS.Timeout>()
 
@@ -35,7 +37,7 @@ export function CopyButton({ textToCopy, ...props }: CopyButtonProps) {
         props.className,
       )}
     >
-      {wasCopiedRecently ? 'Copied!' : props.children}
+      {wasCopiedRecently ? dictionary.copy_button_copied : props.children}
     </Button>
   )
 }

apps/web/src/components/intercepted-sheet-content.tsx

@@ -6,11 +6,13 @@ import { useRouter } from 'next/navigation'
 import React from 'react'
 
 import { SheetOverlay, sheetVariants } from './ui/sheet'
+import { useDictionary } from '@/state/dictionary'
 
 export const InterceptedSheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>
 >(({ className, children, ...props }, ref) => {
+  const dictionary = useDictionary()
   const router = useRouter()
 
   const onDismiss = React.useCallback(() => {
@@ -33,7 +35,7 @@ export const InterceptedSheetContent = React.forwardRef<
           className="absolute right-8 top-8 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
         >
           <X className="h-4 w-4" />
-          <span className="sr-only">Close</span>
+          <span className="sr-only">{dictionary.intercepted_sheet_close}</span>
         </button>
       </SheetPrimitive.Content>
     </>

apps/web/src/components/transcription-preview.tsx

@@ -17,12 +17,14 @@ import { Textarea } from '@/components/ui/textarea'
 import { trpc } from '@/lib/trpc/react'
 
 import { Button } from './ui/button'
+import { useDictionary } from '@/state/dictionary'
 
 export interface TranscriptionPreviewProps {
   videoId: string
 }
 
 export function TranscriptionPreview({ videoId }: TranscriptionPreviewProps) {
+  const dictionary = useDictionary()
   const [isDialogOpen, setIsDialogOpen] = useState(false)
 
   const {
@@ -51,12 +53,12 @@ export function TranscriptionPreview({ videoId }: TranscriptionPreviewProps) {
       <DialogTrigger asChild>
         <button className="flex items-center font-medium text-primary hover:underline">
           <Link1Icon className="mr-2 h-4 w-4" />
-          <span>View transcription</span>
+          <span>{dictionary.transcription_preview_view_transcription}</span>
         </button>
       </DialogTrigger>
       <DialogContent className="w-full max-w-[480px]">
         <DialogHeader>
-          <DialogTitle>Transcrição</DialogTitle>
+          <DialogTitle>{dictionary.transcription_preview_title}</DialogTitle>
         </DialogHeader>
         {isLoadingTranscription || isPendingTranscription ? (
           <div className="space-y-2">
@@ -76,7 +78,7 @@ export function TranscriptionPreview({ videoId }: TranscriptionPreviewProps) {
             <Button variant="secondary" asChild>
               <Link href={`/app/videos/${data?.transcription?.uploadId}`}>
                 <Edit2 className="mr-2 h-3 w-3" />
-                Review
+                {dictionary.transcription_preview_button_review}
               </Link>
             </Button>
           </>

apps/web/src/components/upload-item-actions.tsx

@@ -25,6 +25,7 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 import { trpc } from '@/lib/trpc/react'
+import { useDictionary } from '@/state/dictionary'
 
 interface UploadItemActionsProps {
   videoId: string
@@ -35,6 +36,7 @@ export function UploadItemActions({
   videoId,
   uploadBatchId,
 }: UploadItemActionsProps) {
+  const dictionary = useDictionary()
   const utils = trpc.useUtils()
 
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
@@ -52,9 +54,8 @@ export function UploadItemActions({
 
       setIsDeleteDialogOpen(false)
     } catch {
-      toast.error('Uh oh! Something went wrong.', {
-        description:
-          'An error ocurred while trying to delete the video. If the error persists, please contact an administrator.',
+      toast.error(dictionary.upload_item_actions_toast_error, {
+        description: dictionary.upload_item_actions_toast_error_description,
       })
     }
   }
@@ -69,21 +70,21 @@ export function UploadItemActions({
             className="data-[state=open]:bg-muted"
           >
             <MoreHorizontal className="size-3" />
-            <span className="sr-only">Open menu</span>
+            <span className="sr-only">{dictionary.upload_item_actions_open_menu}</span>
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end" className="w-[160px]">
           <DropdownMenuItem asChild>
             <Link href={`/app/videos/${videoId}`} prefetch={false}>
               <Pencil2Icon className="mr-2 h-4 w-4" />
-              <span>Edit</span>
+              <span>{dictionary.upload_item_actions_edit}</span>
             </Link>
           </DropdownMenuItem>
           {uploadBatchId && (
             <DropdownMenuItem asChild>
               <Link href={`/app/batches/${uploadBatchId}`} prefetch={false}>
                 <GroupIcon className="mr-2 h-4 w-4" />
-                <span>View batch</span>
+                <span>{dictionary.upload_item_actions_view_batch}</span>
               </Link>
             </DropdownMenuItem>
           )}
@@ -94,36 +95,33 @@ export function UploadItemActions({
               disabled={isDeletingVideo}
             >
               <Trash2 className="mr-2 h-4 w-4" />
-              Delete
+              {dictionary.upload_item_actions_delete}
             </DropdownMenuItem>
           </AlertDialogTrigger>
         </DropdownMenuContent>
       </DropdownMenu>
 
       <AlertDialogContent>
         <AlertDialogHeader>
-          <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+          <AlertDialogTitle>{dictionary.upload_item_actions_confirm_title}</AlertDialogTitle>
           <AlertDialogDescription className="space-y-3">
+            <p>{dictionary.upload_item_actions_confirm_description}</p>
             <p>
-              This action can&apos;t be undone and the video will be permanently
-              deleted from the server.
-            </p>
-            <p>
-              This will{' '}
+              {dictionary.upload_item_actions_confirm_note_1}
               <span className="font-semibold text-accent-foreground">
-                permanently
+                {dictionary.upload_item_actions_confirm_note_2}
               </span>
               :
             </p>
             <ol className="list-disc space-y-2 pl-4">
-              <li>Delete the MP4, MP3 and subtitles from storage;</li>
-              <li>Delete the video on external provider;</li>
-              <li>Delete the videos on any outside integration;</li>
+              <li>{dictionary.upload_item_actions_confirm_step_1}</li>
+              <li>{dictionary.upload_item_actions_confirm_step_2}</li>
+              <li>{dictionary.upload_item_actions_confirm_step_3}</li>
             </ol>
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogCancel>{dictionary.upload_item_actions_cancel}</AlertDialogCancel>
           <Button
             disabled={isDeletingVideo}
             variant="destructive"
@@ -133,7 +131,7 @@ export function UploadItemActions({
             {isDeletingVideo ? (
               <Loader2 className="h-4 w-4 animate-spin" />
             ) : (
-              'Delete'
+              dictionary.upload_item_actions_delete
             )}
           </Button>
         </AlertDialogFooter>

packages/i18n/dictionaries/en.json

@@ -334,5 +334,24 @@
   "transcription_card_button_save": "Save",
   "transcription_skeleton_generating": "Transcription is being generated",
   "transcription_skeleton_auto_refresh": "The page will automatically refresh...",
-  "metadata_tooltip_request_body": "Request body sent to the webhook"
+  "metadata_tooltip_request_body": "Request body sent to the webhook",
+  "copy_button_copied": "Copied!",
+  "intercepted_sheet_close": "Close",
+  "transcription_preview_view_transcription": "View transcription",
+  "transcription_preview_title": "Transcription",
+  "transcription_preview_button_review": "Review",
+  "upload_item_actions_toast_error": "Uh oh! Something went wrong.",
+  "upload_item_actions_toast_error_description": "An error occurred while trying to delete the video. If the error persists, please contact an administrator.",
+  "upload_item_actions_open_menu": "Open menu",
+  "upload_item_actions_edit": "Edit",
+  "upload_item_actions_view_batch": "View batch",
+  "upload_item_actions_delete": "Delete",
+  "upload_item_actions_confirm_title": "Are you sure?",
+  "upload_item_actions_confirm_description": "This action can't be undone and the video will be permanently deleted from the server.",
+  "upload_item_actions_confirm_note_1": "This will ",
+  "upload_item_actions_confirm_note_2": "permanently",
+  "upload_item_actions_confirm_step_1": "Delete the MP4, MP3 and subtitles from storage;",
+  "upload_item_actions_confirm_step_2": "Delete the video on external provider;",
+  "upload_item_actions_confirm_step_3": "Delete the videos on any outside integration;",
+  "upload_item_actions_cancel": "Cancel"
 }

packages/i18n/dictionaries/es.json

@@ -328,5 +328,24 @@
   "transcription_card_button_save": "Guardar",
   "transcription_skeleton_generating": "La transcripción está siendo generada",
   "transcription_skeleton_auto_refresh": "La página se actualizará automáticamente...",
-  "metadata_tooltip_request_body": "Cuerpo de la solicitud enviado al webhook"
+  "metadata_tooltip_request_body": "Cuerpo de la solicitud enviado al webhook",
+  "copy_button_copied": "¡Copiado!",
+  "intercepted_sheet_close": "Cerrar",
+  "transcription_preview_view_transcription": "Ver transcripción",
+  "transcription_preview_title": "Transcripción",
+  "transcription_preview_button_review": "Revisar",
+  "upload_item_actions_toast_error": "¡Uh oh! Algo salió mal.",
+  "upload_item_actions_toast_error_description": "Ocurrió un error al intentar eliminar el video. Si el error persiste, comuníquese con un administrador.",
+  "upload_item_actions_open_menu": "Abrir menú",
+  "upload_item_actions_edit": "Editar",
+  "upload_item_actions_view_batch": "Ver lote",
+  "upload_item_actions_delete": "Eliminar",
+  "upload_item_actions_confirm_title": "¿Está seguro?",
+  "upload_item_actions_confirm_description": "Esta acción no se puede deshacer y el video se eliminará permanentemente del servidor.",
+  "upload_item_actions_confirm_note_1": "Esto ",
+  "upload_item_actions_confirm_note_2": "permanentemente",
+  "upload_item_actions_confirm_step_1": "Eliminar el MP4, MP3 y subtítulos del almacenamiento;",
+  "upload_item_actions_confirm_step_2": "Eliminar el video en el proveedor externo;",
+  "upload_item_actions_confirm_step_3": "Eliminar los videos en cualquier integración externa;",
+  "upload_item_actions_cancel": "Cancelar"
 }

packages/i18n/dictionaries/pt.json

@@ -328,5 +328,24 @@
   "transcription_card_button_save": "Salvar",
   "transcription_skeleton_generating": "A transcrição está sendo gerada",
   "transcription_skeleton_auto_refresh": "A página será atualizada automaticamente...",
-  "metadata_tooltip_request_body": "Corpo da solicitação enviado para o webhook"
+  "metadata_tooltip_request_body": "Corpo da solicitação enviado para o webhook",
+  "copy_button_copied": "Copiado!",
+  "intercepted_sheet_close": "Fechar",
+  "transcription_preview_view_transcription": "Ver transcrição",
+  "transcription_preview_title": "Transcrição",
+  "transcription_preview_button_review": "Revisar",
+  "upload_item_actions_toast_error": "Uh oh! Algo deu errado.",
+  "upload_item_actions_toast_error_description": "Ocorreu um erro ao tentar excluir o vídeo. Se o erro persistir, entre em contato com um administrador.",
+  "upload_item_actions_open_menu": "Abrir menu",
+  "upload_item_actions_edit": "Editar",
+  "upload_item_actions_view_batch": "Ver lote",
+  "upload_item_actions_delete": "Excluir",
+  "upload_item_actions_confirm_title": "Você tem certeza?",
+  "upload_item_actions_confirm_description": "Esta ação não pode ser desfeita e o vídeo será permanentemente excluído do servidor.",
+  "upload_item_actions_confirm_note_1": "Isto ",
+  "upload_item_actions_confirm_note_2": "permanentemente",
+  "upload_item_actions_confirm_step_1": "Excluir o MP4, MP3 e legendas do armazenamento;",
+  "upload_item_actions_confirm_step_2": "Excluir o vídeo no provedor externo;",
+  "upload_item_actions_confirm_step_3": "Excluir os vídeos em qualquer integração externa;",
+  "upload_item_actions_cancel": "Cancelar"
 }