chore: use samrt-env for gql headers

packages/hoppscotch-common/src/components/collections/graphql/Request.vue

@@ -137,8 +137,7 @@ import IconTrash2 from "~icons/lucide/trash-2"
 import { PropType, computed, ref } from "vue"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
-import { HoppGQLRequest, makeGQLRequest } from "@hoppscotch/data"
+import { HoppGQLRequest } from "@hoppscotch/data"
-import { cloneDeep } from "lodash-es"
 import { removeGraphqlRequest } from "~/newstore/collections"
 import { useService } from "dioc/vue"
 import { GQLTabService } from "~/services/tab/graphql"

packages/hoppscotch-common/src/components/graphql/Headers.vue

@@ -77,22 +77,11 @@
               tabindex="-1"
             />
           </span>
-          <HoppSmartAutoComplete
+          <SmartEnvInput
+            v-model="header.key"
             :placeholder="`${t('count.header', { count: index + 1 })}`"
-            :source="commonHeaders"
+            :auto-complete-source="commonHeaders"
-            :spellcheck="false"
+            @change="
-            :value="header.key"
-            autofocus
-            styles="
-                bg-transparent
-                flex
-                flex-1
-                py-1
-                px-4
-                truncate
-              "
-            class="!flex flex-1"
-            @input="
               updateHeader(index, {
                 id: header.id,
                 key: $event,
@@ -101,17 +90,14 @@
               })
             "
           />
-          <input
+          <SmartEnvInput
-            class="flex flex-1 bg-transparent px-4 py-2"
+            v-model="header.value"
             :placeholder="`${t('count.value', { count: index + 1 })}`"
-            :name="`value ${String(index)}`"
-            :value="header.value"
-            autofocus
             @change="
               updateHeader(index, {
                 id: header.id,
                 key: header.key,
-                value: ($event!.target! as HTMLInputElement).value,
+                value: $event,
                 active: header.active,
               })
             "