client: add scroll to top button on post view

client/components/app/index.tsx

@@ -26,7 +26,7 @@ const App = ({
                 accents_6: 'var(--darker-gray)',
                 accents_7: 'var(--darkest-gray)',
                 accents_8: 'var(--darkest-gray)',
-                border: 'var(--lightest-gray)',
+                border: 'var(--light-gray)',
             },
             expressiveness: {
                 dropdownBoxShadow: '0 0 0 1px var(--light-gray)',

client/components/file-dropdown/dropdown.module.css

@@ -47,7 +47,8 @@
 }
 
 .content li .fileTitle {
-	font-size: 1rem;
+	/* from Geist */
+	font-size: calc(0.875 * 16px);
 }
 
 .content li::before {

client/components/post-page/index.tsx

@@ -12,6 +12,7 @@ import { useMemo, useState } from "react"
 import timeAgo from "@lib/time-ago"
 import Archive from '@geist-ui/icons/archive'
 import FileDropdown from "@components/file-dropdown"
+import ScrollToTop from "@components/scroll-to-top"
 
 type Props = {
     post: Post
@@ -67,7 +68,6 @@ const PostPage = ({ post }: Props) => {
                             <FileDropdown files={post.files} />
                         </ButtonGroup>
                     </span>
-
                 </div>
                 {/* {post.files.length > 1 && <FileTree files={post.files} />} */}
                 {post.files.map(({ id, content, title }: File) => (
@@ -79,6 +79,8 @@ const PostPage = ({ post }: Props) => {
                         content={content}
                     />
                 ))}
+                <ScrollToTop />
+
             </Page.Content>
         </Page >
     )

client/components/scroll-to-top/index.tsx

@@ -0,0 +1,33 @@
+import { Tooltip, Button, Spacer } from '@geist-ui/core'
+import ChevronUp from '@geist-ui/icons/chevronUpCircleFill'
+import { useEffect, useState } from 'react'
+import styles from './scroll.module.css'
+
+const ScrollToTop = () => {
+    const [shouldShow, setShouldShow] = useState(false)
+    useEffect(() => {
+        // if user is scrolled, set visible
+        const handleScroll = () => {
+            setShouldShow(window.scrollY > 100)
+        }
+        window.addEventListener('scroll', handleScroll)
+        return () => window.removeEventListener('scroll', handleScroll)
+    }, [])
+
+    const onClick = () => {
+        window.scrollTo({ top: 0, behavior: 'smooth' })
+    }
+
+    return (
+        <div style={{ display: 'flex', flexDirection: 'row', width: '100%', height: 24, justifyContent: 'flex-end' }}>
+            <Tooltip text="Scroll to Top" className={`${styles['scroll-up']} ${shouldShow ? styles['scroll-up-shown'] : ''}`}>
+                <Button aria-label='Scroll to Top' onClick={onClick} style={{ background: 'var(--light-gray)' }} auto >
+                    <Spacer height={2 / 3} inline width={0} />
+                    <ChevronUp />
+                </Button>
+            </Tooltip>
+        </div>
+    )
+}
+
+export default ScrollToTop

client/components/scroll-to-top/scroll.module.css

@@ -0,0 +1,17 @@
+.scroll-up {
+	position: fixed;
+	z-index: 2;
+	pointer-events: none;
+	opacity: 0;
+	transform: translateY(16px);
+	transition: transform 0.2s, opacity 0.2s;
+	cursor: pointer;
+	bottom: var(--gap-double);
+	will-change: transform, opacity;
+}
+
+.scroll-up-shown {
+	opacity: 0.8;
+	transform: none;
+	pointer-events: auto;
+}