feat: optimize popover in mobile

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

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 {