feat: Update translation files and add language support

src/Agenda3/components/MainArea.tsx

@@ -5,11 +5,9 @@ import { useAtom, useAtomValue } from 'jotai'
 import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { FiSettings, FiXCircle } from 'react-icons/fi'
-import { GoGoal } from 'react-icons/go'
 import { LuCalendarDays, LuKanbanSquare } from 'react-icons/lu'
 
 import { track } from '@/Agenda3/helpers/umami'
-import i18n from '@/Agenda3/locales/i18n'
 import { type App, appAtom } from '@/Agenda3/models/app'
 import { settingsAtom } from '@/Agenda3/models/settings'
 import { cn } from '@/util/util'
@@ -21,25 +19,6 @@ import CalendarOperation, { type CalendarView } from './calendar/CalendarAdvance
 import KanBan, { type KanBanHandle } from './kanban/KanBan'
 import SettingsModal from './modals/SettingsModal'
 
-const VIEWS = [
-  {
-    value: 'calendar',
-    label: (
-      <div className="flex items-center gap-1">
-        <LuCalendarDays className="text-base" /> {i18n.t('Calendar')}
-      </div>
-    ),
-  },
-  {
-    value: 'tasks',
-    label: (
-      <div className="flex items-center gap-1">
-        <LuKanbanSquare className="text-base" /> {i18n.t('Tasks')}
-      </div>
-    ),
-  },
-]
-
 const MultipleView = ({ className }: { className?: string }) => {
   const { t } = useTranslation()
   const kanbanRef = useRef<KanBanHandle>(null)
@@ -49,6 +28,25 @@ const MultipleView = ({ className }: { className?: string }) => {
 
   const [calendarTitle, setCalendarTitle] = useState('')
 
+  const VIEWS = [
+    {
+      value: 'calendar',
+      label: (
+        <div className="flex items-center gap-1">
+          <LuCalendarDays className="text-base" /> {t('Calendar')}
+        </div>
+      ),
+    },
+    {
+      value: 'tasks',
+      label: (
+        <div className="flex items-center gap-1">
+          <LuKanbanSquare className="text-base" /> {t('Tasks')}
+        </div>
+      ),
+    },
+  ]
+
   const onClickToday = () => {
     if (app.view === 'calendar') {
       calendarRef.current?.navToday()

src/Agenda3/components/calendar/CalendarAdvancedOperation.tsx

@@ -1,5 +1,6 @@
 import { Button, Dropdown, Switch } from 'antd'
 import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { IoMdCheckmark } from 'react-icons/io'
 
 import useSettings from '@/Agenda3/hooks/useSettings'
@@ -10,13 +11,16 @@ const CALENDAR_VIEWS = {
   timeGridWeek: 'timeGridWeek',
 } as const
 export type CalendarView = keyof typeof CALENDAR_VIEWS
-const CALENDAR_OPTIONS = [
-  { value: CALENDAR_VIEWS.dayGridMonth, label: 'Month' },
-  // { value: 'dayGridWeek', label: '2 Weeks' },
-  { value: CALENDAR_VIEWS.timeGridWeek, label: 'Week' },
-]
 
 const CalendarOperation = ({ value, onChange }: { value: CalendarView; onChange: (view: CalendarView) => void }) => {
+  const { t } = useTranslation()
+
+  const CALENDAR_OPTIONS = [
+    { value: CALENDAR_VIEWS.dayGridMonth, label: t('Month') },
+    // { value: 'dayGridWeek', label: '2 Weeks' },
+    { value: CALENDAR_VIEWS.timeGridWeek, label: t('Week') },
+  ]
+
   const { settings, setSettings } = useSettings()
   const [open, setOpen] = useState(false)
 
@@ -33,15 +37,15 @@ const CalendarOperation = ({ value, onChange }: { value: CalendarView; onChange:
       onOpenChange={setOpen}
       dropdownRender={() => {
         return (
-          <div className="bg-white rounded-md shadow-lg">
-            <div className="border-b py-2 px-2 flex flex-col gap-1">
+          <div className="rounded-md bg-white shadow-lg">
+            <div className="flex flex-col gap-1 border-b py-2 px-2">
               {CALENDAR_OPTIONS.map((view) => {
                 const isSelected = value === view.value
                 return (
                   <div
                     key={view.value}
                     className={cn(
-                      'flex items-center justify-between gap-2 cursor-pointer px-2 py-1 rounded hover:bg-gray-300 min-w-[120px]',
+                      'flex min-w-[120px] cursor-pointer items-center justify-between gap-2 rounded px-2 py-1 hover:bg-gray-300',
                       {
                         'bg-gray-200': isSelected,
                       },
@@ -55,7 +59,7 @@ const CalendarOperation = ({ value, onChange }: { value: CalendarView; onChange:
               })}
             </div>
             <div className="px-4 py-2">
-              <span>Hide Completed Tasks</span>
+              <span>{t('Hide Completed Tasks')}</span>
               <Switch
                 size="small"
                 className="ml-3"

src/Agenda3/components/kanban/AddTaskCard.tsx

@@ -1,4 +1,5 @@
 import dayjs, { type Dayjs } from 'dayjs'
+import { useTranslation } from 'react-i18next'
 import { IoAddCircleOutline } from 'react-icons/io5'
 
 import { minutesToHHmm } from '@/Agenda3/helpers/fullCalendar'
@@ -18,6 +19,7 @@ const AddTaskCard = ({
   actualTime?: number
   estimatedTime: number
 }) => {
+  const { t } = useTranslation()
   const isToday = day.isSame(dayjs(), 'day')
 
   return (
@@ -34,7 +36,7 @@ const AddTaskCard = ({
         <div className="flex items-center gap-1">
           <IoAddCircleOutline />
           <span className={cn('transition-opacity group-hover:opacity-100', { 'opacity-0': !isToday })}>
-            Add a task
+            {t('Add a task')}
           </span>
         </div>
         {actualTime ? (

src/Agenda3/components/kanban/ColumnTitle.tsx

@@ -1,9 +1,11 @@
 // import { message } from 'antd'
 import dayjs, { type Dayjs } from 'dayjs'
+import { useTranslation } from 'react-i18next'
 
 import PlannerModal from '../modals/PlannerModal/PlannerModal'
 
 const ColumnTitle = ({ day }: { day: Dayjs }) => {
+  const { t } = useTranslation()
   const today = dayjs()
   const isToday = day.isSame(today, 'day')
   const isTomorrow = day.isSame(today.add(1, 'day'), 'day')
@@ -18,12 +20,12 @@ const ColumnTitle = ({ day }: { day: Dayjs }) => {
       <div className="flex items-center gap-2">
         {isToday ? (
           <PlannerModal type="today" triggerClassName="text-[10px] text-gray-400 hover:text-gray-700 cursor-pointer">
-            Plan
+            {t('Plan')}
           </PlannerModal>
         ) : null}
         {isTomorrow ? (
           <PlannerModal type="tomorrow" triggerClassName="text-[10px] text-gray-400 hover:text-gray-700 cursor-pointer">
-            Plan
+            {t('Plan')}
           </PlannerModal>
         ) : null}
         {/* {isFuture ? null : (

src/Agenda3/components/modals/SettingsModal/index.tsx

@@ -1,5 +1,6 @@
 import { Modal } from 'antd'
 import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 
 import { cn } from '@/util/util'
 
@@ -36,6 +37,7 @@ type Tab = (typeof tabs)[number]['key']
 const defaultTab = 'general'
 
 const SettingsModal = ({ children, initialTab }: { children?: React.ReactNode; initialTab?: Tab }) => {
+  const { t } = useTranslation()
   const [open, setOpen] = useState(false)
   const [activeTab, setActiveTab] = useState<Tab>()
   const finalActiveTab = activeTab ? activeTab : initialTab ?? defaultTab
@@ -62,11 +64,11 @@ const SettingsModal = ({ children, initialTab }: { children?: React.ReactNode; i
         <div className="flex">
           {/* sidebar */}
           <div className="w-[300px] bg-gray-100 px-4 py-4">
-            <div className="font-semibold">APP SETTINGS</div>
+            <div className="font-semibold uppercase">{t('app settings')}</div>
             {tabs.map((tab) => (
               <div
                 key={tab.key}
-                className={cn('cursor-pointer hover:bg-gray-200 rounded p-2 mt-1', {
+                className={cn('mt-1 cursor-pointer rounded p-2 hover:bg-gray-200', {
                   'bg-gray-200': tab.key === finalActiveTab,
                 })}
                 onClick={() => setActiveTab(tab.key)}

src/Agenda3/components/modals/TaskModal/index.tsx

@@ -3,6 +3,7 @@ import type { MentionsRef } from 'antd/es/mentions'
 import dayjs, { type Dayjs } from 'dayjs'
 import { useAtomValue } from 'jotai'
 import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { BsCalendar4Event, BsCalendar4Range, BsClock, BsClockHistory } from 'react-icons/bs'
 import { GoGoal } from 'react-icons/go'
 import { IoIosCheckmarkCircleOutline } from 'react-icons/io'
@@ -54,6 +55,7 @@ const TaskModal = ({
         initialTaskData: AgendaTaskWithStart
       }
 }) => {
+  const { t } = useTranslation()
   const [internalOpen, setInternalOpen] = useState(false)
   const _open = children ? internalOpen : open
   const [mode, setMode] = useState<'Normal' | 'Advanced'>('Normal')
@@ -180,7 +182,7 @@ const TaskModal = ({
                   disabled={editDisabled}
                   onClick={() => onSwitchTaskStatus('done')}
                 >
-                  Complete
+                  {t('Complete')}
                 </Button>
               ) : null}
               {info.type === 'edit' && info.initialTaskData.status === 'done' ? (
@@ -190,7 +192,7 @@ const TaskModal = ({
                   icon={<RiCheckboxBlankCircleLine />}
                   onClick={() => onSwitchTaskStatus('todo')}
                 >
-                  Incomplete
+                  {t('Incomplete')}
                 </Button>
               ) : null}
               {info.type === 'edit' ? (
@@ -204,7 +206,7 @@ const TaskModal = ({
                     className="inline-flex items-center px-2 hover:!border-red-500 hover:!text-red-500"
                     icon={<RiDeleteBin4Line />}
                   >
-                    Delete
+                    {t('Delete')}
                   </Button>
                 </Popconfirm>
               ) : null}
@@ -223,10 +225,10 @@ const TaskModal = ({
             </div>
             <div>
               <Button key="cancel" onClick={handleCancel}>
-                Cancel
+                {t('Cancel')}
               </Button>
               <Button key="ok" type="primary" onClick={handleOk} disabled={editDisabled}>
-                {info.type === 'create' ? 'Add Task' : 'Save'}
+                {info.type === 'create' ? t('Add Task') : t('Save')}
               </Button>
             </div>
           </div>
@@ -243,7 +245,7 @@ const TaskModal = ({
           onChange={(val) => updateFormData({ title: val.replace(/\n/, '') })}
           notFoundContent={
             <Button type="link" size="small" onClick={createPage}>
-              New Page: {titleTagSearchText}
+              {t('New Page')}: {titleTagSearchText}
             </Button>
           }
           onSearch={(text) => setTitleTagSearchText(text)}
@@ -252,7 +254,7 @@ const TaskModal = ({
         {formData.endDateVal ? (
           <div className="my-2 flex">
             <div className="flex w-[160px] items-center gap-1 text-gray-400">
-              <BsCalendar4Range /> Date Range
+              <BsCalendar4Range /> {t('Date Range')}
             </div>
             <div className="group flex items-center gap-1">
               <DatePicker.RangePicker
@@ -272,7 +274,7 @@ const TaskModal = ({
         ) : (
           <div className="my-2 flex">
             <div className="flex w-[160px] items-center gap-1 text-gray-400">
-              <BsCalendar4Event /> Start Date
+              <BsCalendar4Event /> {t('Start Date')}
             </div>
             <div className="group flex items-center gap-1">
               <Popover
@@ -299,7 +301,7 @@ const TaskModal = ({
                   {formData.startDateVal && start ? (
                     start.format(showStartTimeFormatter)
                   ) : (
-                    <span className="text-gray-400">Select start Date</span>
+                    <span className="text-gray-400">{t('Select start Date')}</span>
                   )}
                 </div>
               </Popover>
@@ -315,7 +317,7 @@ const TaskModal = ({
         {/* ========= Estimated Time Start ========= */}
         <div className="my-2 flex">
           <div className="flex w-[160px] items-center gap-1 text-gray-400">
-            <BsClock /> Estimated Time
+            <BsClock /> {t('Estimated Time')}
           </div>
           <DurationSelect
             bordered={false}
@@ -330,13 +332,13 @@ const TaskModal = ({
         {info.type === 'edit' ? (
           <div className="flex items-start">
             <div className="flex h-[32px] w-[160px] items-center gap-1 text-gray-400">
-              <BsClockHistory /> Actual Time
+              <BsClockHistory /> {t('Actual Time')}
             </div>
             <div>
               <div className="flex h-[32px] cursor-pointer items-center gap-2 px-3 py-1">
                 {formData.actualTime}
                 <div className="text-xs text-gray-400 hover:text-gray-800" onClick={addDefaultTimeLog}>
-                  (Add a log)
+                  ({t('Add a log')})
                 </div>
               </div>
               {editHookResult.formData.timeLogs?.map((timeLog, index) => (
@@ -357,7 +359,7 @@ const TaskModal = ({
         {/* ========= Actual Time End ========= */}
 
         {/* ========= Objective Start ========= */}
-        <div className="my-2 flex">
+        {/* <div className="my-2 flex">
           <div className="flex w-[160px] items-center gap-1 text-gray-400">
             <GoGoal /> Objective
           </div>
@@ -366,14 +368,13 @@ const TaskModal = ({
             value={formData.bindObjectiveId}
             onChange={(val) => updateFormData({ bindObjectiveId: val })}
           />
-        </div>
+        </div> */}
         {/* ========= Objective End ========= */}
 
         {/* ========= Page Start ========= */}
         <div className="my-2 flex">
           <div className="flex w-[160px] items-center gap-1 text-gray-400">
-            {/* <BsClipboard /> Page */}
-            <PageIcon /> Page
+            <PageIcon /> {t('Page')}
           </div>
           <PageSelect
             showPageColor={groupType === 'page'}

src/Agenda3/components/timebox/TimeBox.tsx

@@ -7,6 +7,7 @@ import { Button } from 'antd'
 import dayjs from 'dayjs'
 import { useAtomValue } from 'jotai'
 import { useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { MdSchedule } from 'react-icons/md'
 
 import { genDurationString, updateBlockDateInfo } from '@/Agenda3/helpers/block'
@@ -42,6 +43,7 @@ const FULL_CALENDAR_24HOUR_FORMAT = {
   hour12: false,
 } as const
 const TimeBox = ({ onChangeType }: { onChangeType?: () => void }) => {
+  const { t } = useTranslation()
   const settings = useAtomValue(settingsAtom)
   const groupType = settings.selectedFilters?.length ? 'filter' : 'page'
   const calendarRef = useRef<FullCalendar>(null)
@@ -147,7 +149,7 @@ const TimeBox = ({ onChangeType }: { onChangeType?: () => void }) => {
         <div className="mr-4 flex opacity-0 transition-opacity group-hover/root:opacity-100">
           <Button size="small" type="text" icon={<LeftOutlined />} onClick={() => onClickNav('prev')} />
           <Button size="small" type="text" onClick={() => onClickNav('today')}>
-            Today
+            {t('Today')}
           </Button>
           <Button size="small" type="text" icon={<RightOutlined />} onClick={() => onClickNav('next')} />
         </div>

src/Agenda3/locales/en/translation.json

@@ -1,5 +1,26 @@
 {
   "Today": "Today",
   "Calendar": "Calendar",
-  "Tasks": "Tasks"
+  "Tasks": "Tasks",
+  "Complete": "Complete",
+  "Incomplete": "Incomplete",
+  "Delete": "Delete",
+  "Cancel": "Cancel",
+  "Save": "Save",
+  "Add Task": "Add Task",
+  "New Page": "New Page",
+  "Date Range": "Date Range",
+  "Start Date": "Start Date",
+  "Select start Date": "Select start Date",
+  "Estimated Time": "Estimated Time",
+  "Duration": "Duration",
+  "Actual Time": "Actual Time",
+  "Add a log": "Add a log",
+  "Page": "Page",
+  "Plan": "Plan",
+  "Add a task": "Add a task",
+  "Hide Completed Tasks": "Hide Completed Tasks",
+  "Month": "Month",
+  "Week": "Week",
+  "app settings": "app settings"
 }