added succesfully uploaded modal on post id page

src/routes/posts/[postId]/+page.server.ts

@@ -1,11 +1,11 @@
-import { SINGLE_POST_CACHE_TIME_SECONDS } from '$lib/server/constants/sessions';
 import { PUBLIC_POST_SELECTORS } from '$lib/server/constants/posts';
+import { SINGLE_POST_CACHE_TIME_SECONDS } from '$lib/server/constants/sessions';
 import { findPostByIdWithUpdatedViewCount } from '$lib/server/db/actions/post';
 import { cacheResponse } from '$lib/server/helpers/sessions';
 import { error } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 
-export const load: PageServerLoad = async ({ params, setHeaders }) => {
+export const load: PageServerLoad = async ({ params, setHeaders, url }) => {
 	const postId = params.postId;
 	if (!postId) {
 		throw error(400, { message: `The post id is a required parameter!` });
@@ -19,5 +19,7 @@ export const load: PageServerLoad = async ({ params, setHeaders }) => {
 
 	cacheResponse(setHeaders, SINGLE_POST_CACHE_TIME_SECONDS);
 
-	return { post };
+	const uploadedSuccessfully = url.searchParams.get('uploadedSuccessfully');
+
+	return { post, uploadedSuccessfully: uploadedSuccessfully === 'true' ? true : false };
 };

src/routes/posts/[postId]/+page.svelte

@@ -7,21 +7,32 @@
 	import { commentTreeStore } from '$lib/client/stores/comments';
 	import { authenticatedUserStore } from '$lib/client/stores/users';
 	import { formatDate } from '$lib/shared/helpers/dates';
+	import { Button, Modal } from 'flowbite-svelte';
 	import { onDestroy } from 'svelte';
 	import type { PageData } from './$types';
 
 	export let data: PageData;
-	let { post } = data;
+
+	let { post, uploadedSuccessfully } = data;
 	let totalPostCommentCount: string = '0';
+	let uploadSuccessModalOpen = true;
 
 	$: {
 		post = data.post;
+		uploadedSuccessfully = data.uploadedSuccessfully;
 	}
 
 	const commentTreeUnsubscribe = commentTreeStore.subscribe((tree) => {
 		totalPostCommentCount = normalizeCount(tree.getCount());
 	});
 
+	const uploadSuccessModalClose = () => {
+		uploadSuccessModalOpen = false;
+
+		const currentUrl = new URL(window.location.href);
+		history.replaceState({}, document.title, currentUrl.pathname);
+	};
+
 	onDestroy(() => {
 		commentTreeUnsubscribe();
 	});
@@ -31,6 +42,31 @@
 	<title>{post.description} - {post.id}</title>
 </svelte:head>
 
+{#if uploadedSuccessfully && $authenticatedUserStore && $authenticatedUserStore.id === post.author.id}
+	<Modal
+		title="Your post was uploaded succesfully! 🚀🚀"
+		open={uploadSuccessModalOpen}
+		outsideclose
+		on:close={uploadSuccessModalClose}
+	>
+		<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+			We got your post into Dexbooru succesfully! It should show up in your uploaded posts that can
+			be found <a
+				class="inline-flex items-center text-primary-600 hover:underline"
+				href="/profile/posts/uploaded">here</a
+			>.
+		</p>
+
+		<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+			You can delete the post if you want, via the card preview on the uploaded posts page.
+		</p>
+
+		<svelte:fragment slot="footer">
+			<Button on:click={uploadSuccessModalClose}>Return to post</Button>
+		</svelte:fragment>
+	</Modal>
+{/if}
+
 <main class="m-5 space-y-5">
 	<div class="space-y-2">
 		<p class="text-lg dark:text-white">

src/routes/posts/upload/+page.svelte

@@ -86,7 +86,7 @@
 
 		if (form && form.newPost) {
 			const newPostid = form.newPost.id as string;
-			goto(`/posts/${newPostid}`);
+			goto(`/posts/${newPostid}?uploadedSuccessfully=true`);
 		}
 	});
 </script>