From 5f4749ebb35405a2b179ebfece15a374ee554ee6 Mon Sep 17 00:00:00 2001
From: Max Leiter <max.leiter@vercel.com>
Date: Sat, 12 Nov 2022 18:39:03 -0800
Subject: [PATCH] radix tooltip, move header to layout

---
 client/app/(auth)/components/index.tsx        |   6 +-
 client/app/(auth)/signin/page.tsx             |   7 +-
 client/app/(auth)/signup/page.tsx             |   8 +-
 .../edit-document/formatting-icons/index.tsx  |   5 +-
 client/app/(posts)/new/from/[id]/page.tsx     |   7 +-
 client/app/(posts)/new/page.tsx               |   7 +-
 .../post-page/view-document/index.tsx         |   6 +-
 client/app/(posts)/post/[id]/page.tsx         |  21 +-
 .../badges/created-ago-badge/index.tsx        |   7 +-
 .../badges/expiration-badge/index.tsx         |  10 +-
 .../badges/visibility-control/index.tsx       |   1 -
 .../app/components/header/header.module.css   |   1 +
 client/app/components/page-wrapper.tsx        |  30 --
 client/app/components/post-list/index.tsx     |   6 +-
 client/app/components/post-list/list-item.tsx |   8 +-
 client/app/components/scroll-to-top/index.tsx |   6 +-
 client/app/components/tooltip/index.tsx       |  32 ++
 client/app/components/tooltip/tooltip.css     |  10 +
 client/app/layout.tsx                         |   5 +-
 client/app/mine/page.tsx                      |   7 +-
 client/app/page.tsx                           |  12 +-
 client/app/root-layout-wrapper.tsx            |  41 +-
 client/app/settings/page.tsx                  |  35 +-
 client/lib/render-markdown.tsx                | 185 -------
 client/lib/server/prisma.ts                   |  16 +-
 client/middleware.ts                          |   1 +
 client/next.config.mjs                        |   4 +
 client/package.json                           |   4 +-
 client/pnpm-lock.yaml                         | 455 +++++++++++++++++-
 29 files changed, 603 insertions(+), 340 deletions(-)
 delete mode 100644 client/app/components/page-wrapper.tsx
 create mode 100644 client/app/components/tooltip/index.tsx
 create mode 100644 client/app/components/tooltip/tooltip.css
 delete mode 100644 client/lib/render-markdown.tsx

diff --git a/client/app/(auth)/components/index.tsx b/client/app/(auth)/components/index.tsx
index 8bf68664..1110a99c 100644
--- a/client/app/(auth)/components/index.tsx
+++ b/client/app/(auth)/components/index.tsx
@@ -1,15 +1,11 @@
 "use client"
 
-import { FormEvent, useState } from "react"
+import { useState } from "react"
 import styles from "./auth.module.css"
-import { useRouter } from "next/navigation"
 import Link from "../../components/link"
 import { Button, Input, Note } from "@geist-ui/core/dist"
 import { signIn } from "next-auth/react"
 import { Github as GithubIcon } from "@geist-ui/icons"
-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,
diff --git a/client/app/(auth)/signin/page.tsx b/client/app/(auth)/signin/page.tsx
index bbf85e98..a8ac70fc 100644
--- a/client/app/(auth)/signin/page.tsx
+++ b/client/app/(auth)/signin/page.tsx
@@ -1,10 +1,5 @@
 import Auth from "../components"
-import PageWrapper from "@components/page-wrapper"
 
 export default function SignInPage() {
-	return (
-		<PageWrapper>
-			<Auth page="signin" />
-		</PageWrapper>
-	)
+	return (<Auth page="signin" />)
 }
diff --git a/client/app/(auth)/signup/page.tsx b/client/app/(auth)/signup/page.tsx
index 16bf9ebf..c7e6a786 100644
--- a/client/app/(auth)/signup/page.tsx
+++ b/client/app/(auth)/signup/page.tsx
@@ -1,7 +1,5 @@
 import Auth from "../components"
-import Header from "@components/header"
 import { getRequiresPasscode } from "pages/api/auth/requires-passcode"
-import PageWrapper from "@components/page-wrapper"
 
 const getPasscode = async () => {
 	return await getRequiresPasscode()
@@ -9,9 +7,5 @@ const getPasscode = async () => {
 
 export default async function SignUpPage() {
 	const requiresPasscode = await getPasscode()
-	return (
-		<PageWrapper signedIn={false}>
-			<Auth page="signup" requiresServerPassword={requiresPasscode} />
-		</PageWrapper>
-	)
+	return (<Auth page="signup" requiresServerPassword={requiresPasscode} />)
 }
diff --git a/client/app/(posts)/new/components/edit-document-list/edit-document/formatting-icons/index.tsx b/client/app/(posts)/new/components/edit-document-list/edit-document/formatting-icons/index.tsx
index 26631b1b..737c5564 100644
--- a/client/app/(posts)/new/components/edit-document-list/edit-document/formatting-icons/index.tsx
+++ b/client/app/(posts)/new/components/edit-document-list/edit-document/formatting-icons/index.tsx
@@ -7,8 +7,9 @@ import List from "@geist-ui/icons/list"
 import ImageIcon from "@geist-ui/icons/image"
 import { RefObject, useMemo } from "react"
 import styles from "../document.module.css"
-import { Button, ButtonGroup, Tooltip } from "@geist-ui/core/dist"
+import { Button, ButtonGroup } from "@geist-ui/core/dist"
 import { TextareaMarkdownRef } from "textarea-markdown-editor"
+import Tooltip from "@components/tooltip"
 
 // TODO: clean up
 
@@ -64,7 +65,7 @@ const FormattingIcons = ({
 			<ButtonGroup className={styles.actions}>
 				{formattingActions.map(({ icon, name, action }) => (
 					<Tooltip
-						text={name[0].toUpperCase() + name.slice(1).replace("-", " ")}
+						content={name[0].toUpperCase() + name.slice(1).replace("-", " ")}
 						key={name}
 					>
 						<Button
diff --git a/client/app/(posts)/new/from/[id]/page.tsx b/client/app/(posts)/new/from/[id]/page.tsx
index 9ffe9daf..74fdd6f5 100644
--- a/client/app/(posts)/new/from/[id]/page.tsx
+++ b/client/app/(posts)/new/from/[id]/page.tsx
@@ -1,7 +1,6 @@
 import NewPost from "../../components/new"
 import { notFound } from "next/navigation"
 import { getPostById } from "@lib/server/prisma"
-import PageWrapper from "@components/page-wrapper"
 
 const NewFromExisting = async ({
 	params
@@ -18,11 +17,7 @@ const NewFromExisting = async ({
 
 	const post = await getPostById(id, true)
 
-	return (
-		<PageWrapper signedIn>
-			<NewPost initialPost={post} newPostParent={id} />
-		</PageWrapper>
-	)
+	return <NewPost initialPost={post} newPostParent={id} />
 }
 
 export default NewFromExisting
diff --git a/client/app/(posts)/new/page.tsx b/client/app/(posts)/new/page.tsx
index 742f0517..8e17ea00 100644
--- a/client/app/(posts)/new/page.tsx
+++ b/client/app/(posts)/new/page.tsx
@@ -1,12 +1,7 @@
 import Header from "@components/header"
 import NewPost from "app/(posts)/new/components/new"
 import "@styles/react-datepicker.css"
-import PageWrapper from "@components/page-wrapper"
 
-const New = () => (
-	<PageWrapper signedIn>
-		<NewPost />
-	</PageWrapper>
-)
+const New = () => <NewPost />
 
 export default New
diff --git a/client/app/(posts)/post/[id]/components/post-page/view-document/index.tsx b/client/app/(posts)/post/[id]/components/post-page/view-document/index.tsx
index 1d5d6653..8047b1b1 100644
--- a/client/app/(posts)/post/[id]/components/post-page/view-document/index.tsx
+++ b/client/app/(posts)/post/[id]/components/post-page/view-document/index.tsx
@@ -11,11 +11,11 @@ import {
 	Spacer,
 	Tabs,
 	Textarea,
-	Tooltip,
 	Tag
 } from "@geist-ui/core/dist"
 import { StaticPreview } from "app/(posts)/components/preview"
 import FadeIn from "@components/fade-in"
+import Tooltip from "@components/tooltip"
 
 // import Link from "next/link"
 type Props = {
@@ -31,7 +31,7 @@ const DownloadButton = ({ rawLink }: { rawLink?: string }) => {
 	return (
 		<div className={styles.actionWrapper}>
 			<ButtonGroup className={styles.actions}>
-				<Tooltip hideArrow text="Download">
+				<Tooltip content="Download">
 					<Link
 						href={`${rawLink}?download=true`}
 						target="_blank"
@@ -46,7 +46,7 @@ const DownloadButton = ({ rawLink }: { rawLink?: string }) => {
 						/>
 					</Link>
 				</Tooltip>
-				<Tooltip hideArrow text="Open raw in new tab">
+				<Tooltip content="Open raw in new tab">
 					<Link href={rawLink || ""} target="_blank" rel="noopener noreferrer">
 						<Button
 							scale={2 / 3}
diff --git a/client/app/(posts)/post/[id]/page.tsx b/client/app/(posts)/post/[id]/page.tsx
index deac6394..64985690 100644
--- a/client/app/(posts)/post/[id]/page.tsx
+++ b/client/app/(posts)/post/[id]/page.tsx
@@ -2,22 +2,27 @@ import type { GetServerSideProps } from "next"
 
 import type { Post } from "@lib/types"
 import PostPage from "app/(posts)/post/[id]/components/post-page"
-import { USER_COOKIE_NAME } from "@lib/constants"
 import { notFound } from "next/navigation"
-import { getPostById } from "@lib/server/prisma"
+import { getAllPosts, getPostById } from "@lib/server/prisma"
 import { getCurrentUser, getSession } from "@lib/server/session"
-import Header from "@components/header"
-import PageWrapper from "@components/page-wrapper"
 
 export type PostProps = {
 	post: Post
 	isProtected?: boolean
 }
 
+export async function generateStaticParams() {
+	const posts = await getAllPosts()
+
+	return posts.map((post) => ({
+		id: post.id
+	}))
+}
+
 const getPost = async (id: string) => {
 	const post = await getPostById(id, true)
 	const user = await getCurrentUser()
-	
+
 	if (!post) {
 		return notFound()
 	}
@@ -60,11 +65,7 @@ const PostView = async ({
 	}
 }) => {
 	const { post, isProtected, isAuthor, signedIn } = await getPost(params.id)
-	return (
-		<PageWrapper signedIn={signedIn}>
-			<PostPage isAuthor={isAuthor} isProtected={isProtected} post={post} />
-		</PageWrapper>
-	)
+	return <PostPage isAuthor={isAuthor} isProtected={isProtected} post={post} />
 }
 
 // export const getServerSideProps: GetServerSideProps = async ({
diff --git a/client/app/components/badges/created-ago-badge/index.tsx b/client/app/components/badges/created-ago-badge/index.tsx
index 3680beef..5ecb8fc3 100644
--- a/client/app/components/badges/created-ago-badge/index.tsx
+++ b/client/app/components/badges/created-ago-badge/index.tsx
@@ -1,4 +1,5 @@
-import { Badge, Tooltip } from "@geist-ui/core/dist"
+import Tooltip from "@components/tooltip"
+import { Badge } from "@geist-ui/core/dist"
 import { timeAgo } from "@lib/time-ago"
 import { useMemo, useState, useEffect } from "react"
 
@@ -17,8 +18,8 @@ const CreatedAgoBadge = ({ createdAt }: { createdAt: string | Date }) => {
 	return (
 		<Badge type="secondary">
 			{" "}
-			<Tooltip hideArrow text={formattedTime}>
-				Created {time}
+			<Tooltip content={formattedTime}>
+				<>Created {time}</>
 			</Tooltip>
 		</Badge>
 	)
diff --git a/client/app/components/badges/expiration-badge/index.tsx b/client/app/components/badges/expiration-badge/index.tsx
index 0326f19c..a4deb6a7 100644
--- a/client/app/components/badges/expiration-badge/index.tsx
+++ b/client/app/components/badges/expiration-badge/index.tsx
@@ -1,6 +1,7 @@
-import { Badge, Tooltip } from "@geist-ui/core/dist"
+import Tooltip from "@components/tooltip"
+import { Badge } from "@geist-ui/core/dist"
 import { timeUntil } from "@lib/time-ago"
-import { useCallback, useEffect, useMemo, useState } from "react"
+import { useEffect, useMemo, useState } from "react"
 
 const ExpirationBadge = ({
 	postExpirationDate
@@ -54,10 +55,9 @@ const ExpirationBadge = ({
 	return (
 		<Badge type={isExpired ? "error" : "warning"}>
 			<Tooltip
-				hideArrow
-				text={`${expirationDate.toLocaleDateString()} ${expirationDate.toLocaleTimeString()}`}
+				content={`${expirationDate.toLocaleDateString()} ${expirationDate.toLocaleTimeString()}`}
 			>
-				{isExpired ? "Expired" : `Expires ${timeUntilString}`}
+				<>{isExpired ? "Expired" : `Expires ${timeUntilString}`}</>
 			</Tooltip>
 		</Badge>
 	)
diff --git a/client/app/components/badges/visibility-control/index.tsx b/client/app/components/badges/visibility-control/index.tsx
index b586c5e8..2a730089 100644
--- a/client/app/components/badges/visibility-control/index.tsx
+++ b/client/app/components/badges/visibility-control/index.tsx
@@ -1,5 +1,4 @@
 import { Button, ButtonGroup, Loading, useToasts } from "@geist-ui/core/dist"
-import { TOKEN_COOKIE_NAME } from "@lib/constants"
 import type { PostVisibility } from "@lib/types"
 import PasswordModal from "@components/password-modal"
 import { useCallback, useState } from "react"
diff --git a/client/app/components/header/header.module.css b/client/app/components/header/header.module.css
index 636b5c47..9468452e 100644
--- a/client/app/components/header/header.module.css
+++ b/client/app/components/header/header.module.css
@@ -2,6 +2,7 @@
 	justify-content: center;
 	display: flex;
 	margin: var(--gap) 0;
+	height: 40px;
 }
 
 .tabs .buttons {
diff --git a/client/app/components/page-wrapper.tsx b/client/app/components/page-wrapper.tsx
deleted file mode 100644
index 45fff942..00000000
--- a/client/app/components/page-wrapper.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-'use client';
-import Page from "@geist-ui/core/dist/page"
-import Header from "./header"
-
-export default function PageWrapper({
-	children,
-	signedIn
-}: {
-	children: React.ReactNode
-	signedIn?: boolean
-}) {
-	return (
-		<>
-			<Page.Header>
-				<Header signedIn={signedIn} />
-			</Page.Header>
-			{children}
-		</>
-	)
-}
-
-export function LoadingPageWrapper() {
-	return (
-		<>
-			<Page.Header>
-				<Header signedIn={false} />
-			</Page.Header>
-		</>
-	)
-}
diff --git a/client/app/components/post-list/index.tsx b/client/app/components/post-list/index.tsx
index b7f53cbf..6fa0c2ad 100644
--- a/client/app/components/post-list/index.tsx
+++ b/client/app/components/post-list/index.tsx
@@ -10,6 +10,8 @@ import useDebounce from "@lib/hooks/use-debounce"
 import Link from "@components/link"
 import { TOKEN_COOKIE_NAME } from "@lib/constants"
 import type { PostWithFiles } from "@lib/server/prisma"
+import DriftTooltip from "@components/tooltip"
+import { Search } from "@geist-ui/icons"
 
 type Props = {
 	initialPosts: PostWithFiles[]
@@ -60,7 +62,7 @@ const PostList = ({ morePosts, initialPosts }: Props) => {
 					{
 						method: "GET",
 						headers: {
-							"Content-Type": "application/json",
+							"Content-Type": "application/json"
 							// "tok": process.env.SECRET_KEY || ''
 						}
 					}
@@ -95,7 +97,7 @@ const PostList = ({ morePosts, initialPosts }: Props) => {
 			const res = await fetch(`/server-api/posts/${postId}`, {
 				method: "DELETE",
 				headers: {
-					"Content-Type": "application/json",
+					"Content-Type": "application/json"
 				}
 			})
 
diff --git a/client/app/components/post-list/list-item.tsx b/client/app/components/post-list/list-item.tsx
index 15f7618d..307b95a1 100644
--- a/client/app/components/post-list/list-item.tsx
+++ b/client/app/components/post-list/list-item.tsx
@@ -2,7 +2,6 @@ import VisibilityBadge from "../badges/visibility-badge"
 import {
 	Text,
 	Card,
-	Tooltip,
 	Divider,
 	Badge,
 	Button
@@ -19,6 +18,7 @@ import Link from "@components/link"
 import type { PostWithFiles } from "@lib/server/prisma"
 import type { PostVisibility } from "@lib/types"
 import type { File } from "@lib/server/prisma"
+import Tooltip from "@components/tooltip"
 
 // TODO: isOwner should default to false so this can be used generically
 const ListItem = ({
@@ -56,7 +56,7 @@ const ListItem = ({
 							{isOwner && (
 								<span className={styles.buttons}>
 									{post.parentId && (
-										<Tooltip text={"View parent"} hideArrow>
+										<Tooltip content={"View parent"}>
 											<Button
 												auto
 												icon={<Parent />}
@@ -64,10 +64,10 @@ const ListItem = ({
 											/>
 										</Tooltip>
 									)}
-									<Tooltip text={"Make a copy"} hideArrow>
+									<Tooltip content={"Make a copy"}>
 										<Button auto iconRight={<Edit />} onClick={editACopy} />
 									</Tooltip>
-									<Tooltip text={"Delete"} hideArrow>
+									<Tooltip content={"Delete"}>
 										<Button iconRight={<Trash />} onClick={deletePost} auto />
 									</Tooltip>
 								</span>
diff --git a/client/app/components/scroll-to-top/index.tsx b/client/app/components/scroll-to-top/index.tsx
index 3d3f55a4..29f416ab 100644
--- a/client/app/components/scroll-to-top/index.tsx
+++ b/client/app/components/scroll-to-top/index.tsx
@@ -1,4 +1,5 @@
-import { Tooltip, Button, Spacer } from "@geist-ui/core/dist"
+import Tooltip from "@components/tooltip"
+import { Button, Spacer } from "@geist-ui/core/dist"
 import ChevronUp from "@geist-ui/icons/chevronUpCircleFill"
 import { useEffect, useState } from "react"
 import styles from "./scroll.module.css"
@@ -35,8 +36,7 @@ const ScrollToTop = () => {
 			}}
 		>
 			<Tooltip
-				hideArrow
-				text="Scroll to Top"
+				content="Scroll to Top"
 				className={`${styles["scroll-up"]} ${
 					shouldShow ? styles["scroll-up-shown"] : ""
 				}`}
diff --git a/client/app/components/tooltip/index.tsx b/client/app/components/tooltip/index.tsx
new file mode 100644
index 00000000..a9ec297d
--- /dev/null
+++ b/client/app/components/tooltip/index.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import { Card } from "@geist-ui/core/dist"
+import * as RadixTooltip from "@radix-ui/react-tooltip"
+import "./tooltip.css"
+
+const Tooltip = ({
+	children,
+	content,
+	className,
+	...props
+}: {
+	children: React.ReactNode
+	content: React.ReactNode
+	className?: string
+} & RadixTooltip.TooltipProps) => {
+	return (
+		<RadixTooltip.Root {...props}>
+			<RadixTooltip.Trigger asChild className={className}>{children}</RadixTooltip.Trigger>
+
+			<RadixTooltip.Content>
+				<Card className="tooltip">
+					<Card.Body margin={0} padding={1 / 2}>
+						{content}
+					</Card.Body>
+				</Card>
+			</RadixTooltip.Content>
+		</RadixTooltip.Root>
+	)
+}
+
+export default Tooltip
diff --git a/client/app/components/tooltip/tooltip.css b/client/app/components/tooltip/tooltip.css
new file mode 100644
index 00000000..20e10803
--- /dev/null
+++ b/client/app/components/tooltip/tooltip.css
@@ -0,0 +1,10 @@
+
+.tooltip {
+    /* animate */
+    animation: fadein 300ms;
+}
+
+@keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
diff --git a/client/app/layout.tsx b/client/app/layout.tsx
index 1cd14fd0..522e0390 100644
--- a/client/app/layout.tsx
+++ b/client/app/layout.tsx
@@ -2,12 +2,15 @@ import "@styles/globals.css"
 import { ServerThemeProvider } from "next-themes"
 import { LayoutWrapper } from "./root-layout-wrapper"
 import styles from '@styles/Home.module.css';
+import { cookies } from "next/headers";
 
 interface RootLayoutProps {
 	children: React.ReactNode
 }
 
 export default async function RootLayout({ children }: RootLayoutProps) {	
+	const cookiesList = cookies();
+	const hasNextAuth = cookiesList.get("next-auth.session-token") !== undefined;
 	return (
 		<ServerThemeProvider
 			cookieName="drift-theme"
@@ -52,7 +55,7 @@ export default async function RootLayout({ children }: RootLayoutProps) {
 					<title>Drift</title>
 				</head>
 				<body className={styles.main}>
-					<LayoutWrapper>{children}</LayoutWrapper>
+					<LayoutWrapper signedIn={hasNextAuth}>{children}</LayoutWrapper>
 				</body>
 			</html>
 		</ServerThemeProvider>
diff --git a/client/app/mine/page.tsx b/client/app/mine/page.tsx
index 15d4b44f..50926248 100644
--- a/client/app/mine/page.tsx
+++ b/client/app/mine/page.tsx
@@ -3,7 +3,6 @@ import { getPostsByUser } from "@lib/server/prisma"
 import PostList from "@components/post-list"
 import { getCurrentUser } from "@lib/server/session"
 import { authOptions } from "@lib/server/auth"
-import PageWrapper from "@components/page-wrapper"
 
 export default async function Mine() {
 	const userId = (await getCurrentUser())?.id
@@ -15,9 +14,5 @@ export default async function Mine() {
 	const posts = await getPostsByUser(userId, true)
 
 	const hasMore = false
-	return (
-		<PageWrapper signedIn>
-			<PostList morePosts={hasMore} initialPosts={posts} />
-		</PageWrapper>
-	)
+	return <PostList morePosts={hasMore} initialPosts={posts} />
 }
diff --git a/client/app/page.tsx b/client/app/page.tsx
index a37b4ea7..d0eea24c 100644
--- a/client/app/page.tsx
+++ b/client/app/page.tsx
@@ -1,6 +1,3 @@
-import Header from "@components/header"
-import PageWrapper from "@components/page-wrapper"
-import { getCurrentUser } from "@lib/server/session"
 import { getWelcomeContent } from "pages/api/welcome"
 import Home from "./components/home"
 
@@ -11,11 +8,12 @@ const getWelcomeData = async () => {
 
 export default async function Page() {
 	const { content, rendered, title } = await getWelcomeData()
-	const authed = await getCurrentUser();
 
 	return (
-		<PageWrapper signedIn={Boolean(authed)}>
-			<Home rendered={rendered as string} introContent={content} introTitle={title} />
-		</PageWrapper>
+		<Home
+			rendered={rendered as string}
+			introContent={content}
+			introTitle={title}
+		/>
 	)
 }
diff --git a/client/app/root-layout-wrapper.tsx b/client/app/root-layout-wrapper.tsx
index 42ad9c9d..8a755b0c 100644
--- a/client/app/root-layout-wrapper.tsx
+++ b/client/app/root-layout-wrapper.tsx
@@ -1,13 +1,17 @@
 "use client"
 
+import Header from "@components/header"
 import { CssBaseline, GeistProvider, Page, Themes } from "@geist-ui/core/dist"
 import { ThemeProvider } from "next-themes"
 import { SkeletonTheme } from "react-loading-skeleton"
+import * as RadixTooltip from "@radix-ui/react-tooltip"
 
 export function LayoutWrapper({
 	children,
+	signedIn
 }: {
 	children: React.ReactNode
+	signedIn?: boolean
 }) {
 	const skeletonBaseColor = "var(--light-gray)"
 	const skeletonHighlightColor = "var(--lighter-gray)"
@@ -50,22 +54,27 @@ export function LayoutWrapper({
 	})
 
 	return (
-		<GeistProvider themes={[customTheme]} themeType={"custom"}>
-			<SkeletonTheme
-				baseColor={skeletonBaseColor}
-				highlightColor={skeletonHighlightColor}
-			>
-				<ThemeProvider
-					disableTransitionOnChange
-					cookieName="drift-theme"
-					attribute="data-theme"
+		<RadixTooltip.Provider delayDuration={200}>
+			<GeistProvider themes={[customTheme]} themeType={"custom"}>
+				<SkeletonTheme
+					baseColor={skeletonBaseColor}
+					highlightColor={skeletonHighlightColor}
 				>
-					<CssBaseline />
-					<Page width={"100%"}>
-						{children}
-					</Page>
-				</ThemeProvider>
-			</SkeletonTheme>
-		</GeistProvider>
+					<ThemeProvider
+						disableTransitionOnChange
+						cookieName="drift-theme"
+						attribute="data-theme"
+					>
+						<CssBaseline />
+						<Page width={"100%"}>
+							<Page.Header>
+								<Header signedIn={signedIn} />
+							</Page.Header>
+							{children}
+						</Page>
+					</ThemeProvider>
+				</SkeletonTheme>
+			</GeistProvider>
+		</RadixTooltip.Provider>
 	)
 }
diff --git a/client/app/settings/page.tsx b/client/app/settings/page.tsx
index 5383d753..07f9e851 100644
--- a/client/app/settings/page.tsx
+++ b/client/app/settings/page.tsx
@@ -5,7 +5,6 @@ import Profile from "app/settings/components/sections/profile"
 import { authOptions } from "@lib/server/auth"
 import { getCurrentUser } from "@lib/server/session"
 import { redirect } from "next/navigation"
-import PageWrapper from "@components/page-wrapper"
 
 export default async function SettingsPage() {
 	const user = await getCurrentUser()
@@ -15,23 +14,21 @@ export default async function SettingsPage() {
 	}
 
 	return (
-		<PageWrapper signedIn>
-			<div
-				style={{
-					display: "flex",
-					flexDirection: "column",
-					gap: "var(--gap)",
-					marginBottom: "var(--gap)"
-				}}
-			>
-				<h1>Settings</h1>
-				<SettingsGroup title="Profile">
-					<Profile user={user} />
-				</SettingsGroup>
-				<SettingsGroup title="Password">
-					<Password />
-				</SettingsGroup>
-			</div>
-		</PageWrapper>
+		<div
+			style={{
+				display: "flex",
+				flexDirection: "column",
+				gap: "var(--gap)",
+				marginBottom: "var(--gap)"
+			}}
+		>
+			<h1>Settings</h1>
+			<SettingsGroup title="Profile">
+				<Profile user={user} />
+			</SettingsGroup>
+			<SettingsGroup title="Password">
+				<Password />
+			</SettingsGroup>
+		</div>
 	)
 }
diff --git a/client/lib/render-markdown.tsx b/client/lib/render-markdown.tsx
deleted file mode 100644
index 90262b89..00000000
--- a/client/lib/render-markdown.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-import { marked } from "marked"
-import Image from "next/image"
-import Highlight, { defaultProps, Language } from "prism-react-renderer"
-// // image sizes. DDoS Safe?
-// const imageSizeLink = /^!?\[((?:\[[^\[\]]*\]|\\[\[\]]?|`[^`]*`|[^\[\]\\])*?)\]\(\s*(<(?:\\[<>]?|[^\s<>\\])*>|(?:\\[()]?|\([^\s\x00-\x1f()\\]*\)|[^\s\x00-\x1f()\\])*?(?:\s+=(?:[\w%]+)?x(?:[\w%]+)?)?)(?:\s+("(?:\\"?|[^"\\])*"|'(?:\\'?|[^'\\])*'|\((?:\\\)?|[^)\\])*\)))?\s*\)/;
-// //@ts-ignore
-// Lexer.rules.inline.normal.link = imageSizeLink;
-// //@ts-ignore
-// Lexer.rules.inline.gfm.link = imageSizeLink;
-// //@ts-ignore
-// Lexer.rules.inline.breaks.link = imageSizeLink;
-
-//@ts-ignore
-delete defaultProps.theme
-// import linkStyles from '../components/link/link.module.css'
-
-const renderer = new marked.Renderer()
-
-// @ts-ignore
-// renderer.heading = (text, level, raw, slugger) => {
-// 	const id = slugger.slug(text)
-// 	const Component = `h${level}`
-
-// 	return (
-// 		<Component>
-// 			<Link href={`#${id}`} id={id}>
-// 				{text}
-// 			</Link>
-// 		</Component>
-// 	)
-// }
-
-// renderer.link = (href, _, text) => {
-// 	const isHrefLocal = href?.startsWith("/") || href?.startsWith("#")
-// 	if (isHrefLocal) {
-// 		return <a href={href || ""}>{text}</a>
-// 	}
-
-// 	// dirty hack
-// 	// if text contains elements, render as html
-// 	return (
-// 		<a
-// 			href={href || ""}
-// 			target="_blank"
-// 			rel="noopener noreferrer"
-// 			dangerouslySetInnerHTML={{ __html: convertHtmlEntities(text) }}
-// 		></a>
-// 	)
-// }
-
-// @ts-ignore
-renderer.image = function (href, _, text) {
-	return <Image loading="lazy" src="${href}" alt="${text}" layout="fill" />
-}
-
-// renderer.checkbox = () => ""
-// @ts-ignore
-renderer.listitem = (text, task, checked) => {
-	if (task) {
-		return (
-			<li className="reset">
-				<span className="check">
-					&#8203;
-					<input type="checkbox" disabled checked={checked} />
-				</span>
-				<span>${text}</span>
-			</li>
-		)
-	}
-	return <li>{text}</li>
-}
-
-// @ts-ignore
-renderer.code = (code: string, language: string) => {
-	const component = 
-		<pre>
-			<Code
-				language={language}
-				// title={title}
-				code={code}
-				// highlight={highlight}
-			/>
-			)
-		</pre>
-
-	return component
-}
-
-marked.setOptions({
-	gfm: true,
-	breaks: true,
-	headerIds: true,
-	renderer
-})
-
-const markdown = (markdown: string) => marked(markdown)
-
-export default markdown
-
-const Code = ({
-	code,
-	language,
-	highlight,
-	title,
-	...props
-}: {
-	code: string
-	language: string
-	highlight?: string
-	title?: string
-}) => {
-	if (!language)
-		return (
-			<>
-				<code {...props} dangerouslySetInnerHTML={{ __html: code }} />
-			</>
-		)
-
-	const highlightedLines = highlight
-		? //@ts-ignore
-		  highlight.split(",").reduce((lines, h) => {
-				if (h.includes("-")) {
-					// Expand ranges like 3-5 into [3,4,5]
-					const [start, end] = h.split("-").map(Number)
-					const x = Array(end - start + 1)
-						.fill(undefined)
-						.map((_, i) => i + start)
-					return [...lines, ...x]
-				}
-
-				return [...lines, Number(h)]
-		  }, [])
-		: ""
-
-	// https://mdxjs.com/guides/syntax-harkedighlighting#all-together
-	return (
-		<>
-			<Highlight
-				{...defaultProps}
-				code={code.trim()}
-				language={language as Language}
-			>
-				{({
-					className,
-					style,
-					tokens,
-					getLineProps,
-					getTokenProps
-				}: {
-					className: string
-					style: any
-					tokens: any
-					getLineProps: any
-					getTokenProps: any
-				}) => (
-					<code className={className} style={{ ...style }}>
-						{tokens.map((line: string[], i: number) => (
-							<div
-								key={i}
-								{...getLineProps({ line, key: i })}
-								style={
-									//@ts-ignore
-									highlightedLines.includes((i + 1).toString())
-										? {
-												background: "var(--highlight)",
-												margin: "0 -1rem",
-												padding: "0 1rem"
-										  }
-										: undefined
-								}
-							>
-								{line.map((token: string, key: number) => (
-									<span key={key} {...getTokenProps({ token, key })} />
-								))}
-							</div>
-						))}
-					</code>
-				)}
-			</Highlight>
-			<>
-				<code {...props} dangerouslySetInnerHTML={{ __html: code }} />
-			</>
-		</>
-	)
-}
diff --git a/client/lib/server/prisma.ts b/client/lib/server/prisma.ts
index 69c09c72..288c2408 100644
--- a/client/lib/server/prisma.ts
+++ b/client/lib/server/prisma.ts
@@ -34,7 +34,6 @@ const updateDates = (input: any) => {
 	}
 }
 
-
 export const prisma =
 	global.prisma ||
 	new PrismaClient({
@@ -81,6 +80,9 @@ export async function getPostsByUser(userId: User["id"], withFiles?: boolean) {
 		},
 		include: {
 			files: withFiles
+		},
+		orderBy: {
+			createdAt: "desc"
 		}
 	})
 
@@ -156,3 +158,15 @@ export const getPostById = async (postId: Post["id"], withFiles = false) => {
 
 	return post as PostWithFiles
 }
+
+export const getAllPosts = async (withFiles = false) => {
+	const posts = await prisma.post.findMany({
+		include: {
+			files: withFiles
+		},
+		// TODO: optimize which to grab
+		take: 100
+	})
+
+	return posts as PostWithFiles[]
+}
diff --git a/client/middleware.ts b/client/middleware.ts
index 2be7a66d..cfa6daa7 100644
--- a/client/middleware.ts
+++ b/client/middleware.ts
@@ -4,6 +4,7 @@ import { NextResponse } from "next/server"
 
 export default withAuth(
 	async function middleware(req) {
+		console.log("middleware")
 		const token = await getToken({ req })
 		const isAuth = !!token
 		const isAuthPage =
diff --git a/client/next.config.mjs b/client/next.config.mjs
index 8f6ec039..f18f93b8 100644
--- a/client/next.config.mjs
+++ b/client/next.config.mjs
@@ -24,6 +24,10 @@ const nextConfig = {
 			{
 				source: "/file/raw/:id",
 				destination: `/api/raw/:id`
+			},
+			{
+				source: "/home",
+				destination: "/",
 			}
 		]
 	}
diff --git a/client/package.json b/client/package.json
index c0ad16b7..34d34ba6 100644
--- a/client/package.json
+++ b/client/package.json
@@ -16,6 +16,8 @@
 		"@geist-ui/icons": "1.0.2",
 		"@next-auth/prisma-adapter": "^1.0.5",
 		"@prisma/client": "^4.6.1",
+		"@radix-ui/react-popover": "^1.0.2",
+		"@radix-ui/react-tooltip": "^1.0.2",
 		"@wcj/markdown-to-html": "^2.1.2",
 		"bcrypt": "^5.1.0",
 		"client-zip": "2.2.1",
@@ -43,7 +45,7 @@
 		"@types/react-dom": "18.0.3",
 		"cross-env": "7.0.3",
 		"eslint": "8.27.0",
-		"eslint-config-next": "13.0.2",
+		"eslint-config-next": "13.0.3-canary.4",
 		"katex": "^0.16.3",
 		"next-unused": "0.0.6",
 		"prettier": "2.6.2",
diff --git a/client/pnpm-lock.yaml b/client/pnpm-lock.yaml
index aaac1775..85e9d982 100644
--- a/client/pnpm-lock.yaml
+++ b/client/pnpm-lock.yaml
@@ -6,6 +6,8 @@ specifiers:
   '@next-auth/prisma-adapter': ^1.0.5
   '@next/bundle-analyzer': 12.1.6
   '@prisma/client': ^4.6.1
+  '@radix-ui/react-popover': ^1.0.2
+  '@radix-ui/react-tooltip': ^1.0.2
   '@types/bcrypt': ^5.0.0
   '@types/node': 17.0.23
   '@types/react': 18.0.9
@@ -17,7 +19,7 @@ specifiers:
   clsx: ^1.2.1
   cross-env: 7.0.3
   eslint: 8.27.0
-  eslint-config-next: 13.0.2
+  eslint-config-next: 13.0.3-canary.4
   katex: ^0.16.3
   next: 13.0.3-canary.4
   next-auth: ^4.16.4
@@ -44,6 +46,8 @@ dependencies:
   '@geist-ui/icons': 1.0.2_zhza2kbnl2wkkf7vqdl3ton2f4
   '@next-auth/prisma-adapter': 1.0.5_2pl3b2nwmjya7el2zbe6cwkney
   '@prisma/client': 4.6.1_prisma@4.6.1
+  '@radix-ui/react-popover': 1.0.2_jbvntnid6ohjelon6ccj5dhg2u
+  '@radix-ui/react-tooltip': 1.0.2_jbvntnid6ohjelon6ccj5dhg2u
   '@wcj/markdown-to-html': 2.1.2
   bcrypt: 5.1.0
   client-zip: 2.2.1
@@ -74,7 +78,7 @@ devDependencies:
   '@types/react-dom': 18.0.3
   cross-env: 7.0.3
   eslint: 8.27.0
-  eslint-config-next: 13.0.2_hsmo2rtalirsvadpuxki35bq2i
+  eslint-config-next: 13.0.3-canary.4_hsmo2rtalirsvadpuxki35bq2i
   katex: 0.16.3
   next-unused: 0.0.6
   prettier: 2.6.2
@@ -142,6 +146,30 @@ packages:
       - supports-color
     dev: true
 
+  /@floating-ui/core/0.7.3:
+    resolution: {integrity: sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg==}
+    dev: false
+
+  /@floating-ui/dom/0.5.4:
+    resolution: {integrity: sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==}
+    dependencies:
+      '@floating-ui/core': 0.7.3
+    dev: false
+
+  /@floating-ui/react-dom/0.7.2_jbvntnid6ohjelon6ccj5dhg2u:
+    resolution: {integrity: sha512-1T0sJcpHgX/u4I1OzIEhlcrvkUN8ln39nz7fMoE/2HDHrPiMFoOGR7++GYyfUmIQHkkrTinaeQsO3XWubjSvGg==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+    dependencies:
+      '@floating-ui/dom': 0.5.4
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      use-isomorphic-layout-effect: 1.1.2_ulhmhxukhxjgxaybrsjlob7ffu
+    transitivePeerDependencies:
+      - '@types/react'
+    dev: false
+
   /@geist-ui/core/2.3.8_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-OKwGgTA4+fBM41eQbqDoUj4XBycZbYH7Ynrn6LPO5yKX7zeWPu/R7HN3vB4/oHt34VTDQI5sDNb1SirHvNyB5w==}
     peerDependencies:
@@ -224,8 +252,8 @@ packages:
     resolution: {integrity: sha512-IKMYPznB0ttgHa1K7nKbfSMM8kne3G7Am+eNeM11cr+HjPljAzl863Ib9UBk6s7oChTAEVtaoKHbAerW/36tWA==}
     dev: false
 
-  /@next/eslint-plugin-next/13.0.2:
-    resolution: {integrity: sha512-W+fIIIaFU7Kct7Okx91C7XDRGolv/w2RUenX2yZFeeNVcuVzDIKUcNmckrYbYcwrNQUSXmtwrs3g8xwast0YtA==}
+  /@next/eslint-plugin-next/13.0.3-canary.4:
+    resolution: {integrity: sha512-RQ2HX9uQFJfSyqs9LfpC8BhPA5LhcnVI3nERbAq3YVxm/CQbjrC+/feAT01CHHSXyakMW0G89oDr4TB3diduXw==}
     dependencies:
       glob: 7.1.7
     dev: true
@@ -401,6 +429,289 @@ packages:
     resolution: {integrity: sha512-3u2/XxvxB+Q7cMXHnKU0CpBiUK1QWqpgiBv28YDo1zOIJE3FCF8DI2vrp6vuwjGt5h0JGXDSvmSf4D4maVjJdw==}
     requiresBuild: true
 
+  /@radix-ui/primitive/1.0.0:
+    resolution: {integrity: sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==}
+    dependencies:
+      '@babel/runtime': 7.20.1
+    dev: false
+
+  /@radix-ui/react-arrow/1.0.1_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-1yientwXqXcErDHEv8av9ZVNEBldH8L9scVR3is20lL+jOCfcJyMFZFEY5cgIrgexsq1qggSXqiEL/d/4f+QXA==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.20.1
+      '@radix-ui/react-primitive': 1.0.1_biqbaboplfbrettd7655fr4n2y
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
+  /@radix-ui/react-compose-refs/1.0.0_react@18.2.0:
+    resolution: {integrity: sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.20.1
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-context/1.0.0_react@18.2.0:
+    resolution: {integrity: sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.20.1
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-dismissable-layer/1.0.2_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-WjJzMrTWROozDqLB0uRWYvj4UuXsM/2L19EmQ3Au+IJWqwvwq9Bwd+P8ivo0Deg9JDPArR1I6MbWNi1CmXsskg==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.20.1
+      '@radix-ui/primitive': 1.0.0
+      '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
+      '@radix-ui/react-primitive': 1.0.1_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-use-callback-ref': 1.0.0_react@18.2.0
+      '@radix-ui/react-use-escape-keydown': 1.0.2_react@18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
+  /@radix-ui/react-focus-guards/1.0.0_react@18.2.0:
+    resolution: {integrity: sha512-UagjDk4ijOAnGu4WMUPj9ahi7/zJJqNZ9ZAiGPp7waUWJO0O1aWXi/udPphI0IUjvrhBsZJGSN66dR2dsueLWQ==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.20.1
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-focus-scope/1.0.1_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-Ej2MQTit8IWJiS2uuujGUmxXjF/y5xZptIIQnyd2JHLwtV0R2j9NRVoRj/1j/gJ7e3REdaBw4Hjf4a1ImhkZcQ==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.20.1
+      '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
+      '@radix-ui/react-primitive': 1.0.1_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-use-callback-ref': 1.0.0_react@18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
+  /@radix-ui/react-id/1.0.0_react@18.2.0:
+    resolution: {integrity: sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.20.1
+      '@radix-ui/react-use-layout-effect': 1.0.0_react@18.2.0
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-popover/1.0.2_jbvntnid6ohjelon6ccj5dhg2u:
+    resolution: {integrity: sha512-4tqZEl9w95R5mlZ/sFdgBnfhCBOEPepLIurBA5kt/qaAhldJ1tNQd0ngr0ET0AHbPotT4mwxMPr7a+MA/wbK0g==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.20.1
+      '@radix-ui/primitive': 1.0.0
+      '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
+      '@radix-ui/react-context': 1.0.0_react@18.2.0
+      '@radix-ui/react-dismissable-layer': 1.0.2_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-focus-guards': 1.0.0_react@18.2.0
+      '@radix-ui/react-focus-scope': 1.0.1_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-id': 1.0.0_react@18.2.0
+      '@radix-ui/react-popper': 1.0.1_jbvntnid6ohjelon6ccj5dhg2u
+      '@radix-ui/react-portal': 1.0.1_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-presence': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-primitive': 1.0.1_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-slot': 1.0.1_react@18.2.0
+      '@radix-ui/react-use-controllable-state': 1.0.0_react@18.2.0
+      aria-hidden: 1.2.1_ulhmhxukhxjgxaybrsjlob7ffu
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-remove-scroll: 2.5.5_ulhmhxukhxjgxaybrsjlob7ffu
+    transitivePeerDependencies:
+      - '@types/react'
+    dev: false
+
+  /@radix-ui/react-popper/1.0.1_jbvntnid6ohjelon6ccj5dhg2u:
+    resolution: {integrity: sha512-J4Vj7k3k+EHNWgcKrE+BLlQfpewxA7Zd76h5I0bIa+/EqaIZ3DuwrbPj49O3wqN+STnXsBuxiHLiF0iU3yfovw==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.20.1
+      '@floating-ui/react-dom': 0.7.2_jbvntnid6ohjelon6ccj5dhg2u
+      '@radix-ui/react-arrow': 1.0.1_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
+      '@radix-ui/react-context': 1.0.0_react@18.2.0
+      '@radix-ui/react-primitive': 1.0.1_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-use-layout-effect': 1.0.0_react@18.2.0
+      '@radix-ui/react-use-rect': 1.0.0_react@18.2.0
+      '@radix-ui/react-use-size': 1.0.0_react@18.2.0
+      '@radix-ui/rect': 1.0.0
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    transitivePeerDependencies:
+      - '@types/react'
+    dev: false
+
+  /@radix-ui/react-portal/1.0.1_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-NY2vUWI5WENgAT1nfC6JS7RU5xRYBfjZVLq0HmgEN1Ezy3rk/UruMV4+Rd0F40PEaFC5SrLS1ixYvcYIQrb4Ig==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.20.1
+      '@radix-ui/react-primitive': 1.0.1_biqbaboplfbrettd7655fr4n2y
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
+  /@radix-ui/react-presence/1.0.0_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.20.1
+      '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
+      '@radix-ui/react-use-layout-effect': 1.0.0_react@18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
+  /@radix-ui/react-primitive/1.0.1_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-fHbmislWVkZaIdeF6GZxF0A/NH/3BjrGIYj+Ae6eTmTCr7EB0RQAAVEiqsXK6p3/JcRqVSBQoceZroj30Jj3XA==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.20.1
+      '@radix-ui/react-slot': 1.0.1_react@18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
+  /@radix-ui/react-slot/1.0.1_react@18.2.0:
+    resolution: {integrity: sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.20.1
+      '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-tooltip/1.0.2_jbvntnid6ohjelon6ccj5dhg2u:
+    resolution: {integrity: sha512-11gUlok2rv5mu+KBtxniOKKNKjqC/uTbgFHWoQdbF46vMV+zjDaBvCtVDK9+MTddlpmlisGPGvvojX7Qm0yr+g==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.20.1
+      '@radix-ui/primitive': 1.0.0
+      '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
+      '@radix-ui/react-context': 1.0.0_react@18.2.0
+      '@radix-ui/react-dismissable-layer': 1.0.2_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-id': 1.0.0_react@18.2.0
+      '@radix-ui/react-popper': 1.0.1_jbvntnid6ohjelon6ccj5dhg2u
+      '@radix-ui/react-portal': 1.0.1_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-presence': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-primitive': 1.0.1_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-slot': 1.0.1_react@18.2.0
+      '@radix-ui/react-use-controllable-state': 1.0.0_react@18.2.0
+      '@radix-ui/react-visually-hidden': 1.0.1_biqbaboplfbrettd7655fr4n2y
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    transitivePeerDependencies:
+      - '@types/react'
+    dev: false
+
+  /@radix-ui/react-use-callback-ref/1.0.0_react@18.2.0:
+    resolution: {integrity: sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.20.1
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-use-controllable-state/1.0.0_react@18.2.0:
+    resolution: {integrity: sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.20.1
+      '@radix-ui/react-use-callback-ref': 1.0.0_react@18.2.0
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-use-escape-keydown/1.0.2_react@18.2.0:
+    resolution: {integrity: sha512-DXGim3x74WgUv+iMNCF+cAo8xUHHeqvjx8zs7trKf+FkQKPQXLk2sX7Gx1ysH7Q76xCpZuxIJE7HLPxRE+Q+GA==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.20.1
+      '@radix-ui/react-use-callback-ref': 1.0.0_react@18.2.0
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-use-layout-effect/1.0.0_react@18.2.0:
+    resolution: {integrity: sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.20.1
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-use-rect/1.0.0_react@18.2.0:
+    resolution: {integrity: sha512-TB7pID8NRMEHxb/qQJpvSt3hQU4sqNPM1VCTjTRjEOa7cEop/QMuq8S6fb/5Tsz64kqSvB9WnwsDHtjnrM9qew==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.20.1
+      '@radix-ui/rect': 1.0.0
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-use-size/1.0.0_react@18.2.0:
+    resolution: {integrity: sha512-imZ3aYcoYCKhhgNpkNDh/aTiU05qw9hX+HHI1QDBTyIlcFjgeFlKKySNGMwTp7nYFLQg/j0VA2FmCY4WPDDHMg==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.20.1
+      '@radix-ui/react-use-layout-effect': 1.0.0_react@18.2.0
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-visually-hidden/1.0.1_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-K1hJcCMfWfiYUibRqf3V8r5Drpyf7rh44jnrwAbdvI5iCCijilBBeyQv9SKidYNZIopMdCyR9FnIjkHxHN0FcQ==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.20.1
+      '@radix-ui/react-primitive': 1.0.1_biqbaboplfbrettd7655fr4n2y
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
+  /@radix-ui/rect/1.0.0:
+    resolution: {integrity: sha512-d0O68AYy/9oeEy1DdC07bz1/ZXX+DqCskRd3i4JzLSTXwefzaepQrKjXC7aNM8lTHjFLDO0pDgaEiQ7jEk+HVg==}
+    dependencies:
+      '@babel/runtime': 7.20.1
+    dev: false
+
   /@rushstack/eslint-patch/1.2.0:
     resolution: {integrity: sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==}
     dev: true
@@ -461,7 +772,6 @@ packages:
 
   /@types/prop-types/15.7.5:
     resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
-    dev: true
 
   /@types/react-datepicker/4.4.1_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-M8+hzwj+bpuwxC82z35NxkD3sqMl/vVXTs6xjPAsYqjucVXFpY1DK6ETKgICZE7YpuPYpf2OYF2OVZ5E7R42rA==}
@@ -487,11 +797,9 @@ packages:
       '@types/prop-types': 15.7.5
       '@types/scheduler': 0.16.2
       csstype: 3.1.1
-    dev: true
 
   /@types/scheduler/0.16.2:
     resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==}
-    dev: true
 
   /@types/unist/2.0.6:
     resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
@@ -714,6 +1022,21 @@ packages:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
     dev: true
 
+  /aria-hidden/1.2.1_ulhmhxukhxjgxaybrsjlob7ffu:
+    resolution: {integrity: sha512-PN344VAf9j1EAi+jyVHOJ8XidQdPVssGco39eNcsGdM4wcsILtxrKLkbuiMfLWYROK1FjRQasMWCBttrhjnr6A==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.9.0 || ^17.0.0 || ^18.0.0
+      react: ^16.9.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.0.9
+      react: 18.2.0
+      tslib: 2.4.1
+    dev: false
+
   /aria-query/4.2.2:
     resolution: {integrity: sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==}
     engines: {node: '>=6.0'}
@@ -1112,7 +1435,6 @@ packages:
 
   /csstype/3.1.1:
     resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==}
-    dev: true
 
   /damerau-levenshtein/1.0.8:
     resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
@@ -1235,6 +1557,10 @@ packages:
     engines: {node: '>=8'}
     dev: false
 
+  /detect-node-es/1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+    dev: false
+
   /detective-amd/3.1.2:
     resolution: {integrity: sha512-jffU26dyqJ37JHR/o44La6CxtrDf3Rt9tvd2IbImJYxWKTMdBjctp37qoZ6ZcY80RHg+kzWz4bXn39e4P7cctQ==}
     engines: {node: '>=6.0'}
@@ -1490,8 +1816,8 @@ packages:
       source-map: 0.6.1
     dev: true
 
-  /eslint-config-next/13.0.2_hsmo2rtalirsvadpuxki35bq2i:
-    resolution: {integrity: sha512-SrrHp+zBDYLjOFZdM5b9aW/pliK687Xxfa+qpDuL08Z04ReHhmz3L+maXaAqgrEVZHQximP7nh0El4yNDJW+CA==}
+  /eslint-config-next/13.0.3-canary.4_hsmo2rtalirsvadpuxki35bq2i:
+    resolution: {integrity: sha512-SXGzbo3HfAvdjxLTLdYAJ2ZvBAac9q2851MSYzQwDckcTTbA2NQqK+c+Zr8sfLs1f1hy8bmi3N4KX9ZiLsYRqw==}
     peerDependencies:
       eslint: ^7.23.0 || ^8.0.0
       typescript: '>=3.3.1'
@@ -1499,7 +1825,7 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@next/eslint-plugin-next': 13.0.2
+      '@next/eslint-plugin-next': 13.0.3-canary.4
       '@rushstack/eslint-patch': 1.2.0
       '@typescript-eslint/parser': 5.42.1_hsmo2rtalirsvadpuxki35bq2i
       eslint: 8.27.0
@@ -1961,6 +2287,11 @@ packages:
       has-symbols: 1.0.3
     dev: true
 
+  /get-nonce/1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+    dev: false
+
   /get-own-enumerable-property-symbols/3.0.2:
     resolution: {integrity: sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==}
     dev: true
@@ -2343,6 +2674,12 @@ packages:
       side-channel: 1.0.4
     dev: true
 
+  /invariant/2.2.4:
+    resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
+    dependencies:
+      loose-envify: 1.4.0
+    dev: false
+
   /is-alphabetical/2.0.1:
     resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
     dev: false
@@ -4021,6 +4358,58 @@ packages:
       react-fast-compare: 3.2.0
       warning: 4.0.3
 
+  /react-remove-scroll-bar/2.3.4_ulhmhxukhxjgxaybrsjlob7ffu:
+    resolution: {integrity: sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.0.9
+      react: 18.2.0
+      react-style-singleton: 2.2.1_ulhmhxukhxjgxaybrsjlob7ffu
+      tslib: 2.4.1
+    dev: false
+
+  /react-remove-scroll/2.5.5_ulhmhxukhxjgxaybrsjlob7ffu:
+    resolution: {integrity: sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.0.9
+      react: 18.2.0
+      react-remove-scroll-bar: 2.3.4_ulhmhxukhxjgxaybrsjlob7ffu
+      react-style-singleton: 2.2.1_ulhmhxukhxjgxaybrsjlob7ffu
+      tslib: 2.4.1
+      use-callback-ref: 1.3.0_ulhmhxukhxjgxaybrsjlob7ffu
+      use-sidecar: 1.1.2_ulhmhxukhxjgxaybrsjlob7ffu
+    dev: false
+
+  /react-style-singleton/2.2.1_ulhmhxukhxjgxaybrsjlob7ffu:
+    resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.0.9
+      get-nonce: 1.0.1
+      invariant: 2.2.4
+      react: 18.2.0
+      tslib: 2.4.1
+    dev: false
+
   /react-trigger-change/1.0.2:
     resolution: {integrity: sha512-3x2i/CTQZZlzTuDIfOrJ12r1IqcNWLxHVHXKTtlb4L0slt6Zy3YF3smimx4kdX4X/ASSuQnI/n1q4cTqDwWkPA==}
     dev: false
@@ -4934,6 +5323,50 @@ packages:
     deprecated: Please see https://github.com/lydell/urix#deprecated
     dev: true
 
+  /use-callback-ref/1.3.0_ulhmhxukhxjgxaybrsjlob7ffu:
+    resolution: {integrity: sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.0.9
+      react: 18.2.0
+      tslib: 2.4.1
+    dev: false
+
+  /use-isomorphic-layout-effect/1.1.2_ulhmhxukhxjgxaybrsjlob7ffu:
+    resolution: {integrity: sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.0.9
+      react: 18.2.0
+    dev: false
+
+  /use-sidecar/1.1.2_ulhmhxukhxjgxaybrsjlob7ffu:
+    resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.9.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.0.9
+      detect-node-es: 1.1.0
+      react: 18.2.0
+      tslib: 2.4.1
+    dev: false
+
   /use-sync-external-store/1.2.0_react@18.2.0:
     resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==}
     peerDependencies: