fix: sse, refactor(ui): tabs, feat: help button

components/app/Footer.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="flex justify-between">
-      <div>
+      <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="LEFT_SIDEBAR ? $t('hide.sidebar') : $t('show.sidebar')"
@@ -21,7 +21,64 @@
           @click.native="toggleSetting('ZEN_MODE')"
         />
       </div>
-      <div>
+      <div class="flex">
+        <span>
+          <tippy
+            ref="options"
+            interactive
+            tabindex="-1"
+            trigger="click"
+            theme="popover"
+            arrow
+          >
+            <template #trigger>
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                icon="help_center"
+                :title="$t('app.help')"
+                :shortcut="['?']"
+              />
+            </template>
+            <div class="flex flex-col">
+              <SmartItem
+                :label="$t('app.documentation')"
+                to="https://github.com/hoppscotch/hoppscotch/wiki"
+                blank
+                @click.native="$refs.options.tippy().hide()"
+              />
+              <SmartItem
+                :label="$t('app.keyboard_shortcuts')"
+                @click.native="
+                  showShortcuts = true
+                  $refs.options.tippy().hide()
+                "
+              />
+              <SmartItem
+                :label="$t('app.whats_new')"
+                to="https://github.com/hoppscotch/hoppscotch/blob/main/CHANGELOG.md"
+                blank
+                @click.native="$refs.options.tippy().hide()"
+              />
+              <hr />
+              <SmartItem
+                :label="$t('app.twitter')"
+                to="https://twitter.com/hoppscotch_io"
+                blank
+                @click.native="$refs.options.tippy().hide()"
+              />
+              <SmartItem
+                :label="$t('app.terms_and_privacy')"
+                to="https://github.com/hoppscotch/hoppscotch/wiki/Privacy-Policy"
+                blank
+                @click.native="$refs.options.tippy().hide()"
+              />
+              <!-- <SmartItem :label="$t('app.status')" /> -->
+              <div class="flex text-xs opacity-50 py-2 px-4">
+                {{ `${$t("app.name")} ${$t("app.version")}` }}
+              </div>
+            </div>
+          </tippy>
+        </span>
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           icon="keyboard"

components/collections/SaveRequest.vue

@@ -1,7 +1,7 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
-      <h3 class="heading">{{ $t("save_request_as") }}</h3>
+      <h3 class="heading">{{ $t("collection.save_as") }}</h3>
       <ButtonSecondary icon="close" @click.native="hideModal" />
     </template>
     <template #body>
@@ -15,7 +15,9 @@
           class="input"
           type="text"
         />
-        <label class="font-semibold px-4 pt-4 pb-4"> Select Location </label>
+        <label class="font-semibold px-4 pt-4 pb-4">
+          {{ $t("collection.select_location") }}
+        </label>
         <CollectionsGraphql
           v-if="mode === 'graphql'"
           :doc="false"

components/profile/Picture.vue

@@ -18,7 +18,7 @@
     <span
       v-if="indicator"
       :class="[
-        'border-primary rounded-full border-2 h-3 -top-1 -right-1 w-3 absolute',
+        'border-primary rounded-full border-2 h-2.5 -top-0.5 -right-0.5 w-2.5 absolute',
         indicatorStyles,
       ]"
     ></span>

components/realtime/Log.vue

@@ -21,7 +21,7 @@
           v-for="(entry, index) in log"
           :key="`entry-${index}`"
           :style="{ color: entry.color }"
-          >@ {{ entry.ts }}{{ getSourcePrefix(entry.source)
+          >{{ entry.ts }}{{ getSourcePrefix(entry.source)
           }}{{ entry.payload }}</span
         >
       </span>

components/realtime/Sse.vue

@@ -12,7 +12,9 @@
               bg-primaryLight
               border border-divider
               rounded-l
+              flex
               font-semibold font-mono
+              flex-1
               text-secondaryDark
               w-full
               py-2
@@ -24,6 +26,31 @@
             :placeholder="$t('url')"
             @keyup.enter="serverValid ? toggleSSEConnection() : null"
           />
+          <label
+            for="url"
+            class="bg-primaryLight border border-divider py-2 px-4 truncate"
+          >
+            {{ $t("event_type") }}
+          </label>
+          <input
+            id="event-type"
+            v-model="eventType"
+            class="
+              bg-primaryLight
+              border border-divider
+              flex
+              font-semibold font-mono
+              flex-1
+              text-secondaryDark
+              w-full
+              py-2
+              px-4
+              transition
+              truncate
+              focus:border-accent focus:outline-none
+            "
+            spellcheck="false"
+          />
           <ButtonPrimary
             id="start"
             :disabled="!serverValid"
@@ -68,6 +95,7 @@ export default {
         log: null,
         input: "",
       },
+      eventType: "data",
     }
   },
   computed: {
@@ -144,13 +172,13 @@ export default {
               icon: "sync_disabled",
             })
           }
-          this.sse.onmessage = ({ data }) => {
+          this.sse.addEventListener(this.eventType, ({ data }) => {
             this.events.log.push({
               payload: data,
               source: "server",
               ts: new Date().toLocaleTimeString(),
             })
-          }
+          })
         } catch (ex) {
           this.handleSSEError(ex)
           this.$toast.error(this.$t("something_went_wrong"), {
@@ -169,7 +197,7 @@ export default {
       }
 
       logHoppRequestRunToAnalytics({
-        platform: "mqtt",
+        platform: "sse",
       })
     },
     handleSSEError(error) {
@@ -190,8 +218,8 @@ export default {
         })
     },
     stop() {
-      this.sse.onclose()
       this.sse.close()
+      this.sse.onclose()
     },
   },
 }