Make scoll brightness

frontend/src/lib/components/Lamp.svelte

@@ -7,20 +7,35 @@
 	function handleBrightnessChange(event: Event) {
 		clearTimeout(timer);
 		timer = setTimeout(() => {
-			brightness = Number(event.target?.value);
+			const input = event.target as HTMLInputElement;
+			brightness = Number(input.value);
 			brightnessChange(lamp, brightness);
 		}, 300);
 	}
+
+	function handleWheel(event: WheelEvent) {
+		event.preventDefault();
+		const delta = event.deltaY > 0 ? -2 : 2;
+		const newBrightness = Math.max(0, Math.min(100, brightness + delta));
+		if (newBrightness !== brightness) {
+			brightness = newBrightness;
+			brightnessChange(lamp, brightness);
+		}
+	}
 </script>
 
 <div class="flex flex-col items-center justify-center p-4">
 	<div
-		class="w-48 h-48 rounded-full overflow-hidden mb-4"
+		class="w-48 h-48 rounded-full overflow-hidden mb-4 relative"
 		style="background-color: #FFD700; filter: brightness({brightness}%)"
+		on:wheel={handleWheel}
 	>
 		<svg class="w-48 h-48 fill-current text-yellow-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 			<path d="M12 2L2 22h20Z" />
 		</svg>
+		<div class="cursor-none absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-black bg-opacity-50 text-white px-2 py-1 rounded">
+			{Math.round(brightness)}%
+		</div>
 	</div>
 	<input type="range" min="0" max="100" step="1" value={brightness} on:input={handleBrightnessChange} class="w-4/5" />
 </div>