feat(core): clear all notifications (#13144)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added a "Delete All" option in the notifications list, allowing users
to mark all notifications as read at once.
* Introduced a header with a menu button in the notifications list for
easier access to actions.

* **Style**
* Updated notification list layout with improved structure, including a
header and a scrollable content area.

* **Localization**
* Added a new English localization string for the "Delete all
notifications" action.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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

@@ -88,4 +88,23 @@ export class NotificationListService extends Service {
       Math.max(this.notificationCount.count$.value - 1, 0)
     );
   }
+
+  async readAllNotifications() {
+    // optimistic clear all notifications
+    this.reset();
+    this.notificationCount.setCount(0);
+    // avoid loading more notifications after clear all notifications
+    this.hasMore$.setValue(false);
+
+    try {
+      await this.store.readAllNotifications();
+    } catch (err) {
+      // rollback the optimistic clear all notifications
+      this.reset();
+      this.loadMore();
+
+      // rethrow the error to the caller, to notify the user
+      throw err;
+    }
+  }
 }

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

@@ -5,6 +5,7 @@ import {
   mentionUserMutation,
   notificationCountQuery,
   type PaginationInput,
+  readAllNotificationsMutation,
   readNotificationMutation,
   type UnionNotificationBodyType,
 } from '@affine/graphql';
@@ -85,6 +86,12 @@ export class NotificationStore extends Store {
     });
   }
 
+  readAllNotifications() {
+    return this.gqlService.gql({
+      query: readAllNotificationsMutation,
+    });
+  }
+
   async mentionUser(
     userId: string,
     workspaceId: string,