Add Experimental scroll to top button for status page

src/pages/status.css

@@ -31,3 +31,11 @@
 .hero-heading .insignificant {
   font-weight: normal;
 }
+
+.ancestors-indicator {
+  font-size: 70% !important;
+}
+.ancestors-indicator[hidden] {
+  opacity: 0;
+  pointer-events: none;
+}

src/pages/status.jsx

@@ -17,6 +17,7 @@ import shortenNumber from '../utils/shorten-number';
 import states, { saveStatus } from '../utils/states';
 import store from '../utils/store';
 import useDebouncedCallback from '../utils/useDebouncedCallback';
+import useScroll from '../utils/useScroll';
 import useTitle from '../utils/useTitle';
 
 const LIMIT = 40;
@@ -278,6 +279,7 @@ function StatusPage({ id }) {
 
   const hasManyStatuses = statuses.length > LIMIT;
   const hasDescendants = statuses.some((s) => s.descendant);
+  const ancestors = statuses.filter((s) => s.ancestor);
 
   const [heroInView, setHeroInView] = useState(true);
   const onView = useDebouncedCallback(setHeroInView, 100);
@@ -292,6 +294,10 @@ function StatusPage({ id }) {
     location.hash = closeLink;
   });
 
+  const { nearReachTop } = useScroll({
+    scrollableElement: scrollableRef.current,
+  });
+
   return (
     <div class="deck-backdrop">
       <Link href={closeLink}></Link>
@@ -345,7 +351,29 @@ function StatusPage({ id }) {
                 </span>
               </span>
             ) : (
-              'Status'
+              <>
+                Status{' '}
+                <button
+                  type="button"
+                  class="ancestors-indicator light small"
+                  onClick={(e) => {
+                    // Scroll to top
+                    e.preventDefault();
+                    e.stopPropagation();
+                    scrollableRef.current.scrollTo({
+                      top: 0,
+                      behavior: 'smooth',
+                    });
+                  }}
+                  hidden={!ancestors.length || nearReachTop}
+                >
+                  <Icon icon="arrow-up" />
+                  <Icon icon="comment" />{' '}
+                  <span class="insignificant">
+                    {shortenNumber(ancestors.length)}
+                  </span>
+                </button>
+              </>
             )}
           </h1>
           <div class="header-side">