chore: update settings page interceptor section UI

packages/hoppscotch-common/src/components/app/Interceptor.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col space-y-2">
-    <div class="flex flex-col px-4 pt-2">
+    <div v-if="isTooltipComponent" class="flex flex-col px-4 pt-2">
       <h2 class="inline-flex pb-1 font-semibold text-secondaryDark">
         {{ t("settings.interceptor") }}
       </h2>
@@ -19,6 +19,9 @@
           :value="interceptor.interceptorID"
           :label="unref(interceptor.name(t))"
           :selected="interceptorSelection === interceptor.interceptorID"
+          :class="{
+            'px-0 hover:bg-transparent': !isTooltipComponent,
+          }"
           @change="interceptorSelection = interceptor.interceptorID"
         />
 
@@ -39,6 +42,15 @@ import { InterceptorService } from "~/services/interceptor.service"
 
 const t = useI18n()
 
+withDefaults(
+  defineProps<{
+    isTooltipComponent?: boolean
+  }>(),
+  {
+    isTooltipComponent: true,
+  }
+)
+
 const interceptorService = useService(InterceptorService)
 
 const interceptorSelection =

packages/hoppscotch-common/src/pages/settings.vue

@@ -98,7 +98,15 @@
           </p>
         </div>
         <div class="space-y-8 p-8 md:col-span-2">
-          <AppInterceptor />
+          <section class="flex flex-col">
+            <h4 class="font-semibold text-secondaryDark">
+              {{ t("settings.interceptor") }}
+            </h4>
+            <p class="my-1 text-secondaryLight capitalize">
+              {{ interceptorService.currentInterceptor.value?.interceptorID }}
+            </p>
+            <AppInterceptor :is-tooltip-component="false" />
+          </section>
           <section v-for="[id, settings] in interceptorsWithSettings" :key="id">
             <h4 class="font-semibold text-secondaryDark">
               {{ settings.entryTitle(t) }}