feat: ln support for notifications

Author: gakshita

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

@@ -505,7 +505,8 @@
       "desc": "Descending"
     },
     "comments": "Comments",
-    "updates": "Updates"
+    "updates": "Updates",
+    "clear_all": "Clear all"
   },
 
   "form": {
@@ -1063,7 +1064,30 @@
   },
 
   "notification": {
-    "label": "Notifications",
+    "label": "Inbox",
+    "page_label": "{workspace} - Inbox",
+    "options": {
+      "mark_all_as_read": "Mark all as read",
+      "mark_read": "Mark as read",
+      "mark_unread": "Mark as unread",
+      "refresh": "Refresh",
+      "filters": "Inbox Filters",
+      "show_unread": "Show unread",
+      "show_snoozed": "Show snoozed",
+      "show_archived": "Show archived",
+      "mark_archive": "Archive",
+      "mark_unarchive": "Un archive",
+      "mark_snooze": "Snooze",
+      "mark_unsnooze": "Un snooze"
+    },
+    "toasts": {
+      "read": "Notification marked as read",
+      "unread": "Notification marked as unread",
+      "archived": "Notification marked as archived",
+      "unarchived": "Notification marked as un archived",
+      "snoozed": "Notification snoozed",
+      "unsnoozed": "Notification un snoozed"
+    },
     "empty_state": {
       "detail": {
         "title": "Select to view details."

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

@@ -34,7 +34,9 @@ const WorkspaceDashboardPage = observer(() => {
   const { fetchUserProjectInfo } = useUserPermissions();
   const { setPeekIssue } = useIssueDetail();
   // derived values
-  const pageTitle = currentWorkspace?.name ? `${currentWorkspace?.name} - Inbox` : undefined;
+  const pageTitle = currentWorkspace?.name
+    ? t("notification.page_label", { workspace: currentWorkspace?.name })
+    : undefined;
   const { workspace_slug, project_id, issue_id, is_inbox_issue } =
     notificationLiteByNotificationId(currentSelectedNotificationId);
   const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/intake/issue-detail" });

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

@@ -5,6 +5,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { ENotificationLoader, ENotificationQueryParamType } from "@plane/constants";
 // components
+import { useTranslation } from "@plane/i18n";
 import { NotificationItem } from "@/components/workspace-notifications";
 // constants
 // hooks
@@ -20,6 +21,7 @@ export const NotificationCardListRoot: FC<TNotificationCardListRoot> = observer(
   // hooks
   const { loader, paginationInfo, getNotifications, notificationIdsByWorkspaceId } = useWorkspaceNotifications();
   const notificationIds = notificationIdsByWorkspaceId(workspaceId);
+  const { t } = useTranslation();
 
   const getNextNotifications = async () => {
     try {
@@ -41,12 +43,12 @@ export const NotificationCardListRoot: FC<TNotificationCardListRoot> = observer(
         <>
           {loader === ENotificationLoader.PAGINATION_LOADER ? (
             <div className="py-4 flex justify-center items-center text-sm font-medium">
-              <div className="text-custom-primary-90">Loading...</div>
+              <div className="text-custom-primary-90">{t("loading")}...</div>
             </div>
           ) : (
             <div className="py-4 flex justify-center items-center text-sm font-medium" onClick={getNextNotifications}>
               <div className="text-custom-primary-90 hover:text-custom-primary-100 transition-all cursor-pointer">
-                Load more
+                {t("load_more")}
               </div>
             </div>
           )}

web/core/components/workspace-notifications/sidebar/filters/applied-filter.tsx

@@ -58,7 +58,7 @@ export const AppliedFilters: FC<TAppliedFilters> = observer((props) => {
         })}
         <button type="button" onClick={handleClearFilters}>
           <Tag>
-            Clear all
+            {t("common.clear_all")}
             <X size={12} strokeWidth={2} />
           </Tag>
         </button>

web/core/components/workspace-notifications/sidebar/filters/menu/root.tsx

@@ -27,7 +27,7 @@ export const NotificationFilter: FC = observer(() => {
     <PopoverMenu
       data={translatedFilterTypeOptions}
       button={
-        <Tooltip tooltipContent="Inbox Filters" isMobile={isMobile} position="bottom">
+        <Tooltip tooltipContent={t("notification.options.filters")} isMobile={isMobile} position="bottom">
           <div className="flex-shrink-0 w-5 h-5 flex justify-center items-center overflow-hidden cursor-pointer transition-all hover:bg-custom-background-80 rounded-sm outline-none">
             <ListFilter className="h-3 w-3" />
           </div>

web/core/components/workspace-notifications/sidebar/header/options/menu-option/root.tsx

@@ -3,6 +3,7 @@
 import { FC, ReactNode } from "react";
 import { observer } from "mobx-react";
 import { Check, CheckCircle, Clock } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
 import { TNotificationFilter } from "@plane/types";
 import { ArchiveIcon, PopoverMenu } from "@plane/ui";
 // components
@@ -24,6 +25,7 @@ export type TPopoverMenuOptions = {
 export const NotificationHeaderMenuOption = observer(() => {
   // hooks
   const { filters, updateFilters, updateBulkFilters } = useWorkspaceNotifications();
+  const { t } = useTranslation();
 
   const handleFilterChange = (filterType: keyof TNotificationFilter, filterValue: boolean) =>
     updateFilters(filterType, filterValue);
@@ -34,7 +36,7 @@ export const NotificationHeaderMenuOption = observer(() => {
     {
       key: "menu-unread",
       type: "menu-item",
-      label: "Show unread",
+      label: t("notification.options.show_unread"),
       isActive: filters?.read,
       prependIcon: <CheckCircle className="flex-shrink-0 h-3 w-3" />,
       appendIcon: filters?.read ? <Check className="w-3 h-3" /> : undefined,
@@ -43,7 +45,7 @@ export const NotificationHeaderMenuOption = observer(() => {
     {
       key: "menu-archived",
       type: "menu-item",
-      label: "Show archived",
+      label: t("notification.options.show_archived"),
       isActive: filters?.archived,
       prependIcon: <ArchiveIcon className="flex-shrink-0 h-3 w-3" />,
       appendIcon: filters?.archived ? <Check className="w-3 h-3" /> : undefined,
@@ -56,7 +58,7 @@ export const NotificationHeaderMenuOption = observer(() => {
     {
       key: "menu-snoozed",
       type: "menu-item",
-      label: "Show snoozed",
+      label: t("notification.options.show_snoozed"),
       isActive: filters?.snoozed,
       prependIcon: <Clock className="flex-shrink-0 h-3 w-3" />,
       appendIcon: filters?.snoozed ? <Check className="w-3 h-3" /> : undefined,

web/core/components/workspace-notifications/sidebar/header/options/root.tsx

@@ -3,6 +3,7 @@ import { observer } from "mobx-react";
 import { CheckCheck, RefreshCw } from "lucide-react";
 // plane imports
 import { ENotificationLoader, ENotificationQueryParamType } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { Spinner, Tooltip } from "@plane/ui";
 // components
 import { NotificationFilter, NotificationHeaderMenuOption } from "@/components/workspace-notifications";
@@ -22,6 +23,7 @@ export const NotificationSidebarHeaderOptions: FC<TNotificationSidebarHeaderOpti
   const { isMobile } = usePlatformOS();
   const { loader, getNotifications, markAllNotificationsAsRead } = useWorkspaceNotifications();
   const { captureEvent } = useEventTracker();
+  const { t } = useTranslation();
 
   const refreshNotifications = async () => {
     if (loader) return;
@@ -45,7 +47,7 @@ export const NotificationSidebarHeaderOptions: FC<TNotificationSidebarHeaderOpti
   return (
     <div className="relative flex justify-center items-center gap-2 text-sm">
       {/* mark all notifications as read*/}
-      <Tooltip tooltipContent="Mark all as read" isMobile={isMobile} position="bottom">
+      <Tooltip tooltipContent={t("notification.options.mark_all_as_read")} isMobile={isMobile} position="bottom">
         <div
           className="flex-shrink-0 w-5 h-5 flex justify-center items-center overflow-hidden cursor-pointer transition-all hover:bg-custom-background-80 rounded-sm"
           onClick={() => {
@@ -62,7 +64,7 @@ export const NotificationSidebarHeaderOptions: FC<TNotificationSidebarHeaderOpti
       </Tooltip>
 
       {/* refetch current notifications */}
-      <Tooltip tooltipContent="Refresh" isMobile={isMobile} position="bottom">
+      <Tooltip tooltipContent={t("notification.options.refresh")} isMobile={isMobile} position="bottom">
         <div
           className="flex-shrink-0 w-5 h-5 flex justify-center items-center overflow-hidden cursor-pointer transition-all hover:bg-custom-background-80 rounded-sm"
           onClick={refreshNotifications}

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

@@ -3,6 +3,7 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { Inbox } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common";
@@ -15,6 +16,7 @@ type TNotificationSidebarHeader = {
 
 export const NotificationSidebarHeader: FC<TNotificationSidebarHeader> = observer((props) => {
   const { workspaceSlug } = props;
+  const { t } = useTranslation();
 
   if (!workspaceSlug) return <></>;
   return (
@@ -27,7 +29,11 @@ export const NotificationSidebarHeader: FC<TNotificationSidebarHeader> = observe
           <Breadcrumbs.BreadcrumbItem
             type="text"
             link={
-              <BreadcrumbLink label="Inbox" icon={<Inbox className="h-4 w-4 text-custom-text-300" />} disableTooltip />
+              <BreadcrumbLink
+                label={t("notification.label")}
+                icon={<Inbox className="h-4 w-4 text-custom-text-300" />}
+                disableTooltip
+              />
             }
           />
         </Breadcrumbs>

web/core/components/workspace-notifications/sidebar/notification-card/options/archive.tsx

@@ -3,6 +3,7 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { ArchiveRestore } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
 import { ArchiveIcon, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { NotificationItemOptionButton } from "@/components/workspace-notifications";
@@ -24,6 +25,7 @@ export const NotificationItemArchiveOption: FC<TNotificationItemArchiveOption> =
   const { captureEvent } = useEventTracker();
   const { currentNotificationTab } = useWorkspaceNotifications();
   const { asJson: data, archiveNotification, unArchiveNotification } = notification;
+  const { t } = useTranslation();
 
   const handleNotificationUpdate = async () => {
     try {
@@ -35,7 +37,7 @@ export const NotificationItemArchiveOption: FC<TNotificationItemArchiveOption> =
         state: "SUCCESS",
       });
       setToast({
-        title: data.archived_at ? "Notification un-archived" : "Notification archived",
+        title: data.archived_at ? t("notification.toasts.unarchived") : t("notification.toasts.archived"),
         type: TOAST_TYPE.SUCCESS,
       });
     } catch (e) {
@@ -45,7 +47,9 @@ export const NotificationItemArchiveOption: FC<TNotificationItemArchiveOption> =
 
   return (
     <NotificationItemOptionButton
-      tooltipContent={data.archived_at ? "Un archive" : "Archive"}
+      tooltipContent={
+        data.archived_at ? t("notification.options.mark_unarchive") : t("notification.options.mark_archive")
+      }
       callBack={handleNotificationUpdate}
     >
       {data.archived_at ? (

web/core/components/workspace-notifications/sidebar/notification-card/options/read.tsx

@@ -3,6 +3,7 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { MessageSquare } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
 import { TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { NotificationItemOptionButton } from "@/components/workspace-notifications";
@@ -24,6 +25,7 @@ export const NotificationItemReadOption: FC<TNotificationItemReadOption> = obser
   const { captureEvent } = useEventTracker();
   const { currentNotificationTab } = useWorkspaceNotifications();
   const { asJson: data, markNotificationAsRead, markNotificationAsUnRead } = notification;
+  const { t } = useTranslation();
 
   const handleNotificationUpdate = async () => {
     try {
@@ -35,7 +37,7 @@ export const NotificationItemReadOption: FC<TNotificationItemReadOption> = obser
         state: "SUCCESS",
       });
       setToast({
-        title: data.read_at ? "Notification marked as unread" : "Notification marked as read",
+        title: data.read_at ? t("notification.toasts.unread") : t("notification.toasts.read"),
         type: TOAST_TYPE.SUCCESS,
       });
     } catch (e) {
@@ -45,7 +47,7 @@ export const NotificationItemReadOption: FC<TNotificationItemReadOption> = obser
 
   return (
     <NotificationItemOptionButton
-      tooltipContent={data.read_at ? "Mark as unread" : "Mark as read"}
+      tooltipContent={data.read_at ? t("notification.options.mark_unread") : t("notification.options.mark_read")}
       callBack={handleNotificationUpdate}
     >
       <MessageSquare className="h-3 w-3 text-custom-text-300" />