fix: proper key for v-for loops

2021-07-14 05:19:08 +05:30
parent 7ec8539540
commit eeddb6a97e
39 changed files with 139 additions and 130 deletions
--- 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
--- 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 }}
--- 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 }}
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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" />
--- 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>
--- 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>
--- 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
--- 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)"
--- 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
--- 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>
--- 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>
--- 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>
--- 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
--- 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
--- 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
--- 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",
--- 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"
--- 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
--- 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"
    >
--- 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>
--- 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)
        }
--- 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)"
      >
--- 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()"
--- 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>
--- 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"
--- 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