feat(core): add notification list (#10480)

packages/frontend/core/src/components/hooks/use-global-state.ts

@@ -1,20 +0,0 @@
-import { noop } from 'lodash-es';
-import { useEffect } from 'react';
-
-export function useDocumentTitle(newTitle?: string | null) {
-  useEffect(() => {
-    if (BUILD_CONFIG.isElectron || !newTitle) {
-      return noop;
-    }
-
-    const oldTitle = document.title;
-    document.title = newTitle;
-    return () => {
-      document.title = oldTitle;
-    };
-  }, [newTitle]);
-}
-
-export function usePageDocumentTitle(pageTitle?: string) {
-  useDocumentTitle(pageTitle ? `${pageTitle} · AFFiNE` : null);
-}

packages/frontend/core/src/components/notification/list.style.css.ts

@@ -0,0 +1,89 @@
+import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { style } from '@vanilla-extract/css';
+
+export const containerScrollViewport = style({
+  maxHeight: '272px',
+  width: '360px',
+});
+
+export const itemList = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '8px',
+});
+
+export const listEmpty = style({
+  color: cssVarV2('text/placeholder'),
+  fontSize: '14px',
+  lineHeight: '22px',
+  padding: '4px 2px',
+});
+
+export const error = style({
+  color: cssVarV2('status/error'),
+  fontSize: '14px',
+  lineHeight: '22px',
+  padding: '4px 2px',
+});
+
+export const itemContainer = style({
+  display: 'flex',
+  flexDirection: 'row',
+  borderRadius: '4px',
+  position: 'relative',
+  padding: '8px',
+  gap: '8px',
+  selectors: {
+    [`&:hover:not([data-disabled="true"])`]: {
+      backgroundColor: cssVarV2('layer/background/hoverOverlay'),
+    },
+  },
+});
+
+export const itemMain = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '4px',
+  fontSize: '14px',
+  lineHeight: '22px',
+});
+
+export const itemDate = style({
+  color: cssVarV2('text/secondary'),
+  fontSize: '12px',
+  lineHeight: '20px',
+});
+
+export const itemNotSupported = style({
+  color: cssVarV2('text/placeholder'),
+  fontSize: '12px',
+  lineHeight: '22px',
+});
+
+export const itemDeleteButton = style({
+  position: 'absolute',
+  right: '10px',
+  bottom: '8px',
+  width: '20px',
+  height: '20px',
+  backgroundColor: cssVarV2('button/iconButtonSolid'),
+  border: `0.5px solid ${cssVarV2('layer/insideBorder/border')}`,
+  boxShadow: cssVar('buttonShadow'),
+  opacity: 0,
+  selectors: {
+    [`${itemContainer}:hover &`]: {
+      opacity: 1,
+    },
+  },
+});
+
+export const itemNameLabel = style({
+  fontWeight: 'bold',
+  color: cssVarV2('text/primary'),
+  selectors: {
+    [`&[data-inactived="true"]`]: {
+      color: cssVarV2('text/placeholder'),
+    },
+  },
+});

packages/frontend/core/src/components/notification/list.tsx

@@ -0,0 +1,171 @@
+import { Avatar, IconButton, Scrollable, Skeleton } from '@affine/component';
+import {
+  type Notification,
+  NotificationListService,
+  NotificationType,
+} from '@affine/core/modules/notification';
+import { UserFriendlyError } from '@affine/error';
+import type { MentionNotificationBodyType } from '@affine/graphql';
+import { i18nTime, Trans, useI18n } from '@affine/i18n';
+import { DeleteIcon } from '@blocksuite/icons/rc';
+import { useLiveData, useService } from '@toeverything/infra';
+import { useCallback, useEffect, useMemo } from 'react';
+
+import * as styles from './list.style.css';
+
+export const NotificationList = () => {
+  const t = useI18n();
+  const notificationListService = useService(NotificationListService);
+  const notifications = useLiveData(notificationListService.notifications$);
+  const isLoading = useLiveData(notificationListService.isLoading$);
+  const error = useLiveData(notificationListService.error$);
+
+  const userFriendlyError = useMemo(() => {
+    return error && UserFriendlyError.fromAny(error);
+  }, [error]);
+
+  useEffect(() => {
+    // reset the notification list when the component is mounted
+    notificationListService.reset();
+    notificationListService.loadMore();
+  }, [notificationListService]);
+
+  const handleScrollEnd = useCallback(() => {
+    notificationListService.loadMore();
+  }, [notificationListService]);
+
+  const handleScroll = useCallback(
+    (e: React.UIEvent<HTMLDivElement>) => {
+      const target = e.currentTarget;
+      if (target.scrollHeight - target.scrollTop <= target.clientHeight + 1) {
+        handleScrollEnd();
+      }
+    },
+    [handleScrollEnd]
+  );
+
+  return (
+    <Scrollable.Root>
+      <Scrollable.Viewport
+        className={styles.containerScrollViewport}
+        onScroll={handleScroll}
+      >
+        {notifications.length > 0 ? (
+          <ul className={styles.itemList}>
+            {notifications.map(notification => (
+              <li key={notification.id}>
+                <NotificationItem notification={notification} />
+              </li>
+            ))}
+            {userFriendlyError && (
+              <div className={styles.error}>{userFriendlyError.message}</div>
+            )}
+          </ul>
+        ) : isLoading ? (
+          <NotificationItemSkeleton />
+        ) : userFriendlyError ? (
+          <div className={styles.error}>{userFriendlyError.message}</div>
+        ) : (
+          <div className={styles.listEmpty}>
+            {t['com.affine.notification.empty']()}
+          </div>
+        )}
+      </Scrollable.Viewport>
+      <Scrollable.Scrollbar />
+    </Scrollable.Root>
+  );
+};
+
+const NotificationItemSkeleton = () => {
+  return Array.from({ length: 3 }).map((_, i) => (
+    // oxlint-disable-next-line no-array-index-key
+    <div key={i} className={styles.itemContainer} data-disabled="true">
+      <Skeleton variant="circular" width={22} height={22} />
+      <div className={styles.itemMain}>
+        <Skeleton variant="text" width={150} />
+        <div className={styles.itemDate}>
+          <Skeleton variant="text" width={100} />
+        </div>
+      </div>
+    </div>
+  ));
+};
+
+const NotificationItem = ({ notification }: { notification: Notification }) => {
+  const notificationListService = useService(NotificationListService);
+  const t = useI18n();
+  const type = notification.type;
+
+  const handleDelete = useCallback(() => {
+    notificationListService.readNotification(notification.id).catch(err => {
+      console.error(err);
+    });
+  }, [notificationListService, notification.id]);
+
+  return (
+    <div className={styles.itemContainer}>
+      {type === NotificationType.Mention ? (
+        <MentionNotificationItem notification={notification} />
+      ) : (
+        <>
+          <Avatar size={22} />
+          <div className={styles.itemNotSupported}>
+            {t['com.affine.notification.unsupported']()} ({type})
+          </div>
+        </>
+      )}
+      <IconButton
+        size={16}
+        className={styles.itemDeleteButton}
+        icon={<DeleteIcon />}
+        onClick={handleDelete}
+      />
+    </div>
+  );
+};
+
+const MentionNotificationItem = ({
+  notification,
+}: {
+  notification: Notification;
+}) => {
+  const t = useI18n();
+  const body = notification.body as MentionNotificationBodyType;
+  const memberInactived = !body.createdByUser;
+  const username =
+    body.createdByUser?.name ?? t['com.affine.inactive-member']();
+  return (
+    <>
+      <Avatar
+        size={22}
+        name={body.createdByUser?.name}
+        url={body.createdByUser?.avatarUrl}
+      />
+      <div className={styles.itemMain}>
+        <span>
+          <Trans
+            i18nKey={'com.affine.notification.mention'}
+            components={{
+              1: (
+                <b
+                  className={styles.itemNameLabel}
+                  data-inactived={memberInactived}
+                />
+              ),
+              2: <b className={styles.itemNameLabel} />,
+            }}
+            values={{
+              username: username,
+              docTitle: body.doc.title ?? t['Untitled'](),
+            }}
+          />
+        </span>
+        <div className={styles.itemDate}>
+          {i18nTime(notification.createdAt, {
+            relative: true,
+          })}
+        </div>
+      </div>
+    </>
+  );
+};

packages/frontend/core/src/components/root-app-sidebar/index.tsx

@@ -10,6 +10,7 @@ import {
   SidebarScrollableContainer,
 } from '@affine/core/modules/app-sidebar/views';
 import { ExternalMenuLinkItem } from '@affine/core/modules/app-sidebar/views/menu-item/external-menu-link-item';
+import { AuthService } from '@affine/core/modules/cloud';
 import { WorkspaceDialogService } from '@affine/core/modules/dialogs';
 import {
   CollapsibleSection,
@@ -43,6 +44,7 @@ import {
   workspaceWrapper,
 } from './index.css';
 import { AppSidebarJournalButton } from './journal-button';
+import { NotificationButton } from './notification-button';
 import { TemplateDocEntrance } from './template-doc-entrance';
 import { TrashButton } from './trash-button';
 import { UpdaterButton } from './updater-button';
@@ -87,10 +89,15 @@ const AllDocsButton = () => {
  *
  */
 export const RootAppSidebar = memo((): ReactElement => {
-  const { workbenchService, cMDKQuickSearchService } = useServices({
-    WorkbenchService,
-    CMDKQuickSearchService,
-  });
+  const { workbenchService, cMDKQuickSearchService, authService } = useServices(
+    {
+      WorkbenchService,
+      CMDKQuickSearchService,
+      AuthService,
+    }
+  );
+
+  const sessionStatus = useLiveData(authService.session.status$);
   const t = useI18n();
   const workspaceDialogService = useService(WorkspaceDialogService);
   const workbench = workbenchService.workbench;
@@ -159,6 +166,7 @@ export const RootAppSidebar = memo((): ReactElement => {
         </div>
         <AllDocsButton />
         <AppSidebarJournalButton />
+        {sessionStatus === 'authenticated' && <NotificationButton />}
         <MenuItem
           data-testid="slider-bar-workspace-setting-button"
           icon={<SettingsIcon />}

packages/frontend/core/src/components/root-app-sidebar/notification-button.style.css.ts

@@ -0,0 +1,15 @@
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { style } from '@vanilla-extract/css';
+
+export const badge = style({
+  backgroundColor: cssVarV2('button/primary'),
+  color: cssVarV2('text/pureWhite'),
+  minWidth: '16px',
+  height: '16px',
+  padding: '0px 4px',
+  borderRadius: '4px',
+  fontSize: '12px',
+  textAlign: 'center',
+  lineHeight: '16px',
+  fontWeight: 500,
+});

packages/frontend/core/src/components/root-app-sidebar/notification-button.tsx

@@ -0,0 +1,59 @@
+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 { NotificationIcon } from '@blocksuite/icons/rc';
+import { useLiveData, useService } from '@toeverything/infra';
+import { useCallback, useState } from 'react';
+
+import { NotificationList } from '../notification/list';
+import * as styles from './notification-button.style.css';
+
+const Badge = ({ count, onClick }: { count: number; onClick?: () => void }) => {
+  if (count === 0) {
+    return null;
+  }
+  return (
+    <div className={styles.badge} onClick={onClick}>
+      {count > 99 ? '99+' : count}
+    </div>
+  );
+};
+
+export const NotificationButton = () => {
+  const notificationCountService = useService(NotificationCountService);
+  const notificationCount = useLiveData(notificationCountService.count$);
+
+  const t = useI18n();
+
+  const [notificationListOpen, setNotificationListOpen] = useState(false);
+
+  const handleNotificationListOpenChange = useCallback((open: boolean) => {
+    setNotificationListOpen(open);
+  }, []);
+
+  return (
+    <Menu
+      rootOptions={{
+        open: notificationListOpen,
+        onOpenChange: handleNotificationListOpenChange,
+      }}
+      contentOptions={{
+        side: 'right',
+        sideOffset: -50,
+      }}
+      items={<NotificationList />}
+    >
+      <MenuItem
+        icon={<NotificationIcon />}
+        postfix={<Badge count={notificationCount} />}
+        active={notificationListOpen}
+        postfixDisplay="always"
+      >
+        <span data-testid="notification-button">
+          {t['com.affine.rootAppSidebar.notifications']()}
+        </span>
+      </MenuItem>
+    </Menu>
+  );
+};

packages/frontend/core/src/desktop/components/document-title/index.tsx

@@ -0,0 +1,23 @@
+import { NotificationCountService } from '@affine/core/modules/notification';
+import { WorkbenchService } from '@affine/core/modules/workbench';
+import { useLiveData, useService } from '@toeverything/infra';
+import { useEffect } from 'react';
+
+export const DocumentTitle = () => {
+  const notificationCountService = useService(NotificationCountService);
+  const notificationCount = useLiveData(notificationCountService.count$);
+  const workbenchService = useService(WorkbenchService);
+  const workbenchView = useLiveData(workbenchService.workbench.activeView$);
+  const viewTitle = useLiveData(workbenchView.title$);
+
+  useEffect(() => {
+    const prefix = notificationCount > 0 ? `(${notificationCount}) ` : '';
+    document.title = prefix + (viewTitle ? `${viewTitle} · AFFiNE` : 'AFFiNE');
+
+    return () => {
+      document.title = 'AFFiNE';
+    };
+  }, [notificationCount, viewTitle]);
+
+  return null;
+};

packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page.tsx

@@ -44,7 +44,6 @@ import { AffineErrorBoundary } from '../../../../components/affine/affine-error-
 import { GlobalPageHistoryModal } from '../../../../components/affine/page-history-modal';
 import { useRegisterBlocksuiteEditorCommands } from '../../../../components/hooks/affine/use-register-blocksuite-editor-commands';
 import { useActiveBlocksuiteEditor } from '../../../../components/hooks/use-block-suite-editor';
-import { usePageDocumentTitle } from '../../../../components/hooks/use-global-state';
 import { PageDetailEditor } from '../../../../components/page-detail-editor';
 import { TrashPageFooter } from '../../../../components/pure/trash-page-footer';
 import { TopTip } from '../../../../components/top-tip';
@@ -160,8 +159,6 @@ const DetailPageImpl = memo(function DetailPageImpl() {
   }, [globalContext, isActiveView, isInTrash]);
 
   useRegisterBlocksuiteEditorCommands(editor, isActiveView);
-  const title = useLiveData(doc.title$);
-  usePageDocumentTitle(title);
 
   const onLoad = useCallback(
     (editorContainer: AffineEditorContainer) => {

packages/frontend/core/src/desktop/pages/workspace/layouts/workspace-layout.tsx

@@ -8,6 +8,7 @@ import { SWRConfigProvider } from '@affine/core/components/providers/swr-config-
 import { WorkspaceSideEffects } from '@affine/core/components/providers/workspace-side-effects';
 import { AIIsland } from '@affine/core/desktop/components/ai-island';
 import { AppContainer } from '@affine/core/desktop/components/app-container';
+import { DocumentTitle } from '@affine/core/desktop/components/document-title';
 import { WorkspaceDialogs } from '@affine/core/desktop/dialogs';
 import { PeekViewManagerModal } from '@affine/core/modules/peek-view';
 import { QuotaCheck } from '@affine/core/modules/quota';
@@ -36,6 +37,7 @@ export const WorkspaceLayout = function WorkspaceLayout({
       <AiLoginRequiredModal />
       <WorkspaceSideEffects />
       <PeekViewManagerModal />
+      <DocumentTitle />
 
       <WorkspaceLayoutInner>{children}</WorkspaceLayoutInner>
       {/* should show after workspace loaded */}

packages/frontend/core/src/desktop/pages/workspace/share/share-page.tsx

@@ -2,7 +2,6 @@ import { Scrollable } from '@affine/component';
 import type { AffineEditorContainer } from '@affine/core/blocksuite/block-suite-editor';
 import { EditorOutlineViewer } from '@affine/core/blocksuite/outline-viewer';
 import { useActiveBlocksuiteEditor } from '@affine/core/components/hooks/use-block-suite-editor';
-import { usePageDocumentTitle } from '@affine/core/components/hooks/use-global-state';
 import { useNavigateHelper } from '@affine/core/components/hooks/use-navigate-helper';
 import { PageDetailEditor } from '@affine/core/components/page-detail-editor';
 import { AppContainer } from '@affine/core/desktop/components/app-container';
@@ -189,8 +188,6 @@ const SharePageInner = ({
   const pageTitle = useLiveData(page?.title$);
   const { jumpToPageBlock, openPage } = useNavigateHelper();
 
-  usePageDocumentTitle(pageTitle);
-
   const onEditorLoad = useCallback(
     (editorContainer: AffineEditorContainer) => {
       setActiveBlocksuiteEditor(editorContainer);

packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.tsx

@@ -3,7 +3,6 @@ import { PageDetailSkeleton } from '@affine/component/page-detail-skeleton';
 import type { AffineEditorContainer } from '@affine/core/blocksuite/block-suite-editor';
 import { AffineErrorBoundary } from '@affine/core/components/affine/affine-error-boundary';
 import { useActiveBlocksuiteEditor } from '@affine/core/components/hooks/use-block-suite-editor';
-import { usePageDocumentTitle } from '@affine/core/components/hooks/use-global-state';
 import { useNavigateHelper } from '@affine/core/components/hooks/use-navigate-helper';
 import { PageDetailEditor } from '@affine/core/components/page-detail-editor';
 import { DetailPageWrapper } from '@affine/core/desktop/pages/workspace/detail-page/detail-page-wrapper';
@@ -132,9 +131,6 @@ const DetailPageImpl = () => {
     };
   }, [globalContext, isInTrash]);
 
-  const title = useLiveData(doc.title$);
-  usePageDocumentTitle(title);
-
   const server = useService(ServerService).server;
 
   const onLoad = useCallback(

packages/frontend/core/src/modules/app-sidebar/views/menu-item/index.css.ts

@@ -63,7 +63,7 @@ export const postfix = style({
   opacity: 0,
   pointerEvents: 'none',
   selectors: {
-    [`${root}:hover &`]: {
+    [`${root}:hover &, &[data-postfix-display="always"]`]: {
       justifySelf: 'flex-end',
       position: 'initial',
       opacity: 1,

packages/frontend/core/src/modules/app-sidebar/views/menu-item/index.tsx

@@ -15,6 +15,7 @@ export interface MenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
   // if onCollapsedChange is given, but collapsed is undefined, then we will render the collapse button as disabled
   onCollapsedChange?: (collapsed: boolean) => void;
   postfix?: React.ReactElement;
+  postfixDisplay?: 'always' | 'hover';
 }
 
 export interface MenuLinkItemProps extends MenuItemProps {
@@ -37,6 +38,7 @@ export const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(
       collapsed,
       onCollapsedChange,
       postfix,
+      postfixDisplay = 'hover',
       ...props
     },
     ref
@@ -80,7 +82,11 @@ export const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(
 
         <div className={styles.content}>{children}</div>
         {postfix ? (
-          <div className={styles.postfix} onClick={stopPropagation}>
+          <div
+            className={styles.postfix}
+            data-postfix-display={postfixDisplay}
+            onClick={stopPropagation}
+          >
             {postfix}
           </div>
         ) : null}

packages/frontend/core/src/modules/cloud/events/server-initialized.ts

@@ -1,5 +0,0 @@
-import { createEvent } from '@toeverything/infra';
-
-import type { Server } from '../entities/server';
-
-export const ServerInitialized = createEvent<Server>('ServerInitialized');

packages/frontend/core/src/modules/cloud/index.ts

@@ -4,7 +4,6 @@ export type { AuthAccountInfo } from './entities/session';
 export { AccountChanged } from './events/account-changed';
 export { AccountLoggedIn } from './events/account-logged-in';
 export { AccountLoggedOut } from './events/account-logged-out';
-export { ServerInitialized } from './events/server-initialized';
 export { AuthProvider } from './provider/auth';
 export { ValidatorProvider } from './provider/validator';
 export { ServerScope } from './scopes/server';

packages/frontend/core/src/modules/cloud/services/servers.ts

@@ -4,7 +4,6 @@ import { nanoid } from 'nanoid';
 import { Observable, switchMap } from 'rxjs';
 
 import { Server } from '../entities/server';
-import { ServerInitialized } from '../events/server-initialized';
 import { ServerStarted } from '../events/server-started';
 import type { ServerConfigStore } from '../stores/server-config';
 import type { ServerListStore } from '../stores/server-list';
@@ -30,7 +29,6 @@ export class ServersService extends Service {
             serverMetadata: metadata,
           });
           server.revalidateConfig();
-          this.eventBus.emit(ServerInitialized, server);
           server.scope.eventBus.emit(ServerStarted, server);
           const ref = this.serverPool.put(metadata.id, server);
           return ref;

packages/frontend/core/src/modules/index.ts

@@ -31,6 +31,7 @@ import { configureImportTemplateModule } from './import-template';
 import { configureJournalModule } from './journal';
 import { configureLifecycleModule } from './lifecycle';
 import { configureNavigationModule } from './navigation';
+import { configureNotificationModule } from './notification';
 import { configureOpenInApp } from './open-in-app';
 import { configureOrganizeModule } from './organize';
 import { configurePDFModule } from './pdf';
@@ -102,4 +103,5 @@ export function configureCommonModules(framework: Framework) {
   configureTemplateDocModule(framework);
   configureBlobManagementModule(framework);
   configureImportClipperModule(framework);
+  configureNotificationModule(framework);
 }

packages/frontend/core/src/modules/notification/index.ts

@@ -0,0 +1,26 @@
+export { NotificationCountService } from './services/count';
+export { NotificationListService } from './services/list';
+export type { Notification, NotificationBody } from './stores/notification';
+export { NotificationType } from './stores/notification';
+import type { Framework } from '@toeverything/infra';
+
+import { GraphQLService, ServerScope, ServerService } from '../cloud';
+import { GlobalSessionState } from '../storage';
+import { NotificationCountService } from './services/count';
+import { NotificationListService } from './services/list';
+import { NotificationStore } from './stores/notification';
+
+export function configureNotificationModule(framework: Framework) {
+  framework
+    .scope(ServerScope)
+    .service(NotificationCountService, [NotificationStore])
+    .service(NotificationListService, [
+      NotificationStore,
+      NotificationCountService,
+    ])
+    .store(NotificationStore, [
+      GraphQLService,
+      ServerService,
+      GlobalSessionState,
+    ]);
+}

packages/frontend/core/src/modules/notification/services/count.ts

@@ -0,0 +1,68 @@
+import {
+  catchErrorInto,
+  effect,
+  exhaustMapWithTrailing,
+  fromPromise,
+  LiveData,
+  onComplete,
+  OnEvent,
+  onStart,
+  Service,
+  smartRetry,
+} from '@toeverything/infra';
+import { EMPTY, mergeMap, switchMap, timer } from 'rxjs';
+
+import { ServerStarted } from '../../cloud/events/server-started';
+import { ApplicationFocused } from '../../lifecycle';
+import type { NotificationStore } from '../stores/notification';
+
+@OnEvent(ApplicationFocused, s => s.handleApplicationFocused)
+@OnEvent(ServerStarted, s => s.handleServerStarted)
+export class NotificationCountService extends Service {
+  constructor(private readonly store: NotificationStore) {
+    super();
+  }
+
+  readonly count$ = LiveData.from(this.store.watchNotificationCountCache(), 0);
+  readonly isLoading$ = new LiveData(false);
+  readonly error$ = new LiveData<any>(null);
+
+  revalidate = effect(
+    switchMap(() => {
+      return timer(0, 30000); // revalidate every 30 seconds
+    }),
+    exhaustMapWithTrailing(() => {
+      return fromPromise(signal =>
+        this.store.getNotificationCount(signal)
+      ).pipe(
+        mergeMap(result => {
+          this.setCount(result ?? 0);
+          return EMPTY;
+        }),
+        smartRetry(),
+        catchErrorInto(this.error$),
+        onStart(() => {
+          this.isLoading$.setValue(true);
+        }),
+        onComplete(() => this.isLoading$.setValue(false))
+      );
+    })
+  );
+
+  handleApplicationFocused() {
+    this.revalidate();
+  }
+
+  handleServerStarted() {
+    this.revalidate();
+  }
+
+  setCount(count: number) {
+    this.store.setNotificationCountCache(count);
+  }
+
+  override dispose(): void {
+    super.dispose();
+    this.revalidate.unsubscribe();
+  }
+}

packages/frontend/core/src/modules/notification/services/list.ts

@@ -0,0 +1,93 @@
+import {
+  catchErrorInto,
+  effect,
+  fromPromise,
+  LiveData,
+  onComplete,
+  onStart,
+  Service,
+  smartRetry,
+} from '@toeverything/infra';
+import { EMPTY, exhaustMap, mergeMap } from 'rxjs';
+
+import type { Notification, NotificationStore } from '../stores/notification';
+import type { NotificationCountService } from './count';
+
+export class NotificationListService extends Service {
+  isLoading$ = new LiveData(false);
+  notifications$ = new LiveData<Notification[]>([]);
+  nextCursor$ = new LiveData<string | undefined>(undefined);
+  hasMore$ = new LiveData(true);
+  error$ = new LiveData<any>(null);
+
+  readonly PAGE_SIZE = 8;
+
+  constructor(
+    private readonly store: NotificationStore,
+    private readonly notificationCount: NotificationCountService
+  ) {
+    super();
+  }
+
+  readonly loadMore = effect(
+    exhaustMap(() => {
+      if (!this.hasMore$.value) {
+        return EMPTY;
+      }
+      return fromPromise(signal =>
+        this.store.listNotification(
+          {
+            first: this.PAGE_SIZE,
+            after: this.nextCursor$.value,
+          },
+          signal
+        )
+      ).pipe(
+        mergeMap(result => {
+          if (!result) {
+            // If the user is not logged in, we just ignore the result.
+            return EMPTY;
+          }
+          const { edges, pageInfo, totalCount } = result;
+          this.notifications$.next([
+            ...this.notifications$.value,
+            ...edges.map(edge => edge.node),
+          ]);
+
+          // keep the notification count in sync
+          this.notificationCount.setCount(totalCount);
+
+          this.hasMore$.next(pageInfo.hasNextPage);
+          this.nextCursor$.next(pageInfo.endCursor ?? undefined);
+
+          return EMPTY;
+        }),
+        smartRetry(),
+        catchErrorInto(this.error$),
+        onStart(() => {
+          this.isLoading$.setValue(true);
+        }),
+        onComplete(() => this.isLoading$.setValue(false))
+      );
+    })
+  );
+
+  reset() {
+    this.notifications$.setValue([]);
+    this.hasMore$.setValue(true);
+    this.nextCursor$.setValue(undefined);
+    this.isLoading$.setValue(false);
+    this.error$.setValue(null);
+    this.loadMore.reset();
+  }
+
+  async readNotification(id: string) {
+    await this.store.readNotification(id);
+    this.notifications$.next(
+      this.notifications$.value.filter(notification => notification.id !== id)
+    );
+    this.notificationCount.setCount(
+      Math.max(this.notificationCount.count$.value - 1, 0)
+    );
+  }
+}

packages/frontend/core/src/modules/notification/stores/notification.ts

@@ -0,0 +1,85 @@
+import {
+  type ListNotificationsQuery,
+  listNotificationsQuery,
+  notificationCountQuery,
+  type PaginationInput,
+  readNotificationMutation,
+  type UnionNotificationBodyType,
+} from '@affine/graphql';
+import { Store } from '@toeverything/infra';
+import { map } from 'rxjs';
+
+import type { GraphQLService, ServerService } from '../../cloud';
+import type { GlobalSessionState } from '../../storage';
+
+export type Notification = NonNullable<
+  ListNotificationsQuery['currentUser']
+>['notifications']['edges'][number]['node'];
+
+export type NotificationBody = UnionNotificationBodyType;
+
+export { NotificationType } from '@affine/graphql';
+
+export class NotificationStore extends Store {
+  constructor(
+    private readonly gqlService: GraphQLService,
+    private readonly serverService: ServerService,
+    private readonly globalSessionState: GlobalSessionState
+  ) {
+    super();
+  }
+
+  watchNotificationCountCache() {
+    return this.globalSessionState
+      .watch('notification-count:' + this.serverService.server.id)
+      .pipe(
+        map(count => {
+          if (typeof count === 'number') {
+            return count;
+          }
+          return 0;
+        })
+      );
+  }
+
+  setNotificationCountCache(count: number) {
+    this.globalSessionState.set(
+      'notification-count:' + this.serverService.server.id,
+      count
+    );
+  }
+
+  async getNotificationCount(signal?: AbortSignal) {
+    const result = await this.gqlService.gql({
+      query: notificationCountQuery,
+      context: {
+        signal,
+      },
+    });
+
+    return result.currentUser?.notificationCount;
+  }
+
+  async listNotification(pagination: PaginationInput, signal?: AbortSignal) {
+    const result = await this.gqlService.gql({
+      query: listNotificationsQuery,
+      variables: {
+        pagination: pagination,
+      },
+      context: {
+        signal,
+      },
+    });
+
+    return result.currentUser?.notifications;
+  }
+
+  readNotification(id: string) {
+    return this.gqlService.gql({
+      query: readNotificationMutation,
+      variables: {
+        id,
+      },
+    });
+  }
+}