feat: add device location height

app/components/device/new/location-info.tsx

@@ -136,7 +136,7 @@ export function LocationStep() {
 				</BaseMap>
 			</div>
 
-			<div className="bg-background flex w-full items-center justify-around p-4">
+			<div className="bg-background grid w-full gap-4 p-4 md:grid-cols-2 xl:grid-cols-3">
 				<div>
 					<Label htmlFor="latitude">{t('latitude')}</Label>
 					<Input
@@ -178,6 +178,29 @@ export function LocationStep() {
 						</p>
 					) : null}
 				</div>
+
+				<div>
+					<Label htmlFor="height">
+						{t('height')} ({t('optional')})
+					</Label>
+					<Input
+						id="height"
+						type="number"
+						step="any"
+						{...register('height')}
+						placeholder={t('enter height')}
+						aria-describedby="height-info height-error"
+						className="w-full rounded-md border p-2"
+					/>
+					<p id="height-info" className="text-muted-foreground mt-1 text-xs">
+						{t('height_info_text')}
+					</p>
+					{errors.height?.message ? (
+						<p id="height-error" className="mt-1 text-sm text-red-600">
+							{String(errors.height.message)}
+						</p>
+					) : null}
+				</div>
 			</div>
 		</div>
 	)

app/components/device/new/new-device-stepper.tsx

@@ -180,6 +180,19 @@ export default function NewDeviceStepper() {
 		}
 	}
 
+	const onBack = () => {
+		const parsed = stepper.current.schema.safeParse(form.getValues())
+
+		if (parsed.success) {
+			setFormData((current) => ({
+				...current,
+				[stepper.current.id]: parsed.data,
+			}))
+		}
+
+		stepper.prev()
+	}
+
 	return (
 		<Stepper.Provider>
 			<FormProvider {...form}>
@@ -196,7 +209,17 @@ export default function NewDeviceStepper() {
 										<div className="flex gap-2" key={index}>
 											<BreadcrumbItem key={step.id}>
 												<BreadcrumbLink
-													onClick={() => stepper.goTo(step.id)}
+													onClick={() => {
+														if (stepper.current.id === step.id) return
+
+														void form.handleSubmit((data) => {
+															setFormData((current) => ({
+																...current,
+																[stepper.current.id]: data,
+															}))
+															stepper.goTo(step.id)
+														}, onError)()
+													}}
 													className={` ${
 														stepper.index === step.index
 															? 'text-foreground font-bold'
@@ -262,7 +285,7 @@ export default function NewDeviceStepper() {
 						<Button
 							type="button"
 							variant="secondary"
-							onClick={() => stepper.prev()}
+							onClick={onBack}
 							disabled={isFirst || isSubmitting}
 						>
 							{t('back')}

app/components/device/new/summary-info.tsx

@@ -31,6 +31,11 @@ export function SummaryInfo() {
 					label: 'longitude',
 					value: parseFloat(formData.longitude).toFixed(4),
 				},
+				...(formData.height !== undefined &&
+				formData.height !== null &&
+				formData.height !== ''
+					? [{ label: 'height', value: `${formData.height} m` }]
+					: []),
 			],
 		},
 		{

app/db/drizzle/0048_giant_carnage.sql

@@ -0,0 +1 @@
+ALTER TABLE "device" ADD COLUMN "height" double precision;