chore: notification language support and refactor

Author: anmolsinghbhatia

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 "./user";

web/core/constants/notification.ts packages/constants/src/notification.tsweb/core/constants/notification.ts renamed to 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_type_options.assigned_to_me",
     value: ENotificationFilterType.ASSIGNED,
   },
   {
-    label: "Created by me",
+    i18n_label: "notification.filter_type_options.created_by_me",
     value: ENotificationFilterType.CREATED,
   },
   {
-    label: "Subscribed by me",
+    i18n_label: "notification.filter_type_options.subscribed_by_me",
     value: ENotificationFilterType.SUBSCRIBED,
   },
 ];
 
 export const NOTIFICATION_SNOOZE_OPTIONS = [
   {
     key: "1_day",
-    label: "1 day",
+    i18n_label: "notification.snooze_options.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_options.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_options.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_options.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_options.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_options.custom",
     value: undefined,
   },
 ];

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

@@ -969,6 +969,7 @@
   },
 
   "notification": {
+    "label": "Notifications",
     "empty_state": {
       "detail": {
         "title": "Select to view details."
@@ -981,6 +982,23 @@
         "title": "No issues assigned",
         "description": "Updates for issues assigned to you can be \n seen here"
       }
+    },
+    "tabs": {
+      "all": "All",
+      "mentions": "Mentions"
+    },
+    "filter_type_options": {
+      "assigned_to_me": "Assigned to me",
+      "created_by_me": "Created by me",
+      "subscribed_by_me": "Subscribed by me"
+    },
+    "snooze_options": {
+      "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

@@ -355,7 +355,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": {
@@ -393,16 +393,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",
@@ -429,7 +428,6 @@
     "star_us_on_github": "Danos una estrella en GitHub"
   },
 
-  
   "link": {
     "modal": {
       "url": {
@@ -973,6 +971,7 @@
   },
 
   "notification": {
+    "label": "Notificaciones",
     "empty_state": {
       "detail": {
         "title": "Selecciona para ver los detalles."
@@ -985,6 +984,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_type_options": {
+      "assigned_to_me": "Asignadas a mí",
+      "created_by_me": "Creadas por mí",
+      "subscribed_by_me": "Suscritas por mí"
+    },
+    "snooze_options": {
+      "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

@@ -968,6 +968,7 @@
   },
 
   "notification": {
+    "label": "Notifications",
     "empty_state": {
       "detail": {
         "title": "Sélectionnez pour voir les détails."
@@ -980,6 +981,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_type_options": {
+      "assigned_to_me": "Assignées à moi",
+      "created_by_me": "Créées par moi",
+      "subscribed_by_me": "Suivies par moi"
+    },
+    "snooze_options": {
+      "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

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

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

@@ -763,5 +763,26 @@
         "message": "无法删除便签"
       }
     }
+  },
+
+  "notification": {
+    "label": "通知",
+    "tabs": {
+      "all": "全部",
+      "mentions": "提及"
+    },
+    "filter_type_options": {
+      "assigned_to_me": "分配给我的",
+      "created_by_me": "我创建的",
+      "subscribed_by_me": "我订阅的"
+    },
+    "snooze_options": {
+      "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))} />
                 )}