feat: complete page translation

apps/client/public/locales/en/page.json

@@ -0,0 +1,26 @@
+{
+  "Copy link": "Copy link",
+  "Delete": "Delete",
+  "Link copied": "Link copied",
+  "Are you sure you want to delete this page?": "Are you sure you want to delete this page?",
+  "Cancel": "Cancel",
+  "deletePageModalContent": "Are you sure you want to delete this page? This will delete its children and page history. This action is irreversible.",
+  "Page deleted successfully": "Page deleted successfully",
+  "Failed to delete page": "Failed to delete page",
+  "Failed to create page": "Failed to create page",
+  "Import pages": "Import pages",
+  "Importing pages": "Importing pages",
+  "Page import is in progress. Please do not close this tab.": "Page import is in progress. Please do not close this tab.",
+  "Successfully imported": "Successfully imported",
+  "Your import is complete.": "Your import is complete.",
+  "Failed to import pages": "Failed to import pages",
+  "Unable to import pages. Please try again.": "Unable to import pages. Please try again.",
+  "page": "page",
+  "pages": "pages",
+  "Error fetching page data.": "Error fetching page data.",
+  "untitled": "untitled",
+  "Full width": "Full width",
+  "Page history": "Page history",
+  "Export": "Export",
+  "Print PDF": "Print PDF"
+}

apps/client/public/locales/en/translation.json

@@ -40,17 +40,7 @@
     "Recently updated": "Recently updated"
   },
   "space": {},
-  "page": {
+  "page": {},
-    "Error fetching page data.": "Error fetching page data.",
-    "untitled": "untitled",
-    "Link copied": "Link copied",
-    "Copy link": "Copy link",
-    "Full width": "Full width",
-    "Page history": "Page history",
-    "Export": "Export",
-    "Print PDF": "Print PDF",
-    "Delete": "Delete"
-  },
   "page-history": {
     "Page history": "Page history",
     "Error loading page history.": "Error loading page history.",

apps/client/public/locales/zh/page.json

@@ -0,0 +1,26 @@
+{
+  "Copy link": "复制链接",
+  "Delete": "删除",
+  "Link copied": "链接已复制",
+  "Are you sure you want to delete this page?": "您确定要删除这个页面吗？",
+  "Cancel": "取消",
+  "deletePageModalContent": "您确定要删除这个页面吗？这将删除其子页面和页面历史记录。此操作不可逆。",
+  "Page deleted successfully": "页面已成功删除",
+  "Failed to delete page": "删除页面失败",
+  "Failed to create page": "创建页面失败",
+  "Import pages": "导入页面",
+  "Importing pages": "正在导入页面",
+  "Page import is in progress. Please do not close this tab.": "页面导入正在进行中。请不要关闭此标签页。",
+  "Successfully imported": "成功导入",
+  "Your import is complete.": "导入已完成。",
+  "Failed to import pages": "导入页面失败",
+  "Unable to import pages. Please try again.": "无法导入页面。请重试。",
+  "page": "个页面",
+  "pages": "个页面",
+  "Error fetching page data.": "获取页面数据时出错。",
+  "untitled": "无标题",
+  "Full width": "全宽",
+  "Page history": "页面历史",
+  "Export": "导出",
+  "Print PDF": "打印 PDF"
+}

apps/client/public/locales/zh/translation.json

@@ -40,17 +40,7 @@
     "Recently updated": "最近更新"
   },
   "space": {},
-  "page": {
+  "page": {},
-    "Error fetching page data.": "获取页面数据时出错。",
-    "untitled": "无标题",
-    "Link copied": "链接已复制",
-    "Copy link": "复制链接",
-    "Full width": "全宽",
-    "Page history": "页面历史",
-    "Export": "导出",
-    "Print PDF": "打印 PDF",
-    "Delete": "删除"
-  },
   "page-history": {
     "Page history": "页面历史",
     "Error loading page history.": "加载页面历史时出错。",

apps/client/src/features/page/components/header/page-header-menu.tsx

@@ -53,8 +53,7 @@ interface PageActionMenuProps {
   readOnly?: boolean;
 }
 function PageActionMenu({ readOnly }: PageActionMenuProps) {
-  const { t } = useTranslation("translation", { keyPrefix: "page" });
+  const { t } = useTranslation("page");
-
   const [, setHistoryModalOpen] = useAtom(historyAtoms);
   const clipboard = useClipboard({ timeout: 500 });
   const { pageSlug, spaceSlug } = useParams();

apps/client/src/features/page/components/page-import-modal.tsx

@@ -12,6 +12,7 @@ import { useAtom } from "jotai";
 import { buildTree } from "@/features/page/tree/utils";
 import { IPage } from "@/features/page/types/page.types.ts";
 import React from "react";
+import { useTranslation } from "react-i18next";
 
 interface PageImportModalProps {
   spaceId: string;
@@ -24,6 +25,7 @@ export default function PageImportModal({
   open,
   onClose,
 }: PageImportModalProps) {
+  const { t } = useTranslation("page");
   return (
     <>
       <Modal.Root
@@ -38,7 +40,7 @@ export default function PageImportModal({
         <Modal.Overlay />
         <Modal.Content style={{ overflow: "hidden" }}>
           <Modal.Header py={0}>
-            <Modal.Title fw={500}>Import pages</Modal.Title>
+            <Modal.Title fw={500}>{t("Import pages")}</Modal.Title>
             <Modal.CloseButton />
           </Modal.Header>
           <Modal.Body>
@@ -55,6 +57,7 @@ interface ImportFormatSelection {
   onClose: () => void;
 }
 function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
+  const { t } = useTranslation("page");
   const [treeData, setTreeData] = useAtom(treeDataAtom);
 
   const handleFileUpload = async (selectedFiles: File[]) => {
@@ -65,8 +68,8 @@ function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
     onClose();
 
     const alert = notifications.show({
-      title: "Importing pages",
+      title: t("Importing pages"),
-      message: "Page import is in progress. Please do not close this tab.",
+      message: t("Page import is in progress. Please do not close this tab."),
       loading: true,
       autoClose: false,
     });
@@ -92,13 +95,14 @@ function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
         setTreeData(fullTree);
       }
 
-      const pageCountText = pageCount === 1 ? "1 page" : `${pageCount} pages`;
+      const pageCountText =
+        pageCount === 1 ? `1 ${t("page")}` : `${pageCount} ${t("pages")}`;
 
       notifications.update({
         id: alert,
         color: "teal",
-        title: `Successfully imported ${pageCountText}`,
+        title: `${t("Successfully imported")} ${pageCountText}`,
-        message: "Your import is complete.",
+        message: t("Your import is complete."),
         icon: <IconCheck size={18} />,
         loading: false,
         autoClose: 5000,
@@ -107,8 +111,8 @@ function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
       notifications.update({
         id: alert,
         color: "red",
-        title: `Failed to import pages`,
+        title: t("Failed to import pages"),
-        message: "Unable to import pages. Please try again.",
+        message: t("Unable to import pages. Please try again."),
         icon: <IconX size={18} />,
         loading: false,
         autoClose: 5000,

apps/client/src/features/page/hooks/use-delete-page-modal.tsx

@@ -1,22 +1,19 @@
 import { modals } from "@mantine/modals";
 import { Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
 
 type UseDeleteModalProps = {
   onConfirm: () => void;
 };
 
 export function useDeletePageModal() {
+  const { t } = useTranslation("page");
   const openDeleteModal = ({ onConfirm }: UseDeleteModalProps) => {
     modals.openConfirmModal({
-      title: "Are you sure you want to delete this page?",
+      title: t("Are you sure you want to delete this page?"),
-      children: (
+      children: <Text size="sm">{t("deletePageModalContent")}</Text>,
-        <Text size="sm">
-          Are you sure you want to delete this page? This will delete its
-          children and page history. This action is irreversible.
-        </Text>
-      ),
       centered: true,
-      labels: { confirm: "Delete", cancel: "Cancel" },
+      labels: { confirm: t("Delete"), cancel: t("Cancel") },
       confirmProps: { color: "red" },
       onConfirm,
     });

apps/client/src/features/page/queries/page-query.ts

@@ -25,6 +25,7 @@ import { notifications } from "@mantine/notifications";
 import { IPagination } from "@/lib/types.ts";
 import { queryClient } from "@/main.tsx";
 import { buildTree } from "@/features/page/tree/utils";
+import { useTranslation } from "react-i18next";
 
 export function usePageQuery(
   pageInput: Partial<IPageInput>,
@@ -38,11 +39,12 @@ export function usePageQuery(
 }
 
 export function useCreatePageMutation() {
+  const { t } = useTranslation('page');
   return useMutation<IPage, Error, Partial<IPageInput>>({
     mutationFn: (data) => createPage(data),
-    onSuccess: (data) => {},
+    onSuccess: (data) => { },
     onError: (error) => {
-      notifications.show({ message: "Failed to create page", color: "red" });
+      notifications.show({ message: t("Failed to create page"), color: "red" });
     },
   });
 }
@@ -74,13 +76,14 @@ export function useUpdatePageMutation() {
 }
 
 export function useDeletePageMutation() {
+  const { t } = useTranslation('page');
   return useMutation({
     mutationFn: (pageId: string) => deletePage(pageId),
     onSuccess: () => {
-      notifications.show({ message: "Page deleted successfully" });
+      notifications.show({ message: t("Page deleted successfully") });
     },
     onError: (error) => {
-      notifications.show({ message: "Failed to delete page", color: "red" });
+      notifications.show({ message: t("Failed to delete page"), color: "red" });
     },
   });
 }

apps/client/src/features/page/tree/components/space-tree.tsx

@@ -47,6 +47,7 @@ import { notifications } from "@mantine/notifications";
 import { getAppUrl } from "@/lib/config.ts";
 import { extractPageSlugId } from "@/lib";
 import { useDeletePageModal } from "@/features/page/hooks/use-delete-page-modal.tsx";
+import { useTranslation } from "react-i18next";
 
 interface SpaceTreeProps {
   spaceId: string;
@@ -397,6 +398,7 @@ interface NodeMenuProps {
 }
 
 function NodeMenu({ node, treeApi }: NodeMenuProps) {
+  const { t } = useTranslation("page");
   const clipboard = useClipboard({ timeout: 500 });
   const { spaceSlug } = useParams();
   const { openDeleteModal } = useDeletePageModal();
@@ -405,7 +407,7 @@ function NodeMenu({ node, treeApi }: NodeMenuProps) {
     const pageUrl =
       getAppUrl() + buildPageUrl(spaceSlug, node.data.slugId, node.data.name);
     clipboard.copy(pageUrl);
-    notifications.show({ message: "Link copied" });
+    notifications.show({ message: t("Link copied") });
   };
 
   return (
@@ -435,7 +437,7 @@ function NodeMenu({ node, treeApi }: NodeMenuProps) {
             handleCopyLink();
           }}
         >
-          Copy link
+          {t("Copy link")}
         </Menu.Item>
 
         {!(treeApi.props.disableEdit as boolean) && (
@@ -453,7 +455,7 @@ function NodeMenu({ node, treeApi }: NodeMenuProps) {
                 openDeleteModal({ onConfirm: () => treeApi?.delete(node) });
               }}
             >
-              Delete
+              {t("Delete")}
             </Menu.Item>
           </>
         )}