From ca71ffe3c296016b545c0b230cc0d176bebae2a2 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Sun, 2 Oct 2022 18:59:23 +0530
Subject: [PATCH] chore: minor ui improvements

---
 .../hoppscotch-app/assets/scss/styles.scss    |  1 +
 .../src/components/app/Shortcuts.vue          | 75 +++++++++++--------
 .../src/components/app/SlideOver.vue          | 11 +++
 3 files changed, 56 insertions(+), 31 deletions(-)

diff --git a/packages/hoppscotch-app/assets/scss/styles.scss b/packages/hoppscotch-app/assets/scss/styles.scss
index 2716bc2ef..d0766ad52 100644
--- a/packages/hoppscotch-app/assets/scss/styles.scss
+++ b/packages/hoppscotch-app/assets/scss/styles.scss
@@ -166,6 +166,7 @@ a {
   @apply leading-body;
   @apply border border-dividerDark;
   @apply focus: outline-none;
+  scroll-behavior: smooth;
 
   .tippy-svg-arrow svg {
     @apply fill-popover;
diff --git a/packages/hoppscotch-app/src/components/app/Shortcuts.vue b/packages/hoppscotch-app/src/components/app/Shortcuts.vue
index 7d8af1ba9..b4fc606f5 100644
--- a/packages/hoppscotch-app/src/components/app/Shortcuts.vue
+++ b/packages/hoppscotch-app/src/components/app/Shortcuts.vue
@@ -1,38 +1,42 @@
 <template>
-  <AppSlideOver :show="show" @close="close()">
+  <AppSlideOver :show="show" :title="t('app.shortcuts')" @close="close()">
     <template #content>
       <div class="sticky top-0 z-10 flex flex-col bg-primary">
-        <div
-          class="flex items-center justify-between p-2 border-b border-dividerLight"
-        >
-          <h3 class="ml-4 heading">{{ t("app.shortcuts") }}</h3>
-          <ButtonSecondary :icon="IconX" @click="close()" />
-        </div>
         <div class="flex flex-col px-6 py-4 border-b border-dividerLight">
           <input
             v-model="filterText"
             type="search"
             autocomplete="off"
-            class="flex px-4 py-2 border rounded bg-primaryContrast border-dividerLight focus-visible:border-divider"
+            class="flex px-4 py-2 border rounded bg-primaryContrast border-divider hover:border-dividerDark focus-visible:border-dividerDark"
             :placeholder="`${t('action.search')}`"
           />
         </div>
       </div>
       <div v-if="filterText" class="flex flex-col divide-y divide-dividerLight">
-        <div
+        <details
           v-for="(map, mapIndex) in searchResults"
           :key="`map-${mapIndex}`"
-          class="px-6 py-4 space-y-4"
+          class="flex flex-col"
+          open
         >
-          <h1 class="font-semibold text-secondaryDark">
-            {{ t(map.item.section) }}
-          </h1>
-          <AppShortcutsEntry
-            v-for="(shortcut, index) in map.item.shortcuts"
-            :key="`shortcut-${index}`"
-            :shortcut="shortcut"
-          />
-        </div>
+          <summary
+            class="flex items-center flex-1 min-w-0 px-6 py-4 font-semibold transition cursor-pointer focus:outline-none text-secondaryLight hover:text-secondaryDark"
+          >
+            <icon-lucide-chevron-right class="mr-2 indicator" />
+            <span
+              class="font-semibold truncate capitalize-first text-secondaryDark"
+            >
+              {{ t(map.item.section) }}
+            </span>
+          </summary>
+          <div class="flex flex-col px-6 pb-4 space-y-2">
+            <AppShortcutsEntry
+              v-for="(shortcut, index) in map.item.shortcuts"
+              :key="`shortcut-${index}`"
+              :shortcut="shortcut"
+            />
+          </div>
+        </details>
         <div
           v-if="searchResults.length === 0"
           class="flex flex-col items-center justify-center p-4 text-secondaryLight"
@@ -44,27 +48,36 @@
         </div>
       </div>
       <div v-else class="flex flex-col divide-y divide-dividerLight">
-        <div
+        <details
           v-for="(map, mapIndex) in mappings"
           :key="`map-${mapIndex}`"
-          class="px-6 py-4 space-y-4"
+          class="flex flex-col"
+          open
         >
-          <h1 class="font-semibold text-secondaryDark">
-            {{ t(map.section) }}
-          </h1>
-          <AppShortcutsEntry
-            v-for="(shortcut, shortcutIndex) in map.shortcuts"
-            :key="`map-${mapIndex}-shortcut-${shortcutIndex}`"
-            :shortcut="shortcut"
-          />
-        </div>
+          <summary
+            class="flex items-center flex-1 min-w-0 px-6 py-4 font-semibold transition cursor-pointer focus:outline-none text-secondaryLight hover:text-secondaryDark"
+          >
+            <icon-lucide-chevron-right class="mr-2 indicator" />
+            <span
+              class="font-semibold truncate capitalize-first text-secondaryDark"
+            >
+              {{ t(map.section) }}
+            </span>
+          </summary>
+          <div class="flex flex-col px-6 pb-4 space-y-2">
+            <AppShortcutsEntry
+              v-for="(shortcut, shortcutIndex) in map.shortcuts"
+              :key="`map-${mapIndex}-shortcut-${shortcutIndex}`"
+              :shortcut="shortcut"
+            />
+          </div>
+        </details>
       </div>
     </template>
   </AppSlideOver>
 </template>
 
 <script setup lang="ts">
-import IconX from "~icons/lucide/x"
 import { computed, ref } from "vue"
 import Fuse from "fuse.js"
 import mappings from "~/helpers/shortcuts"
diff --git a/packages/hoppscotch-app/src/components/app/SlideOver.vue b/packages/hoppscotch-app/src/components/app/SlideOver.vue
index 2ba7b25e1..2bc35ef9e 100644
--- a/packages/hoppscotch-app/src/components/app/SlideOver.vue
+++ b/packages/hoppscotch-app/src/components/app/SlideOver.vue
@@ -18,6 +18,15 @@
         v-if="show"
         class="fixed top-0 right-0 z-30 flex flex-col h-full max-w-full overflow-auto border-l shadow-xl border-dividerDark bg-primary w-96"
       >
+        <div
+          class="flex items-center justify-between p-2 border-b border-dividerLight"
+        >
+          <h3 class="ml-4 heading">{{ title }}</h3>
+          <span class="flex items-center">
+            <kbd class="mr-2 shortcut-key">ESC</kbd>
+            <ButtonSecondary :icon="IconX" @click="close()" />
+          </span>
+        </div>
         <slot name="content"></slot>
       </aside>
     </Transition>
@@ -26,9 +35,11 @@
 
 <script setup lang="ts">
 import { onMounted, watch } from "vue"
+import IconX from "~icons/lucide/x"
 
 const props = defineProps<{
   show: boolean
+  title: string
 }>()
 
 const emit = defineEmits<{