refactor(sidepanel): extract InputArea component

Author: LuxDie

src/components/InputArea.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import {
+  LanguageService,
+  type SupportedLanguageCode
+} from '@/entrypoints/background/language/language.service';
+
+const languageService = LanguageService.getInstance();
+
+const modelValue = defineModel<string>();
+
+defineProps<{
+  sourceLanguage: SupportedLanguageCode | null;
+}>();
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <label for="input-text">{{ t('inputLabel') }}</label>
+    <textarea
+      id="input-text"
+      v-model="modelValue"
+      class="border p-2 rounded-md"
+      rows="5"
+    ></textarea>
+    <div v-if="sourceLanguage">
+      {{ t('detectedLanguage', t(languageService.getLanguageKey(sourceLanguage))) }}
+    </div>
+  </div>
+</template>

src/entrypoints/sidepanel/SidepanelApp.vue

@@ -154,13 +154,10 @@ watch(summarize, () => {
 
     <ModelDownloadCard v-if="modelStatus" :status="modelStatus" />
 
-    <div class="flex flex-col gap-2">
-      <label for="input-text">Text to process:</label>
-      <textarea id="input-text" v-model="text" class="border p-2 rounded-md" rows="5"></textarea>
-      <div v-if="sourceLanguage">
-        Detected Language: {{ languageService.getLanguageKey(sourceLanguage) }}
-      </div>
-    </div>
+    <InputArea
+      v-model="text"
+      :source-language="sourceLanguage"
+    />
 
     <div v-if="warning" id="process-warning-container" class="text-yellow-800 bg-yellow-100 p-2 rounded-md">
       {{ warning }}