feat: mobile optimize

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

README.md

@@ -6,6 +6,18 @@ A clean and modern front-end for [Mix Space](https://github.com/mx-space)
 
 **WIP**
 
+## 设计细节
+
+### 本站依旧接入了 WebSocket 连接，通知和更新当前的活动。
+
+### 头部
+
+
+
+### FAB
+
+对移动端进行了优化，调整了尺寸为了更好的点击。
+
 ## License
 
 2023 Innei, GPLv3.

src/components/layout/footer/FooterInfo.tsx

@@ -137,9 +137,7 @@ const FooterBottom = async () => {
           浙 ICP 备 20028356 号
         </StyledLink>
         <Divider />
-        <span>
-          <GatewayCount /> 个小伙伴正在浏览
-        </span>
+        <GatewayCount />
         {!!lastVisitor && (
           <>
             <Divider />

src/components/layout/footer/GatewayCount.tsx

@@ -1,7 +1,30 @@
 'use client'
 
 import { useOnlineCount } from '~/atoms'
+import { withNoSSR } from '~/components/hoc/with-no-ssr'
+import { FloatPopover } from '~/components/ui/float-popover'
 
-export const GatewayCount = () => {
-  return useOnlineCount()
+export const GatewayCount = withNoSSR(() => {
+  return (
+    <FloatPopover TriggerComponent={GatewayCountTrigger} type="tooltip">
+      <div className="space-y-2 leading-relaxed">
+        <p className="flex items-center space-x-1 opacity-80">
+          <i className="icon-[mingcute--question-line]" />
+          <span className="font-medium">这是如何实现的？</span>
+        </p>
+        <p>
+          当你打开这个页面时，会自动建立 WebSocket
+          连接，当成功连接后服务器会推送当前浏览页面的人数。
+        </p>
+        <p>
+          WebSocket
+          用于通知站点，站长在站点的实时活动，包括不限于文章的发布和更新。
+        </p>
+      </div>
+    </FloatPopover>
+  )
+})
+const GatewayCountTrigger = () => {
+  const count = useOnlineCount()
+  return <span>正在被 {count} 人看爆</span>
 }

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

@@ -15,7 +15,8 @@ export const HeaderWithShadow: Component = ({ children }) => {
     <header
       className={clsx(
         'fixed left-0 right-0 top-0 z-[9] h-[4.5rem] overflow-hidden transition-shadow duration-200',
-        showShadow && 'shadow-xl shadow-neutral-100 dark:shadow-neutral-800',
+        showShadow &&
+          'shadow-none shadow-neutral-100 dark:shadow-neutral-800/50 lg:shadow-sm',
       )}
     >
       {children}

src/components/ui/fab/FABContainer.tsx

@@ -1,10 +1,14 @@
 'use client'
 
 import React, { useEffect, useState } from 'react'
+import clsx from 'clsx'
 import { AnimatePresence, motion } from 'framer-motion'
 import type { HTMLMotionProps } from 'framer-motion'
 import type { PropsWithChildren } from 'react'
 
+import { useIsMobile } from '~/atoms'
+import { useIsClient } from '~/hooks/common/use-is-client'
+import { usePageScrollDirectionSelector } from '~/providers/root/page-scroll-info-provider'
 import { clsxm } from '~/utils/helper'
 
 export interface FABConfig {
@@ -103,19 +107,25 @@ export const FABContainer = (props: {
     }
   }, [])
 
-  const [serverSide, setServerSide] = useState(true)
+  const isClient = useIsClient()
+  const isMobile = useIsMobile()
 
-  useEffect(() => {
-    setServerSide(false)
-  }, [])
+  const shouldHide = usePageScrollDirectionSelector(
+    (direction) => {
+      return isMobile && direction === 'down'
+    },
+    [isMobile],
+  )
 
-  if (serverSide) return null
+  if (!isClient) return null
 
   return (
     <div
       data-testid="fab-container"
-      className={clsxm(
+      className={clsx(
         'font-lg fixed bottom-4 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',
       )}
     >
       {fabConfig.map((config) => {

src/components/widgets/comment/CommentBox/CommentAuthedInput.tsx

@@ -29,8 +29,9 @@ export const CommentAuthedInput = () => {
         }}
         placeholder={placeholder}
         className={clsx(
-          'h-full w-full rounded-lg text-neutral-900/80 dark:text-slate-100/80',
-          'overflow-auto bg-gray-200/50 px-3 py-4 dark:bg-zinc-800/50',
+          'h-full w-full bg-transparent',
+          'overflow-auto px-3 py-4',
+          'text-neutral-900/80 dark:text-slate-100/80',
         )}
       />
     )
@@ -54,11 +55,11 @@ export const CommentAuthedInput = () => {
           height={48}
         />
       </div>
-      <div className="relative h-[150px] w-full">
+      <div className="relative h-[150px] w-full rounded-lg bg-gray-200/50 pb-5 dark:bg-zinc-800/50">
         <TextArea />
       </div>
 
-      <CommentBoxActionBar className="absolute bottom-0 left-12 right-0 ml-4" />
+      <CommentBoxActionBar className="absolute bottom-0 left-12 right-0 mb-2 ml-4 w-auto px-4" />
     </div>
   )
 }

src/components/widgets/comment/CommentBox/CommentBoxActionBar.tsx

@@ -35,7 +35,7 @@ export const CommentBoxActionBar: Component = ({ className }) => {
   return (
     <footer
       className={clsxm(
-        'mt-3 flex h-5 w-full items-center justify-between',
+        'mt-3 flex h-5 w-full min-w-0 items-center justify-between',
         className,
       )}
     >

src/components/widgets/note/NoteLeftSidebar.tsx

@@ -8,15 +8,15 @@ import { NoteTopicInfo } from './NoteTopicInfo'
 
 export const NoteLeftSidebar: Component = ({ className }) => {
   return (
-    <AutoHeightOptimize className={className}>
-      <OnlyDesktop>
+    <OnlyDesktop>
+      <AutoHeightOptimize className={className}>
         <div className="sticky top-[120px] mt-[120px] min-h-[300px]">
           <NoteTimeline />
 
           <NoteTopicInfo />
         </div>
-      </OnlyDesktop>
-    </AutoHeightOptimize>
+      </AutoHeightOptimize>
+    </OnlyDesktop>
   )
 }
 

src/providers/root/page-scroll-info-provider.tsx

@@ -4,6 +4,7 @@ import { startTransition, useCallback, useRef } from 'react'
 import { useIsomorphicLayoutEffect } from 'foxact/use-isomorphic-layout-effect'
 import { atom, useAtomValue, useSetAtom } from 'jotai'
 import { selectAtom } from 'jotai/utils'
+import type { ExtractAtomValue } from 'jotai'
 import type { FC, PropsWithChildren } from 'react'
 
 import { setIsInteractive } from '~/atoms/is-interactive'
@@ -67,8 +68,20 @@ const usePageScrollLocationSelector = <T,>(
       useCallback(($) => selector($), deps),
     ),
   )
+const usePageScrollDirectionSelector = <T,>(
+  selector: (value: ExtractAtomValue<typeof pageScrollDirectionAtom>) => T,
+  deps: any[] = [],
+) =>
+  useAtomValue(
+    // @ts-ignore
+    selectAtom(
+      pageScrollDirectionAtom,
+      useCallback(($) => selector($), deps),
+    ),
+  )
 export {
   usePageScrollDirection,
   usePageScrollLocation,
   usePageScrollLocationSelector,
+  usePageScrollDirectionSelector,
 }