fix: some ui syles

Author: Innei

src/components/layout/footer/FooterInfo.tsx

@@ -169,7 +169,7 @@ const FooterBottom = async () => {
           </>
         )}
 
-        <Divider />
+        <Divider className="hidden md:inline" />
         <GatewayCount />
         {/* {!!lastVisitor && (
           <>

src/components/layout/footer/GatewayCount.tsx

@@ -1,9 +1,13 @@
 'use client'
 
 import { useOnlineCount } from '~/atoms'
+import { ImpressionView } from '~/components/common/ImpressionTracker'
+import { Divider } from '~/components/ui/divider'
 import { FloatPopover } from '~/components/ui/float-popover'
 import { NumberSmoothTransition } from '~/components/ui/number-transition/NumberSmoothTransition'
+import { TrackerAction } from '~/constants/tracker'
 import { usePageIsActive } from '~/hooks/common/use-is-active'
+import { useSocketIsConnect } from '~/socket/hooks'
 
 export const GatewayCount = () => {
   return (
@@ -26,10 +30,51 @@ export const GatewayCount = () => {
           WebSocket
           用于通知站点，站长在站点的实时活动，包括不限于文章的发布和更新。
         </p>
+
+        <Divider />
+
+        <p>
+          当前 Socket 状态： <ConnectedIndicator />
+        </p>
       </div>
     </FloatPopover>
   )
 }
+
+const ConnectedIndicator = () => {
+  const connected = useSocketIsConnect()
+
+  return (
+    <div className="inline-flex items-center">
+      <ImpressionView
+        trackerMessage="socket_status"
+        action={TrackerAction.Impression}
+      />
+      {connected ? (
+        <>
+          <span className="absolute h-5 w-5">
+            <span className="absolute inset-0 z-[3] m-auto flex h-3 w-3 rounded-full bg-green-400" />
+            <span className="absolute inset-0 z-[2] m-auto flex h-4 w-4 rounded-full bg-green-300" />
+            <span className="relative z-[1] flex h-5 w-5 rounded-full bg-green-200 center" />
+          </span>
+
+          <span className="ml-6">已连接</span>
+        </>
+      ) : (
+        <>
+          <span className="absolute h-5 w-5">
+            <span className="absolute inset-0 z-[3] m-auto flex h-3 w-3 rounded-full bg-red-400" />
+            <span className="absolute inset-0 z-[2] m-auto flex h-4 w-4 rounded-full bg-red-300" />
+            <span className="relative z-[1] flex h-5 w-5 rounded-full bg-red-200 center" />
+          </span>
+
+          <span className="ml-6">未连接</span>
+        </>
+      )}
+    </div>
+  )
+}
+
 const GatewayCountTrigger = () => {
   const isActive = usePageIsActive()
   const count = useOnlineCount()

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

@@ -130,7 +130,7 @@ export const Activity = memo(() => {
   return (
     <>
       {!!media && (
-        <m.div className="absolute bottom-0 left-0 top-0 z-[10] flex items-center md:left-[-30px]">
+        <m.div className="absolute bottom-0 left-0 top-0 z-[10] flex items-center lg:left-[-30px]">
           <div className="absolute inset-0 z-[-1] flex center">
             <div className="h-6 w-6 animate-ping rounded-md ring-2 ring-uk-red-dark" />
           </div>
@@ -149,7 +149,7 @@ export const Activity = memo(() => {
           {!!appLabels[processName] && (
             <m.div
               key={processName}
-              className="pointer-events-auto absolute bottom-0 right-0 top-0 z-[10] flex items-center overflow-hidden md:right-[-25px]"
+              className="pointer-events-auto absolute bottom-0 right-0 top-0 z-[10] flex items-center overflow-hidden lg:right-[-25px]"
               initial={{
                 opacity: 0.2,
                 y: 15,

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

@@ -14,7 +14,7 @@ export const HeaderDrawerContent = () => {
   const { config } = useHeaderConfig()
 
   return (
-    <div className="mt-12 max-h-screen w-[90vw] space-y-4 overflow-auto pb-8 scrollbar-none">
+    <div className="mt-12 max-h-screen w-[90vw] space-y-4 overflow-auto pb-24 scrollbar-none">
       {config.map((section, index) => {
         return (
           <m.section

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

@@ -115,10 +115,12 @@ export const CommentBoxActionBar: Component = ({ className }) => {
           'flex-1 select-none text-[10px] text-zinc-500 transition-opacity',
         )}
       >
-        支持 <b>Markdown</b> 与{' '}
-        <MLink href="https://docs.github.com/zh/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax">
-          GFM
-        </MLink>
+        <span className="hidden md:inline">
+          支持 <b>Markdown</b> 与{' '}
+          <MLink href="https://docs.github.com/zh/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax">
+            GFM
+          </MLink>
+        </span>
         <CommentBoxSlotProvider />
       </span>
       <AnimatePresence>

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

@@ -78,7 +78,7 @@ export const UniversalTextArea = () => {
 const EmojiButton = () => {
   return (
     <button
-      className="ml-4 inline-flex h-5 w-5 translate-y-1 text-base center"
+      className="ml-0 inline-flex h-5 w-5 translate-y-1 text-base center md:ml-4"
       onClick={preventDefault}
     >
       <i className="icon-[mingcute--emoji-2-line]" />

src/lib/link-parser.ts

@@ -1,4 +1,4 @@
-import { isDev } from './env'
+import { isClientSide, isDev } from './env'
 
 export const isTweetUrl = (url: URL) => {
   return url.hostname === 'twitter.com' && url.pathname.startsWith('/')
@@ -63,6 +63,7 @@ export const isCodesandboxUrl = (url: URL) => {
 }
 
 export const isSelfArticleUrl = (url: URL) => {
+  if (!isClientSide) return false
   if (isDev && url.hostname === 'innei.in') return true
   return (
     url.hostname === location.hostname &&

src/socket/hooks.ts

@@ -0,0 +1,12 @@
+import { atom, useAtomValue } from 'jotai'
+
+import { jotaiStore } from '~/lib/store'
+
+const socketIsConnectAtom = atom(false)
+export const useSocketIsConnect = () => {
+  return useAtomValue(socketIsConnectAtom)
+}
+
+export const setSocketIsConnect = (value: boolean) => {
+  jotaiStore.set(socketIsConnectAtom, value)
+}

src/socket/socket-client.ts

@@ -9,6 +9,7 @@ import { GATEWAY_URL } from '~/constants/env'
 import { isDev } from '~/lib/env'
 
 import { eventHandler } from './handler'
+import { setSocketIsConnect } from './hooks'
 
 class SocketClient {
   public socket!: Socket
@@ -33,6 +34,15 @@ class SocketClient {
     if (!this.socket) {
       return
     }
+
+    this.socket.on('connect', () => {
+      setSocketIsConnect(true)
+    })
+
+    this.socket.on('disconnect', () => {
+      setSocketIsConnect(false)
+    })
+
     this.socket.close()
     this.socket.open()
     this.socket.on(
@@ -70,7 +80,9 @@ class SocketClient {
       }
     })
   }
+
+  static shared = new SocketClient()
 }
 
-export const socketClient = new SocketClient()
+export const socketClient = SocketClient.shared
 export type TSocketClient = SocketClient