Bump deps

src/routes/+page.svelte

@@ -18,6 +18,10 @@
 	const formats = Object.keys(supportedFormats).map((f) => {
 		return { value: f, label: f.toUpperCase() };
 	});
+	const sources = [
+		{ value: 'youtube', label: 'YouTube' },
+		{ value: 'youtube', label: 'Any Other Website' }
+	];
 
 	const toggleModal = () => {
 		showModal = !showModal;
@@ -118,43 +122,20 @@
 
 	<p id="title" class="mb-6 text-center text-[#00e5ff]">🐙 Scaricatore 🐙</p>
 	<form class="space-y-6">
-		<!-- Source Selection -->
-		<fieldset class="space-y-4">
-			<legend class="text-[#00e5ff]">Choose Source:</legend>
-
-			<label class="flex items-center space-x-3">
-				<input type="radio" name="source" value="youtube" bind:group={source} class="retro-radio" />
-				<span>YouTube</span>
-			</label>
-
-			<label class="flex items-center space-x-3">
-				<input
-					disabled
-					type="radio"
-					name="source"
-					value="spotify"
-					bind:group={source}
-					class="retro-radio"
-				/>
-				<span class="not-available">Spotify</span>
-			</label>
-
-			<label class="flex items-center space-x-3">
-				<input type="radio" name="source" value="other" bind:group={source} class="retro-radio" />
-				<span>
-					Any other website
-					<!-- 
-						(<a
-						href="https://github.com/yt-dlp/yt-dlp/blob/master/supportedsites.md"
-						target="_blank"
-						rel="noopener noreferrer"
-						class="text-[#ff3399] hover:underline"
-						>supported sites
-					</a>)
-					-->
-				</span>
-			</label>
-		</fieldset>
+		<!-- Source selection -->
+		<div>
+			<label for="source" class="mb-2 block text-[#00e5ff]"> Choose Source: </label>
+			<select
+				id="source"
+				name="source"
+				bind:value={source}
+				class="w-full rounded-lg border-4 border-[#00ff7f] bg-[#001a00] px-4 py-3 text-[#00ff7f] focus:border-[#ff3399] focus:outline-none"
+			>
+				{#each sources as source}
+					<option value={source.value}>{source.label}</option>
+				{/each}
+			</select>
+		</div>
 
 		<!-- Link Input -->
 		<div>
@@ -263,26 +244,6 @@
 		justify-items: center;
 		align-items: center;
 	}
-	.not-available {
-		text-decoration-line: line-through;
-		text-decoration-color: red;
-	}
-
-	.retro-radio {
-		appearance: none;
-		background-color: #000;
-		border: 2px solid #00ff7f;
-		width: 20px;
-		height: 20px;
-		cursor: pointer;
-	}
-
-	.retro-radio:checked {
-		background-color: #00ff7f;
-		box-shadow:
-			0 0 4px #00ff7f,
-			0 0 10px #00ff7f;
-	}
 
 	input[type='url'],
 	select {