From 952225d1da1df925040c11393141af87418f5412 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Sat, 30 Sep 2023 02:04:13 +0800
Subject: [PATCH] chore: add back to top button

---
 web/src/components/FloatingNavButton.tsx | 18 +++++++++++++++---
 web/src/locales/de.json                  |  2 +-
 web/src/locales/en.json                  |  3 ++-
 web/src/locales/zh-Hans.json             |  2 +-
 web/src/locales/zh-Hant.json             |  2 +-
 web/src/pages/NotFound.tsx               |  2 +-
 6 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/web/src/components/FloatingNavButton.tsx b/web/src/components/FloatingNavButton.tsx
index a6c89b97..bd97de3d 100644
--- a/web/src/components/FloatingNavButton.tsx
+++ b/web/src/components/FloatingNavButton.tsx
@@ -4,8 +4,12 @@ import { useTranslate } from "@/utils/i18n";
 import Icon from "./Icon";
 
 const FloatingNavButton = () => {
-  const navigateTo = useNavigateTo();
   const t = useTranslate();
+  const navigateTo = useNavigateTo();
+
+  const handleScrollToTop = () => {
+    document.body.querySelector("#root")?.scrollTo({ top: 0, behavior: "smooth" });
+  };
 
   return (
     <>
@@ -22,10 +26,18 @@ const FloatingNavButton = () => {
         </div>
         <Menu placement="top-end">
           <button
-            className="w-full text-left text-sm whitespace-nowrap leading-6 py-1 px-3 cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-600"
+            className="w-full text-left text-sm flex flex-row justify-center items-center whitespace-nowrap leading-6 py-1 px-3 cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-600"
+            onClick={handleScrollToTop}
+          >
+            <Icon.ArrowUpToLine strokeWidth={1} className="w-4 h-auto mr-1" />
+            {t("router.back-to-top")}
+          </button>
+          <button
+            className="w-full text-left text-sm flex flex-row justify-center items-center whitespace-nowrap leading-6 py-1 px-3 cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-600"
             onClick={() => navigateTo("/")}
           >
-            {t("router.back-to-home")}
+            <Icon.Home strokeWidth={1} className="w-4 h-auto mr-1" />
+            {t("router.go-to-home")}
           </button>
         </Menu>
       </Dropdown>
diff --git a/web/src/locales/de.json b/web/src/locales/de.json
index 206eeb35..7409a617 100644
--- a/web/src/locales/de.json
+++ b/web/src/locales/de.json
@@ -70,7 +70,7 @@
     "mark": "Mark"
   },
   "router": {
-    "back-to-home": "Zurück zur Startseite"
+    "go-to-home": "Zurück zur Startseite"
   },
   "auth": {
     "signup-as-host": "Als Host registrieren",
diff --git a/web/src/locales/en.json b/web/src/locales/en.json
index c8e49c95..9cc17b10 100644
--- a/web/src/locales/en.json
+++ b/web/src/locales/en.json
@@ -71,7 +71,8 @@
     }
   },
   "router": {
-    "back-to-home": "Back to Home"
+    "go-to-home": "Go to Home",
+    "back-to-top": "Back to Top"
   },
   "auth": {
     "signup-as-host": "Sign up as Host",
diff --git a/web/src/locales/zh-Hans.json b/web/src/locales/zh-Hans.json
index 40fc34f5..ab014eca 100644
--- a/web/src/locales/zh-Hans.json
+++ b/web/src/locales/zh-Hans.json
@@ -285,7 +285,7 @@
     "warning-text-unused": "确定删除这些无用资源么？\n\n此操作不可逆❗"
   },
   "router": {
-    "back-to-home": "回到首页"
+    "go-to-home": "回到首页"
   },
   "search": {
     "quickly-filter": "快速过滤"
diff --git a/web/src/locales/zh-Hant.json b/web/src/locales/zh-Hant.json
index 36825574..edeee6a5 100644
--- a/web/src/locales/zh-Hant.json
+++ b/web/src/locales/zh-Hant.json
@@ -70,7 +70,7 @@
     "mark": "Mark"
   },
   "router": {
-    "back-to-home": "回到首頁"
+    "go-to-home": "回到首頁"
   },
   "auth": {
     "signup-as-host": "註冊為管理員",
diff --git a/web/src/pages/NotFound.tsx b/web/src/pages/NotFound.tsx
index 03dba4d1..aafe940c 100644
--- a/web/src/pages/NotFound.tsx
+++ b/web/src/pages/NotFound.tsx
@@ -13,7 +13,7 @@ const NotFound = () => {
         <p className="mt-4 text-5xl font-mono dark:text-gray-300">404</p>
         <Link className="mt-4" to="/">
           <Button variant="outlined" startDecorator={<Icon.Home className="w-4 h-auto" />}>
-            {t("router.back-to-home")}
+            {t("router.go-to-home")}
           </Button>
         </Link>
       </div>