feat(app): implement scroll-to-top button with visibility toggle on scroll

src/client/dd-hub-react/src/app.tsx

@@ -1,8 +1,9 @@
 import 'src/global.css';
 
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 import Fab from '@mui/material/Fab';
+import KeyboardArrowUpRoundedIcon from '@mui/icons-material/KeyboardArrowUpRounded';
 
 import { usePathname } from 'src/routes/hooks';
 
@@ -17,12 +18,28 @@ type AppProps = {
 export default function App({ children }: AppProps) {
   useScrollToTop();
 
+  const [showScrollTop, setShowScrollTop] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setShowScrollTop(window.scrollY > 160);
+    };
+
+    handleScroll();
+    window.addEventListener('scroll', handleScroll, { passive: true });
+
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  const handleScrollTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
   const ddButton = () => (
     <Fab
       size="medium"
-      aria-label="Digital Data"
+      aria-label="Scroll to top"
-      href="https://digitaldata.works/"
+      onClick={handleScrollTop}
-      target="_blank"
       sx={{
         zIndex: 9,
         right: 20,
@@ -30,14 +47,20 @@ export default function App({ children }: AppProps) {
         width: 48,
         height: 48,
         position: 'fixed',
-        bgcolor: 'transparent',
+        color: 'common.white',
-        boxShadow: 'none'
+        bgcolor: 'primary.main',
+        boxShadow: (theme) => theme.shadows[6],
+        opacity: showScrollTop ? 1 : 0,
+        pointerEvents: showScrollTop ? 'auto' : 'none',
+        transform: showScrollTop ? 'translateY(0)' : 'translateY(12px)',
+        transition: 'opacity 0.24s ease, transform 0.24s ease',
+        '&:hover': {
+          bgcolor: 'primary.dark',
+          boxShadow: (theme) => theme.shadows[8],
+        },
       }}
     >
-      <img
+      <KeyboardArrowUpRoundedIcon fontSize="medium" />
-        src="/assets/images/dd-button-icon.webp"
-        alt="Digital Data"
-      />
     </Fab>
   );