feat: page update notifications (#2074)

* feat: watchers notification and email preferences

* fix: email copy

* digests

* clean up

* fix

* clean up

* move backlinks queue-up to history processor

* fix

* fix keys

* feat: group notifications

* filter

* adjust email digest window

apps/client/src/features/notification/components/notification-item.tsx

@@ -49,6 +49,8 @@ export function NotificationItem({
         return notification.data?.role === "writer"
           ? "<bold>{{name}}</bold> gave you edit access to a page"
           : "<bold>{{name}}</bold> gave you view access to a page";
+      case "page.updated":
+        return "<bold>{{name}}</bold> updated a page";
       default:
         return "";
     }
@@ -75,6 +77,7 @@ export function NotificationItem({
   };
 
   const handleMarkRead = (e: React.MouseEvent) => {
+    e.preventDefault();
     e.stopPropagation();
     markReadIfNeeded();
   };

apps/client/src/features/notification/components/notification-list.tsx

@@ -3,17 +3,23 @@ import { IconBellOff } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { useEffect, useRef } from "react";
 import { NotificationItem } from "./notification-item";
-import { INotification, NotificationFilter } from "../types/notification.types";
+import {
+  INotification,
+  NotificationFilter,
+  NotificationTab,
+} from "../types/notification.types";
 import { groupNotificationsByTime } from "../notification.utils";
 import { useNotificationsQuery } from "../queries/notification-query";
 import classes from "../notification.module.css";
 
 type NotificationListProps = {
+  tab: NotificationTab;
   filter: NotificationFilter;
   onNavigate: () => void;
 };
 
 export function NotificationList({
+  tab,
   filter,
   onNavigate,
 }: NotificationListProps) {
@@ -24,7 +30,7 @@ export function NotificationList({
     hasNextPage,
     fetchNextPage,
     isFetchingNextPage,
-  } = useNotificationsQuery();
+  } = useNotificationsQuery(tab as string);
 
   const sentinelRef = useRef<HTMLDivElement>(null);
 

apps/client/src/features/notification/components/notification-popover.tsx

@@ -6,6 +6,7 @@ import {
   Menu,
   Popover,
   ScrollArea,
+  Tabs,
   Text,
   Tooltip,
 } from "@mantine/core";
@@ -18,15 +19,20 @@ import {
 } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { NotificationList } from "./notification-list";
-import { NotificationFilter } from "../types/notification.types";
+import {
+  NotificationFilter,
+  NotificationTab,
+} from "../types/notification.types";
 import {
   useMarkAllReadMutation,
   useUnreadCountQuery,
 } from "../queries/notification-query";
+import classes from "../notification.module.css";
 
 export function NotificationPopover() {
   const { t } = useTranslation();
   const [opened, setOpened] = useState(false);
+  const [tab, setTab] = useState<NotificationTab>("direct");
   const [filter, setFilter] = useState<NotificationFilter>("all");
 
   const { data: unreadData } = useUnreadCountQuery();
@@ -125,13 +131,27 @@ export function NotificationPopover() {
           </Group>
         </Group>
 
+        <Tabs
+          value={tab}
+          onChange={(value) => setTab(value as NotificationTab)}
+          variant="default"
+          color="dark"
+        >
+          <Tabs.List px="md">
+            <Tabs.Tab value="direct">{t("Direct")}</Tabs.Tab>
+            <Tabs.Tab value="updates">{t("Updates")}</Tabs.Tab>
+          </Tabs.List>
+        </Tabs>
+
         <ScrollArea.Autosize
           mah={500}
           type="auto"
           offsetScrollbars
           scrollbarSize={6}
+          style={{ overscrollBehavior: "contain" }}
         >
           <NotificationList
+            tab={tab}
             filter={filter}
             onNavigate={() => setOpened(false)}
           />