From 25e980eff165b6bc79d959cb90ef2cfbeb16d936 Mon Sep 17 00:00:00 2001
From: Evan Fiordeliso <evan.fiordeliso@gmail.com>
Date: Fri, 8 Aug 2025 23:04:56 -0400
Subject: [PATCH] Add clear button to rating input

---
 src/ui/components/RatingInput.svelte | 50 ++++++++++++++++++++++++----
 1 file changed, 43 insertions(+), 7 deletions(-)

diff --git a/src/ui/components/RatingInput.svelte b/src/ui/components/RatingInput.svelte
index b8946d8..677c05c 100644
--- a/src/ui/components/RatingInput.svelte
+++ b/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;
 		}
 
-		:global(svg) {
-			position: absolute;
-			width: var(--icon-size);
-			height: var(--icon-size);
-		}
-
 		.rating-item {
 			position: relative;
 			width: var(--icon-size);
 			height: var(--icon-size);
+
+			:global(svg) {
+				position: absolute;
+				width: var(--icon-size);
+				height: var(--icon-size);
+			}
+		}
+
+		.clear-rating {
+			all: unset;
+			box-sizing: border-box;
+			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>