Implement i18n

https://youtrack.weseek.co.jp/issue/GW-7905
- Add translation for bookmark folder
- Implement i18n to all Bookmark folder component

packages/app/public/static/locales/en_US/translation.json

@@ -540,7 +540,8 @@
     "issue_share_link": "Succeeded to issue new share link",
     "remove_share_link": "Succeeded to remove {{count}} share links",
     "switch_disable_link_sharing_success": "Succeeded to update share link setting",
-    "failed_to_reset_password":"Failed to reset password"
+    "failed_to_reset_password":"Failed to reset password",
+    "delete_succeeded": "Succeeded to delete {{target}}"
   },
   "template": {
     "modal_label": {
@@ -866,5 +867,16 @@
   "footer": {
     "bookmarks": "Bookmarks",
     "recently_created": "Recently Created"
+  },
+  "bookmark_folder":{
+    "bookmark_folder": "bookmark folder",
+    "delete_modal": {
+      "modal_header_label": "Delete Bookmark Folder",
+      "modal_body_description": "Delete this bookmark folder and its contents",
+      "modal_body_alert": "Deleted folder and its contents cannot be recovered",
+      "modal_footer_button": "Delete Folder"
+    },
+    "input_placeholder": "Input folder name",
+    "new_folder": "New Folder"
   }
 }

packages/app/public/static/locales/ja_JP/translation.json

@@ -531,7 +531,8 @@
     "issue_share_link": "共有リンクを作成しました",
     "remove_share_link": "共有リンクを{{count}}件削除しました",
     "switch_disable_link_sharing_success": "共有リンクの設定を変更しました",
-    "failed_to_reset_password":"パスワードのリセットに失敗しました"
+    "failed_to_reset_password":"パスワードのリセットに失敗しました",
+    "delete_succeeded": "{{target}}の削除に成功しました"
   },
   "template": {
     "modal_label": {
@@ -857,5 +858,16 @@
   "footer": {
     "bookmarks": "ブックマーク",
     "recently_created": "最近作成したページ"
+  },
+  "bookmark_folder":{
+    "bookmark_folder": "ブックマーク フォルダ",
+    "delete_modal": {
+      "modal_header_label": "ブックマークフォルダを削除",
+      "modal_body_description": "このブックマーク フォルダとその内容を削除する",
+      "modal_body_alert": "削除されたフォルダとその内容は復元できません",
+      "modal_footer_button": "フォルダを削除"
+    },
+    "input_placeholder": "入力フォルダ名",
+    "new_folder": "新しいフォルダ"
   }
 }

packages/app/public/static/locales/zh_CN/translation.json

@@ -510,7 +510,8 @@
 		"remove_user_success": "Succeeded to removing {{username}} ",
     "remove_external_user_success": "Succeeded to remove {{accountId}} ",
     "switch_disable_link_sharing_success": "成功更新分享链接设置",
-    "failed_to_reset_password":"Failed to reset password"
+    "failed_to_reset_password":"Failed to reset password",
+    "delete_succeeded": "Succeeded to delete {{target}}"
   },
 	"template": {
 		"modal_label": {
@@ -913,5 +914,16 @@
   "footer": {
     "bookmarks": "书签",
     "recently_created": "最近创建页面"
+  },
+  "bookmark_folder":{
+    "bookmark_folder": "书签文件夹",
+    "delete_modal": {
+      "modal_header_label": "删除书签文件夹",
+      "modal_body_description": "删除此书签文件夹及其内容",
+      "modal_body_alert": "已删除的文件夹及其内容无法恢复",
+      "modal_footer_button": "删除文件夹"
+    },
+    "input_placeholder": "输入文件夹名称",
+    "new_folder": "新建文件夹"
   }
 }

packages/app/src/components/Sidebar/Bookmarks/BookmarkFolder.tsx

@@ -28,7 +28,7 @@ const BookmarkFolder = (): JSX.Element => {
       await apiv3Post('/bookmark-folder', { name: folderName, parent: null });
       await mutateChildBookmarkData();
       setIsRenameInputShown(false);
-      toastSuccess(t('Create New Bookmark Folder Success'));
+      toastSuccess(t('toaster.create_succeeded', { target: t('bookmark_folder.bookmark_folder') }));
     }
     catch (err) {
       toastError(err);
@@ -44,7 +44,7 @@ const BookmarkFolder = (): JSX.Element => {
           onClick={onClickBookmarkFolder}
         >
           <FolderPlusIcon />
-          <span className="mx-2 ">New Folder</span>
+          <span className="mx-2 ">{t('bookmark_folder.new_folder')}</span>
         </button>
       </div>
       {

packages/app/src/components/Sidebar/Bookmarks/BookmarkFolderItem.tsx

@@ -72,17 +72,19 @@ const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkFolderIt
   const onPressEnterHandler = useCallback(async(folderName: string) => {
     try {
       if (isRenameAction) {
+        // Rename bookmark folder
         await apiv3Put('/bookmark-folder', { bookmarkFolderId: folderId, name: folderName, parent });
         loadParent();
         setIsRenameAction(false);
-        toastSuccess(t('Rename Bookmark Folder Success'));
+        toastSuccess(t('toaster.update_successed', { target: t('bookmark_folder.bookmark_folder') }));
       }
       else {
+        // Create new bookmark folder / subfolder
         await apiv3Post('/bookmark-folder', { name: folderName, parent: targetFolder });
         setIsOpen(true);
         setIsRenameInputShown(false);
         mutateChildBookmarkData();
-        toastSuccess(t('Create New Bookmark Folder Success'));
+        toastSuccess(t('toaster.create_succeeded', { target: t('bookmark_folder.bookmark_folder') }));
       }
     }
     catch (err) {
@@ -128,7 +130,7 @@ const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkFolderIt
       await apiv3Delete(`/bookmark-folder/${folderId}`);
       setIsDeleteFolderModalShown(false);
       loadParent();
-      toastSuccess(t('Delete bookmark folder success'));
+      toastSuccess(t('toaster.delete_succeeded', { target: t('bookmark_folder.bookmark_folder') }));
 
     }
     catch (err) {

packages/app/src/components/Sidebar/Bookmarks/BookmarkFolderNameInput.tsx

@@ -30,7 +30,7 @@ const BookmarkFolderNameInput = (props: Props): JSX.Element => {
     <div className="flex-fill">
       <ClosableTextInput
         value={ value }
-        placeholder={t('Input Folder name')}
+        placeholder={t('bookmark_folder.input_placeholder')}
         onClickOutside={onClickOutside}
         onPressEnter={onPressEnter}
         inputValidator={inputValidator}

packages/app/src/components/Sidebar/Bookmarks/BookmarkFolderTree.tsx

@@ -1,6 +1,4 @@
 
-import { useTranslation } from 'next-i18next';
-
 import { useSWRxBookamrkFolderAndChild } from '~/stores/bookmark-folder';
 
 import BookmarkFolderItem from './BookmarkFolderItem';
@@ -9,7 +7,6 @@ import styles from './BookmarkFolderTree.module.scss';
 
 
 const BookmarkFolderTree = (): JSX.Element => {
-  const { t } = useTranslation();
   const { data: bookmarkFolderData } = useSWRxBookamrkFolderAndChild();
   if (bookmarkFolderData != null) {
     return (

packages/app/src/components/Sidebar/Bookmarks/DeleteBookmarkFolderModal.tsx

@@ -26,14 +26,14 @@ const DeleteBookmarkFolderModal = (props: DeleteBookmarkFolderModalProps): JSX.E
     <Modal size="md" isOpen={isOpen} toggle={onModalClose} data-testid="page-delete-modal" className="grw-create-page">
       <ModalHeader tag="h4" toggle={onModalClose} className="bg-danger text-light">
         <i className="icon-fw icon-trash"></i>
-        {t('Delete Bookmark Folder')}
+        {t('bookmark_folder.delete_modal.modal_header_label')}
       </ModalHeader>
       <ModalBody>
         <div className="form-group pb-1">
-          <label>{ t('Delete this bookmark folder and its contents') }:</label><br />
+          <label>{ t('bookmark_folder.delete_modal.modal_body_description') }:</label><br />
           <FolderIcon isOpen={false}/> {bookmarkFolder.name}
         </div>
-        {t('Deleted folder and its contents cannot be recovered')}
+        {t('bookmark_folder.delete_modal.modal_body_alert')}
       </ModalBody>
       <ModalFooter>
         <button
@@ -42,7 +42,7 @@ const DeleteBookmarkFolderModal = (props: DeleteBookmarkFolderModalProps): JSX.E
           onClick={onClickDeleteButton}
         >
           <i className="mr-1 icon-trash" aria-hidden="true"></i>
-          {t('Delete Folder')}
+          {t('bookmark_folder.delete_modal.modal_footer_button')}
         </button>
       </ModalFooter>
     </Modal>