Added i18n support (#129)

components/DailyOverview.tsx

@@ -11,6 +11,7 @@ import { cn } from '@/lib/utils'
 import Link from 'next/link'
 import { useState } from 'react'
 import { useAtom } from 'jotai'
+import { useTranslations } from 'next-intl'
 import { pomodoroAtom, settingsAtom, completedHabitsMapAtom, browserSettingsAtom, BrowserSettings, hasTasksAtom } from '@/lib/atoms'
 import { getTodayInTimezone, isSameDate, t2d, d2t, getNow, isHabitDue, isTaskOverdue } from '@/lib/utils'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
@@ -54,6 +55,7 @@ const ItemSection = ({
   viewLink,
   addNewItem,
 }: ItemSectionProps) => {
+  const t = useTranslations('DailyOverview');
   const { completeHabit, undoComplete, saveHabit, deleteHabit, archiveHabit, habitFreqMap } = useHabits();
   const [_, setPomo] = useAtom(pomodoroAtom);
   const [browserSettings, setBrowserSettings] = useAtom(browserSettingsAtom);
@@ -105,7 +107,7 @@ const ItemSection = ({
             onClick={addNewItem}
           >
             <Plus className="h-4 w-4" />
-            <span className="sr-only">Add {isTask ? "Task" : "Habit"}</span>
+            <span className="sr-only">{t(isTask ? 'addTaskButtonLabel' : 'addHabitButtonLabel')}</span>
           </Button>
         </div>
         <div className="text-center text-muted-foreground text-sm py-4">
@@ -130,7 +132,7 @@ const ItemSection = ({
             onClick={addNewItem}
           >
             <Plus className="h-4 w-4" />
-            <span className="sr-only">Add {isTask ? "Task" : "Habit"}</span>
+            <span className="sr-only">{t(isTask ? 'addTaskButtonLabel' : 'addHabitButtonLabel')}</span>
           </Button>
         </div>
       </div>
@@ -239,7 +241,7 @@ const ItemSection = ({
                                     <AlertTriangle className="h-4 w-4 flex-shrink-0 text-red-600 dark:text-red-500" />
                                   </TooltipTrigger>
                                   <TooltipContent>
-                                    <p>Overdue</p>
+                                    <p>{t('overdueTooltip')}</p>
                                   </TooltipContent>
                                 </Tooltip>
                               </TooltipProvider>
@@ -305,12 +307,12 @@ const ItemSection = ({
         >
           {currentExpanded ? (
             <>
-              Show less
+              {t('showLessButton')}
               <ChevronUp className="h-3 w-3" />
             </>
           ) : (
             <>
-              Show all
+              {t('showAllButton')}
               <ChevronDown className="h-3 w-3" />
             </>
           )}
@@ -359,6 +361,7 @@ export default function DailyOverview({
   wishlistItems,
   coinBalance,
 }: UpcomingItemsProps) {
+  const t = useTranslations('DailyOverview');
   const { completeHabit, undoComplete } = useHabits()
   const [settings] = useAtom(settingsAtom)
   const [completedHabitsMap] = useAtom(completedHabitsMapAtom)
@@ -412,16 +415,16 @@ export default function DailyOverview({
     <>
       <Card>
         <CardHeader>
-          <CardTitle>Today's Overview</CardTitle>
+          <CardTitle>{t('todaysOverviewTitle')}</CardTitle>
         </CardHeader>
         <CardContent>
           <div className="space-y-6">
             {/* Tasks Section */}
             {hasTasks && (
               <ItemSection
-                title="Daily Tasks"
+                title={t('dailyTasksTitle')}
                 items={dailyTasks}
-                emptyMessage="No tasks due today. Add some tasks to get started!"
+                emptyMessage={t('noTasksDueTodayMessage')}
                 isTask={true}
                 viewLink="/habits?view=tasks"
                 addNewItem={() => setModalConfig({ isOpen: true, isTask: true })}
@@ -430,9 +433,9 @@ export default function DailyOverview({
 
             {/* Habits Section */}
             <ItemSection
-              title="Daily Habits"
+              title={t('dailyHabitsTitle')}
               items={dailyHabits}
-              emptyMessage="No habits due today. Add some habits to get started!"
+              emptyMessage={t('noHabitsDueTodayMessage')}
               isTask={false}
               viewLink="/habits"
               addNewItem={() => setModalConfig({ isOpen: true, isTask: false })}
@@ -440,16 +443,19 @@ export default function DailyOverview({
 
             <div className="space-y-2">
               <div className="flex items-center justify-between mb-2">
-                <h3 className="font-semibold">Wishlist Goals</h3>
+                <h3 className="font-semibold">{t('wishlistGoalsTitle')}</h3>
                 <Badge variant="secondary">
-                  {wishlistItems.filter(item => item.coinCost <= coinBalance).length}/{wishlistItems.length} Redeemable
+                  {t('redeemableBadgeLabel', {
+                    count: wishlistItems.filter(item => item.coinCost <= coinBalance).length,
+                    total: wishlistItems.length
+                  })}
                 </Badge>
               </div>
               <div>
                 <div className={`space-y-3 transition-all duration-300 ease-in-out ${browserSettings.expandedWishlist ? 'max-h-none' : 'max-h-[200px]'} overflow-hidden`}>
                   {sortedWishlistItems.length === 0 ? (
                     <div className="text-center text-muted-foreground text-sm py-4">
-                      No wishlist items yet. Add some goals to work towards!
+                      {t('noWishlistItemsMessage')}
                     </div>
                   ) : (
                     <>
@@ -496,8 +502,8 @@ export default function DailyOverview({
                               />
                               <p className="text-xs text-muted-foreground mt-2">
                                 {isRedeemable
-                                  ? "Ready to redeem!"
-                                  : `${item.coinCost - coinBalance} coins to go`
+                                  ? t('readyToRedeemMessage')
+                                  : t('coinsToGoMessage', { amount: item.coinCost - coinBalance })
                                 }
                               </p>
                             </Link>
@@ -513,12 +519,12 @@ export default function DailyOverview({
                   >
                     {browserSettings.expandedWishlist ? (
                       <>
-                        Show less
+                        {t('showLessButton')}
                         <ChevronUp className="h-3 w-3" />
                       </>
                     ) : (
                       <>
-                        Show all
+                        {t('showAllButton')}
                         <ChevronDown className="h-3 w-3" />
                       </>
                     )}
@@ -527,7 +533,7 @@ export default function DailyOverview({
                     href="/wishlist"
                     className="text-sm text-muted-foreground hover:text-primary flex items-center gap-1"
                   >
-                    View
+                    {t('viewButton')}
                     <ArrowRight className="h-3 w-3" />
                   </Link>
                 </div>