perf: custom toast style

Author: molvqingtai

src/app/content/App.tsx

@@ -5,11 +5,11 @@ import AppButton from '@/app/content/views/AppButton'
 import AppContainer from '@/app/content/views/AppContainer'
 import { useRemeshDomain, useRemeshQuery, useRemeshSend } from 'remesh-react'
 import RoomDomain from '@/domain/Room'
-import { Toaster } from '@/components/ui/Sonner'
 import UserInfoDomain from '@/domain/UserInfo'
 import Setup from '@/app/content/views/Setup'
 import MessageListDomain from '@/domain/MessageList'
 import { useEffect } from 'react'
+import { Toaster } from 'sonner'
 
 export default function App() {
   const send = useRemeshSend()
@@ -23,8 +23,13 @@ export default function App() {
   const notUserInfo = userInfoLoadFinished && !userInfoSetFinished
 
   useEffect(() => {
-    if (userInfoSetFinished && messageListLoadFinished) {
-      send(roomDomain.command.JoinRoomCommand())
+    if (messageListLoadFinished) {
+      if (userInfoSetFinished) {
+        send(roomDomain.command.JoinRoomCommand())
+      } else {
+        // Clear simulated data when refreshing on the setup page
+        send(messageListDomain.command.ClearListCommand())
+      }
     }
   }, [userInfoSetFinished, messageListLoadFinished])
 
@@ -35,9 +40,9 @@ export default function App() {
         <Main />
         <Footer />
         {notUserInfo && <Setup />}
+        <Toaster richColors offset="70px" visibleToasts={1} duration={5000} position="top-center"></Toaster>
       </AppContainer>
       <AppButton></AppButton>
-      <Toaster richColors offset="104px" position="top-center"></Toaster>
     </>
   )
 }

src/app/content/index.tsx

@@ -11,6 +11,7 @@ import { IndexDBStorageImpl, BrowserSyncStorageImpl } from '@/domain/impls/Stora
 import { PeerRoomImpl } from '@/domain/impls/PeerRoom'
 // import { PeerRoomImpl } from '@/domain/impls/PeerRoom2'
 import '@/assets/styles/tailwind.css'
+import '@/assets/styles/sonner.css'
 import { createElement } from '@/utils'
 import { ToastImpl } from '@/domain/impls/Toast'
 
@@ -27,19 +28,18 @@ export default defineContentScript({
       name: __NAME__,
       position: 'inline',
       anchor: 'body',
-      isolateEvents: ['scroll', 'click'],
       mode: __DEV__ ? 'open' : 'closed',
       onMount: (container) => {
         const app = createElement('<div id="app"></div>')
         container.append(app)
 
         const root = createRoot(app)
         root.render(
-          // <React.StrictMode>
-          <RemeshRoot store={store}>
-            <App />
-          </RemeshRoot>
-          // </React.StrictMode>
+          <React.StrictMode>
+            <RemeshRoot store={store}>
+              <App />
+            </RemeshRoot>
+          </React.StrictMode>
         )
         return root
       },

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

@@ -1,5 +1,6 @@
 import { type ReactNode, type FC, useState, type MouseEvent, useRef } from 'react'
 import { SettingsIcon, MoonIcon, SunIcon } from 'lucide-react'
+import { motion, AnimatePresence } from 'framer-motion'
 
 import { browser } from 'wxt/browser'
 import { useRemeshDomain, useRemeshQuery, useRemeshSend } from 'remesh-react'
@@ -25,14 +26,12 @@ const AppButton: FC<AppButtonProps> = ({ children }) => {
 
   const menuRef = useRef<HTMLDivElement>(null)
 
-  /**
-   * Waiting for PR merge
-   * @see https://github.com/streamich/react-use/pull/2528
-   */
   useClickAway(menuRef, () => {
     setOpen(false)
   }, ['click'])
 
+  const handleToggleApp = () => {}
+
   const handleToggleMenu = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault()
     setOpen(!open)
@@ -52,35 +51,80 @@ const AppButton: FC<AppButtonProps> = ({ children }) => {
 
   return (
     <div ref={menuRef} className="fixed bottom-5 right-5 z-infinity grid select-none justify-center gap-y-3">
-      {/* <div className="grid gap-y-3" inert={!open && ''}> */}
-      <div className="pointer-events-none grid gap-y-3">
-        <Button
-          onClick={handleSwitchTheme}
-          variant="outline"
-          data-state={open ? 'open' : 'closed'}
-          className="pointer-events-auto relative size-10 overflow-hidden rounded-full p-0 shadow fill-mode-forwards data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"
-        >
-          <div
-            className={cn(
-              'absolute -top-10 grid grid-rows-[repeat(2,minmax(0,2.5rem))] w-full justify-center items-center transition-all duration-500',
-              isDarkMode ? 'top-0' : '-top-10 ',
-              isDarkMode ? 'bg-slate-800 text-white' : 'bg-white text-orange-400'
-            )}
+      <AnimatePresence>
+        {open && (
+          <motion.div
+            className="grid gap-y-3"
+            initial="hidden"
+            animate="visible"
+            exit="exit"
+            variants={{
+              hidden: {},
+              visible: {
+                transition: {
+                  staggerChildren: 0.1,
+                  staggerDirection: -1
+                }
+              },
+              exit: {
+                transition: {
+                  staggerChildren: 0.1,
+                  staggerDirection: 1
+                }
+              }
+            }}
           >
-            <MoonIcon size={20} />
-            <SunIcon size={20} />
-          </div>
-        </Button>
-        <Button
-          onClick={handleOpenOptionsPage}
-          variant="outline"
-          data-state={open ? 'open' : 'closed'}
-          className="pointer-events-auto size-10 rounded-full  p-0 shadow fill-mode-forwards data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"
-        >
-          <SettingsIcon size={20} />
-        </Button>
-      </div>
-      <Button onContextMenu={handleToggleMenu} className="relative z-10 size-10 rounded-full p-0 text-xs shadow">
+            <motion.div
+              className="leading-none"
+              variants={{
+                hidden: { opacity: 0, y: 12 },
+                visible: { opacity: 1, y: 0 },
+                exit: { opacity: 0, y: 12 }
+              }}
+              transition={{ duration: 0.1 }}
+            >
+              <Button
+                onClick={handleSwitchTheme}
+                variant="outline"
+                className="relative size-10 overflow-hidden rounded-full p-0 shadow"
+              >
+                <div
+                  className={cn(
+                    'absolute grid grid-rows-[repeat(2,minmax(0,2.5rem))] w-full justify-center items-center transition-all duration-500',
+                    isDarkMode ? 'top-0' : '-top-10',
+                    isDarkMode ? 'bg-slate-800 text-white' : 'bg-white text-orange-400'
+                  )}
+                >
+                  <MoonIcon size={20} />
+                  <SunIcon size={20} />
+                </div>
+              </Button>
+            </motion.div>
+
+            <motion.div
+              variants={{
+                hidden: { opacity: 0, y: 12 },
+                visible: { opacity: 1, y: 0 },
+                exit: { opacity: 0, y: 12 }
+              }}
+              transition={{ duration: 0.1 }}
+            >
+              <Button
+                onClick={handleOpenOptionsPage}
+                variant="outline"
+                className="pointer-events-auto size-10 rounded-full p-0 shadow"
+              >
+                <SettingsIcon size={20} />
+              </Button>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+      <Button
+        onClick={handleToggleApp}
+        onContextMenu={handleToggleMenu}
+        className="relative z-10 size-10 rounded-full p-0 text-xs shadow"
+      >
         {children}
       </Button>
     </div>

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

@@ -7,6 +7,7 @@ import PromptItem from '../../components/PromptItem'
 import UserInfoDomain from '@/domain/UserInfo'
 import RoomDomain, { MessageType } from '@/domain/Room'
 import MessageListDomain from '@/domain/MessageList'
+import BlurFade from '@/components/magicui/blur-fade'
 
 const Main: FC = () => {
   const send = useRemeshSend()
@@ -38,21 +39,24 @@ const Main: FC = () => {
     <MessageList>
       {messageList.map((message, index) =>
         message.type === MessageType.Normal ? (
-          <MessageItem
-            key={message.id}
-            data={message}
-            like={message.like}
-            hate={message.hate}
-            index={index}
-            onLikeChange={() => handleLikeChange(message.id)}
-            onHateChange={() => handleHateChange(message.id)}
-          ></MessageItem>
+          <BlurFade key={message.id} duration={0.1} yOffset={0}>
+            <MessageItem
+              key={message.id}
+              data={message}
+              like={message.like}
+              hate={message.hate}
+              onLikeChange={() => handleLikeChange(message.id)}
+              onHateChange={() => handleHateChange(message.id)}
+            ></MessageItem>
+          </BlurFade>
         ) : (
-          <PromptItem
-            key={message.id}
-            data={message}
-            className={`${index === 0 ? 'pt-4' : ''} ${index === messageList.length - 1 ? 'pb-4' : ''}`}
-          ></PromptItem>
+          <BlurFade key={message.id} duration={0.1} yOffset={0}>
+            <PromptItem
+              key={message.id}
+              data={message}
+              className={`${index === 0 ? 'pt-4' : ''} ${index === messageList.length - 1 ? 'pb-4' : ''}`}
+            ></PromptItem>
+          </BlurFade>
         )
       )}
     </MessageList>

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

@@ -96,7 +96,7 @@ const Setup: FC = () => {
   return (
     <div className="absolute inset-0 z-50 flex  rounded-xl bg-black/10 shadow-2xl  backdrop-blur-sm">
       <div className="m-auto flex flex-col items-center justify-center gap-y-8 pb-40 drop-shadow-lg">
-        <BlurFade key={userInfo?.avatar} delay={0.1} inView>
+        <BlurFade key={userInfo?.avatar} inView>
           <Avatar className="size-24 cursor-pointer border-4 border-white ">
             <AvatarImage src={userInfo?.avatar} alt="avatar" />
             <AvatarFallback>

src/app/options/components/ProfileForm.tsx

@@ -16,6 +16,7 @@ import { RefreshCcwIcon } from 'lucide-react'
 import { MAX_AVATAR_SIZE } from '@/constants/config'
 import ToastDomain from '@/domain/Toast'
 import BlurFade from '@/components/magicui/blur-fade'
+import debounce from './../../../utils/debounce'
 
 const defaultUserInfo: UserInfo = {
   id: nanoid(),
@@ -95,7 +96,7 @@ const ProfileForm = () => {
           render={({ field }) => (
             <FormItem className="absolute inset-x-1 top-0 mx-auto grid w-fit -translate-y-1/2  justify-items-center">
               <FormControl>
-                <BlurFade key={form.getValues().avatar} delay={0.1}>
+                <BlurFade key={form.getValues().avatar} duration={0.1}>
                   <AvatarSelect
                     compressSize={MAX_AVATAR_SIZE}
                     onError={handleError}

src/app/options/main.tsx

@@ -6,6 +6,7 @@ import { RemeshLogger } from 'remesh-logger'
 import App from './App'
 import { BrowserSyncStorageImpl } from '@/domain/impls/Storage'
 import '@/assets/styles/tailwind.css'
+
 import { ToastImpl } from '@/domain/impls/Toast'
 
 const store = Remesh.store({