feat: activity

Signed-off-by: Innei <[email protected]>

src/app/common/deleted/page.tsx

@@ -0,0 +1,18 @@
+import Link from 'next/link'
+
+import { NormalContainer } from '~/components/layout/container/Normal'
+import { StyledButton } from '~/components/ui/button'
+
+export default async function PageDeleted() {
+  return (
+    <NormalContainer>
+      <div className="mt-[250px] flex h-full flex-col items-center justify-center">
+        <h1 className="text-4xl font-bold">此页面已被删除</h1>
+
+        <StyledButton className="mt-8">
+          <Link href="/">返回首页</Link>
+        </StyledButton>
+      </div>
+    </NormalContainer>
+  )
+}

src/app/posts/(post-detail)/[category]/[slug]/loading.tsx

@@ -1,7 +1,9 @@
 import { Loading } from '~/components/ui/loading'
 
-export default () => (
-  <div className="absolute inset-0 flex h-[120px] center">
-    <Loading useDefaultLoadingText />
-  </div>
-)
+export default function Load() {
+  return (
+    <div className="flex h-[240px] w-full center">
+      <Loading useDefaultLoadingText />
+    </div>
+  )
+}

src/components/layout/header/Header.tsx

@@ -3,6 +3,7 @@ import { memo } from 'react'
 import { OnlyMobile } from '~/components/ui/viewport/OnlyMobile'
 import { clsxm } from '~/utils/helper'
 
+import { Activity } from './internal/Activity'
 import { AnimatedLogo } from './internal/AnimatedLogo'
 import { BluredBackground } from './internal/BluredBackground'
 import styles from './internal/grid.module.css'
@@ -41,6 +42,7 @@ const MemoedHeader = memo(() => {
 
         <HeaderLogoArea>
           <AnimatedLogo />
+          <Activity />
           {/* <SiteOwnerAvatar className="absolute bottom-[10px] right-[2px] hidden lg:inline-block" /> */}
           <OnlyMobile>
             <HeaderMeta />

src/components/layout/header/internal/Activity.tsx

@@ -0,0 +1,86 @@
+'use client'
+
+import { useQuery } from '@tanstack/react-query'
+import React, { useState } from 'react'
+import { m } from 'framer-motion'
+import Image from 'next/image'
+import type { RequestError } from '@mx-space/api-client'
+
+import { apiClient } from '~/utils/request'
+
+// autocorrect: false
+const appLabels: { [app: string]: string } = {
+  Slack: 'slack',
+  Arc: 'arc',
+  Code: 'code',
+  WebStorm: 'webstorm',
+  Linear: 'linear',
+  Figma: 'figma',
+  Telegram: 'telegram',
+  WeChat: 'wechat',
+  Discord: 'discord',
+  Mail: 'mail',
+  Safari: 'safari',
+  Music: 'music',
+  Finder: 'finder',
+  Messages: 'messages',
+  QQ: 'qq',
+  Chrome: 'chrome',
+  'Chrome Canary': 'chrome_canary',
+  QQ音乐: 'qq_music',
+  NeteaseMusic: 'netease',
+  iTerm2: 'iterm2',
+  Xcode: 'xcode',
+}
+// autocorrect: true
+export function Activity() {
+  const [isEnabled, setIsEnabled] = useState(true)
+
+  const { data: processName } = useQuery(
+    ['activity'],
+    async () => {
+      return await apiClient.proxy.fn.ps.update
+        .post<string>()
+        .catch((err: RequestError) => {
+          err.status === 404 && setIsEnabled(false)
+          return ''
+        })
+    },
+    {
+      refetchInterval: 5000,
+      retry: false,
+      enabled: isEnabled,
+    },
+  )
+
+  if (!processName) {
+    return null
+  }
+  if (!appLabels[processName]) {
+    console.log('Not collected process name: ', processName)
+    return null
+  }
+
+  return (
+    <div className="pointer-events-auto relative bottom-0 right-[-25px] top-0 flex items-center md:absolute">
+      <m.div
+        className="absolute left-1 top-1 h-6 w-6 select-none rounded-[6px] bg-zinc-500/10 dark:bg-zinc-200/10"
+        animate={{ opacity: [0, 0.65, 0], scale: [1, 1.4, 1] }}
+        transition={{
+          duration: 1.5,
+          repeat: Infinity,
+        }}
+      />
+      <Image
+        width={32}
+        height={32}
+        src={`/apps/${appLabels[processName]}.png`}
+        alt={processName}
+        priority
+        fetchPriority="high"
+        unoptimized
+        className="pointer-events-none select-none"
+      />
+    </div>
+  )
+}

src/components/layout/header/internal/AnimatedLogo.tsx

@@ -49,6 +49,7 @@ export const AnimatedLogo = () => {
     <AnimatePresence>
       {!shouldShowMeta && (
         <m.div
+          layout
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}

src/components/layout/header/internal/HeaderContent.tsx

@@ -84,7 +84,8 @@ const AnimatedMenu: Component = ({ children }) => {
 
 const ForDesktop: Component<{
   shouldHideNavBg?: boolean
-}> = ({ className, shouldHideNavBg }) => {
+  animatedIcon?: boolean
+}> = ({ className, shouldHideNavBg, animatedIcon = true }) => {
   const mouseX = useMotionValue(0)
   const mouseY = useMotionValue(0)
   const radius = useMotionValue(0)
@@ -130,6 +131,7 @@ const ForDesktop: Component<{
             section.subMenu?.findIndex((item) => item.path === pathname) || -1
           return (
             <HeaderMenuItem
+              iconLayout={animatedIcon}
               section={section}
               key={section.path}
               subItemActive={section.subMenu?.[subItemActive]}
@@ -151,7 +153,8 @@ const HeaderMenuItem = memo<{
   section: IHeaderMenu
   isActive: boolean
   subItemActive?: IHeaderMenu
-}>(({ section, isActive, subItemActive }) => {
+  iconLayout?: boolean
+}>(({ section, isActive, subItemActive, iconLayout }) => {
   const href = section.path
 
   return (
@@ -164,7 +167,7 @@ const HeaderMenuItem = memo<{
         <span className="relative flex items-center">
           {isActive && (
             <m.span
-              layoutId="header-menu-icon"
+              layoutId={iconLayout ? 'header-menu-icon' : undefined}
               className={clsxm('mr-2 flex items-center')}
             >
               {subItemActive?.icon ?? section.icon}

src/components/layout/header/internal/SiteOwnerAvatar.tsx

@@ -16,7 +16,7 @@ export const SiteOwnerAvatar: Component = ({ className }) => {
         className,
       )}
     >
-      <Image src={avatar} alt="Site Owner Avatar" width={25} height={25} />
+      <Image src={avatar} alt="Site Owner Avatar" width={40} height={40} />
     </div>
   )
 }

src/lib/route-builder.ts

@@ -20,6 +20,8 @@ export enum Routes {
 
   Projects = '/projects',
   Project = '/projects/',
+
+  PageDeletd = '/common/deleted',
 }
 
 type Noop = never
@@ -75,12 +77,12 @@ export type RouteParams<T extends Routes> = T extends Routes.Home
   ? OnlySlug
   : T extends Routes.Project
   ? OnlyId
-  : never
+  : {}
 
-export const routeBuilder = <T extends Routes>(
+export function routeBuilder<T extends Routes>(
   route: T,
   params: RouteParams<typeof route>,
-) => {
+) {
   let href: string = route
   switch (route) {
     case Routes.Note: {
@@ -123,11 +125,6 @@ export const routeBuilder = <T extends Routes>(
       href += p.id
       break
     }
-    case Routes.NoteTopics:
-    case Routes.Notes:
-    case Routes.Login: {
-      break
-    }
   }
   return href
 }

src/providers/root/socket-provider.tsx

@@ -1,11 +1,17 @@
 'use client'
 
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
+import { useRouter } from 'next/navigation'
 
 export const SocketContainer: Component = () => {
+  const connectOnce = useRef(false)
+  const router = useRouter()
   useEffect(() => {
+    if (connectOnce.current) return
     import('~/socket').then((module) => {
       const { socketClient } = module
+      connectOnce.current = true
+      socketClient.setRouter(router)
       socketClient.initIO()
     })
   }, [])

src/socket/handler.ts

@@ -1,15 +1,29 @@
-import type { NoteModel } from '@mx-space/api-client'
-import type { EventTypes } from '~/types/events'
+import type { NoteModel, PostModel } from '@mx-space/api-client'
+import type { AppRouterInstance } from 'next/dist/shared/lib/app-router-context'
 
 import { setOnlineCount } from '~/atoms'
+import { routeBuilder, Routes } from '~/lib/route-builder'
 import { toast } from '~/lib/toast'
 import {
   getCurrentNoteData,
   setCurrentNoteData,
 } from '~/providers/note/CurrentNoteDataProvider'
+import {
+  getCurrentPageData,
+  setCurrentPageData,
+} from '~/providers/page/CurrentPageDataProvider'
+import {
+  getCurrentPostData,
+  setCurrentPostData,
+} from '~/providers/post/CurrentPostDataProvider'
+import { EventTypes } from '~/types/events'
 import { isDev } from '~/utils/env'
 
-export const eventHandler = (type: EventTypes, data: any) => {
+export const eventHandler = (
+  type: EventTypes,
+  data: any,
+  router: AppRouterInstance,
+) => {
   switch (type) {
     case 'VISITOR_ONLINE':
     case 'VISITOR_OFFLINE': {
@@ -18,6 +32,28 @@ export const eventHandler = (type: EventTypes, data: any) => {
       break
     }
 
+    case EventTypes.POST_UPDATE: {
+      const post = data as PostModel
+      if (getCurrentPostData()?.id === post.id) {
+        setCurrentPostData((draft) => {
+          const nextPost = { ...data }
+          Reflect.deleteProperty(nextPost, 'category')
+          Object.assign(draft, nextPost)
+        })
+        toast('文章已更新')
+      }
+      break
+    }
+
+    case EventTypes.POST_DELETE: {
+      const post = data as PostModel
+      if (getCurrentPostData()?.id === post.id) {
+        router.push(routeBuilder(Routes.PageDeletd, {}))
+        toast.error('文章已删除')
+      }
+      break
+    }
+
     case 'NOTE_UPDATE': {
       const note = data as NoteModel
       if (getCurrentNoteData()?.data.id === note.id) {
@@ -29,6 +65,26 @@ export const eventHandler = (type: EventTypes, data: any) => {
       break
     }
 
+    case 'NOTE_DELETE': {
+      const note = data as NoteModel
+      if (getCurrentNoteData()?.data.id === note.id) {
+        router.push(routeBuilder(Routes.PageDeletd, {}))
+        toast.error('手记已删除')
+      }
+      break
+    }
+
+    case EventTypes.PAGE_UPDATED: {
+      const { slug } = data
+      if (getCurrentPageData()?.slug === slug) {
+        setCurrentPageData((draft) => {
+          Object.assign(draft, data)
+        })
+        toast('页面已更新')
+      }
+      break
+    }
+
     default: {
       if (isDev) {
         console.log(type, data)

src/socket/socket-client.ts

@@ -1,5 +1,6 @@
 import { io } from 'socket.io-client'
 import type { EventTypes } from '~/types/events'
+import type { AppRouterInstance } from 'next/dist/shared/lib/app-router-context'
 import type { Socket } from 'socket.io-client'
 
 import { simpleCamelcaseKeys as camelcaseKeys } from '@mx-space/api-client'
@@ -12,6 +13,8 @@ import { eventHandler } from './handler'
 class SocketClient {
   public socket!: Socket
 
+  private router: AppRouterInstance
+
   constructor() {
     this.socket = io(`${GATEWAY_URL}/web`, {
       timeout: 10000,
@@ -21,6 +24,10 @@ class SocketClient {
       transports: ['websocket'],
     })
   }
+
+  setRouter(router: AppRouterInstance) {
+    this.router = router
+  }
   initIO() {
     if (!this.socket) {
       return
@@ -51,7 +58,7 @@ class SocketClient {
 
     window.dispatchEvent(new CustomEvent(type, { detail: data }))
 
-    eventHandler(type, data)
+    eventHandler(type, data, this.router)
   }
   emit(event: EventTypes, payload: any) {
     return new Promise((resolve) => {

src/types/events.ts

@@ -1,6 +1,6 @@
 import type { NoteModel } from '@mx-space/api-client'
 
-export enum EventTypes {
+export const enum EventTypes {
   GATEWAY_CONNECT = 'GATEWAY_CONNECT',
   GATEWAY_DISCONNECT = 'GATEWAY_DISCONNECT',