From bf656541265c2bd1db54a8870c5165442efd9245 Mon Sep 17 00:00:00 2001
From: nivedin <nivedinp@gmail.com>
Date: Tue, 14 May 2024 12:53:24 +0530
Subject: [PATCH] chore: update settings page interceptor section UI

---
 .../src/components/app/Interceptor.vue             | 14 +++++++++++++-
 packages/hoppscotch-common/src/pages/settings.vue  | 10 +++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/hoppscotch-common/src/components/app/Interceptor.vue b/packages/hoppscotch-common/src/components/app/Interceptor.vue
index 427770310..ed939816c 100644
--- a/packages/hoppscotch-common/src/components/app/Interceptor.vue
+++ b/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 =
diff --git a/packages/hoppscotch-common/src/pages/settings.vue b/packages/hoppscotch-common/src/pages/settings.vue
index dbe043786..42772c9bc 100644
--- a/packages/hoppscotch-common/src/pages/settings.vue
+++ b/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) }}