client: add file dropdown to post view

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

@@ -0,0 +1,69 @@
+.wrapper {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+.dropdownButton {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	width: 100%;
+}
+
+.content {
+	list-style: none;
+	width: 100%;
+	padding: 0 var(--gap);
+	margin: 0;
+}
+
+.content li {
+	transition: var(--transition);
+	border-radius: var(--radius);
+	margin: 0;
+	padding: 2px var(--gap);
+}
+
+.content li:hover,
+.content li:focus {
+	background-color: var(--lighter-gray);
+}
+
+.content li a {
+	display: block;
+	height: 100%;
+	width: min-content;
+}
+
+.button {
+	border-radius: none !important;
+}
+
+.content li .fileIcon {
+	display: inline-block;
+	margin-right: var(--gap-half);
+}
+
+.content li .fileTitle {
+	font-size: 1rem;
+}
+
+.content li::before {
+	content: "";
+	padding: 0;
+	margin: 0;
+}
+
+.cardContent {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	padding: var(--gap-half);
+	padding-top: 200px;
+}
+
+@media screen and (max-width: 82rem) {
+}

client/components/file-dropdown/index.tsx

@@ -0,0 +1,64 @@
+import { Button, Link, Note, Popover, Spacer } from '@geist-ui/core'
+import FileIcon from '@geist-ui/icons/fileText'
+import CodeIcon from '@geist-ui/icons/fileLambda'
+import styles from './dropdown.module.css'
+import { useCallback, useEffect, useState } from "react"
+import { codeFileExtensions } from "@lib/constants"
+import ChevronDown from '@geist-ui/icons/chevronDown'
+import ShiftBy from "@components/shift-by"
+import type { File } from '@lib/types'
+import FileTree from '@geist-ui/icons/list'
+
+type Item = File & {
+    icon: JSX.Element
+}
+
+const FileDropdown = ({
+    files
+}: {
+    files: File[]
+}) => {
+    const [expanded, setExpanded] = useState(false)
+    const [items, setItems] = useState<Item[]>([])
+    useEffect(() => {
+        const newItems = files.map(file => {
+            const extension = file.title.split('.').pop()
+            if (codeFileExtensions.includes(extension || '')) {
+                return {
+                    ...file,
+                    icon: <CodeIcon />
+                }
+            } else {
+                return {
+                    ...file,
+                    icon: <FileIcon />
+                }
+            }
+        })
+        setItems(newItems)
+    }, [files])
+
+    const content = useCallback(() => (<ul className={styles.content}>
+        {items.map(item => (
+            <li key={item.id} onClick={() => setExpanded(false)}>
+                <Link color={false} href={`#${item.title}`}>
+                    <ShiftBy y={5}><span className={styles.fileIcon}>
+                        {item.icon}</span></ShiftBy>
+                    <span className={styles.fileTitle}>{item.title}</span>
+                </Link>
+            </li>
+        ))}
+    </ul>
+    ), [items])
+
+    // a list of files with an icon and a title
+    return (
+        <Button auto onClick={() => setExpanded(!expanded)} className={styles.button} iconRight={<ChevronDown />}>
+            <Popover content={content} visible={expanded} trigger="click" hideArrow={true}>
+                {files.length} files
+            </Popover>
+        </Button >
+    )
+}
+
+export default FileDropdown

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

@@ -17,11 +17,21 @@
 .fileTree li {
 	transition: var(--transition);
 	border-radius: var(--radius);
-	padding: var(--gap-half) 0;
 	margin: 0;
+	padding: var(--gap-half) 0;
 }
 
-.fileTree li:hover {
+.fileTree li a {
+	margin: 0px;
+	display: block;
+	width: 100%;
+	height: 100%;
+	padding: var(--gap-half);
+}
+
+.fileTree li:hover,
+.fileTree li:focus,
+.fileTree li:active {
 	background: var(--lighter-gray);
 }
 

client/components/post-page/index.tsx

@@ -6,11 +6,12 @@ import styles from './post-page.module.css'
 import homeStyles from '@styles/Home.module.css'
 
 import type { File, Post } from "@lib/types"
-import { Page, Button, Text, Badge, Tooltip, Spacer } from "@geist-ui/core"
+import { Page, Button, Text, Badge, Tooltip, Spacer, ButtonDropdown, ButtonGroup } from "@geist-ui/core"
 import ShiftBy from "@components/shift-by"
 import { useMemo, useState } from "react"
 import timeAgo from "@lib/time-ago"
-import FileTree from "@components/file-tree"
+import Archive from '@geist-ui/icons/archive'
+import FileDropdown from "@components/file-dropdown"
 
 type Props = {
     post: Post
@@ -51,18 +52,24 @@ const PostPage = ({ post }: Props) => {
             <Page.Content className={homeStyles.main}>
                 {/* {!isLoading && <PostFileExplorer files={post.files} />} */}
                 <div className={styles.header}>
-                    <div className={styles.titleAndBadge}>
+                    <span className={styles.title}>
                         <Text h2>{post.title}</Text>
-                        <span>
+                        <div className={styles.badges}>
                             <VisibilityBadge visibility={post.visibility} />
                             <Badge type="secondary"><Tooltip text={formattedTime}>{time}</Tooltip></Badge>
-                        </span>
-                    </div>
-                    <Button auto onClick={download}>
-                        Download as ZIP archive
-                    </Button>
+                        </div>
+                    </span>
+                    <span className={styles.buttons}>
+                        <ButtonGroup>
+                            <Button auto onClick={download} icon={<Archive />}>
+                                Download as ZIP archive
+                            </Button>
+                            <FileDropdown files={post.files} />
+                        </ButtonGroup>
+                    </span>
+
                 </div>
-                {post.files.length > 1 && <FileTree files={post.files} />}
+                {/* {post.files.length > 1 && <FileTree files={post.files} />} */}
                 {post.files.map(({ id, content, title }: File) => (
                     <DocumentComponent
                         key={id}

client/components/post-page/post-page.module.css

@@ -4,32 +4,44 @@
 	align-items: center;
 }
 
-.header .titleAndBadge {
+.header .title {
 	display: flex;
 	text-align: center;
 	justify-content: space-between;
 	align-items: center;
 }
 
-.header .titleAndBadge span {
+.header .title .badges > * {
 	margin-left: var(--gap);
+	margin-bottom: var(--gap-quarter);
 }
 
-@media screen and (max-width: 680px) {
+.header .buttons {
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-end;
+}
+
+@media screen and (max-width: 900px) {
 	.header {
 		flex-direction: column;
 	}
+}
 
-	.header .titleAndBadge {
+@media screen and (max-width: 700px) {
+	.header .title {
 		flex-direction: column;
 		padding-bottom: var(--gap-double);
 	}
 
-	.header .titleAndBadge span {
+	.header .title .badges > * {
 		margin-left: 0;
-		margin-bottom: var(--gap);
+	}
+
+	.header .title .badges {
 		display: flex;
-		justify-content: space-around;
-		width: 100%;
+		flex-direction: row;
+		justify-content: space-between;
+		width: 80%;
 	}
 }