refactor(ui): remaining realtime pages

components/app/Header.vue

@@ -1,9 +1,16 @@
 <template>
   <header class="flex flex-1 py-2 px-4 items-center justify-between">
     <div
-      class="font-extrabold space-x-2 flex-shrink-0 inline-flex items-center"
+      class="
+        font-extrabold
+        space-x-2
+        flex-shrink-0
+        text-sm
+        inline-flex
+        items-center
+      "
     >
-      <AppLogo class="h-6 mr-4" /> Hoppscotch
+      Hoppscotch
     </div>
     <div class="space-x-2 flex-shrink-0 inline-flex items-center">
       <AppGitHubStarButton class="mt-1 mr-2" />

components/app/Shortcuts.vue

@@ -20,6 +20,25 @@
           <ButtonSecondary icon="close" @click.native="close()" />
         </div>
       </div>
+      <div class="search-wrapper">
+        <input
+          v-model="filterText"
+          type="search"
+          class="
+            bg-primaryLight
+            border-b border-dividerLight
+            flex
+            font-semibold font-mono
+            w-full
+            py-2
+            pr-2
+            pl-8
+            focus:outline-none
+            truncate
+          "
+          :placeholder="$t('search')"
+        />
+      </div>
       <div
         class="
           divide-y divide-dividerLight
@@ -67,6 +86,7 @@ export default {
   },
   data() {
     return {
+      filterText: "",
       mappings: [
         {
           section: "General",