refactor: use Nuxt 4 directory structure

app/components/ResearchForm.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+  import { formInjectionKey } from '~/constants/injection-keys'
+
+  export interface ResearchInputData {
+    query: string
+    breadth: number
+    depth: number
+    numQuestions: number
+  }
+
+  defineProps<{
+    isLoadingFeedback: boolean
+  }>()
+
+  const emit = defineEmits<{
+    (e: 'submit'): void
+  }>()
+
+  const form = inject(formInjectionKey)!
+
+  const isSubmitButtonDisabled = computed(
+    () =>
+      !form.value.query ||
+      !form.value.breadth ||
+      !form.value.depth ||
+      !form.value.numQuestions,
+  )
+
+  function handleSubmit() {
+    emit('submit')
+  }
+</script>
+
+<template>
+  <UCard>
+    <template #header>
+      <h2 class="font-bold">{{ $t('researchTopic.title') }}</h2>
+    </template>
+    <div class="flex flex-col gap-2">
+      <UFormField :label="$t('researchTopic.inputTitle')" required>
+        <UTextarea
+          class="w-full"
+          v-model="form.query"
+          :rows="3"
+          :placeholder="$t('researchTopic.placeholder')"
+          required
+        />
+      </UFormField>
+
+      <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+        <UFormField :label="$t('researchTopic.numOfQuestions')" required>
+          <template #help>
+            {{ $t('researchTopic.numOfQuestionsHelp') }}
+          </template>
+          <UInput
+            v-model="form.numQuestions"
+            class="w-full"
+            type="number"
+            :min="1"
+            :max="5"
+            :step="1"
+          />
+        </UFormField>
+
+        <UFormField :label="$t('researchTopic.depth')" required>
+          <template #help>{{ $t('researchTopic.depthHelp') }}</template>
+          <UInput
+            v-model="form.depth"
+            class="w-full"
+            type="number"
+            :min="1"
+            :max="8"
+            :step="1"
+          />
+        </UFormField>
+
+        <UFormField :label="$t('researchTopic.breadth')" required>
+          <template #help>{{ $t('researchTopic.breadthHelp') }}</template>
+          <UInput
+            v-model="form.breadth"
+            class="w-full"
+            type="number"
+            :min="1"
+            :max="8"
+            :step="1"
+          />
+        </UFormField>
+      </div>
+    </div>
+
+    <template #footer>
+      <UButton
+        type="submit"
+        color="primary"
+        :loading="isLoadingFeedback"
+        :disabled="isSubmitButtonDisabled"
+        block
+        @click="handleSubmit"
+      >
+        {{
+          isLoadingFeedback
+            ? $t('researchTopic.researching')
+            : $t('researchTopic.start')
+        }}
+      </UButton>
+    </template>
+  </UCard>
+</template>