Some styling fixes, potentially fix building w/ docker

src/app/(posts)/post/[id]/components/post-files/index.tsx

@@ -21,7 +21,7 @@ const PostFiles = ({ post: _initialPost }: Props) => {
 	const [post, setPost] = useState<PostWithFilesAndAuthor>(initialPost)
 	const router = useRouter()
 
-	if (post.expiresAt) {
+	if (post?.expiresAt) {
 		if (new Date(post.expiresAt) < new Date()) {
 			router.push("/expired")
 		}
@@ -29,7 +29,7 @@ const PostFiles = ({ post: _initialPost }: Props) => {
 
 	useEffect(() => {
 		let interval: NodeJS.Timer | null = null
-		if (post.expiresAt) {
+		if (post?.expiresAt) {
 			interval = setInterval(() => {
 				const expirationDate = new Date(post.expiresAt ? post.expiresAt : "")
 				if (expirationDate < new Date()) {
@@ -41,10 +41,10 @@ const PostFiles = ({ post: _initialPost }: Props) => {
 		return () => {
 			if (interval) clearInterval(interval)
 		}
-	}, [post.expiresAt, router])
+	}, [post?.expiresAt, router])
 
-	const isProtected = post.visibility === "protected"
+	const isProtected = post?.visibility === "protected"
-	const hasFetched = post.files !== undefined
+	const hasFetched = post?.files !== undefined
 	if (isProtected && !hasFetched) {
 		return (
 			<PasswordModalPage
@@ -63,7 +63,7 @@ const PostFiles = ({ post: _initialPost }: Props) => {
 				gap: "var(--gap-double)"
 			}}
 		>
-			{post.files?.map(({ id, content, title, html }) => (
+			{post?.files?.map(({ id, content, title, html }) => (
 				<DocumentComponent
 					skeleton={false}
 					key={id}

src/app/(posts)/post/[id]/components/post-files/password-modal-wrapper.tsx

@@ -21,8 +21,7 @@ const PasswordModalPage = ({ setPost, postId, authorId }: Props) => {
 		status === "loading"
 			? undefined
 			: session?.user && session?.user?.id === authorId
-	const [isPasswordModalOpen, setIsPasswordModalOpen] = useState(true)
+	const [isPasswordModalOpen, setIsPasswordModalOpen] = useState(false)
-
 	const onSubmit = useCallback(async (password: string) => {
 		const res = await fetch(`/api/post/${postId}?password=${password}`, {
 			method: "GET",
@@ -48,7 +47,7 @@ const PasswordModalPage = ({ setPost, postId, authorId }: Props) => {
 				})
 			} else {
 				setIsPasswordModalOpen(false)
-				setPost(data)
+				setPost(data.post)
 			}
 		}
 	}, [postId, setPost, setToast])
@@ -66,6 +65,8 @@ const PasswordModalPage = ({ setPost, postId, authorId }: Props) => {
 					"You're the author of this post, so you automatically have access to it.",
 				type: "default"
 			})
+		} else if (isAuthor === false) {
+			setIsPasswordModalOpen(true)
 		}
 	}, [isAuthor, onSubmit, setToast])
 

src/app/components/badges/visibility-control/index.tsx

@@ -7,6 +7,7 @@ import Button from "@components/button"
 import { useToasts } from "@components/toasts"
 import { Spinner } from "@components/spinner"
 import { useSession } from "next-auth/react"
+import { useRouter } from "next/navigation"
 
 type Props = {
 	authorId: string
@@ -22,6 +23,7 @@ const VisibilityControl = ({ authorId, postId, visibility: postVisibility }: Pro
 	const [isSubmitting, setSubmitting] = useState<string | null>()
 	const [passwordModalVisible, setPasswordModalVisible] = useState(false)
 	const { setToast } = useToasts()
+	const router = useRouter();
 
 	const sendRequest = useCallback(
 		async (visibility: string, password?: string) => {
@@ -36,6 +38,7 @@ const VisibilityControl = ({ authorId, postId, visibility: postVisibility }: Pro
 			if (res.ok) {
 				const json = await res.json()
 				setVisibility(json.visibility)
+				router.refresh()
 			} else {
 				setToast({
 					message: "An error occurred",

src/app/components/header/header.module.css

@@ -38,7 +38,7 @@
 
 .header {
 	transition: opacity 0.2s ease-in-out;
-	opacity: 0;
+	opacity: .5;
 }
 
 .header:not(.loading) {
@@ -67,6 +67,10 @@
 }
 
 @media only screen and (max-width: 768px) {
+	.header {
+		opacity: 1;
+	}
+
 	.wrapper [data-tab="github"] {
 		display: none;
 	}

src/app/components/page/page.module.css

@@ -7,3 +7,10 @@
 	height: auto;
 	margin: 0 auto;
 }
+
+/* 55rem == --main-content */
+@media screen and (max-width: 55rem) {
+	.page {
+		padding: 0 1rem;
+	}
+}

src/app/page.tsx

@@ -66,7 +66,7 @@ export default async function Page() {
 			</Card>
 			<div>
 				<h2>Recent public posts</h2>
-				{/* @ts-ignore because of async RSC */}
+				{/* @ts-expect-error because of async RSC */}
 				<PublicPostList getPostsPromise={getPostsPromise} />
 			</div>
 		</div>
@@ -78,16 +78,28 @@ async function PublicPostList({
 }: {
 	getPostsPromise: Promise<Post[]>
 }) {
-	const posts = await getPostsPromise
+	try {
-	return (
+		const posts = await getPostsPromise
-		<PostList
+		return (
-			userId={undefined}
+			<PostList
-			morePosts={false}
+				userId={undefined}
-			initialPosts={JSON.stringify(posts)}
+				morePosts={false}
-			hideActions
+				initialPosts={JSON.stringify(posts)}
-			hideSearch
+				hideActions
-		/>
+				hideSearch
-	)
+			/>
+		)
+	} catch (error) {
+		return (
+			<PostList
+				userId={undefined}
+				morePosts={false}
+				initialPosts={[]}
+				hideActions
+				hideSearch
+			/>
+		)
+	}
 }
 
 export const revalidate = 60

src/pages/api/post/[id].ts

@@ -44,7 +44,8 @@ async function handleGet(req: NextApiRequest, res: NextApiResponse<unknown>) {
 	// the user can always go directly to their own post
 	if (session?.user.id === post.authorId) {
 		return res.json({
-			...post
+			post: post,
+			password: undefined
 		})
 	}
 
@@ -58,7 +59,8 @@ async function handleGet(req: NextApiRequest, res: NextApiResponse<unknown>) {
 
 		if (hash === post.password) {
 			return res.json({
-				...post
+				post,
+				password: undefined
 			})
 		} else {
 			return res.json({