feat: new notification

packages/client/user.ts

@@ -12,3 +12,5 @@ export enum UserGroup {
   User = 10,
   WikiContributor = 11,
 }
+
+export type { Notice as INotice } from './client';

packages/design/theme/variables.less

@@ -18,6 +18,9 @@
 @blue-doing: #8fcaec;
 @blue-collect: #3db3f5;
 
+/* State */
+@error: #f97f77;
+
 /* Response */
 @sm: 640px;
 @md: 768px;

packages/icons/index.tsx

@@ -15,6 +15,7 @@ export { ReactComponent as ArrowDown } from './assets/arrow-down.svg';
 export { ReactComponent as ArrowDownCircle } from './assets/arrow-down-circle.svg';
 export { ReactComponent as ArrowUpCircle } from './assets/arrow-up-circle.svg';
 export { ReactComponent as ArrowRightCircle } from './assets/arrow-right-circle.svg';
+export { ReactComponent as ArrowPath } from './assets/arrow-path.svg';
 export { ReactComponent as Plus } from './assets/plus.svg';
 export { ReactComponent as Minus } from './assets/minus.svg';
 export { ReactComponent as Cursor } from './assets/cursor.svg';
@@ -37,3 +38,4 @@ export { ReactComponent as TopicClosed } from './assets/topic-closed.svg';
 export { ReactComponent as TopicReopen } from './assets/topic-reopen.svg';
 export { ReactComponent as OpenQuote } from './assets/open-quote.svg';
 export { ReactComponent as CloseQuote } from './assets/close-quote.svg';
+export { ReactComponent as Enter } from './assets/enter.svg';

packages/website/package.json

@@ -27,6 +27,7 @@
     "react-router-dom": "^6.10.0",
     "reset-css": "^5.0.1",
     "rooks": "^7.10.0",
+    "socket.io-client": "^4.5.4",
     "swr": "^2.1.1"
   },
   "devDependencies": {

packages/website/src/App.tsx

@@ -3,13 +3,17 @@ import React, { Suspense } from 'react';
 import { HelmetProvider } from 'react-helmet-async';
 import { useRoutes } from 'react-router-dom';
 
+import { NoticeProvider } from '@bangumi/website/hooks/use-notify';
+
 import { UserProvider } from './hooks/use-user';
 
 const App = () => {
   return (
     <HelmetProvider>
       <UserProvider>
-        <Suspense fallback={null}>{useRoutes(pageRoutes)}</Suspense>
+        <NoticeProvider>
+          <Suspense fallback={null}>{useRoutes(pageRoutes)}</Suspense>
+        </NoticeProvider>
       </UserProvider>
     </HelmetProvider>
   );

packages/website/src/components/Header/index.tsx

@@ -1,10 +1,12 @@
+import cn from 'classnames';
 import type { FC } from 'react';
 import React, { useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 
 import { Avatar, Button, Divider, Input, Menu } from '@bangumi/design';
 import { Notification, Search as SearchIcon, Setting } from '@bangumi/icons';
 import { UnreadableCodeError } from '@bangumi/utils';
+import { useNotify } from '@bangumi/website/hooks/use-notify';
 
 import { ReactComponent as Logo } from '../../assets/logo.svg';
 import { ReactComponent as Musume1 } from '../../assets/musume_1.svg';
@@ -90,12 +92,15 @@ if (Musume === undefined) {
 
 const Header: FC = () => {
   const { user } = useUser();
+  const { noticeCount } = useNotify();
   const location = useLocation();
 
   const [showMobileMenu, setShowMobileMenu] = useState(false);
+
   return (
     <header className={style.container}>
       <div className={style.main}>
+        {/* left */}
         <div className='flex items-center'>
           {/* Logo */}
           <a className={style.logo} href='/'>
@@ -119,7 +124,9 @@ const Header: FC = () => {
             <Menu items={navRight} wrapperClass={style.navRight} />
           </div>
         </div>
-        <div className='flex items-center'>
+
+        {/* right */}
+        <div className={style.headerRight}>
           <div className={style.infoBox}>
             {/* Search Todo */}
             <Input
@@ -143,8 +150,16 @@ const Header: FC = () => {
           {/* Avatar */}
           {user ? (
             <>
-              <Notification className={style.iconNotification} />
-              <Setting className={style.iconSetting} />
+              <Link
+                to='/notifications'
+                className={cn(style.icon, style.iconNotification, {
+                  [style.iconNotificationNotice!]: noticeCount > 0,
+                })}
+              >
+                <Notification />
+              </Link>
+
+              <Setting className={style.icon} />
               <Avatar src={user.avatar.large} wrapperClass={style.avatar} />
             </>
           ) : (

packages/website/src/components/Header/style.module.less

@@ -82,11 +82,17 @@
   }
 }
 
+.header-right {
+  .flex();
+  .items-center();
+
+  gap: 12px;
+}
+
 .infoBox {
   display: flex;
   align-items: center;
   padding: 0 7px 0 9px;
-  margin-right: 16px;
 
   .search {
     height: 32px;
@@ -109,16 +115,35 @@
   }
 }
 
-.iconNotification {
-  margin-right: 25px;
-  width: 16px;
-  height: 18px;
+.red-dot {
+  content: '';
+  position: absolute;
+  background: #f00;
+  border-radius: 50%;
+  width: 8px;
+  height: 8px;
+  top: -3px;
+  right: 0;
 }
 
-.iconSetting {
-  margin-right: 25px;
+.icon {
   width: 18px;
   height: 18px;
+
+  &-notification {
+    position: relative;
+
+    &-notice::before {
+      .red-dot();
+    }
+
+    // ping animation
+    &-notice::after {
+      .red-dot();
+
+      animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+    }
+  }
 }
 
 .link {

packages/website/src/components/Helmet.tsx

@@ -2,9 +2,19 @@ import React from 'react';
 import type { HelmetProps } from 'react-helmet-async';
 import { Helmet as BaseHelmet } from 'react-helmet-async';
 
+import { useNotify } from '@bangumi/website/hooks/use-notify.tsx';
+
 const Helmet = (props: React.PropsWithChildren<HelmetProps>) => {
+  const { noticeCount } = useNotify();
+
   return (
-    <BaseHelmet defaultTitle='Bangumi 番组计划' titleTemplate='%s | Bangumi 番组计划' {...props} />
+    <BaseHelmet
+      defaultTitle='Bangumi 番组计划'
+      titleTemplate={
+        noticeCount ? `(${noticeCount}) %s | Bangumi 番组计划` : `%s | Bangumi 番组计划`
+      }
+      {...props}
+    />
   );
 };
 

packages/website/src/error.ts

@@ -0,0 +1,2 @@
+export const OperationNeedLoginError = new Error('抱歉，当前操作需要登录后才能继续进行');
+export const PageNeedLoginError = new Error('抱歉，当前页面需要登录后才能查看');

packages/website/src/hooks/use-notify.tsx

@@ -0,0 +1,61 @@
+import type { PropsWithChildren } from 'react';
+import React, { useEffect, useState } from 'react';
+import type { Socket } from 'socket.io-client';
+import { io } from 'socket.io-client';
+
+import { useUser } from '@bangumi/website/hooks/use-user';
+
+let socket: Socket | null;
+
+interface NoticeContextType {
+  noticeCount: number;
+}
+
+const NoticeContext = React.createContext<NoticeContextType>(null!);
+
+export const NoticeProvider: React.FC<PropsWithChildren> = ({ children }) => {
+  const { user } = useUser();
+  const [noticeCount, setNoticeCount] = useState(0);
+
+  useEffect(() => {
+    if (!user) {
+      return;
+    }
+    if (!socket) {
+      socket = io(location.host, {
+        path: '/p1/socket-io/',
+        reconnection: true,
+        reconnectionDelay: 5000,
+        reconnectionDelayMax: 10000,
+        transports: ['websocket'],
+      });
+
+      socket.on('notify', (event: string) => {
+        const { count } = JSON.parse(event) as { count: number };
+        setNoticeCount(count);
+      });
+
+      socket.on('connect_error', () => {
+        // fallback to polling in netlify env
+        if (socket) {
+          socket.io.opts.transports = ['polling', 'websocket'];
+        }
+      });
+    }
+
+    return () => {
+      socket?.disconnect();
+      socket = null;
+    };
+  }, [user, setNoticeCount]);
+
+  const value: NoticeContextType = {
+    noticeCount,
+  };
+
+  return <NoticeContext.Provider value={value}> {children} </NoticeContext.Provider>;
+};
+
+export function useNotify(): NoticeContextType {
+  return React.useContext(NoticeContext) ?? { noticeCount: 0 };
+}

packages/website/src/pages/index/group/reply/[id]/edit.tsx

@@ -6,6 +6,7 @@ import { useSWRConfig } from 'swr';
 import { ozaClient } from '@bangumi/client';
 import { EditorForm, toast, Typography } from '@bangumi/design';
 import Helmet from '@bangumi/website/components/Helmet';
+import { OperationNeedLoginError } from '@bangumi/website/error';
 import useGroupPost from '@bangumi/website/hooks/use-group-post';
 import { useUser } from '@bangumi/website/hooks/use-user';
 
@@ -20,7 +21,7 @@ const EditReplyPage = () => {
 
   const { user } = useUser();
   if (!user) {
-    throw new Error('抱歉，当前操作需要登录后才能继续进行');
+    throw OperationNeedLoginError;
   }
 
   const { data, mutate } = useGroupPost(postId);

packages/website/src/pages/index/notifications/index.module.less

@@ -0,0 +1,92 @@
+@import '@bangumi/design/theme/base';
+
+.title {
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 34px;
+  color: @gray-100;
+}
+
+.subtitle {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  height: 22px;
+  color: @gray-60;
+
+  > svg {
+    cursor: pointer;
+  }
+}
+
+.tab {
+  margin-top: 24px;
+  margin-bottom: 20px;
+}
+
+.read-all-btn {
+  height: 34px;
+}
+
+.filter {
+  .flex();
+
+  justify-content: space-between;
+  margin-bottom: 10px;
+
+  &-input {
+    height: 34px;
+  }
+}
+
+.notice-item {
+  // padding: 5px 0 5px 5px;
+  display: flex;
+  align-items: center;
+  height: 40px;
+  gap: 10px;
+  border-bottom: 1px dashed @gray-10;
+  color: @gray-80;
+
+  a,
+  span {
+    white-space: nowrap;
+  }
+
+  a {
+    font-weight: 600;
+  }
+
+  &-avatar {
+    height: 30px;
+    width: 30px;
+    border-radius: 6px;
+  }
+
+  // TODO: 移动端换行
+  &-body {
+    display: flex;
+    gap: 4px;
+    max-width: 60%;
+
+    &-content {
+      .truncate();
+    }
+  }
+
+  &-date {
+    color: @gray-10;
+  }
+
+  &-red-dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 9999px;
+    margin-left: auto;
+    margin-right: 4px;
+
+    /* Alert/Error */
+
+    background: @error;
+  }
+}