perf: reset app position when window resize

src/app/content/App.tsx

@@ -14,6 +14,7 @@ import { AnimatePresence, motion } from 'framer-motion'
 
 import DanmakuContainer from './components/DanmakuContainer'
 import DanmakuDomain from '@/domain/Danmaku'
+import AppStatusDomain from '@/domain/AppStatus'
 
 /**
  * Fix requestAnimationFrame error in jest
@@ -34,6 +35,8 @@ export default function App() {
   const userInfoSetFinished = useRemeshQuery(userInfoDomain.query.UserInfoSetIsFinishedQuery())
   const messageListLoadFinished = useRemeshQuery(messageListDomain.query.LoadIsFinishedQuery())
   const userInfoLoadFinished = useRemeshQuery(userInfoDomain.query.UserInfoLoadIsFinishedQuery())
+  const appStatusDomain = useRemeshDomain(AppStatusDomain())
+  const appStatusLoadIsFinished = useRemeshQuery(appStatusDomain.query.StatusLoadIsFinishedQuery())
 
   const notUserInfo = userInfoLoadFinished && !userInfoSetFinished
 
@@ -58,6 +61,7 @@ export default function App() {
   }, [danmakuIsEnabled])
 
   return (
+    appStatusLoadIsFinished && (
       <>
         <AppMain>
           <Header />
@@ -77,4 +81,5 @@ export default function App() {
         <DanmakuContainer ref={danmakuContainerRef} />
       </>
     )
+  )
 }

src/app/content/views/AppButton/index.tsx

@@ -1,4 +1,4 @@
-import { type FC, useState, type MouseEvent, useLayoutEffect } from 'react'
+import { type FC, useState, type MouseEvent, useLayoutEffect, useEffect } from 'react'
 import { SettingsIcon, MoonIcon, SunIcon, HandIcon } from 'lucide-react'
 import { motion, AnimatePresence } from 'framer-motion'
 
@@ -31,7 +31,6 @@ const AppButton: FC = () => {
   const userInfo = useRemeshQuery(userInfoDomain.query.UserInfoQuery())
   const toastDomain = useRemeshDomain(ToastDomain())
   const appPosition = useRemeshQuery(appStatusDomain.query.PositionQuery())
-  const appStatusLoadIsFinished = useRemeshQuery(appStatusDomain.query.StatusLoadIsFinishedQuery())
 
   const DayLogo = [LogoIcon0, LogoIcon1, LogoIcon2, LogoIcon3, LogoIcon4, LogoIcon5, LogoIcon6][getDay(Date())]
 
@@ -40,8 +39,6 @@ const AppButton: FC = () => {
 
   const [menuOpen, setMenuOpen] = useState(false)
 
-  const { width, height } = useWindowSize()
-
   const {
     x,
     y,
@@ -50,13 +47,21 @@ const AppButton: FC = () => {
     initX: appPosition.x,
     initY: appPosition.y,
     minX: 44,
-    maxX: width - 44,
-    maxY: height - 22,
-    minY: height / 2
+    maxX: window.innerWidth - 44,
+    maxY: window.innerHeight - 22,
+    minY: window.innerHeight / 2
   })
 
+  useEffect(() => {
+    const handler = () => {
+      send(appStatusDomain.command.UpdatePositionCommand({ x: window.innerWidth - 44, y: window.innerHeight - 22 }))
+    }
+    window.addEventListener('resize', handler)
+    return () => window.removeEventListener('resize', handler)
+  }, [])
+
   useLayoutEffect(() => {
-    appStatusLoadIsFinished && send(appStatusDomain.command.UpdatePositionCommand({ x, y }))
+    send(appStatusDomain.command.UpdatePositionCommand({ x, y }))
   }, [x, y])
 
   const { setRef: appMenuRef } = useTriggerAway(['click'], () => setMenuOpen(false))