From 579c5e5b786621f0a9bde153e2f6f1b4c8f1b5e9 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sat, 25 Dec 2021 20:51:17 +0530
Subject: [PATCH] feat: add install extension buttons on interceptor menu

---
 .../components/app/Interceptor.vue            | 21 ++++++++++++++++++
 packages/hoppscotch-app/pages/settings.vue    | 22 +++++++++----------
 2 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/packages/hoppscotch-app/components/app/Interceptor.vue b/packages/hoppscotch-app/components/app/Interceptor.vue
index bfa8013ee..f9979204c 100644
--- a/packages/hoppscotch-app/components/app/Interceptor.vue
+++ b/packages/hoppscotch-app/components/app/Interceptor.vue
@@ -13,6 +13,27 @@
       :selected="interceptorSelection"
       @change="toggleSettingKey"
     />
+    <div
+      v-if="interceptorSelection == 'EXTENSIONS_ENABLED' && !extensionVersion"
+      class="flex space-x-2"
+    >
+      <ButtonSecondary
+        to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
+        blank
+        svg="brands/chrome"
+        label="Chrome"
+        outline
+        class="!flex-1"
+      />
+      <ButtonSecondary
+        to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
+        blank
+        svg="brands/firefox"
+        label="Firefox"
+        outline
+        class="!flex-1"
+      />
+    </div>
   </div>
 </template>
 
diff --git a/packages/hoppscotch-app/pages/settings.vue b/packages/hoppscotch-app/pages/settings.vue
index f5da4c924..584d85b46 100644
--- a/packages/hoppscotch-app/pages/settings.vue
+++ b/packages/hoppscotch-app/pages/settings.vue
@@ -128,17 +128,6 @@
               </span>
             </div>
             <div class="flex flex-col space-y-2 py-4">
-              <span>
-                <SmartItem
-                  to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
-                  blank
-                  svg="brands/firefox"
-                  label="Firefox"
-                  :info-icon="hasFirefoxExtInstalled ? 'check_circle' : ''"
-                  :active-info-icon="hasFirefoxExtInstalled"
-                  outline
-                />
-              </span>
               <span>
                 <SmartItem
                   to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
@@ -150,6 +139,17 @@
                   outline
                 />
               </span>
+              <span>
+                <SmartItem
+                  to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
+                  blank
+                  svg="brands/firefox"
+                  label="Firefox"
+                  :info-icon="hasFirefoxExtInstalled ? 'check_circle' : ''"
+                  :active-info-icon="hasFirefoxExtInstalled"
+                  outline
+                />
+              </span>
             </div>
             <div class="space-y-4 py-4">
               <div class="flex items-center">