feat: add labels to textarea elements in translate modal

Signed-off-by: Luka Trovic <luka@nextcloud.com>

src/components/Modal/Translate.vue

@@ -35,10 +35,12 @@
 							:disabled="disableFromLanguageSelect"
 							:append-to-body="false" />
 					</div>
-					<textarea ref="input"
-						v-model="input"
+					<NcTextArea ref="input"
+						v-model="inputValue"
+						:label="t('text', 'Text to translate from')"
 						autofocus
-						@input="autosize"
+						input-class="translate-textarea"
+						resize="none"
 						@focus="onInputFocus" />
 				</div>
 				<div class="col">
@@ -51,9 +53,12 @@
 							:disabled="!fromLanguage"
 							:append-to-body="false" />
 					</div>
-					<textarea ref="result"
+					<NcTextArea ref="result"
 						v-model="result"
+						:label="t('text', 'Translated text result')"
 						readonly
+						input-class="translate-textarea"
+						resize="none"
 						:class="{'icon-loading': loading }" />
 				</div>
 			</div>
@@ -80,7 +85,7 @@
 import axios from '@nextcloud/axios'
 import { loadState } from '@nextcloud/initial-state'
 import { generateOcsUrl } from '@nextcloud/router'
-import { NcModal, NcButton, NcSelect, NcLoadingIcon } from '@nextcloud/vue'
+import { NcModal, NcButton, NcSelect, NcLoadingIcon, NcTextArea } from '@nextcloud/vue'
 import { useIsMobileMixin } from '../Editor.provider.js'
 
 const detectLanguageEntry = {
@@ -95,6 +100,7 @@ export default {
 		NcButton,
 		NcSelect,
 		NcLoadingIcon,
+		NcTextArea,
 	},
 	mixins: [
 		useIsMobileMixin,
@@ -119,6 +125,15 @@ export default {
 		}
 	},
 	computed: {
+		inputValue: {
+			get() {
+				return this.input
+			},
+			set(event) {
+				this.input = event.target.value
+				this.autosize()
+			},
+		},
 		fromLanguages() {
 			const result = this.canDetect ? [detectLanguageEntry] : []
 			const set = new Set()
@@ -195,12 +210,12 @@ export default {
 			this.$emit('replace-content', this.result)
 		},
 		autosize() {
-			this.$refs.input.style.overflowY = 'hidden'
-			this.$refs.input.style.height = 'auto'
-			const height = this.$refs.input.scrollHeight + 10
-			this.$refs.input.style.height = height + 'px'
-			this.$refs.result.style.height = height + 'px'
-			this.$refs.input.style.overflowY = 'auto'
+			this.$refs.input.$refs.input.style.overflowY = 'hidden'
+			this.$refs.input.$refs.input.style.height = 'auto'
+			const height = this.$refs.input.$refs.input.scrollHeight + 10
+			this.$refs.input.$refs.input.style.height = height + 'px'
+			this.$refs.result.$refs.input.style.height = height + 'px'
+			this.$refs.input.$refs.input.style.overflowY = 'auto'
 		},
 		onInputFocus() {
 			this.disableFromLanguageSelect = false
@@ -210,7 +225,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .translate-dialog {
 	margin: 24px;
 
@@ -232,15 +247,15 @@ export default {
 	}
 }
 
-textarea {
+.translate-textarea {
 	display: block;
 	width: 100%;
-	margin-bottom: 12px;
+	margin-bottom: 12px !important;
 	height: auto;
 	resize: none;
 	box-sizing: border-box;
 	overflow-y: auto;
-	max-height: 58vh;
+	max-height: 58vh !important;
 }
 
 @media (max-width: 670px) {
@@ -256,8 +271,8 @@ textarea {
 		}
 	}
 
-	textarea {
-		max-height: 20vh;
+	.translate-textarea {
+		max-height: 20vh !important;
 	}
 
 	label {