Add form field for water temperature

src/components/FieldWrapper.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col gap-1">
-    <label :for="inputId" class="ps-0.5 font-bold text-xs uppercase tracking-widest">{{ label }}</label>
+    <label :for="inputId" class="ps-0.5 font-bold text-xs uppercase tracking-widest whitespace-nowrap">{{ label }}</label>
     <slot :input-id="inputId"/>
   </div>
 </template>

src/components/specific/TypeOfTeaForm.vue

@@ -7,6 +7,9 @@
       <FieldWrapper label="Steeping time">
         <DurationInput v-model="data.steepingTime" largest-unit="minutes" :minimum="Temporal.Duration.from({ seconds: 10 })" :disabled="isLoading"/>
       </FieldWrapper>
+      <FieldWrapper label="Water temp. (°C)">
+        <TextualInput v-model="waterTemperatureInCelsius" type="number" min="0" max="300" :disabled="isLoading"/>
+      </FieldWrapper>
     </div>
     <FieldWrapper label="Note" v-slot="{ inputId }">
       <TextualInput v-model="data.notes" type="area" :id="inputId" :disabled="isLoading"/>
@@ -48,4 +51,14 @@
     savedData.value = cloneDeep(toRaw(data))
     isLoading.value = false
   }
+
+  const waterTemperatureInCelsius = computed({
+    set(newValue: string) {
+      const parsed = Number(newValue)
+      data.waterTemperatureInCelsius = isNaN(parsed) ? 100 : parsed
+    },
+    get() {
+      return String(data.waterTemperatureInCelsius)
+    }
+  })
 </script>