fix: changelog tooltip and scroll to top

apps/mochi-web/app/layout/index.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx'
 import { ElementRef, ReactNode, forwardRef } from 'react'
 import { Footer } from './footer'
 
-interface Props {
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode
   noFooter?: boolean
   className?: string
@@ -11,7 +11,7 @@ interface Props {
 }
 
 export const Layout = forwardRef<ElementRef<'div'>, Props>((props, ref) => {
-  const { footer, hasChangelogAlert } = props
+  const { footer, hasChangelogAlert, ...rest } = props
   return (
     <div
       ref={ref}
@@ -22,6 +22,7 @@ export const Layout = forwardRef<ElementRef<'div'>, Props>((props, ref) => {
           : 'h-[calc(100vh-56px)]',
         props.className ?? '',
       )}
+      {...rest}
     >
       {props.children}
       {!(props.noFooter ?? false) && (footer || <Footer />)}

apps/mochi-web/components/Changelog/ChangelogDetailTitle/ChangelogDetailTitle.tsx

@@ -1,4 +1,4 @@
-import { Badge, Button, IconButton, Typography } from '@mochi-ui/core'
+import { Badge, Button, IconButton, Tooltip, Typography } from '@mochi-ui/core'
 import { InboxSolid } from '@mochi-ui/icons'
 import { format, isValid } from 'date-fns'
 import Link from 'next/link'
@@ -39,15 +39,21 @@ export const ChangelogDetailTitle = (props: ChangelogDetailTitleProps) => {
             Follow @mochi_gg
           </Link>
         </Button>
-        <IconButton
-          label="Subscribe"
-          color="neutral"
-          variant="outline"
-          onClick={onFollow}
-          className="!text-xl !p-1.5"
+        <Tooltip
+          content="Subscribe"
+          arrow="top-center"
+          componentProps={{ trigger: { asChild: true } }}
         >
-          <InboxSolid />
-        </IconButton>
+          <IconButton
+            label="Subscribe"
+            color="neutral"
+            variant="outline"
+            onClick={onFollow}
+            className="!text-xl !p-1.5"
+          >
+            <InboxSolid />
+          </IconButton>
+        </Tooltip>
       </div>
     </div>
   )

apps/mochi-web/pages/changelog/[version].tsx

@@ -9,6 +9,8 @@ import { HOME_URL, TWITTER_LINK } from '~envs'
 import { ModelProductChangelogs } from '~types/mochi-schema'
 import { API, GET_PATHS } from '~constants/api'
 import {
+  Badge,
+  BadgeIcon,
   Button,
   IconButton,
   Separator,
@@ -22,16 +24,18 @@ import {
   MailSolid,
   ArrowLeftLine,
   ArrowRightLine,
+  ArrowUpLine,
 } from '@mochi-ui/icons'
 import Link from 'next/link'
 import { ROUTES } from '~constants/routes'
-import { useClipboard } from '@dwarvesf/react-hooks'
+import { useClipboard, useDisclosure } from '@dwarvesf/react-hooks'
 import {
   FACEBOOK_SHARE_URL,
   MAIL_SHARE_URL,
   SHARE_CONTENT,
   TWITTER_SHARE_URL,
 } from '~constants/common'
+import clsx from 'clsx'
 import { getFirstImageUrl } from '../../utils/changelog'
 
 export const getServerSideProps: GetServerSideProps<
@@ -73,6 +77,12 @@ export default function Page(
   const layoutRef = useRef<HTMLDivElement>(null)
   const thumbnail = getFirstImageUrl(content)
 
+  const {
+    isOpen: isShowScrollTop,
+    onOpen: setShowScrollTop,
+    onClose: setHideScrollTop,
+  } = useDisclosure()
+
   const { hasCopied, onCopy } = useClipboard(
     HOME_URL + ROUTES.CHANGELOG_DETAIL(version ?? ''),
   )
@@ -82,6 +92,13 @@ export default function Page(
     <Layout
       footer={<Footer includeEmailSubscribe className="mt-10" />}
       ref={layoutRef}
+      onScroll={(e) => {
+        if (e.currentTarget.scrollTop > 500) {
+          setShowScrollTop()
+        } else {
+          setHideScrollTop()
+        }
+      }}
     >
       <SEO
         description={seo_description}
@@ -239,6 +256,28 @@ export default function Page(
           </Button>
         </div>
       </div>
+
+      <Badge
+        appearance="neutral"
+        className={clsx(
+          'cursor-pointer top-14 left-1/2 -translate-x-1/2 z-10 absolute inline-flex transition border border-neutral-outline-border',
+          {
+            '-translate-y-full': !isShowScrollTop,
+            'translate-y-1/2': isShowScrollTop,
+          },
+        )}
+        onClick={() =>
+          layoutRef.current?.scrollTo({
+            top: 0,
+            behavior: 'smooth',
+          })
+        }
+      >
+        <BadgeIcon className="-ml-0.5">
+          <ArrowUpLine className="w-3.5 h-3.5" />
+        </BadgeIcon>
+        <Typography level="p5">Scroll to top</Typography>
+      </Badge>
     </Layout>
   )
 }

apps/mochi-web/pages/changelog/index.tsx

@@ -1,8 +1,10 @@
 import {
   Badge,
+  BadgeIcon,
   Button,
   IconButton,
   Pagination,
+  Tooltip,
   Typography,
 } from '@mochi-ui/core'
 import { Layout } from '~app/layout'
@@ -13,11 +15,13 @@ import { ModelProductChangelogs } from '~types/mochi-schema'
 import { format, isValid } from 'date-fns'
 import Link from 'next/link'
 import { ROUTES } from '~constants/routes'
-import { InboxSolid } from '@mochi-ui/icons'
+import { ArrowUpLine, InboxSolid } from '@mochi-ui/icons'
 import { HOME_URL, TWITTER_LINK } from '~envs'
 import { useRef, useState } from 'react'
 import { Footer } from '~app/layout/footer'
 import { useFetchChangelogs } from '~hooks/changelog/useFetchChangelogs'
+import { useDisclosure } from '@dwarvesf/react-hooks'
+import clsx from 'clsx'
 
 const DEFAULT_PAGE_SIZE = 5
 
@@ -64,8 +68,24 @@ export default function Changelog() {
     size: DEFAULT_PAGE_SIZE,
   })
 
+  const {
+    isOpen: isShowScrollTop,
+    onOpen: setShowScrollTop,
+    onClose: setHideScrollTop,
+  } = useDisclosure()
+
   return (
-    <Layout ref={ref} footer={<Footer includeEmailSubscribe />}>
+    <Layout
+      ref={ref}
+      footer={<Footer includeEmailSubscribe />}
+      onScroll={(e) => {
+        if (e.currentTarget.scrollTop > 500) {
+          setShowScrollTop()
+        } else {
+          setHideScrollTop()
+        }
+      }}
+    >
       <SEO
         description="The latest updates from Mochi."
         image={`${HOME_URL}/changelog-thumbnail.png`}
@@ -91,20 +111,26 @@ export default function Changelog() {
                 Follow @mochi_gg
               </Link>
             </Button>
-            <IconButton
-              label="Subscribe"
-              color="neutral"
-              variant="outline"
-              className="!text-xl !p-1.5"
-              onClick={() => {
-                ref.current?.scrollTo({
-                  top: ref.current?.scrollHeight,
-                  behavior: 'smooth',
-                })
-              }}
+            <Tooltip
+              content="Subscribe"
+              arrow="top-center"
+              componentProps={{ trigger: { asChild: true } }}
             >
-              <InboxSolid />
-            </IconButton>
+              <IconButton
+                label="Subscribe"
+                color="neutral"
+                variant="outline"
+                className="!text-xl !p-1.5"
+                onClick={() => {
+                  ref.current?.scrollTo({
+                    top: ref.current?.scrollHeight,
+                    behavior: 'smooth',
+                  })
+                }}
+              >
+                <InboxSolid />
+              </IconButton>
+            </Tooltip>
           </div>
         </div>
 
@@ -124,6 +150,28 @@ export default function Changelog() {
           className="mb-4"
         />
       </div>
+
+      <Badge
+        appearance="neutral"
+        className={clsx(
+          'cursor-pointer top-14 left-1/2 -translate-x-1/2 z-10 absolute inline-flex transition border border-neutral-outline-border',
+          {
+            '-translate-y-full': !isShowScrollTop,
+            'translate-y-1/2': isShowScrollTop,
+          },
+        )}
+        onClick={() =>
+          ref.current?.scrollTo({
+            top: 0,
+            behavior: 'smooth',
+          })
+        }
+      >
+        <BadgeIcon className="-ml-0.5">
+          <ArrowUpLine className="w-3.5 h-3.5" />
+        </BadgeIcon>
+        <Typography level="p5">Scroll to top</Typography>
+      </Badge>
     </Layout>
   )
 }