chore: add back to top button

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>

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",

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",

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": "快速过滤"

web/src/locales/zh-Hant.json

@@ -70,7 +70,7 @@
     "mark": "Mark"
   },
   "router": {
-    "back-to-home": "回到首頁"
+    "go-to-home": "回到首頁"
   },
   "auth": {
     "signup-as-host": "註冊為管理員",

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>