From ba5d1666d65050668e33102dd62dd3a20f8bf363 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Tue, 10 Aug 2021 20:45:45 +0530
Subject: [PATCH] feat: placement option (center, top) in modals

---
 components/app/Search.vue  | 20 ++++++++++++++++++--
 components/app/Support.vue |  1 +
 components/smart/Modal.vue |  7 ++++++-
 helpers/shortcuts.js       | 35 +++++++++++++++++++++++++++++++++++
 4 files changed, 60 insertions(+), 3 deletions(-)

diff --git a/components/app/Search.vue b/components/app/Search.vue
index a6172f49f..d38eaa84f 100644
--- a/components/app/Search.vue
+++ b/components/app/Search.vue
@@ -1,8 +1,9 @@
 <template>
-  <SmartModal v-if="show" @close="$emit('hide-modal')">
+  <SmartModal v-if="show" placement="top" @close="$emit('hide-modal')">
     <template #body>
       <input
         id="command"
+        v-model="search"
         v-focus
         type="text"
         name="command"
@@ -30,7 +31,10 @@
           hide-scrollbar
         "
       >
-        <div v-for="(map, mapIndex) in mappings" :key="`map-${mapIndex}`">
+        <div
+          v-for="(map, mapIndex) in filteredMappings"
+          :key="`map-${mapIndex}`"
+        >
           <h5 class="font-normal my-2 text-secondaryLight py-2 px-4">
             {{ map.section }}
           </h5>
@@ -83,9 +87,21 @@ export default {
   },
   data() {
     return {
+      search: "",
       mappings: spotlight,
     }
   },
+  computed: {
+    filteredMappings() {
+      return this.mappings.filter((map) =>
+        map.shortcuts.find((shortcut) =>
+          shortcut.keywords.find((key) =>
+            key.includes(this.search.toLowerCase())
+          )
+        )
+      )
+    },
+  },
   methods: {
     hideModal() {
       this.$emit("hide-modal")
diff --git a/components/app/Support.vue b/components/app/Support.vue
index 53218fcae..fe53b059a 100644
--- a/components/app/Support.vue
+++ b/components/app/Support.vue
@@ -2,6 +2,7 @@
   <SmartModal
     v-if="show"
     :title="$t('support.title')"
+    placement="top"
     @close="$emit('hide-modal')"
   >
     <template #body>
diff --git a/components/smart/Modal.vue b/components/smart/Modal.vue
index 81c73d716..a73cc173f 100644
--- a/components/smart/Modal.vue
+++ b/components/smart/Modal.vue
@@ -17,6 +17,7 @@
           ></div>
         </transition>
         <span
+          v-if="placement === 'center'"
           class="hidden sm:h-screen sm:inline-block sm:align-middle"
           aria-hidden="true"
           >&#8203;</span
@@ -44,8 +45,8 @@
               align-bottom
               overflow-hidden
               sm:max-w-md sm:align-middle
-              md:m-4
             "
+            :class="{ 'mt-24': placement === 'top' }"
           >
             <div
               v-if="title"
@@ -109,6 +110,10 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+    placement: {
+      type: String,
+      default: "center",
+    },
   },
   setup() {
     const { disableKeybindings, enableKeybindings } = useKeybindingDisabler()
diff --git a/helpers/shortcuts.js b/helpers/shortcuts.js
index 2147a98ac..6f22e18a3 100644
--- a/helpers/shortcuts.js
+++ b/helpers/shortcuts.js
@@ -82,12 +82,26 @@ export const spotlight = [
         label: "shortcut.general.help_menu",
         action: "modals.support.toggle",
         icon: "support",
+        keywords: [
+          "help",
+          "support",
+          "documentation",
+          "troubleshooting",
+          "chat",
+          "community",
+          "feedback",
+          "report",
+          "bug",
+          "issue",
+          "ticket",
+        ],
       },
       {
         keys: [getPlatformSpecialKey(), "K"],
         label: "shortcut.general.show_all",
         action: "flyouts.keybinds.toggle",
         icon: "keyboard",
+        keywords: ["keyboard", "shortcuts"],
       },
     ],
   },
@@ -99,30 +113,51 @@ export const spotlight = [
         label: "shortcut.navigation.rest",
         action: "navigation.rest.jump",
         icon: "arrow_forward",
+        keywords: ["rest", "jump", "page", "navigation"],
       },
       {
         keys: [getPlatformAlternateKey(), "Q"],
         label: "shortcut.navigation.graphql",
         action: "navigation.graphql.jump",
         icon: "arrow_forward",
+        keywords: ["graphql", "jump", "page", "navigation"],
       },
       {
         keys: [getPlatformAlternateKey(), "W"],
         label: "shortcut.navigation.realtime",
         action: "navigation.realtime.jump",
         icon: "arrow_forward",
+        keywords: [
+          "realtime",
+          "jump",
+          "page",
+          "navigation",
+          "websocket",
+          "socket",
+          "mqtt",
+          "sse",
+        ],
       },
       {
         keys: [getPlatformAlternateKey(), "D"],
         label: "shortcut.navigation.documentation",
         action: "navigation.documentation.jump",
         icon: "arrow_forward",
+        keywords: ["documentation", "jump", "page", "navigation"],
       },
       {
         keys: [getPlatformAlternateKey(), "S"],
         label: "shortcut.navigation.settings",
         action: "navigation.settings.jump",
         icon: "arrow_forward",
+        keywords: [
+          "settings",
+          "jump",
+          "page",
+          "navigation",
+          "account",
+          "theme",
+        ],
       },
     ],
   },