Chore notification language support and refactor

packages/constants/src/index.ts

@@ -9,6 +9,7 @@ export * from "./graph";
 export * from "./instance";
 export * from "./issue";
 export * from "./metadata";
+export * from "./notification";
 export * from "./state";
 export * from "./swr";
 export * from "./tab-indices";

web/core/constants/notification.ts → packages/constants/src/notification.ts

@@ -29,12 +29,13 @@ export type TNotificationTab = ENotificationTab.ALL | ENotificationTab.MENTIONS;
 
 export const NOTIFICATION_TABS = [
   {
-    label: "All",
+    i18n_label: "notification.tabs.all",
     value: ENotificationTab.ALL,
-    count: (unReadNotification: TUnreadNotificationsCount) => unReadNotification?.total_unread_notifications_count || 0,
+    count: (unReadNotification: TUnreadNotificationsCount) =>
+      unReadNotification?.total_unread_notifications_count || 0,
   },
   {
-    label: "Mentions",
+    i18n_label: "notification.tabs.mentions",
     value: ENotificationTab.MENTIONS,
     count: (unReadNotification: TUnreadNotificationsCount) =>
       unReadNotification?.mention_unread_notifications_count || 0,
@@ -43,63 +44,63 @@ export const NOTIFICATION_TABS = [
 
 export const FILTER_TYPE_OPTIONS = [
   {
-    label: "Assigned to me",
+    i18n_label: "notification.filter.assigned",
     value: ENotificationFilterType.ASSIGNED,
   },
   {
-    label: "Created by me",
+    i18n_label: "notification.filter.created",
     value: ENotificationFilterType.CREATED,
   },
   {
-    label: "Subscribed by me",
+    i18n_label: "notification.filter.subscribed",
     value: ENotificationFilterType.SUBSCRIBED,
   },
 ];
 
 export const NOTIFICATION_SNOOZE_OPTIONS = [
   {
     key: "1_day",
-    label: "1 day",
+    i18n_label: "notification.snooze.1_day",
     value: () => {
       const date = new Date();
       return new Date(date.getTime() + 24 * 60 * 60 * 1000);
     },
   },
   {
     key: "3_days",
-    label: "3 days",
+    i18n_label: "notification.snooze.3_days",
     value: () => {
       const date = new Date();
       return new Date(date.getTime() + 3 * 24 * 60 * 60 * 1000);
     },
   },
   {
     key: "5_days",
-    label: "5 days",
+    i18n_label: "notification.snooze.5_days",
     value: () => {
       const date = new Date();
       return new Date(date.getTime() + 5 * 24 * 60 * 60 * 1000);
     },
   },
   {
     key: "1_week",
-    label: "1 week",
+    i18n_label: "notification.snooze.1_week",
     value: () => {
       const date = new Date();
       return new Date(date.getTime() + 7 * 24 * 60 * 60 * 1000);
     },
   },
   {
     key: "2_weeks",
-    label: "2 weeks",
+    i18n_label: "notification.snooze.2_weeks",
     value: () => {
       const date = new Date();
       return new Date(date.getTime() + 14 * 24 * 60 * 60 * 1000);
     },
   },
   {
     key: "custom",
-    label: "Custom",
+    i18n_label: "notification.snooze.custom",
     value: undefined,
   },
 ];

packages/i18n/src/locales/en/translations.json

@@ -1057,6 +1057,7 @@
   },
 
   "notification": {
+    "label": "Notifications",
     "empty_state": {
       "detail": {
         "title": "Select to view details."
@@ -1069,6 +1070,23 @@
         "title": "No issues assigned",
         "description": "Updates for issues assigned to you can be \n seen here"
       }
+    },
+    "tabs": {
+      "all": "All",
+      "mentions": "Mentions"
+    },
+    "filter": {
+      "assigned": "Assigned to me",
+      "created": "Created by me",
+      "subscribed": "Subscribed by me"
+    },
+    "snooze": {
+      "1_day": "1 day",
+      "3_days": "3 days",
+      "5_days": "5 days",
+      "1_week": "1 week",
+      "2_weeks": "2 weeks",
+      "custom": "Custom"
     }
   },
 

packages/i18n/src/locales/es/translations.json

@@ -367,7 +367,7 @@
         "description": "Elige tu foto, colores y más.",
         "cta": "Personalizar ahora"
       },
-      "widgets":  {
+      "widgets": {
         "title": "Está tranquilo sin widgets, actívalos",
         "description": "Parece que todos tus widgets están desactivados. ¡Enciéndelos ahora para mejorar tu experiencia!",
         "primary_button": {
@@ -405,16 +405,15 @@
           "title": "Enlace no eliminado",
           "message": "No se pudo eliminar el enlace"
         }
-
       }
     },
     "recents": {
       "title": "Recientes",
       "empty": {
-          "project": "Tus proyectos recientes aparecerán aquí cuando visites uno.",
-          "page": "Tus páginas recientes aparecerán aquí cuando visites una.",
-          "issue": "Tus problemas recientes aparecerán aquí cuando visites uno.",
-          "default": "Aún no tienes elementos recientes."
+        "project": "Tus proyectos recientes aparecerán aquí cuando visites uno.",
+        "page": "Tus páginas recientes aparecerán aquí cuando visites una.",
+        "issue": "Tus problemas recientes aparecerán aquí cuando visites uno.",
+        "default": "Aún no tienes elementos recientes."
       },
       "filters": {
         "all": "Todos los elementos",
@@ -441,7 +440,6 @@
     "star_us_on_github": "Danos una estrella en GitHub"
   },
 
-
   "link": {
     "modal": {
       "url": {
@@ -1060,6 +1058,7 @@
   },
 
   "notification": {
+    "label": "Notificaciones",
     "empty_state": {
       "detail": {
         "title": "Selecciona para ver los detalles."
@@ -1072,6 +1071,23 @@
         "title": "No hay problemas asignados",
         "description": "Las actualizaciones de los problemas asignados a ti se \n pueden ver aquí"
       }
+    },
+    "tabs": {
+      "all": "Todas",
+      "mentions": "Menciones"
+    },
+    "filter": {
+      "assigned": "Asignadas a mí",
+      "created": "Creadas por mí",
+      "subscribed": "Suscritas por mí"
+    },
+    "snooze": {
+      "1_day": "1 día",
+      "3_days": "3 días",
+      "5_days": "5 días",
+      "1_week": "1 semana",
+      "2_weeks": "2 semanas",
+      "custom": "Personalizado"
     }
   },
 

packages/i18n/src/locales/fr/translations.json

@@ -1055,6 +1055,7 @@
   },
 
   "notification": {
+    "label": "Notifications",
     "empty_state": {
       "detail": {
         "title": "Sélectionnez pour voir les détails."
@@ -1067,6 +1068,23 @@
         "title": "Aucune tâche assignée",
         "description": "Les mises à jour des problèmes qui vous sont assignés peuvent être \n vues ici."
       }
+    },
+    "tabs": {
+      "all": "Toutes",
+      "mentions": "Mentions"
+    },
+    "filter": {
+      "assigned": "Assignées à moi",
+      "created": "Créées par moi",
+      "subscribed": "Suivies par moi"
+    },
+    "snooze": {
+      "1_day": "1 jour",
+      "3_days": "3 jours",
+      "5_days": "5 jours",
+      "1_week": "1 semaine",
+      "2_weeks": "2 semaines",
+      "custom": "Personnalisé"
     }
   },
 

packages/i18n/src/locales/ja/translations.json

@@ -411,10 +411,10 @@
     "recents": {
       "title": "最近",
       "empty": {
-          "project": "プロジェクトを訪問すると、最近のプロジェクトがここに表示されます。",
-          "page": "ページを訪問すると、最近のページがここに表示されます。",
-          "issue": "課題を訪問すると、最近の課題がここに表示されます。",
-          "default": "最近のアイテムはまだありません。" 
+        "project": "プロジェクトを訪問すると、最近のプロジェクトがここに表示されます。",
+        "page": "ページを訪問すると、最近のページがここに表示されます。",
+        "issue": "課題を訪問すると、最近の課題がここに表示されます。",
+        "default": "最近のアイテムはまだありません。"
       },
       "filters": {
         "all": "すべてのアイテム",
@@ -453,7 +453,7 @@
       }
     }
   },
-  
+
   "common": {
     "all": "すべて",
     "states": "ステータス",
@@ -1058,6 +1058,7 @@
   },
 
   "notification": {
+    "label": "通知",
     "empty_state": {
       "detail": {
         "title": "詳細を表示するには選択してください。"
@@ -1070,6 +1071,23 @@
         "title": "割り当てられた問題はありません",
         "description": "あなたに割り当てられた問題の更新情報はここで確認できます。"
       }
+    },
+    "tabs": {
+      "all": "すべて",
+      "mentions": "メンション"
+    },
+    "filter": {
+      "assigned": "自分に割り当て",
+      "created": "自分が作成",
+      "subscribed": "自分が購読"
+    },
+    "snooze": {
+      "1_day": "1日",
+      "3_days": "3日",
+      "5_days": "5日",
+      "1_week": "1週間",
+      "2_weeks": "2週間",
+      "custom": "カスタム"
     }
   },
 

packages/i18n/src/locales/zh-CN/translations.json

@@ -815,6 +815,8 @@
       }
     }
   },
+
+
   "workspace_projects": {
     "network": {
       "private": {
@@ -876,6 +878,25 @@
       "created_at": "创建日期",
       "manual": "手动"
     }
-  }
-
+  },
+  "notification": {
+    "label": "通知",
+    "tabs": {
+      "all": "全部",
+      "mentions": "提及"
+    },
+    "filter": {
+      "assigned": "分配给我的",
+      "created": "我创建的",
+      "subscribed": "我订阅的"
+    },
+    "snooze": {
+      "1_day": "1天",
+      "3_days": "3天",
+      "5_days": "5天",
+      "1_week": "1周",
+      "2_weeks": "2周",
+      "custom": "自定义"
+    }
+  } 
 }

web/app/[workspaceSlug]/(projects)/notifications/page.tsx

@@ -5,14 +5,14 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
 // plane imports
+import { ENotificationLoader, ENotificationQueryParamType } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // components
 import { LogoSpinner } from "@/components/common";
 import { PageHead } from "@/components/core";
 import { SimpleEmptyState } from "@/components/empty-state";
 import { InboxContentRoot } from "@/components/inbox";
 import { IssuePeekOverview } from "@/components/issues";
-import { ENotificationLoader, ENotificationQueryParamType } from "@/constants/notification";
 // hooks
 import { useIssueDetail, useUserPermissions, useWorkspace, useWorkspaceNotifications } from "@/hooks/store";
 import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";

web/ce/components/workspace-notifications/notification-card/root.tsx

@@ -2,10 +2,11 @@
 
 import { FC } from "react";
 import { observer } from "mobx-react";
+// plane imports
+import { ENotificationLoader, ENotificationQueryParamType } from "@plane/constants";
 // components
 import { NotificationItem } from "@/components/workspace-notifications";
 // constants
-import { ENotificationLoader, ENotificationQueryParamType } from "@/constants/notification";
 // hooks
 import { useWorkspaceNotifications } from "@/hooks/store";
 

web/core/components/workspace-notifications/root.tsx

@@ -3,6 +3,9 @@
 import { FC, useCallback } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
+// plane imports
+import { NOTIFICATION_TABS, TNotificationTab } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // components
 import { Header, Row, ERowVariant, EHeaderVariant, ContentWrapper } from "@plane/ui";
 import { CountChip } from "@/components/common";
@@ -12,16 +15,12 @@ import {
   NotificationSidebarHeader,
   AppliedFilters,
 } from "@/components/workspace-notifications";
-// constants
-import { NOTIFICATION_TABS, TNotificationTab } from "@/constants/notification";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { getNumberCount } from "@/helpers/string.helper";
 // hooks
 import { useWorkspace, useWorkspaceNotifications } from "@/hooks/store";
-
 import { NotificationCardListRoot } from "@/plane-web/components/workspace-notifications";
-
 export const NotificationsSidebarRoot: FC = observer(() => {
   const { workspaceSlug } = useParams();
   // hooks
@@ -34,6 +33,8 @@ export const NotificationsSidebarRoot: FC = observer(() => {
     currentNotificationTab,
     setCurrentNotificationTab,
   } = useWorkspaceNotifications();
+
+  const { t } = useTranslation();
   // derived values
   const workspace = workspaceSlug ? getWorkspaceBySlug(workspaceSlug.toString()) : undefined;
   const notificationIds = workspace ? notificationIdsByWorkspaceId(workspace.id) : undefined;
@@ -76,7 +77,7 @@ export const NotificationsSidebarRoot: FC = observer(() => {
                     : "text-custom-text-100 hover:text-custom-text-200"
                 )}
               >
-                <div className="font-medium">{tab.label}</div>
+                <div className="font-medium">{t(tab.i18n_label)}</div>
                 {tab.count(unreadNotificationsCount) > 0 && (
                   <CountChip count={getNumberCount(tab.count(unreadNotificationsCount))} />
                 )}