refactor: clean up number formatting and step handling in property tabs

1 files changed, 20 insertions, 4 deletions

diff --git a/apps/web/src/components/editor/panels/properties/tabs/audio-tab.tsx b/apps/web/src/components/editor/panels/properties/tabs/audio-tab.tsx
index a92f7be2..4dbc1a17 100644
--- a/apps/web/src/components/editor/panels/properties/tabs/audio-tab.tsx
+++ b/apps/web/src/components/editor/panels/properties/tabs/audio-tab.tsx
@@ -1,7 +1,13 @@
 import { NumberField } from "@/components/ui/number-field";

 import { VOLUME_DB_MAX, VOLUME_DB_MIN } from "@/lib/timeline/audio-constants";

 import { DEFAULTS } from "@/lib/timeline/defaults";

-import { clamp, isNearlyEqual } from "@/utils/math";

+import {

+	clamp,

+	formatNumberForDisplay,

+	getFractionDigitsForStep,

+	isNearlyEqual,

+	snapToStep,

+} from "@/utils/math";

 import type { AudioElement, VideoElement } from "@/lib/timeline";

 import { resolveNumberAtTime } from "@/lib/animation";

 import { useElementPlayhead } from "../hooks/use-element-playhead";

@@ -18,6 +24,9 @@ import {
 	SectionTitle,

 } from "@/components/section";

 

+const VOLUME_STEP = 0.1;

+const VOLUME_FRACTION_DIGITS = getFractionDigitsForStep({ step: VOLUME_STEP });

+

 export function AudioTab({

 	element,

 	trackId,

@@ -42,17 +51,24 @@ export function AudioTab({
 		propertyPath: "volume",

 		localTime,

 		isPlayheadWithinElementRange,

-		displayValue: resolvedVolume.toFixed(1),

+		displayValue: formatNumberForDisplay({

+			value: resolvedVolume,

+			fractionDigits: VOLUME_FRACTION_DIGITS,

+		}),

 		parse: (input) => {

 			const parsed = parseFloat(input);

 			if (Number.isNaN(parsed)) {

 				return null;

 			}

 

-			return clamp({ value: parsed, min: VOLUME_DB_MIN, max: VOLUME_DB_MAX });

+			return clamp({

+				value: snapToStep({ value: parsed, step: VOLUME_STEP }),

+				min: VOLUME_DB_MIN,

+				max: VOLUME_DB_MAX,

+			});

 		},

 		valueAtPlayhead: resolvedVolume,

-		step: 0.1,

+		step: VOLUME_STEP,

 		buildBaseUpdates: ({ value }) => ({

 			volume: value,

 		}),