perf: a tag use Link component

src/app/content/components/MessageInput.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, type ChangeEvent, type KeyboardEvent } from 'react'
 
 import { Textarea } from '@/components/ui/Textarea'
-import { Markdown } from '@/components/ui/Markdown'
+import { Markdown } from '@/components/Markdown'
 import { cn } from '@/utils'
 import { ScrollArea } from '@/components/ui/ScrollArea'
 

src/app/content/components/MessageItem.tsx

@@ -5,7 +5,7 @@ import LikeButton from './LikeButton'
 import FormatDate from './FormatDate'
 import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/Avatar'
 
-import { Markdown } from '@/components/ui/Markdown'
+import { Markdown } from '@/components/Markdown'
 import { type NormalMessage } from '@/domain/MessageList'
 import { cn } from '@/utils'
 

src/app/options/components/BadgeList.tsx

@@ -1,15 +1,16 @@
 import { FC } from 'react'
 import { Button } from '@/components/ui/Button'
 import { GitHubLogoIcon } from '@radix-ui/react-icons'
+import Link from '@/components/Link'
 
 const BadgeList: FC = () => {
   return (
     <div className="fixed inset-x-1 bottom-6 mx-auto flex w-fit">
       <Button asChild size="lg" variant="ghost" className="rounded-full px-3 text-xl font-semibold text-primary">
-        <a href="https://github.com/molvqingtai/WebChat" target="https://github.com/molvqingtai/WebChat">
+        <Link href="https://github.com/molvqingtai/WebChat">
           <GitHubLogoIcon className="mr-1 size-6"></GitHubLogoIcon>
           Github
-        </a>
+        </Link>
       </Button>
     </div>
   )

src/app/options/components/ProfileForm.tsx

@@ -17,6 +17,7 @@ import { MAX_AVATAR_SIZE } from '@/constants/config'
 import ToastDomain from '@/domain/Toast'
 import BlurFade from '@/components/magicui/BlurFade'
 import { Checkbox } from '@/components/ui/checkbox'
+import Link from '@/components/Link'
 
 const defaultUserInfo: UserInfo = {
   id: nanoid(),
@@ -149,7 +150,12 @@ const ProfileForm = () => {
                   </FormLabel>
                 </div>
               </FormControl>
-              <FormDescription>Danmaku messages will scroll across the screen.</FormDescription>
+              <FormDescription>
+                Enabling this will display messages scrolling on the website.
+                <Link className="ml-2 text-primary" href="https://en.wikipedia.org/wiki/Danmaku_subtitling">
+                  Wikipedia
+                </Link>
+              </FormDescription>
               <FormMessage />
             </FormItem>
           )}

src/components/Link.tsx

@@ -0,0 +1,19 @@
+import { cn } from '@/utils'
+import { forwardRef, ReactNode } from 'react'
+
+export interface LinkProps {
+  href: string
+  className?: string
+  children: ReactNode
+}
+
+const Link = forwardRef<HTMLAnchorElement, LinkProps>(({ href, className, children }, ref) => {
+  return (
+    <a href={href} target={href} rel="noopener noreferrer" className={cn('hover:underline', className)} ref={ref}>
+      {children}
+    </a>
+  )
+})
+
+Link.displayName = 'Link'
+export default Link

src/components/Markdown.tsx

@@ -3,7 +3,7 @@ import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import remarkBreaks from 'remark-breaks'
 import { cn } from '@/utils'
-import { ScrollArea, ScrollBar } from './ScrollArea'
+import { ScrollArea, ScrollBar } from '@/components/ui/ScrollArea'
 
 export interface MarkdownProps {
   children?: string

src/components/ui/Sonner.tsx

@@ -1,29 +0,0 @@
-import { useTheme } from "next-themes"
-import { Toaster as Sonner } from "sonner"
-
-type ToasterProps = React.ComponentProps<typeof Sonner>
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
-
-  return (
-    <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
-      toastOptions={{
-        classNames: {
-          toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
-          actionButton:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton:
-            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-        },
-      }}
-      {...props}
-    />
-  )
-}
-
-export { Toaster }

src/domain/Room.ts

@@ -440,7 +440,7 @@ const RoomDomain = Remesh.domain({
     domain.effect({
       name: 'Room.OnUnloadEffect',
       impl: ({ get }) => {
-        const beforeUnload$ = fromEvent(window, 'beforedestroy').pipe(
+        const beforeUnload$ = fromEvent(window, 'beforeunload').pipe(
           map(() => {
             return get(JoinStatusModule.query.IsFinishedQuery()) ? LeaveRoomCommand() : null
           })