feat: optimize popover in mobile

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

Author: Innei

src/app/(app)/notes/[id]/page.tsx

@@ -7,10 +7,10 @@ import { Presence } from '~/components/modules/activity'
 import {
   NoteActionAside,
   NoteBottomBarAction,
+  NoteBottomTopic,
   NoteFooterNavigationBarForMobile,
   NoteMetaBar,
   NoteMetaReadingCount,
-  NoteTopic,
 } from '~/components/modules/note'
 import {
   NoteBanner,
@@ -96,7 +96,7 @@ export default async function Page(props: {
       <ClientOnly>
         <div className="mt-8" data-hide-print />
         <NoteBottomBarAction />
-        <NoteTopic />
+        <NoteBottomTopic />
         <XLogInfoForNote />
         <NoteFooterNavigationBarForMobile />
       </ClientOnly>

src/app/(app)/notes/[id]/pageExtra.tsx

@@ -88,7 +88,15 @@ export const NoteHeaderDate = () => {
   }`
 
   return (
-    <FloatPopover as="span" type="tooltip" TriggerComponent={NoteDateMeta}>
+    <FloatPopover
+      sheet={{
+        triggerAsChild: false,
+      }}
+      as="span"
+      mobileAsSheet
+      type="tooltip"
+      TriggerComponent={NoteDateMeta}
+    >
       {tips}
     </FloatPopover>
   )

src/app/(dashboard)/dashboard/notes/list/page.tsx

@@ -87,6 +87,7 @@ const cardSlot: CardProps<NoteModel>['slots'] = {
         <RelativeTime date={data.created} />
         {data.modified && (
           <FloatPopover
+            mobileAsSheet
             wrapperClassName="text-xs"
             as="span"
             type="tooltip"
@@ -97,7 +98,8 @@ const cardSlot: CardProps<NoteModel>['slots'] = {
         )}
         {data.topic && (
           <FloatPopover
-            TriggerComponent={() => (
+            mobileAsSheet
+            triggerElement={
               <div className="flex items-center gap-1">
                 <img
                   src={data.topic?.icon}
@@ -106,7 +108,7 @@ const cardSlot: CardProps<NoteModel>['slots'] = {
                 />
                 <div>{data.topic && data.topic.name}</div>
               </div>
-            )}
+            }
           >
             <div className="flex flex-col gap-1">
               <div>专栏：{data.topic.name}</div>

src/app/(dashboard)/dashboard/posts/list/page.tsx

@@ -94,6 +94,7 @@ const cardSlot: CardProps<PostModel>['slots'] = {
         <RelativeTime date={data.created} />
         {data.modified && (
           <FloatPopover
+            mobileAsSheet
             wrapperClassName="text-xs"
             as="span"
             type="tooltip"
@@ -103,6 +104,7 @@ const cardSlot: CardProps<PostModel>['slots'] = {
           </FloatPopover>
         )}
         <FloatPopover
+          mobileAsSheet
           triggerElement={
             <div className="flex items-center gap-2">
               <FeHash className="translate-y-[0.5px]" />

src/components/layout/footer/FooterInfo.tsx

@@ -117,6 +117,7 @@ const PoweredBy: Component = ({ className }) => {
       <span className="mx-1">&</span>
       <FloatPopover
         isDisabled={!process.env.COMMIT_HASH}
+        mobileAsSheet
         type="tooltip"
         triggerElement={
           <StyledLink href="https://github.com/innei/Shiro" target="_blank">

src/components/layout/footer/GatewayInfo.tsx

@@ -18,6 +18,7 @@ import { routeBuilder, Routes } from '~/lib/route-builder'
 const Help = () => {
   return (
     <FloatPopover
+      mobileAsSheet
       as="span"
       triggerElement={
         <i className="icon-[mingcute--question-line] cursor-help" />
@@ -58,30 +59,27 @@ const ConnectedIndicator = () => {
         trackerMessage="socket_status"
         action={TrackerAction.Impression}
       />
-      {connected ? (
-        <>
-          <span
-            className="absolute size-5"
-            style={{
-              background: `radial-gradient(45.91% 45.91% at 49.81% 54.09%, #00FC47 7.13%, rgba(174, 244, 194, 0.46) 65.83%, rgba(252, 252, 252, 0.00) 100%)`,
-            }}
-          />
+      <ConnectionStatus isConnected={connected} />
+    </div>
+  )
+}
 
-          <span className="ml-6">已连接</span>
-        </>
-      ) : (
-        <>
-          <span
-            className="absolute size-5"
-            style={{
-              background: `radial-gradient(45.91% 45.91% at 49.81% 54.09%, #FC0000 7.13%, rgba(244, 174, 174, 0.46) 65.83%, rgba(252, 252, 252, 0.00) 100%)`,
-            }}
-          />
+function ConnectionStatus({ isConnected }: { isConnected: boolean }) {
+  const color = isConnected ? '#00FC47' : '#FC0000'
+  const secondaryColor = isConnected
+    ? 'rgba(174, 244, 194, 0.46)'
+    : 'rgba(244, 174, 174, 0.46)'
+  const text = isConnected ? '已连接' : '未连接'
 
-          <span className="ml-6">未连接</span>
-        </>
-      )}
-    </div>
+  const backgroundStyle = {
+    background: `radial-gradient(45.91% 45.91% at 49.81% 54.09%, ${color} 7.13%, ${secondaryColor} 65.83%, rgba(252, 252, 252, 0.00) 100%)`,
+  }
+
+  return (
+    <>
+      <span className="absolute size-5" style={backgroundStyle} />
+      <span className="ml-6">{text}</span>
+    </>
   )
 }
 
@@ -94,6 +92,7 @@ export const GatewayInfo = () => {
     <div className="inline-flex items-center gap-2">
       <FloatPopover
         asChild
+        mobileAsSheet
         placement="top"
         trigger="both"
         offset={10}
@@ -170,7 +169,7 @@ const RoomsInfo = () => {
   if (data.length === 0)
     return <div className="text-gray-500">还没有小伙伴在阅览文章哦~</div>
   return (
-    <div className="max-w-[80vw] lg:max-w-[400px]">
+    <div className="lg:max-w-[400px]">
       <div className="mb-2 text-sm font-medium">下面的内容正在被看爆：</div>
       <ul className="flex flex-col justify-between gap-2">
         {data.map((room) => (

src/components/modules/comment/CommentBox/UniversalTextArea.tsx

@@ -4,10 +4,10 @@ import { useCallback, useEffect, useRef } from 'react'
 import { useIsomorphicLayoutEffect } from 'foxact/use-isomorphic-layout-effect'
 import dynamic from 'next/dynamic'
 
+import { useIsMobile } from '~/atoms/hooks'
 import { FloatPopover } from '~/components/ui/float-popover'
 import { TextArea } from '~/components/ui/input'
 import { useRefValue } from '~/hooks/common/use-ref-value'
-import { preventDefault } from '~/lib/dom'
 
 import { getRandomPlaceholder } from './constants'
 import {
@@ -73,6 +73,7 @@ export const UniversalTextArea: Component = ({ className }) => {
   }, [])
 
   const [sendComment] = useSendComment()
+  const isMobile = useIsMobile()
   return (
     <TextArea
       bordered={false}
@@ -87,22 +88,32 @@ export const UniversalTextArea: Component = ({ className }) => {
       }}
     >
       <CommentBoxSlotPortal>
-        <FloatPopover trigger="click" TriggerComponent={EmojiButton} headless>
-          <EmojiPicker onEmojiSelect={handleInsertEmoji} />
-        </FloatPopover>
+        <>
+          {!isMobile && (
+            <FloatPopover
+              mobileAsSheet
+              trigger="click"
+              TriggerComponent={EmojiButton}
+              headless
+            >
+              <EmojiPicker onEmojiSelect={handleInsertEmoji} />
+            </FloatPopover>
+          )}
+        </>
       </CommentBoxSlotPortal>
     </TextArea>
   )
 }
 
 const EmojiButton = () => {
   return (
-    <button
+    <div
       className="ml-0 inline-flex size-5 translate-y-1 text-base center md:ml-4"
-      onClick={preventDefault}
+      role="button"
+      tabIndex={0}
     >
       <i className="icon-[mingcute--emoji-2-line]" />
       <span className="sr-only">表情</span>
-    </button>
+    </div>
   )
 }

src/components/modules/dashboard/home/Shiju.tsx

@@ -20,7 +20,7 @@ export const ShiJu = () => {
 
   if (!origin) return null
   return (
-    <FloatPopover triggerElement={<span>{data?.shiju}</span>}>
+    <FloatPopover mobileAsSheet triggerElement={<span>{data?.shiju}</span>}>
       <div className="max-w-[800px] text-center">
         <h3 className="sticky top-0 py-2 text-2xl font-medium">
           {origin.title}

src/components/modules/dashboard/ip/IpInfoPopover.tsx

@@ -45,6 +45,7 @@ export const IpInfoPopover: Component<IpInfoPopoverProps> = (props) => {
 
   return (
     <FloatPopover
+      mobileAsSheet
       type="tooltip"
       wrapperClassName="truncate"
       onOpen={() => {

src/components/modules/note/NoteTopic.tsx src/components/modules/note/NoteBottomTopic.tsx

@@ -3,6 +3,7 @@
 import Link from 'next/link'
 import type { FC } from 'react'
 
+import { useIsMobile } from '~/atoms/hooks'
 import { Avatar } from '~/components/ui/avatar'
 import { Divider } from '~/components/ui/divider'
 import { FloatPopover } from '~/components/ui/float-popover'
@@ -21,9 +22,9 @@ const textToBigCharOrWord = (name: string | undefined) => {
   return bigChar
 }
 
-export const NoteTopic: FC = () => {
+export const NoteBottomTopic: FC = () => {
   const topic = useCurrentNoteDataSelector((state) => state?.data.topic)
-
+  const isMobile = useIsMobile()
   if (!topic) return null
   const { icon, name, introduce } = topic
 
@@ -47,14 +48,19 @@ export const NoteTopic: FC = () => {
           <span className="text-md mb-2 font-medium">
             <FloatPopover
               strategy="absolute"
+              mobileAsSheet
               triggerElement={
-                <Link
-                  href={routeBuilder(Routes.NoteTopic, {
-                    slug: topic.slug,
-                  })}
-                >
+                isMobile ? (
                   <span>{name}</span>
-                </Link>
+                ) : (
+                  <Link
+                    href={routeBuilder(Routes.NoteTopic, {
+                      slug: topic.slug,
+                    })}
+                  >
+                    <span>{name}</span>
+                  </Link>
+                )
               }
             >
               <NoteTopicDetail topic={topic} />

src/components/modules/note/NoteTopicDetail.tsx

@@ -5,6 +5,7 @@ import Link from 'next/link'
 import type { TopicModel } from '@mx-space/api-client'
 import type { FC } from 'react'
 
+import { useIsMobile } from '~/atoms/hooks'
 import { MdiClockOutline } from '~/components/icons/clock'
 import { MdiFountainPenTip } from '~/components/icons/pen'
 import { Divider, DividerVertical } from '~/components/ui/divider'
@@ -30,6 +31,7 @@ export const NoteTopicDetail: FC<{ topic: TopicModel }> = (props) => {
       }),
   })
 
+  const isMobile = useIsMobile()
   const isClient = useIsClient()
   if (!isClient) {
     return null
@@ -45,6 +47,9 @@ export const NoteTopicDetail: FC<{ topic: TopicModel }> = (props) => {
         <h1 className="!m-0 inline-block pb-2 text-lg font-medium">
           {topic.name}
         </h1>
+        {isMobile && (
+          <i className="icon-[mingcute--arrow-right-up-line] ml-2 translate-y-[2px] opacity-70" />
+        )}
       </Link>
 
       <div className="line-clamp-2 break-all text-neutral-content">

src/components/modules/note/index.ts

@@ -7,7 +7,7 @@ export * from './NoteMainContainer'
 export * from './NoteMetaBar'
 export * from './NotePasswordForm'
 export * from './NoteTimeline'
-export * from './NoteTopic'
+export * from './NoteBottomTopic'
 export * from './NoteTopicDetail'
 export * from './NoteTopicInfo'
 export * from './NoteTopicMarkdownRender'

src/components/modules/post/PostMetaBar.tsx

@@ -42,6 +42,7 @@ export const PostMetaBar: Component<{
         )}
         {!!meta.modified && (
           <FloatPopover
+            mobileAsSheet
             wrapperClassName="text-xs"
             as="span"
             type="tooltip"

src/components/modules/shared/MetaBar.tsx

@@ -19,6 +19,7 @@ export const CurrentReadingCountingMetaBarItem: FC<{
       {leftElement}
       <FloatPopover
         asChild
+        mobileAsSheet
         type="tooltip"
         triggerElement={
           <span>

src/components/modules/shared/SearchFAB.tsx

@@ -295,6 +295,7 @@ const SearchPanelImpl = () => {
             }}
           >
             <FloatPopover
+              mobileAsSheet
               type="tooltip"
               triggerElement={
                 <i className="icon-[mingcute--download-2-line]" />

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

@@ -20,13 +20,41 @@ import React, {
 import { AnimatePresence, m } from 'framer-motion'
 import type { UseFloatingOptions } from '@floating-ui/react-dom'
 import type { FC, PropsWithChildren, ReactElement } from 'react'
+import type { PresentSheetProps } from '../sheet'
 
+import { useIsMobile } from '~/atoms/hooks'
 import { microReboundPreset } from '~/constants/spring'
 import useClickAway from '~/hooks/common/use-click-away'
 import { useEventCallback } from '~/hooks/common/use-event-callback'
 import { clsxm } from '~/lib/helper'
 
 import { RootPortal } from '../portal'
+import { PresentSheet } from '../sheet'
+
+export const FloatPopover = function <T extends {}>(
+  props: FloatPopoverProps<T> & {
+    mobileAsSheet?: boolean
+    sheet?: Partial<Omit<PresentSheetProps, 'content'>>
+  },
+) {
+  const isMobile = useIsMobile()
+  if (isMobile && props.mobileAsSheet) {
+    const { triggerElement, TriggerComponent, triggerComponentProps } = props
+
+    const Child = triggerElement
+      ? triggerElement
+      : TriggerComponent
+        ? createElement(TriggerComponent as any, triggerComponentProps)
+        : null
+
+    return (
+      <PresentSheet content={props.children} {...props.sheet}>
+        {Child}
+      </PresentSheet>
+    )
+  }
+  return <RealFloatPopover {...props} />
+}
 
 type FloatPopoverProps<T> = PropsWithChildren<{
   triggerElement?: string | ReactElement
@@ -71,7 +99,7 @@ const PopoverActionContext = createContext<{
 
 export const usePopoverAction = () => useContext(PopoverActionContext)
 
-export const FloatPopover = function FloatPopover<T extends {}>(
+const RealFloatPopover = function FloatPopover<T extends {}>(
   props: FloatPopoverProps<T>,
 ) {
   const {