Add clear button to rating input

src/ui/components/RatingInput.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Star, StarHalf } from "lucide-svelte";
+	import { Star, StarHalf, X } from "lucide-svelte";
 	import type { Snippet } from "svelte";
 
 	interface Props {
@@ -125,11 +125,26 @@
 			</div>
 		{/each}
 	</div>
+	<button
+		class="clear-rating"
+		type="button"
+		aria-label="Clear rating"
+		class:hidden={value === 0}
+		onclick={() => (value = 0)}
+	>
+		<X color="var(--text-muted)" />
+	</button>
 </div>
 
 <style lang="scss">
+	$clear-btn-size: 32px;
+
 	.rating-input {
 		cursor: pointer;
+		display: flex;
+		align-items: center;
+		gap: var(--size-4-2);
+		padding-left: calc($clear-btn-size + var(--size-4-2));
 
 		.ctrl {
 			position: absolute;
@@ -140,16 +155,37 @@
 			display: flex;
 		}
 
+		.rating-item {
+			position: relative;
+			width: var(--icon-size);
+			height: var(--icon-size);
+
 			:global(svg) {
 				position: absolute;
 				width: var(--icon-size);
 				height: var(--icon-size);
 			}
+		}
 
-		.rating-item {
+		.clear-rating {
-			position: relative;
+			all: unset;
-			width: var(--icon-size);
+			box-sizing: border-box;
-			height: var(--icon-size);
+			cursor: pointer;
+			height: $clear-btn-size;
+			width: $clear-btn-size;
+			border-radius: 50%;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			&:active,
+			&:hover {
+				background-color: var(--background-modifier-hover);
+			}
+
+			&.hidden {
+				visibility: hidden;
+			}
 		}
 	}
 </style>