From 6e04f3c013830cb790f18c2a682cd573fb02c1bd Mon Sep 17 00:00:00 2001
From: vegard <vnotnes@pm.me>
Date: Wed, 18 Mar 2026 05:49:42 +0000
Subject: [PATCH] =?UTF-8?q?Fullf=C3=B8rer=20oppgave=2017.4:=20Frontend=20i?=
 =?UTF-8?q?nput-begrensninger?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Legger til min/max-attributter på alle tallfelter i OperationPanel
slik at nettleseren hindrer ugyldig input før det sendes til backend.
Grensene matcher backend-valideringen i audio.rs:

- silenceThreshold: -96 til 0 dB
- silenceMinMs: 1 til 60000 ms
- normTarget: -70 til 0 LUFS
- fadeInMs/fadeOutMs: 1 til 300000 ms
- compThreshold: -60 til 0 dB
- compRatio: 1 til 20 (max lagt til, min fantes allerede)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../lib/components/studio/OperationPanel.svelte    | 14 +++++++-------
 tasks.md                                           |  3 +--
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/components/studio/OperationPanel.svelte b/frontend/src/lib/components/studio/OperationPanel.svelte
index e7858f6..4ae4165 100644
--- a/frontend/src/lib/components/studio/OperationPanel.svelte
+++ b/frontend/src/lib/components/studio/OperationPanel.svelte
@@ -133,12 +133,12 @@
 		<h3 class="mb-2 text-sm font-semibold text-gray-700">Trim stillhet</h3>
 		<div class="flex items-center gap-2">
 			<label class="text-xs text-gray-500">Terskel</label>
-			<input type="number" bind:value={silenceThreshold} class="w-16 rounded border px-1 py-0.5 text-xs" step="5" />
+			<input type="number" bind:value={silenceThreshold} class="w-16 rounded border px-1 py-0.5 text-xs" step="5" min="-96" max="0" />
 			<span class="text-xs text-gray-400">dB</span>
 		</div>
 		<div class="mt-1 flex items-center gap-2">
 			<label class="text-xs text-gray-500">Min varighet</label>
-			<input type="number" bind:value={silenceMinMs} class="w-16 rounded border px-1 py-0.5 text-xs" step="100" />
+			<input type="number" bind:value={silenceMinMs} class="w-16 rounded border px-1 py-0.5 text-xs" step="100" min="1" max="60000" />
 			<span class="text-xs text-gray-400">ms</span>
 		</div>
 		<button
@@ -154,7 +154,7 @@
 		<h3 class="mb-2 text-sm font-semibold text-gray-700">Normaliser loudness</h3>
 		<div class="flex items-center gap-2">
 			<label class="text-xs text-gray-500">Mal</label>
-			<input type="number" bind:value={normTarget} class="w-16 rounded border px-1 py-0.5 text-xs" step="1" />
+			<input type="number" bind:value={normTarget} class="w-16 rounded border px-1 py-0.5 text-xs" step="1" min="-70" max="0" />
 			<span class="text-xs text-gray-400">LUFS</span>
 		</div>
 		<button
@@ -172,7 +172,7 @@
 			<div class="flex-1">
 				<label class="text-xs text-gray-500">Fade inn</label>
 				<div class="flex items-center gap-1">
-					<input type="number" bind:value={fadeInMs} class="w-16 rounded border px-1 py-0.5 text-xs" step="500" />
+					<input type="number" bind:value={fadeInMs} class="w-16 rounded border px-1 py-0.5 text-xs" step="500" min="1" max="300000" />
 					<span class="text-xs text-gray-400">ms</span>
 				</div>
 				<button
@@ -185,7 +185,7 @@
 			<div class="flex-1">
 				<label class="text-xs text-gray-500">Fade ut</label>
 				<div class="flex items-center gap-1">
-					<input type="number" bind:value={fadeOutMs} class="w-16 rounded border px-1 py-0.5 text-xs" step="500" />
+					<input type="number" bind:value={fadeOutMs} class="w-16 rounded border px-1 py-0.5 text-xs" step="500" min="1" max="300000" />
 					<span class="text-xs text-gray-400">ms</span>
 				</div>
 				<button
@@ -248,12 +248,12 @@
 		<div class="space-y-1">
 			<div class="flex items-center gap-2">
 				<label class="text-xs text-gray-500">Terskel</label>
-				<input type="number" bind:value={compThreshold} class="w-16 rounded border px-1 py-0.5 text-xs" step="1" />
+				<input type="number" bind:value={compThreshold} class="w-16 rounded border px-1 py-0.5 text-xs" step="1" min="-60" max="0" />
 				<span class="text-xs text-gray-400">dB</span>
 			</div>
 			<div class="flex items-center gap-2">
 				<label class="text-xs text-gray-500">Ratio</label>
-				<input type="number" bind:value={compRatio} class="w-16 rounded border px-1 py-0.5 text-xs" step="0.5" min="1" />
+				<input type="number" bind:value={compRatio} class="w-16 rounded border px-1 py-0.5 text-xs" step="0.5" min="1" max="20" />
 				<span class="text-xs text-gray-400">:1</span>
 			</div>
 		</div>
diff --git a/tasks.md b/tasks.md
index 45ccb55..0c9e446 100644
--- a/tasks.md
+++ b/tasks.md
@@ -192,8 +192,7 @@ Ref: Kodegjennomgang av `b4c4bb8` (Lydstudio: lydredigering via FFmpeg).
 - [x] 17.1 Responsivt studio-layout: `/studio/[id]` sidebar stacker under waveform på mobil. Verktøypanel som modal/sheet på små skjermer. Ref: feedback om at alt UI skal være responsivt uten unntak.
 - [x] 17.2 FFmpeg-parametervalidering: valider at alle numeriske verdier (threshold, gain, ratio, frekvenser) er innenfor sikre grenser i `audio.rs` før de interpoleres i filterstrenger. Avvis ugyldige verdier med feilmelding.
 - [x] 17.3 Fade/silence-logikk: fiks negativ fade-out start (clamp til 0), og adaptiv silence-margin (margin skal ikke overstige halve regionens varighet). Gi feilmelding ved ugyldige fade-varigheter.
-- [~] 17.4 Frontend input-begrensninger: legg til `min`/`max` på alle tallfelter i OperationPanel (silenceThreshold, fadeMs, normTarget, compRatio). Hindre ugyldig input.
-  > Påbegynt: 2026-03-18T05:48
+- [x] 17.4 Frontend input-begrensninger: legg til `min`/`max` på alle tallfelter i OperationPanel (silenceThreshold, fadeMs, normTarget, compRatio). Hindre ugyldig input.
 - [ ] 17.5 Job-polling opprydding: rydd opp interval/timeout ved navigering bort fra studio-siden. Vis feilmelding etter N mislykkede polling-forsøk. Wrap metadata JSON.parse i try/catch.
 - [ ] 17.6 Temp-fil opprydding: legg til periodisk jobb i maskinrommet som sletter gamle temp-filer i CAS tmp-katalog. Bruk `/tmp` eller sett TTL.
 - [ ] 17.7 FFmpeg feilmeldinger til bruker: propager stderr fra FFmpeg-feil til frontend via strukturert feilrespons. Vis i RenderDialog.