From fce64b744c2ada3532ff3d4b78d08559c718ca1a Mon Sep 17 00:00:00 2001
From: molvqingtai <molvqingtai@gmail.com>
Date: Wed, 2 Oct 2024 00:18:31 +0800
Subject: [PATCH] perf: a tag use Link component

---
 src/app/content/components/MessageInput.tsx |  2 +-
 src/app/content/components/MessageItem.tsx  |  2 +-
 src/app/options/components/BadgeList.tsx    |  5 ++--
 src/app/options/components/ProfileForm.tsx  |  8 +++++-
 src/components/Link.tsx                     | 19 ++++++++++++++
 src/components/{ui => }/Markdown.tsx        |  2 +-
 src/components/ui/Sonner.tsx                | 29 ---------------------
 src/domain/Room.ts                          |  2 +-
 8 files changed, 33 insertions(+), 36 deletions(-)
 create mode 100644 src/components/Link.tsx
 rename src/components/{ui => }/Markdown.tsx (98%)
 delete mode 100644 src/components/ui/Sonner.tsx

diff --git a/src/app/content/components/MessageInput.tsx b/src/app/content/components/MessageInput.tsx
index cd09ade..e35a84b 100644
--- a/src/app/content/components/MessageInput.tsx
+++ b/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'
 
diff --git a/src/app/content/components/MessageItem.tsx b/src/app/content/components/MessageItem.tsx
index 6948087..30d665d 100644
--- a/src/app/content/components/MessageItem.tsx
+++ b/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'
 
diff --git a/src/app/options/components/BadgeList.tsx b/src/app/options/components/BadgeList.tsx
index 6c5a837..deb124d 100644
--- a/src/app/options/components/BadgeList.tsx
+++ b/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>
   )
diff --git a/src/app/options/components/ProfileForm.tsx b/src/app/options/components/ProfileForm.tsx
index 86b8c9f..bbf5eeb 100644
--- a/src/app/options/components/ProfileForm.tsx
+++ b/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>
           )}
diff --git a/src/components/Link.tsx b/src/components/Link.tsx
new file mode 100644
index 0000000..a025e6d
--- /dev/null
+++ b/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
diff --git a/src/components/ui/Markdown.tsx b/src/components/Markdown.tsx
similarity index 98%
rename from src/components/ui/Markdown.tsx
rename to src/components/Markdown.tsx
index 7bd3049..f33b488 100644
--- a/src/components/ui/Markdown.tsx
+++ b/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
diff --git a/src/components/ui/Sonner.tsx b/src/components/ui/Sonner.tsx
deleted file mode 100644
index 1128edf..0000000
--- a/src/components/ui/Sonner.tsx
+++ /dev/null
@@ -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 }
diff --git a/src/domain/Room.ts b/src/domain/Room.ts
index 1c589c0..709aad3 100644
--- a/src/domain/Room.ts
+++ b/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
           })