feat: add reason phrase to http status code

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

@@ -1,5 +1,13 @@
 <template>
   <div class="flex flex-col space-y-4 p-4 items-start">
+    <div class="flex flex-col">
+      <h2 class="inline-flex font-semibold text-secondaryDark pb-2">
+        {{ t("settings.interceptor") }}
+      </h2>
+      <p class="inline-flex">
+        {{ t("settings.interceptor_description") }}
+      </p>
+    </div>
     <SmartToggle
       :on="PROXY_ENABLED"
       @change="toggleSettingKey('PROXY_ENABLED')"

packages/hoppscotch-app/components/app/Share.vue

@@ -56,7 +56,7 @@ const text = "Hoppscotch - Open source API development ecosystem."
 const description =
   "Helps you create requests faster, saving precious time on development."
 const subject = "Checkout Hoppscotch - an open source API development ecosystem"
-const summary = `Hi there!%0D%0A%0D%0AI thought you’ll like this new platform that I joined called Hoppscotch - https://hoppscotch.io.%0D%0AIt is a simple and intuitive interface for creating and managing your APIs. You can build, test, document, and share your APIs.%0D%0A%0D%0AThe best part about Hoppscotch is that it is open source and free to get started.%0D%0A%0D%0A`
+const summary = `Hi there!%0D%0A%0D%0AI thought you'll like this new platform that I joined called Hoppscotch - https://hoppscotch.io.%0D%0AIt is a simple and intuitive interface for creating and managing your APIs. You can build, test, document, and share your APIs.%0D%0A%0D%0AThe best part about Hoppscotch is that it is open source and free to get started.%0D%0A%0D%0A`
 const twitter = "hoppscotch_io"
 
 const copyIcon = ref("copy")

packages/hoppscotch-app/components/collections/my/Request.vue

@@ -39,9 +39,17 @@
             active.requestIndex === requestIndex
           "
           v-tippy="{ theme: 'tooltip' }"
-          class="rounded-full bg-green-500 flex-shrink-0 h-1.5 mx-3 w-1.5"
+          class="relative h-1.5 w-1.5 flex flex-shrink-0 mx-3"
           :title="`${$t('collection.request_in_use')}`"
-        ></span>
+        >
+          <span
+            class="absolute animate-ping inline-flex flex-shrink-0 h-full w-full rounded-full bg-green-500 opacity-75"
+          >
+          </span>
+          <span
+            class="relative inline-flex flex-shrink-0 rounded-full h-1.5 w-1.5 bg-green-500"
+          ></span>
+        </span>
       </span>
       <div class="flex">
         <ButtonSecondary

packages/hoppscotch-app/components/collections/teams/Request.vue

@@ -38,9 +38,17 @@
             active.requestID === requestIndex
           "
           v-tippy="{ theme: 'tooltip' }"
-          class="rounded-full bg-green-500 flex-shrink-0 h-1.5 mx-3 w-1.5"
+          class="relative h-1.5 w-1.5 flex flex-shrink-0 mx-3"
           :title="`${$t('collection.request_in_use')}`"
-        ></span>
+        >
+          <span
+            class="absolute animate-ping inline-flex flex-shrink-0 h-full w-full rounded-full bg-green-500 opacity-75"
+          >
+          </span>
+          <span
+            class="relative inline-flex flex-shrink-0 rounded-full h-1.5 w-1.5 bg-green-500"
+          ></span>
+        </span>
       </span>
       <div class="flex">
         <ButtonSecondary

packages/hoppscotch-app/components/http/ResponseMeta.vue

@@ -101,22 +101,46 @@
         </div>
       </div>
       <div
-        v-if="response.type === 'success' || 'fail'"
-        :class="statusCategory.className"
-        class="font-semibold space-x-4"
+        v-if="response.type === 'success' || response.type === 'fail'"
+        class="font-semibold flex items-center text-tiny"
       >
-        <span v-if="response.statusCode">
-          <span class="text-secondary"> {{ t("response.status") }}: </span>
-          {{ response.statusCode || t("state.waiting_send_request") }}
-        </span>
-        <span v-if="response.meta && response.meta.responseDuration">
-          <span class="text-secondary"> {{ t("response.time") }}: </span>
-          {{ `${response.meta.responseDuration} ms` }}
-        </span>
-        <span v-if="response.meta && response.meta.responseSize">
-          <span class="text-secondary"> {{ t("response.size") }}: </span>
-          {{ `${response.meta.responseSize} B` }}
-        </span>
+        <div
+          :class="statusCategory.className"
+          class="space-x-4 inline-flex flex-1"
+        >
+          <span v-if="response.statusCode">
+            <span class="text-secondary"> {{ t("response.status") }}: </span>
+            {{ `${response.statusCode}\xA0 • \xA0`
+            }}{{ getStatusCodeReasonPhrase(response.statusCode) }}
+          </span>
+          <span v-if="response.meta && response.meta.responseDuration">
+            <span class="text-secondary"> {{ t("response.time") }}: </span>
+            {{ `${response.meta.responseDuration} ms` }}
+          </span>
+          <span v-if="response.meta && response.meta.responseSize">
+            <span class="text-secondary"> {{ t("response.size") }}: </span>
+            {{ `${response.meta.responseSize} B` }}
+          </span>
+        </div>
+        <div class="inline-flex">
+          <tippy
+            ref="options"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
+          >
+            <template #trigger>
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="t('settings.interceptor')"
+                svg="globe"
+                class="!p-0"
+              />
+            </template>
+            <AppInterceptor />
+          </tippy>
+        </div>
       </div>
     </div>
   </div>
@@ -128,6 +152,7 @@ import findStatusGroup from "~/helpers/findStatusGroup"
 import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
 import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
 import { useI18n } from "~/helpers/utils/composables"
+import { getStatusCodeReasonPhrase } from "~/helpers/utils/statusCodes"
 
 const t = useI18n()
 
@@ -141,7 +166,10 @@ const statusCategory = computed(() => {
     props.response.type === "network_fail" ||
     props.response.type === "script_fail"
   )
-    return ""
+    return {
+      name: "error",
+      className: "text-red-500",
+    }
   return findStatusGroup(props.response.statusCode)
 })
 </script>