feat: more actions & shortcuts

assets/scss/styles.scss

@@ -235,8 +235,8 @@ pre.ace_editor {
 }
 
 .select-wrapper {
+  @apply flex flex-1;
   @apply relative;
-  @apply w-full;
   @apply cursor-pointer;
 
   &::after {
@@ -255,16 +255,18 @@ pre.ace_editor {
 }
 
 .search-wrapper {
+  @apply flex flex-1;
   @apply relative;
-  @apply w-full;
 
   &::after {
     @apply absolute;
-    @apply inline-block;
+    @apply flex;
+    @apply inset-y-0;
+    @apply items-center;
+    @apply justify-center;
     @apply pointer-events-none;
     @apply font-icon;
     @apply text-secondaryLight;
-    @apply top-2;
     @apply left-3;
 
     content: "\e8b6";

components/app/Shortcuts.vue

@@ -3,7 +3,6 @@
     <template #content>
       <div
         class="
-          bg-primary
           border-b border-dividerLight
           flex
           p-2
@@ -19,15 +18,29 @@
           <ButtonSecondary icon="close" @click.native="close()" />
         </div>
       </div>
-      <!-- <div class="search-wrapper">
-        <input
-          v-model="filterText"
-          v-focus
-          type="search"
-          class="bg-primaryLight border-b border-dividerLight flex font-semibold font-mono w-full py-2 pr-2 pl-8 truncate focus:outline-none"
-          :placeholder="$t('search')"
-        />
-      </div> -->
+      <div class="border-b border-dividerLight">
+        <div class="flex flex-col my-4 mx-6 search-wrapper">
+          <input
+            v-model="filterText"
+            type="search"
+            class="
+              bg-primaryLight
+              border border-dividerLight
+              rounded
+              flex
+              font-semibold font-mono
+              w-full
+              py-2
+              pr-2
+              pl-8
+              transition
+              truncate
+              focus:border-divider focus:outline-none
+            "
+            :placeholder="$t('search')"
+          />
+        </div>
+      </div>
       <div
         class="
           divide-y divide-dividerLight

components/collections/ChooseType.vue

@@ -21,12 +21,12 @@
                 bg-primaryLight
                 border-b border-dividerLight
                 flex
-                font-medium
+                font-semibold
                 w-full
                 py-2
                 px-4
-                focus:outline-none
                 appearance-none
+                focus:outline-none
               "
               @change="updateSelectedTeam(myTeams[$event.target.value])"
             >

components/environments/index.vue

@@ -18,12 +18,12 @@
             bg-primaryLight
             border-b border-dividerLight
             flex
-            font-semibold font-mono
+            font-semibold
             w-full
             py-2
             px-4
-            focus:outline-none
             appearance-none
+            focus:outline-none
           "
         >
           <option :value="-1">No environment</option>

components/http/BodyParameters.vue

@@ -135,32 +135,34 @@
           </SmartDeletableChip>
         </div>
       </div>
-      <ButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        :title="
-          param.hasOwnProperty('active')
-            ? param.active
-              ? $t('action.turn_off')
-              : $t('action.turn_on')
-            : $t('action.turn_off')
-        "
-        :icon="
-          param.hasOwnProperty('active')
-            ? param.active
-              ? 'check_box'
-              : 'check_box_outline_blank'
-            : 'check_box'
-        "
-        color="green"
-        @click.native="
-          updateBodyParam(index, {
-            key: param.key,
-            value: param.value,
-            active: param.hasOwnProperty('active') ? !param.active : false,
-          })
-        "
-      />
-      <div>
+      <span>
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="
+            param.hasOwnProperty('active')
+              ? param.active
+                ? $t('action.turn_off')
+                : $t('action.turn_on')
+              : $t('action.turn_off')
+          "
+          :icon="
+            param.hasOwnProperty('active')
+              ? param.active
+                ? 'check_box'
+                : 'check_box_outline_blank'
+              : 'check_box'
+          "
+          color="green"
+          @click.native="
+            updateBodyParam(index, {
+              key: param.key,
+              value: param.value,
+              active: param.hasOwnProperty('active') ? !param.active : false,
+            })
+          "
+        />
+      </span>
+      <span>
         <label for="attachment" class="p-0">
           <ButtonSecondary
             class="w-full"
@@ -176,14 +178,16 @@
           multiple
           @change="setRequestAttachment($event, index)"
         />
-      </div>
-      <ButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        :title="$t('delete')"
-        icon="delete"
-        color="red"
-        @click.native="deleteBodyParam(index)"
-      />
+      </span>
+      <span>
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('delete')"
+          icon="delete"
+          color="red"
+          @click.native="deleteBodyParam(index)"
+        />
+      </span>
     </div>
     <div
       v-if="bodyParams.length === 0"

components/http/Headers.vue

@@ -103,38 +103,42 @@
           })
         "
       />
-      <ButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        :title="
-          header.hasOwnProperty('active')
-            ? header.active
-              ? $t('action.turn_off')
-              : $t('action.turn_on')
-            : $t('action.turn_off')
-        "
-        :icon="
-          header.hasOwnProperty('active')
-            ? header.active
-              ? 'check_box'
-              : 'check_box_outline_blank'
-            : 'check_box'
-        "
-        color="green"
-        @click.native="
-          updateHeader(index, {
-            key: header.key,
-            value: header.value,
-            active: header.hasOwnProperty('active') ? !header.active : false,
-          })
-        "
-      />
-      <ButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        :title="$t('delete')"
-        icon="delete"
-        color="red"
-        @click.native="deleteHeader(index)"
-      />
+      <span>
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="
+            header.hasOwnProperty('active')
+              ? header.active
+                ? $t('action.turn_off')
+                : $t('action.turn_on')
+              : $t('action.turn_off')
+          "
+          :icon="
+            header.hasOwnProperty('active')
+              ? header.active
+                ? 'check_box'
+                : 'check_box_outline_blank'
+              : 'check_box'
+          "
+          color="green"
+          @click.native="
+            updateHeader(index, {
+              key: header.key,
+              value: header.value,
+              active: header.hasOwnProperty('active') ? !header.active : false,
+            })
+          "
+        />
+      </span>
+      <span>
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('delete')"
+          icon="delete"
+          color="red"
+          @click.native="deleteHeader(index)"
+        />
+      </span>
     </div>
     <div
       v-if="headers$.length === 0"

components/http/Parameters.vue

@@ -124,38 +124,42 @@
           })
         "
       />
-      <ButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        :title="
-          param.hasOwnProperty('active')
-            ? param.active
-              ? $t('action.turn_off')
-              : $t('action.turn_on')
-            : $t('action.turn_off')
-        "
-        :icon="
-          param.hasOwnProperty('active')
-            ? param.active
-              ? 'check_box'
-              : 'check_box_outline_blank'
-            : 'check_box'
-        "
-        color="green"
-        @click.native="
-          updateParam(index, {
-            key: param.key,
-            value: param.value,
-            active: param.hasOwnProperty('active') ? !param.active : false,
-          })
-        "
-      />
-      <ButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        :title="$t('delete')"
-        icon="delete"
-        color="red"
-        @click.native="deleteParam(index)"
-      />
+      <span>
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="
+            param.hasOwnProperty('active')
+              ? param.active
+                ? $t('action.turn_off')
+                : $t('action.turn_on')
+              : $t('action.turn_off')
+          "
+          :icon="
+            param.hasOwnProperty('active')
+              ? param.active
+                ? 'check_box'
+                : 'check_box_outline_blank'
+              : 'check_box'
+          "
+          color="green"
+          @click.native="
+            updateParam(index, {
+              key: param.key,
+              value: param.value,
+              active: param.hasOwnProperty('active') ? !param.active : false,
+            })
+          "
+        />
+      </span>
+      <span>
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('delete')"
+          icon="delete"
+          color="red"
+          @click.native="deleteParam(index)"
+        />
+      </span>
     </div>
     <div
       v-if="params$.length === 0"

components/realtime/Websocket.vue

@@ -97,7 +97,7 @@
                 name="message"
                 type="text"
               />
-              <div class="flex">
+              <span>
                 <ButtonSecondary
                   v-tippy="{ theme: 'tooltip' }"
                   :title="
@@ -121,8 +121,8 @@
                       : false
                   "
                 />
-              </div>
-              <div class="flex">
+              </span>
+              <span>
                 <ButtonSecondary
                   v-tippy="{ theme: 'tooltip' }"
                   :title="$t('delete')"
@@ -130,7 +130,7 @@
                   color="red"
                   @click.native="deleteProtocol({ index })"
                 />
-              </div>
+              </span>
             </div>
             <div
               v-if="protocols.length === 0"

helpers/actions.ts

@@ -20,11 +20,13 @@ export type HoppAction =
   | "modals.search.toggle" // Shows the search modal
   | "modals.support.toggle" // Shows the support modal
   | "modals.share.toggle" // Shows the share modal
-  | "navigation.rest.jump" // Jump to REST page
-  | "navigation.graphql.jump" // Jump to GraphQL page
-  | "navigation.realtime.jump" // Jump to realtime page
-  | "navigation.documentation.jump" // Jump to documentation page
-  | "navigation.settings.jump" // Jump to settings page
+  | "navigation.jump.rest" // Jump to REST page
+  | "navigation.jump.graphql" // Jump to GraphQL page
+  | "navigation.jump.realtime" // Jump to realtime page
+  | "navigation.jump.documentation" // Jump to documentation page
+  | "navigation.jump.settings" // Jump to settings page
+  | "navigation.jump.back" // Jump to previous page
+  | "navigation.jump.forward" // Jump to next page
 
 type BoundActionList = {
   // eslint-disable-next-line no-unused-vars

helpers/keybindings.ts

@@ -86,12 +86,14 @@ export const bindings: {
   "ctrl-k": "flyouts.keybinds.toggle",
   "/": "modals.search.toggle",
   "?": "modals.support.toggle",
-  "ctrl-x": "modals.share.toggle",
-  "alt-r": "navigation.rest.jump",
-  "alt-q": "navigation.graphql.jump",
-  "alt-w": "navigation.realtime.jump",
-  "alt-d": "navigation.documentation.jump",
-  "alt-s": "navigation.settings.jump",
+  "ctrl-m": "modals.share.toggle",
+  "alt-r": "navigation.jump.rest",
+  "alt-q": "navigation.jump.graphql",
+  "alt-w": "navigation.jump.realtime",
+  "alt-d": "navigation.jump.documentation",
+  "alt-s": "navigation.jump.settings",
+  "ctrl-left": "navigation.jump.back",
+  "ctrl-right": "navigation.jump.forward",
 }
 
 /**

helpers/shortcuts.js

@@ -71,6 +71,48 @@ export default [
       },
     ],
   },
+  {
+    section: "Navigation",
+    shortcuts: [
+      {
+        keys: [getPlatformSpecialKey(), "←"],
+        label: "shortcut.navigation.back",
+      },
+      {
+        keys: [getPlatformSpecialKey(), "→"],
+        label: "shortcut.navigation.forward",
+      },
+      {
+        keys: [getPlatformAlternateKey(), "R"],
+        label: "shortcut.navigation.rest",
+      },
+      {
+        keys: [getPlatformAlternateKey(), "Q"],
+        label: "shortcut.navigation.graphql",
+      },
+      {
+        keys: [getPlatformAlternateKey(), "W"],
+        label: "shortcut.navigation.realtime",
+      },
+      {
+        keys: [getPlatformAlternateKey(), "D"],
+        label: "shortcut.navigation.documentation",
+      },
+      {
+        keys: [getPlatformAlternateKey(), "S"],
+        label: "shortcut.navigation.settings",
+      },
+    ],
+  },
+  {
+    section: "Miscellaneous",
+    shortcuts: [
+      {
+        keys: [getPlatformSpecialKey(), "M"],
+        label: "shortcut.miscellaneous.invite",
+      },
+    ],
+  },
 ]
 
 export const spotlight = [
@@ -108,24 +150,38 @@ export const spotlight = [
   {
     section: "Navigation",
     shortcuts: [
+      {
+        keys: [getPlatformSpecialKey(), "←"],
+        label: "shortcut.navigation.back",
+        action: "navigation.jump.back",
+        icon: "arrow_forward",
+        keywords: ["back", "jump", "page", "navigation"],
+      },
+      {
+        keys: [getPlatformSpecialKey(), "→"],
+        label: "shortcut.navigation.forward",
+        action: "navigation.jump.forward",
+        icon: "arrow_forward",
+        keywords: ["forward", "jump", "page", "navigation"],
+      },
       {
         keys: [getPlatformAlternateKey(), "R"],
         label: "shortcut.navigation.rest",
-        action: "navigation.rest.jump",
+        action: "navigation.jump.rest",
         icon: "arrow_forward",
         keywords: ["rest", "jump", "page", "navigation"],
       },
       {
         keys: [getPlatformAlternateKey(), "Q"],
         label: "shortcut.navigation.graphql",
-        action: "navigation.graphql.jump",
+        action: "navigation.jump.graphql",
         icon: "arrow_forward",
         keywords: ["graphql", "jump", "page", "navigation"],
       },
       {
         keys: [getPlatformAlternateKey(), "W"],
         label: "shortcut.navigation.realtime",
-        action: "navigation.realtime.jump",
+        action: "navigation.jump.realtime",
         icon: "arrow_forward",
         keywords: [
           "realtime",
@@ -141,14 +197,14 @@ export const spotlight = [
       {
         keys: [getPlatformAlternateKey(), "D"],
         label: "shortcut.navigation.documentation",
-        action: "navigation.documentation.jump",
+        action: "navigation.jump.documentation",
         icon: "arrow_forward",
         keywords: ["documentation", "jump", "page", "navigation"],
       },
       {
         keys: [getPlatformAlternateKey(), "S"],
         label: "shortcut.navigation.settings",
-        action: "navigation.settings.jump",
+        action: "navigation.jump.settings",
         icon: "arrow_forward",
         keywords: [
           "settings",
@@ -161,4 +217,16 @@ export const spotlight = [
       },
     ],
   },
+  {
+    section: "Miscellaneous",
+    shortcuts: [
+      {
+        keys: [getPlatformSpecialKey(), "M"],
+        label: "shortcut.miscellaneous.invite",
+        action: "modals.share.toggle",
+        icon: "person_add_alt",
+        keywords: ["invite", "share", "app", "social"],
+      },
+    ],
+  },
 ]

lang/en-US.json

@@ -216,11 +216,16 @@
       "close_current_menu": "Close current menu"
     },
     "navigation": {
-      "rest": "Go to REST",
-      "graphql": "Go to GraphQL",
-      "realtime": "Go to realtime",
-      "documentation": "Go to documentation",
-      "settings": "Go to settings"
+      "rest": "Go to REST page",
+      "graphql": "Go to GraphQL page",
+      "realtime": "Go to Realtime page",
+      "documentation": "Go to Documentation page",
+      "settings": "Go to Settings page",
+      "back": "Go back to previous page",
+      "forward": "Go forward to next page"
+    },
+    "miscellaneous": {
+      "invite": "Invite people to Hoppscotch"
     },
     "send_request": "Send Request",
     "save_to_collections": "Save to Collections",

layouts/default.vue

@@ -54,21 +54,27 @@ export default defineComponent({
   setup() {
     hookKeybindingsListener()
     const router = useRouter()
-    defineActionHandler("navigation.rest.jump", () => {
+    defineActionHandler("navigation.jump.rest", () => {
       router.push({ path: "/" })
     })
-    defineActionHandler("navigation.graphql.jump", () => {
+    defineActionHandler("navigation.jump.graphql", () => {
       router.push({ path: "/graphql" })
     })
-    defineActionHandler("navigation.realtime.jump", () => {
+    defineActionHandler("navigation.jump.realtime", () => {
       router.push({ path: "/realtime" })
     })
-    defineActionHandler("navigation.documentation.jump", () => {
+    defineActionHandler("navigation.jump.documentation", () => {
       router.push({ path: "/documentation" })
     })
-    defineActionHandler("navigation.settings.jump", () => {
+    defineActionHandler("navigation.jump.settings", () => {
       router.push({ path: "/settings" })
     })
+    defineActionHandler("navigation.jump.back", () => {
+      router.go(-1)
+    })
+    defineActionHandler("navigation.jump.forward", () => {
+      router.go(1)
+    })
   },
   data() {
     return {