feat: added comments

src/routes/akti/[aktiId]/+page.svelte

@@ -4,10 +4,17 @@
 	import { EditOutline, CloseOutline } from 'flowbite-svelte-icons';
 	import AktiEditor from '$lib/components/akti/AktiEditor.svelte';
 	import UserDisplay from '$lib/components/UserDisplay.svelte';
+	import RatingCard from '$lib/components/rating/RatingCard.svelte';
+	import { resolve } from '$app/paths';
 
 	let { data }: PageProps = $props();
 
 	let edit = $state(false);
+	let canComment = $derived.by(() => {
+		if (!data.session) return false;
+		if (data.akti.author.id === data.session.user.id) return false;
+		return true;
+	});
 </script>
 
 <div class="flex justify-between">
@@ -37,4 +44,19 @@
 	</div>
 	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	{@html data.akti.body}
+
+	<div class="mt-10 mb-5 flex justify-between items-center">
+		<h3>Kommentär</h3>
+		{#if canComment}
+			<Button href={resolve('/akti/[aktiId]/comment', { aktiId: data.akti.id })}>
+				Ä Kommentar da la
+			</Button>
+		{/if}
+	</div>
+
+	<section class="grid grid-cols-1 gap-5 2xl:grid-cols-3">
+		{#each data.ratings as rating (rating.id)}
+			<RatingCard {rating} />
+		{/each}
+	</section>
 {/if}

src/routes/akti/[aktiId]/comment/+page.server.ts

@@ -0,0 +1,68 @@
+import type { PageServerLoad } from './$types';
+import { ensureAuth } from '$lib/auth';
+import { error, redirect, type Actions } from '@sveltejs/kit';
+import { extractFormData } from '$lib/extractFormData';
+import { aktis, ratings } from '$lib/server/db/schema';
+import { eq } from 'drizzle-orm';
+
+import * as v from 'valibot';
+import { db } from '$lib/server/db';
+import { resolve } from '$app/paths';
+
+export const load: PageServerLoad = async (event) => {
+	const user = await ensureAuth(event);
+
+	const res = await db
+		.select({ authorId: aktis.author })
+		.from(aktis)
+		.where(eq(aktis.id, event.params.aktiId));
+
+	if (!res[0]) return error(404);
+
+	if (res[0].authorId === user.id) return error(403);
+
+	return;
+};
+
+export const actions = {
+	default: async (event) => {
+		const user = await ensureAuth(event);
+
+		if (!event.params.aktiId) return error(404);
+
+		const akti = await db
+			.select({ id: aktis.id, version: aktis.version, author: aktis.author })
+			.from(aktis)
+			.limit(1)
+			.where(eq(aktis.id, event.params.aktiId));
+
+		if (!akti || akti.length == 0) return error(404);
+		if (akti[0].author == user.id) return error(403);
+
+		const rating = (
+			await extractFormData(
+				event.request,
+				v.object({
+					comment: v.pipe(v.string(), v.minLength(5)),
+					rating: v.pipe(
+						v.string(),
+						v.transform((i) => Number.parseFloat(i)),
+						v.minValue(0),
+						v.maxValue(5)
+					)
+				})
+			)
+		).data;
+
+		if (!rating) return error(400);
+
+		await db.insert(ratings).values({
+			...rating,
+			userId: user.id,
+			aktiId: event.params.aktiId,
+			aktiVersion: akti[0].version
+		});
+
+		return redirect(303, resolve(`/akti/[aktiId]`, { aktiId: event.params.aktiId }));
+	}
+} satisfies Actions;

src/routes/akti/[aktiId]/comment/+page.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import RatingEditor from '$lib/components/rating/RatingEditor.svelte';
+</script>
+
+<RatingEditor
+	rating={{
+		comment: '',
+		rating: 5
+	}}
+/>