feat: 增加回到底部功能 (#286)

* feat: 增加回到底部功能

* chore: bump version to v0.9.42

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vocechat-web",
-  "version": "0.9.41",
+  "version": "0.9.42",
   "homepage": "https://voce.chat",
   "dependencies": {
     "@metamask/onboarding": "^1.0.1",

src/routes/chat/Layout/NewMessageBottomTip.tsx

@@ -1,6 +1,6 @@
-// import { useState, useEffect } from 'react';
 import { useTranslation } from "react-i18next";
 import clsx from "clsx";
+import DoubleDown from "./double-down.svg";
 
 import { useAppSelector } from "../../../app/store";
 import { ChatContext } from "../../../types/common";
@@ -13,7 +13,7 @@ type Props = {
   id: number;
   scrollToBottom?: () => void;
 };
-// linear-gradient(135deg,_#3C8CE7_0%,_#00EAFF_100%)
+
 const NewMessageBottomTip = ({ context, id, scrollToBottom }: Props) => {
   const { t } = useTranslation("chat");
   const readIndex = useAppSelector(
@@ -31,21 +31,28 @@ const NewMessageBottomTip = ({ context, id, scrollToBottom }: Props) => {
     mids,
     readIndex,
     messageData,
-    loginUid
+    loginUid,
   });
-  console.log("unreads", unreads);
+
+  const style =
+    unreads > 0
+      ? { background: "linear-gradient(135deg, #3C8CE7 0%, #00EAFF 100%)" }
+      : { background: "rgba(156, 163, 175, 0.5)" };
 
   return (
     <aside
       className={clsx(
-        `z-[999] absolute bottom-20 right-4
+        "z-[999] absolute bottom-20 right-4 justify-center text-xs rounded-full text-white flex items-center cursor-pointer",
-                                justify-between text-xs
+        unreads > 0 ? "py-1 px-3" : "w-8 h-8"
-                                rounded-full py-1 px-3 text-white
-                                bg-gradient-to-tl from-[#3C8CE7] to-[#00EAFF]`,
-        unreads > 0 ? "flex" : "hidden"
       )}
+      style={style}
+      onClick={scrollToBottom}
     >
-      <button onClick={scrollToBottom}>{t("new_msg", { num: unreads })}</button>
+      {unreads > 0 ? (
+        <span>{t("new_msg", { num: unreads })}</span>
+      ) : (
+        <DoubleDown />
+      )}
     </aside>
   );
 };

src/routes/chat/Layout/double-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M480-240 240-480l56-56 144 144v-368h80v368l144-144 56 56-240 240Z"/></svg>