feat: Translate labels and titles in SettingsModal

src/Agenda3/components/modals/EditFilterModal.tsx

@@ -1,5 +1,6 @@
-import { Button, ColorPicker, Form, Input, Modal } from 'antd'
+import { Form, Input, Modal } from 'antd'
 import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 
 import type { Filter } from '@/Agenda3/models/settings'
 import { BACKGROUND_COLOR, DEFAULT_BG_COLOR_NAME } from '@/constants/agenda'
@@ -18,6 +19,7 @@ const EditFilterModal = ({
   onOk: (param: Filter) => void
   initialValues?: Filter
 }) => {
+  const { t } = useTranslation()
   const [open, setOpen] = useState(false)
   const [formRef] = Form.useForm<Filter>()
   const handleClickOk = async () => {
@@ -34,7 +36,7 @@ const EditFilterModal = ({
       <Modal
         destroyOnClose
         open={open}
-        title={type === 'create' ? 'Create Filter' : 'Edit Filter'}
+        title={type === 'create' ? t('Create Filter') : t('Edit Filter')}
         onCancel={() => setOpen(false)}
         onOk={handleClickOk}
       >
@@ -45,10 +47,10 @@ const EditFilterModal = ({
           preserve={false}
           className="mt-8"
         >
-          <Form.Item label="Filter Color" name="color" rules={[{ required: true }]}>
+          <Form.Item label={t('Filter Color')} name="color" rules={[{ required: true }]}>
             <ColorPickerCom />
           </Form.Item>
-          <Form.Item label="Filter Name" name="name" rules={[{ required: true }]}>
+          <Form.Item label={t('Filter Name')} name="name" rules={[{ required: true }]}>
             <Input />
           </Form.Item>
           <Form.Item label="Query" name="query" rules={[{ required: true }]}>

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

@@ -1,6 +1,9 @@
+import { useTranslation } from 'react-i18next'
+
 import logo from '@/assets/logo.png'
 
 const About = () => {
+  const { t } = useTranslation()
   const onClickLink = (link: string) => {
     if (import.meta.env.VITE_MODE === 'plugin') {
       logseq.App.openExternalLink(link)
@@ -11,33 +14,35 @@ const About = () => {
   }
   return (
     <>
-      <div className="h-14 pl-4 flex items-center font-semibold text-lg border-b">About</div>
-      <div className="flex flex-col justify-center items-center pb-6">
-        <img src={logo} className="w-20 mt-6" />
+      <div className="flex h-14 items-center border-b pl-4 text-lg font-semibold">{t('About')}</div>
+      <div className="flex flex-col items-center justify-center pb-6">
+        <img src={logo} className="mt-6 w-20" />
         <h1 className="text-xl">Agenda</h1>
-        <div className="text-gray-400">version: v{__APP_VERSION__}</div>
+        <div className="text-gray-400">
+          {t('version')}: v{__APP_VERSION__}
+        </div>
         <div className="flex divide-x">
           <a
             className="pr-2"
             onClick={() => onClickLink('https://haydenut.notion.site/Agenda3-ef115e277c864de3b2679d6bda0e6376')}
           >
-            User Manual
+            {t('User Manual')}
           </a>
           <a className="pl-2" onClick={() => onClickLink('https://github.com/haydenull/logseq-plugin-agenda')}>
-            Github Repo
+            {t('Github Repo')}
           </a>
         </div>
-        <div className="text-xs text-gray-400 w-96">
-          Please note that the beta version is still under development and may contain bugs. We encourage you to test it
-          out and provide feedback on any issues or suggestions on our GitHub page. Your input is valuable in ensuring a
-          stable and polished final release.
+        <div className="w-96 text-xs text-gray-400">
+          {t(
+            'Please note that the beta version is still under development and may contain bugs. We encourage you to test it out and provide feedback on any issues or suggestions on our GitHub page. Your input is valuable in ensuring a stable and polished final release.',
+          )}
         </div>
         <div className="mt-2 flex flex-col gap-2">
           <a className="w-[190px]" onClick={() => onClickLink('https://www.buymeacoffee.com/haydenull')}>
             <img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=haydenull&button_colour=40DCA5&font_colour=ffffff&font_family=Cookie&outline_colour=000000&coffee_colour=FFDD00" />
           </a>
           <a
-            className="w-[190px] bg-[#946ce6] flex items-center justify-center rounded-lg"
+            className="flex w-[190px] items-center justify-center rounded-lg bg-[#946ce6]"
             onClick={() => onClickLink('https://afdian.net/a/haydenull')}
           >
             <img width="156" src="https://pic1.afdiancdn.com/static/img/welcome/button-sponsorme.jpg" alt="" />

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

@@ -1,4 +1,5 @@
 import { Button } from 'antd'
+import { useTranslation } from 'react-i18next'
 import { RiDeleteBin4Line, RiEdit2Line } from 'react-icons/ri'
 import { ReactSortable } from 'react-sortablejs'
 
@@ -8,6 +9,7 @@ import type { Filter } from '@/Agenda3/models/settings'
 import EditFilterModal from '../EditFilterModal'
 
 const FiltersForm = () => {
+  const { t } = useTranslation()
   const { settings, setSettings } = useSettings()
   const oldFilters = settings.filters ?? []
   const oldSelectedFilters = settings.selectedFilters ?? []
@@ -18,11 +20,11 @@ const FiltersForm = () => {
 
   return (
     <>
-      <div className="h-14 pl-4 flex items-center font-semibold text-lg border-b">Filters</div>
-      <div className="px-4 mt-4 pb-8">
+      <div className="flex h-14 items-center border-b pl-4 text-lg font-semibold">{t('Filters')}</div>
+      <div className="mt-4 px-4 pb-8">
         <div className="mt-4 flex flex-col gap-1">
           <EditFilterModal type="create" onOk={(filter) => onChange('filters', oldFilters.concat(filter))}>
-            <Button>Create Filter</Button>
+            <Button>{t('Create Filter')}</Button>
           </EditFilterModal>
           {settings.filters?.length ? (
             <ReactSortable
@@ -34,7 +36,7 @@ const FiltersForm = () => {
               {settings.filters?.map((filter) => (
                 <div
                   key={filter.id}
-                  className="flex items-center justify-between mb-2 w-[300px] border rounded px-4 py-1.5 text-white"
+                  className="mb-2 flex w-[300px] items-center justify-between rounded border px-4 py-1.5 text-white"
                   style={{ backgroundColor: filter.color }}
                 >
                   <span>{filter.name}</span>

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

@@ -19,15 +19,15 @@ const GeneralSettingsForm = () => {
 
   return (
     <>
-      <div className="flex h-14 items-center border-b pl-4 text-lg font-semibold">General Settings</div>
+      <div className="flex h-14 items-center border-b pl-4 text-lg font-semibold">{t('General Settings')}</div>
       <div className="mt-4 px-4 pb-8">
         <div className="mt-4 flex flex-col gap-1">
           <Checkbox
             checked={settings.general?.useJournalDayAsSchedule}
             onChange={(e) => onChange('general.useJournalDayAsSchedule', e.target.checked)}
           >
             <Tooltip title="When the task in the journal is not scheduled, use the date of the journal as the task date.">
-              Use Journal Day As Schedule
+              {t('Use Journal Day As Schedule')}
             </Tooltip>
           </Checkbox>
         </div>

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

@@ -1,11 +1,13 @@
 import { CopyOutlined, QuestionCircleOutlined } from '@ant-design/icons'
 import { Input, Tooltip, message } from 'antd'
 import copy from 'copy-to-clipboard'
+import { useTranslation } from 'react-i18next'
 
 import useSettings from '@/Agenda3/hooks/useSettings'
 import type { Filter } from '@/Agenda3/models/settings'
 
 const ShareAgendaForm = () => {
+  const { t } = useTranslation()
   const { settings, setSettings } = useSettings()
   const icsUrl = `https://agenda-ics.haydenhayden.com?repo=${settings.ics?.repo}&token=${settings.ics?.token}`
 
@@ -19,10 +21,10 @@ const ShareAgendaForm = () => {
 
   return (
     <>
-      <div className="h-14 pl-4 flex items-center font-semibold text-lg border-b">ICS File Setting</div>
-      <div className="px-4 mt-4 pb-8">
+      <div className="flex h-14 items-center border-b pl-4 text-lg font-semibold">{t('ICS File Setting')}</div>
+      <div className="mt-4 px-4 pb-8">
         <div className="mt-4">
-          <div className="text-gray-500">Github Repo</div>
+          <div className="text-gray-500">{t('Github Repo')}</div>
           <Input
             className="w-[300px]"
             placeholder="username/repo"

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

@@ -1,9 +1,11 @@
 import { Checkbox } from 'antd'
+import { useTranslation } from 'react-i18next'
 
 import useSettings from '@/Agenda3/hooks/useSettings'
 import type { Filter } from '@/Agenda3/models/settings'
 
 const ViewOptionsForm = () => {
+  const { t } = useTranslation()
   const { settings, setSettings } = useSettings()
 
   const onChange = (key: string, value: string | boolean | undefined | Filter[] | string[]) => {
@@ -12,29 +14,29 @@ const ViewOptionsForm = () => {
 
   return (
     <>
-      <div className="h-14 pl-4 flex items-center font-semibold text-lg border-b">View Options</div>
-      <div className="px-4 mt-4 pb-8">
+      <div className="flex h-14 items-center border-b pl-4 text-lg font-semibold">{t('View Options')}</div>
+      <div className="mt-4 px-4 pb-8">
         <div className="mt-4 flex flex-col gap-1">
           <Checkbox
             checked={settings.viewOptions?.showFirstEventInCycleOnly}
             onChange={(e) => onChange('viewOptions.showFirstEventInCycleOnly', e.target.checked)}
           >
-            Only Show First Event In Cycle
+            {t('Only Show First Event In Cycle')}
           </Checkbox>
           <Checkbox
             checked={settings.viewOptions?.showTimeLog}
             onChange={(e) => onChange('viewOptions.showTimeLog', e.target.checked)}
           >
-            Show Time Log
+            {t('Show Time Log')}
           </Checkbox>
         </div>
         <div className="mt-4">
-          <div className="text-gray-500">Calendar</div>
+          <div className="text-gray-500">{t('Calendar')}</div>
           <Checkbox
             checked={settings.viewOptions?.hideCompleted}
             onChange={(e) => onChange('viewOptions.hideCompleted', e.target.checked)}
           >
-            Hide Completed Tasks
+            {t('Hide Completed Tasks')}
           </Checkbox>
         </div>
       </div>

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

@@ -42,6 +42,11 @@ const SettingsModal = ({ children, initialTab }: { children?: React.ReactNode; i
   const [activeTab, setActiveTab] = useState<Tab>()
   const finalActiveTab = activeTab ? activeTab : initialTab ?? defaultTab
 
+  const translatedTabs = tabs.map((tab) => ({
+    ...tab,
+    label: t(tab.label),
+  }))
+
   const renderForm = () => {
     switch (finalActiveTab) {
       case 'shareAgenda':
@@ -65,7 +70,7 @@ const SettingsModal = ({ children, initialTab }: { children?: React.ReactNode; i
           {/* sidebar */}
           <div className="w-[300px] bg-gray-100 px-4 py-4">
             <div className="font-semibold uppercase">{t('app settings')}</div>
-            {tabs.map((tab) => (
+            {translatedTabs.map((tab) => (
               <div
                 key={tab.key}
                 className={cn('mt-1 cursor-pointer rounded p-2 hover:bg-gray-200', {

src/Agenda3/locales/en/translation.json

@@ -22,5 +22,22 @@
   "Hide Completed Tasks": "Hide Completed Tasks",
   "Month": "Month",
   "Week": "Week",
-  "app settings": "app settings"
+  "app settings": "app settings",
+  "General Settings": "General Settings",
+  "Use Journal Day As Schedule": "Use Journal Day As Schedule",
+  "View Options": "View Options",
+  "Only Show First Event In Cycle": "Only Show First Event In Cycle",
+  "Show Time Log": "Show Time Log",
+  "Filters": "Filters",
+  "Create Filter": "Create Filter",
+  "Edit Filter": "Edit Filter",
+  "Filter Color": "Filter Color",
+  "Filter Name": "Filter Name",
+  "Share Agenda": "Share Agenda",
+  "ICS File Setting": "ICS File Setting",
+  "Github Repo": "Github Repo",
+  "About": "About",
+  "version": "version",
+  "User Manual": "User Manual",
+  "Please note that the beta version is still under development and may contain bugs. We encourage you to test it out and provide feedback on any issues or suggestions on our GitHub page. Your input is valuable in ensuring a stable and polished final release.": "Please note that the beta version is still under development and may contain bugs. We encourage you to test it out and provide feedback on any issues or suggestions on our GitHub page. Your input is valuable in ensuring a stable and polished final release."
 }

src/Agenda3/locales/zh-CN/translation.json

@@ -22,5 +22,22 @@
   "Hide Completed Tasks": "隐藏已完成任务",
   "Month": "月视图",
   "Week": "周视图",
-  "app settings": "应用设置"
+  "app settings": "应用设置",
+  "General Settings": "通用设置",
+  "Use Journal Day As Schedule": "使用日志日期作为任务日期",
+  "View Options": "视图设置",
+  "Only Show First Event In Cycle": "只显示循环任务周期中的第一个事件",
+  "Show Time Log": "显示时间日志",
+  "Filters": "过滤器",
+  "Create Filter": "创建过滤器",
+  "Edit Filter": "编辑过滤器",
+  "Filter Color": "过滤器颜色",
+  "Filter Name": "过滤器名称",
+  "Share Agenda": "分享日程",
+  "ICS File Setting": "ICS 文件设置",
+  "Github Repo": "Github 仓库",
+  "About": "关于",
+  "version": "版本",
+  "User Manual": "说明文档",
+  "Please note that the beta version is still under development and may contain bugs. We encourage you to test it out and provide feedback on any issues or suggestions on our GitHub page. Your input is valuable in ensuring a stable and polished final release.": "请注意，目前 Agenda 3 仍在开发阶段，可能出现错误。欢迎在 Github 上反馈问题或建议。"
 }