perf: template literals

packages/hoppscotch-app/components/smart/ChangeLanguage.vue

@@ -19,7 +19,7 @@
         v-for="(locale, index) in $i18n.locales.filter(
           ({ code }) => code !== $i18n.locale
         )"
-        :key="`locale-${index}`"
+        :key="`locale-${String(index)}`"
         :to="switchLocalePath(locale.code)"
         @click="$refs.language.tippy().hide()"
       >

packages/hoppscotch-app/components/smart/EnvInput.vue

@@ -384,10 +384,10 @@ export default defineComponent({
         const preSelectionRange = range.cloneRange()
         preSelectionRange.selectNodeContents(containerEl)
         preSelectionRange.setEnd(range.startContainer, range.startOffset)
-        start = preSelectionRange.toString().length
+        start = `${preSelectionRange}`.length
         return {
           start,
-          end: start + range.toString().length,
+          end: start + `${range}`.length,
         }
       } else if (document.selection) {
         const selectedTextRange = document.selection.createRange()

packages/hoppscotch-app/components/smart/FontSizePicker.vue

@@ -9,19 +9,23 @@
             class="pr-8"
             svg="type"
             outline
-            :label="getFontSizeName(fontSizes.find((size) => size == active))"
+            :label="`${getFontSizeName(
+              fontSizes.find((size) => size == active)
+            )}`"
           />
         </span>
       </template>
       <SmartItem
         v-for="(size, index) in fontSizes"
         :key="`size-${index}`"
-        :label="getFontSizeName(size)"
+        :label="`${getFontSizeName(size)}`"
         :info-icon="size === active ? 'done' : ''"
         :active-info-icon="size === active"
         @click.native="
-          setActiveFont(size)
-          $refs.fontSize.tippy().hide()
+          () => {
+            setActiveFont(size)
+            $refs.fontSize.tippy().hide()
+          }
         "
       />
     </tippy>

packages/hoppscotch-app/components/smart/Tabs.vue

@@ -17,7 +17,7 @@
                 {{ tab.icon }}
               </i>
               <span v-if="tab.label">{{ tab.label }}</span>
-              <span v-if="tab.info" class="tab-info">
+              <span v-if="tab.info && tab.info !== 'null'" class="tab-info">
                 {{ tab.info }}
               </span>
             </button>