From 9d3a1d81cdb9df048b0b3c81ff7b091a79891ac7 Mon Sep 17 00:00:00 2001
From: molvqingtai <molvqingtai@gmail.com>
Date: Thu, 16 Nov 2023 02:39:12 +0800
Subject: [PATCH] perf: optimize avatar display

---
 src/app/content/index.tsx                    |  8 +++----
 src/app/content/views/AppContainer/index.tsx |  2 +-
 src/app/content/views/Header/index.tsx       | 22 ++++++++++++++++----
 src/components/MessageItem.tsx               |  4 ++--
 src/hooks/useResizable.ts                    |  2 +-
 5 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/app/content/index.tsx b/src/app/content/index.tsx
index 492f3c7..b9c942e 100644
--- a/src/app/content/index.tsx
+++ b/src/app/content/index.tsx
@@ -1,5 +1,5 @@
-import ReactDOM from 'react-dom/client'
 import React from 'react'
+import { createRoot } from 'react-dom/client'
 import { Remesh } from 'remesh'
 import { RemeshRoot } from 'remesh-react'
 import { RemeshLogger } from 'remesh-logger'
@@ -12,15 +12,15 @@ export default defineContentScript({
   matches: ['*://*.example.com/*', '*://*.google.com/*', '*://*.v2ex.com/*'],
   async main(ctx) {
     const store = Remesh.store({
-      externs: [StorageImpl]
-      // inspectors: [RemeshLogger()]
+      externs: [StorageImpl],
+      inspectors: [RemeshLogger()]
     })
 
     const ui = await createContentScriptUi(ctx, {
       name: __NAME__,
       type: 'overlay',
       mount(container) {
-        const root = ReactDOM.createRoot(container)
+        const root = createRoot(container)
         root.render(
           <React.StrictMode>
             <RemeshRoot store={store}>
diff --git a/src/app/content/views/AppContainer/index.tsx b/src/app/content/views/AppContainer/index.tsx
index c30c1f4..1c80dd1 100644
--- a/src/app/content/views/AppContainer/index.tsx
+++ b/src/app/content/views/AppContainer/index.tsx
@@ -17,7 +17,7 @@ const AppContainer: FC<AppContainerProps> = ({ children }) => {
       style={{
         width: `${size}px`
       }}
-      className="fixed bottom-10 right-10 top-5 z-top box-border grid  grid-flow-col grid-rows-[auto_1fr_auto] rounded-xl bg-slate-50  font-sans shadow-2xl"
+      className="fixed bottom-10 right-10 top-5 z-top box-border grid min-h-[375px] grid-flow-col grid-rows-[auto_1fr_auto] rounded-xl bg-slate-50  font-sans shadow-2xl"
     >
       {children}
       <div
diff --git a/src/app/content/views/Header/index.tsx b/src/app/content/views/Header/index.tsx
index ed524f1..b19374d 100644
--- a/src/app/content/views/Header/index.tsx
+++ b/src/app/content/views/Header/index.tsx
@@ -1,4 +1,6 @@
 import { type FC } from 'react'
+import { Globe2Icon } from 'lucide-react'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/Avatar'
 import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/HoverCard'
 import { Button } from '@/components/ui/Button'
 import { getWebSiteInfo } from '@/utils'
@@ -7,8 +9,13 @@ const Header: FC = () => {
   const websiteInfo = getWebSiteInfo()
 
   return (
-    <div className="z-10 grid h-12 grid-flow-col items-center justify-between gap-x-4 rounded-t-xl bg-white px-4 backdrop-blur-lg 2xl:h-14">
-      <img className="h-8 w-8 overflow-hidden rounded-full" src={websiteInfo.icon} />
+    <div className="z-10 grid h-12 grid-flow-col items-center justify-between gap-x-4 rounded-t-xl bg-white px-4 backdrop-blur-lg">
+      <Avatar className="h-8 w-8">
+        <AvatarImage src={websiteInfo.icon} alt="favicon" />
+        <AvatarFallback>
+          <Globe2Icon size="100%" className="text-gray-500" />
+        </AvatarFallback>
+      </Avatar>
       <HoverCard>
         <HoverCardTrigger asChild>
           <Button className="overflow-hidden" variant="link">
@@ -19,10 +26,17 @@ const Header: FC = () => {
         </HoverCardTrigger>
         <HoverCardContent className="w-80">
           <div className="grid grid-cols-[auto_1fr] gap-x-4">
-            <img className="h-14 w-14 overflow-hidden rounded-full" src={websiteInfo.icon} />
+            <Avatar className="h-14 w-14">
+              <AvatarImage src={websiteInfo.icon} alt="favicon" />
+              <AvatarFallback>
+                <Globe2Icon size="100%" className="text-gray-500" />
+              </AvatarFallback>
+            </Avatar>
             <div className="grid items-center">
               <h4 className="truncate text-sm font-semibold">{websiteInfo.title}</h4>
-              <p className="line-clamp-2 max-h-8 text-xs text-slate-500">{websiteInfo.description}</p>
+              {websiteInfo.description && (
+                <p className="line-clamp-2 max-h-8 text-xs text-slate-500">{websiteInfo.description}</p>
+              )}
             </div>
           </div>
         </HoverCardContent>
diff --git a/src/components/MessageItem.tsx b/src/components/MessageItem.tsx
index 65677a6..d3ef8d3 100644
--- a/src/components/MessageItem.tsx
+++ b/src/components/MessageItem.tsx
@@ -34,8 +34,8 @@ const MessageItem: FC<MessageItemProps> = ({ data, index }) => {
       className="box-border grid grid-cols-[auto_1fr] gap-x-2 px-4 [content-visibility:auto] first:pt-4 last:pb-4"
     >
       <Avatar>
-        <AvatarImage src={formatData.userAvatar} />
-        <AvatarFallback>{formatData.username}</AvatarFallback>
+        <AvatarImage src={formatData.userAvatar} alt="avatar" />
+        <AvatarFallback>{formatData.username.at(0)}</AvatarFallback>
       </Avatar>
       <div className="overflow-hidden">
         <div className="grid grid-cols-[auto_1fr] items-baseline gap-x-2 leading-none">
diff --git a/src/hooks/useResizable.ts b/src/hooks/useResizable.ts
index 228cf7d..6422937 100644
--- a/src/hooks/useResizable.ts
+++ b/src/hooks/useResizable.ts
@@ -1,5 +1,5 @@
 import { useCallback, useRef, useState } from 'react'
-import { isInRange } from '@/utils'
+import { clamp, isInRange } from '@/utils'
 
 export interface ResizableOptions {
   minSize: number