From c6490818d0f0fbbe02eac3caf06c6c533c53e247 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Thu, 8 Jul 2021 23:42:15 +0530
Subject: [PATCH] feat: revamp graphql sidebar ui

---
 assets/scss/styles.scss                       |  17 ++
 components/collections/ChooseType.vue         |  66 ++---
 components/collections/graphql/Collection.vue | 265 ++++++++++--------
 components/collections/graphql/Folder.vue     | 173 +++++++-----
 components/collections/graphql/Request.vue    |  45 ++-
 components/collections/graphql/index.vue      | 177 ++++++------
 components/collections/index.vue              |  93 +++---
 components/collections/my/Collection.vue      |   6 +-
 components/collections/my/Folder.vue          |   6 +-
 components/collections/my/Request.vue         |  20 +-
 components/collections/teams/Collection.vue   |   6 +-
 components/collections/teams/Folder.vue       |   6 +-
 components/collections/teams/Request.vue      |  20 +-
 components/environments/Environment.vue       |   2 +-
 components/environments/index.vue             |  82 +++---
 components/history/graphql/Card.vue           | 154 ++++------
 components/history/index.vue                  |  16 +-
 components/history/rest/Card.vue              |   3 +-
 pages/api.vue                                 |   2 +-
 pages/graphql.vue                             | 168 +++++------
 pages/settings.vue                            |   1 -
 21 files changed, 708 insertions(+), 620 deletions(-)

diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index 81058f050..d6e294719 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -187,6 +187,23 @@ select {
   }
 }
 
+.select-wrapper {
+  @apply relative;
+  @apply w-full;
+
+  &::after {
+    @apply inline-block;
+    @apply absolute;
+    @apply pointer-events-none;
+    @apply font-icon;
+    @apply text-secondaryLight;
+    @apply top-3;
+    @apply right-3;
+
+    content: "\e313";
+  }
+}
+
 input[type="checkbox"] {
   @apply hidden;
 
diff --git a/components/collections/ChooseType.vue b/components/collections/ChooseType.vue
index d19422057..e0421fa3d 100644
--- a/components/collections/ChooseType.vue
+++ b/components/collections/ChooseType.vue
@@ -12,39 +12,41 @@
         :label="'Team Collections'"
       >
         <SmartIntersection @intersecting="onTeamSelectIntersect">
-          <select
-            id="team"
-            type="text"
-            autofocus
-            class="
-              flex
-              w-full
-              px-4
-              text-xs
-              py-2
-              focus:outline-none
-              border-b border-dividerLight
-              bg-primary
-            "
-            @change="updateSelectedTeam(myTeams[$event.target.value])"
-          >
-            <option
-              :key="undefined"
-              :value="undefined"
-              hidden
-              disabled
-              selected
+          <div class="select-wrapper">
+            <select
+              id="team"
+              type="text"
+              autofocus
+              class="
+                flex
+                w-full
+                px-4
+                text-xs
+                py-3
+                focus:outline-none
+                border-b border-dividerLight
+                bg-primaryLight
+              "
+              @change="updateSelectedTeam(myTeams[$event.target.value])"
             >
-              Select team
-            </option>
-            <option
-              v-for="(team, index) in myTeams"
-              :key="index"
-              :value="index"
-            >
-              {{ team.name }}
-            </option>
-          </select>
+              <option
+                :key="undefined"
+                :value="undefined"
+                hidden
+                disabled
+                selected
+              >
+                Select team
+              </option>
+              <option
+                v-for="(team, index) in myTeams"
+                :key="index"
+                :value="index"
+              >
+                {{ team.name }}
+              </option>
+            </select>
+          </div>
         </SmartIntersection>
       </SmartTab>
     </SmartTabs>
diff --git a/components/collections/graphql/Collection.vue b/components/collections/graphql/Collection.vue
index c37845f79..6d7c2a793 100644
--- a/components/collections/graphql/Collection.vue
+++ b/components/collections/graphql/Collection.vue
@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      :class="[{ 'bg-primaryDark': dragging }]"
+      class="flex items-center group"
       @dragover.prevent
       @drop.prevent="dropEvent"
       @dragover="dragging = true"
@@ -9,134 +9,145 @@
       @dragleave="dragging = false"
       @dragend="dragging = false"
     >
+      <span
+        class="
+          flex
+          justify-center
+          items-center
+          text-xs
+          w-10
+          truncate
+          cursor-pointer
+        "
+        @click="toggleShowChildren()"
+      >
+        <i class="material-icons" :class="{ 'text-green-400': isSelected }">
+          {{ getCollectionIcon }}
+        </i>
+      </span>
+      <span
+        class="
+          py-3
+          cursor-pointer
+          pr-2
+          flex flex-1
+          min-w-0
+          text-xs
+          group-hover:text-secondaryDark
+          transition
+        "
+        @click="toggleShowChildren()"
+      >
+        <span class="truncate"> {{ collection.name }} </span>
+      </span>
       <ButtonSecondary
-        :label="collection.name"
-        @click.native="toggleShowChildren"
+        v-tippy="{ theme: 'tooltip' }"
+        icon="create_new_folder"
+        :title="$t('new_folder')"
+        class="group-hover:inline-flex hidden"
+        @click.native="
+          $emit('add-folder', {
+            path: `${collectionIndex}`,
+          })
+        "
       />
-      <i v-show="!showChildren && !isFiltered" class="material-icons"
-        >arrow_right</i
+      <tippy
+        ref="options"
+        interactive
+        tabindex="-1"
+        trigger="click"
+        theme="popover"
+        arrow
       >
-      <i v-show="showChildren || isFiltered" class="material-icons"
-        >arrow_drop_down</i
-      >
-      <i v-if="isSelected" class="mx-3 text-green-400 material-icons"
-        >check_circle</i
-      >
-      <i v-else class="material-icons">folder</i>
-      <div>
-        <ButtonSecondary
-          v-if="doc"
-          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('import')"
-          icon="topic"
-          @click.native="$emit('select-collection')"
+        <template #trigger>
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('more')"
+            icon="more_vert"
+          />
+        </template>
+        <SmartItem
+          icon="create_new_folder"
+          :label="$t('new_folder')"
+          @click.native="
+            $emit('add-folder', {
+              path: `${collectionIndex}`,
+            })
+            $refs.options.tippy().hide()
+          "
         />
-        <tippy
-          ref="options"
-          interactive
-          tabindex="-1"
-          trigger="click"
-          theme="popover"
-          arrow
-        >
-          <template #trigger>
-            <ButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="$t('more')"
-              icon="more_vert"
-            />
-          </template>
-          <SmartItem
-            icon="create_new_folder"
-            :label="$t('new_folder')"
-            @click.native="
-              $emit('add-folder', {
-                path: `${collectionIndex}`,
-              })
-              $refs.options.tippy().hide()
-            "
-          />
-          <SmartItem
-            icon="create"
-            :label="$t('edit')"
-            @click.native="
-              $emit('edit-collection')
-              $refs.options.tippy().hide()
-            "
-          />
-          <SmartItem
-            icon="delete"
-            :label="$t('delete')"
-            @click.native="
-              confirmRemove = true
-              $refs.options.tippy().hide()
-            "
-          />
-        </tippy>
-      </div>
+        <SmartItem
+          icon="create"
+          :label="$t('edit')"
+          @click.native="
+            $emit('edit-collection')
+            $refs.options.tippy().hide()
+          "
+        />
+        <SmartItem
+          icon="delete"
+          :label="$t('delete')"
+          @click.native="
+            confirmRemove = true
+            $refs.options.tippy().hide()
+          "
+        />
+      </tippy>
     </div>
     <div v-show="showChildren || isFiltered">
-      <ul class="flex-col">
-        <li
-          v-for="(folder, index) in collection.folders"
-          :key="folder.name"
-          class="ml-5 border-l border-dividerLight"
-        >
-          <CollectionsGraphqlFolder
-            :picked="picked"
-            :saving-mode="savingMode"
-            :folder="folder"
-            :folder-index="index"
-            :folder-path="`${collectionIndex}/${index}`"
-            :collection-index="collectionIndex"
-            :doc="doc"
-            :is-filtered="isFiltered"
-            @add-folder="$emit('add-folder', $event)"
-            @edit-folder="$emit('edit-folder', $event)"
-            @edit-request="$emit('edit-request', $event)"
-            @select="$emit('select', $event)"
-          />
-        </li>
-      </ul>
-      <ul class="flex-col">
-        <li
-          v-for="(request, index) in collection.requests"
-          :key="index"
-          class="ml-5 border-l border-dividerLight"
-        >
-          <CollectionsGraphqlRequest
-            :picked="picked"
-            :saving-mode="savingMode"
-            :request="request"
-            :collection-index="collectionIndex"
-            :folder-index="-1"
-            :folder-name="collection.name"
-            :folder-path="`${collectionIndex}`"
-            :request-index="index"
-            :doc="doc"
-            @edit-request="$emit('edit-request', $event)"
-            @select="$emit('select', $event)"
-          />
-        </li>
-      </ul>
-      <ul>
-        <li
-          v-if="
-            collection.folders.length === 0 && collection.requests.length === 0
-          "
-          class="
-            ml-5
-            border-l border-dividerLight
-            ml-5
-            border-l border-dividerLight
-          "
-        >
-          <p>
-            <i class="material-icons">not_interested</i>
-            {{ $t("collection_empty") }}
-          </p>
-        </li>
-      </ul>
+      <CollectionsGraphqlFolder
+        v-for="(folder, index) in collection.folders"
+        :key="folder.name"
+        class="ml-5 border-l border-dividerLight"
+        :picked="picked"
+        :saving-mode="savingMode"
+        :folder="folder"
+        :folder-index="index"
+        :folder-path="`${collectionIndex}/${index}`"
+        :collection-index="collectionIndex"
+        :doc="doc"
+        :is-filtered="isFiltered"
+        @add-folder="$emit('add-folder', $event)"
+        @edit-folder="$emit('edit-folder', $event)"
+        @edit-request="$emit('edit-request', $event)"
+        @select="$emit('select', $event)"
+      />
+      <CollectionsGraphqlRequest
+        v-for="(request, index) in collection.requests"
+        :key="index"
+        class="ml-5 border-l border-dividerLight"
+        :picked="picked"
+        :saving-mode="savingMode"
+        :request="request"
+        :collection-index="collectionIndex"
+        :folder-index="-1"
+        :folder-name="collection.name"
+        :folder-path="`${collectionIndex}`"
+        :request-index="index"
+        :doc="doc"
+        @edit-request="$emit('edit-request', $event)"
+        @select="$emit('select', $event)"
+      />
+      <div
+        v-if="
+          collection.folders.length === 0 && collection.requests.length === 0
+        "
+        class="
+          flex
+          items-center
+          text-secondaryLight
+          flex-col
+          p-4
+          justify-center
+          ml-5
+          border-l border-dividerLight
+        "
+      >
+        <i class="material-icons opacity-50 pb-2">folder_open</i>
+        <span class="text-xs">
+          {{ $t("collection_empty") }}
+        </span>
+      </div>
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
@@ -180,6 +191,12 @@ export default Vue.extend({
         this.picked.collectionIndex === this.collectionIndex
       )
     },
+    getCollectionIcon() {
+      if (this.isSelected) return "check_circle"
+      else if (!this.showChildren && !this.isFiltered) return "arrow_right"
+      else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
+      else return "folder"
+    },
   },
   methods: {
     pick() {
diff --git a/components/collections/graphql/Folder.vue b/components/collections/graphql/Folder.vue
index b2e07dad7..00744c20b 100644
--- a/components/collections/graphql/Folder.vue
+++ b/components/collections/graphql/Folder.vue
@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      :class="[{ 'bg-primaryDark': dragging }]"
+      class="flex items-center group"
       @dragover.prevent
       @drop.prevent="dropEvent"
       @dragover="dragging = true"
@@ -9,20 +9,46 @@
       @dragleave="dragging = false"
       @dragend="dragging = false"
     >
-      <div>
-        <ButtonSecondary @click.native="toggleShowChildren" />
-        <i v-show="!showChildren && !isFiltered" class="material-icons"
-          >arrow_right</i
-        >
-        <i v-show="showChildren || isFiltered" class="material-icons"
-          >arrow_drop_down</i
-        >
-        <i v-if="isSelected" class="mx-3 text-green-400 material-icons"
-          >check_circle</i
-        >
-        <i v-else class="material-icons">folder_open</i>
-        <span>{{ folder.name }}</span>
-      </div>
+      <span
+        class="
+          flex
+          justify-center
+          items-center
+          text-xs
+          w-10
+          truncate
+          cursor-pointer
+        "
+        @click="toggleShowChildren()"
+      >
+        <i class="material-icons" :class="{ 'text-green-400': isSelected }">
+          {{ getCollectionIcon }}
+        </i>
+      </span>
+      <span
+        class="
+          py-3
+          cursor-pointer
+          pr-2
+          flex flex-1
+          min-w-0
+          text-xs
+          group-hover:text-secondaryDark
+          transition
+        "
+        @click="toggleShowChildren()"
+      >
+        <span class="truncate">
+          {{ folder.name ? folder.name : folder.title }}
+        </span>
+      </span>
+      <ButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        icon="create_new_folder"
+        :title="$t('new_folder')"
+        class="group-hover:inline-flex hidden"
+        @click.native="$emit('add-folder', { folder, path: folderPath })"
+      />
       <tippy
         ref="options"
         interactive
@@ -48,7 +74,7 @@
         />
         <SmartItem
           icon="edit"
-          :labeel="$t('edit')"
+          :label="$t('edit')"
           @click.native="
             $emit('edit-folder', { folder, folderPath })
             $refs.options.tippy().hide()
@@ -65,71 +91,62 @@
       </tippy>
     </div>
     <div v-show="showChildren || isFiltered">
-      <ul class="flex-col">
-        <li
-          v-for="(subFolder, subFolderIndex) in folder.folders"
-          :key="subFolder.name"
-          class="ml-5 border-l border-dividerLight"
-        >
-          <CollectionsGraphqlFolder
-            :picked="picked"
-            :saving-mode="savingMode"
-            :folder="subFolder"
-            :folder-index="subFolderIndex"
-            :folder-path="`${folderPath}/${subFolderIndex}`"
-            :collection-index="collectionIndex"
-            :doc="doc"
-            :is-filtered="isFiltered"
-            @add-folder="$emit('add-folder', $event)"
-            @edit-folder="$emit('edit-folder', $event)"
-            @edit-request="$emit('edit-request', $event)"
-            @select="$emit('select', $event)"
-          />
-        </li>
-      </ul>
-      <ul class="flex-col">
-        <li
-          v-for="(request, index) in folder.requests"
-          :key="index"
-          class="ml-5 border-l border-dividerLight"
-        >
-          <CollectionsGraphqlRequest
-            :picked="picked"
-            :saving-mode="savingMode"
-            :request="request"
-            :collection-index="collectionIndex"
-            :folder-index="folderIndex"
-            :folder-path="folderPath"
-            :folder-name="folder.name"
-            :request-index="index"
-            :doc="doc"
-            @edit-request="$emit('edit-request', $event)"
-            @select="$emit('select', $event)"
-          />
-        </li>
-      </ul>
-      <ul
+      <CollectionsGraphqlFolder
+        v-for="(subFolder, subFolderIndex) in folder.folders"
+        :key="subFolder.name"
+        class="ml-5 border-l border-dividerLight"
+        :picked="picked"
+        :saving-mode="savingMode"
+        :folder="subFolder"
+        :folder-index="subFolderIndex"
+        :folder-path="`${folderPath}/${subFolderIndex}`"
+        :collection-index="collectionIndex"
+        :doc="doc"
+        :is-filtered="isFiltered"
+        @add-folder="$emit('add-folder', $event)"
+        @edit-folder="$emit('edit-folder', $event)"
+        @edit-request="$emit('edit-request', $event)"
+        @select="$emit('select', $event)"
+      />
+      <CollectionsGraphqlRequest
+        v-for="(request, index) in folder.requests"
+        :key="index"
+        class="ml-5 border-l border-dividerLight"
+        :picked="picked"
+        :saving-mode="savingMode"
+        :request="request"
+        :collection-index="collectionIndex"
+        :folder-index="folderIndex"
+        :folder-path="folderPath"
+        :folder-name="folder.name"
+        :request-index="index"
+        :doc="doc"
+        @edit-request="$emit('edit-request', $event)"
+        @select="$emit('select', $event)"
+      />
+      <div
         v-if="
           folder.folders &&
           folder.folders.length === 0 &&
           folder.requests &&
           folder.requests.length === 0
         "
+        class="
+          flex
+          items-center
+          text-secondaryLight
+          flex-col
+          p-4
+          justify-center
+          ml-5
+          border-l border-dividerLight
+        "
       >
-        <li
-          class="
-            ml-5
-            border-l border-dividerLight
-            ml-5
-            border-l border-dividerLight
-          "
-        >
-          <p>
-            <i class="material-icons">not_interested</i>
-            {{ $t("folder_empty") }}
-          </p>
-        </li>
-      </ul>
+        <i class="material-icons opacity-50 pb-2">folder_open</i>
+        <span class="text-xs">
+          {{ $t("folder_empty") }}
+        </span>
+      </div>
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
@@ -172,6 +189,12 @@ export default Vue.extend({
         this.picked.folderPath === this.folderPath
       )
     },
+    getCollectionIcon() {
+      if (this.isSelected) return "check_circle"
+      else if (!this.showChildren && !this.isFiltered) return "arrow_right"
+      else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
+      else return "folder"
+    },
   },
   methods: {
     pick() {
diff --git a/components/collections/graphql/Request.vue b/components/collections/graphql/Request.vue
index 04d9b07df..6628ac893 100644
--- a/components/collections/graphql/Request.vue
+++ b/components/collections/graphql/Request.vue
@@ -1,21 +1,46 @@
 <template>
-  <div>
+  <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      :class="[{ 'bg-primaryDark': dragging }]"
+      class="flex items-center group"
       draggable="true"
       @dragstart="dragStart"
       @dragover.stop
       @dragleave="dragging = false"
       @dragend="dragging = false"
     >
-      <div>
-        <ButtonSecondary
-          :class="{ 'mx-3 text-green-400': isSelected }"
-          :icon="isSelected ? 'check_circle' : 'description'"
-          :label="request.name"
-          @click.native="!doc ? selectRequest() : {}"
-        />
-      </div>
+      <span
+        class="
+          font-mono font-bold
+          flex
+          justify-center
+          items-center
+          text-xs
+          w-12
+          mx-2
+          truncate
+          cursor-pointer
+        "
+        @click="!doc ? selectRequest() : {}"
+      >
+        <i class="material-icons" :class="{ 'text-green-400': isSelected }">
+          {{ isSelected ? "check_circle" : "description" }}
+        </i>
+      </span>
+      <span
+        class="
+          py-3
+          cursor-pointer
+          pr-2
+          flex flex-1
+          min-w-0
+          text-xs
+          group-hover:text-secondaryDark
+          transition
+        "
+        @click="!doc ? selectRequest() : {}"
+      >
+        <span class="truncate"> {{ request.name }} </span>
+      </span>
       <tippy
         ref="options"
         interactive
diff --git a/components/collections/graphql/index.vue b/components/collections/graphql/index.vue
index a64d942d4..2e46266b3 100644
--- a/components/collections/graphql/index.vue
+++ b/components/collections/graphql/index.vue
@@ -1,95 +1,108 @@
 <template>
   <AppSection label="collections">
-    <div class="flex">
+    <div class="flex flex-col sticky top-10 z-10 bg-primary">
       <input
         v-if="showCollActions"
         v-model="filterText"
-        aria-label="Search"
         type="search"
         :placeholder="$t('search')"
-        class="input rounded-t-lg"
+        class="
+          px-4
+          py-3
+          text-xs
+          border-b border-dividerLight
+          flex flex-1
+          bg-primaryLight
+          focus:outline-none
+        "
+      />
+      <CollectionsGraphqlAdd
+        :show="showModalAdd"
+        @hide-modal="displayModalAdd(false)"
+      />
+      <CollectionsGraphqlEdit
+        :show="showModalEdit"
+        :editing-collection="editingCollection"
+        :editing-collection-index="editingCollectionIndex"
+        @hide-modal="displayModalEdit(false)"
+      />
+      <CollectionsGraphqlAddFolder
+        :show="showModalAddFolder"
+        :folder-path="editingFolderPath"
+        @add-folder="onAddFolder($event)"
+        @hide-modal="displayModalAddFolder(false)"
+      />
+      <CollectionsGraphqlEditFolder
+        :show="showModalEditFolder"
+        :collection-index="editingCollectionIndex"
+        :folder="editingFolder"
+        :folder-index="editingFolderIndex"
+        :folder-path="editingFolderPath"
+        @hide-modal="displayModalEditFolder(false)"
+      />
+      <CollectionsGraphqlEditRequest
+        :show="showModalEditRequest"
+        :folder-path="editingFolderPath"
+        :request="editingRequest"
+        :request-index="editingRequestIndex"
+        @hide-modal="displayModalEditRequest(false)"
+      />
+      <CollectionsGraphqlImportExport
+        :show="showModalImportExport"
+        @hide-modal="displayModalImportExport(false)"
+      />
+      <div class="border-b flex justify-between flex-1 border-dividerLight">
+        <ButtonSecondary
+          icon="add"
+          :label="$t('new')"
+          @click.native="displayModalAdd(true)"
+        />
+        <ButtonSecondary
+          v-if="showCollActions"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('import_export')"
+          icon="import_export"
+          @click.native="displayModalImportExport(true)"
+        />
+      </div>
+    </div>
+    <div
+      v-if="collections.length === 0"
+      class="flex items-center text-secondaryLight flex-col p-4 justify-center"
+    >
+      <i class="material-icons opacity-50 pb-2">create_new_folder</i>
+      <span class="text-xs">
+        {{ $t("create_new_collection") }}
+      </span>
+    </div>
+    <div class="flex-col">
+      <CollectionsGraphqlCollection
+        v-for="(collection, index) in filteredCollections"
+        :key="collection.name"
+        :picked="picked"
+        :name="collection.name"
+        :collection-index="index"
+        :collection="collection"
+        :doc="doc"
+        :is-filtered="filterText.length > 0"
+        :saving-mode="savingMode"
+        @edit-collection="editCollection(collection, index)"
+        @add-folder="addFolder($event)"
+        @edit-folder="editFolder($event)"
+        @edit-request="editRequest($event)"
+        @select-collection="$emit('use-collection', collection)"
+        @select="$emit('select', $event)"
       />
     </div>
-    <CollectionsGraphqlAdd
-      :show="showModalAdd"
-      @hide-modal="displayModalAdd(false)"
-    />
-    <CollectionsGraphqlEdit
-      :show="showModalEdit"
-      :editing-collection="editingCollection"
-      :editing-collection-index="editingCollectionIndex"
-      @hide-modal="displayModalEdit(false)"
-    />
-    <CollectionsGraphqlAddFolder
-      :show="showModalAddFolder"
-      :folder-path="editingFolderPath"
-      @add-folder="onAddFolder($event)"
-      @hide-modal="displayModalAddFolder(false)"
-    />
-    <CollectionsGraphqlEditFolder
-      :show="showModalEditFolder"
-      :collection-index="editingCollectionIndex"
-      :folder="editingFolder"
-      :folder-index="editingFolderIndex"
-      :folder-path="editingFolderPath"
-      @hide-modal="displayModalEditFolder(false)"
-    />
-    <CollectionsGraphqlEditRequest
-      :show="showModalEditRequest"
-      :folder-path="editingFolderPath"
-      :request="editingRequest"
-      :request-index="editingRequestIndex"
-      @hide-modal="displayModalEditRequest(false)"
-    />
-    <CollectionsGraphqlImportExport
-      :show="showModalImportExport"
-      @hide-modal="displayModalImportExport(false)"
-    />
-    <div class="border-b flex flex-1 border-divider">
-      <ButtonSecondary
-        icon="new"
-        :label="$t('new')"
-        @click.native="displayModalAdd(true)"
-      />
-      <ButtonSecondary
-        v-if="showCollActions"
-        :label="$t('import_export')"
-        @click.native="displayModalImportExport(true)"
-      />
+    <div
+      v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
+      class="flex items-center text-secondaryLight flex-col p-4 justify-center"
+    >
+      <i class="material-icons opacity-50 pb-2">manage_search</i>
+      <span class="text-xs">
+        {{ $t("nothing_found") }} "{{ filterText }}"
+      </span>
     </div>
-    <p v-if="collections.length === 0">
-      <i class="material-icons">help_outline</i>
-      {{ $t("create_new_collection") }}
-    </p>
-    <div class="overflow-auto">
-      <ul class="flex-col">
-        <li
-          v-for="(collection, index) in filteredCollections"
-          :key="collection.name"
-        >
-          <CollectionsGraphqlCollection
-            :picked="picked"
-            :name="collection.name"
-            :collection-index="index"
-            :collection="collection"
-            :doc="doc"
-            :is-filtered="filterText.length > 0"
-            :saving-mode="savingMode"
-            @edit-collection="editCollection(collection, index)"
-            @add-folder="addFolder($event)"
-            @edit-folder="editFolder($event)"
-            @edit-request="editRequest($event)"
-            @select-collection="$emit('use-collection', collection)"
-            @select="$emit('select', $event)"
-          />
-        </li>
-      </ul>
-    </div>
-    <p v-if="filterText && filteredCollections.length === 0">
-      <i class="material-icons">not_interested</i> {{ $t("nothing_found") }} "{{
-        filterText
-      }}"
-    </p>
   </AppSection>
 </template>
 
diff --git a/components/collections/index.vue b/components/collections/index.vue
index d4573da4e..0cf635543 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -1,22 +1,61 @@
 <template>
   <AppSection label="collections">
-    <div class="flex sticky top-10 border-b border-dividerLight">
+    <div class="flex flex-col sticky top-10 z-10 bg-primary">
       <input
         v-if="!saveRequest"
         v-model="filterText"
-        aria-label="Search"
         type="search"
         :placeholder="$t('search')"
-        class="px-4 py-3 text-xs flex flex-1 bg-primary focus:outline-none"
+        class="
+          px-4
+          py-3
+          text-xs
+          border-b border-dividerLight
+          flex flex-1
+          bg-primaryLight
+          focus:outline-none
+        "
       />
+      <CollectionsChooseType
+        :collections-type="collectionsType"
+        :show="showTeamCollections"
+        :doc="doc"
+        @update-collection-type="updateCollectionType"
+        @update-selected-team="updateSelectedTeam"
+      />
+      <div class="border-b flex justify-between flex-1 border-dividerLight">
+        <ButtonSecondary
+          v-if="
+            collectionsType.type == 'team-collections' &&
+            (collectionsType.selectedTeam == undefined ||
+              collectionsType.selectedTeam.myRole == 'VIEWER')
+          "
+          v-tippy="{ theme: 'tooltip' }"
+          disabled
+          icon="add"
+          :title="$t('disable_new_collection')"
+          :label="$t('new')"
+          @click.native="displayModalAdd(true)"
+        />
+        <ButtonSecondary
+          v-else
+          icon="add"
+          :label="$t('new')"
+          @click.native="displayModalAdd(true)"
+        />
+        <ButtonSecondary
+          v-if="!saveRequest"
+          v-tippy="{ theme: 'tooltip' }"
+          :disabled="
+            collectionsType.type == 'team-collections' &&
+            collectionsType.selectedTeam == undefined
+          "
+          icon="import_export"
+          :title="$t('import_export')"
+          @click.native="displayModalImportExport(true)"
+        />
+      </div>
     </div>
-    <CollectionsChooseType
-      :collections-type="collectionsType"
-      :show="showTeamCollections"
-      :doc="doc"
-      @update-collection-type="updateCollectionType"
-      @update-selected-team="updateSelectedTeam"
-    />
     <CollectionsAdd
       :show="showModalAdd"
       @submit="addNewRootCollection"
@@ -53,38 +92,6 @@
       @hide-modal="displayModalImportExport(false)"
       @update-team-collections="updateTeamCollections"
     />
-    <div class="border-b flex justify-between flex-1 border-dividerLight">
-      <ButtonSecondary
-        v-if="
-          collectionsType.type == 'team-collections' &&
-          (collectionsType.selectedTeam == undefined ||
-            collectionsType.selectedTeam.myRole == 'VIEWER')
-        "
-        v-tippy="{ theme: 'tooltip' }"
-        disabled
-        icon="add"
-        :title="$t('disable_new_collection')"
-        :label="$t('new')"
-        @click.native="displayModalAdd(true)"
-      />
-      <ButtonSecondary
-        v-else
-        icon="add"
-        :label="$t('new')"
-        @click.native="displayModalAdd(true)"
-      />
-      <ButtonSecondary
-        v-if="!saveRequest"
-        v-tippy="{ theme: 'tooltip' }"
-        :disabled="
-          collectionsType.type == 'team-collections' &&
-          collectionsType.selectedTeam == undefined
-        "
-        icon="import_export"
-        :title="$t('import_export')"
-        @click.native="displayModalImportExport(true)"
-      />
-    </div>
     <div
       v-if="collections.length === 0"
       class="flex items-center text-secondaryLight flex-col p-4 justify-center"
@@ -126,7 +133,7 @@
       />
     </div>
     <div
-      v-if="filterText && filteredCollections.length === 0"
+      v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
       class="flex items-center text-secondaryLight flex-col p-4 justify-center"
     >
       <i class="material-icons opacity-50 pb-2">manage_search</i>
diff --git a/components/collections/my/Collection.vue b/components/collections/my/Collection.vue
index b9c58bd35..a3cb3be9d 100644
--- a/components/collections/my/Collection.vue
+++ b/components/collections/my/Collection.vue
@@ -21,13 +21,15 @@
         "
         @click="toggleShowChildren()"
       >
-        <i class="material-icons">{{ getCollectionIcon }}</i>
+        <i class="material-icons" :class="{ 'text-green-400': isSelected }">
+          {{ getCollectionIcon }}
+        </i>
       </span>
       <span
         class="
           py-3
           cursor-pointer
-          pr-3
+          pr-2
           flex flex-1
           min-w-0
           text-xs
diff --git a/components/collections/my/Folder.vue b/components/collections/my/Folder.vue
index 0e68b892c..3784edf6f 100644
--- a/components/collections/my/Folder.vue
+++ b/components/collections/my/Folder.vue
@@ -21,13 +21,15 @@
         "
         @click="toggleShowChildren()"
       >
-        <i class="material-icons">{{ getCollectionIcon }}</i>
+        <i class="material-icons" :class="{ 'text-green-400': isSelected }">
+          {{ getCollectionIcon }}
+        </i>
       </span>
       <span
         class="
           py-3
           cursor-pointer
-          pr-3
+          pr-2
           flex flex-1
           min-w-0
           text-xs
diff --git a/components/collections/my/Request.vue b/components/collections/my/Request.vue
index e1e8c1fe1..874f0795b 100644
--- a/components/collections/my/Request.vue
+++ b/components/collections/my/Request.vue
@@ -16,23 +16,29 @@
           items-center
           text-xs
           w-12
+          mx-2
           truncate
           cursor-pointer
         "
-        :class="[
-          getRequestLabelColor(request.method),
-          { 'mx-3 text-green-400': isSelected },
-        ]"
+        :class="getRequestLabelColor(request.method)"
         @click="!doc ? selectRequest() : {}"
       >
-        <i v-if="isSelected" class="material-icons">check_circle</i>
-        {{ request.method }}
+        <i
+          v-if="isSelected"
+          class="material-icons"
+          :class="{ 'text-green-400': isSelected }"
+        >
+          check_circle
+        </i>
+        <span v-else>
+          {{ request.method }}
+        </span>
       </span>
       <span
         class="
           py-3
           cursor-pointer
-          pr-3
+          pr-2
           flex flex-1
           min-w-0
           text-xs
diff --git a/components/collections/teams/Collection.vue b/components/collections/teams/Collection.vue
index 911c81606..30400f072 100644
--- a/components/collections/teams/Collection.vue
+++ b/components/collections/teams/Collection.vue
@@ -13,13 +13,15 @@
         "
         @click="toggleShowChildren()"
       >
-        <i class="material-icons">{{ getCollectionIcon }}</i>
+        <i class="material-icons" :class="{ 'text-green-400': isSelected }">
+          {{ getCollectionIcon }}
+        </i>
       </span>
       <span
         class="
           py-3
           cursor-pointer
-          pr-3
+          pr-2
           flex flex-1
           min-w-0
           text-xs
diff --git a/components/collections/teams/Folder.vue b/components/collections/teams/Folder.vue
index 3961071ce..c72360e59 100644
--- a/components/collections/teams/Folder.vue
+++ b/components/collections/teams/Folder.vue
@@ -13,13 +13,15 @@
         "
         @click="toggleShowChildren()"
       >
-        <i class="material-icons">{{ getCollectionIcon }}</i>
+        <i class="material-icons" :class="{ 'text-green-400': isSelected }">
+          {{ getCollectionIcon }}
+        </i>
       </span>
       <span
         class="
           py-3
           cursor-pointer
-          pr-3
+          pr-2
           flex flex-1
           min-w-0
           text-xs
diff --git a/components/collections/teams/Request.vue b/components/collections/teams/Request.vue
index 7e5d659ee..105789526 100644
--- a/components/collections/teams/Request.vue
+++ b/components/collections/teams/Request.vue
@@ -9,23 +9,29 @@
           items-center
           text-xs
           w-12
+          mx-2
           truncate
           cursor-pointer
         "
-        :class="[
-          getRequestLabelColor(request.method),
-          { 'mx-3 text-green-400': isSelected },
-        ]"
+        :class="getRequestLabelColor(request.method)"
         @click="!doc ? selectRequest() : {}"
       >
-        <i v-if="isSelected" class="material-icons">check_circle</i>
-        {{ request.method }}
+        <i
+          v-if="isSelected"
+          class="material-icons"
+          :class="{ 'text-green-400': isSelected }"
+        >
+          check_circle
+        </i>
+        <span v-else>
+          {{ request.method }}
+        </span>
       </span>
       <span
         class="
           py-3
           cursor-pointer
-          pr-3
+          pr-2
           flex flex-1
           min-w-0
           text-xs
diff --git a/components/environments/Environment.vue b/components/environments/Environment.vue
index 72434c831..4d81a8ecc 100644
--- a/components/environments/Environment.vue
+++ b/components/environments/Environment.vue
@@ -18,7 +18,7 @@
       class="
         py-3
         cursor-pointer
-        pr-3
+        pr-2
         flex flex-1
         min-w-0
         text-xs
diff --git a/components/environments/index.vue b/components/environments/index.vue
index 2c29ad80d..653e1f427 100644
--- a/components/environments/index.vue
+++ b/components/environments/index.vue
@@ -1,31 +1,48 @@
 <template>
   <AppSection label="environments">
-    <select
-      v-model="selectedEnvironmentIndex"
-      :disabled="environments.length == 0"
-      class="
-        flex
-        w-full
-        px-4
-        text-xs
-        py-2
-        focus:outline-none
-        border-b border-dividerLight
-        bg-primary
-      "
-    >
-      <option :value="-1">No environment</option>
-      <option v-if="environments.length === 0" value="0">
-        {{ $t("create_new_environment") }}
-      </option>
-      <option
-        v-for="(environment, index) in environments"
-        :key="index"
-        :value="index"
-      >
-        {{ environment.name }}
-      </option>
-    </select>
+    <div class="flex flex-col sticky z-10 top-10 bg-primary">
+      <div class="select-wrapper">
+        <select
+          v-model="selectedEnvironmentIndex"
+          :disabled="environments.length == 0"
+          class="
+            flex
+            w-full
+            px-4
+            text-xs
+            py-3
+            focus:outline-none
+            border-b border-dividerLight
+            bg-primaryLight
+          "
+        >
+          <option :value="-1">No environment</option>
+          <option v-if="environments.length === 0" value="0">
+            {{ $t("create_new_environment") }}
+          </option>
+          <option
+            v-for="(environment, index) in environments"
+            :key="index"
+            :value="index"
+          >
+            {{ environment.name }}
+          </option>
+        </select>
+      </div>
+      <div class="border-b flex justify-between flex-1 border-dividerLight">
+        <ButtonSecondary
+          icon="add"
+          :label="$t('new')"
+          @click.native="displayModalAdd(true)"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          icon="import_export"
+          :title="$t('import_export')"
+          @click.native="displayModalImportExport(true)"
+        />
+      </div>
+    </div>
     <EnvironmentsAdd
       :show="showModalAdd"
       @hide-modal="displayModalAdd(false)"
@@ -40,19 +57,6 @@
       :show="showModalImportExport"
       @hide-modal="displayModalImportExport(false)"
     />
-    <div class="border-b flex justify-between flex-1 border-dividerLight">
-      <ButtonSecondary
-        icon="add"
-        :label="$t('new')"
-        @click.native="displayModalAdd(true)"
-      />
-      <ButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        icon="import_export"
-        :title="$t('import_export')"
-        @click.native="displayModalImportExport(true)"
-      />
-    </div>
     <div
       v-if="environments.length === 0"
       class="flex items-center text-secondaryLight flex-col p-4 justify-center"
diff --git a/components/history/graphql/Card.vue b/components/history/graphql/Card.vue
index c9db749a1..ee6fc341c 100644
--- a/components/history/graphql/Card.vue
+++ b/components/history/graphql/Card.vue
@@ -1,119 +1,65 @@
 <template>
-  <div>
-    <div class="flex">
-      <li>
-        <input
-          data-testid="'url'"
-          :aria-label="$t('url')"
-          type="text"
-          readonly
-          :value="entry.url"
-          :placeholder="$t('empty_req_name')"
-          class="input cursor-pointer text-sm bg-transparent"
-          @click="$emit('use-entry')"
-        />
-      </li>
+  <div class="flex flex-col group">
+    <div class="flex items-center">
+      <span
+        class="
+          py-3
+          cursor-pointer
+          pr-2
+          pl-4
+          flex flex-1
+          min-w-0
+          text-xs
+          group-hover:text-secondaryDark
+          transition
+        "
+        @click="$emit('use-entry')"
+      >
+        <span class="truncate">
+          {{ entry.url }}
+        </span>
+      </span>
       <ButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
-        :title="!entry.star ? $t('add_star') : $t('remove_star')"
-        data-testid="star_button"
-        :icon="entry.star ? 'star' : 'star_border'"
-        color="yellow"
-        @click.native="$emit('toggle-star')"
+        icon="delete"
+        :title="$t('delete')"
+        class="group-hover:inline-flex hidden"
+        color="red"
+        @click.native="$emit('delete-entry')"
       />
       <ButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
         :title="expand ? $t('hide_more') : $t('show_more')"
-        data-testid="query_expand"
         :icon="expand ? 'unfold_less' : 'unfold_more'"
+        class="group-hover:inline-flex hidden"
         @click.native="expand = !expand"
       />
-      <tippy
-        ref="options"
-        interactive
-        tabindex="-1"
-        trigger="click"
-        theme="popover"
-        arrow
+      <ButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        :title="!entry.star ? $t('add_star') : $t('remove_star')"
+        :icon="entry.star ? 'star' : 'star_border'"
+        color="yellow"
+        :class="{ 'group-hover:inline-flex hidden': !entry.star }"
+        @click.native="$emit('toggle-star')"
+      />
+    </div>
+    <div class="flex flex-col">
+      <span
+        v-for="(line, index) in query"
+        :key="`line-${index}`"
+        class="
+          text-xs
+          cursor-pointer
+          truncate
+          px-4
+          font-mono
+          text-secondaryLight
+        "
+        @click="$emit('use-entry')"
       >
-        <template #trigger>
-          <TabPrimary
-            v-tippy="{ theme: 'tooltip' }"
-            :title="$t('options')"
-            data-testid="options"
-            icon="more_vert"
-          />
-        </template>
-        <SmartItem
-          data-testid="restore_history_entry"
-          :aria-label="$t('restore')"
-          icon="restore"
-          :label="$t('restore')"
-          @click.native="
-            $emit('use-entry')
-            $refs.options.tippy().hide()
-          "
-        />
-        <SmartItem
-          data-testid="delete_history_entry"
-          :aria-label="$t('delete')"
-          icon="delete"
-          :label="$t('delete')"
-          @click.native="
-            $emit('delete-entry')
-            $refs.options.tippy().hide()
-          "
-        />
-      </tippy>
+        {{ line }}
+      </span>
     </div>
-    <div class="flex">
-      <li data-testid="'query'">
-        <input
-          v-for="(line, index) in query"
-          :key="`line-${index}`"
-          :aria-label="$t('query')"
-          type="text"
-          readonly
-          :value="`${line}`"
-          class="input pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
-        />
-      </li>
-    </div>
-    <transition name="fade">
-      <div v-if="showMore" class="flex">
-        <li>
-          <input
-            v-tippy="{ theme: 'tooltip' }"
-            title="entry.date"
-            :aria-label="$t('time')"
-            type="text"
-            readonly
-            :value="entry.time"
-            class="input pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
-          />
-        </li>
-        <li>
-          <input
-            :aria-label="$t('duration')"
-            type="text"
-            readonly
-            :value="`Duration: ${entry.duration}ms`"
-            :placeholder="$t('no_duration')"
-            class="input pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
-          />
-        </li>
-        <!-- <li>
-          <input class="input"
-            :aria-label="$t('prerequest_script')"
-            type="text"
-            readonly
-            :value="entry.preRequestScript"
-            :placeholder="$t('no_prerequest_script')"
-            class="pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
-          />
-        </li> -->
-      </div>
-    </transition>
   </div>
 </template>
 
diff --git a/components/history/index.vue b/components/history/index.vue
index 713c6198d..ad7605c7e 100644
--- a/components/history/index.vue
+++ b/components/history/index.vue
@@ -1,11 +1,19 @@
 <template>
   <AppSection label="history">
-    <div class="flex sticky top-10 border-b border-dividerLight">
+    <div
+      class="
+        flex
+        sticky
+        z-10
+        bg-primaryLight
+        top-10
+        border-b border-dividerLight
+      "
+    >
       <input
         v-model="filterText"
-        aria-label="Search"
         type="search"
-        class="px-4 py-3 text-xs flex flex-1 bg-primary focus:outline-none"
+        class="px-4 py-3 text-xs flex flex-1 bg-primaryLight focus:outline-none"
         :placeholder="$t('search')"
       />
       <ButtonSecondary
@@ -39,7 +47,7 @@
       </div>
     </div>
     <div
-      :class="{ hidden: filteredHistory.length != 0 || history.length === 0 }"
+      v-if="!(filteredHistory.length !== 0 || history.length === 0)"
       class="flex items-center text-secondaryLight flex-col p-4 justify-center"
     >
       <i class="material-icons opacity-50 pb-2">manage_search</i>
diff --git a/components/history/rest/Card.vue b/components/history/rest/Card.vue
index 8034f544f..fba75a314 100644
--- a/components/history/rest/Card.vue
+++ b/components/history/rest/Card.vue
@@ -21,7 +21,7 @@
       class="
         py-3
         cursor-pointer
-        pr-3
+        pr-2
         flex flex-1
         min-w-0
         text-xs
@@ -36,7 +36,6 @@
     </span>
     <ButtonSecondary
       v-tippy="{ theme: 'tooltip' }"
-      data-testid="delete_history_entry"
       icon="delete"
       :title="$t('delete')"
       class="group-hover:inline-flex hidden"
diff --git a/pages/api.vue b/pages/api.vue
index bf0012a49..50fe1c780 100644
--- a/pages/api.vue
+++ b/pages/api.vue
@@ -601,7 +601,7 @@
       </Pane>
       <Pane max-size="30" size="25" min-size="20" class="overflow-auto hide-scrollbar">
         <aside class="h-full">
-          <SmartTabs styles="sticky top-0">
+          <SmartTabs styles="sticky z-10 top-0">
             <SmartTab :id="'history'" :label="$t('history')" :selected="true">
               <History
                 :page="'rest'"
diff --git a/pages/graphql.vue b/pages/graphql.vue
index d5d5691da..c88370996 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -323,95 +323,103 @@
           </Pane>
         </Splitpanes>
       </Pane>
-      <Pane max-size="35" min-size="20" class="overflow-auto">
+      <Pane
+        max-size="30"
+        size="25"
+        min-size="20"
+        class="overflow-auto hide-scrollbar"
+      >
         <aside class="lg:max-w-md">
-          <SmartTabs>
+          <SmartTabs styles="sticky z-10 top-0">
             <SmartTab :id="'docs'" :label="`Docs`" :selected="true">
               <AppSection label="docs">
-                <section class="flex-col">
+                <div class="flex flex-col sticky z-10 bg-primaryLight top-10">
                   <input
                     v-model="graphqlFieldsFilterText"
                     type="text"
                     :placeholder="$t('search')"
-                    class="input rounded-t-lg"
+                    class="
+                      px-4
+                      py-3
+                      text-xs
+                      flex flex-1
+                      bg-primaryLight
+                      focus:outline-none
+                    "
                   />
-                  <SmartTabs ref="gqlTabs" styles="m-4">
-                    <div class="gqlTabs">
-                      <SmartTab
-                        v-if="queryFields.length > 0"
-                        :id="'queries'"
-                        :label="$t('queries')"
-                        :selected="true"
-                      >
-                        <div
-                          v-for="field in filteredQueryFields"
-                          :key="field.name"
-                        >
-                          <GraphqlField
-                            :gql-field="field"
-                            :jump-type-callback="handleJumpToType"
-                          />
-                        </div>
-                      </SmartTab>
-
-                      <SmartTab
-                        v-if="mutationFields.length > 0"
-                        :id="'mutations'"
-                        :label="$t('mutations')"
-                      >
-                        <div
-                          v-for="field in filteredMutationFields"
-                          :key="field.name"
-                        >
-                          <GraphqlField
-                            :gql-field="field"
-                            :jump-type-callback="handleJumpToType"
-                          />
-                        </div>
-                      </SmartTab>
-
-                      <SmartTab
-                        v-if="subscriptionFields.length > 0"
-                        :id="'subscriptions'"
-                        :label="$t('subscriptions')"
-                      >
-                        <div
-                          v-for="field in filteredSubscriptionFields"
-                          :key="field.name"
-                        >
-                          <GraphqlField
-                            :gql-field="field"
-                            :jump-type-callback="handleJumpToType"
-                          />
-                        </div>
-                      </SmartTab>
-
-                      <SmartTab
-                        v-if="graphqlTypes.length > 0"
-                        :id="'types'"
-                        ref="typesTab"
-                        :label="$t('types')"
-                      >
-                        <div
-                          v-for="type in filteredGraphqlTypes"
-                          :key="type.name"
-                        >
-                          <GraphqlType
-                            :gql-type="type"
-                            :gql-types="graphqlTypes"
-                            :is-highlighted="
-                              isGqlTypeHighlighted({ gqlType: type })
-                            "
-                            :highlighted-fields="
-                              getGqlTypeHighlightedFields({ gqlType: type })
-                            "
-                            :jump-type-callback="handleJumpToType"
-                          />
-                        </div>
-                      </SmartTab>
+                </div>
+                <SmartTabs
+                  ref="gqlTabs"
+                  styles="
+                    border-t border-dividerLight sticky z-10 top-20"
+                >
+                  <SmartTab
+                    v-if="queryFields.length > 0"
+                    :id="'queries'"
+                    :label="$t('queries')"
+                    :selected="true"
+                  >
+                    <div v-for="field in filteredQueryFields" :key="field.name">
+                      <GraphqlField
+                        :gql-field="field"
+                        :jump-type-callback="handleJumpToType"
+                      />
                     </div>
-                  </SmartTabs>
-                </section>
+                  </SmartTab>
+
+                  <SmartTab
+                    v-if="mutationFields.length > 0"
+                    :id="'mutations'"
+                    :label="$t('mutations')"
+                  >
+                    <div
+                      v-for="field in filteredMutationFields"
+                      :key="field.name"
+                    >
+                      <GraphqlField
+                        :gql-field="field"
+                        :jump-type-callback="handleJumpToType"
+                      />
+                    </div>
+                  </SmartTab>
+
+                  <SmartTab
+                    v-if="subscriptionFields.length > 0"
+                    :id="'subscriptions'"
+                    :label="$t('subscriptions')"
+                  >
+                    <div
+                      v-for="field in filteredSubscriptionFields"
+                      :key="field.name"
+                    >
+                      <GraphqlField
+                        :gql-field="field"
+                        :jump-type-callback="handleJumpToType"
+                      />
+                    </div>
+                  </SmartTab>
+
+                  <SmartTab
+                    v-if="graphqlTypes.length > 0"
+                    :id="'types'"
+                    ref="typesTab"
+                    :label="$t('types')"
+                  >
+                    <div v-for="type in filteredGraphqlTypes" :key="type.name">
+                      <GraphqlType
+                        :gql-type="type"
+                        :gql-types="graphqlTypes"
+                        :is-highlighted="
+                          isGqlTypeHighlighted({ gqlType: type })
+                        "
+                        :highlighted-fields="
+                          getGqlTypeHighlightedFields({ gqlType: type })
+                        "
+                        :jump-type-callback="handleJumpToType"
+                      />
+                    </div>
+                  </SmartTab>
+                </SmartTabs>
                 <p
                   v-if="
                     queryFields.length === 0 &&
diff --git a/pages/settings.vue b/pages/settings.vue
index 11b245f55..b71747dd1 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -282,7 +282,6 @@
       </div>
     </div>
     <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
-    <FirebaseEmail :show="showEmail" @hide-modal="showEmail = false" />
     <SmartConfirmModal
       :show="confirmRemove"
       :title="`${$t('are_you_sure_remove_telemetry')} ${$t(