From ff8d5aab5c7a063dab81820718239488053da762 Mon Sep 17 00:00:00 2001
From: Max Leiter <maxwell.leiter@gmail.com>
Date: Fri, 25 Mar 2022 13:29:49 -0700
Subject: [PATCH] client: add scroll to top button on post view

---
 client/components/app/index.tsx               |  2 +-
 .../file-dropdown/dropdown.module.css         |  3 +-
 client/components/post-page/index.tsx         |  4 ++-
 client/components/scroll-to-top/index.tsx     | 33 +++++++++++++++++++
 .../scroll-to-top/scroll.module.css           | 17 ++++++++++
 5 files changed, 56 insertions(+), 3 deletions(-)
 create mode 100644 client/components/scroll-to-top/index.tsx
 create mode 100644 client/components/scroll-to-top/scroll.module.css

diff --git a/client/components/app/index.tsx b/client/components/app/index.tsx
index 3e68a12e..8504e8f4 100644
--- a/client/components/app/index.tsx
+++ b/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)',
diff --git a/client/components/file-dropdown/dropdown.module.css b/client/components/file-dropdown/dropdown.module.css
index db133567..30dde7f8 100644
--- a/client/components/file-dropdown/dropdown.module.css
+++ b/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 {
diff --git a/client/components/post-page/index.tsx b/client/components/post-page/index.tsx
index bdb58e47..9f255043 100644
--- a/client/components/post-page/index.tsx
+++ b/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 >
     )
diff --git a/client/components/scroll-to-top/index.tsx b/client/components/scroll-to-top/index.tsx
new file mode 100644
index 00000000..3fd7c04b
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/client/components/scroll-to-top/scroll.module.css b/client/components/scroll-to-top/scroll.module.css
new file mode 100644
index 00000000..070e2cae
--- /dev/null
+++ b/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;
+}