chore: minor ui improvements

2022-11-27 23:19:19 +05:30
parent 740691417f
commit 6141073137
47 changed files with 148 additions and 199 deletions
--- a/packages/hoppscotch-app/assets/scss/styles.scss
+++ b/packages/hoppscotch-app/assets/scss/styles.scss
@@ -286,6 +286,18 @@ button {
  @apply text-secondaryDark;
 }

+.floating-input ~ .end-actions {
+  @apply absolute;
+  @apply right-0.2;
+  @apply inset-y-0;
+  @apply flex;
+  @apply items-center;
+}
+
+.floating-input:has(~ .end-actions) {
+  @apply pr-12;
+}
+
 pre.ace_editor {
  @apply font-mono;
  @apply resize-none;
@@ -530,3 +542,13 @@ details[open] summary .indicator {
 #nprogress .bar {
  @apply bg-accent #{!important};
 }
+
+input[type="color"]::-webkit-color-swatch-wrapper {
+  @apply rounded;
+  padding: 0;
+}
+
+input[type="color"]::-webkit-color-swatch {
+  @apply rounded;
+  border: none;
+}
--- a/packages/hoppscotch-app/locales/af.json
+++ b/packages/hoppscotch-app/locales/af.json
@@ -318,7 +318,7 @@
    "clear_input": "Clear input",
    "clear_input_on_send": "Clear input on send",
    "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
    "communication": "Kommunikasie",
    "connection_config": "Connection Config",
    "connection_not_authorized": "This MQTT connection does not use any authentication.",
--- a/packages/hoppscotch-app/locales/ar.json
+++ b/packages/hoppscotch-app/locales/ar.json
@@ -318,7 +318,7 @@
    "clear_input": "Clear input",
    "clear_input_on_send": "Clear input on send",
    "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
    "communication": "تواصل",
    "connection_config": "Connection Config",
    "connection_not_authorized": "This MQTT connection does not use any authentication.",
--- a/packages/hoppscotch-app/locales/ca.json
+++ b/packages/hoppscotch-app/locales/ca.json
@@ -318,7 +318,7 @@
    "clear_input": "Clear input",
    "clear_input_on_send": "Clear input on send",
    "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
    "communication": "Comunicació",
    "connection_config": "Connection Config",
    "connection_not_authorized": "This MQTT connection does not use any authentication.",
--- a/packages/hoppscotch-app/locales/cn.json
+++ b/packages/hoppscotch-app/locales/cn.json
@@ -318,7 +318,7 @@
    "clear_input": "Clear input",
    "clear_input_on_send": "Clear input on send",
    "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
    "communication": "通讯",
    "connection_config": "Connection Config",
    "connection_not_authorized": "This MQTT connection does not use any authentication.",
--- a/packages/hoppscotch-app/locales/cs.json
+++ b/packages/hoppscotch-app/locales/cs.json
@@ -318,7 +318,7 @@
    "clear_input": "Clear input",
    "clear_input_on_send": "Clear input on send",
    "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
    "communication": "Sdělení",
    "connection_config": "Connection Config",
    "connection_not_authorized": "This MQTT connection does not use any authentication.",
--- a/packages/hoppscotch-app/locales/da.json
+++ b/packages/hoppscotch-app/locales/da.json
@@ -318,7 +318,7 @@
    "clear_input": "Clear input",
    "clear_input_on_send": "Clear input on send",
    "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
    "communication": "Meddelelse",
    "connection_config": "Connection Config",
    "connection_not_authorized": "This MQTT connection does not use any authentication.",
--- a/packages/hoppscotch-app/locales/de.json
+++ b/packages/hoppscotch-app/locales/de.json
@@ -318,7 +318,7 @@
    "clear_input": "Clear input",
    "clear_input_on_send": "Clear input on send",
    "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
    "communication": "Kommunikation",
    "connection_config": "Connection Config",
    "connection_not_authorized": "This MQTT connection does not use any authentication.",
--- a/packages/hoppscotch-app/locales/el.json
+++ b/packages/hoppscotch-app/locales/el.json
@@ -318,7 +318,7 @@
    "clear_input": "Clear input",
    "clear_input_on_send": "Clear input on send",
    "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
    "communication": "Επικοινωνία",
    "connection_config": "Connection Config",
    "connection_not_authorized": "This MQTT connection does not use any authentication.",
--- a/packages/hoppscotch-app/locales/en.json
+++ b/packages/hoppscotch-app/locales/en.json
@@ -318,7 +318,7 @@
    "clear_input": "Clear input",
    "clear_input_on_send": "Clear input on send",
    "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
    "communication": "Communication",
    "connection_config": "Connection Config",
    "connection_not_authorized": "This MQTT connection does not use any authentication.",
--- a/packages/hoppscotch-app/locales/es.json
+++ b/packages/hoppscotch-app/locales/es.json
@@ -318,7 +318,7 @@
    "clear_input": "Clear input",
    "clear_input_on_send": "Clear input on send",
    "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
    "communication": "Comunicación",
    "connection_config": "Connection Config",
    "connection_not_authorized": "This MQTT connection does not use any authentication.",
--- a/packages/hoppscotch-app/locales/fi.json
+++ b/packages/hoppscotch-app/locales/fi.json
@@ -318,7 +318,7 @@
    "clear_input": "Clear input",
    "clear_input_on_send": "Clear input on send",
    "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
    "communication": "Viestintä",
    "connection_config": "Connection Config",
    "connection_not_authorized": "This MQTT connection does not use any authentication.",
--- a/packages/hoppscotch-app/locales/fr.json
+++ b/packages/hoppscotch-app/locales/fr.json
@@ -318,7 +318,7 @@
    "clear_input": "Clear input",
    "clear_input_on_send": "Clear input on send",
    "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
    "communication": "Communication",
    "connection_config": "Connection Config",
    "connection_not_authorized": "This MQTT connection does not use any authentication.",
--- a/packages/hoppscotch-app/locales/he.json
+++ b/packages/hoppscotch-app/locales/he.json
@@ -318,7 +318,7 @@
    "clear_input": "Clear input",
    "clear_input_on_send": "Clear input on send",
    "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
    "communication": "תִקשׁוֹרֶת",
    "connection_config": "Connection Config",
    "connection_not_authorized": "This MQTT connection does not use any authentication.",
--- a/packages/hoppscotch-app/locales/hi.json
+++ b/packages/hoppscotch-app/locales/hi.json
@@ -319,7 +319,7 @@
    "clear_input": "Clear input",
    "clear_input_on_send": "Clear input on send",
    "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
    "communication": "संचार",
    "connection_config": "Connection Config",
    "connection_not_authorized": "This MQTT connection does not use any authentication.",
--- a/packages/hoppscotch-app/locales/hu.json
+++ b/packages/hoppscotch-app/locales/hu.json
@@ -318,7 +318,7 @@
    "clear_input": "Clear input",
    "clear_input_on_send": "Clear input on send",
    "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
    "communication": "Kommunikáció",
    "connection_config": "Connection Config",
    "connection_not_authorized": "This MQTT connection does not use any authentication.",
--- a/packages/hoppscotch-app/locales/id.json
+++ b/packages/hoppscotch-app/locales/id.json
@@ -318,7 +318,7 @@
    "clear_input": "Clear input",
    "clear_input_on_send": "Clear input on send",
    "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
    "communication": "Komunikasi",
    "connection_config": "Connection Config",
    "connection_not_authorized": "This MQTT connection does not use any authentication.",
--- a/packages/hoppscotch-app/locales/it.json
+++ b/packages/hoppscotch-app/locales/it.json
@@ -318,7 +318,7 @@
    "clear_input": "Clear input",
    "clear_input_on_send": "Clear input on send",
    "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
    "communication": "Comunicazione",
    "connection_config": "Connection Config",
    "connection_not_authorized": "This MQTT connection does not use any authentication.",
--- a/packages/hoppscotch-app/locales/ja.json
+++ b/packages/hoppscotch-app/locales/ja.json
@@ -318,7 +318,7 @@
    "clear_input": "Clear input",
    "clear_input_on_send": "Clear input on send",
    "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
    "communication": "Communication",
    "connection_config": "Connection Config",
    "connection_not_authorized": "This MQTT connection does not use any authentication.",
--- a/packages/hoppscotch-app/locales/ko.json
+++ b/packages/hoppscotch-app/locales/ko.json
@@ -318,7 +318,7 @@
    "clear_input": "Clear input",
    "clear_input_on_send": "Clear input on send",
    "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
    "communication": "통신",
    "connection_config": "Connection Config",
    "connection_not_authorized": "This MQTT connection does not use any authentication.",
--- a/packages/hoppscotch-app/locales/nl.json
+++ b/packages/hoppscotch-app/locales/nl.json
@@ -318,7 +318,7 @@
    "clear_input": "Clear input",
    "clear_input_on_send": "Clear input on send",
    "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
    "communication": "Communicatie",
    "connection_config": "Connection Config",
    "connection_not_authorized": "This MQTT connection does not use any authentication.",
--- a/packages/hoppscotch-app/locales/no.json
+++ b/packages/hoppscotch-app/locales/no.json
@@ -318,7 +318,7 @@
    "clear_input": "Clear input",
    "clear_input_on_send": "Clear input on send",
    "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
    "communication": "Kommunikasjon",
    "connection_config": "Connection Config",
    "connection_not_authorized": "This MQTT connection does not use any authentication.",
--- a/packages/hoppscotch-app/locales/pl.json
+++ b/packages/hoppscotch-app/locales/pl.json
@@ -318,7 +318,7 @@
    "clear_input": "Clear input",
    "clear_input_on_send": "Clear input on send",
    "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
    "communication": "Komunikacja",
    "connection_config": "Connection Config",
    "connection_not_authorized": "This MQTT connection does not use any authentication.",
--- a/packages/hoppscotch-app/locales/pt-br.json
+++ b/packages/hoppscotch-app/locales/pt-br.json
@@ -318,7 +318,7 @@
    "clear_input": "Clear input",
    "clear_input_on_send": "Clear input on send",
    "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
    "communication": "Comunicação",
    "connection_config": "Connection Config",
    "connection_not_authorized": "This MQTT connection does not use any authentication.",
--- a/packages/hoppscotch-app/locales/pt.json
+++ b/packages/hoppscotch-app/locales/pt.json
@@ -318,7 +318,7 @@
    "clear_input": "Clear input",
    "clear_input_on_send": "Clear input on send",
    "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
    "communication": "Comunicação",
    "connection_config": "Connection Config",
    "connection_not_authorized": "This MQTT connection does not use any authentication.",
--- a/packages/hoppscotch-app/locales/ro.json
+++ b/packages/hoppscotch-app/locales/ro.json
@@ -318,7 +318,7 @@
    "clear_input": "Clear input",
    "clear_input_on_send": "Clear input on send",
    "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
    "communication": "Comunicare",
    "connection_config": "Connection Config",
    "connection_not_authorized": "This MQTT connection does not use any authentication.",
--- a/packages/hoppscotch-app/locales/ru.json
+++ b/packages/hoppscotch-app/locales/ru.json
@@ -318,7 +318,7 @@
    "clear_input": "Clear input",
    "clear_input_on_send": "Clear input on send",
    "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
    "communication": "Коммуникация",
    "connection_config": "Connection Config",
    "connection_not_authorized": "This MQTT connection does not use any authentication.",
--- a/packages/hoppscotch-app/locales/sr.json
+++ b/packages/hoppscotch-app/locales/sr.json
@@ -318,7 +318,7 @@
    "clear_input": "Clear input",
    "clear_input_on_send": "Clear input on send",
    "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
    "communication": "Комуникација",
    "connection_config": "Connection Config",
    "connection_not_authorized": "This MQTT connection does not use any authentication.",
--- a/packages/hoppscotch-app/locales/sv.json
+++ b/packages/hoppscotch-app/locales/sv.json
@@ -318,7 +318,7 @@
    "clear_input": "Clear input",
    "clear_input_on_send": "Clear input on send",
    "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
    "communication": "Kommunikation",
    "connection_config": "Connection Config",
    "connection_not_authorized": "This MQTT connection does not use any authentication.",
--- a/packages/hoppscotch-app/locales/tr.json
+++ b/packages/hoppscotch-app/locales/tr.json
@@ -318,7 +318,7 @@
    "clear_input": "Clear input",
    "clear_input_on_send": "Clear input on send",
    "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
    "communication": "İletişim",
    "connection_config": "Connection Config",
    "connection_not_authorized": "This MQTT connection does not use any authentication.",
--- a/packages/hoppscotch-app/locales/tw.json
+++ b/packages/hoppscotch-app/locales/tw.json
@@ -318,7 +318,7 @@
    "clear_input": "Clear input",
    "clear_input_on_send": "Clear input on send",
    "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
    "communication": "通訊",
    "connection_config": "Connection Config",
    "connection_not_authorized": "This MQTT connection does not use any authentication.",
--- a/packages/hoppscotch-app/locales/uk.json
+++ b/packages/hoppscotch-app/locales/uk.json
@@ -318,7 +318,7 @@
    "clear_input": "Clear input",
    "clear_input_on_send": "Clear input on send",
    "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
    "communication": "Спілкування",
    "connection_config": "Connection Config",
    "connection_not_authorized": "This MQTT connection does not use any authentication.",
--- a/packages/hoppscotch-app/locales/vi.json
+++ b/packages/hoppscotch-app/locales/vi.json
@@ -318,7 +318,7 @@
    "clear_input": "Clear input",
    "clear_input_on_send": "Clear input on send",
    "client_id": "Client ID",
-    "color": "Color",
+    "color": "Pick a color",
    "communication": "Liên lạc",
    "connection_config": "Connection Config",
    "connection_not_authorized": "This MQTT connection does not use any authentication.",
--- a/packages/hoppscotch-app/src/components.d.ts
+++ b/packages/hoppscotch-app/src/components.d.ts
@@ -22,6 +22,7 @@ declare module '@vue/runtime-core' {
    AppShare: typeof import('./components/app/Share.vue')['default']
    AppShortcuts: typeof import('./components/app/Shortcuts.vue')['default']
    AppShortcutsEntry: typeof import('./components/app/ShortcutsEntry.vue')['default']
+    AppShortcutsPrompt: typeof import('./components/app/ShortcutsPrompt.vue')['default']
    AppSidenav: typeof import('./components/app/Sidenav.vue')['default']
    AppSupport: typeof import('./components/app/Support.vue')['default']
    ButtonPrimary: typeof import('./components/button/Primary.vue')['default']
@@ -98,6 +99,7 @@ declare module '@vue/runtime-core' {
    HttpTests: typeof import('./components/http/Tests.vue')['default']
    HttpURLEncodedParams: typeof import('./components/http/URLEncodedParams.vue')['default']
    IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
+    IconLucideBrush: typeof import('~icons/lucide/brush')['default']
    IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
    IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
    IconLucideGlobe: typeof import('~icons/lucide/globe')['default']
--- a/packages/hoppscotch-app/src/components/app/ShortcutsPrompt.vue
+++ b/packages/hoppscotch-app/src/components/app/ShortcutsPrompt.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="flex flex-col items-center justify-center text-secondaryLight">
+    <div class="flex pb-4 my-4 space-x-2">
+      <div class="flex flex-col items-end space-y-4 text-right">
+        <span class="flex items-center flex-1">
+          {{ t("shortcut.request.send_request") }}
+        </span>
+        <span class="flex items-center flex-1">
+          {{ t("shortcut.general.show_all") }}
+        </span>
+        <span class="flex items-center flex-1">
+          {{ t("shortcut.general.command_menu") }}
+        </span>
+        <span class="flex items-center flex-1">
+          {{ t("shortcut.general.help_menu") }}
+        </span>
+      </div>
+      <div class="flex flex-col space-y-4">
+        <div class="flex">
+          <kbd class="shortcut-key">{{ getSpecialKey() }}</kbd>
+          <kbd class="shortcut-key">↩</kbd>
+        </div>
+        <div class="flex">
+          <kbd class="shortcut-key">{{ getSpecialKey() }}</kbd>
+          <kbd class="shortcut-key">K</kbd>
+        </div>
+        <div class="flex">
+          <kbd class="shortcut-key">/</kbd>
+        </div>
+        <div class="flex">
+          <kbd class="shortcut-key">?</kbd>
+        </div>
+      </div>
+    </div>
+    <ButtonSecondary
+      :label="`${t('app.documentation')}`"
+      to="https://docs.hoppscotch.io/features/response"
+      :icon="IconExternalLink"
+      blank
+      outline
+      reverse
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from "~/composables/i18n"
+import IconExternalLink from "~icons/lucide/external-link"
+import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
+
+const t = useI18n()
+</script>
--- a/packages/hoppscotch-app/src/components/graphql/Response.vue
+++ b/packages/hoppscotch-app/src/components/graphql/Response.vue
@@ -42,57 +42,12 @@
      </div>
      <div ref="schemaEditor" class="flex flex-col flex-1"></div>
    </div>
-    <div
-      v-else
-      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
-    >
-      <div class="flex pb-4 my-4 space-x-2">
-        <div class="flex flex-col items-end space-y-4 text-right">
-          <span class="flex items-center flex-1">
-            {{ t("shortcut.request.send_request") }}
-          </span>
-          <span class="flex items-center flex-1">
-            {{ t("shortcut.general.show_all") }}
-          </span>
-          <span class="flex items-center flex-1">
-            {{ t("shortcut.general.command_menu") }}
-          </span>
-          <span class="flex items-center flex-1">
-            {{ t("shortcut.general.help_menu") }}
-          </span>
-        </div>
-        <div class="flex flex-col space-y-4">
-          <div class="flex">
-            <kbd class="shortcut-key">{{ getSpecialKey() }}</kbd>
-            <kbd class="shortcut-key">↩</kbd>
-          </div>
-          <div class="flex">
-            <kbd class="shortcut-key">{{ getSpecialKey() }}</kbd>
-            <kbd class="shortcut-key">K</kbd>
-          </div>
-          <div class="flex">
-            <kbd class="shortcut-key">/</kbd>
-          </div>
-          <div class="flex">
-            <kbd class="shortcut-key">?</kbd>
-          </div>
-        </div>
-      </div>
-      <ButtonSecondary
-        :label="`${t('app.documentation')}`"
-        to="https://docs.hoppscotch.io/features/response"
-        :icon="IconExternalLink"
-        blank
-        outline
-        reverse
-      />
-    </div>
+    <AppShortcutsPrompt v-else class="p-4" />
  </div>
 </template>

 <script setup lang="ts">
 import IconWrapText from "~icons/lucide/wrap-text"
-import IconExternalLink from "~icons/lucide/external-link"
 import IconDownload from "~icons/lucide/download"
 import IconCheck from "~icons/lucide/check"
 import IconCopy from "~icons/lucide/copy"
--- a/packages/hoppscotch-app/src/components/history/index.vue
+++ b/packages/hoppscotch-app/src/components/history/index.vue
@@ -64,7 +64,7 @@
        open
      >
        <summary
-          class="flex items-center justify-between flex-1 min-w-0 transition cursor-pointer focus:outline-none text-secondaryLight text-tiny group"
+          class="flex items-center justify-between flex-1 min-w-0 cursor-pointer transition focus:outline-none text-secondaryLight text-tiny group"
        >
          <span
            class="inline-flex items-center justify-center px-4 py-2 transition group-hover:text-secondary"
--- a/packages/hoppscotch-app/src/components/http/Request.vue
+++ b/packages/hoppscotch-app/src/components/http/Request.vue
@@ -16,7 +16,7 @@
            <span class="select-wrapper">
              <input
                id="method"
-                class="flex px-4 py-2 font-semibold transition rounded-l cursor-pointer text-secondaryDark w-26 bg-primaryLight"
+                class="flex px-4 py-2 font-semibold rounded-l cursor-pointer transition text-secondaryDark w-26 bg-primaryLight"
                :value="newMethod"
                :readonly="!isCustomMethod"
                :placeholder="`${t('request.method')}`"
@@ -47,7 +47,7 @@
        </label>
      </div>
      <div
-        class="flex flex-1 overflow-auto transition border-l rounded-r border-divider bg-primaryLight whitespace-nowrap"
+        class="flex flex-1 overflow-auto border-l rounded-r transition border-divider bg-primaryLight whitespace-nowrap"
      >
        <SmartEnvInput
          v-model="newEndpoint"
@@ -131,7 +131,7 @@
        </tippy>
      </span>
      <span
-        class="flex ml-2 transition border rounded border-dividerLight hover:border-dividerDark"
+        class="flex ml-2 border rounded transition border-dividerLight hover:border-dividerDark"
      >
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
--- a/packages/hoppscotch-app/src/components/http/ResponseMeta.vue
+++ b/packages/hoppscotch-app/src/components/http/ResponseMeta.vue
@@ -1,52 +1,8 @@
 <template>
  <div
-    class="sticky top-0 z-10 flex items-start p-4 overflow-auto bg-primary whitespace-nowrap"
+    class="sticky top-0 z-10 flex items-start justify-center p-4 overflow-auto bg-primary whitespace-nowrap"
  >
-    <div
-      v-if="response == null"
-      class="flex flex-col items-center justify-center flex-1 text-secondaryLight"
-    >
-      <div class="flex pb-4 my-4 space-x-2">
-        <div class="flex flex-col items-end space-y-4 text-right">
-          <span class="flex items-center flex-1">
-            {{ t("shortcut.request.send_request") }}
-          </span>
-          <span class="flex items-center flex-1">
-            {{ t("shortcut.general.show_all") }}
-          </span>
-          <span class="flex items-center flex-1">
-            {{ t("shortcut.general.command_menu") }}
-          </span>
-          <span class="flex items-center flex-1">
-            {{ t("shortcut.general.help_menu") }}
-          </span>
-        </div>
-        <div class="flex flex-col space-y-4">
-          <div class="flex">
-            <kbd class="shortcut-key">{{ getSpecialKey() }}</kbd>
-            <kbd class="shortcut-key">↩</kbd>
-          </div>
-          <div class="flex">
-            <kbd class="shortcut-key">{{ getSpecialKey() }}</kbd>
-            <kbd class="shortcut-key">K</kbd>
-          </div>
-          <div class="flex">
-            <kbd class="shortcut-key">/</kbd>
-          </div>
-          <div class="flex">
-            <kbd class="shortcut-key">?</kbd>
-          </div>
-        </div>
-      </div>
-      <ButtonSecondary
-        :label="t('app.documentation')"
-        to="https://docs.hoppscotch.io/features/response"
-        :icon="IconExternalLink"
-        blank
-        outline
-        reverse
-      />
-    </div>
+    <AppShortcutsPrompt v-if="response == null" class="flex-1" />
    <div v-else class="flex flex-col flex-1">
      <div
        v-if="response.type === 'loading'"
@@ -140,11 +96,9 @@
 </template>

 <script setup lang="ts">
-import IconExternalLink from "~icons/lucide/external-link"
 import { computed } from "vue"
 import findStatusGroup from "@helpers/findStatusGroup"
 import type { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
-import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
 import { useI18n } from "@composables/i18n"
 import { useColorMode } from "@composables/theming"
 import { getStatusCodeReasonPhrase } from "~/helpers/utils/statusCodes"
--- a/packages/hoppscotch-app/src/components/realtime/Communication.vue
+++ b/packages/hoppscotch-app/src/components/realtime/Communication.vue
@@ -65,7 +65,9 @@
      <div class="flex">
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
-          :title="`${t('action.send')}`"
+          :title="`${t(
+            'request.run'
+          )} <kbd>${getSpecialKey()}</kbd><kbd>↩</kbd>`"
          :label="`${t('action.send')}`"
          :disabled="!communicationBody || !isConnected"
          :icon="IconSend"
@@ -150,6 +152,7 @@ import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
 import { isJSONContentType } from "@helpers/utils/contenttypes"
 import { defineActionHandler } from "~/helpers/actions"
+import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"

 defineProps({
  showEventField: {
--- a/packages/hoppscotch-app/src/components/realtime/Log.vue
+++ b/packages/hoppscotch-app/src/components/realtime/Log.vue
@@ -50,51 +50,7 @@
        />
      </div>
    </div>
-    <div
-      v-else
-      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
-    >
-      <div class="flex pb-4 my-4 space-x-2">
-        <div class="flex flex-col items-end space-y-4 text-right">
-          <span class="flex items-center flex-1">
-            {{ t("shortcut.request.send_request") }}
-          </span>
-          <span class="flex items-center flex-1">
-            {{ t("shortcut.general.show_all") }}
-          </span>
-          <span class="flex items-center flex-1">
-            {{ t("shortcut.general.command_menu") }}
-          </span>
-          <span class="flex items-center flex-1">
-            {{ t("shortcut.general.help_menu") }}
-          </span>
-        </div>
-        <div class="flex flex-col space-y-4">
-          <div class="flex">
-            <kbd class="shortcut-key">{{ getSpecialKey() }}</kbd>
-            <kbd class="shortcut-key">↩</kbd>
-          </div>
-          <div class="flex">
-            <kbd class="shortcut-key">{{ getSpecialKey() }}</kbd>
-            <kbd class="shortcut-key">K</kbd>
-          </div>
-          <div class="flex">
-            <kbd class="shortcut-key">/</kbd>
-          </div>
-          <div class="flex">
-            <kbd class="shortcut-key">?</kbd>
-          </div>
-        </div>
-      </div>
-      <ButtonSecondary
-        :label="`${t('app.documentation')}`"
-        to="https://docs.hoppscotch.io/realtime"
-        :icon="IconExternalLink"
-        blank
-        outline
-        reverse
-      />
-    </div>
+    <AppShortcutsPrompt v-else class="p-4" />
  </div>
 </template>

@@ -104,10 +60,8 @@ import IconTrash from "~icons/lucide/trash"
 import IconArrowUp from "~icons/lucide/arrow-up"
 import IconArrowDown from "~icons/lucide/arrow-down"
 import IconChevronsDown from "~icons/lucide/chevron-down"
-import IconExternalLink from "~icons/lucide/external-link"
 import { useThrottleFn, useScroll } from "@vueuse/core"
 import { useI18n } from "@composables/i18n"
-import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"

 export type LogEntryData = {
  prefix?: string
--- a/packages/hoppscotch-app/src/components/realtime/LogEntry.vue
+++ b/packages/hoppscotch-app/src/components/realtime/LogEntry.vue
@@ -23,7 +23,7 @@
            </span>
          </div>
          <div
-            class="inline-grid items-center flex-1 min-w-0 p-2"
+            class="items-center flex-1 min-w-0 p-2 inline-grid"
            @click="toggleExpandPayload()"
          >
            <div class="truncate">
--- a/packages/hoppscotch-app/src/components/realtime/Subscription.vue
+++ b/packages/hoppscotch-app/src/components/realtime/Subscription.vue
@@ -3,7 +3,7 @@
    <template #body>
      <div class="flex justify-between mb-4">
        <div
-          class="flex items-center border divide-x rounded border-divider divide-divider"
+          class="flex items-center border rounded divide-x border-divider divide-divider"
        >
          <label class="mx-4">
            {{ t("mqtt.qos") }}
@@ -31,19 +31,8 @@
            </template>
          </tippy>
        </div>
-        <div class="flex items-center">
-          <label for="select-color">
-            {{ t("mqtt.color") }}
-          </label>
-          <input
-            id="select-color"
-            v-model="color"
-            type="color"
-            class="w-8 h-8 p-1 ml-4 border rounded bg-primary border-divider"
-          />
-        </div>
      </div>
-      <div class="flex flex-col">
+      <div class="relative flex flex-col">
        <input
          id="selectLabelAdd"
          v-model="name"
@@ -57,6 +46,24 @@
        <label for="selectLabelAdd">
          {{ t("action.label") }}
        </label>
+        <span class="end-actions">
+          <label
+            v-tippy="{ theme: 'tooltip' }"
+            :title="t('mqtt.color')"
+            for="select-color"
+            class="absolute inset-0 flex items-center justify-center group hover:cursor-pointer"
+          >
+            <icon-lucide-brush
+              class="transition opacity-80 svg-icons group-hover:opacity-100 text-accentContrast"
+            />
+          </label>
+          <input
+            id="select-color"
+            v-model="color"
+            type="color"
+            class="w-8 h-8 p-1 rounded bg-primary"
+          />
+        </span>
      </div>
    </template>
    <template #footer>
--- a/packages/hoppscotch-app/src/components/smart/Checkbox.vue
+++ b/packages/hoppscotch-app/src/components/smart/Checkbox.vue
@@ -1,6 +1,6 @@
 <template>
  <div
-    class="inline-flex items-center justify-center cursor-pointer transition flex-nowrap group hover:text-secondaryDark"
+    class="inline-flex items-center justify-center transition cursor-pointer flex-nowrap group hover:text-secondaryDark"
    role="checkbox"
    :aria-checked="on"
    @click="emit('change')"
@@ -14,7 +14,7 @@
    />
    <label
      for="checkbox"
-      class="pl-0 font-semibold align-middle cursor-pointer"
+      class="pl-0 font-semibold truncate align-middle cursor-pointer"
    >
      <slot></slot>
    </label>
--- a/packages/hoppscotch-app/src/components/smart/Toggle.vue
+++ b/packages/hoppscotch-app/src/components/smart/Toggle.vue
@@ -8,7 +8,7 @@
    <span ref="toggle" class="toggle" :class="{ on: on }">
      <span class="handle"></span>
    </span>
-    <span class="pl-0 font-semibold align-middle cursor-pointer">
+    <span class="pl-0 font-semibold truncate align-middle cursor-pointer">
      <slot></slot>
    </span>
  </div>
--- a/packages/hoppscotch-app/src/pages/realtime/mqtt.vue
+++ b/packages/hoppscotch-app/src/pages/realtime/mqtt.vue
@@ -2,7 +2,7 @@
  <AppPaneLayout layout-id="mqtt">
    <template #primary>
      <div
-        class="sticky top-0 z-10 flex flex-shrink-0 p-4 space-x-2 overflow-x-auto bg-primary"
+        class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary"
      >
        <div class="inline-flex flex-1 space-x-2">
          <div class="flex flex-1">
@@ -116,7 +116,7 @@
    </template>
    <template #sidebar>
      <div
-        class="sticky z-10 flex flex-col border-b divide-y rounded-t divide-dividerLight bg-primary border-dividerLight"
+        class="sticky z-10 flex flex-col border-b rounded-t divide-y divide-dividerLight bg-primary border-dividerLight"
      >
        <div class="flex justify-between flex-1">
          <ButtonSecondary
@@ -174,7 +174,7 @@
              />
            </span>
            <span
-              class="flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer group-hover:text-secondaryDark"
+              class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
              @click="openTopicAsTab(topic)"
            >
              <span class="truncate">
--- a/packages/hoppscotch-app/src/pages/realtime/socketio.vue
+++ b/packages/hoppscotch-app/src/pages/realtime/socketio.vue
@@ -2,7 +2,7 @@
  <AppPaneLayout layout-id="socketio">
    <template #primary>
      <div
-        class="sticky top-0 z-10 flex flex-shrink-0 p-4 space-x-2 overflow-x-auto bg-primary"
+        class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary"
      >
        <div class="inline-flex flex-1 space-x-2">
          <div class="flex flex-1">