fix: proper key for v-for loops

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)
         }

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)"
       >

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()"

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>

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"