feat(i18n): use dictionary in components

apps/web/src/app/[locale]/app/(dashboard)/cards/views-count-chart.tsx

@@ -61,13 +61,13 @@ export default function ViewsCountChart({
           gradient:
             resolvedTheme === 'light'
               ? {
-                opacityFrom: 0.8,
-                opacityTo: 0.4,
-              }
+                  opacityFrom: 0.8,
+                  opacityTo: 0.4,
+                }
               : {
-                opacityFrom: 0.4,
-                opacityTo: 0.1,
-              },
+                  opacityFrom: 0.4,
+                  opacityTo: 0.1,
+                },
         },
         dataLabels: {
           enabled: false,

apps/web/src/app/[locale]/app/(dashboard)/cards/views-count.tsx

@@ -1,11 +1,11 @@
 import { dayjs } from '@nivo/dayjs'
+import { Dictionary } from '@nivo/i18n'
 import { Eye } from 'lucide-react'
 import dynamic from 'next/dynamic'
 import Link from 'next/link'
 
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { serverClient } from '@/lib/trpc/server'
-import { Dictionary } from '@nivo/i18n'
 
 const ViewsCountChart = dynamic(() => import('./views-count-chart'), {
   ssr: false,
@@ -26,7 +26,9 @@ export async function ViewsCount({ dictionary }: { dictionary: Dictionary }) {
         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
           <CardTitle className="text-base font-medium">
             {dictionary.views_count_title}{' '}
-            <span className="text-xs text-muted-foreground">{dictionary.views_count_subtitle}</span>
+            <span className="text-xs text-muted-foreground">
+              {dictionary.views_count_subtitle}
+            </span>
           </CardTitle>
           <Eye className="h-4 w-4 text-muted-foreground" />
         </CardHeader>

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

@@ -5,7 +5,6 @@ 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'
@@ -24,6 +23,7 @@ import {
 } from '@/components/ui/tooltip'
 import { UploadItemActions } from '@/components/upload-item-actions'
 import { trpc } from '@/lib/trpc/react'
+import { useDictionary } from '@/state/dictionary'
 import { formatBytes } from '@/utils/format-bytes'
 import { formatSecondsToMinutes } from '@/utils/format-seconds-to-minutes'
 
@@ -65,8 +65,12 @@ export function BatchUploadList({ batchId }: BatchUploadListProps) {
                   )}
                 </div>
               </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: 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" />
@@ -178,7 +182,10 @@ export function BatchUploadList({ batchId }: BatchUploadListProps) {
                       </div>
                     </TableCell>
                     <TableCell>
-                      <UploadItemActions videoId={video.id} uploadBatchId={null} />
+                      <UploadItemActions
+                        videoId={video.id}
+                        uploadBatchId={null}
+                      />
                     </TableCell>
                   </TableRow>
                 ))

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

@@ -1,10 +1,10 @@
+import { getDictionary, Locale } from '@nivo/i18n'
 import { Metadata } from 'next'
 
 import { BatchUploadList } from './batch-upload-list'
-import { Locale, getDictionary } from '@nivo/i18n'
 
 interface BatchPageProps {
-  params: { id: string, locale: Locale }
+  params: { id: string; locale: Locale }
 }
 
 export async function generateMetadata({
@@ -24,7 +24,9 @@ export default async function BatchPage({ params }: BatchPageProps) {
   return (
     <>
       <div className="flex items-center justify-between">
-        <h2 className="text-3xl font-bold tracking-tight">{dictionary.batch_page_header_title}</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">

apps/web/src/app/[locale]/app/layout.tsx

@@ -1,11 +1,12 @@
+import { getDictionary, Locale } from '@nivo/i18n'
+
 import { Header } from '@/components/header'
-import { Locale, getDictionary } from '@nivo/i18n'
 
 export default async function AppLayout({
   children,
-  params: { locale }
+  params: { locale },
 }: {
-  children: React.ReactNode,
+  children: React.ReactNode
   params: {
     locale: Locale
   }

apps/web/src/app/[locale]/app/upload/page.tsx

@@ -1,11 +1,11 @@
+import { getDictionary, Locale } from '@nivo/i18n'
 import { AlertCircle } from 'lucide-react'
+import Head from 'next/head'
 import Link from 'next/link'
 
 import { serverClient } from '@/lib/trpc/server'
 
 import { UploadList } from './upload-list'
-import { Locale, getDictionary } from '@nivo/i18n'
-import Head from 'next/head'
 
 export default async function Upload({
   params: { locale },

apps/web/src/app/[locale]/app/upload/upload-list/columns/audio-conversion-progress-column.tsx

@@ -18,11 +18,11 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/components/ui/tooltip'
+import { useDictionary } from '@/state/dictionary'
 import {
   addToAudioConversionQueueAtom,
   audioConversionAtom,
 } from '@/state/uploads'
-import { useDictionary } from '@/state/dictionary'
 
 export interface AudioConversionProgressColumnProps {
   uploadId: string
@@ -68,12 +68,16 @@ export function AudioConversionProgressColumn({
       ) : progress === 100 ? (
         <>
           <CheckCircledIcon className="h-4 w-4 text-emerald-500" />
-          <span className="text-emerald-500">{dictionary.audio_conversion_complete}</span>
+          <span className="text-emerald-500">
+            {dictionary.audio_conversion_complete}
+          </span>
         </>
       ) : (
         <>
           <DotsHorizontalIcon className="h-4 w-4" />
-          <span className="text-muted-foreground">{dictionary.audio_conversion_waiting}</span>
+          <span className="text-muted-foreground">
+            {dictionary.audio_conversion_waiting}
+          </span>
           <TooltipProvider>
             <Tooltip>
               <TooltipTrigger asChild>

apps/web/src/app/[locale]/app/upload/upload-list/columns/audio-upload-progress-column.tsx

@@ -11,8 +11,8 @@ import { useCallback } from 'react'
 
 import { Button } from '@/components/ui/button'
 import { Progress } from '@/components/ui/progress'
-import { audioUploadAtom, startAudioUploadAtom } from '@/state/uploads'
 import { useDictionary } from '@/state/dictionary'
+import { audioUploadAtom, startAudioUploadAtom } from '@/state/uploads'
 
 export interface AudioUploadProgressColumnProps {
   uploadId: string
@@ -46,7 +46,9 @@ export function AudioUploadProgressColumn({
           {progress === 0 && !error ? (
             <>
               <DotsHorizontalIcon className="mr-2 h-4 w-4" />
-              <span className="text-muted-foreground">{dictionary.audio_upload_waiting}</span>
+              <span className="text-muted-foreground">
+                {dictionary.audio_upload_waiting}
+              </span>
             </>
           ) : error ? (
             <>
@@ -65,7 +67,9 @@ export function AudioUploadProgressColumn({
           ) : (
             <>
               <CheckCircledIcon className="mr-2 h-4 w-4 text-emerald-500" />
-              <span className="text-emerald-500">{dictionary.audio_upload_complete}</span>
+              <span className="text-emerald-500">
+                {dictionary.audio_upload_complete}
+              </span>
             </>
           )}
         </div>

apps/web/src/app/[locale]/app/upload/upload-list/columns/video-upload-progress-column.tsx

@@ -8,10 +8,10 @@ import {
 import { useAtomValue, useSetAtom } from 'jotai'
 import { selectAtom } from 'jotai/utils'
 import { useCallback } from 'react'
-import { useDictionary } from '@/state/dictionary'
 
 import { Button } from '@/components/ui/button'
 import { Progress } from '@/components/ui/progress'
+import { useDictionary } from '@/state/dictionary'
 import { startVideoUploadAtom, videoUploadAtom } from '@/state/uploads'
 
 export interface VideoUploadProgressColumnProps {
@@ -46,7 +46,9 @@ export function VideoUploadProgressColumn({
           {progress === 0 && !error ? (
             <>
               <DotsHorizontalIcon className="mr-2 h-4 w-4" />
-              <span className="text-muted-foreground">{dictionary.video_upload_waiting}</span>
+              <span className="text-muted-foreground">
+                {dictionary.video_upload_waiting}
+              </span>
             </>
           ) : error ? (
             <>
@@ -65,7 +67,9 @@ export function VideoUploadProgressColumn({
           ) : (
             <>
               <CheckCircledIcon className="mr-2 h-4 w-4 text-emerald-500" />
-              <span className="text-emerald-500">{dictionary.video_upload_complete}</span>
+              <span className="text-emerald-500">
+                {dictionary.video_upload_complete}
+              </span>
             </>
           )}
         </div>

apps/web/src/app/[locale]/app/upload/upload-list/header.tsx

@@ -5,7 +5,6 @@ import axios from 'axios'
 import { useAtom, useAtomValue, useSetAtom } from 'jotai'
 import { ChevronDownIcon, Loader2 } from 'lucide-react'
 import { useFormContext } from 'react-hook-form'
-import { useDictionary } from '@/state/dictionary'
 
 import {
   AlertDialog,
@@ -22,10 +21,11 @@ import { Button } from '@/components/ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 import { Separator } from '@/components/ui/separator'
+import { useDictionary } from '@/state/dictionary'
 import {
   amountOfUploadsAtom,
   areUploadsEmptyAtom,
@@ -131,13 +131,17 @@ export function Header({ onSubmit }: HeaderProps) {
           </AlertDialogTrigger>
           <AlertDialogContent>
             <AlertDialogHeader>
-              <AlertDialogTitle>{dictionary.alert_dialog_title}</AlertDialogTitle>
+              <AlertDialogTitle>
+                {dictionary.alert_dialog_title}
+              </AlertDialogTitle>
               <AlertDialogDescription>
                 {dictionary.alert_dialog_description}
               </AlertDialogDescription>
             </AlertDialogHeader>
             <AlertDialogFooter>
-              <AlertDialogCancel>{dictionary.alert_dialog_cancel}</AlertDialogCancel>
+              <AlertDialogCancel>
+                {dictionary.alert_dialog_cancel}
+              </AlertDialogCancel>
               <AlertDialogAction onClick={clearUploads}>
                 {dictionary.alert_dialog_proceed}
               </AlertDialogAction>

apps/web/src/app/[locale]/app/upload/upload-list/index.tsx

@@ -1,33 +1,36 @@
 'use client'
 
 import { zodResolver } from '@hookform/resolvers/zod'
+import { Dictionary } from '@nivo/i18n'
 import { useRouter } from 'next/navigation'
 import { FormProvider, useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import { z } from 'zod'
-import { useDictionary } from '@/state/dictionary'
 
 import { trpc } from '@/lib/trpc/react'
+import { useDictionary } from '@/state/dictionary'
 
 import { Header } from './header'
 import { UploadDropArea } from './upload-drop-area'
 import { UploadTable } from './upload-table'
-import { Dictionary } from '@nivo/i18n'
 
-const uploadsFormSchema = (dictionary: Dictionary) => z.object({
-  files: z
-    .array(
-      z.object({
-        id: z.string(),
-        title: z.string().min(1),
-        duration: z.coerce.number().transform(Math.round),
-        language: z.enum(['pt', 'es']),
-        sizeInBytes: z.coerce.number(),
-        tags: z.array(z.string()).min(1, { message: dictionary.upload_list_at_least_one_tag }),
-      }),
-    )
-    .min(0),
-})
+const uploadsFormSchema = (dictionary: Dictionary) =>
+  z.object({
+    files: z
+      .array(
+        z.object({
+          id: z.string(),
+          title: z.string().min(1),
+          duration: z.coerce.number().transform(Math.round),
+          language: z.enum(['pt', 'es']),
+          sizeInBytes: z.coerce.number(),
+          tags: z
+            .array(z.string())
+            .min(1, { message: dictionary.upload_list_at_least_one_tag }),
+        }),
+      )
+      .min(0),
+  })
 
 export type UploadsFormSchema = z.infer<ReturnType<typeof uploadsFormSchema>>
 

apps/web/src/app/[locale]/app/upload/upload-list/upload-drop-area.tsx

@@ -4,8 +4,8 @@ import { UploadIcon } from '@radix-ui/react-icons'
 import { useSetAtom } from 'jotai'
 import { useDropzone } from 'react-dropzone'
 
-import { addUploadsAtom } from '@/state/uploads'
 import { useDictionary } from '@/state/dictionary'
+import { addUploadsAtom } from '@/state/uploads'
 
 export function UploadDropArea() {
   const dictionary = useDictionary()
@@ -30,8 +30,12 @@ export function UploadDropArea() {
       >
         <UploadIcon className="h-4 w-4" />
         <div className="flex flex-col gap-1 text-center">
-          <span className="font-medium">{dictionary.upload_drop_area_drop_here}</span>
-          <span className="text-xs text-zinc-400">{dictionary.upload_drop_area_accept_mp4}</span>
+          <span className="font-medium">
+            {dictionary.upload_drop_area_drop_here}
+          </span>
+          <span className="text-xs text-zinc-400">
+            {dictionary.upload_drop_area_accept_mp4}
+          </span>
         </div>
       </label>