From 4ac8a117efe35b9b5aba70b4499687fe95807df0 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Tue, 12 Dec 2023 14:25:56 +0530
Subject: [PATCH] chore: add protocol logos to realtime page (#3637)

---
 .../hoppscotch-common/assets/icons/graphql.svg  |  2 +-
 .../hoppscotch-common/assets/icons/mqtt.svg     |  1 +
 .../hoppscotch-common/assets/icons/socketio.svg |  1 +
 .../assets/icons/websocket.svg                  |  1 +
 .../hoppscotch-common/src/pages/realtime.vue    | 17 +++++++++++++----
 .../hoppscotch-ui/src/components/smart/Tabs.vue |  3 ++-
 6 files changed, 19 insertions(+), 6 deletions(-)
 create mode 100644 packages/hoppscotch-common/assets/icons/mqtt.svg
 create mode 100644 packages/hoppscotch-common/assets/icons/socketio.svg
 create mode 100644 packages/hoppscotch-common/assets/icons/websocket.svg

diff --git a/packages/hoppscotch-common/assets/icons/graphql.svg b/packages/hoppscotch-common/assets/icons/graphql.svg
index c2d4d47a0..f04d6a53d 100644
--- a/packages/hoppscotch-common/assets/icons/graphql.svg
+++ b/packages/hoppscotch-common/assets/icons/graphql.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width=".88em" height="1em" viewBox="0 0 21 24" class="iconify iconify--fontisto"><path fill="currentColor" d="M12.731 2.751 17.666 5.6a2.138 2.138 0 1 1 2.07 3.548l-.015.003v5.7a2.14 2.14 0 1 1-2.098 3.502l-.002-.002-4.905 2.832a2.14 2.14 0 1 1-4.079.054l-.004.015-4.941-2.844a2.14 2.14 0 1 1-2.067-3.556l.015-.003V9.15a2.14 2.14 0 1 1 1.58-3.926l-.01-.005c.184.106.342.231.479.376l.001.001 4.938-2.85a2.14 2.14 0 1 1 4.096.021l.004-.015zm-.515.877a.766.766 0 0 1-.057.057l-.001.001 6.461 11.19c.026-.009.056-.016.082-.023V9.146a2.14 2.14 0 0 1-1.555-2.603l-.003.015.019-.072zm-3.015.059-.06-.06-4.946 2.852A2.137 2.137 0 0 1 2.749 9.12l-.015.004-.076.021v5.708l.084.023 6.461-11.19zm2.076.507a2.164 2.164 0 0 1-1.207-.004l.015.004-6.46 11.189c.286.276.496.629.597 1.026l.003.015h12.911c.102-.413.313-.768.599-1.043l.001-.001L11.28 4.194zm.986 16.227 4.917-2.838a1.748 1.748 0 0 1-.038-.142H4.222l-.021.083 4.939 2.852c.39-.403.936-.653 1.54-.653.626 0 1.189.268 1.581.696l.001.002z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width=".88em" height="1em" viewBox="0 0 21 24"><path fill="currentColor" d="M12.731 2.751 17.666 5.6a2.138 2.138 0 1 1 2.07 3.548l-.015.003v5.7a2.14 2.14 0 1 1-2.098 3.502l-.002-.002-4.905 2.832a2.14 2.14 0 1 1-4.079.054l-.004.015-4.941-2.844a2.14 2.14 0 1 1-2.067-3.556l.015-.003V9.15a2.14 2.14 0 1 1 1.58-3.926l-.01-.005c.184.106.342.231.479.376l.001.001 4.938-2.85a2.14 2.14 0 1 1 4.096.021l.004-.015zm-.515.877a.766.766 0 0 1-.057.057l-.001.001 6.461 11.19c.026-.009.056-.016.082-.023V9.146a2.14 2.14 0 0 1-1.555-2.603l-.003.015.019-.072zm-3.015.059-.06-.06-4.946 2.852A2.137 2.137 0 0 1 2.749 9.12l-.015.004-.076.021v5.708l.084.023 6.461-11.19zm2.076.507a2.164 2.164 0 0 1-1.207-.004l.015.004-6.46 11.189c.286.276.496.629.597 1.026l.003.015h12.911c.102-.413.313-.768.599-1.043l.001-.001L11.28 4.194zm.986 16.227 4.917-2.838a1.748 1.748 0 0 1-.038-.142H4.222l-.021.083 4.939 2.852c.39-.403.936-.653 1.54-.653.626 0 1.189.268 1.581.696l.001.002z"/></svg>
diff --git a/packages/hoppscotch-common/assets/icons/mqtt.svg b/packages/hoppscotch-common/assets/icons/mqtt.svg
new file mode 100644
index 000000000..40a33f9e6
--- /dev/null
+++ b/packages/hoppscotch-common/assets/icons/mqtt.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M10.133 1h4.409a.5.5 0 0 1 .5.5v4.422c0 .026-.035.033-.045.01l-.048-.112a9.095 9.095 0 0 0-4.825-4.776c-.023-.01-.016-.044.01-.044Zm-8.588.275h-.5v1h.5c7.027 0 12.229 5.199 12.229 12.226v.5h1v-.5c0-7.58-5.65-13.226-13.229-13.226Zm.034 4.22h-.5v1h.5c2.361 0 4.348.837 5.744 2.238 1.395 1.401 2.227 3.395 2.227 5.758v.5h1v-.5c0-2.604-.921-4.859-2.52-6.463-1.596-1.605-3.845-2.532-6.45-2.532Zm-.528 8.996v-4.423c0-.041.033-.074.074-.074a4.923 4.923 0 0 1 4.923 4.922.074.074 0 0 1-.074.074H1.551a.5.5 0 0 1-.5-.5Z" clip-rule="evenodd"/></svg>
diff --git a/packages/hoppscotch-common/assets/icons/socketio.svg b/packages/hoppscotch-common/assets/icons/socketio.svg
new file mode 100644
index 000000000..b97daeb16
--- /dev/null
+++ b/packages/hoppscotch-common/assets/icons/socketio.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M9.277 2.084a.5.5 0 0 1 .185.607l-2.269 5.5a.5.5 0 0 1-.462.309H3.5a.5.5 0 0 1-.354-.854l5.5-5.5a.5.5 0 0 1 .631-.062ZM4.707 7.5h1.69l1.186-2.875L4.707 7.5Zm2.016 6.416a.5.5 0 0 1-.185-.607l2.269-5.5a.5.5 0 0 1 .462-.309H12.5a.5.5 0 0 1 .354.854l-5.5 5.5a.5.5 0 0 1-.631.062Zm4.57-5.416h-1.69l-1.186 2.875L11.293 8.5Z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1 0A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" clip-rule="evenodd"/></svg>
diff --git a/packages/hoppscotch-common/assets/icons/websocket.svg b/packages/hoppscotch-common/assets/icons/websocket.svg
new file mode 100644
index 000000000..a55697ff1
--- /dev/null
+++ b/packages/hoppscotch-common/assets/icons/websocket.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M1 2h4.257a2.5 2.5 0 0 1 1.768.732L9.293 5 5 9.293 3.732 8.025A2.5 2.5 0 0 1 3 6.257V4H2v2.257a3.5 3.5 0 0 0 1.025 2.475L5 10.707l1.25-1.25 2.396 2.397.708-.708L6.957 8.75 8.75 6.957l2.396 2.397.708-.708L9.457 6.25 10.707 5 7.732 2.025A3.5 3.5 0 0 0 5.257 1H1v1ZM10.646 2.354l2.622 2.62A2.5 2.5 0 0 1 14 6.744V12h1V6.743a3.5 3.5 0 0 0-1.025-2.475l-2.621-2.622-.707.708ZM4.268 13.975l-2.622-2.621.708-.708 2.62 2.622A2.5 2.5 0 0 0 6.744 14H15v1H6.743a3.5 3.5 0 0 1-2.475-1.025Z"/></svg>
diff --git a/packages/hoppscotch-common/src/pages/realtime.vue b/packages/hoppscotch-common/src/pages/realtime.vue
index 190557ef9..cff9a2029 100644
--- a/packages/hoppscotch-common/src/pages/realtime.vue
+++ b/packages/hoppscotch-common/src/pages/realtime.vue
@@ -5,10 +5,11 @@
     content-styles="!h-[calc(100%-var(--sidebar-primary-sticky-fold)-1px)] !flex"
   >
     <HoppSmartTab
-      v-for="{ target, title } in REALTIME_NAVIGATION"
-      :id="target"
-      :key="target"
-      :label="title"
+      v-for="(navigation, index) in REALTIME_NAVIGATION"
+      :id="navigation.target"
+      :key="index"
+      :label="navigation.title"
+      :icon="navigation.icon"
     >
       <RouterView />
     </HoppSmartTab>
@@ -20,6 +21,10 @@ import { watch, ref, computed } from "vue"
 import { RouterView, useRouter, useRoute } from "vue-router"
 import { usePageHead } from "~/composables/head"
 import { useI18n } from "~/composables/i18n"
+import IconWebsocket from "~icons/hopp/websocket"
+import IconSocketio from "~icons/hopp/socketio"
+import IconMqtt from "~icons/hopp/mqtt"
+import IconSse from "~icons/lucide/satellite-dish"
 
 const t = useI18n()
 const router = useRouter()
@@ -29,18 +34,22 @@ const REALTIME_NAVIGATION = [
   {
     target: "websocket",
     title: t("tab.websocket"),
+    icon: IconWebsocket,
   },
   {
     target: "sse",
     title: t("tab.sse"),
+    icon: IconSse,
   },
   {
     target: "socketio",
     title: t("tab.socketio"),
+    icon: IconSocketio,
   },
   {
     target: "mqtt",
     title: t("tab.mqtt"),
+    icon: IconMqtt,
   },
 ] as const
 
diff --git a/packages/hoppscotch-ui/src/components/smart/Tabs.vue b/packages/hoppscotch-ui/src/components/smart/Tabs.vue
index 637f8cfcd..3f198f9a6 100644
--- a/packages/hoppscotch-ui/src/components/smart/Tabs.vue
+++ b/packages/hoppscotch-ui/src/components/smart/Tabs.vue
@@ -37,8 +37,9 @@
                 :is="tabMeta.icon"
                 v-if="tabMeta.icon"
                 class="svg-icons"
+                :class="{ 'mr-2': tabMeta.label && !vertical }"
               />
-              <span v-else-if="tabMeta.label">{{ tabMeta.label }}</span>
+              <span v-if="tabMeta.label && !vertical">{{ tabMeta.label }}</span>
               <span
                 v-if="tabMeta.info && tabMeta.info !== 'null'"
                 class="tab-info"