fix: float popover position calculation

Signed-off-by: Innei <i@innei.in>
Innei · Feb 15, 2024 · 73fa809 · 73fa809
1 parent bf8b3ab
commit 73fa809
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 48 deletions.
diff --git a/src/components/layout/footer/GatewayCount.tsx b/src/components/layout/footer/GatewayCount.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { useQuery } from '@tanstack/react-query'
+import { sleep } from 'openai/core'
 
 import { useOnlineCount } from '~/atoms'
 import { useSocketIsConnect } from '~/atoms/hooks'
@@ -115,51 +116,46 @@ const RoomsInfo = () => {
   const { data } = useQuery({
     queryKey: ['rooms'],
     refetchOnMount: true,
-    queryFn: () => {
-      return apiClient.activity
-        .getRoomsInfo()
-        .then((res) => res.$serialized)
-        .then((data) => {
-          const result = [] as {
-            path: string
-            title: string
-            count: number
-          }[]
-
-          const morphArticleIdToRoomName = (id: string) => `article_${id}`
-          data.objects.notes.forEach((note) => {
-            result.push({
-              path: routeBuilder(Routes.Note, {
-                id: note.nid,
-              }),
-              title: note.title,
-              count: data.roomCount[morphArticleIdToRoomName(note.id)],
-            })
-          })
-
-          data.objects.posts.forEach((post) => {
-            result.push({
-              path: routeBuilder(Routes.Post, {
-                category: post.category.slug,
-                slug: post.slug,
-              }),
-              title: post.title,
-              count: data.roomCount[morphArticleIdToRoomName(post.id)],
-            })
-          })
-
-          data.objects.pages.forEach((page) => {
-            result.push({
-              path: routeBuilder(Routes.Page, {
-                slug: page.slug,
-              }),
-              title: page.title,
-              count: data.roomCount[morphArticleIdToRoomName(page.id)],
-            })
-          })
-
-          return result.sort((a, b) => b.count - a.count)
+    staleTime: 1000 * 10,
+    queryFn: async () => {
+      await sleep(1000)
+      const res = await apiClient.activity.getRoomsInfo()
+      const data = res.$serialized
+      const result = [] as {
+        path: string
+        title: string
+        count: number
+      }[]
+      const morphArticleIdToRoomName = (id: string) => `article_${id}`
+      data.objects.notes.forEach((note) => {
+        result.push({
+          path: routeBuilder(Routes.Note, {
+            id: note.nid,
+          }),
+          title: note.title,
+          count: data.roomCount[morphArticleIdToRoomName(note.id)],
+        })
+      })
+      data.objects.posts.forEach((post) => {
+        result.push({
+          path: routeBuilder(Routes.Post, {
+            category: post.category.slug,
+            slug: post.slug,
+          }),
+          title: post.title,
+          count: data.roomCount[morphArticleIdToRoomName(post.id)],
+        })
+      })
+      data.objects.pages.forEach((page) => {
+        result.push({
+          path: routeBuilder(Routes.Page, {
+            slug: page.slug,
+          }),
+          title: page.title,
+          count: data.roomCount[morphArticleIdToRoomName(page.id)],
         })
+      })
+      return result.sort((a, b) => b.count - a.count)
     },
   })
 

diff --git a/src/components/modules/note/NoteActionAside.tsx b/src/components/modules/note/NoteActionAside.tsx
@@ -35,7 +35,7 @@ export const NoteBottomBarAction: Component = () => {
   const isMobile = useIsMobile()
   if (!isMobile) return null
   return (
-    <div className="mb-8 flex items-center justify-center space-x-8">
+    <div className="mb-8 mt-4 flex items-center justify-center space-x-8">
       <LikeButton />
       <ShareButton />
       <SubscribeButton />

diff --git a/src/components/ui/float-popover/FloatPopover.tsx b/src/components/ui/float-popover/FloatPopover.tsx
@@ -1,6 +1,12 @@
 'use client'
 
-import { flip, offset, shift, useFloating } from '@floating-ui/react-dom'
+import {
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  useFloating,
+} from '@floating-ui/react-dom'
 import React, {
   createContext,
   createElement,
@@ -92,7 +98,7 @@ export const FloatPopover = function FloatPopover<T extends {}>(
   } = props
 
   const [open, setOpen] = useState(false)
-  const { x, y, refs, strategy, isPositioned } = useFloating({
+  const { x, y, refs, strategy, isPositioned, elements, update } = useFloating({
     middleware: floatingProps.middleware ?? [
       flip({ padding: padding ?? 20 }),
       offset(offsetValue ?? 10),
@@ -103,6 +109,13 @@ export const FloatPopover = function FloatPopover<T extends {}>(
     whileElementsMounted: floatingProps.whileElementsMounted,
   })
 
+  useEffect(() => {
+    if (open && elements.reference && elements.floating) {
+      const cleanup = autoUpdate(elements.reference, elements.floating, update)
+      return cleanup
+    }
+  }, [open, elements, update])
+
   const containerRef = useRef<HTMLDivElement>(null)
 
   useClickAway(containerRef, () => {

diff --git a/src/components/ui/theme-switcher/ThemeSwitcher.tsx b/src/components/ui/theme-switcher/ThemeSwitcher.tsx
@@ -121,7 +121,7 @@ const ButtonGroup = () => {
   }
 
   return (
-    <div className="w-fit-content inline-flex rounded-full border border-slate-200 p-[3px] dark:border-neutral-800">
+    <div className="w-fit-content inline-flex rounded-full border border-zinc-200 p-[3px] dark:border-zinc-700">
       <button
         aria-label="Switch to light theme"
         type="button"