chore: tweak back to top button

RoccoSmit · Jan 8, 2025 · 840b16f · 840b16f
1 parent 012ca1d
commit 840b16f
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 103 deletions.
diff --git a/web/src/components/PagedMemoList/PagedMemoList.tsx b/web/src/components/PagedMemoList/PagedMemoList.tsx
@@ -1,9 +1,7 @@
 import { Button } from "@usememos/mui";
-import { ArrowDownIcon, LoaderIcon } from "lucide-react";
-import { useEffect, useRef, useState, useMemo } from "react";
-import { useLocation } from "react-router-dom";
+import { ArrowDownIcon, ArrowUpIcon, LoaderIcon, SlashIcon } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import PullToRefresh from "react-simple-pull-to-refresh";
-import ScrollToTop from "@/components/ScrollToTop";
 import { DEFAULT_LIST_MEMOS_PAGE_SIZE } from "@/helpers/consts";
 import useResponsiveWidth from "@/hooks/useResponsiveWidth";
 import { Routes } from "@/router";
@@ -30,32 +28,15 @@ const PagedMemoList = (props: Props) => {
   const memoStore = useMemoStore();
   const memoList = useMemoList();
   const containerRef = useRef<HTMLDivElement>(null);
-  const [containerRightOffset, setContainerRightOffset] = useState(0);
   const [state, setState] = useState<State>({
     isRequesting: true, // Initial request
     nextPageToken: "",
   });
-  const sortedMemoList = props.listSort ? props.listSort(memoList.value) : memoList.value;
-  const location = useLocation();
-
-  const shouldShowScrollToTop = useMemo(
+  const shouldShowBackToTop = useMemo(
     () => [Routes.ROOT, Routes.EXPLORE, Routes.ARCHIVED].includes(location.pathname as Routes) || location.pathname.startsWith("/u/"),
     [location.pathname],
   );
-
-  useEffect(() => {
-    const updateOffset = () => {
-      if (containerRef.current) {
-        const rect = containerRef.current.getBoundingClientRect();
-        const offset = window.innerWidth - rect.right;
-        setContainerRightOffset(offset);
-      }
-    };
-
-    updateOffset();
-    window.addEventListener("resize", updateOffset);
-    return () => window.removeEventListener("resize", updateOffset);
-  }, []);
+  const sortedMemoList = props.listSort ? props.listSort(memoList.value) : memoList.value;
 
   const fetchMoreMemos = async (nextPageToken: string) => {
     setState((state) => ({ ...state, isRequesting: true }));
@@ -88,21 +69,29 @@ const PagedMemoList = (props: Props) => {
           <LoaderIcon className="animate-spin text-zinc-500" />
         </div>
       )}
-      {!state.isRequesting && state.nextPageToken && (
-        <div className="w-full flex flex-row justify-center items-center my-4">
-          <Button variant="plain" onClick={() => fetchMoreMemos(state.nextPageToken)}>
-            {t("memo.load-more")}
-            <ArrowDownIcon className="ml-2 w-4 h-auto" />
-          </Button>
-        </div>
+      {!state.isRequesting && (
+        <>
+          {!state.nextPageToken && sortedMemoList.length === 0 ? (
+            <div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
+              <Empty />
+              <p className="mt-2 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>
+            </div>
+          ) : (
+            <div className="w-full flex flex-row justify-center items-center my-4">
+              {state.nextPageToken && (
+                <>
+                  <Button variant="plain" onClick={() => fetchMoreMemos(state.nextPageToken)}>
+                    {t("memo.load-more")}
+                    <ArrowDownIcon className="ml-1 w-4 h-auto" />
+                  </Button>
+                  {shouldShowBackToTop && <SlashIcon className="mx-1 w-4 h-auto opacity-40" />}
+                </>
+              )}
+              {shouldShowBackToTop && <BackToTop />}
+            </div>
+          )}
+        </>
       )}
-      {!state.isRequesting && !state.nextPageToken && sortedMemoList.length === 0 && (
-        <div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
-          <Empty />
-          <p className="mt-2 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>
-        </div>
-      )}
-      <ScrollToTop enabled={shouldShowScrollToTop} className="fixed bottom-6" style={{ right: `calc(1rem + ${containerRightOffset}px)` }} />
     </div>
   );
 
@@ -130,4 +119,46 @@ const PagedMemoList = (props: Props) => {
   );
 };
 
+const BackToTop = () => {
+  const t = useTranslate();
+  const [isVisible, setIsVisible] = useState(false);
+  const [shouldRender, setShouldRender] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const shouldBeVisible = window.scrollY > 400;
+      if (shouldBeVisible !== isVisible) {
+        if (shouldBeVisible) {
+          setShouldRender(true);
+          setIsVisible(true);
+        } else {
+          setShouldRender(false);
+          setIsVisible(false);
+        }
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [isVisible]);
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  if (!shouldRender) {
+    return null;
+  }
+
+  return (
+    <Button variant="plain" onClick={scrollToTop}>
+      {t("router.back-to-top")}
+      <ArrowUpIcon className="ml-1 w-4 h-auto" />
+    </Button>
+  );
+};
+
 export default PagedMemoList;
diff --git a/web/src/components/ScrollToTop.tsx b/web/src/components/ScrollToTop.tsx
diff --git a/web/src/locales/en.json b/web/src/locales/en.json
@@ -329,7 +329,7 @@
       "create-dialog": {
         "create-access-token": "Create Access Token",
         "description": "Description",
-        "some-description": "Some description...",      
+        "some-description": "Some description...",
         "expiration": "Expiration",
         "created-at": "Created At",
         "expires-at": "Expires At",
@@ -359,7 +359,7 @@
       "week-start-day": "Week start day",
       "saturday": "Saturday",
       "sunday": "Sunday",
-      "monday": "Monday"            
+      "monday": "Monday"
     },
     "memo-related-settings": {
       "title": "Memo related settings",