feat: added comments

src/lib/components/rating/RatingCard.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Rating as FbRating } from 'flowbite-svelte';
+	import UserDisplay from '../UserDisplay.svelte';
+	interface Rating {
+		rating: number;
+		comment: string;
+		outdated?: boolean;
+		user?: {
+			name: string | null;
+			image: string | null;
+		};
+	}
+	let { rating }: { rating: Rating } = $props();
+</script>
+
+<div
+	class="w-full bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-700 shadow-md flex flex-col items-start p-5 gap-5"
+>
+	{#if rating.user}
+		<UserDisplay user={rating.user} />
+	{/if}
+	{#if rating.outdated}
+		<span class="self-end">i</span>
+	{/if}
+
+	<p class="text-left">{rating.comment}</p>
+
+	{#if rating.rating}
+		<FbRating id="example-1b" total={5} size={30} rating={rating.rating} class="self-end mt-auto" />
+	{/if}
+</div>

src/lib/components/rating/RatingEditor.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Button, Label, Textarea } from 'flowbite-svelte';
+	import RatingInput from './RatingInput.svelte';
+	interface Rating {
+		rating: number;
+		comment: string;
+	}
+	let { rating }: { rating: Rating } = $props();
+</script>
+
+<form method="POST" class="flex flex-col gap-5">
+	<div>
+		<Label>Komentar</Label>
+		<Textarea
+			value={rating.comment}
+			name="comment"
+			required
+			minlength={5}
+			class="w-full min-h-40"
+		/>
+	</div>
+	<div>
+		<Label>Bewärtig</Label>
+		<RatingInput value={rating.rating} name="rating" />
+	</div>
+	<Button type="submit" class="grow-0 self-end">Spichere</Button>
+</form>

src/lib/components/rating/RatingInput.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { StarHalfSolid, StarSolid } from 'flowbite-svelte-icons';
+	import { twMerge, type ClassNameValue } from 'tailwind-merge';
+
+	let {
+		value = $bindable(5),
+		name,
+		disabled = false,
+		class: className
+	}: { value?: number; name?: string; disabled?: boolean; class?: ClassNameValue } = $props();
+
+	let stars = $derived(
+		[0, 1, 2, 3, 4].map((i) => {
+			if (value - i >= 1) {
+				return { id: i, value: 1 };
+			} else if (value - i >= 0.5) {
+				return { id: i, value: 0.5 };
+			}
+			return { id: i, value: 0 };
+		})
+	);
+</script>
+
+{#if name}
+	<input
+		type="number"
+		{name}
+		bind:value
+		tabindex="-1"
+		style="opacity: 0; position: absolute; pointer-events: none; z-index: -1; bottom: 0; left: 50%; height: 0; width: 0;"
+	/>
+{/if}
+
+<span class={twMerge('flex justify-between ', className)}>
+	<!-- es -->
+	{#each stars as s (s.id)}
+		<button
+			type="button"
+			{disabled}
+			onclick={() => {
+				if (s.id === 0 && value == 0.5) {
+					value = 0;
+					return;
+				}
+				if (value === s.id + 1) {
+					value = s.id + 0.5;
+					return;
+				}
+				value = s.id + 1;
+			}}
+			class="grid grid-cols-2 grid-rows-1"
+		>
+			{#if s.value >= 1}
+				<StarSolid class="col-span-2 text-amber-400" />
+			{:else}
+				<StarSolid class="col-span-2 col-start-1 row-start-1" />
+				{#if s.value >= 0.5}
+					<StarHalfSolid class="col-span-1 col-start-1 row-start-1 text-amber-400" />
+				{/if}
+			{/if}
+		</button>
+	{/each}
+</span>

src/lib/server/db/schema/akti.ts

@@ -26,7 +26,7 @@ export const ratings = pgTable('rating', {
 		.notNull()
 		.references(() => users.id, { onDelete: 'cascade' }),
 	rating: real().notNull(),
-	comment: text(),
+	comment: text().notNull(),
 	aktiVersion: integer('akti_version').notNull()
 });