diff --git a/packages/frontend/core/src/components/notification/list.tsx b/packages/frontend/core/src/components/notification/list.tsx
index 7def1fa4c5..0747035672 100644
--- a/packages/frontend/core/src/components/notification/list.tsx
+++ b/packages/frontend/core/src/components/notification/list.tsx
@@ -25,6 +25,7 @@ import type {
MentionNotificationBodyType,
} from '@affine/graphql';
import { i18nTime, Trans, useI18n } from '@affine/i18n';
+import track from '@affine/track';
import {
CollaborationIcon,
DeleteIcon,
@@ -176,6 +177,10 @@ const MentionNotificationItem = ({
const memberInactived = !body.createdByUser;
const handleClick = useCallback(() => {
+ track.$.sidebar.notifications.clickNotification({
+ type: notification.type,
+ item: 'read',
+ });
if (!body.workspace?.id) {
return;
}
@@ -189,7 +194,7 @@ const MentionNotificationItem = ({
body.doc.blockId ? [body.doc.blockId] : undefined,
body.doc.elementId ? [body.doc.elementId] : undefined
);
- }, [body, jumpToPageBlock, notificationListService, notification.id]);
+ }, [body, jumpToPageBlock, notificationListService, notification]);
return (
@@ -241,6 +246,10 @@ const InvitationReviewRequestNotificationItem = ({
const memberInactived = !body.createdByUser;
const workspaceInactived = !body.workspace;
const handleClick = useCallback(() => {
+ track.$.sidebar.notifications.clickNotification({
+ type: notification.type,
+ item: 'read',
+ });
notificationListService.readNotification(notification.id).catch(err => {
console.error(err);
});
@@ -353,6 +362,11 @@ const InvitationReviewApprovedNotificationItem = ({
const workspaceInactived = !body.workspace;
const handleClick = useCallback(() => {
+ track.$.sidebar.notifications.clickNotification({
+ type: notification.type,
+ item: 'button',
+ button: 'open',
+ });
notificationListService.readNotification(notification.id).catch(err => {
console.error(err);
});
@@ -424,6 +438,10 @@ const InvitationAcceptedNotificationItem = ({
const memberInactived = !body.createdByUser;
const handleClick = useCallback(() => {
+ track.$.sidebar.notifications.clickNotification({
+ type: notification.type,
+ item: 'read',
+ });
notificationListService.readNotification(notification.id).catch(err => {
console.error(err);
});
@@ -476,6 +494,10 @@ const InvitationBlockedNotificationItem = ({
const workspaceInactived = !body.workspace;
const handleClick = useCallback(() => {
+ track.$.sidebar.notifications.clickNotification({
+ type: notification.type,
+ item: 'read',
+ });
notificationListService.readNotification(notification.id).catch(err => {
console.error(err);
});
@@ -544,6 +566,11 @@ const InvitationNotificationItem = ({
}, [body, jumpToPage, notification.id, notificationListService]);
const handleAcceptInvite = useCallback(() => {
+ track.$.sidebar.notifications.clickNotification({
+ type: notification.type,
+ item: 'button',
+ button: 'accept',
+ });
setIsAccepting(true);
invitationService
.acceptInvite(inviteId)
@@ -654,12 +681,17 @@ const DeleteButton = ({
(e: React.MouseEvent) => {
e.stopPropagation(); // prevent trigger the click event of the parent element
+ track.$.sidebar.notifications.clickNotification({
+ type: notification.type,
+ item: 'dismiss',
+ });
+
notificationListService.readNotification(notification.id).catch(err => {
console.error(err);
});
onClick?.();
},
- [notificationListService, notification.id, onClick]
+ [notificationListService, notification, onClick]
);
return (
diff --git a/packages/frontend/core/src/components/root-app-sidebar/notification-button.tsx b/packages/frontend/core/src/components/root-app-sidebar/notification-button.tsx
index b67e637560..0d0082c72d 100644
--- a/packages/frontend/core/src/components/root-app-sidebar/notification-button.tsx
+++ b/packages/frontend/core/src/components/root-app-sidebar/notification-button.tsx
@@ -2,6 +2,7 @@ import { Menu } from '@affine/component';
import { MenuItem } from '@affine/core/modules/app-sidebar/views';
import { NotificationCountService } from '@affine/core/modules/notification';
import { useI18n } from '@affine/i18n';
+import { track } from '@affine/track';
import { NotificationIcon } from '@blocksuite/icons/rc';
import { useLiveData, useService } from '@toeverything/infra';
import { useCallback, useState } from 'react';
@@ -28,9 +29,17 @@ export const NotificationButton = () => {
const [notificationListOpen, setNotificationListOpen] = useState(false);
- const handleNotificationListOpenChange = useCallback((open: boolean) => {
- setNotificationListOpen(open);
- }, []);
+ const handleNotificationListOpenChange = useCallback(
+ (open: boolean) => {
+ if (open) {
+ track.$.sidebar.notifications.openInbox({
+ unreadCount: notificationCountService.count$.value,
+ });
+ }
+ setNotificationListOpen(open);
+ },
+ [notificationCountService.count$.value]
+ );
return (