feat: tag modal

Signed-off-by: Innei <i@innei.in>

src/app/(page-detail)/[slug]/layout.tsx

@@ -8,7 +8,9 @@ import { RequestError } from '@mx-space/api-client'
 import { NotSupport } from '~/components/common/NotSupport'
 import { BottomToUpSoftScaleTransitionView } from '~/components/ui/transition/BottomToUpSoftScaleTransitionView'
 import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView'
+import { OnlyMobile } from '~/components/ui/viewport/OnlyMobile'
 import { CommentAreaRoot } from '~/components/widgets/comment/CommentRoot'
+import { TocFAB } from '~/components/widgets/toc/TocFAB'
 import { REQUEST_GEO } from '~/constants/system'
 import { attachUA } from '~/lib/attach-ua'
 import { getSummaryFromMd } from '~/lib/markdown'
@@ -122,6 +124,10 @@ export default async (props: NextPageParams<PageParams>) => {
           <CommentAreaRoot refId={data.id} allowComment={data.allowComment} />
         )}
       </BottomToUpSoftScaleTransitionView>
+
+      <OnlyMobile>
+        <TocFAB />
+      </OnlyMobile>
     </>
   )
 }

src/app/notes/[id]/layout.tsx

@@ -4,8 +4,10 @@ import type { Metadata } from 'next'
 import { NotSupport } from '~/components/common/NotSupport'
 import { BottomToUpSoftScaleTransitionView } from '~/components/ui/transition/BottomToUpSoftScaleTransitionView'
 import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView'
+import { OnlyMobile } from '~/components/ui/viewport/OnlyMobile'
 import { CommentAreaRoot } from '~/components/widgets/comment'
 import { NoteMainContainer } from '~/components/widgets/note/NoteMainContainer'
+import { TocFAB } from '~/components/widgets/toc/TocFAB'
 import { REQUEST_GEO, REQUEST_QUERY } from '~/constants/system'
 import { attachUA } from '~/lib/attach-ua'
 import { getSummaryFromMd } from '~/lib/markdown'
@@ -97,6 +99,10 @@ export default async (
           )}
         </BottomToUpSoftScaleTransitionView>
       </BottomToUpTransitionView>
+
+      <OnlyMobile>
+        <TocFAB />
+      </OnlyMobile>
     </>
   )
 }

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

@@ -8,7 +8,9 @@ import { RequestError } from '@mx-space/api-client'
 import { NotSupport } from '~/components/common/NotSupport'
 import { BottomToUpSoftScaleTransitionView } from '~/components/ui/transition/BottomToUpSoftScaleTransitionView'
 import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView'
+import { OnlyMobile } from '~/components/ui/viewport/OnlyMobile'
 import { CommentAreaRoot } from '~/components/widgets/comment'
+import { TocFAB } from '~/components/widgets/toc/TocFAB'
 import { REQUEST_GEO } from '~/constants/system'
 import { attachUA } from '~/lib/attach-ua'
 import { getSummaryFromMd } from '~/lib/markdown'
@@ -104,6 +106,10 @@ export default async (props: NextPageParams<PageParams>) => {
 
         <LayoutRightSideProvider className="relative hidden lg:block" />
       </div>
+
+      <OnlyMobile>
+        <TocFAB />
+      </OnlyMobile>
     </>
   )
 }

src/app/posts/page.tsx

@@ -2,6 +2,7 @@ import { NormalContainer } from '~/components/layout/container/Normal'
 import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView'
 import { PostItem } from '~/components/widgets/post/PostItem'
 import { PostPagination } from '~/components/widgets/post/PostPagination'
+import { PostTagsFAB } from '~/components/widgets/post/PostTagsFAB'
 import { NothingFound } from '~/components/widgets/shared/NothingFound'
 import { apiClient } from '~/lib/request'
 
@@ -40,6 +41,7 @@ export default async (props: Props) => {
       </ul>
 
       <PostPagination pagination={pagination} />
+      <PostTagsFAB />
     </NormalContainer>
   )
 }

src/app/timeline/page.tsx

@@ -29,7 +29,7 @@ type MapType = {
   meta: string[]
   date: Date
   href: string
-  as: string
+
   type: ArticleType
   id: string
   important?: boolean
@@ -122,8 +122,8 @@ export default function TimelinePage() {
         title: post.title,
         meta: [post.category.name, '博文'],
         date,
-        as: `/posts/${post.category.slug}/${post.slug}`,
-        href: `/posts/[category]/[slug]`,
+        href: `/posts/${post.category.slug}/${post.slug}`,
+
         type: ArticleType.Post,
         id: post.id,
       }
@@ -147,8 +147,8 @@ export default function TimelinePage() {
           '手记',
         ].filter(Boolean) as string[],
         date,
-        as: `/notes/${note.nid}`,
-        href: '/notes/[id]',
+        href: `/notes/${note.nid}`,
+
         type: ArticleType.Note,
         id: note.id,
         important: note.hasMemory,
@@ -204,7 +204,7 @@ export default function TimelinePage() {
               <TimelineList>
                 {value.map((item) => {
                   return (
-                    <m.li
+                    <li
                       key={item.id}
                       className="flex items-center justify-between"
                       data-id={item.id}
@@ -219,7 +219,6 @@ export default function TimelinePage() {
                         <Link
                           prefetch={false}
                           href={item.href}
-                          as={item.as}
                           className="min-w-0 truncate leading-6"
                         >
                           <span className="min-w-0 truncate">{item.title}</span>
@@ -240,7 +239,7 @@ export default function TimelinePage() {
                           {item.meta.map((m, i) => (i === 0 ? m : `/${m}`))}
                         </span>
                       )}
-                    </m.li>
+                    </li>
                   )
                 })}
               </TimelineList>

src/components/layout/footer/FooterInfo.tsx

@@ -124,7 +124,7 @@ const FooterBottom = async () => {
           <Divider className="hidden md:inline" />
 
           <SubscribeTextButton>
-            <Divider className="hidden md:inline" />
+            <Divider className="inline" />
           </SubscribeTextButton>
         </span>
         <span className="mt-3 block md:mt-0 md:inline">

src/components/layout/footer/GatewayCount.tsx

@@ -2,6 +2,7 @@
 
 import { useOnlineCount } from '~/atoms'
 import { FloatPopover } from '~/components/ui/float-popover'
+import { NumberSmoothTransition } from '~/components/ui/number-transition/NumberSmoothTransition'
 
 export const GatewayCount = () => {
   return (
@@ -30,5 +31,9 @@ export const GatewayCount = () => {
 }
 const GatewayCountTrigger = () => {
   const count = useOnlineCount()
-  return <span>正在被 {count} 人看爆</span>
+  return (
+    <span>
+      正在被 <NumberSmoothTransition>{count}</NumberSmoothTransition> 人看爆
+    </span>
+  )
 }

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

@@ -23,7 +23,8 @@ export const SiteOwnerAvatar: Component = ({ className }) => {
     refetchInterval: 1000 * 60,
   })
 
-  const handleGoLive = useCallback(() => {
+  const handleGoLive = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation()
     window.open(`https://live.bilibili.com/${appConfig.module.bilibili.liveId}`)
   }, [])
   if (!avatar) return

src/components/layout/root/Root.tsx

@@ -1,6 +1,4 @@
 import { BackToTopFAB, FABContainer } from '~/components/ui/fab'
-import { OnlyMobile } from '~/components/ui/viewport/OnlyMobile'
-import { TocFAB } from '~/components/widgets/toc/TocFAB'
 
 import { Content } from '../content/Content'
 import { Footer } from '../footer'
@@ -15,9 +13,6 @@ export const Root: Component = ({ children }) => {
       <Footer />
       <FABContainer>
         <BackToTopFAB />
-        <OnlyMobile>
-          <TocFAB />
-        </OnlyMobile>
       </FABContainer>
     </>
   )

src/components/ui/dlalog/DialogOverlay.tsx

@@ -1,7 +1,13 @@
 import * as Dialog from '@radix-ui/react-dialog'
 import { m } from 'framer-motion'
 
-export const DialogOverlay = ({ onClick }: { onClick?: () => void }) => {
+export const DialogOverlay = ({
+  onClick,
+  zIndex,
+}: {
+  onClick?: () => void
+  zIndex?: number
+}) => {
   return (
     <Dialog.Overlay asChild>
       <m.div
@@ -10,6 +16,7 @@ export const DialogOverlay = ({ onClick }: { onClick?: () => void }) => {
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
+        style={{ zIndex }}
       />
     </Dialog.Overlay>
   )

src/components/ui/fab/FABContainer.tsx

@@ -1,14 +1,16 @@
 'use client'
 
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useId } from 'react'
 import clsx from 'clsx'
 import { AnimatePresence, m } from 'framer-motion'
+import { atom, useAtomValue } from 'jotai'
 import type { HTMLMotionProps } from 'framer-motion'
 import type { PropsWithChildren } from 'react'
 
 import { useIsMobile } from '~/atoms'
 import { useIsClient } from '~/hooks/common/use-is-client'
 import { clsxm } from '~/lib/helper'
+import { jotaiStore } from '~/lib/store'
 import { usePageScrollDirectionSelector } from '~/providers/root/page-scroll-info-provider'
 
 export interface FABConfig {
@@ -17,47 +19,6 @@ export interface FABConfig {
   onClick: () => void
 }
 
-class FABStatic {
-  private setState: React.Dispatch<React.SetStateAction<FABConfig[]>> | null =
-    null
-  register(setter: any) {
-    this.setState = setter
-  }
-  destroy() {
-    this.setState = null
-  }
-
-  add(fabConfig: FABConfig) {
-    if (!this.setState) return
-
-    const id = fabConfig.id
-
-    this.setState((state) => {
-      if (state.find((config) => config.id === id)) return state
-      return [...state, fabConfig]
-    })
-
-    return () => {
-      this.remove(fabConfig.id)
-    }
-  }
-
-  remove(id: string) {
-    if (!this.setState) return
-    this.setState((state) => {
-      return state.filter((config) => config.id !== id)
-    })
-  }
-}
-
-const fab = new FABStatic()
-
-export const useFAB = (fabConfig: FABConfig) => {
-  useEffect(() => {
-    return fab.add(fabConfig)
-  }, [])
-}
-
 export const FABBase = (
   props: PropsWithChildren<
     {
@@ -74,12 +35,13 @@ export const FABBase = (
     <AnimatePresence mode="wait">
       {show && (
         <m.button
+          layout="position"
           aria-label="Floating action button"
           initial={{ opacity: 0.3, scale: 0.8 }}
           animate={{ opacity: 1, scale: 1 }}
           exit={{ opacity: 0.3, scale: 0.8 }}
           className={clsxm(
-            'mt-2 inline-flex items-center justify-center',
+            'mt-2 flex items-center justify-center',
             'h-12 w-12 text-lg md:h-10 md:w-10 md:text-base',
             'border border-accent transition-all duration-300 hover:opacity-100 focus:opacity-100 focus:outline-none',
             'rounded-xl border border-zinc-400/20 shadow-lg backdrop-blur-lg dark:border-zinc-500/30 dark:bg-zinc-800/80 dark:text-zinc-200',
@@ -96,16 +58,32 @@ export const FABBase = (
   )
 }
 
-export const FABContainer = (props: {
-  children: JSX.Element | JSX.Element[]
+const fabConfigAtom = atom([] as FABConfig[])
+export const FABPortable = (props: {
+  children: React.JSX.Element
+
+  onClick: () => void
 }) => {
-  const [fabConfig, setFabConfig] = useState<FABConfig[]>([])
+  const { onClick, children } = props
+  const id = useId()
   useEffect(() => {
-    fab.register(setFabConfig)
+    jotaiStore.set(fabConfigAtom, (prev) => {
+      if (prev.find((config) => config.id === id)) return prev
+      return [...prev, { id, onClick, icon: children }]
+    })
+
     return () => {
-      fab.destroy()
+      jotaiStore.set(fabConfigAtom, (prev) => {
+        return prev.filter((config) => config.id !== id)
+      })
     }
-  }, [])
+  }, [children, id, onClick])
+  return null
+}
+export const FABContainer = (props: {
+  children: JSX.Element | JSX.Element[]
+}) => {
+  const fabConfig = useAtomValue(fabConfigAtom)
 
   const isClient = useIsClient()
   const isMobile = useIsMobile()
@@ -120,10 +98,12 @@ export const FABContainer = (props: {
   if (!isClient) return null
 
   return (
-    <div
+    <m.div
+      layout
+      layoutRoot
       data-testid="fab-container"
       className={clsx(
-        'font-lg fixed bottom-4 bottom-[calc(1rem+env(safe-area-inset-bottom))] right-4 z-[9] flex flex-col',
+        'font-lg fixed bottom-[calc(1rem+env(safe-area-inset-bottom))] right-4 z-[9] flex flex-col',
         shouldHide ? 'translate-x-[calc(100%+2rem)]' : '',
         'transition-transform duration-300 ease-in-out',
       )}
@@ -137,6 +117,6 @@ export const FABContainer = (props: {
         )
       })}
       {props.children}
-    </div>
+    </m.div>
   )
 }

src/components/ui/float-popover/FloatPopover.tsx

@@ -205,7 +205,7 @@ export function FloatPopover<T extends {}>(
   )
 
   useEffect(() => {
-    if (refs.floating.current && open) {
+    if (refs.floating.current && open && type === 'popover') {
       refs.floating.current.focus()
     }
   }, [open])

src/components/ui/number-transition/NumberTransition.tsx → src/components/ui/number-transition/CountUp.tsx

@@ -5,7 +5,7 @@ import { animate } from 'framer-motion'
 
 import { useStateToRef } from '~/hooks/common/use-state-ref'
 
-export const NumberTransition: Component<{
+export const CountUp: Component<{
   to: number
   decimals: number
   duration: number