Add a nice pointer

src/components/icon.jsx

@@ -18,6 +18,7 @@ const ICONS = {
   'arrow-left': 'mingcute:arrow-left-line',
   'arrow-right': 'mingcute:arrow-right-line',
   'arrow-up': 'mingcute:arrow-up-line',
+  'arrow-down': 'mingcute:arrow-down-line',
   earth: 'mingcute:earth-line',
   lock: 'mingcute:lock-line',
   unlock: 'mingcute:unlock-line',

src/pages/status.css

@@ -24,6 +24,10 @@
   display: inline-block;
   margin-bottom: 0.25em;
 }
+.hero-heading .icon {
+  vertical-align: middle;
+  color: var(--text-insignificant-color);
+}
 .hero-heading .insignificant {
   font-weight: normal;
 }

src/pages/status.jsx

@@ -268,6 +268,12 @@ function StatusPage({ id }) {
 
   const [heroInView, setHeroInView] = useState(true);
   const onView = useDebouncedCallback(setHeroInView, 100);
+  const heroPointer = useMemo(() => {
+    // get top offset of heroStatus
+    if (!heroStatusRef.current) return null;
+    const { top } = heroStatusRef.current.getBoundingClientRect();
+    return top > 0 ? 'down' : 'up';
+  }, [heroInView]);
 
   return (
     <div class="deck-backdrop">
@@ -300,6 +306,13 @@ function StatusPage({ id }) {
           <h1>
             {!heroInView && heroStatus ? (
               <span class="hero-heading">
+                {!!heroPointer && (
+                  <>
+                    <Icon
+                      icon={heroPointer === 'down' ? 'arrow-down' : 'arrow-up'}
+                    />{' '}
+                  </>
+                )}
                 <NameText showAvatar account={heroStatus.account} short />{' '}
                 <span class="insignificant">
                   &bull;{' '}