perf: template literals

packages/hoppscotch-app/components/history/index.vue

@@ -15,7 +15,7 @@
         type="search"
         autocomplete="off"
         class="bg-transparent flex w-full p-4 py-2"
-        :placeholder="$t('action.search')"
+        :placeholder="`${$t('action.search')}`"
       />
       <div class="flex">
         <ButtonSecondary
@@ -76,7 +76,7 @@
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
-      :title="$t('confirm.remove_history')"
+      :title="`${$t('confirm.remove_history')}`"
       @hide-modal="confirmRemove = false"
       @resolve="clearHistory"
     />
@@ -131,7 +131,7 @@ export default defineComponent({
           return Object.keys(entry).some((key) => {
             let value = entry[key as keyof typeof entry]
             if (value) {
-              value = typeof value !== "string" ? value.toString() : value
+              value = `${value}`
               return value.toLowerCase().includes(filterText)
             }
             return false
@@ -144,7 +144,7 @@ export default defineComponent({
     clearHistory() {
       if (this.page === "rest") clearRESTHistory()
       else clearGraphqlHistory()
-      this.$toast.success(this.$t("state.history_deleted").toString(), {
+      this.$toast.success(`${this.$t("state.history_deleted")}`, {
         icon: "delete",
       })
     },
@@ -154,7 +154,7 @@ export default defineComponent({
     deleteHistory(entry: any) {
       if (this.page === "rest") deleteRESTHistoryEntry(entry)
       else deleteGraphqlHistoryEntry(entry)
-      this.$toast.success(this.$t("state.deleted").toString(), {
+      this.$toast.success(`${this.$t("state.deleted")}`, {
         icon: "delete",
       })
     },

packages/hoppscotch-app/components/history/rest/Card.vue

@@ -4,7 +4,7 @@
       class="cursor-pointer flex px-2 w-16 justify-center items-center truncate"
       :class="entryStatus.className"
       data-testid="restore_history_entry"
-      :title="duration"
+      :title="`${duration}`"
       @click="$emit('use-entry')"
     >
       {{ entry.request.method }}
@@ -20,7 +20,7 @@
         group-hover:text-secondaryDark
       "
       data-testid="restore_history_entry"
-      :title="duration"
+      :title="`${duration}`"
       @click="$emit('use-entry')"
     >
       <span class="truncate">
@@ -75,9 +75,9 @@ export default defineComponent({
         if (!responseDuration) return ""
 
         return responseDuration > 0
-          ? `${$t("request.duration").toString()}: ${responseDuration}ms`
-          : $t("error.no_duration").toString()
-      } else return $t("error.no_duration").toString()
+          ? `${$t("request.duration")}: ${responseDuration}ms`
+          : $t("error.no_duration")
+      } else return $t("error.no_duration")
     })
 
     const entryStatus = computed(() => {