From eeddb6a97e26da89301571359dc7ce961cd93ec5 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Wed, 14 Jul 2021 05:19:08 +0530
Subject: [PATCH] fix: proper key for v-for loops

---
 assets/scss/styles.scss                       |  2 +-
 components/app/Shortcuts.vue                  |  2 +-
 components/collections/ChooseType.vue         |  2 +-
 components/collections/ImportExport.vue       |  2 +-
 components/collections/graphql/Collection.vue |  6 +--
 components/collections/graphql/Folder.vue     |  6 +--
 components/collections/graphql/index.vue      |  6 +--
 components/collections/index.vue              | 11 ++---
 components/collections/my/Collection.vue      |  6 +--
 components/collections/my/Folder.vue          |  6 +--
 components/collections/teams/Collection.vue   |  6 +--
 components/collections/teams/Folder.vue       |  6 +--
 components/docs/Collection.vue                |  2 +-
 components/docs/Folder.vue                    |  7 ++-
 components/docs/Request.vue                   | 14 ++++--
 components/environments/Edit.vue              |  2 +-
 components/environments/index.vue             |  6 +--
 components/graphql/Field.vue                  |  4 +-
 components/graphql/Type.vue                   | 17 ++++---
 components/history/index.vue                  |  4 +-
 components/http/BodyParameters.vue            |  8 ++--
 components/http/CodegenModal.vue              |  4 +-
 components/http/Headers.vue                   |  2 +-
 components/http/Parameters.vue                |  2 +-
 components/http/Request.vue                   |  8 ++--
 components/http/TokenList.vue                 |  2 +-
 components/lenses/HeadersRenderer.vue         |  2 +-
 components/lenses/ResponseBodyRenderer.vue    |  2 +-
 components/realtime/Log.vue                   | 10 ++--
 components/smart/AceEditor.vue                | 46 +++++++++----------
 components/smart/AutoComplete.vue             |  2 +-
 components/smart/ChangeLanguage.vue           |  4 +-
 components/smart/ColorModePicker.vue          |  6 +--
 components/smart/Tabs.vue                     |  2 +-
 components/teams/Edit.vue                     |  4 +-
 package-lock.json                             | 14 +++---
 package.json                                  |  2 +-
 pages/graphql.vue                             | 20 ++++----
 pages/index.vue                               | 12 ++---
 39 files changed, 139 insertions(+), 130 deletions(-)

diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index 9985eb87a..dc8c55d33 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -81,7 +81,7 @@ body {
 }
 
 .material-icons {
-  font-size: 1.25rem;
+  font-size: 1.25rem !important;
 }
 
 .svg-icons {
diff --git a/components/app/Shortcuts.vue b/components/app/Shortcuts.vue
index b11fb57d1..d3541e255 100644
--- a/components/app/Shortcuts.vue
+++ b/components/app/Shortcuts.vue
@@ -15,7 +15,7 @@
         >
           <kbd
             v-for="(key, keyIndex) in shortcut.keys"
-            :key="`key-${keyIndex}`"
+            :key="`shortcut-${index}-key-${keyIndex}`"
             class="
               py-2
               px-4
diff --git a/components/collections/ChooseType.vue b/components/collections/ChooseType.vue
index cea1cc54a..2e262b851 100644
--- a/components/collections/ChooseType.vue
+++ b/components/collections/ChooseType.vue
@@ -41,7 +41,7 @@
               </option>
               <option
                 v-for="(team, index) in myTeams"
-                :key="index"
+                :key="`team-${index}`"
                 :value="index"
               >
                 {{ team.name }}
diff --git a/components/collections/ImportExport.vue b/components/collections/ImportExport.vue
index 85afeac71..ec7302a2b 100644
--- a/components/collections/ImportExport.vue
+++ b/components/collections/ImportExport.vue
@@ -140,7 +140,7 @@
             </option>
             <option
               v-for="(collection, index) in myCollections"
-              :key="index"
+              :key="`collection-${index}`"
               :value="index"
             >
               {{ collection.name }}
diff --git a/components/collections/graphql/Collection.vue b/components/collections/graphql/Collection.vue
index c5359dc55..1cff01c45 100644
--- a/components/collections/graphql/Collection.vue
+++ b/components/collections/graphql/Collection.vue
@@ -98,7 +98,7 @@
     <div v-show="showChildren || isFiltered">
       <CollectionsGraphqlFolder
         v-for="(folder, index) in collection.folders"
-        :key="folder.name"
+        :key="`folder-${index}`"
         class="ml-5 border-l border-dividerLight"
         :picked="picked"
         :saving-mode="savingMode"
@@ -115,7 +115,7 @@
       />
       <CollectionsGraphqlRequest
         v-for="(request, index) in collection.requests"
-        :key="index"
+        :key="`request-${index}`"
         class="ml-5 border-l border-dividerLight"
         :picked="picked"
         :saving-mode="savingMode"
@@ -145,7 +145,7 @@
         "
       >
         <i class="material-icons opacity-50 pb-2">folder_open</i>
-        <span class="text-xs">
+        <span class="text-xs text-center">
           {{ $t("collection_empty") }}
         </span>
       </div>
diff --git a/components/collections/graphql/Folder.vue b/components/collections/graphql/Folder.vue
index ced1caf3c..af7bd8182 100644
--- a/components/collections/graphql/Folder.vue
+++ b/components/collections/graphql/Folder.vue
@@ -94,7 +94,7 @@
     <div v-show="showChildren || isFiltered">
       <CollectionsGraphqlFolder
         v-for="(subFolder, subFolderIndex) in folder.folders"
-        :key="subFolder.name"
+        :key="`subFolder-${subFolderIndex}`"
         class="ml-5 border-l border-dividerLight"
         :picked="picked"
         :saving-mode="savingMode"
@@ -111,7 +111,7 @@
       />
       <CollectionsGraphqlRequest
         v-for="(request, index) in folder.requests"
-        :key="index"
+        :key="`request-${index}`"
         class="ml-5 border-l border-dividerLight"
         :picked="picked"
         :saving-mode="savingMode"
@@ -144,7 +144,7 @@
         "
       >
         <i class="material-icons opacity-50 pb-2">folder_open</i>
-        <span class="text-xs">
+        <span class="text-xs text-center">
           {{ $t("folder_empty") }}
         </span>
       </div>
diff --git a/components/collections/graphql/index.vue b/components/collections/graphql/index.vue
index 8ac7bf0aa..16ecca050 100644
--- a/components/collections/graphql/index.vue
+++ b/components/collections/graphql/index.vue
@@ -41,7 +41,7 @@
     <div class="flex-col">
       <CollectionsGraphqlCollection
         v-for="(collection, index) in filteredCollections"
-        :key="collection.name"
+        :key="`collection-${index}`"
         :picked="picked"
         :name="collection.name"
         :collection-index="index"
@@ -62,7 +62,7 @@
       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">
+      <span class="text-xs text-center">
         {{ $t("create_new_collection") }}
       </span>
     </div>
@@ -71,7 +71,7 @@
       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">
+      <span class="text-xs text-center">
         {{ $t("nothing_found") }} "{{ filterText }}"
       </span>
     </div>
diff --git a/components/collections/index.vue b/components/collections/index.vue
index 92c01eaba..4e83c1d54 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -4,8 +4,8 @@
     :class="{ 'rounded-lg border-2 border-divider': saveRequest }"
   >
     <div
-      class="flex flex-col sticky top-10 z-10"
-      :class="{ 'bg-primary': !saveRequest }"
+      class="flex flex-col sticky z-10 top-0 bg-primary"
+      :class="{ '!top-10': !saveRequest && !doc }"
     >
       <input
         v-if="!saveRequest"
@@ -70,8 +70,7 @@
             : 'CollectionsTeamsCollection'
         "
         v-for="(collection, index) in filteredCollections"
-        :key="collection.name"
-        :name="collection.name"
+        :key="`collection-${index}`"
         :collection-index="index"
         :collection="collection"
         :doc="doc"
@@ -98,7 +97,7 @@
       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">
+      <span class="text-xs text-center">
         {{ $t("create_new_collection") }}
       </span>
     </div>
@@ -107,7 +106,7 @@
       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">
+      <span class="text-xs text-center">
         {{ $t("nothing_found") }} "{{ filterText }}"
       </span>
     </div>
diff --git a/components/collections/my/Collection.vue b/components/collections/my/Collection.vue
index fb5080461..f9efde32d 100644
--- a/components/collections/my/Collection.vue
+++ b/components/collections/my/Collection.vue
@@ -114,7 +114,7 @@
     <div v-show="showChildren || isFiltered">
       <CollectionsMyFolder
         v-for="(folder, index) in collection.folders"
-        :key="index"
+        :key="`folder-${index}`"
         class="ml-5 border-l border-dividerLight"
         :folder="folder"
         :folder-index="index"
@@ -133,7 +133,7 @@
       />
       <CollectionsMyRequest
         v-for="(request, index) in collection.requests"
-        :key="index"
+        :key="`request-${index}`"
         class="ml-5 border-l border-dividerLight"
         :request="request"
         :collection-index="collectionIndex"
@@ -167,7 +167,7 @@
         "
       >
         <i class="material-icons opacity-50 pb-2">folder_open</i>
-        <span class="text-xs">
+        <span class="text-xs text-center">
           {{ $t("collection_empty") }}
         </span>
       </div>
diff --git a/components/collections/my/Folder.vue b/components/collections/my/Folder.vue
index 5d6635943..10c903d6c 100644
--- a/components/collections/my/Folder.vue
+++ b/components/collections/my/Folder.vue
@@ -99,7 +99,7 @@
     <div v-show="showChildren || isFiltered">
       <CollectionsMyFolder
         v-for="(subFolder, subFolderIndex) in folder.folders"
-        :key="subFolder.name"
+        :key="`subFolder-${subFolderIndex}`"
         class="ml-5 border-l border-dividerLight"
         :folder="subFolder"
         :folder-index="subFolderIndex"
@@ -118,7 +118,7 @@
       />
       <CollectionsMyRequest
         v-for="(request, index) in folder.requests"
-        :key="index"
+        :key="`request-${index}`"
         class="ml-5 border-l border-dividerLight"
         :request="request"
         :collection-index="collectionIndex"
@@ -153,7 +153,7 @@
         "
       >
         <i class="material-icons opacity-50 pb-2">folder_open</i>
-        <span class="text-xs">
+        <span class="text-xs text-center">
           {{ $t("folder_empty") }}
         </span>
       </div>
diff --git a/components/collections/teams/Collection.vue b/components/collections/teams/Collection.vue
index f436d58de..7af0a4792 100644
--- a/components/collections/teams/Collection.vue
+++ b/components/collections/teams/Collection.vue
@@ -111,7 +111,7 @@
     <div v-show="showChildren || isFiltered">
       <CollectionsTeamsFolder
         v-for="(folder, index) in collection.children"
-        :key="folder.title"
+        :key="`folder-${folder}`"
         class="ml-5 border-l border-dividerLight"
         :folder="folder"
         :folder-index="index"
@@ -131,7 +131,7 @@
       />
       <CollectionsTeamsRequest
         v-for="(request, index) in collection.requests"
-        :key="index"
+        :key="`request-${index}`"
         class="ml-5 border-l border-dividerLight"
         :request="request.request"
         :collection-index="collectionIndex"
@@ -164,7 +164,7 @@
         "
       >
         <i class="material-icons opacity-50 pb-2">folder_open</i>
-        <span class="text-xs">
+        <span class="text-xs text-center">
           {{ $t("collection_empty") }}
         </span>
       </div>
diff --git a/components/collections/teams/Folder.vue b/components/collections/teams/Folder.vue
index cf28f8744..296f46f2c 100644
--- a/components/collections/teams/Folder.vue
+++ b/components/collections/teams/Folder.vue
@@ -96,7 +96,7 @@
     <div v-show="showChildren || isFiltered">
       <CollectionsTeamsFolder
         v-for="(subFolder, subFolderIndex) in folder.children"
-        :key="subFolder.name"
+        :key="`subFolder-${subFolderIndex}`"
         class="ml-5 border-l border-dividerLight"
         :folder="subFolder"
         :folder-index="subFolderIndex"
@@ -116,7 +116,7 @@
       />
       <CollectionsTeamsRequest
         v-for="(request, index) in folder.requests"
-        :key="index"
+        :key="`request-${index}`"
         class="ml-5 border-l border-dividerLight"
         :request="request.request"
         :collection-index="collectionIndex"
@@ -148,7 +148,7 @@
         "
       >
         <i class="material-icons opacity-50 pb-2">folder_open</i>
-        <span class="text-xs">
+        <span class="text-xs text-center">
           {{ $t("folder_empty") }}
         </span>
       </div>
diff --git a/components/docs/Collection.vue b/components/docs/Collection.vue
index a45b53e3e..d1a77d5a1 100644
--- a/components/docs/Collection.vue
+++ b/components/docs/Collection.vue
@@ -6,7 +6,7 @@
     </h2>
     <span
       v-for="(folder, index) in collection.folders"
-      :key="`sub-collection-${index}`"
+      :key="`folder-${index}`"
       class="folder"
     >
       <DocsFolder :folder="folder" />
diff --git a/components/docs/Folder.vue b/components/docs/Folder.vue
index c43ecbe82..b83dc6cf8 100644
--- a/components/docs/Folder.vue
+++ b/components/docs/Folder.vue
@@ -4,10 +4,13 @@
       <i class="material-icons">folder_open</i>
       {{ folder.name || $t("none") }}
     </h3>
-    <div v-for="(subFolder, index) in folder.folders" :key="index">
+    <div
+      v-for="(subFolder, index) in folder.folders"
+      :key="`subFolder-${index}`"
+    >
       <DocsFolder :folder="subFolder" />
     </div>
-    <div v-for="(request, index) in folder.requests" :key="index">
+    <div v-for="(request, index) in folder.requests" :key="`request-${index}`">
       <DocsRequest :request="request" />
     </div>
   </div>
diff --git a/components/docs/Request.vue b/components/docs/Request.vue
index bb72a9736..75ed0cc78 100644
--- a/components/docs/Request.vue
+++ b/components/docs/Request.vue
@@ -47,7 +47,11 @@
     </p>
     <h4 v-if="request.headers" class="heading">{{ $t("headers") }}</h4>
     <span v-if="request.headers">
-      <p v-for="header in request.headers" :key="header.key" class="doc-desc">
+      <p
+        v-for="(header, index) in request.headers"
+        :key="`header-${index}`"
+        class="doc-desc"
+      >
         <span>
           {{ header.key || $t("none") }}:
           <code>{{ header.value || $t("none") }}</code>
@@ -57,8 +61,8 @@
     <h4 v-if="request.params" class="heading">{{ $t("parameters") }}</h4>
     <span v-if="request.params">
       <p
-        v-for="parameter in request.params"
-        :key="parameter.key"
+        v-for="(parameter, index) in request.params"
+        :key="`parameter-${index}`"
         class="doc-desc"
       >
         <span>
@@ -70,8 +74,8 @@
     <h4 v-if="request.bodyParams" class="heading">{{ $t("payload") }}</h4>
     <span v-if="request.bodyParams">
       <p
-        v-for="payload in request.bodyParams"
-        :key="payload.key"
+        v-for="(payload, index) in request.bodyParams"
+        :key="`payload-${index}`"
         class="doc-desc"
       >
         <span>
diff --git a/components/environments/Edit.vue b/components/environments/Edit.vue
index eeafe8e6b..b15ca76f6 100644
--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -44,7 +44,7 @@
         <div class="border-2 border-divider">
           <div
             v-for="(variable, index) in vars"
-            :key="index"
+            :key="`variable-${index}`"
             class="
               flex
               border-b
diff --git a/components/environments/index.vue b/components/environments/index.vue
index 61feeba24..83586e72d 100644
--- a/components/environments/index.vue
+++ b/components/environments/index.vue
@@ -23,7 +23,7 @@
           </option>
           <option
             v-for="(environment, index) in environments"
-            :key="index"
+            :key="`environment-${index}`"
             :value="index"
           >
             {{ environment.name }}
@@ -63,14 +63,14 @@
       class="flex items-center text-secondaryLight flex-col p-4 justify-center"
     >
       <i class="material-icons opacity-50 pb-2">library_add</i>
-      <span class="text-xs">
+      <span class="text-xs text-center">
         {{ $t("create_new_environment") }}
       </span>
     </div>
     <div class="flex flex-col">
       <EnvironmentsEnvironment
         v-for="(environment, index) in environments"
-        :key="environment.name"
+        :key="`environment-${index}`"
         :environment-index="index"
         :environment="environment"
         @edit-environment="editEnvironment(environment, index)"
diff --git a/components/graphql/Field.vue b/components/graphql/Field.vue
index 9015e4e86..c1e285d77 100644
--- a/components/graphql/Field.vue
+++ b/components/graphql/Field.vue
@@ -7,7 +7,7 @@
       {{ fieldName }}
       <span v-if="fieldArgs.length > 0">
         (
-        <span v-for="(field, index) in fieldArgs" :key="index">
+        <span v-for="(field, index) in fieldArgs" :key="`field-${index}`">
           {{ field.name }}:
           <GraphqlTypeLink
             :gql-type="field.type"
@@ -47,7 +47,7 @@
     <div v-if="fieldArgs.length > 0">
       <h5 class="my-2 text-xs">Arguments:</h5>
       <div class="pl-4 border-l-2 border-divider">
-        <div v-for="(field, index) in fieldArgs" :key="index">
+        <div v-for="(field, index) in fieldArgs" :key="`field-${index}`">
           <span class="font-semibold text-xs">
             {{ field.name }}:
             <GraphqlTypeLink
diff --git a/components/graphql/Type.vue b/components/graphql/Type.vue
index 3ed256bba..3199a0630 100644
--- a/components/graphql/Type.vue
+++ b/components/graphql/Type.vue
@@ -17,7 +17,10 @@
     </div>
     <div v-if="interfaces.length > 0">
       <h5 class="my-2 text-xs">Interfaces:</h5>
-      <div v-for="gqlInterface in interfaces" :key="gqlInterface.name">
+      <div
+        v-for="(gqlInterface, index) in interfaces"
+        :key="`gqlInterface-${index}`"
+      >
         <GraphqlTypeLink
           :gql-type="gqlInterface"
           :jump-type-callback="jumpTypeCallback"
@@ -28,8 +31,8 @@
     <div v-if="children.length > 0" class="mb-2">
       <h5 class="my-2 text-xs">Children:</h5>
       <GraphqlTypeLink
-        v-for="child in children"
-        :key="child.name"
+        v-for="(child, index) in children"
+        :key="`child-${index}`"
         :gql-type="child"
         :jump-type-callback="jumpTypeCallback"
         class="pl-4 border-l-2 border-divider"
@@ -38,8 +41,8 @@
     <div v-if="gqlType.getFields">
       <h5 class="my-2 text-xs">Fields:</h5>
       <GraphqlField
-        v-for="field in gqlType.getFields()"
-        :key="field.name"
+        v-for="(field, index) in gqlType.getFields()"
+        :key="`field-${index}`"
         class="pl-4 border-l-2 border-divider"
         :gql-field="field"
         :is-highlighted="isFieldHighlighted({ field })"
@@ -49,8 +52,8 @@
     <div v-if="isEnum">
       <h5 class="my-2 text-xs">Values:</h5>
       <div
-        v-for="value in gqlType.getValues()"
-        :key="value.name"
+        v-for="(value, index) in gqlType.getValues()"
+        :key="`value-${index}`"
         class="pl-4 border-l-2 border-divider"
         v-text="value.name"
       ></div>
diff --git a/components/history/index.vue b/components/history/index.vue
index 05d16889b..5bc9b0e05 100644
--- a/components/history/index.vue
+++ b/components/history/index.vue
@@ -59,7 +59,7 @@
       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">
+      <span class="text-xs text-center">
         {{ $t("nothing_found") }} "{{ filterText }}"
       </span>
     </div>
@@ -68,7 +68,7 @@
       class="flex items-center text-secondaryLight flex-col p-4 justify-center"
     >
       <i class="material-icons opacity-50 pb-2">schedule</i>
-      <span class="text-xs">
+      <span class="text-xs text-center">
         {{ $t("history_empty") }}
       </span>
     </div>
diff --git a/components/http/BodyParameters.vue b/components/http/BodyParameters.vue
index a45165d7e..c1d73b885 100644
--- a/components/http/BodyParameters.vue
+++ b/components/http/BodyParameters.vue
@@ -25,7 +25,7 @@
     </div>
     <div
       v-for="(param, index) in bodyParams"
-      :key="index"
+      :key="`param-${index}`"
       class="
         flex
         border-b border-dashed
@@ -76,9 +76,9 @@
       <div v-else class="file-chips-container">
         <div class="file-chips-wrapper">
           <SmartDeletableChip
-            v-for="(file, i) in Array.from(bodyParams[index].value)"
-            :key="`body-param-${index}-file-${i}`"
-            @chip-delete="chipDelete(index, i)"
+            v-for="(file, fileIndex) in Array.from(bodyParams[index].value)"
+            :key="`param-${index}-file-${fileIndex}`"
+            @chip-delete="chipDelete(index, fileIndex)"
           >
             {{ file.name }}
           </SmartDeletableChip>
diff --git a/components/http/CodegenModal.vue b/components/http/CodegenModal.vue
index 1db3b2d02..882ed537b 100644
--- a/components/http/CodegenModal.vue
+++ b/components/http/CodegenModal.vue
@@ -39,8 +39,8 @@
                 </span>
               </template>
               <SmartItem
-                v-for="gen in codegens"
-                :key="gen.id"
+                v-for="(gen, index) in codegens"
+                :key="`gen-${index}`"
                 :label="gen.name"
                 @click.native="
                   requestType = gen.id
diff --git a/components/http/Headers.vue b/components/http/Headers.vue
index 3f52c7b4c..c6f7c6370 100644
--- a/components/http/Headers.vue
+++ b/components/http/Headers.vue
@@ -33,7 +33,7 @@
     </div>
     <div
       v-for="(header, index) in headers$"
-      :key="index"
+      :key="`header-${index}`"
       class="
         flex
         border-b border-dashed
diff --git a/components/http/Parameters.vue b/components/http/Parameters.vue
index 04e8b2594..1cf4775c2 100644
--- a/components/http/Parameters.vue
+++ b/components/http/Parameters.vue
@@ -33,7 +33,7 @@
     </div>
     <div
       v-for="(param, index) in params$"
-      :key="index"
+      :key="`param-${index}`"
       class="
         flex
         border-b border-dashed
diff --git a/components/http/Request.vue b/components/http/Request.vue
index baf730574..8f49fc7d7 100644
--- a/components/http/Request.vue
+++ b/components/http/Request.vue
@@ -34,12 +34,12 @@
             />
           </template>
           <SmartItem
-            v-for="(methodMenuItem, index) in methodMenuItems"
+            v-for="(method, index) in methods"
             :key="`method-${index}`"
-            :label="methodMenuItem"
+            :label="method"
             class="font-mono"
             @click.native="
-              updateMethod(methodMenuItem)
+              updateMethod(method)
               $refs.options.tippy().hide()
             "
           />
@@ -257,7 +257,7 @@ export default {
   data() {
     return {
       newMethod$: "",
-      methodMenuItems: [
+      methods: [
         "GET",
         "HEAD",
         "POST",
diff --git a/components/http/TokenList.vue b/components/http/TokenList.vue
index d4705b300..7683c097e 100644
--- a/components/http/TokenList.vue
+++ b/components/http/TokenList.vue
@@ -18,7 +18,7 @@
           />
         </div>
       </div>
-      <ul v-for="(token, index) in tokens" :key="index">
+      <ul v-for="(token, index) in tokens" :key="`token-${index}`">
         <li>
           <input
             class="input"
diff --git a/components/lenses/HeadersRenderer.vue b/components/lenses/HeadersRenderer.vue
index c6b42b7e3..a7490e9ac 100644
--- a/components/lenses/HeadersRenderer.vue
+++ b/components/lenses/HeadersRenderer.vue
@@ -2,7 +2,7 @@
   <div class="p-2 font-mono">
     <div
       v-for="(header, index) in headers"
-      :key="index"
+      :key="`header-${index}`"
       class="flex items-center"
     >
       <span
diff --git a/components/lenses/ResponseBodyRenderer.vue b/components/lenses/ResponseBodyRenderer.vue
index 0f67a9177..2ee44f143 100644
--- a/components/lenses/ResponseBodyRenderer.vue
+++ b/components/lenses/ResponseBodyRenderer.vue
@@ -3,7 +3,7 @@
     <SmartTab
       v-for="(lens, index) in validLenses"
       :id="lens.lensName"
-      :key="lens.lensName"
+      :key="`lens-${index}`"
       :label="lens.lensName"
       :selected="index === 0"
     >
diff --git a/components/realtime/Log.vue b/components/realtime/Log.vue
index 371cbdf60..a573cfb2d 100644
--- a/components/realtime/Log.vue
+++ b/components/realtime/Log.vue
@@ -4,11 +4,11 @@
     <div ref="log" name="log" class="realtime-log">
       <span v-if="log">
         <span
-          v-for="(logEntry, index) in log"
-          :key="index"
-          :style="{ color: logEntry.color }"
-          >@ {{ logEntry.ts }}{{ getSourcePrefix(logEntry.source)
-          }}{{ logEntry.payload }}</span
+          v-for="(entry, index) in log"
+          :key="`entry-${index}`"
+          :style="{ color: entry.color }"
+          >@ {{ entry.ts }}{{ getSourcePrefix(entry.source)
+          }}{{ entry.payload }}</span
         >
       </span>
       <span v-else>{{ $t("waiting_for_connection") }}</span>
diff --git a/components/smart/AceEditor.vue b/components/smart/AceEditor.vue
index ba4455ef6..830afde95 100644
--- a/components/smart/AceEditor.vue
+++ b/components/smart/AceEditor.vue
@@ -18,8 +18,8 @@
       "
     >
       <div
-        v-for="(p, index) in currPath"
-        :key="index"
+        v-for="(p, index) in currentPath"
+        :key="`p-${index}`"
         class="
           inline-flex
           items-center
@@ -34,11 +34,11 @@
         <span @click="onBlockClick(index)">
           {{ p }}
         </span>
-        <i v-if="index + 1 !== currPath.length" class="material-icons mx-2">
+        <i v-if="index + 1 !== currentPath.length" class="material-icons mx-2">
           chevron_right
         </i>
         <tippy
-          v-if="sibDropDownIndex == index"
+          v-if="siblingDropDownIndex == index"
           ref="options"
           interactive
           tabindex="-1"
@@ -47,11 +47,11 @@
           arrow
         >
           <SmartItem
-            v-for="(sib, i) in currSib"
-            :key="i"
+            v-for="(sibling, siblingIndex) in currentSibling"
+            :key="`p-${index}-sibling-${siblingIndex}`"
             class="font-mono"
-            :label="sib.key ? sib.key.value : i"
-            @click.native="goToSib(sib)"
+            :label="sibling.key ? sibling.key.value : i"
+            @click.native="goToSibling(sibling)"
           />
         </tippy>
       </div>
@@ -107,9 +107,9 @@ export default {
       editor: null,
       cacheValue: "",
       outline: outline(),
-      currPath: [],
-      currSib: [],
-      sibDropDownIndex: null,
+      currentPath: [],
+      currentSibling: [],
+      siblingDropDownIndex: null,
     }
   },
 
@@ -176,7 +176,7 @@ export default {
         )
         const path = this.outline.genPath(index)
         if (path.success) {
-          this.currPath = path.res
+          this.currentPath = path.res
         }
       })
     }
@@ -225,19 +225,19 @@ export default {
     }, 2000),
 
     onBlockClick(index) {
-      if (this.sibDropDownIndex === index) {
-        this.clearSibList()
+      if (this.siblingDropDownIndex === index) {
+        this.clearSiblingList()
       } else {
-        this.currSib = this.outline.getSiblings(index)
-        if (this.currSib.length) this.sibDropDownIndex = index
+        this.currentSibling = this.outline.getSiblings(index)
+        if (this.currentSibling.length) this.siblingDropDownIndex = index
       }
     },
-    clearSibList() {
-      this.currSib = []
-      this.sibDropDownIndex = null
+    clearSiblingList() {
+      this.currentSibling = []
+      this.siblingDropDownIndex = null
     },
-    goToSib(obj) {
-      this.clearSibList()
+    goToSibling(obj) {
+      this.clearSiblingList()
       if (obj.start) {
         const pos = this.editor.session.doc.indexToPosition(obj.start, 0)
         if (pos) {
@@ -252,8 +252,8 @@ export default {
         try {
           this.outline.init(content)
 
-          if (content[0] === "[") this.currPath.push("[]")
-          else this.currPath.push("{}")
+          if (content[0] === "[") this.currentPath.push("[]")
+          else this.currentPath.push("{}")
         } catch (e) {
           console.log("Outline error: ", e)
         }
diff --git a/components/smart/AutoComplete.vue b/components/smart/AutoComplete.vue
index 215c2ca87..90726f6f0 100644
--- a/components/smart/AutoComplete.vue
+++ b/components/smart/AutoComplete.vue
@@ -31,7 +31,7 @@
     >
       <li
         v-for="(suggestion, index) in suggestions"
-        :key="index"
+        :key="`suggestion-${index}`"
         :class="{ active: currentSuggestionIndex === index }"
         @click.prevent="forceSuggestion(suggestion)"
       >
diff --git a/components/smart/ChangeLanguage.vue b/components/smart/ChangeLanguage.vue
index 3a70621ef..7525236c1 100644
--- a/components/smart/ChangeLanguage.vue
+++ b/components/smart/ChangeLanguage.vue
@@ -19,10 +19,10 @@
         />
       </template>
       <SmartItem
-        v-for="locale in $i18n.locales.filter(
+        v-for="(locale, index) in $i18n.locales.filter(
           ({ code }) => code !== $i18n.locale
         )"
-        :key="locale.code"
+        :key="`locale-${index}`"
         :to="switchLocalePath(locale.code).toString()"
         :label="`${locale.country} ${locale.name}`"
         @click.native="$refs.language.tippy().hide()"
diff --git a/components/smart/ColorModePicker.vue b/components/smart/ColorModePicker.vue
index 3bf62ebb9..3a30fa739 100644
--- a/components/smart/ColorModePicker.vue
+++ b/components/smart/ColorModePicker.vue
@@ -6,11 +6,11 @@
       v-tippy="{ theme: 'tooltip' }"
       :title="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
       :class="[
-        { 'bg-primary': color === $colorMode.preference },
-        { 'text-accent hover:text-accent': color === $colorMode.value },
+        { 'bg-primary': color === activeColor },
+        { 'text-accent hover:text-accent': color === activeColor },
       ]"
       :icon="getIcon(color)"
-      @click.native="$colorMode.preference = color"
+      @click.native="setBGMode(color)"
     />
   </div>
 </template>
diff --git a/components/smart/Tabs.vue b/components/smart/Tabs.vue
index 968d7e7bf..ea2a92f84 100644
--- a/components/smart/Tabs.vue
+++ b/components/smart/Tabs.vue
@@ -5,7 +5,7 @@
         <div class="inline-flex">
           <button
             v-for="(tab, index) in tabs"
-            :key="index"
+            :key="`tab-${index}`"
             class="tab"
             :class="{ active: tab.active }"
             :tabindex="0"
diff --git a/components/teams/Edit.vue b/components/teams/Edit.vue
index 90d23b411..c432a4908 100644
--- a/components/teams/Edit.vue
+++ b/components/teams/Edit.vue
@@ -25,7 +25,7 @@
         </label>
         <ul
           v-for="(member, index) in members"
-          :key="`new-${index}`"
+          :key="`member-${index}`"
           class="
             border-b border-dashed
             divide-y
@@ -106,7 +106,7 @@
         </ul>
         <ul
           v-for="(member, index) in newMembers"
-          :key="index"
+          :key="`member-${index}`"
           class="
             border-b border-dashed
             divide-y
diff --git a/package-lock.json b/package-lock.json
index 96f867402..ef8a14740 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,7 +31,7 @@
         "rxjs": "^7.2.0",
         "socket.io-client": "^4.1.3",
         "socketio-wildcard": "^2.0.0",
-        "splitpanes": "^2.3.6",
+        "splitpanes": "^2.3.8",
         "tern": "^0.24.3",
         "three": "^0.130.1",
         "three-globe": "^2.18.5",
@@ -26675,9 +26675,9 @@
       }
     },
     "node_modules/splitpanes": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/splitpanes/-/splitpanes-2.3.6.tgz",
-      "integrity": "sha512-2sif1pmOQw/N+/jRbVzqTJ32lkhJax8jQfaXCebRK/SFCadHOnAaXDcWW8PpEcr9vKpfzH7gxJ8Sq/74HECr/g=="
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/splitpanes/-/splitpanes-2.3.8.tgz",
+      "integrity": "sha512-eM/qZ1v7U5BMV8FQR7oeqVlllz3sTGTm0//g/eJMa0hZ4s+A1VK68j26FWzcaVlw2P5+dCXk7/X6ZRjjwcbrgw=="
     },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
@@ -53996,9 +53996,9 @@
       }
     },
     "splitpanes": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/splitpanes/-/splitpanes-2.3.6.tgz",
-      "integrity": "sha512-2sif1pmOQw/N+/jRbVzqTJ32lkhJax8jQfaXCebRK/SFCadHOnAaXDcWW8PpEcr9vKpfzH7gxJ8Sq/74HECr/g=="
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/splitpanes/-/splitpanes-2.3.8.tgz",
+      "integrity": "sha512-eM/qZ1v7U5BMV8FQR7oeqVlllz3sTGTm0//g/eJMa0hZ4s+A1VK68j26FWzcaVlw2P5+dCXk7/X6ZRjjwcbrgw=="
     },
     "sprintf-js": {
       "version": "1.0.3",
diff --git a/package.json b/package.json
index e5015a9ed..7776d6483 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
     "rxjs": "^7.2.0",
     "socket.io-client": "^4.1.3",
     "socketio-wildcard": "^2.0.0",
-    "splitpanes": "^2.3.6",
+    "splitpanes": "^2.3.8",
     "tern": "^0.24.3",
     "three": "^0.130.1",
     "three-globe": "^2.18.5",
diff --git a/pages/graphql.vue b/pages/graphql.vue
index bc4445cb9..fcb9a9dc8 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -53,7 +53,7 @@
                 </ul>
                 <ul
                   v-for="(header, index) in headers"
-                  :key="`${header.value}_${index}`"
+                  :key="`header-${index}`"
                   class="
                     divide-y divide-dashed divide-divider
                     border-b border-dashed border-divider
@@ -363,8 +363,8 @@
                       class="divide-y divide-dividerLight"
                     >
                       <GraphqlField
-                        v-for="field in filteredQueryFields"
-                        :key="field.name"
+                        v-for="(field, index) in filteredQueryFields"
+                        :key="`field-${index}`"
                         :gql-field="field"
                         :jump-type-callback="handleJumpToType"
                         class="p-4"
@@ -377,8 +377,8 @@
                       class="divide-y divide-dividerLight"
                     >
                       <GraphqlField
-                        v-for="field in filteredMutationFields"
-                        :key="field.name"
+                        v-for="(field, index) in filteredMutationFields"
+                        :key="`field-${index}`"
                         :gql-field="field"
                         :jump-type-callback="handleJumpToType"
                         class="p-4"
@@ -391,8 +391,8 @@
                       class="divide-y divide-dividerLight"
                     >
                       <GraphqlField
-                        v-for="field in filteredSubscriptionFields"
-                        :key="field.name"
+                        v-for="(field, index) in filteredSubscriptionFields"
+                        :key="`field-${index}`"
                         :gql-field="field"
                         :jump-type-callback="handleJumpToType"
                         class="p-4"
@@ -406,8 +406,8 @@
                       class="divide-y divide-dividerLight"
                     >
                       <GraphqlType
-                        v-for="type in filteredGraphqlTypes"
-                        :key="type.name"
+                        v-for="(type, index) in filteredGraphqlTypes"
+                        :key="`type-${index}`"
                         :gql-type="type"
                         :gql-types="graphqlTypes"
                         :is-highlighted="
@@ -438,7 +438,7 @@
                   "
                 >
                   <i class="material-icons opacity-50 pb-2">description</i>
-                  <span class="text-xs">
+                  <span class="text-xs text-center">
                     {{ $t("send_request_first") }}
                   </span>
                 </div>
diff --git a/pages/index.vue b/pages/index.vue
index eb65d5fc8..7e7b3fd2b 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -51,13 +51,13 @@
                       </div>
                     </template>
                     <SmartItem
-                      v-for="(contentTypeMenuItem, index) in validContentTypes"
-                      :key="`content-type-${index}`"
+                      v-for="(contentTypeItem, index) in validContentTypes"
+                      :key="`contentTypeItem-${index}`"
                       @click.native="
-                        contentType = contentTypeMenuItem
+                        contentType = contentTypeItem
                         $refs.contentTypeOptions.tippy().hide()
                       "
-                      :label="contentTypeMenuItem"
+                      :label="contentTypeItem"
                     />
                   </tippy>
                   <SmartToggle
@@ -411,7 +411,7 @@
                     </div>
                     <div
                       v-for="(testReport, index) in testReports"
-                      :key="index"
+                      :key="`testReport-${index}`"
                       class="px-4"
                     >
                       <div v-if="testReport.startBlock">
@@ -556,7 +556,7 @@
               >
                 <option
                   v-for="(req, index) in tokenReqs"
-                  :key="index"
+                  :key="`req-${index}`"
                   :value="req.name"
                 >
                   {{ req.name }}