chore(deps): update dependency @next/bundle-analyzer to v13

Bumps [sqlite3](https://github.com/TryGhost/node-sqlite3) from 5.0.2 to 5.0.3.
- [Release notes](https://github.com/TryGhost/node-sqlite3/releases)
- [Commits](https://github.com/TryGhost/node-sqlite3/compare/v5.0.2...v5.0.3)

---
updated-dependencies:
- dependency-name: sqlite3
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.env.default

@@ -1,35 +0,0 @@
-DATABASE_URL=postgresql://user:password@localhost:5432/dbname
-
-# Optional if you use Vercel (defaults to VERCEL_URL).
-# Necessary in development unless you use the vercel CLI (`vc dev`)
-DRIFT_URL=http://localhost:3000
-
-# Optional: The first user becomes an admin. Defaults to false
-ENABLE_ADMIN=false
-
-# Required: Next auth secret is a required valid JWT secret. You can generate one with `openssl rand -hex 32`
-NEXTAUTH_SECRET=7f8b8b5c5e5f5e5f5e5f5e5f5e5f5e5f5e5f5e5f5e5f5e5f5e5f5e5f5e5f5f5
-
-# Required: but unnecessary if you use a supported host like Vercel
-NEXTAUTH_URL=http://localhost:3000
-
-# Optional: for locking your instance
-REGISTRATION_PASSWORD=
-
-# Optional: for if you want GitHub oauth. Currently incompatible with the registration password
-GITHUB_CLIENT_ID=
-GITHUB_CLIENT_SECRET=
-
-# Optional: if you want Keycloak oauth. Currently incompatible with the registration password
-KEYCLOAK_ID=
-KEYCLOAK_SECRET=
-KEYCLOAK_ISSUER=  # keycloak path including realm
-KEYCLOAK_NAME=
-
-# Optional: if you want to support credential auth (username/password, supports registration password)
-# Defaults to true
-CREDENTIAL_AUTH=true
-
-# Optional:
-WELCOME_CONTENT=
-WELCOME_TITLE=

.eslintrc.json

@@ -1,14 +0,0 @@
-{
-	"extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"],
-	"ignorePatterns": [
-		"node_modules/",
-		"__tests__/",
-		"coverage/",
-		".next/",
-		"public"
-	],
-	"rules": {
-		"@typescript-eslint/no-unused-vars": "error",
-		"@typescript-eslint/no-explicit-any": "error"
-	}
-}

.gitignore

@@ -1,36 +1,2 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-analyze
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-.pnpm-debug.log*
-
-# production env
-.env
-
-# vercel
 .vercel
-
-# typescript
-*.tsbuildinfo
+drift.sqlite

.vscode/settings.json

@@ -1,5 +0,0 @@
-{
-  "typescript.tsdk": "node_modules/.pnpm/typescript@4.9.4/node_modules/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true,
-  "dotenv.enableAutocloaking": false
-}

README.md

@@ -1,19 +1,13 @@
-# <img src="src/public/assets/logo.png" height="32px" alt="" /> Drift
+# <img src="client/public/assets/logo.png" height="32px" alt="" /> Drift
 
-> **Note:** This branch is where all work is being done to refactor to the Next.js 13 app directory and React Server Components.
+Drift is a self-hostable Gist clone. It's also a major work-in-progress, but is completely functional.
 
-Drift is a self-hostable Gist clone. It's in beta, but is completely functional.
-
-You can try a demo at https://drift.lol. The demo is built on main but has no database, so files and accounts can be wiped at any time.
+You can try a demo at https://drift.lol. The demo is built on master but has no database, so files and accounts can be wiped at any time.
 
 If you want to contribute, need support, or want to stay updated, you can join the IRC channel at #drift on irc.libera.chat or [reach me on twitter](https://twitter.com/Max_Leiter). If you don't have an IRC client yet, you can use a webclient [here](https://demo.thelounge.chat/#/connect?join=%23drift&nick=drift-user&realname=Drift%20User). 
-
-Drift is built with Next.js 13, React Server Components, [shadcn/ui](https://github.com/shadcn/ui), and [Prisma](https://prisma.io/).
-
 <hr />
 
 **Contents:**
-
 - [Setup](#setup)
   - [Development](#development)
   - [Production](#production)
@@ -26,122 +20,77 @@ Drift is built with Next.js 13, React Server Components, [shadcn/ui](https://git
 
 ### Development
 
-In the root directory, run `pnpm i`. If you need `pnpm`, you can download it [here](https://pnpm.io/installation).
-You can run `pnpm dev` in `client` for file watching and live reloading.
+In both `server` and `client`, run `yarn` (if you need yarn, you can download it [here](https://yarnpkg.com/).)
+You can run `yarn dev` in either / both folders to start the server and client with file watching / live reloading.
 
-To work with [prisma](prisma.io/), you can use `pnpm prisma` or `pnpm exec prisma` to interact with the database.
+To migrate the sqlite database in development, you can use `yarn migrate` to see a list of options.
 
 ### Production
 
-`pnpm build` will produce production code. `pnpm start` will start the Next.js server.
+`yarn build` in both `client/` and `server/` will produce production code for the client and server respectively. 
+
+If you're deploying the front-end to something like Vercel, you'll need to set the root folder to `client/`.
+
+In production the sqlite database will be automatically migrated to the latest version.
 
 ### Environment Variables
 
 You can change these to your liking.
 
-`.env`:
+`client/.env`:
 
-- `DRIFT_URL`: the URL of the drift instance.
-- `DATABASE_URL`: the URL to connect to your postgres instance. For example, `postgresql://user:password@localhost:5432/drift`.
+- `API_URL`: defaults to localhost:3001, but allows you to host the front-end separately from the backend on a service like Vercel or Netlify
+- `SECRET_KEY`: a secret key used for validating API requests that is never exposed to the browser
+
+`server/.env`:
+
+- `PORT`: the default port to start the server on (3000 by default)
+- `NODE_ENV`: defaults to development, can be `production`
+- `JWT_SECRET`: a secure token for JWT tokens. You can generate one [here](https://www.grc.com/passwords.htm).
+- `MEMORY_DB`: if `true`, a sqlite database will not be created and changes will only exist in memory. Mainly for the demo.
+- `REGISTRATION_PASSWORD`: if `true`, the user will be required to provide this password to sign-up, in addition to their username and account password. If it's not set, no additional password will be required.
+- `SECRET_KEY`: the same secret key as the client
 - `WELCOME_CONTENT`: a markdown string that's rendered on the home page
 - `WELCOME_TITLE`: the file title for the post on the homepage.
 - `ENABLE_ADMIN`: the first account created is an administrator account
-- `REGISTRATION_PASSWORD`: the password required to register an account. If not set, no password is required.
-- `NODE_ENV`: defaults to development, can be `production`
-
-#### Auth environment variables
-
-**Note:** Only credential auth currently supports the registration password, so if you want to secure registration, you must use only credential auth.
-
-- `GITHUB_CLIENT_ID`: the client ID for GitHub OAuth.
-- `GITHUB_CLIENT_SECRET`: the client secret for GitHub OAuth.
-- `NEXTAUTH_URL`: the URL of the drift instance. Not required if hosting on Vercel.
-- `CREDENTIAL_AUTH`: whether to allow username/password authentication. Defaults to `true`.
+- `DRIFT_HOME`: defaults to ~/.drift, the directory for storing the database and eventually images
 
 ## Running with pm2
 
 It's easy to start Drift using [pm2](https://pm2.keymetrics.io/).
-First, add the `.env` file with your values (see the above section for the required options).
+First, add `.env` files to `client/` and `server/` with the values you want (see the above section for possible values).
+Then, use the following commands to start the client and server:
 
-Then, use the following command to start the server:
+- `cd server && yarn build && pm2 start yarn --name drift-server --interpreter bash -- start`
+- `cd ..`
+- `cd client && yarn build && pm2 start yarn --name drift-client --interpreter bash -- start`
 
-- `pnpm build && pm2 start pnpm --name drift --interpreter bash -- start`
-
-Refer to pm2's docs or `pm2 help` for more information.
+You now use `pm2 ls` to see their statuses. Refer to pm2's docs or `pm2 help` for more information.
 
 ## Running with Docker
 
-## Running with systemd
-
-_**NOTE:** We assume that you know how to enable user lingering if you don't want to use the systemd unit as root_
-
-- As root
-  - Place the following systemd unit in ___/etc/systemd/system___ and name it _drift.service_
-  - Replace any occurrence of ___`$USERNAME`___ with the shell username of the user that will be running the Drift server
-
-  ```
-  ##########
-  # Drift Systemd Unit (Global)
-  ##########
-  [Unit]
-  Description=Drift Server (Global)
-  After=default.target
-  
-  [Service]
-  User=$USERNAME
-  Group=$USERNAME
-  Type=simple
-  WorkingDirectory=/home/$USERNAME/Drift
-  ExecStart=/usr/bin/pnpm start
-  Restart=on-failure
-  
-  [Install]
-  WantedBy=default.target
-  ```
-- As a nomal user
-  - Place the following systemd unit inside ___/home/user/.config/systemd/user___ and name it _drift_user.service_
-  - Replace any occurrence of ___`$USERNAME`___ with the shell username of the user that will be running the Drift server
-
-  ```
-  ##########
-  # Drift Systemd Unit (User)
-  ##########
-  [Unit]
-  Description=Drift Server (User)
-  After=default.target
-  
-  [Service]
-  Type=simple
-  WorkingDirectory=/home/$USERNAME/Drift
-  ExecStart=/usr/bin/pnpm start
-  Restart=on-failure
-  
-  [Install]
-  WantedBy=default.target
-  ```
+The client and server each have Dockerfiles ([client](https://github.com/MaxLeiter/Drift/blob/main/client/Dockerfile), [server](https://github.com/MaxLeiter/Drift/blob/main/server/Dockerfile)) you can use with a docker-compose; an example compose [is provided in the repository](https://github.com/MaxLeiter/Drift/blob/main/docker-compose.yml). It's recommended you pair running them with nginx or another reverse proxy. Also review the environment variables above and configure them to your liking.
 
 ## Current status
 
-Drift is a work in progress. Below is a (rough) list of completed and envisioned features. If you want to help address any of them, please let me know regardless of your experience and I'll be happy to assist.
+Drift is a major work in progress. Below is a (rough) list of completed and envisioned features. If you want to help address any of them, please let me know regardless of your experience and I'll be happy to assist.
 
-- [x] Next.js 13 `app` directory
-- [x] creating and sharing private, public, password-protected, and unlisted posts
-  - [x] syntax highlighting
-  - [x] expiring posts
+- [x] creating and sharing private, public, unlisted posts
+  - [x] syntax highlighting (detected by file extension)
+  - [x] multiple files per post
+  - [x] uploading files via drag-and-drop
 - [x] responsive UI
 - [x] user auth
   - [ ] SSO via HTTP header (Issue: [#11](https://github.com/MaxLeiter/Drift/issues/11))
-  - [x] SSO via GitHub OAuth
 - [x] downloading files (individually and entire posts)
 - [x] password protected posts
-- [x] postgres database
-- [x] administrator account / settings
+- [x] sqlite database
+- [ ] administrator account / settings
 - [x] docker-compose (PRs: [#13](https://github.com/MaxLeiter/Drift/pull/13), [#75](https://github.com/MaxLeiter/Drift/pull/75))
   - [ ] publish docker builds
 - [ ] user settings
 - [ ] works enough with JavaScript disabled
-- [ ] in-depth documentation
+- [x] documentation
 - [x] customizable homepage, so the demo can exist as-is but other instances can be built from the same source. Environment variable for the file contents?
-- [ ] fleshed out API
-- [ ] Swappable database backends
-- [ ] More OAuth providers
+- [ ] Next.js 13 + app directory / server components
+  - [ ] Migrate away from `geist-ui`

client/.env.local

@@ -0,0 +1,2 @@
+API_URL=http://localhost:3000
+SECRET_KEY=secret

client/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

client/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# production env
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

client/.prettierrc

@@ -3,6 +3,5 @@
   "trailingComma": "none",
   "singleQuote": false,
   "printWidth": 80,
-  "useTabs": true,
-  "plugins": ["prettier-plugin-tailwindcss"]
+  "useTabs": true
 }

client/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "./node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

client/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

client/components/admin/action-dropdown/index.tsx

@@ -0,0 +1,38 @@
+import { Popover, Button } from "@geist-ui/core"
+import { MoreVertical } from "@geist-ui/icons"
+
+type Action = {
+	title: string
+	onClick: () => void
+}
+
+const ActionDropdown = ({
+	title = "Actions",
+	actions,
+	showTitle = false
+}: {
+	title?: string
+	showTitle?: boolean
+	actions: Action[]
+}) => {
+	return (
+		<Popover
+			title={title}
+			content={
+				<>
+					{showTitle && <Popover.Item title>{title}</Popover.Item>}
+					{actions.map((action) => (
+						<Popover.Item onClick={action.onClick} key={action.title}>
+							{action.title}
+						</Popover.Item>
+					))}
+				</>
+			}
+			hideArrow
+		>
+			<Button iconRight={<MoreVertical />} auto></Button>
+		</Popover>
+	)
+}
+
+export default ActionDropdown

client/components/admin/admin.module.css

@@ -0,0 +1,25 @@
+.adminWrapper table {
+	width: 100%;
+	border-spacing: 0;
+	border: 1px solid var(--gray);
+	border-radius: var(--radius);
+	padding: var(--gap-half);
+}
+
+.adminWrapper table th {
+	text-align: left;
+	background: var(--gray-light);
+	color: var(--gray-dark);
+	font-weight: bold;
+}
+
+.postModal details {
+	border-radius: var(--radius);
+	padding: var(--gap);
+	border-radius: var(--radius);
+}
+
+.postModal summary {
+	cursor: pointer;
+	outline: none;
+}

client/components/admin/index.tsx

@@ -0,0 +1,41 @@
+import Cookies from "js-cookie"
+import styles from "./admin.module.css"
+import PostTable from "./post-table"
+import UserTable from "./user-table"
+
+export const adminFetcher = async (
+	url: string,
+	options?: {
+		method?: string
+		body?: any
+	}
+) =>
+	fetch("/server-api/admin" + url, {
+		method: options?.method || "GET",
+		headers: {
+			"Content-Type": "application/json",
+			Authorization: `Bearer ${Cookies.get("drift-token")}`
+		},
+		body: options?.body && JSON.stringify(options.body)
+	})
+
+const Admin = () => {
+	return (
+		<div className={styles.adminWrapper}>
+			<h2>Administration</h2>
+			<div
+				style={{
+					display: "flex",
+					flexDirection: "column",
+					alignItems: "center",
+					gap: 4
+				}}
+			>
+				<UserTable />
+				<PostTable />
+			</div>
+		</div>
+	)
+}
+
+export default Admin

client/components/admin/post-table.tsx

@@ -0,0 +1,141 @@
+import SettingsGroup from "@components/settings-group"
+import { Fieldset, useToasts } from "@geist-ui/core"
+import byteToMB from "@lib/byte-to-mb"
+import { Post } from "@lib/types"
+import Table from "rc-table"
+import { useEffect, useMemo, useState } from "react"
+import { adminFetcher } from "."
+import ActionDropdown from "./action-dropdown"
+
+const PostTable = () => {
+	const [posts, setPosts] = useState<Post[]>()
+	const { setToast } = useToasts()
+
+	useEffect(() => {
+		const fetchPosts = async () => {
+			const res = await adminFetcher("/posts")
+			const data = await res.json()
+			setPosts(data)
+		}
+		fetchPosts()
+	}, [])
+
+	const tablePosts = useMemo(
+		() =>
+			posts?.map((post) => {
+				return {
+					id: post.id,
+					title: post.title,
+					files: post.files?.length || 0,
+					createdAt: `${new Date(
+						post.createdAt
+					).toLocaleDateString()} ${new Date(
+						post.createdAt
+					).toLocaleTimeString()}`,
+					visibility: post.visibility,
+					size: post.files
+						? byteToMB(
+								post.files.reduce((acc, file) => acc + file.html.length, 0)
+						  )
+						: 0,
+					actions: ""
+				}
+			}),
+		[posts]
+	)
+
+	const deletePost = async (/* id: string */) => {
+		return alert("Not implemented")
+
+		// const confirm = window.confirm("Are you sure you want to delete this post?")
+		// if (!confirm) return
+		// const res = await adminFetcher(`/posts/${id}`, {
+		// 	method: "DELETE",
+		// })
+
+		// const json = await res.json()
+
+		// if (res.status === 200) {
+		// 	setToast({
+		// 		text: "Post deleted",
+		// 		type: "success"
+		// 	})
+
+		// 	setPosts((posts) => {
+		// 		const newPosts = posts?.filter((post) => post.id !== id)
+		// 		return newPosts
+		// 	})
+		// } else {
+		// 	setToast({
+		// 		text: json.error || "Something went wrong",
+		// 		type: "error"
+		// 	})
+		// }
+	}
+
+	const tableColumns = [
+		{
+			title: "Title",
+			dataIndex: "title",
+			key: "title",
+			width: 50
+		},
+		{
+			title: "Files",
+			dataIndex: "files",
+			key: "files",
+			width: 10
+		},
+		{
+			title: "Created",
+			dataIndex: "createdAt",
+			key: "createdAt",
+			width: 100
+		},
+		{
+			title: "Visibility",
+			dataIndex: "visibility",
+			key: "visibility",
+			width: 50
+		},
+		{
+			title: "Size (MB)",
+			dataIndex: "size",
+			key: "size",
+			width: 10
+		},
+		{
+			title: "Actions",
+			dataIndex: "",
+			key: "actions",
+			width: 50,
+			render() {
+				return (
+					<ActionDropdown
+						title="Actions"
+						actions={[
+							{
+								title: "Delete",
+								onClick: () => deletePost()
+							}
+						]}
+					/>
+				)
+			}
+		}
+	]
+
+	return (
+		<SettingsGroup title="Posts">
+			{!posts && <Fieldset.Subtitle>Loading...</Fieldset.Subtitle>}
+			{posts && (
+				<Fieldset.Subtitle>
+					<h5>{posts.length} posts</h5>
+				</Fieldset.Subtitle>
+			)}
+			{posts && <Table columns={tableColumns} data={tablePosts} />}
+		</SettingsGroup>
+	)
+}
+
+export default PostTable

client/components/admin/user-table.tsx

@@ -0,0 +1,161 @@
+import { Fieldset, useToasts } from "@geist-ui/core"
+import { User } from "@lib/types"
+import { useEffect, useMemo, useState } from "react"
+import { adminFetcher } from "."
+import Table from "rc-table"
+import SettingsGroup from "@components/settings-group"
+import ActionDropdown from "./action-dropdown"
+
+const UserTable = () => {
+	const [users, setUsers] = useState<User[]>()
+	const { setToast } = useToasts()
+
+	useEffect(() => {
+		const fetchUsers = async () => {
+			const res = await adminFetcher("/users")
+			const data = await res.json()
+			setUsers(data)
+		}
+		fetchUsers()
+	}, [])
+
+	const toggleRole = async (id: string, role: "admin" | "user") => {
+		const res = await adminFetcher("/users/toggle-role", {
+			method: "POST",
+			body: { id, role }
+		})
+
+		const json = await res.json()
+
+		if (res.status === 200) {
+			setToast({
+				text: "Role updated",
+				type: "success"
+			})
+
+			setUsers((users) => {
+				const newUsers = users?.map((user) => {
+					if (user.id === id) {
+						return {
+							...user,
+							role
+						}
+					}
+					return user
+				})
+				return newUsers
+			})
+		} else {
+			setToast({
+				text: json.error || "Something went wrong",
+				type: "error"
+			})
+		}
+	}
+
+	const deleteUser = async (id: string) => {
+		const confirm = window.confirm("Are you sure you want to delete this user?")
+		if (!confirm) return
+		const res = await adminFetcher(`/users/${id}`, {
+			method: "DELETE"
+		})
+
+		const json = await res.json()
+
+		if (res.status === 200) {
+			setToast({
+				text: "User deleted",
+				type: "success"
+			})
+		} else {
+			setToast({
+				text: json.error || "Something went wrong",
+				type: "error"
+			})
+		}
+	}
+
+	const tableUsers = useMemo(
+		() =>
+			users?.map((user) => {
+				return {
+					id: user.id,
+					username: user.username,
+					posts: user.posts?.length || 0,
+					createdAt: `${new Date(
+						user.createdAt
+					).toLocaleDateString()} ${new Date(
+						user.createdAt
+					).toLocaleTimeString()}`,
+					role: user.role,
+					actions: ""
+				}
+			}),
+		[users]
+	)
+
+	const usernameColumns = [
+		{
+			title: "Username",
+			dataIndex: "username",
+			key: "username",
+			width: 50
+		},
+		{
+			title: "Posts",
+			dataIndex: "posts",
+			key: "posts",
+			width: 10
+		},
+		{
+			title: "Created",
+			dataIndex: "createdAt",
+			key: "createdAt",
+			width: 100
+		},
+		{
+			title: "Role",
+			dataIndex: "role",
+			key: "role",
+			width: 50
+		},
+		{
+			title: "Actions",
+			dataIndex: "",
+			key: "actions",
+			width: 50,
+			render(user: User) {
+				return (
+					<ActionDropdown
+						title="Actions"
+						actions={[
+							{
+								title: user.role === "admin" ? "Change role" : "Make admin",
+								onClick: () =>
+									toggleRole(user.id, user.role === "admin" ? "user" : "admin")
+							},
+							{
+								title: "Delete",
+								onClick: () => deleteUser(user.id)
+							}
+						]}
+					/>
+				)
+			}
+		}
+	]
+
+	return (
+		<SettingsGroup title="Users">
+			{!users && <Fieldset.Subtitle>Loading...</Fieldset.Subtitle>}
+			{users && (
+				<Fieldset.Subtitle>
+					<h5>{users.length} users</h5>
+				</Fieldset.Subtitle>
+			)}
+			{users && <Table columns={usernameColumns} data={tableUsers} />}
+		</SettingsGroup>
+	)
+}
+
+export default UserTable

client/components/app/index.tsx

@@ -0,0 +1,66 @@
+import Header from "@components/header"
+import { GeistProvider, CssBaseline, Themes, Page } from "@geist-ui/core"
+import type { NextComponentType, NextPageContext } from "next"
+import { SkeletonTheme } from "react-loading-skeleton"
+
+const App = ({
+	Component,
+	pageProps
+}: {
+	Component: NextComponentType<NextPageContext, any, any>
+	pageProps: any
+}) => {
+	const skeletonBaseColor = "var(--light-gray)"
+	const skeletonHighlightColor = "var(--lighter-gray)"
+
+	const customTheme = Themes.createFromLight({
+		type: "custom",
+		palette: {
+			background: "var(--bg)",
+			foreground: "var(--fg)",
+			accents_1: "var(--lightest-gray)",
+			accents_2: "var(--lighter-gray)",
+			accents_3: "var(--light-gray)",
+			accents_4: "var(--gray)",
+			accents_5: "var(--darker-gray)",
+			accents_6: "var(--darker-gray)",
+			accents_7: "var(--darkest-gray)",
+			accents_8: "var(--darkest-gray)",
+			border: "var(--light-gray)",
+			warning: "var(--warning)"
+		},
+		expressiveness: {
+			dropdownBoxShadow: "0 0 0 1px var(--light-gray)",
+			shadowSmall: "0 0 0 1px var(--light-gray)",
+			shadowLarge: "0 0 0 1px var(--light-gray)",
+			shadowMedium: "0 0 0 1px var(--light-gray)"
+		},
+		layout: {
+			gap: "var(--gap)",
+			gapHalf: "var(--gap-half)",
+			gapQuarter: "var(--gap-quarter)",
+			gapNegative: "var(--gap-negative)",
+			gapHalfNegative: "var(--gap-half-negative)",
+			gapQuarterNegative: "var(--gap-quarter-negative)",
+			radius: "var(--radius)"
+		},
+		font: {
+			mono: "var(--font-mono)",
+			sans: "var(--font-sans)"
+		}
+	})
+	return (
+		<GeistProvider themes={[customTheme]} themeType={"custom"}>
+			<SkeletonTheme
+				baseColor={skeletonBaseColor}
+				highlightColor={skeletonHighlightColor}
+			>
+				<CssBaseline />
+				<Header />
+				<Component {...pageProps} />
+			</SkeletonTheme>
+		</GeistProvider>
+	)
+}
+
+export default App

client/components/auth/auth.module.css

@@ -0,0 +1,22 @@
+.container {
+	padding: 2rem 2rem;
+	border-radius: var(--radius);
+	box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+}
+
+.form {
+	display: grid;
+	place-items: center;
+}
+
+.formGroup {
+	display: flex;
+	flex-direction: column;
+	place-items: center;
+	gap: 10px;
+}
+
+.formContentSpace {
+	margin-bottom: 1rem;
+	text-align: center;
+}

client/components/auth/index.tsx

@@ -0,0 +1,155 @@
+import { FormEvent, useEffect, useState } from "react"
+import styles from "./auth.module.css"
+import { useRouter } from "next/router"
+import Link from "../link"
+import Cookies from "js-cookie"
+import useSignedIn from "@lib/hooks/use-signed-in"
+import Input from "@components/input"
+import Button from "@components/button"
+import Note from "@components/note"
+
+const NO_EMPTY_SPACE_REGEX = /^\S*$/
+const ERROR_MESSAGE =
+	"Provide a non empty username and a password with at least 6 characters"
+
+const Auth = ({ page }: { page: "signup" | "signin" }) => {
+	const router = useRouter()
+
+	const [username, setUsername] = useState("")
+	const [password, setPassword] = useState("")
+	const [serverPassword, setServerPassword] = useState("")
+	const [errorMsg, setErrorMsg] = useState("")
+	const [requiresServerPassword, setRequiresServerPassword] = useState(false)
+	const signingIn = page === "signin"
+	const { signin } = useSignedIn()
+	useEffect(() => {
+		async function fetchRequiresPass() {
+			if (!signingIn) {
+				const resp = await fetch("/server-api/auth/requires-passcode", {
+					method: "GET"
+				})
+				if (resp.ok) {
+					const res = await resp.json()
+					setRequiresServerPassword(res.requiresPasscode)
+				} else {
+					setErrorMsg("Something went wrong. Is the server running?")
+				}
+			}
+		}
+		fetchRequiresPass()
+	}, [page, signingIn])
+
+	const handleJson = (json: any) => {
+		signin(json.token)
+		Cookies.set("drift-userid", json.userId)
+
+		router.push("/new")
+	}
+
+	const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+		e.preventDefault()
+		if (
+			!signingIn &&
+			(!NO_EMPTY_SPACE_REGEX.test(username) || password.length < 6)
+		)
+			return setErrorMsg(ERROR_MESSAGE)
+		if (
+			!signingIn &&
+			requiresServerPassword &&
+			!NO_EMPTY_SPACE_REGEX.test(serverPassword)
+		)
+			return setErrorMsg(ERROR_MESSAGE)
+		else setErrorMsg("")
+
+		const reqOpts = {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json"
+			},
+			body: JSON.stringify({ username, password, serverPassword })
+		}
+
+		try {
+			const signUrl = signingIn
+				? "/server-api/auth/signin"
+				: "/server-api/auth/signup"
+			const resp = await fetch(signUrl, reqOpts)
+			const json = await resp.json()
+			if (!resp.ok) throw new Error(json.error.message)
+
+			handleJson(json)
+		} catch (err: any) {
+			setErrorMsg(err.message ?? "Something went wrong")
+		}
+	}
+
+	return (
+		<div className={styles.container}>
+			<div className={styles.form}>
+				<div className={styles.formContentSpace}>
+					<h1>{signingIn ? "Sign In" : "Sign Up"}</h1>
+				</div>
+				<form onSubmit={handleSubmit}>
+					<div className={styles.formGroup}>
+						<Input
+							type="text"
+							id="username"
+							value={username}
+							onChange={(event) => setUsername(event.currentTarget.value)}
+							placeholder="Username"
+							required
+						/>
+						<Input
+							type="password"
+							id="password"
+							value={password}
+							onChange={(event) => setPassword(event.currentTarget.value)}
+							placeholder="Password"
+							required
+						/>
+						{requiresServerPassword && (
+							<Input
+								type="password"
+								id="server-password"
+								value={serverPassword}
+								onChange={(event) =>
+									setServerPassword(event.currentTarget.value)
+								}
+								placeholder="Server Password"
+								required
+							/>
+						)}
+
+						<Button buttonType="primary" type="submit">
+							{signingIn ? "Sign In" : "Sign Up"}
+						</Button>
+					</div>
+					<div className={styles.formContentSpace}>
+						{signingIn ? (
+							<p>
+								Don&apos;t have an account?{" "}
+								<Link colored href="/signup">
+									Sign up
+								</Link>
+							</p>
+						) : (
+							<p>
+								Already have an account?{" "}
+								<Link colored href="/signin">
+									Sign in
+								</Link>
+							</p>
+						)}
+					</div>
+					{errorMsg && (
+						<Note type="error">
+							{errorMsg}
+						</Note>
+					)}
+				</form>
+			</div>
+		</div>
+	)
+}
+
+export default Auth

client/components/badges/created-ago-badge/index.tsx

@@ -0,0 +1,27 @@
+import { Badge, Tooltip } from "@geist-ui/core"
+import { timeAgo } from "@lib/time-ago"
+import { useMemo, useState, useEffect } from "react"
+
+const CreatedAgoBadge = ({ createdAt }: { createdAt: string | Date }) => {
+	const createdDate = useMemo(() => new Date(createdAt), [createdAt])
+	const [time, setTimeAgo] = useState(timeAgo(createdDate))
+
+	useEffect(() => {
+		const interval = setInterval(() => {
+			setTimeAgo(timeAgo(createdDate))
+		}, 1000)
+		return () => clearInterval(interval)
+	}, [createdDate])
+
+	const formattedTime = `${createdDate.toLocaleDateString()} ${createdDate.toLocaleTimeString()}`
+	return (
+		<Badge type="secondary">
+			{" "}
+			<Tooltip hideArrow text={formattedTime}>
+				Created {time}
+			</Tooltip>
+		</Badge>
+	)
+}
+
+export default CreatedAgoBadge

client/components/badges/expiration-badge/index.tsx

@@ -0,0 +1,66 @@
+import { Badge, Tooltip } from "@geist-ui/core"
+import { timeUntil } from "@lib/time-ago"
+import { useCallback, useEffect, useMemo, useState } from "react"
+
+const ExpirationBadge = ({
+	postExpirationDate
+}: // onExpires
+{
+	postExpirationDate: Date | string | null
+	onExpires?: () => void
+}) => {
+	const expirationDate = useMemo(
+		() => (postExpirationDate ? new Date(postExpirationDate) : null),
+		[postExpirationDate]
+	)
+	const [timeUntilString, setTimeUntil] = useState<string | null>(
+		expirationDate ? timeUntil(expirationDate) : null
+	)
+
+	useEffect(() => {
+		let interval: NodeJS.Timer | null = null
+		if (expirationDate) {
+			interval = setInterval(() => {
+				if (expirationDate) {
+					setTimeUntil(timeUntil(expirationDate))
+				}
+			}, 1000)
+		}
+
+		return () => {
+			if (interval) {
+				clearInterval(interval)
+			}
+		}
+	}, [expirationDate])
+
+	const isExpired = useMemo(() => {
+		return timeUntilString && timeUntilString === "in 0 seconds"
+	}, [timeUntilString])
+
+	// useEffect(() => {
+	//     // check if expired every
+	//     if (isExpired) {
+	//         if (onExpires) {
+	//             onExpires();
+	//         }
+	//     }
+	// }, [isExpired, onExpires])
+
+	if (!expirationDate) {
+		return null
+	}
+
+	return (
+		<Badge type={isExpired ? "error" : "warning"}>
+			<Tooltip
+				hideArrow
+				text={`${expirationDate.toLocaleDateString()} ${expirationDate.toLocaleTimeString()}`}
+			>
+				{isExpired ? "Expired" : `Expires ${timeUntilString}`}
+			</Tooltip>
+		</Badge>
+	)
+}
+
+export default ExpirationBadge

client/components/badges/visibility-badge/index.tsx

@@ -0,0 +1,23 @@
+import { Badge } from "@geist-ui/core"
+import type { PostVisibility } from "@lib/types"
+
+type Props = {
+	visibility: PostVisibility
+}
+
+const VisibilityBadge = ({ visibility }: Props) => {
+	const getBadgeType = () => {
+		switch (visibility) {
+			case "public":
+				return "success"
+			case "private":
+				return "warning"
+			case "unlisted":
+				return "default"
+		}
+	}
+
+	return <Badge type={getBadgeType()}>{visibility}</Badge>
+}
+
+export default VisibilityBadge

client/components/badges/visibility-control/index.tsx

@@ -0,0 +1,111 @@
+import PasswordModal from "@components/new-post/password-modal"
+import { Button, ButtonGroup, Loading, useToasts } from "@geist-ui/core"
+import type { PostVisibility } from "@lib/types"
+import Cookies from "js-cookie"
+import { useCallback, useState } from "react"
+
+type Props = {
+	postId: string
+	visibility: PostVisibility
+	setVisibility: (visibility: PostVisibility) => void
+}
+
+const VisibilityControl = ({ postId, visibility, setVisibility }: Props) => {
+	const [isSubmitting, setSubmitting] = useState(false)
+	const [passwordModalVisible, setPasswordModalVisible] = useState(false)
+	const { setToast } = useToasts()
+
+	const sendRequest = useCallback(
+		async (visibility: PostVisibility, password?: string) => {
+			const res = await fetch(`/server-api/posts/${postId}`, {
+				method: "PUT",
+				headers: {
+					"Content-Type": "application/json",
+					Authorization: `Bearer ${Cookies.get("drift-token")}`
+				},
+				body: JSON.stringify({ visibility, password })
+			})
+
+			if (res.ok) {
+				const json = await res.json()
+				setVisibility(json.visibility)
+			} else {
+				const json = await res.json()
+				setToast({
+					text: json.error.message,
+					type: "error"
+				})
+				setPasswordModalVisible(false)
+			}
+		},
+		[postId, setToast, setVisibility]
+	)
+
+	const onSubmit = useCallback(
+		async (visibility: PostVisibility, password?: string) => {
+			if (visibility === "protected" && !password) {
+				setPasswordModalVisible(true)
+				return
+			}
+			setPasswordModalVisible(false)
+			const timeout = setTimeout(() => setSubmitting(true), 100)
+
+			await sendRequest(visibility, password)
+			clearTimeout(timeout)
+			setSubmitting(false)
+		},
+		[sendRequest]
+	)
+
+	const onClosePasswordModal = () => {
+		setPasswordModalVisible(false)
+		setSubmitting(false)
+	}
+
+	const submitPassword = useCallback(
+		(password: string) => onSubmit("protected", password),
+		[onSubmit]
+	)
+
+	return (
+		<>
+			{isSubmitting ? (
+				<Loading />
+			) : (
+				<ButtonGroup margin={0}>
+					<Button
+						disabled={visibility === "private"}
+						onClick={() => onSubmit("private")}
+					>
+						Make private
+					</Button>
+					<Button
+						disabled={visibility === "public"}
+						onClick={() => onSubmit("public")}
+					>
+						Make Public
+					</Button>
+					<Button
+						disabled={visibility === "unlisted"}
+						onClick={() => onSubmit("unlisted")}
+					>
+						Unlist
+					</Button>
+					<Button onClick={() => onSubmit("protected")}>
+						{visibility === "protected"
+							? "Change Password"
+							: "Protect with password"}
+					</Button>
+				</ButtonGroup>
+			)}
+			<PasswordModal
+				creating={true}
+				isOpen={passwordModalVisible}
+				onClose={onClosePasswordModal}
+				onSubmit={submitPassword}
+			/>
+		</>
+	)
+}
+
+export default VisibilityControl

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

@@ -0,0 +1,26 @@
+.main {
+  margin-bottom: 2rem;
+}
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  cursor: pointer;
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+.dropdownContent {
+  background-clip: padding-box;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 0.25rem;
+  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

client/components/button-dropdown/index.tsx

@@ -0,0 +1,116 @@
+import Button from "@components/button"
+import React, { useCallback, useEffect } from "react"
+import { useState } from "react"
+import styles from "./dropdown.module.css"
+import DownIcon from "@geist-ui/icons/arrowDown"
+type Props = {
+	type?: "primary" | "secondary"
+	loading?: boolean
+	disabled?: boolean
+	className?: string
+	iconHeight?: number
+}
+
+type Attrs = Omit<React.HTMLAttributes<any>, keyof Props>
+type ButtonDropdownProps = Props & Attrs
+
+const ButtonDropdown: React.FC<
+	React.PropsWithChildren<ButtonDropdownProps>
+> = ({ type, className, disabled, loading, iconHeight = 24, ...props }) => {
+	const [visible, setVisible] = useState(false)
+	const [dropdown, setDropdown] = useState<HTMLDivElement | null>(null)
+
+	const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+		e.stopPropagation()
+		e.nativeEvent.stopImmediatePropagation()
+		setVisible(!visible)
+	}
+
+	const onBlur = () => {
+		setVisible(false)
+	}
+
+	const onMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+		e.stopPropagation()
+		e.nativeEvent.stopImmediatePropagation()
+	}
+
+	const onMouseUp = (e: React.MouseEvent<HTMLDivElement>) => {
+		e.stopPropagation()
+		e.nativeEvent.stopImmediatePropagation()
+	}
+
+	const onMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {
+		e.stopPropagation()
+		e.nativeEvent.stopImmediatePropagation()
+		setVisible(false)
+	}
+
+	const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+		if (e.key === "Escape") {
+			setVisible(false)
+		}
+	}
+
+	const onClickOutside = useCallback(
+		() => (e: React.MouseEvent<HTMLDivElement>) => {
+			if (dropdown && !dropdown.contains(e.target as Node)) {
+				setVisible(false)
+			}
+		},
+		[dropdown]
+	)
+
+	useEffect(() => {
+		if (visible) {
+			document.addEventListener("mousedown", onClickOutside)
+		} else {
+			document.removeEventListener("mousedown", onClickOutside)
+		}
+
+		return () => {
+			document.removeEventListener("mousedown", onClickOutside)
+		}
+	}, [visible, onClickOutside])
+
+	if (!Array.isArray(props.children)) {
+		return null
+	}
+
+	return (
+		<div
+			className={`${styles.main} ${className}`}
+			onMouseDown={onMouseDown}
+			onMouseUp={onMouseUp}
+			onMouseLeave={onMouseLeave}
+			onKeyDown={onKeyDown}
+			onBlur={onBlur}
+		>
+			<div
+				style={{
+					display: "flex",
+					flexDirection: "row",
+					justifyContent: "flex-end"
+				}}
+			>
+				{props.children[0]}
+				<Button
+					style={{ height: iconHeight, width: iconHeight }}
+					className={styles.icon}
+					onClick={() => setVisible(!visible)}
+				>
+					<DownIcon />
+				</Button>
+			</div>
+			{visible && (
+				<div className={`${styles.dropdown}`}>
+					<div className={`${styles.dropdownContent}`}>
+						{props.children.slice(1)}
+					</div>
+				</div>
+			)}
+		</div>
+	)
+}
+
+export default ButtonDropdown

client/components/button/button.module.css

@@ -0,0 +1,53 @@
+.button:root {
+	--hover: var(--bg);
+	--hover-bg: var(--fg);
+}
+
+.button {
+	user-select: none;
+	cursor: pointer;
+	border-radius: var(--radius);
+	border: 1px solid var(--border);
+	padding: var(--gap-half) var(--gap);
+}
+
+.button:hover,
+.button:focus {
+	outline: none;
+	color: var(--hover);
+	background: var(--hover-bg);
+	border: var(--);
+}
+
+.button[disabled] {
+	cursor: not-allowed;
+	background: var(--lighter-gray);
+	color: var(--gray);
+}
+
+.secondary {
+	background: var(--bg);
+	color: var(--fg);
+}
+
+.primary {
+	background: var(--fg);
+	color: var(--bg);
+}
+
+.icon {
+	display: inline-block;
+	width: 1em;
+	height: 1em;
+	vertical-align: middle;
+}
+
+.iconRight {
+	margin-left: var(--gap-half);
+}
+
+.icon svg {
+	display: block;
+	width: 100%;
+	height: 100%;
+}

client/components/button/index.tsx

@@ -0,0 +1,46 @@
+import styles from "./button.module.css"
+import { forwardRef, Ref } from "react"
+
+type Props = React.HTMLProps<HTMLButtonElement> & {
+	children: React.ReactNode
+	buttonType?: "primary" | "secondary"
+	className?: string
+	onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
+	iconRight?: React.ReactNode
+}
+
+// eslint-disable-next-line react/display-name
+const Button = forwardRef<HTMLButtonElement, Props>(
+	(
+		{
+			children,
+			onClick,
+			className,
+			buttonType = "primary",
+			type = "button",
+			disabled = false,
+			iconRight,
+			...props
+		},
+		ref
+	) => {
+		return (
+			<button
+				ref={ref}
+				className={`${styles.button} ${styles[type]} ${className}`}
+				disabled={disabled}
+				onClick={onClick}
+				{...props}
+			>
+				{children}
+				{iconRight && (
+					<span className={`${styles.icon} ${styles.iconRight}`}>
+						{iconRight}
+					</span>
+				)}
+			</button>
+		)
+	}
+)
+
+export default Button

client/components/edit-document-list/index.tsx

@@ -1,8 +1,8 @@
-import type { Document } from "../new"
-import DocumentComponent from "./edit-document"
-import { ChangeEvent, useCallback, ClipboardEvent } from "react"
+import type { Document } from "@lib/types"
+import DocumentComponent from "@components/edit-document"
+import { ChangeEvent, memo, useCallback } from "react"
 
-function DocumentList({
+const DocumentList = ({
 	docs,
 	removeDoc,
 	updateDocContent,
@@ -13,8 +13,8 @@ function DocumentList({
 	updateDocTitle: (i: number) => (title: string) => void
 	updateDocContent: (i: number) => (content: string) => void
 	removeDoc: (i: number) => () => void
-	onPaste?: (e: ClipboardEvent<HTMLTextAreaElement>) => void
-}) {
+	onPaste: (e: any) => void
+}) => {
 	const handleOnChange = useCallback(
 		(i: number) => (e: ChangeEvent<HTMLTextAreaElement>) => {
 			updateDocContent(i)(e.target.value)
@@ -41,4 +41,4 @@ function DocumentList({
 	)
 }
 
-export default DocumentList
+export default memo(DocumentList)

client/components/edit-document/document.module.css

@@ -0,0 +1,47 @@
+.card {
+	margin: var(--gap) auto;
+	padding: var(--gap);
+	border: 1px solid var(--light-gray);
+	border-radius: var(--radius);
+}
+
+.input {
+	background: #efefef;
+}
+
+.descriptionContainer {
+	display: flex;
+	flex-direction: column;
+	min-height: 400px;
+	overflow: auto;
+}
+
+.fileNameContainer {
+	display: flex;
+}
+
+.fileNameContainer > div {
+	/* Override geist-ui styling */
+	margin: 0 !important;
+}
+
+.textarea {
+	height: 100%;
+}
+
+.actionWrapper {
+	position: relative;
+	z-index: 1;
+}
+
+.actionWrapper .actions {
+	position: absolute;
+	right: 0;
+}
+
+@media (max-width: 768px) {
+	.actionWrapper .actions {
+		position: relative;
+		margin-left: 0 !important;
+	}
+}

client/components/edit-document/formatting-icons/index.tsx

@@ -1,27 +1,22 @@
-import {
-	Bold,
-	Code,
-	Image as ImageIcon,
-	Italic,
-	Link,
-	List
-} from "react-feather"
+import Bold from "@geist-ui/icons/bold"
+import Italic from "@geist-ui/icons/italic"
+import Link from "@geist-ui/icons/link"
+import Code from "@geist-ui/icons/code"
+import List from "@geist-ui/icons/list"
+
+import ImageIcon from "@geist-ui/icons/image"
 import { RefObject, useMemo } from "react"
-import styles from "./formatting-icons.module.css"
+import styles from "../document.module.css"
+import { Button, ButtonGroup, Tooltip } from "@geist-ui/core"
 import { TextareaMarkdownRef } from "textarea-markdown-editor"
-import { Tooltip } from "@components/tooltip"
-import { Button } from "@components/button"
-import clsx from "clsx"
-import React from "react"
+
 // TODO: clean up
 
-function FormattingIcons({
-	textareaRef,
-	className
+const FormattingIcons = ({
+	textareaRef
 }: {
 	textareaRef?: RefObject<TextareaMarkdownRef>
-	className?: string
-}) {
+}) => {
 	const formattingActions = useMemo(() => {
 		const handleBoldClick = () => textareaRef?.current?.trigger("bold")
 		const handleItalicClick = () => textareaRef?.current?.trigger("italic")
@@ -65,25 +60,25 @@ function FormattingIcons({
 	}, [textareaRef])
 
 	return (
-		<div className={clsx(styles.actionWrapper, className)}>
+		<div className={styles.actionWrapper}>
+			<ButtonGroup className={styles.actions}>
 				{formattingActions.map(({ icon, name, action }) => (
 					<Tooltip
-					content={name[0].toUpperCase() + name.slice(1).replace("-", " ")}
+						text={name[0].toUpperCase() + name.slice(1).replace("-", " ")}
 						key={name}
-					delayDuration={100}
 					>
 						<Button
+							auto
+							scale={2 / 3}
+							px={0.6}
 							aria-label={name}
+							icon={icon}
 							onMouseDown={(e) => e.preventDefault()}
 							onClick={action}
-						variant="ghost"
-					>
-						{React.cloneElement(icon, {
-							className: "h-4 w-4"
-						})}
-					</Button>
+						/>
 					</Tooltip>
 				))}
+			</ButtonGroup>
 		</div>
 	)
 }

client/components/edit-document/index.tsx

@@ -0,0 +1,162 @@
+import {
+	ChangeEvent,
+	memo,
+	useCallback,
+	useMemo,
+	useRef,
+	useState
+} from "react"
+import styles from "./document.module.css"
+import Trash from "@geist-ui/icons/trash"
+import FormattingIcons from "./formatting-icons"
+import TextareaMarkdown, { TextareaMarkdownRef } from "textarea-markdown-editor"
+
+import { Button, Input, Spacer, Tabs, Textarea } from "@geist-ui/core"
+import Preview from "@components/preview"
+
+// import Link from "next/link"
+type Props = {
+	title?: string
+	content?: string
+	setTitle?: (title: string) => void
+	handleOnContentChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void
+	initialTab?: "edit" | "preview"
+	remove?: () => void
+	onPaste?: (e: any) => void
+}
+
+const Document = ({
+	onPaste,
+	remove,
+	title,
+	content,
+	setTitle,
+	initialTab = "edit",
+	handleOnContentChange
+}: Props) => {
+	const codeEditorRef = useRef<TextareaMarkdownRef>(null)
+	const [tab, setTab] = useState(initialTab)
+	// const height = editable ? "500px" : '100%'
+	const height = "100%"
+
+	const handleTabChange = (newTab: string) => {
+		if (newTab === "edit") {
+			codeEditorRef.current?.focus()
+		}
+		setTab(newTab as "edit" | "preview")
+	}
+
+	const onTitleChange = useCallback(
+		(event: ChangeEvent<HTMLInputElement>) =>
+			setTitle ? setTitle(event.target.value) : null,
+		[setTitle]
+	)
+
+	const removeFile = useCallback(
+		(remove?: () => void) => {
+			if (remove) {
+				if (content && content.trim().length > 0) {
+					const confirmed = window.confirm(
+						"Are you sure you want to remove this file?"
+					)
+					if (confirmed) {
+						remove()
+					}
+				} else {
+					remove()
+				}
+			}
+		},
+		[content]
+	)
+
+	// if (skeleton) {
+	//     return <>
+	//         <Spacer height={1} />
+	//         <div className={styles.card}>
+	//             <div className={styles.fileNameContainer}>
+	//                 <Skeleton width={275} height={36} />
+	//                 {remove && <Skeleton width={36} height={36} />}
+	//             </div>
+	//             <div className={styles.descriptionContainer}>
+	//                 <div style={{ flexDirection: 'row', display: 'flex' }}><Skeleton width={125} height={36} /></div>
+	//                 <Skeleton width={'100%'} height={350} />
+	//             </div >
+	//         </div>
+	//     </>
+	// }
+
+	return (
+		<>
+			<Spacer height={1} />
+			<div className={styles.card}>
+				<div className={styles.fileNameContainer}>
+					<Input
+						placeholder="MyFile.md"
+						value={title}
+						onChange={onTitleChange}
+						marginTop="var(--gap-double)"
+						size={1.2}
+						font={1.2}
+						label="Filename"
+						width={"100%"}
+						id={title}
+					/>
+					{remove && (
+						<Button
+							type="abort"
+							ghost
+							icon={<Trash />}
+							auto
+							height={"36px"}
+							width={"36px"}
+							onClick={() => removeFile(remove)}
+						/>
+					)}
+				</div>
+				<div className={styles.descriptionContainer}>
+					{tab === "edit" && <FormattingIcons textareaRef={codeEditorRef} />}
+					<Tabs
+						onChange={handleTabChange}
+						initialValue={initialTab}
+						hideDivider
+						leftSpace={0}
+					>
+						<Tabs.Item label={"Edit"} value="edit">
+							{/* <textarea className={styles.lineCounter} wrap='off' readOnly ref={lineNumberRef}>1.</textarea> */}
+							<div
+								style={{
+									marginTop: "var(--gap-half)",
+									display: "flex",
+									flexDirection: "column"
+								}}
+							>
+								<TextareaMarkdown.Wrapper ref={codeEditorRef}>
+									<Textarea
+										onPaste={onPaste ? onPaste : undefined}
+										ref={codeEditorRef}
+										placeholder=""
+										value={content}
+										onChange={handleOnContentChange}
+										width="100%"
+										// TODO: Textarea should grow to fill parent if height == 100%
+										style={{ flex: 1, minHeight: 350 }}
+										resize="vertical"
+										className={styles.textarea}
+									/>
+								</TextareaMarkdown.Wrapper>
+							</div>
+						</Tabs.Item>
+						<Tabs.Item label="Preview" value="preview">
+							<div style={{ marginTop: "var(--gap-half)" }}>
+								<Preview height={height} title={title} content={content} />
+							</div>
+						</Tabs.Item>
+					</Tabs>
+				</div>
+			</div>
+		</>
+	)
+}
+
+export default memo(Document)

client/components/error/index.tsx

@@ -0,0 +1,17 @@
+import { Page } from "@geist-ui/core"
+
+const Error = ({ status }: { status: number }) => {
+	return (
+		<Page title={status.toString() || "Error"}>
+			{status === 404 ? (
+				<h1>This page cannot be found.</h1>
+			) : (
+				<section>
+					<p>An error occurred: {status}</p>
+				</section>
+			)}
+		</Page>
+	)
+}
+
+export default Error

client/components/fade-in/fade.module.css

@@ -0,0 +1,15 @@
+@media (prefers-reduced-motion: no-preference) {
+	.fadeIn {
+		animation-name: fadeInAnimation;
+		animation-fill-mode: backwards;
+	}
+}
+
+@keyframes fadeInAnimation {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}

client/components/fade-in/index.tsx

@@ -1,32 +1,19 @@
 // https://www.joshwcomeau.com/snippets/react-components/fade-in/
-import React from "react"
 import styles from "./fade.module.css"
 
-function FadeIn({
+const FadeIn = ({
 	duration = 300,
 	delay = 0,
 	children,
-	as,
 	...delegated
 }: {
 	duration?: number
 	delay?: number
 	children: React.ReactNode
-	as?: React.ElementType | JSX.Element
-} & React.HTMLAttributes<HTMLElement>) {
-	if (as !== null && typeof as === "object") {
-		return React.cloneElement(as, {
-			className: styles.fadeIn,
-			style: {
-				...(as.props.style || {}),
-				animationDuration: duration + "ms",
-				animationDelay: delay + "ms"
-			}
-		})
-	}
-	const Element = as || "div"
+	[key: string]: any
+}) => {
 	return (
-		<Element
+		<div
 			{...delegated}
 			className={styles.fadeIn}
 			style={{
@@ -36,7 +23,7 @@ function FadeIn({
 			}}
 		>
 			{children}
-		</Element>
+		</div>
 	)
 }
 

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

@@ -0,0 +1,72 @@
+.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: 0 0;
+}
+
+.content li:hover,
+.content li:focus {
+	background-color: var(--lighter-gray);
+}
+
+.content li a {
+	display: flex;
+	align-items: center;
+	text-align: center;
+	padding: var(--gap-half) var(--gap);
+	color: var(--dark-gray);
+}
+
+.button {
+	border-radius: none !important;
+}
+
+.content li .fileIcon {
+	display: inline-block;
+	margin-right: var(--gap-half);
+}
+
+.content li .fileTitle {
+	/* from Geist */
+	font-size: calc(0.875 * 16px);
+}
+
+.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,92 @@
+import ShiftBy from "@components/shift-by"
+import { Button, Popover } from "@geist-ui/core"
+import ChevronDown from "@geist-ui/icons/chevronDown"
+import CodeIcon from "@geist-ui/icons/fileFunction"
+import FileIcon from "@geist-ui/icons/fileText"
+import { codeFileExtensions } from "@lib/constants"
+import type { File } from "@lib/types"
+import { useCallback, useEffect, useState } from "react"
+import styles from "./dropdown.module.css"
+
+type Item = File & {
+	icon: JSX.Element
+}
+
+const FileDropdown = ({
+	files,
+	isMobile
+}: {
+	files: File[]
+	isMobile: boolean
+}) => {
+	const [expanded, setExpanded] = useState(false)
+	const [items, setItems] = useState<Item[]>([])
+	const changeHandler = (next: boolean) => {
+		setExpanded(next)
+	}
+
+	const onOpen = () => setExpanded(true)
+	const onClose = useCallback(() => setExpanded(false), [setExpanded])
+
+	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 = (
+		<ul className={styles.content}>
+			{items.map((item) => (
+				<li key={item.id} onClick={onClose}>
+					<a href={`#${item.title}`}>
+						<ShiftBy y={5}>
+							<span className={styles.fileIcon}>{item.icon}</span>
+						</ShiftBy>
+						<span className={styles.fileTitle}>
+							{item.title ? item.title : "Untitled"}
+						</span>
+					</a>
+				</li>
+			))}
+		</ul>
+	)
+
+	// a list of files with an icon and a title
+	return (
+		<>
+			<Button
+				auto
+				onClick={onOpen}
+				className={styles.button}
+				iconRight={<ChevronDown />}
+				style={{ textTransform: "none" }}
+			>
+				Jump to {files.length} {files.length === 1 ? "file" : "files"}
+			</Button>
+			<Popover
+				style={{
+					transform: isMobile ? "translateX(110px)" : "translateX(-75px)"
+				}}
+				onVisibleChange={changeHandler}
+				content={content}
+				visible={expanded}
+				hideArrow={true}
+				onClick={onClose}
+			/>
+		</>
+	)
+}
+
+export default FileDropdown

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

@@ -0,0 +1,109 @@
+.fileTreeWrapper {
+	display: block;
+	position: absolute;
+	left: 0;
+	height: 100%;
+}
+
+.fileTreeWrapper h5 {
+	text-align: center;
+}
+
+.fileTree {
+	list-style: none;
+	width: 100%;
+}
+
+.fileTree li {
+	transition: var(--transition);
+	border-radius: var(--radius);
+	margin: 0;
+	padding: var(--gap-half) 0;
+}
+
+.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);
+}
+
+.fileTree li .fileTreeIcon {
+	display: inline-block;
+	padding-right: var(--gap-half);
+	padding-left: var(--gap-half);
+}
+
+.fileTree li .fileTreeTitle {
+	font-size: 1.1rem;
+}
+
+.fileTree li::before {
+	content: "";
+	padding: 0;
+	margin: 0;
+}
+
+.card {
+	top: 0;
+	overflow-y: scroll;
+	overflow-x: hidden;
+	position: fixed;
+}
+
+.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) {
+	.fileTreeWrapper {
+		position: relative;
+		width: 100%;
+		height: auto;
+		margin-top: var(--gap);
+	}
+
+	.card {
+		position: relative;
+		padding: 0;
+	}
+
+	.cardContent {
+		margin: var(--gap);
+		padding: 0;
+	}
+
+	.fileTree {
+		width: 100%;
+	}
+
+	.fileTree li {
+		padding: 0.5rem 0;
+	}
+
+	.fileTree li .fileTreeIcon {
+		margin-right: var(--gap-half);
+	}
+
+	.fileTree li .fileTreeTitle {
+		font-size: 1.2rem;
+	}
+
+	.fileTree li::before {
+		content: "";
+		padding: 0;
+		margin: 0;
+	}
+}

client/components/file-tree/index.tsx

@@ -0,0 +1,71 @@
+import { File } from "@lib/types"
+import FileIcon from "@geist-ui/icons/fileText"
+import CodeIcon from "@geist-ui/icons/fileLambda"
+import styles from "./file-tree.module.css"
+import ShiftBy from "@components/shift-by"
+import { useEffect, useState } from "react"
+import { codeFileExtensions } from "@lib/constants"
+import Link from "@components/link"
+
+type Item = File & {
+	icon: JSX.Element
+}
+
+const Card = ({
+	children,
+	className,
+	...props
+}: {
+	children: React.ReactNode
+	className?: string
+} & React.ComponentProps<"div">) => (
+	<div className={styles.card} {...props}>
+		{children}
+	</div>
+)
+
+const FileTree = ({ files }: { files: File[] }) => {
+	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])
+
+	// a list of files with an icon and a title
+	return (
+		<div className={styles.fileTreeWrapper}>
+			<Card className={styles.card}>
+				<div className={styles.cardContent}>
+					<h4>Files</h4>
+					<ul className={styles.fileTree}>
+						{items.map(({ id, title, icon }) => (
+							<li key={id}>
+								<Link href={`#${title}`}>
+									<ShiftBy y={5}>
+										<span className={styles.fileTreeIcon}>{icon}</span>
+									</ShiftBy>
+									<span className={styles.fileTreeTitle}>{title}</span>
+								</Link>
+							</li>
+						))}
+					</ul>
+				</div>
+			</Card>
+		</div>
+	)
+}
+
+export default FileTree

client/components/head/index.tsx

@@ -0,0 +1,26 @@
+import Head from "next/head"
+import React from "react"
+
+type PageSeoProps = {
+	title?: string
+	description?: string
+	isLoading?: boolean
+	isPrivate?: boolean
+}
+
+const PageSeo = ({
+	title = "Drift",
+	description = "A self-hostable clone of GitHub Gist",
+	isPrivate = false
+}: PageSeoProps) => {
+	return (
+		<>
+			<Head>
+				<title>{title}</title>
+				{!isPrivate && <meta name="description" content={description} />}
+			</Head>
+		</>
+	)
+}
+
+export default PageSeo

client/components/header/controls.tsx

@@ -0,0 +1,46 @@
+import React, { useEffect, useState } from "react"
+import MoonIcon from "@geist-ui/icons/moon"
+import SunIcon from "@geist-ui/icons/sun"
+// import { useAllThemes, useTheme } from '@geist-ui/core'
+import styles from "./header.module.css"
+import { Select } from "@geist-ui/core"
+import { useTheme } from "next-themes"
+
+const Controls = () => {
+	const [mounted, setMounted] = useState(false)
+	const { resolvedTheme, setTheme } = useTheme()
+	useEffect(() => setMounted(true), [])
+	if (!mounted) return null
+	const switchThemes = () => {
+		if (resolvedTheme === "dark") {
+			setTheme("light")
+		} else {
+			setTheme("dark")
+		}
+	}
+
+	return (
+		<div className={styles.wrapper}>
+			<Select
+				scale={0.5}
+				h="28px"
+				pure
+				onChange={switchThemes}
+				value={resolvedTheme}
+			>
+				<Select.Option value="light">
+					<span className={styles.selectContent}>
+						<SunIcon size={14} /> Light
+					</span>
+				</Select.Option>
+				<Select.Option value="dark">
+					<span className={styles.selectContent}>
+						<MoonIcon size={14} /> Dark
+					</span>
+				</Select.Option>
+			</Select>
+		</div>
+	)
+}
+
+export default React.memo(Controls)

client/components/header/header.module.css

@@ -0,0 +1,62 @@
+.tabs {
+	justify-content: center;
+	display: flex;
+	margin: var(--gap) 0;
+}
+
+.tabs .buttons {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.tabs .buttons > button,
+.tabs .buttons > a > button {
+	border: none;
+	border-radius: 0;
+	cursor: pointer;
+}
+
+.tabs .active {
+	border-bottom: 1px solid var(--darker-gray) !important;
+}
+
+.mobile {
+	position: absolute;
+	z-index: 1;
+}
+
+.controls {
+	margin-top: var(--gap);
+	display: none !important;
+}
+
+@media only screen and (max-width: 650px) {
+	.tabs {
+		display: none;
+	}
+
+	.controls {
+		display: block !important;
+	}
+}
+
+.controls button:active,
+.controls button:focus,
+.controls button:hover {
+	outline: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.wrapper {
+	display: flex;
+	align-items: center;
+	width: min-content;
+}
+
+.selectContent {
+	width: auto;
+	height: 18px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}

client/components/header/index.tsx

@@ -0,0 +1,226 @@
+'use client';
+
+import {
+	ButtonGroup,
+	Button,
+	Page,
+	Spacer,
+	useBodyScroll,
+	useMediaQuery
+} from "@geist-ui/core"
+
+import { useCallback, useEffect, useMemo, useState } from "react"
+import styles from "./header.module.css"
+import useSignedIn from "../../lib/hooks/use-signed-in"
+
+import HomeIcon from "@geist-ui/icons/home"
+import MenuIcon from "@geist-ui/icons/menu"
+import GitHubIcon from "@geist-ui/icons/github"
+import SignOutIcon from "@geist-ui/icons/userX"
+import SignInIcon from "@geist-ui/icons/user"
+import SignUpIcon from "@geist-ui/icons/userPlus"
+import NewIcon from "@geist-ui/icons/plusCircle"
+import YourIcon from "@geist-ui/icons/list"
+import MoonIcon from "@geist-ui/icons/moon"
+import SettingsIcon from "@geist-ui/icons/settings"
+import SunIcon from "@geist-ui/icons/sun"
+import { useTheme } from "next-themes"
+import useUserData from "@lib/hooks/use-user-data"
+import Link from "next/link"
+import { useRouter } from "next/router"
+
+type Tab = {
+	name: string
+	icon: JSX.Element
+	value: string
+	onClick?: () => void
+	href?: string
+}
+
+const Header = () => {
+	const router = useRouter()
+	const [expanded, setExpanded] = useState<boolean>(false)
+	const [, setBodyHidden] = useBodyScroll(null, { scrollLayer: true })
+	const isMobile = useMediaQuery("xs", { match: "down" })
+	const { signedIn: isSignedIn } = useSignedIn()
+	const userData = useUserData()
+	const [pages, setPages] = useState<Tab[]>([])
+	const { setTheme, resolvedTheme } = useTheme()
+
+	useEffect(() => {
+		setBodyHidden(expanded)
+	}, [expanded, setBodyHidden])
+
+	useEffect(() => {
+		if (!isMobile) {
+			setExpanded(false)
+		}
+	}, [isMobile])
+
+	useEffect(() => {
+		const defaultPages: Tab[] = [
+			{
+				name: isMobile ? "GitHub" : "",
+				href: "https://github.com/maxleiter/drift",
+				icon: <GitHubIcon />,
+				value: "github"
+			},
+			{
+				name: isMobile ? "Change theme" : "",
+				onClick: function () {
+					if (typeof window !== "undefined")
+						setTheme(resolvedTheme === "light" ? "dark" : "light")
+				},
+				icon: resolvedTheme === "light" ? <MoonIcon /> : <SunIcon />,
+				value: "theme"
+			}
+		]
+
+		if (isSignedIn)
+			setPages([
+				{
+					name: "new",
+					icon: <NewIcon />,
+					value: "new",
+					href: "/new"
+				},
+				{
+					name: "yours",
+					icon: <YourIcon />,
+					value: "yours",
+					href: "/mine"
+				},
+				{
+					name: "settings",
+					icon: <SettingsIcon />,
+					value: "settings",
+					href: "/settings"
+				},
+				{
+					name: "sign out",
+					icon: <SignOutIcon />,
+					value: "signout",
+					href: "/signout"
+				},
+				...defaultPages
+			])
+		else
+			setPages([
+				{
+					name: "home",
+					icon: <HomeIcon />,
+					value: "home",
+					href: "/"
+				},
+				{
+					name: "Sign in",
+					icon: <SignInIcon />,
+					value: "signin",
+					href: "/signin"
+				},
+				{
+					name: "Sign up",
+					icon: <SignUpIcon />,
+					value: "signup",
+					href: "/signup"
+				},
+				...defaultPages
+			])
+		if (userData?.role === "admin") {
+			setPages((pages) => [
+				...pages,
+				{
+					name: "admin",
+					icon: <SettingsIcon />,
+					value: "admin",
+					href: "/admin"
+				}
+			])
+		}
+		// TODO: investigate deps causing infinite loop
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [isMobile, isSignedIn, resolvedTheme, userData])
+
+	const onTabChange = useCallback(
+		(tab: string) => {
+			if (typeof window === "undefined") return
+			const match = pages.find((page) => page.value === tab)
+			if (match?.onClick) {
+				match.onClick()
+			}
+		},
+		[pages]
+	)
+
+	const getButton = useCallback(
+		(tab: Tab) => {
+			const activeStyle = router.pathname === tab.href ? styles.active : ""
+			if (tab.onClick) {
+				return (
+					<Button
+						auto={isMobile ? false : true}
+						key={tab.value}
+						icon={tab.icon}
+						onClick={() => onTabChange(tab.value)}
+						className={`${styles.tab} ${activeStyle}`}
+						shadow={false}
+					>
+						{tab.name ? tab.name : undefined}
+					</Button>
+				)
+			} else if (tab.href) {
+				return (
+                    (<Link key={tab.value} href={tab.href} className={styles.tab}>
+                        <Button
+                            className={activeStyle}
+                            auto={isMobile ? false : true}
+                            icon={tab.icon}
+                            shadow={false}
+                        >
+                            {tab.name ? tab.name : undefined}
+                        </Button>
+
+                    </Link>)
+                );
+			}
+		},
+		[isMobile, onTabChange, router.pathname]
+	)
+
+	const buttons = useMemo(() => pages.map(getButton), [pages, getButton])
+
+	return (
+		<Page.Header>
+			<div className={styles.tabs}>
+				<div className={styles.buttons}>{buttons}</div>
+			</div>
+			<div className={styles.controls}>
+				<Button
+					effect={false}
+					auto
+					type="abort"
+					onClick={() => setExpanded(!expanded)}
+					aria-label="Menu"
+				>
+					<Spacer height={5 / 6} width={0} />
+					<MenuIcon />
+				</Button>
+			</div>
+			{/* setExpanded should occur elsewhere; we don't want to close if they change themes */}
+			{isMobile && expanded && (
+				<div className={styles.mobile} onClick={() => setExpanded(!expanded)}>
+					<ButtonGroup
+						vertical
+						style={{
+							background: "var(--bg)"
+						}}
+					>
+						{buttons}
+					</ButtonGroup>
+				</div>
+			)}
+		</Page.Header>
+	)
+}
+
+export default Header

client/components/home/home.module.css

@@ -0,0 +1,3 @@
+.textarea {
+	height: 100%;
+}

client/components/home/index.tsx

@@ -0,0 +1,72 @@
+import ShiftBy from "@components/shift-by"
+import { Spacer, Tabs, Card, Textarea, Text } from "@geist-ui/core"
+import Image from "next/image"
+import styles from "./home.module.css"
+import markdownStyles from "@components/preview/preview.module.css"
+const Home = ({
+	introTitle,
+	introContent,
+	rendered
+}: {
+	introTitle: string
+	introContent: string
+	rendered: string
+}) => {
+	return (
+		<>
+			<div
+				style={{ display: "flex", flexDirection: "row", alignItems: "center" }}
+			>
+				<ShiftBy y={-2}>
+					<Image
+						src={"/assets/logo-optimized.svg"}
+						width={48}
+						height={48}
+						alt=""
+					/>
+				</ShiftBy>
+				<Spacer />
+				<Text style={{ display: "inline" }} h1>
+					{introTitle}
+				</Text>
+			</div>
+			<Card>
+				<Tabs initialValue={"preview"} hideDivider leftSpace={0}>
+					<Tabs.Item label={"Raw"} value="edit">
+						{/* <textarea className={styles.lineCounter} wrap='off' readOnly ref={lineNumberRef}>1.</textarea> */}
+						<div
+							style={{
+								marginTop: "var(--gap-half)",
+								display: "flex",
+								flexDirection: "column"
+							}}
+						>
+							<Textarea
+								readOnly
+								value={introContent}
+								width="100%"
+								// TODO: Textarea should grow to fill parent if height == 100%
+								style={{ flex: 1, minHeight: 350 }}
+								resize="vertical"
+								className={styles.textarea}
+							/>
+						</div>
+					</Tabs.Item>
+					<Tabs.Item label="Preview" value="preview">
+						<div style={{ marginTop: "var(--gap-half)" }}>
+							<article
+								className={markdownStyles.markdownPreview}
+								dangerouslySetInnerHTML={{ __html: rendered }}
+								style={{
+									height: "100%"
+								}}
+							/>
+						</div>
+					</Tabs.Item>
+				</Tabs>
+			</Card>
+		</>
+	)
+}
+
+export default Home

client/components/input/index.tsx

@@ -0,0 +1,25 @@
+import React from "react"
+import styles from "./input.module.css"
+
+type Props = React.HTMLProps<HTMLInputElement> & {
+	label?: string
+	fontSize?: number | string
+}
+
+// eslint-disable-next-line react/display-name
+const Input = React.forwardRef<HTMLInputElement, Props>(
+	({ label, className, ...props }, ref) => {
+		return (
+			<div className={styles.wrapper}>
+				{label && <label className={styles.label}>{label}</label>}
+				<input
+					ref={ref}
+					className={className ? `${styles.input} ${className}` : styles.input}
+					{...props}
+				/>
+			</div>
+		)
+	}
+)
+
+export default Input

client/components/input/input.module.css

@@ -0,0 +1,57 @@
+.wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  font-size: 1rem;
+}
+
+.input {
+  height: 2.5rem;
+  border-radius: var(--inline-radius);
+  background: var(--bg);
+  color: var(--fg);
+  border: 1px solid var(--light-gray);
+  padding: 0 var(--gap-half);
+  outline: none;
+  transition: border-color var(--transition);
+  display: flex;
+  justify-content: center;
+  margin: 0;
+  width: 100%;
+}
+
+.input::placeholder {
+  font-size: 1rem;
+}
+
+.input:focus {
+  border-color: var(--input-border-focus);
+}
+
+.label {
+  display: inline-flex;
+  width: initial;
+  height: 100%;
+  align-items: center;
+  pointer-events: none;
+  margin: 0;
+  padding: 0 var(--gap-half);
+  color: var(--fg);
+  background-color: var(--light-gray);
+  border-top-left-radius: var(--radius);
+  border-bottom-left-radius: var(--radius);
+  border-top: 1px solid var(--input-border);
+  border-left: 1px solid var(--input-border);
+  border-bottom: 1px solid var(--input-border);
+  font-size: inherit;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+@media screen and (max-width: 768px) {
+  .wrapper {
+    margin-bottom: var(--gap);
+  }
+}

client/components/link/index.tsx

@@ -0,0 +1,26 @@
+import { useRouter } from "next/router"
+import NextLink from "next/link"
+import styles from "./link.module.css"
+
+type LinkProps = {
+	href: string,
+	colored?: boolean,
+	children: React.ReactNode
+} & React.ComponentProps<typeof NextLink>
+
+const Link = ({ href, colored, children, ...props }: LinkProps) => {
+	const { basePath } = useRouter()
+	const propHrefWithoutLeadingSlash =
+		href && href.startsWith("/") ? href.substring(1) : href
+
+	const url = basePath ? `${basePath}/${propHrefWithoutLeadingSlash}` : href
+
+	const className = colored ? `${styles.link} ${styles.color}` : styles.link
+	return (
+		<NextLink {...props} href={url} className={className}>
+			{children}
+		</NextLink>
+	)
+}
+
+export default Link

client/components/my-posts/index.tsx

@@ -0,0 +1,16 @@
+import type { Post } from "@lib/types"
+import PostList from "../post-list"
+
+const MyPosts = ({
+	posts,
+	error,
+	morePosts
+}: {
+	posts: Post[]
+	error: boolean
+	morePosts: boolean
+}) => {
+	return <PostList morePosts={morePosts} initialPosts={posts} error={error} />
+}
+
+export default MyPosts

client/components/new-post/description/index.tsx

@@ -0,0 +1,26 @@
+import { ChangeEvent, memo } from "react"
+import { Input } from "@geist-ui/core"
+
+import styles from "../post.module.css"
+
+type props = {
+	onChange: (e: ChangeEvent<HTMLInputElement>) => void
+	description?: string
+}
+
+const Description = ({ onChange, description }: props) => {
+	return (
+		<div className={styles.description}>
+			<Input
+				value={description}
+				onChange={onChange}
+				label="Description"
+				maxLength={256}
+				width="100%"
+				placeholder="A short description of your post"
+			/>
+		</div>
+	)
+}
+
+export default memo(Description)

client/components/new-post/drag-and-drop/drag-and-drop.module.css

@@ -0,0 +1,41 @@
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+.container ul {
+  margin: 0;
+  margin-top: var(--gap-double);
+}
+
+.dropzone {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+  border-width: 2px;
+  border-radius: 2px;
+  border-style: dashed;
+  outline: none;
+  transition: all 0.24s ease-in-out;
+  cursor: pointer;
+}
+
+.dropzone:focus {
+  box-shadow: 0 0 4px 1px rgba(124, 124, 124, 0.5);
+}
+
+.error {
+  color: red;
+  font-size: 0.8rem;
+  transition: border 0.24s ease-in-out;
+  border: 2px solid red;
+  border-radius: 2px;
+  padding: 20px;
+}
+
+.error ul {
+  margin: 0;
+  padding-left: var(--gap-double);
+}

client/components/new-post/drag-and-drop/index.tsx

@@ -1,5 +1,8 @@
+import { Text, useMediaQuery, useTheme, useToasts } from "@geist-ui/core"
+import { memo } from "react"
 import { useDropzone } from "react-dropzone"
 import styles from "./drag-and-drop.module.css"
+import type { Document } from "@lib/types"
 import generateUUID from "@lib/generate-uuid"
 import {
 	allowedFileTypes,
@@ -7,11 +10,13 @@ import {
 	allowedFileExtensions
 } from "@lib/constants"
 import byteToMB from "@lib/byte-to-mb"
-import type { Document } from "../new"
-import { useToasts } from "@components/toasts"
 
 function FileDropzone({ setDocs }: { setDocs: (docs: Document[]) => void }) {
+	const { palette } = useTheme()
 	const { setToast } = useToasts()
+	const isMobile = useMediaQuery("xs", {
+		match: "down"
+	})
 	const onDrop = async (acceptedFiles: File[]) => {
 		const newDocs = await Promise.all(
 			acceptedFiles.map((file) => {
@@ -19,9 +24,9 @@ function FileDropzone({ setDocs }: { setDocs: (docs: Document[]) => void }) {
 					const reader = new FileReader()
 
 					reader.onabort = () =>
-						setToast({ message: "File reading was aborted", type: "error" })
+						setToast({ text: "File reading was aborted", type: "error" })
 					reader.onerror = () =>
-						setToast({ message: "File reading failed", type: "error" })
+						setToast({ text: "File reading failed", type: "error" })
 					reader.onload = () => {
 						const content = reader.result as string
 						resolve({
@@ -74,27 +79,34 @@ function FileDropzone({ setDocs }: { setDocs: (docs: Document[]) => void }) {
 			{file.name}:
 			<ul>
 				{errors.map((e) => (
-					<li key={e.code}>{e.message}</li>
+					<li key={e.code}>
+						<Text>{e.message}</Text>
+					</li>
 				))}
 			</ul>
 		</li>
 	))
 
+	const verb = isMobile ? "tap" : "click"
 	return (
 		<div className={styles.container}>
-			<div {...getRootProps()}>
+			<div
+				{...getRootProps()}
+				className={styles.dropzone}
+				style={{
+					borderColor: palette.accents_3
+				}}
+			>
 				<input {...getInputProps()} />
 				{!isDragActive && (
-					<p className="cursor-pointer select-none rounded-md border-2 border-dashed p-4 text-sm text-muted-foreground">
-						Drag and drop files here, or click to select
-					</p>
+					<Text p>Drag some files here, or {verb} to select files</Text>
 				)}
-				{isDragActive && <p>Release to drop the files here</p>}
+				{isDragActive && <Text p>Release to drop the files here</Text>}
 			</div>
 			{fileRejections.length > 0 && (
 				<ul className={styles.error}>
 					{/* <Button style={{ float: 'right' }} type="abort" onClick={() => fileRejections.splice(0, fileRejections.length)} auto iconRight={<XCircle />}></Button> */}
-					<p>There was a problem with one or more of your files.</p>
+					<Text h5>There was a problem with one or more of your files.</Text>
 					{fileRejectionItems}
 				</ul>
 			)}
@@ -102,4 +114,4 @@ function FileDropzone({ setDocs }: { setDocs: (docs: Document[]) => void }) {
 	)
 }
 
-export default FileDropzone
+export default memo(FileDropzone)

client/components/new-post/index.tsx

@@ -0,0 +1,356 @@
+import { Button, useToasts, ButtonDropdown, Input } from "@geist-ui/core"
+import { useRouter } from "next/router"
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import generateUUID from "@lib/generate-uuid"
+import FileDropzone from "./drag-and-drop"
+import styles from "./post.module.css"
+import Title from "./title"
+import Cookies from "js-cookie"
+import type {
+	Post as PostType,
+	PostVisibility,
+	Document as DocumentType
+} from "@lib/types"
+import PasswordModal from "./password-modal"
+import EditDocumentList from "@components/edit-document-list"
+import { ChangeEvent } from "react"
+import DatePicker from "react-datepicker"
+import getTitleForPostCopy from "@lib/get-title-for-post-copy"
+import Description from "./description"
+
+const Post = ({
+	initialPost,
+	newPostParent
+}: {
+	initialPost?: PostType
+	newPostParent?: string
+}) => {
+	const { setToast } = useToasts()
+	const router = useRouter()
+	const [title, setTitle] = useState<string>()
+	const [description, setDescription] = useState<string>()
+	const [expiresAt, setExpiresAt] = useState<Date | null>(null)
+
+	const emptyDoc = useMemo(
+		() => [
+			{
+				title: "",
+				content: "",
+				id: generateUUID()
+			}
+		],
+		[]
+	)
+
+	const [docs, setDocs] = useState<DocumentType[]>(emptyDoc)
+
+	// the /new/from/{id} route fetches an initial post
+	useEffect(() => {
+		if (initialPost) {
+			setDocs(
+				initialPost.files?.map((doc) => ({
+					title: doc.title,
+					content: doc.content,
+					id: doc.id
+				})) || emptyDoc
+			)
+
+			setTitle(getTitleForPostCopy(initialPost.title))
+			setDescription(initialPost.description)
+		}
+	}, [emptyDoc, initialPost])
+
+	const [passwordModalVisible, setPasswordModalVisible] = useState(false)
+
+	const sendRequest = useCallback(
+		async (
+			url: string,
+			data: {
+				expiresAt: Date | null
+				visibility?: PostVisibility
+				title?: string
+				files?: DocumentType[]
+				password?: string
+				userId: string
+				parentId?: string
+			}
+		) => {
+			const res = await fetch(url, {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+					Authorization: `Bearer ${Cookies.get("drift-token")}`
+				},
+				body: JSON.stringify({
+					title,
+					description,
+					files: docs,
+					...data
+				})
+			})
+
+			if (res.ok) {
+				const json = await res.json()
+				router.push(`/post/${json.id}`)
+			} else {
+				const json = await res.json()
+				setToast({
+					text: json.error.message || "Please fill out all fields",
+					type: "error"
+				})
+				setPasswordModalVisible(false)
+				setSubmitting(false)
+			}
+		},
+		[description, docs, router, setToast, title]
+	)
+
+	const [isSubmitting, setSubmitting] = useState(false)
+
+	const onSubmit = useCallback(
+		async (visibility: PostVisibility, password?: string) => {
+			if (visibility === "protected" && !password) {
+				setPasswordModalVisible(true)
+				return
+			}
+
+			setPasswordModalVisible(false)
+
+			setSubmitting(true)
+
+			let hasErrored = false
+
+			if (!title) {
+				setToast({
+					text: "Please fill out the post title",
+					type: "error"
+				})
+				hasErrored = true
+			}
+
+			if (!docs.length) {
+				setToast({
+					text: "Please add at least one document",
+					type: "error"
+				})
+				hasErrored = true
+			}
+
+			for (const doc of docs) {
+				if (!doc.title) {
+					setToast({
+						text: "Please fill out all the document titles",
+						type: "error"
+					})
+					hasErrored = true
+				}
+			}
+
+			if (hasErrored) {
+				setSubmitting(false)
+				return
+			}
+
+			await sendRequest("/server-api/posts/create", {
+				title,
+				files: docs,
+				visibility,
+				password,
+				userId: Cookies.get("drift-userid") || "",
+				expiresAt,
+				parentId: newPostParent
+			})
+		},
+		[docs, expiresAt, newPostParent, sendRequest, setToast, title]
+	)
+
+	const onClosePasswordModal = () => {
+		setPasswordModalVisible(false)
+		setSubmitting(false)
+	}
+
+	const submitPassword = (password: string) => onSubmit("protected", password)
+
+	const onChangeExpiration = useCallback((date: Date) => setExpiresAt(date), [])
+
+	const onChangeTitle = useCallback(
+		(e: ChangeEvent<HTMLInputElement>) => {
+			setTitle(e.target.value)
+		},
+		[setTitle]
+	)
+
+	const onChangeDescription = useCallback(
+		(e: ChangeEvent<HTMLInputElement>) => {
+			setDescription(e.target.value)
+		},
+		[setDescription]
+	)
+
+	const updateDocTitle = useCallback(
+		(i: number) => (title: string) => {
+			setDocs((docs) =>
+				docs.map((doc, index) => (i === index ? { ...doc, title } : doc))
+			)
+		},
+		[setDocs]
+	)
+
+	const updateDocContent = (i: number) => (content: string) => {
+		setDocs((docs) =>
+			docs.map((doc, index) => (i === index ? { ...doc, content } : doc))
+		)
+	}
+
+	const removeDoc = (i: number) => () => {
+		setDocs((docs) => docs.filter((_, index) => i !== index))
+	}
+
+	const uploadDocs = (files: DocumentType[]) => {
+		// if no title is set and the only document is empty,
+		const isFirstDocEmpty =
+			docs.length <= 1 && (docs.length ? docs[0].title === "" : true)
+		const shouldSetTitle = !title && isFirstDocEmpty
+		if (shouldSetTitle) {
+			if (files.length === 1) {
+				setTitle(files[0].title)
+			} else if (files.length > 1) {
+				setTitle("Uploaded files")
+			}
+		}
+
+		if (isFirstDocEmpty) setDocs(files)
+		else setDocs((docs) => [...docs, ...files])
+	}
+
+	// pasted files
+	// const files = e.clipboardData.files as File[]
+	// if (files.length) {
+	//     const docs = Array.from(files).map((file) => ({
+	//         title: file.name,
+	//         content: '',
+	//         id: generateUUID()
+	//     }))
+	// }
+
+	const onPaste = useCallback(
+		(e: any) => {
+			const pastedText = e.clipboardData.getData("text")
+
+			if (pastedText) {
+				if (!title) {
+					setTitle("Pasted text")
+				}
+			}
+		},
+		[title]
+	)
+
+	const CustomTimeInput = ({
+		date,
+		value,
+		onChange
+	}: {
+		date: Date
+		value: string
+		onChange: (date: string) => void
+	}) => (
+		<input
+			type="time"
+			value={value}
+			onChange={(e) => {
+				if (!isNaN(date.getTime())) {
+					onChange(e.target.value || date.toISOString().slice(11, 16))
+				}
+			}}
+			style={{
+				backgroundColor: "var(--bg)",
+				border: "1px solid var(--light-gray)",
+				borderRadius: "var(--radius)"
+			}}
+			required
+		/>
+	)
+
+	return (
+		<div style={{ paddingBottom: 150 }}>
+			<Title title={title} onChange={onChangeTitle} />
+			<Description description={description} onChange={onChangeDescription} />
+			<FileDropzone setDocs={uploadDocs} />
+			<EditDocumentList
+				onPaste={onPaste}
+				docs={docs}
+				updateDocTitle={updateDocTitle}
+				updateDocContent={updateDocContent}
+				removeDoc={removeDoc}
+			/>
+			<div className={styles.buttons}>
+				<Button
+					className={styles.button}
+					onClick={() => {
+						setDocs([
+							...docs,
+							{
+								title: "",
+								content: "",
+								id: generateUUID()
+							}
+						])
+					}}
+					type="default"
+				>
+					Add a File
+				</Button>
+				<div className={styles.rightButtons}>
+					{
+						<DatePicker
+							onChange={onChangeExpiration}
+							customInput={
+								<Input
+									label="Expires at"
+									clearable
+									width="100%"
+									height="40px"
+								/>
+							}
+							placeholderText="Won't expire"
+							selected={expiresAt}
+							showTimeInput={true}
+							// @ts-ignore
+							customTimeInput={<CustomTimeInput />}
+							timeInputLabel="Time:"
+							dateFormat="MM/dd/yyyy h:mm aa"
+							className={styles.datePicker}
+							clearButtonTitle={"Clear"}
+							// TODO: investigate why this causes margin shift if true
+							enableTabLoop={false}
+							minDate={new Date()}
+						/>
+					}
+					<ButtonDropdown loading={isSubmitting} type="success">
+						<ButtonDropdown.Item onClick={() => onSubmit("unlisted")}>
+							Create Unlisted
+						</ButtonDropdown.Item>
+						<ButtonDropdown.Item main onClick={() => onSubmit("private")}>
+							Create Private
+						</ButtonDropdown.Item>
+						<ButtonDropdown.Item onClick={() => onSubmit("public")}>
+							Create Public
+						</ButtonDropdown.Item>
+						<ButtonDropdown.Item onClick={() => onSubmit("protected")}>
+							Create with Password
+						</ButtonDropdown.Item>
+					</ButtonDropdown>
+				</div>
+			</div>
+			<PasswordModal
+				creating={true}
+				isOpen={passwordModalVisible}
+				onClose={onClosePasswordModal}
+				onSubmit={submitPassword}
+			/>
+		</div>
+	)
+}
+
+export default Post

client/components/new-post/password-modal/index.tsx

@@ -0,0 +1,83 @@
+import { Modal, Note, Spacer, Input } from "@geist-ui/core"
+import { useState } from "react"
+
+type Props = {
+	creating: boolean
+	isOpen: boolean
+	onClose: () => void
+	onSubmit: (password: string) => void
+}
+
+const PasswordModal = ({
+	isOpen,
+	onClose,
+	onSubmit: onSubmitAfterVerify,
+	creating
+}: Props) => {
+	const [password, setPassword] = useState<string>()
+	const [confirmPassword, setConfirmPassword] = useState<string>()
+	const [error, setError] = useState<string>()
+
+	const onSubmit = () => {
+		if (!password || (creating && !confirmPassword)) {
+			setError("Please enter a password")
+			return
+		}
+
+		if (password !== confirmPassword && creating) {
+			setError("Passwords do not match")
+			return
+		}
+
+		onSubmitAfterVerify(password)
+	}
+
+	return (
+		<>
+			{/* TODO: investigate disableBackdropClick not updating state? */}
+
+			{
+				<Modal visible={isOpen} disableBackdropClick={false}>
+					<Modal.Title>Enter a password</Modal.Title>
+					<Modal.Content>
+						{!error && creating && (
+							<Note type="warning" label="Warning">
+								This doesn&apos;t protect your post from the server
+								administrator.
+							</Note>
+						)}
+						{error && (
+							<Note type="error" label="Error">
+								{error}
+							</Note>
+						)}
+						<Spacer />
+						<Input
+							width={"100%"}
+							label="Password"
+							marginBottom={1}
+							htmlType="password"
+							placeholder="Password"
+							onChange={(e) => setPassword(e.target.value)}
+						/>
+						{creating && (
+							<Input
+								width={"100%"}
+								label="Confirm"
+								htmlType="password"
+								placeholder="Confirm Password"
+								onChange={(e) => setConfirmPassword(e.target.value)}
+							/>
+						)}
+					</Modal.Content>
+					<Modal.Action passive onClick={onClose}>
+						Cancel
+					</Modal.Action>
+					<Modal.Action onClick={onSubmit}>Submit</Modal.Action>
+				</Modal>
+			}
+		</>
+	)
+}
+
+export default PasswordModal

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

@@ -1,15 +1,9 @@
-.root {
-	padding-bottom: 200px;
-	display: flex;
-	flex-direction: column;
-	gap: var(--gap-half);
-}
-
 .buttons {
 	position: relative;
 	display: flex;
 	justify-content: space-between;
 	width: 100%;
+	margin-top: var(--gap-double);
 	gap: var(--gap);
 }
 
@@ -19,12 +13,30 @@
 	align-items: center;
 }
 
+.datePicker {
+	flex: 1;
+}
+
+.title {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: var(--gap);
+}
 
 .description {
 	width: 100%;
+	margin-bottom: var(--gap);
 }
 
+
 @media screen and (max-width: 650px) {
+	.title {
+		align-items: flex-start;
+		flex-direction: column;
+	}
+
 	.buttons {
 		flex-direction: column;
 		margin: 0;
@@ -34,7 +46,7 @@
 
 	.buttons .rightButtons {
 		flex-direction: column;
-		align-items: flex-start;
+		align-items: flex-end;
 	}
 
 	.buttons .rightButtons > * {

client/components/new-post/title/index.tsx

@@ -0,0 +1,51 @@
+import { ChangeEvent, memo, useEffect, useState } from "react"
+import { Text } from "@geist-ui/core"
+
+import ShiftBy from "@components/shift-by"
+import styles from "../post.module.css"
+import { Input } from "@geist-ui/core"
+
+const titlePlaceholders = [
+	"How to...",
+	"Status update for ...",
+	"My new project",
+	"My new idea",
+	"Let's talk about...",
+	"What's up with ...",
+	"I'm thinking about ..."
+]
+
+type props = {
+	onChange: (e: ChangeEvent<HTMLInputElement>) => void
+	title?: string
+}
+
+const Title = ({ onChange, title }: props) => {
+	const [placeholder, setPlaceholder] = useState(titlePlaceholders[0])
+	useEffect(() => {
+		// set random placeholder on load
+		setPlaceholder(
+			titlePlaceholders[Math.floor(Math.random() * titlePlaceholders.length)]
+		)
+	}, [])
+	return (
+		<div className={styles.title}>
+			<Text h1 width={"150px"} className={styles.drift}>
+				Drift
+			</Text>
+			<ShiftBy y={-3}>
+				<Input
+					placeholder={placeholder}
+					value={title || ""}
+					onChange={onChange}
+					height={"55px"}
+					font={1.5}
+					label="Post title"
+					style={{ width: "100%" }}
+				/>
+			</ShiftBy>
+		</div>
+	)
+}
+
+export default memo(Title)

client/components/note/index.tsx

@@ -1,19 +1,15 @@
-import clsx from "clsx"
 import styles from "./note.module.css"
 
 const Note = ({
 	type = "info",
 	children,
-	className,
 	...props
 }: {
 	type: "info" | "warning" | "error"
 	children: React.ReactNode
 } & React.ComponentProps<"div">) => (
-	<div
-		className={clsx(className, styles.note, styles[type], "text-sm")}
-		{...props}
-	>
+	<div className={`${styles.note} ${styles[type]}`} {...props}>
+		<strong className={styles.type}>{type}:</strong>
 		{children}
 	</div>
 )

client/components/note/note.module.css

@@ -1,7 +1,10 @@
 .note {
+	font-size: 0.8em;
 	color: var(--fg);
 	margin: 0;
 	padding: var(--gap);
+	margin-top: 0.5em;
+	margin-bottom: 0.5em;
 	border-radius: var(--radius);
 }
 
@@ -10,22 +13,15 @@
 }
 
 .warning {
-	background: var(--warning);
-	color: var(--bg);
-}
-
-.error {
 	background: #f33;
 }
 
-[data-theme="light"] .warning,
-[data-theme="light"] .error {
-	color: var(--fg);
+.error {
+	background: red;
 }
 
 .type {
 	color: var(--fg);
 	margin-right: 0.5em;
-	font-size: initial;
 	text-transform: capitalize;
 }

client/components/page-seo/index.tsx

@@ -0,0 +1,26 @@
+import Head from "next/head"
+import React from "react"
+
+type PageSeoProps = {
+	title?: string
+	description?: string
+	isLoading?: boolean
+	isPrivate?: boolean
+}
+
+const PageSeo = ({
+	title = "Drift",
+	description = "A self-hostable clone of GitHub Gist",
+	isPrivate = false
+}: PageSeoProps) => {
+	return (
+		<>
+			<Head>
+				<title>{title}</title>
+				{!isPrivate && <meta name="description" content={description} />}
+			</Head>
+		</>
+	)
+}
+
+export default PageSeo

client/components/post-list/index.tsx

@@ -0,0 +1,170 @@
+import { Button, Input, Text } from "@geist-ui/core"
+
+import styles from "./post-list.module.css"
+import ListItemSkeleton from "./list-item-skeleton"
+import ListItem from "./list-item"
+import { Post } from "@lib/types"
+import { ChangeEvent, useCallback, useEffect, useMemo, useState } from "react"
+import Cookies from "js-cookie"
+import useDebounce from "@lib/hooks/use-debounce"
+import Link from "@components/link"
+
+type Props = {
+	initialPosts: Post[]
+	error: boolean
+	morePosts: boolean
+}
+
+const PostList = ({ morePosts, initialPosts, error }: Props) => {
+	const [search, setSearchValue] = useState("")
+	const [posts, setPosts] = useState<Post[]>(initialPosts)
+	const [searching, setSearching] = useState(false)
+	const [hasMorePosts, setHasMorePosts] = useState(morePosts)
+
+	const debouncedSearchValue = useDebounce(search, 200)
+
+	const loadMoreClick = useCallback(
+		(e: React.MouseEvent<HTMLButtonElement>) => {
+			e.preventDefault()
+			if (hasMorePosts) {
+				async function fetchPosts() {
+					const res = await fetch(`/server-api/posts/mine`, {
+						method: "GET",
+						headers: {
+							"Content-Type": "application/json",
+							Authorization: `Bearer ${Cookies.get("drift-token")}`,
+							"x-page": `${posts.length / 10 + 1}`
+						}
+					})
+					const json = await res.json()
+					setPosts([...posts, ...json.posts])
+					setHasMorePosts(json.morePosts)
+				}
+				fetchPosts()
+			}
+		},
+		[posts, hasMorePosts]
+	)
+
+	// update posts on search
+	useEffect(() => {
+		if (debouncedSearchValue) {
+			// fetch results from /server-api/posts/search
+			const fetchResults = async () => {
+				setSearching(true)
+				//encode search
+				const res = await fetch(
+					`/server-api/posts/search?q=${encodeURIComponent(
+						debouncedSearchValue
+					)}`,
+					{
+						method: "GET",
+						headers: {
+							"Content-Type": "application/json",
+							Authorization: `Bearer ${Cookies.get("drift-token")}`
+							// "tok": process.env.SECRET_KEY || ''
+						}
+					}
+				)
+				const data = await res.json()
+				setPosts(data)
+				setSearching(false)
+			}
+			fetchResults()
+		} else {
+			setPosts(initialPosts)
+		}
+	}, [initialPosts, debouncedSearchValue])
+
+	const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
+		setSearchValue(e.target.value)
+	}
+
+	// const debouncedSearchHandler = useMemo(
+	// 	() => debounce(handleSearchChange, 300),
+	// 	[]
+	// )
+
+	// useEffect(() => {
+	// 	return () => {
+	// 		debouncedSearchHandler.cancel()
+	// 	}
+	// }, [debouncedSearchHandler])
+
+	const deletePost = useCallback(
+		(postId: string) => async () => {
+			const res = await fetch(`/server-api/posts/${postId}`, {
+				method: "DELETE",
+				headers: {
+					"Content-Type": "application/json",
+					Authorization: `Bearer ${Cookies.get("drift-token")}`
+				}
+			})
+
+			if (!res.ok) {
+				console.error(res)
+				return
+			} else {
+				setPosts((posts) => posts.filter((post) => post.id !== postId))
+			}
+		},
+		[]
+	)
+
+	return (
+		<div className={styles.container}>
+			<div className={styles.searchContainer}>
+				<Input
+					scale={3 / 2}
+					clearable
+					placeholder="Search..."
+					onChange={handleSearchChange}
+				/>
+			</div>
+			{error && <Text type="error">Failed to load.</Text>}
+			{!posts.length && searching && (
+				<ul>
+					<li>
+						<ListItemSkeleton />
+					</li>
+					<li>
+						<ListItemSkeleton />
+					</li>
+				</ul>
+			)}
+			{posts?.length === 0 && !error && (
+				<Text type="secondary">
+					No posts found. Create one{" "}
+					<Link colored href="/new">
+						here
+					</Link>
+					.
+				</Text>
+			)}
+			{posts?.length > 0 && (
+				<div>
+					<ul>
+						{posts.map((post) => {
+							return (
+								<ListItem
+									deletePost={deletePost(post.id)}
+									post={post}
+									key={post.id}
+								/>
+							)
+						})}
+					</ul>
+				</div>
+			)}
+			{hasMorePosts && !setSearchValue && (
+				<div className={styles.moreContainer}>
+					<Button width={"100%"} onClick={loadMoreClick}>
+						Load more
+					</Button>
+				</div>
+			)}
+		</div>
+	)
+}
+
+export default PostList

client/components/post-list/list-item-skeleton.tsx

@@ -0,0 +1,27 @@
+import Skeleton from "react-loading-skeleton"
+import { Card, Divider, Grid, Spacer } from "@geist-ui/core"
+
+const ListItemSkeleton = () => (
+	<Card>
+		<Spacer height={1 / 2} />
+		<Grid.Container justify={"space-between"} marginBottom={1 / 2}>
+			<Grid xs={8} paddingLeft={1 / 2}>
+				<Skeleton width={150} />
+			</Grid>
+			<Grid xs={7}>
+				<Skeleton width={100} />
+			</Grid>
+			<Grid xs={4}>
+				<Skeleton width={70} />
+			</Grid>
+		</Grid.Container>
+
+		<Divider h="1px" my={0} />
+
+		<Card.Content>
+			<Skeleton width={200} />
+		</Card.Content>
+	</Card>
+)
+
+export default ListItemSkeleton

client/components/post-list/list-item.module.css

@@ -0,0 +1,36 @@
+.title {
+	display: flex;
+	justify-content: space-between;
+}
+
+.badges {
+	display: flex;
+	gap: var(--gap-half);
+}
+
+.buttons {
+	display: flex;
+	gap: var(--gap-half);
+}
+
+.oneline {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+@media screen and (max-width: 700px) {
+	.badges {
+		flex-direction: column;
+		align-items: flex-start;
+	}
+
+	.badges > * {
+		width: min-content;
+	}
+
+	.title {
+		flex-direction: column;
+		gap: var(--gap);
+	}
+}

client/components/post-list/list-item.tsx

@@ -0,0 +1,105 @@
+import NextLink from "next/link"
+import VisibilityBadge from "../badges/visibility-badge"
+import { Text, Card, Tooltip, Divider, Badge, Button } from "@geist-ui/core"
+import { File, Post } from "@lib/types"
+import FadeIn from "@components/fade-in"
+import Trash from "@geist-ui/icons/trash"
+import ExpirationBadge from "@components/badges/expiration-badge"
+import CreatedAgoBadge from "@components/badges/created-ago-badge"
+import Edit from "@geist-ui/icons/edit"
+import { useRouter } from "next/router"
+import Parent from "@geist-ui/icons/arrowUpCircle"
+import styles from "./list-item.module.css"
+import Link from "@components/link"
+
+// TODO: isOwner should default to false so this can be used generically
+const ListItem = ({
+	post,
+	isOwner = true,
+	deletePost
+}: {
+	post: Post
+	isOwner?: boolean
+	deletePost: () => void
+}) => {
+	const router = useRouter()
+
+	const editACopy = () => {
+		router.push(`/new/from/${post.id}`)
+	}
+
+	const viewParentClick = () => {
+		router.push(`/post/${post.parent?.id}`)
+	}
+
+	return (
+		<FadeIn>
+			<li key={post.id}>
+				<Card style={{ overflowY: "scroll" }}>
+					<Card.Body>
+						<Text h3 className={styles.title}>
+							<Link
+								colored
+								style={{ marginRight: "var(--gap)" }}
+								href={`/post/[id]`}
+								as={`/post/${post.id}`}
+							>
+								{post.title}
+							</Link>
+							{isOwner && (
+								<span className={styles.buttons}>
+									{post.parent && (
+										<Tooltip text={"View parent"} hideArrow>
+											<Button
+												auto
+												icon={<Parent />}
+												onClick={viewParentClick}
+											/>
+										</Tooltip>
+									)}
+									<Tooltip text={"Make a copy"} hideArrow>
+										<Button auto iconRight={<Edit />} onClick={editACopy} />
+									</Tooltip>
+									<Tooltip text={"Delete"} hideArrow>
+										<Button iconRight={<Trash />} onClick={deletePost} auto />
+									</Tooltip>
+								</span>
+							)}
+						</Text>
+
+						{post.description && (
+							<Text p className={styles.oneline}>
+								{post.description}
+							</Text>
+						)}
+
+						<div className={styles.badges}>
+							<VisibilityBadge visibility={post.visibility} />
+							<CreatedAgoBadge createdAt={post.createdAt} />
+							<Badge type="secondary">
+								{post.files?.length === 1
+									? "1 file"
+									: `${post.files?.length || 0} files`}
+							</Badge>
+							<ExpirationBadge postExpirationDate={post.expiresAt} />
+						</div>
+					</Card.Body>
+					<Divider h="1px" my={0} />
+					<Card.Content>
+						{post.files?.map((file: File) => {
+							return (
+								<div key={file.id}>
+									<Link colored href={`/post/${post.id}#${file.title}`}>
+										{file.title || "Untitled file"}
+									</Link>
+								</div>
+							)
+						})}
+					</Card.Content>
+				</Card>
+			</li>{" "}
+		</FadeIn>
+	)
+}
+
+export default ListItem

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

@@ -1,22 +1,17 @@
-.container {
-	ul {
+.container ul {
 	list-style: none;
 	padding: 0;
 	margin: 0;
-		margin-top: 0.5rem;
-
-		@media (max-width: 768px) {
-			padding: 0 var(--gap);
-		}
 }
 
-	ul li {
+.container ul li {
 	padding: 0.5rem 0;
 }
 
-	> * {
-		width: 100%;
-	}
+.container ul li::before {
+	content: "";
+	padding: 0;
+	margin: 0;
 }
 
 .postHeader {

client/components/post-page/index.tsx

@@ -0,0 +1,178 @@
+import PageSeo from "@components/page-seo"
+import VisibilityBadge from "@components/badges/visibility-badge"
+import DocumentComponent from "@components/view-document"
+import styles from "./post-page.module.css"
+import homeStyles from "@styles/Home.module.css"
+
+import type { File, Post, PostVisibility } from "@lib/types"
+import { Page, Button, Text, ButtonGroup, useMediaQuery } from "@geist-ui/core"
+import { useEffect, useState } from "react"
+import Archive from "@geist-ui/icons/archive"
+import Edit from "@geist-ui/icons/edit"
+import Parent from "@geist-ui/icons/arrowUpCircle"
+import FileDropdown from "@components/file-dropdown"
+import ScrollToTop from "@components/scroll-to-top"
+import { useRouter } from "next/router"
+import ExpirationBadge from "@components/badges/expiration-badge"
+import CreatedAgoBadge from "@components/badges/created-ago-badge"
+import Cookies from "js-cookie"
+import PasswordModalPage from "./password-modal-wrapper"
+import VisibilityControl from "@components/badges/visibility-control"
+
+type Props = {
+	post: Post
+	isProtected?: boolean
+}
+
+const PostPage = ({ post: initialPost, isProtected }: Props) => {
+	const [post, setPost] = useState<Post>(initialPost)
+	const [visibility, setVisibility] = useState<PostVisibility>(post.visibility)
+	const [isExpired, setIsExpired] = useState(
+		post.expiresAt ? new Date(post.expiresAt) < new Date() : null
+	)
+	const [isLoading, setIsLoading] = useState(true)
+	const [isOwner] = useState(
+		post.users ? post.users[0].id === Cookies.get("drift-userid") : false
+	)
+	const router = useRouter()
+	const isMobile = useMediaQuery("mobile")
+
+	useEffect(() => {
+		if (!isOwner && isExpired) {
+			router.push("/expired")
+		}
+
+		const expirationDate = new Date(post.expiresAt ? post.expiresAt : "")
+		if (!isOwner && expirationDate < new Date()) {
+			router.push("/expired")
+		} else {
+			setIsLoading(false)
+		}
+
+		let interval: NodeJS.Timer | null = null
+		if (post.expiresAt) {
+			interval = setInterval(() => {
+				const expirationDate = new Date(post.expiresAt ? post.expiresAt : "")
+				setIsExpired(expirationDate < new Date())
+			}, 4000)
+		}
+		return () => {
+			if (interval) clearInterval(interval)
+		}
+	}, [isExpired, isOwner, post.expiresAt, post.users, router])
+
+	const download = async () => {
+		if (!post.files) return
+		const downloadZip = (await import("client-zip")).downloadZip
+		const blob = await downloadZip(
+			post.files.map((file: any) => {
+				return {
+					name: file.title,
+					input: file.content,
+					lastModified: new Date(file.updatedAt)
+				}
+			})
+		).blob()
+		const link = document.createElement("a")
+		link.href = URL.createObjectURL(blob)
+		link.download = `${post.title}.zip`
+		link.click()
+		link.remove()
+	}
+
+	const editACopy = () => {
+		router.push(`/new/from/${post.id}`)
+	}
+
+	const viewParentClick = () => {
+		router.push(`/post/${post.parent!.id}`)
+	}
+
+	if (isLoading) {
+		return <></>
+	}
+
+	const isAvailable = !isExpired && !isProtected && post.title
+
+	return (
+		<Page width={"100%"}>
+			<PageSeo
+				title={`${post.title} - Drift`}
+				description={post.description}
+				isPrivate={false}
+			/>
+			{!isAvailable && <PasswordModalPage setPost={setPost} />}
+			<Page.Content className={homeStyles.main}>
+				<div className={styles.header}>
+					<span className={styles.buttons}>
+						<ButtonGroup
+							vertical={isMobile}
+							marginLeft={0}
+							marginRight={0}
+							marginTop={1}
+							marginBottom={1}
+						>
+							<Button
+								auto
+								icon={<Edit />}
+								onClick={editACopy}
+								style={{ textTransform: "none" }}
+							>
+								Edit a Copy
+							</Button>
+							{post.parent && (
+								<Button auto icon={<Parent />} onClick={viewParentClick}>
+									View Parent
+								</Button>
+							)}
+							<Button
+								auto
+								onClick={download}
+								icon={<Archive />}
+								style={{ textTransform: "none" }}
+							>
+								Download as ZIP Archive
+							</Button>
+							<FileDropdown isMobile={isMobile} files={post.files || []} />
+						</ButtonGroup>
+					</span>
+					<span className={styles.title}>
+						<Text h3>{post.title}</Text>
+						<span className={styles.badges}>
+							<VisibilityBadge visibility={visibility} />
+							<CreatedAgoBadge createdAt={post.createdAt} />
+							<ExpirationBadge postExpirationDate={post.expiresAt} />
+						</span>
+					</span>
+				</div>
+				{post.description && (
+					<div>
+						<Text p>{post.description}</Text>
+					</div>
+				)}
+				{/* {post.files.length > 1 && <FileTree files={post.files} />} */}
+				{post.files?.map(({ id, content, title }: File) => (
+					<DocumentComponent
+						key={id}
+						title={title}
+						initialTab={"preview"}
+						id={id}
+						content={content}
+					/>
+				))}
+				{isOwner && (
+					<span className={styles.controls}>
+						<VisibilityControl
+							postId={post.id}
+							visibility={visibility}
+							setVisibility={setVisibility}
+						/>
+					</span>
+				)}
+				<ScrollToTop />
+			</Page.Content>
+		</Page>
+	)
+}
+
+export default PostPage

client/components/post-page/password-modal-wrapper.tsx

@@ -0,0 +1,64 @@
+import PasswordModal from "@components/new-post/password-modal"
+import { Page, useToasts } from "@geist-ui/core"
+import { Post } from "@lib/types"
+import { useRouter } from "next/router"
+import { useState } from "react"
+
+type Props = {
+	setPost: (post: Post) => void
+}
+
+const PasswordModalPage = ({ setPost }: Props) => {
+	const router = useRouter()
+	const { setToast } = useToasts()
+	const [isPasswordModalOpen, setIsPasswordModalOpen] = useState(true)
+
+	const onSubmit = async (password: string) => {
+		const res = await fetch(
+			`/server-api/posts/authenticate?id=${router.query.id}&password=${password}`,
+			{
+				method: "GET",
+				headers: {
+					"Content-Type": "application/json"
+				}
+			}
+		)
+
+		if (!res.ok) {
+			setToast({
+				type: "error",
+				text: "Wrong password"
+			})
+			return
+		}
+
+		const data = await res.json()
+		if (data) {
+			if (data.error) {
+				setToast({
+					text: data.error,
+					type: "error"
+				})
+			} else {
+				setIsPasswordModalOpen(false)
+				setPost(data)
+			}
+		}
+	}
+
+	const onClose = () => {
+		setIsPasswordModalOpen(false)
+		router.push("/")
+	}
+
+	return (
+		<PasswordModal
+			creating={false}
+			onClose={onClose}
+			onSubmit={onSubmit}
+			isOpen={isPasswordModalOpen}
+		/>
+	)
+}
+
+export default PasswordModalPage

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

@@ -0,0 +1,56 @@
+.header .title {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.header .title .badges {
+	display: flex;
+	gap: var(--gap-half);
+}
+
+.header .title h3 {
+	margin: 0;
+	padding: 0;
+	display: inline-block;
+}
+
+.header .buttons {
+	display: flex;
+	justify-content: flex-end;
+	margin-bottom: var(--gap);
+}
+
+.controls {
+	display: flex;
+	justify-content: flex-end;
+}
+
+@media screen and (max-width: 900px) {
+	.header {
+		flex-direction: column;
+		gap: var(--gap);
+	}
+}
+
+@media screen and (max-width: 700px) {
+	.header .title {
+		flex-direction: column;
+		gap: var(--gap-half);
+	}
+
+	.header .title .badges {
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.header .title .badges > * {
+		width: min-content;
+	}
+
+	.header .buttons {
+		display: flex;
+		justify-content: center;
+	}
+}

client/components/preview/index.tsx

@@ -0,0 +1,67 @@
+import Cookies from "js-cookie"
+import { memo, useEffect, useState } from "react"
+import styles from "./preview.module.css"
+
+type Props = {
+	height?: number | string
+	fileId?: string
+	content?: string
+	title?: string
+	//  file extensions we can highlight
+}
+
+const MarkdownPreview = ({ height = 500, fileId, content, title }: Props) => {
+	const [preview, setPreview] = useState<string>(content || "")
+	const [isLoading, setIsLoading] = useState<boolean>(true)
+	useEffect(() => {
+		async function fetchPost() {
+			if (fileId) {
+				const resp = await fetch(`/api/html/${fileId}`, {
+					method: "GET"
+				})
+				if (resp.ok) {
+					const res = await resp.text()
+					setPreview(res)
+					setIsLoading(false)
+				}
+			} else if (content) {
+				const resp = await fetch("/server-api/files/html", {
+					method: "POST",
+					headers: {
+						"Content-Type": "application/json",
+						Authorization: `Bearer ${Cookies.get("drift-token") || ""}`
+					},
+					body: JSON.stringify({
+						title,
+						content
+					})
+				})
+
+				if (resp.ok) {
+					const res = await resp.text()
+					setPreview(res)
+					setIsLoading(false)
+				}
+			}
+			setIsLoading(false)
+		}
+		fetchPost()
+	}, [content, fileId, title])
+	return (
+		<>
+			{isLoading ? (
+				<div>Loading...</div>
+			) : (
+				<article
+					className={styles.markdownPreview}
+					dangerouslySetInnerHTML={{ __html: preview }}
+					style={{
+						height
+					}}
+				/>
+			)}
+		</>
+	)
+}
+
+export default memo(MarkdownPreview)

client/components/preview/preview.module.css

@@ -1,63 +1,3 @@
-.markdownPreview {
-	padding: var(--gap-quarter);
-	font-size: 16px;
-	line-height: 1.75;
-	color: hsl(var(--foreground));
-}
-
-.skeletonPreview {
-	padding: var(--gap-half);
-	font-size: 16px;
-	line-height: 1.75;
-}
-.markdownPreview {
-	padding: var(--gap-quarter);
-	color: hsl(var(--foreground));
-}
-
-.skeletonPreview {
-	padding: var(--gap-half);
-}
-
-.markdownPreview h1,
-.markdownPreview h2,
-.markdownPreview h3,
-.markdownPreview h4,
-.markdownPreview h5,
-.markdownPreview h6 {
-	font-weight: 600;
-}
-
-.markdownPreview h1 {
-	font-size: 1.775rem;
-}
-
-.markdownPreview h2 {
-	font-size: 1.5rem;
-}
-
-.markdownPreview h3 {
-	font-size: 1.25rem;
-}
-
-.markdownPreview h4 {
-	font-size: 1.125rem;
-}
-
-.markdownPreview h5 {
-	font-size: 1.1rem;
-}
-
-.markdownPreview p {
-	margin-top: 1.25rem;
-	margin-bottom: 1.25rem;
-/* 	
-	&:not(:first-child) {
-		line-height: 1.75rem;
-		margin-top: 1.5rem;
-	} */
-}
-
 .markdownPreview pre {
 	border-radius: 3px;
 	font-family: "Courier New", Courier, monospace;
@@ -69,6 +9,35 @@
 	word-wrap: break-word;
 }
 
+.markdownPreview h1,
+.markdownPreview h2,
+.markdownPreview h3,
+.markdownPreview h4,
+.markdownPreview h5,
+.markdownPreview h6 {
+	margin-top: var(--gap);
+	margin-bottom: var(--gap-half);
+}
+
+.markdownPreview h1 {
+	color: var(--fg);
+}
+
+.markdownPreview h2 {
+	color: var(--darkest-gray);
+}
+
+.markdownPreview h3,
+.markdownPreview h4,
+.markdownPreview h5,
+.markdownPreview h6 {
+	color: var(--darker-gray);
+}
+
+.markdownPreview a {
+	color: #0070f3;
+}
+
 /* Auto-linked headers */
 .markdownPreview h1 a,
 .markdownPreview h2 a,
@@ -93,49 +62,50 @@
 	filter: opacity(0.5);
 }
 
-.markdownPreview ul {
-	margin-bottom: 1.5rem;
-	margin-left: 1.5rem;
-	list-style-type: disc;
+.markdownPreview h1 {
+	font-size: 2rem;
 }
 
-.markdownPreview ol {
-	margin-bottom: 1.5rem;
-	margin-left: 1.5rem;
-	list-style-type: decimal;
+.markdownPreview h2 {
+	font-size: 1.5rem;
+}
+
+.markdownPreview h3 {
+	font-size: 1.25rem;
+}
+
+.markdownPreview h4 {
+	font-size: 1rem;
+}
+
+.markdownPreview h5 {
+	font-size: 1rem;
+}
+
+.markdownPreview h6 {
+	font-size: 0.875rem;
+}
+
+.markdownPreview ul {
+	list-style: inside;
 }
 
 .markdownPreview ul li::before {
 	content: "";
 }
 
+.markdownPreview code {
+	border-radius: 3px;
+	white-space: pre-wrap;
+	word-wrap: break-word;
+	color: inherit !important;
+}
+
 .markdownPreview code::before,
 .markdownPreview code::after {
 	content: "";
 }
 
-.markdownPreview blockquote {
-	padding-left: 1.5rem;
-	font-style: italic;
-	border-left-width: 2px;
-}
-
-.markdownPreview blockquote p {
-	margin-top: 0;
-}
-
-.markdownPreview table {
-	overflow-y: auto;
-	width: 100%;
-}
-
-.markdownPreview table th {
-	font-weight: 600;
-	padding: 0;
-	margin: 0;
-	border-top-width: 1px;
-}
-
 @media screen and (max-width: 800px) {
 	.markdownPreview h1 a::after,
 	.markdownPreview h2 a::after,

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

@@ -1,19 +1,10 @@
-"use client"
-
-import { Button } from "@components/button"
-import { Tooltip } from "@components/tooltip"
+import { Tooltip, Button, Spacer } from "@geist-ui/core"
+import ChevronUp from "@geist-ui/icons/chevronUpCircleFill"
 import { useEffect, useState } from "react"
-import { ChevronUp } from "react-feather"
 import styles from "./scroll.module.css"
 
 const ScrollToTop = () => {
 	const [shouldShow, setShouldShow] = useState(false)
-
-	const isReducedMotion =
-		typeof window !== "undefined"
-			? window.matchMedia("(prefers-reduced-motion: reduce)").matches
-			: false
-
 	useEffect(() => {
 		// if user is scrolled, set visible
 		const handleScroll = () => {
@@ -23,15 +14,29 @@ const ScrollToTop = () => {
 		return () => window.removeEventListener("scroll", handleScroll)
 	}, [])
 
+	const isReducedMotion =
+		typeof window !== "undefined"
+			? window.matchMedia("(prefers-reduced-motion: reduce)").matches
+			: false
 	const onClick = async (e: React.MouseEvent<HTMLButtonElement>) => {
 		e.currentTarget.blur()
+
 		window.scrollTo({ top: 0, behavior: isReducedMotion ? "auto" : "smooth" })
 	}
 
 	return (
-		<div className={styles.root}>
+		<div
+			style={{
+				display: "flex",
+				flexDirection: "row",
+				width: "100%",
+				height: 24,
+				justifyContent: "flex-end"
+			}}
+		>
 			<Tooltip
-				content="Scroll to Top"
+				hideArrow
+				text="Scroll to Top"
 				className={`${styles["scroll-up"]} ${
 					shouldShow ? styles["scroll-up-shown"] : ""
 				}`}
@@ -39,8 +44,10 @@ const ScrollToTop = () => {
 				<Button
 					aria-label="Scroll to Top"
 					onClick={onClick}
-					variant={"secondary"}
+					style={{ background: "var(--light-gray)" }}
+					auto
 				>
+					<Spacer height={2 / 3} inline width={0} />
 					<ChevronUp />
 				</Button>
 			</Tooltip>

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

@@ -1,10 +1,3 @@
-.root {
-	display: flex;
-	flex-direction: row;
-	width: 100%;
-	justify-content: flex-end;
-}
-
 .scroll-up {
 	position: fixed;
 	z-index: 2;

client/components/settings-group/index.tsx

@@ -0,0 +1,21 @@
+import { Fieldset, Text, Divider } from "@geist-ui/core"
+import styles from "./settings-group.module.css"
+
+type Props = {
+	title: string
+	children: React.ReactNode | React.ReactNode[]
+}
+
+const SettingsGroup = ({ title, children }: Props) => {
+	return (
+		<Fieldset>
+			<Fieldset.Content>
+				<Text h4>{title}</Text>
+			</Fieldset.Content>
+			<Divider />
+			<Fieldset.Content className={styles.content}>{children}</Fieldset.Content>
+		</Fieldset>
+	)
+}
+
+export default SettingsGroup

client/components/settings/index.tsx

@@ -0,0 +1,26 @@
+import Password from "./sections/password"
+import Profile from "./sections/profile"
+import SettingsGroup from "../settings-group"
+
+const SettingsPage = () => {
+	return (
+		<div
+			style={{
+				display: "flex",
+				flexDirection: "column",
+				gap: "var(--gap)",
+				marginBottom: "var(--gap)"
+			}}
+		>
+			<h1>Settings</h1>
+			<SettingsGroup title="Profile">
+				<Profile />
+			</SettingsGroup>
+			<SettingsGroup title="Password">
+				<Password />
+			</SettingsGroup>
+		</div>
+	)
+}
+
+export default SettingsPage

client/components/settings/sections/password.tsx

@@ -0,0 +1,134 @@
+import { Input, Button, useToasts } from "@geist-ui/core"
+import Cookies from "js-cookie"
+import { useState } from "react"
+
+const Password = () => {
+	const [password, setPassword] = useState<string>("")
+	const [newPassword, setNewPassword] = useState<string>("")
+	const [confirmPassword, setConfirmPassword] = useState<string>("")
+
+	const { setToast } = useToasts()
+
+	const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		setPassword(e.target.value)
+	}
+
+	const handleNewPasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		setNewPassword(e.target.value)
+	}
+
+	const handleConfirmPasswordChange = (
+		e: React.ChangeEvent<HTMLInputElement>
+	) => {
+		setConfirmPassword(e.target.value)
+	}
+
+	const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+		e.preventDefault()
+		if (!password || !newPassword || !confirmPassword) {
+			setToast({
+				text: "Please fill out all fields",
+				type: "error"
+			})
+		}
+
+		if (newPassword !== confirmPassword) {
+			setToast({
+				text: "New password and confirm password do not match",
+				type: "error"
+			})
+		}
+
+		const res = await fetch("/server-api/auth/change-password", {
+			method: "PUT",
+			headers: {
+				"Content-Type": "application/json",
+				Authorization: `Bearer ${Cookies.get("drift-token")}`
+			},
+			body: JSON.stringify({
+				oldPassword: password,
+				newPassword
+			})
+		})
+
+		if (res.status === 200) {
+			setToast({
+				text: "Password updated successfully",
+				type: "success"
+			})
+			setPassword("")
+			setNewPassword("")
+			setConfirmPassword("")
+		} else {
+			const data = await res.json()
+
+			setToast({
+				text: data.error ?? "Failed to update password",
+				type: "error"
+			})
+		}
+	}
+
+	return (
+		<form
+			style={{
+				display: "flex",
+				flexDirection: "column",
+				gap: "var(--gap)",
+				maxWidth: "300px"
+			}}
+			onSubmit={onSubmit}
+		>
+			<div>
+				<label htmlFor="current-password">Current password</label>
+				<Input
+					onChange={handlePasswordChange}
+					minLength={6}
+					maxLength={128}
+					value={password}
+					id="current-password"
+					htmlType="password"
+					required
+					autoComplete="current-password"
+					placeholder="Current Password"
+					width={"100%"}
+				/>
+			</div>
+			<div>
+				<label htmlFor="new-password">New password</label>
+				<Input
+					onChange={handleNewPasswordChange}
+					minLength={6}
+					maxLength={128}
+					value={newPassword}
+					id="new-password"
+					htmlType="password"
+					required
+					autoComplete="new-password"
+					placeholder="New Password"
+					width={"100%"}
+				/>
+			</div>
+			<div>
+				<label htmlFor="confirm-password">Confirm password</label>
+				<Input
+					onChange={handleConfirmPasswordChange}
+					minLength={6}
+					maxLength={128}
+					value={confirmPassword}
+					id="confirm-password"
+					htmlType="password"
+					required
+					autoComplete="confirm-password"
+					placeholder="Confirm Password"
+					width={"100%"}
+				/>
+			</div>
+			<Button htmlType="submit" auto>
+				Change Password
+			</Button>
+		</form>
+	)
+}
+
+export default Password

client/components/settings/sections/profile.tsx

@@ -0,0 +1,125 @@
+import { Note, Input, Textarea, Button, useToasts } from "@geist-ui/core"
+import useUserData from "@lib/hooks/use-user-data"
+import Cookies from "js-cookie"
+import { useEffect, useState } from "react"
+
+const Profile = () => {
+	const user = useUserData()
+	const [name, setName] = useState<string>()
+	const [email, setEmail] = useState<string>()
+	const [bio, setBio] = useState<string>()
+
+	useEffect(() => {
+		console.log(user)
+		if (user?.displayName) setName(user.displayName)
+		if (user?.email) setEmail(user.email)
+		if (user?.bio) setBio(user.bio)
+	}, [user])
+
+	const { setToast } = useToasts()
+
+	const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		setName(e.target.value)
+	}
+
+	const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		setEmail(e.target.value)
+	}
+
+	const handleBioChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+		setBio(e.target.value)
+	}
+
+	const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+		e.preventDefault()
+		if (!name && !email && !bio) {
+			setToast({
+				text: "Please fill out at least one field",
+				type: "error"
+			})
+			return
+		}
+
+		const data = {
+			displayName: name,
+			email,
+			bio
+		}
+
+		const res = await fetch("/server-api/user/profile", {
+			method: "PUT",
+			headers: {
+				"Content-Type": "application/json",
+				Authorization: `Bearer ${Cookies.get("drift-token")}`
+			},
+			body: JSON.stringify(data)
+		})
+
+		if (res.status === 200) {
+			setToast({
+				text: "Profile updated",
+				type: "success"
+			})
+		} else {
+			setToast({
+				text: "Something went wrong updating your profile",
+				type: "error"
+			})
+		}
+	}
+
+	return (
+		<>
+			<Note type="warning" marginBottom={"var(--gap)"}>
+				This information will be publicly available on your profile
+			</Note>
+			<form
+				style={{
+					display: "flex",
+					flexDirection: "column",
+					gap: "var(--gap)",
+					maxWidth: "300px"
+				}}
+				onSubmit={onSubmit}
+			>
+				<div>
+					<label htmlFor="displayName">Display name</label>
+					<Input
+						id="displayName"
+						width={"100%"}
+						placeholder="my name"
+						value={name || ""}
+						onChange={handleNameChange}
+					/>
+				</div>
+				<div>
+					<label htmlFor="email">Email</label>
+					<Input
+						id="email"
+						htmlType="email"
+						width={"100%"}
+						placeholder="my@email.io"
+						value={email || ""}
+						onChange={handleEmailChange}
+					/>
+				</div>
+				<div>
+					<label htmlFor="bio">Biography (max 250 characters)</label>
+					<Textarea
+						id="bio"
+						width="100%"
+						maxLength={250}
+						placeholder="I enjoy..."
+						value={bio || ""}
+						onChange={handleBioChange}
+					/>
+				</div>
+				<Button htmlType="submit" auto>
+					Submit
+				</Button>
+			</form>
+		</>
+	)
+}
+
+export default Profile

client/components/shift-by.tsx

@@ -0,0 +1,20 @@
+// https://www.joshwcomeau.com/snippets/react-components/shift-by/
+type Props = {
+	x?: number
+	y?: number
+	children: React.ReactNode
+}
+
+function ShiftBy({ x = 0, y = 0, children }: Props) {
+	return (
+		<div
+			style={{
+				transform: `translate(${x}px, ${y}px)`,
+				display: "inline-block"
+			}}
+		>
+			{children}
+		</div>
+	)
+}
+export default ShiftBy

client/components/view-document/document.module.css

@@ -0,0 +1,49 @@
+.card {
+	margin: var(--gap) auto;
+	padding: var(--gap);
+	border: 1px solid var(--light-gray);
+	border-radius: var(--radius);
+}
+
+.descriptionContainer {
+	display: flex;
+	flex-direction: column;
+	min-height: 400px;
+	overflow: auto;
+}
+
+.fileNameContainer {
+	font-family: var(--font-mono) !important;
+	border-radius: var(--radius) !important;
+	margin-bottom: var(--gap-half) !important;
+	width: 100% !important;
+}
+
+.fileNameContainer span {
+	transition: background-color var(--transition) !important;
+	border-color: var(--light-gray) !important;
+}
+
+.fileNameContainer span:target,
+.fileNameContainer span:hover {
+	background-color: var(--lighter-gray) !important;
+}
+
+.fileNameContainer > div {
+	/* Override geist-ui styling */
+	margin: 0 !important;
+}
+
+.actionWrapper {
+	position: relative;
+	z-index: 1;
+}
+
+.actionWrapper .actions {
+	position: absolute;
+	right: 0;
+}
+
+.textarea {
+	height: 100%;
+}

client/components/view-document/index.tsx

@@ -0,0 +1,168 @@
+import { memo, useRef, useState } from "react"
+import styles from "./document.module.css"
+import Download from "@geist-ui/icons/download"
+import ExternalLink from "@geist-ui/icons/externalLink"
+import Skeleton from "react-loading-skeleton"
+import Link from 'next/link';
+
+import {
+	Button,
+	ButtonGroup,
+	Spacer,
+	Tabs,
+	Textarea,
+	Tooltip,
+	Tag
+} from "@geist-ui/core"
+import HtmlPreview from "@components/preview"
+import FadeIn from "@components/fade-in"
+
+// import Link from "next/link"
+type Props = {
+	title: string
+	initialTab?: "edit" | "preview"
+	skeleton?: boolean
+	id: string
+	content: string
+}
+
+const DownloadButton = ({ rawLink }: { rawLink?: string }) => {
+	return (
+		<div className={styles.actionWrapper}>
+			<ButtonGroup className={styles.actions}>
+				<Tooltip hideArrow text="Download">
+					<Link
+						href={`${rawLink}?download=true`}
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						<Button
+							scale={2 / 3}
+							px={0.6}
+							icon={<Download />}
+							auto
+							aria-label="Download"
+						/>
+					</Link>
+				</Tooltip>
+				<Tooltip hideArrow text="Open raw in new tab">
+					<Link href={rawLink || ""} target="_blank" rel="noopener noreferrer">
+						<Button
+							scale={2 / 3}
+							px={0.6}
+							icon={<ExternalLink />}
+							auto
+							aria-label="Open raw file in new tab"
+						/>
+					</Link>
+				</Tooltip>
+			</ButtonGroup>
+		</div>
+	)
+}
+
+const Document = ({
+	content,
+	title,
+	initialTab = "edit",
+	skeleton,
+	id
+}: Props) => {
+	const codeEditorRef = useRef<HTMLTextAreaElement>(null)
+	const [tab, setTab] = useState(initialTab)
+	// const height = editable ? "500px" : '100%'
+	const height = "100%"
+
+	const handleTabChange = (newTab: string) => {
+		if (newTab === "edit") {
+			codeEditorRef.current?.focus()
+		}
+		setTab(newTab as "edit" | "preview")
+	}
+
+	const rawLink = () => {
+		if (id) {
+			return `/file/raw/${id}`
+		}
+	}
+
+	if (skeleton) {
+		return (
+			<>
+				<Spacer height={1} />
+				<div className={styles.card}>
+					<div className={styles.fileNameContainer}>
+						<Skeleton width={275} height={36} />
+					</div>
+					<div className={styles.descriptionContainer}>
+						<div style={{ flexDirection: "row", display: "flex" }}>
+							<Skeleton width={125} height={36} />
+						</div>
+						<Skeleton width={"100%"} height={350} />
+					</div>
+				</div>
+			</>
+		)
+	}
+
+	return (
+		<FadeIn>
+			<Spacer height={1} />
+			<div className={styles.card}>
+				<Link href={`#${title}`} className={styles.fileNameContainer}>
+					<Tag
+						height={"100%"}
+						id={`${title}`}
+						width={"100%"}
+						style={{ borderRadius: 0 }}
+					>
+						{title || "Untitled"}
+					</Tag>
+				</Link>
+				<div className={styles.descriptionContainer}>
+					<DownloadButton rawLink={rawLink()} />
+					<Tabs
+						onChange={handleTabChange}
+						initialValue={initialTab}
+						hideDivider
+						leftSpace={0}
+					>
+						<Tabs.Item label={"Raw"} value="edit">
+							{/* <textarea className={styles.lineCounter} wrap='off' readOnly ref={lineNumberRef}>1.</textarea> */}
+							<div
+								style={{
+									marginTop: "var(--gap-half)",
+									display: "flex",
+									flexDirection: "column"
+								}}
+							>
+								<Textarea
+									readOnly
+									ref={codeEditorRef}
+									value={content}
+									width="100%"
+									// TODO: Textarea should grow to fill parent if height == 100%
+									style={{ flex: 1, minHeight: 350 }}
+									resize="vertical"
+									className={styles.textarea}
+								/>
+							</div>
+						</Tabs.Item>
+						<Tabs.Item label="Preview" value="preview">
+							<div style={{ marginTop: "var(--gap-half)" }}>
+								<HtmlPreview
+									height={height}
+									fileId={id}
+									content={content}
+									title={title}
+								/>
+							</div>
+						</Tabs.Item>
+					</Tabs>
+				</div>
+			</div>
+		</FadeIn>
+	)
+}
+
+export default memo(Document)

client/lib/byte-to-mb.ts

@@ -0,0 +1,4 @@
+const byteToMB = (bytes: number) =>
+	Math.round((bytes / 1024 / 1024) * 100) / 100
+
+export default byteToMB

client/lib/constants.ts

@@ -1,17 +1,3 @@
-import { ServerPost } from "./server/prisma"
-
-// Visibilties for the webpages feature
-export const ALLOWED_VISIBILITIES_FOR_WEBPAGE = ["public", "unlisted"]
-export function isAllowedVisibilityForWebpage(
-	visibility: ServerPost["visibility"]
-) {
-	return ALLOWED_VISIBILITIES_FOR_WEBPAGE.includes(visibility)
-}
-export const DEFAULT_THEME = "dark"
-
-export const SIGNED_IN_COOKIE = "next-auth.session-token"
-
-// Code files for uploading with drag and drop and syntax highlighting
 export const allowedFileTypes = [
 	"application/json",
 	"application/x-javascript",
@@ -84,8 +70,6 @@ export const codeFileExtensions = [
 	"cxx",
 	"go",
 	"h",
-	"m",
-	"ha",
 	"hpp",
 	"htm",
 	"html",
@@ -109,7 +93,6 @@ export const codeFileExtensions = [
 	"rb",
 	"rs",
 	"s",
-	"sh",
 	"sass",
 	"scala",
 	"scss",
@@ -126,7 +109,7 @@ export const codeFileExtensions = [
 	"xml",
 	"y",
 	"yaml",
-	"fish"
+	"zig"
 ]
 
 export const allowedFileExtensions = [

client/lib/generate-uuid.ts

@@ -16,7 +16,7 @@ export default function generateUUID() {
 					(crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (num / 4)))
 				).toString(16)
 			}
-			return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, callback)
+			return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, callback);
 		}
 	}
 	let timestamp = new Date().getTime()
@@ -35,5 +35,5 @@ export default function generateUUID() {
 			perforNow = Math.floor(perforNow / 16)
 		}
 		return (c === "x" ? random : (random & 0x3) | 0x8).toString(16)
-	})
+	});
 }

client/lib/get-title-for-post-copy.ts

@@ -14,9 +14,7 @@ const replaceLastInString = (
 	)
 }
 
-const getTitleForPostCopy = (title?: string) => {
-	if (!title) return ""
-
+const getTitleForPostCopy = (title: string) => {
 	const numberAtEndOfTitle = title.split(" ").pop()
 	if (numberAtEndOfTitle) {
 		const number = parseInt(numberAtEndOfTitle)

client/lib/hooks/use-shared-state.ts

@@ -0,0 +1,11 @@
+import useSWR from "swr"
+
+// https://2020.paco.me/blog/shared-hook-state-with-swr
+const useSharedState = <T>(key: string, initial?: T) => {
+	const { data: state, mutate: setState } = useSWR(key, {
+		fallbackData: initial
+	})
+	return [state, setState] as const
+}
+
+export default useSharedState

client/lib/hooks/use-signed-in.ts

@@ -0,0 +1,28 @@
+import Cookies from "js-cookie"
+import { useEffect } from "react"
+import useSharedState from "./use-shared-state"
+
+const useSignedIn = () => {
+	const [signedIn, setSignedIn] = useSharedState(
+		"signedIn",
+		typeof window === "undefined" ? false : !!Cookies.get("drift-token")
+	)
+	const token = Cookies.get("drift-token")
+	const signin = (token: string) => {
+		setSignedIn(true)
+		// TODO: investigate SameSite / CORS cookie security
+		Cookies.set("drift-token", token)
+	}
+
+	useEffect(() => {
+		if (token) {
+			setSignedIn(true)
+		} else {
+			setSignedIn(false)
+		}
+	}, [setSignedIn, token])
+
+	return { signedIn, signin, token }
+}
+
+export default useSignedIn

client/lib/hooks/use-trace-route.ts

@@ -1,6 +1,6 @@
 import { useRef, useEffect } from "react"
 
-function useTraceUpdate(props: { [key: string]: unknown }) {
+function useTraceUpdate(props: { [key: string]: any }) {
 	const prev = useRef(props)
 	useEffect(() => {
 		const changedProps = Object.entries(props).reduce((ps, [k, v]) => {
@@ -8,7 +8,7 @@ function useTraceUpdate(props: { [key: string]: unknown }) {
 				ps[k] = [prev.current[k], v]
 			}
 			return ps
-		}, {} as { [key: string]: unknown })
+		}, {} as { [key: string]: any })
 		if (Object.keys(changedProps).length > 0) {
 			console.log("Changed props:", changedProps)
 		}

client/lib/hooks/use-user-data.ts

@@ -0,0 +1,43 @@
+import { User } from "@lib/types"
+import Cookies from "js-cookie"
+import { useRouter } from "next/router"
+import { useEffect, useMemo, useState } from "react"
+
+const useUserData = () => {
+	const [authToken, setAuthToken] = useState<string>(
+		Cookies.get("drift-token") || ""
+	)
+	const [user, setUser] = useState<User>()
+	const router = useRouter()
+	useEffect(() => {
+		const token = Cookies.get("drift-token")
+		if (token) {
+			setAuthToken(token)
+		}
+	}, [setAuthToken])
+
+	useEffect(() => {
+		if (authToken) {
+			const fetchUser = async () => {
+				const response = await fetch(`/server-api/user/self`, {
+					headers: {
+						Authorization: `Bearer ${authToken}`
+					}
+				})
+				if (response.ok) {
+					const user = await response.json()
+					setUser(user)
+				} else {
+					Cookies.remove("drift-token")
+					setAuthToken("")
+					router.push("/")
+				}
+			}
+			fetchUser()
+		}
+	}, [authToken, router])
+
+	return user
+}
+
+export default useUserData

client/lib/time-ago.ts

@@ -10,8 +10,9 @@ const epochs = [
 	["second", 1]
 ] as const
 
+// Get duration
 const getDuration = (timeAgoInSeconds: number) => {
-	for (const [name, seconds] of epochs) {
+	for (let [name, seconds] of epochs) {
 		const interval = Math.floor(timeAgoInSeconds / seconds)
 
 		if (interval >= 1) {

client/lib/types.d.ts

@@ -0,0 +1,40 @@
+export type PostVisibility = "unlisted" | "private" | "public" | "protected"
+
+export type Document = {
+	title: string
+	content: string
+	id: string
+}
+
+export type File = {
+	id: string
+	title: string
+	content: string
+	html: string
+	createdAt: string
+}
+
+type Files = File[]
+
+export type Post = {
+	id: string
+	title: string
+	description: string
+	visibility: PostVisibility
+	files?: Files
+	createdAt: string
+	users?: User[]
+	parent?: Pick<Post, "id" | "title" | "visibility" | "createdAt">
+	expiresAt: Date | string | null
+}
+
+type User = {
+	id: string
+	username: string
+	posts?: Post[]
+	role: "admin" | "user" | ""
+	createdAt: string
+	displayName?: string
+	bio?: string
+	email?: string
+}

client/middleware.ts

@@ -0,0 +1,77 @@
+import { NextFetchEvent, NextResponse } from "next/server"
+import type { NextRequest } from "next/server"
+
+const PUBLIC_FILE = /\.(.*)$/
+
+export function middleware(req: NextRequest, event: NextFetchEvent) {
+	const pathname = req.nextUrl.pathname
+	const signedIn = req.cookies.get("drift-token")
+	const getURL = (pageName: string) => new URL(`/${pageName}`, req.url).href
+	const isPageRequest =
+		!PUBLIC_FILE.test(pathname) &&
+		// header added when next/link pre-fetches a route
+		!req.headers.get("x-middleware-preflight")
+
+	if (!req.headers.get("x-middleware-preflight") && pathname === "/signout") {
+		// If you're signed in we remove the cookie and redirect to the home page
+		// If you're not signed in we redirect to the home page
+		if (signedIn) {
+			const resp = NextResponse.redirect(getURL(""))
+			resp.cookies.delete("drift-token")
+			resp.cookies.delete("drift-userid")
+			const signoutPromise = new Promise((resolve) => {
+				fetch(`${process.env.API_URL}/auth/signout`, {
+					method: "POST",
+					headers: {
+						"Content-Type": "application/json",
+						Authorization: `Bearer ${signedIn}`,
+						"x-secret-key": process.env.SECRET_KEY || ""
+					}
+				}).then(() => {
+					resolve(true)
+				})
+			})
+			event.waitUntil(signoutPromise)
+
+			return resp
+		}
+	} else if (isPageRequest) {
+		if (signedIn) {
+			if (
+				pathname === "/" ||
+				pathname === "/signin" ||
+				pathname === "/signup"
+			) {
+				return NextResponse.redirect(getURL("new"))
+			}
+		} else if (!signedIn) {
+			if (pathname.startsWith("/new")) {
+				return NextResponse.redirect(getURL("signin"))
+			}
+		}
+
+		if (pathname.includes("/protected/") || pathname.includes("/private/")) {
+			const urlWithoutVisibility = pathname
+				.replace("/protected/", "/")
+				.replace("/private/", "/")
+				.substring(1)
+			return NextResponse.redirect(getURL(urlWithoutVisibility))
+		}
+	}
+
+	return NextResponse.next()
+}
+
+export const config = {
+	match: [
+		"/signout",
+		"/",
+		"/signin",
+		"/signup",
+		"/new",
+		"/protected/:path*",
+		"/private/:path*"
+	]
+}
+  
+  

client/next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

client/next.config.mjs

@@ -0,0 +1,41 @@
+import dotenv from "dotenv"
+import bundleAnalyzer from "@next/bundle-analyzer"
+
+dotenv.config()
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+	reactStrictMode: true,
+	experimental: {
+		// outputStandalone: true,
+		esmExternals: true,
+		// appDir: true
+	},
+	webpack: (config, { dev, isServer }) => {
+		if (!dev && !isServer) {
+			// TODO: enabling Preact causes the file switcher to hang the browser process
+			// Object.assign(config.resolve.alias, {
+			//   react: "preact/compat",
+			//   "react-dom/test-utils": "preact/test-utils",
+			//   "react-dom": "preact/compat"
+			// })
+		}
+		return config
+	},
+	async rewrites() {
+		return [
+			{
+				source: "/server-api/:path*",
+				destination: `${process.env.API_URL}/:path*`
+			},
+			{
+				source: "/file/raw/:id",
+				destination: `/api/raw/:id`
+			}
+		]
+	}
+}
+
+export default bundleAnalyzer({ enabled: process.env.ANALYZE === "true" })(
+	nextConfig
+)

client/package.json

@@ -0,0 +1,64 @@
+{
+	"name": "drift",
+	"version": "0.1.0",
+	"private": true,
+	"scripts": {
+		"dev": "next dev --port 3001",
+		"build": "next build",
+		"start": "next start --port 3001",
+		"lint": "next lint && prettier --list-different --config .prettierrc '{components,lib,pages}/**/*.{ts,tsx}' --write",
+		"analyze": "cross-env ANALYZE=true next build",
+		"find:unused": "next-unused"
+	},
+	"dependencies": {
+		"@geist-ui/core": "^2.3.8",
+		"@geist-ui/icons": "1.0.2",
+		"@types/cookie": "0.5.1",
+		"@types/js-cookie": "3.0.2",
+		"client-zip": "2.2.1",
+		"cookie": "0.5.0",
+		"dotenv": "16.0.0",
+		"js-cookie": "3.0.1",
+		"next": "13.0.2",
+		"next-themes": "0.2.1",
+		"rc-table": "7.24.1",
+		"react": "18.2.0",
+		"react-datepicker": "4.8.0",
+		"react-dom": "18.2.0",
+		"react-dropzone": "14.2.3",
+		"react-loading-skeleton": "3.1.0",
+		"swr": "1.3.0",
+		"textarea-markdown-editor": "0.1.13"
+	},
+	"devDependencies": {
+		"@next/bundle-analyzer": "13.0.5",
+		"@types/node": "17.0.23",
+		"@types/react": "18.0.9",
+		"@types/react-datepicker": "4.4.1",
+		"@types/react-dom": "18.0.3",
+		"cross-env": "7.0.3",
+		"eslint": "8.27.0",
+		"eslint-config-next": "13.0.2",
+		"next-unused": "0.0.6",
+		"prettier": "2.6.2",
+		"typescript": "4.6.4",
+		"typescript-plugin-css-modules": "3.4.0"
+	},
+	"optionalDependencies": {
+		"sharp": "^0.31.2"
+	},
+	"next-unused": {
+		"alias": {
+			"@components": "components/",
+			"@lib": "lib/",
+			"@styles": "styles/"
+		},
+		"include": [
+			"components",
+			"lib"
+		]
+	},
+	"overrides": {
+		"next": "13.0.2"
+	}
+}

client/pages/_app.tsx

@@ -0,0 +1,59 @@
+import "@styles/globals.css"
+import type { AppProps as NextAppProps } from "next/app"
+
+import "react-loading-skeleton/dist/skeleton.css"
+import Head from "next/head"
+import { ThemeProvider } from "next-themes"
+import App from "@components/app"
+import React from "react"
+
+type AppProps<P = any> = {
+	pageProps: P
+} & Omit<NextAppProps<P>, "pageProps">
+
+function MyApp({ Component, pageProps }: AppProps) {
+	return (
+		<div>
+			<Head>
+				<meta charSet="utf-8" />
+				<meta
+					name="viewport"
+					content="width=device-width, initial-scale=1, shrink-to-fit=no"
+				/>
+				<link
+					rel="apple-touch-icon"
+					sizes="180x180"
+					href="/assets/apple-touch-icon.png"
+				/>
+				<link
+					rel="icon"
+					type="image/png"
+					sizes="32x32"
+					href="/assets/favicon-32x32.png"
+				/>
+				<link
+					rel="icon"
+					type="image/png"
+					sizes="16x16"
+					href="/assets/favicon-16x16.png"
+				/>
+				<link rel="manifest" href="/site.webmanifest" />
+				<link
+					rel="mask-icon"
+					href="/assets/safari-pinned-tab.svg"
+					color="#5bbad5"
+				/>
+				<meta name="apple-mobile-web-app-title" content="Drift" />
+				<meta name="application-name" content="Drift" />
+				<meta name="msapplication-TileColor" content="#da532c" />
+				<meta name="theme-color" content="#ffffff" />
+				<title>Drift</title>
+			</Head>
+			<ThemeProvider defaultTheme="system" disableTransitionOnChange>
+				<App Component={Component} pageProps={pageProps} />
+			</ThemeProvider>
+		</div>
+	)
+}
+
+export default MyApp

client/pages/_document.tsx

@@ -0,0 +1,39 @@
+import { CssBaseline } from "@geist-ui/core"
+import Document, {
+	Html,
+	Head,
+	Main,
+	NextScript,
+	DocumentContext
+} from "next/document"
+
+class MyDocument extends Document {
+	static async getInitialProps(ctx: DocumentContext) {
+		const initialProps = await Document.getInitialProps(ctx)
+		const styles = CssBaseline.flush()
+
+		return {
+			...initialProps,
+			styles: (
+				<>
+					{initialProps.styles}
+					{styles}
+				</> // TODO: Investigate typescript
+			) as any
+		}
+	}
+
+	render() {
+		return (
+			<Html lang="en">
+				<Head />
+				<body>
+					<Main />
+					<NextScript />
+				</body>
+			</Html>
+		)
+	}
+}
+
+export default MyDocument

client/pages/_error.tsx

@@ -0,0 +1,12 @@
+import ErrorComponent from "@components/error"
+
+function Error({ statusCode }: { statusCode: number }) {
+	return <ErrorComponent status={statusCode} />
+}
+
+Error.getInitialProps = ({ res, err }: { res: any; err: any }) => {
+	const statusCode = res ? res.statusCode : err ? err.statusCode : 404
+	return { statusCode }
+}
+
+export default Error

client/pages/admin.tsx

@@ -0,0 +1,54 @@
+import styles from "@styles/Home.module.css"
+
+import { Page } from "@geist-ui/core"
+import { useEffect } from "react"
+import Admin from "@components/admin"
+import useSignedIn from "@lib/hooks/use-signed-in"
+import { useRouter } from "next/router"
+import { GetServerSideProps } from "next"
+import cookie from "cookie"
+
+const AdminPage = () => {
+	const { signedIn } = useSignedIn()
+	const router = useRouter()
+	useEffect(() => {
+		if (typeof window === "undefined") return
+		if (!signedIn) {
+			router.push("/")
+		}
+	}, [router, signedIn])
+	return (
+		<Page className={styles.wrapper}>
+			<Page.Content className={styles.main}>
+				<Admin />
+			</Page.Content>
+		</Page>
+	)
+}
+
+export const getServerSideProps: GetServerSideProps = async ({ req }) => {
+	const driftToken = cookie.parse(req.headers.cookie || "")[`drift-token`]
+	const res = await fetch(`${process.env.API_URL}/admin/is-admin`, {
+		headers: {
+			Authorization: `Bearer ${driftToken}`,
+			"x-secret-key": process.env.SECRET_KEY || ""
+		}
+	})
+
+	if (res.ok) {
+		return {
+			props: {
+				signedIn: true
+			}
+		}
+	} else {
+		return {
+			redirect: {
+				destination: "/",
+				permanent: false
+			}
+		}
+	}
+}
+
+export default AdminPage