refactor: composables for i18n and toast

packages/hoppscotch-app/components/app/Footer.vue

@@ -4,7 +4,7 @@
       <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="EXPAND_NAVIGATION ? $t('hide.sidebar') : $t('show.sidebar')"
+          :title="EXPAND_NAVIGATION ? t('hide.sidebar') : t('show.sidebar')"
           svg="sidebar"
           class="transform"
           :class="{ '-rotate-180': !EXPAND_NAVIGATION }"
@@ -12,9 +12,9 @@
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="`${
-            ZEN_MODE ? $t('action.turn_off') : $t('action.turn_on')
-          } ${$t('layout.zen_mode')}`"
+          :title="`${ZEN_MODE ? t('action.turn_off') : t('action.turn_on')} ${t(
+            'layout.zen_mode'
+          )}`"
           :svg="ZEN_MODE ? 'minimize' : 'maximize'"
           :class="{
             '!text-accent !focus-visible:text-accentDark !hover:text-accentDark':
@@ -36,20 +36,20 @@
               <ButtonSecondary
                 svg="help-circle"
                 class="!rounded-none"
-                :label="`${$t('app.help')}`"
+                :label="`${t('app.help')}`"
               />
             </template>
             <div class="flex flex-col">
               <SmartItem
                 svg="book"
-                :label="`${$t('app.documentation')}`"
+                :label="`${t('app.documentation')}`"
                 to="https://docs.hoppscotch.io"
                 blank
                 @click.native="$refs.options.tippy().hide()"
               />
               <SmartItem
                 svg="zap"
-                :label="`${$t('app.keyboard_shortcuts')}`"
+                :label="`${t('app.keyboard_shortcuts')}`"
                 @click.native="
                   () => {
                     showShortcuts = true
@@ -59,14 +59,14 @@
               />
               <SmartItem
                 svg="gift"
-                :label="`${$t('app.whats_new')}`"
+                :label="`${t('app.whats_new')}`"
                 to="https://docs.hoppscotch.io/changelog"
                 blank
                 @click.native="$refs.options.tippy().hide()"
               />
               <SmartItem
                 svg="message-circle"
-                :label="`${$t('app.chat_with_us')}`"
+                :label="`${t('app.chat_with_us')}`"
                 @click.native="
                   () => {
                     chatWithUs()
@@ -77,21 +77,21 @@
               <hr />
               <SmartItem
                 svg="github"
-                :label="`${$t('app.github')}`"
+                :label="`${t('app.github')}`"
                 to="https://github.com/hoppscotch/hoppscotch"
                 blank
                 @click.native="$refs.options.tippy().hide()"
               />
               <SmartItem
                 svg="twitter"
-                :label="`${$t('app.twitter')}`"
+                :label="`${t('app.twitter')}`"
                 to="https://hoppscotch.io/twitter"
                 blank
                 @click.native="$refs.options.tippy().hide()"
               />
               <SmartItem
                 svg="user-plus"
-                :label="`${$t('app.invite')}`"
+                :label="`${t('app.invite')}`"
                 @click.native="
                   () => {
                     showShare = true
@@ -101,14 +101,14 @@
               />
               <SmartItem
                 svg="lock"
-                :label="`${$t('app.terms_and_privacy')}`"
+                :label="`${t('app.terms_and_privacy')}`"
                 to="https://docs.hoppscotch.io/privacy"
                 blank
                 @click.native="$refs.options.tippy().hide()"
               />
-              <!-- <SmartItem :label="$t('app.status')" /> -->
+              <!-- <SmartItem :label="t('app.status')" /> -->
               <div class="flex opacity-50 py-2 px-4">
-                {{ `${$t("app.name")} ${$t("app.version")}` }}
+                {{ `${t("app.name")} ${t("app.version")}` }}
               </div>
             </div>
           </tippy>
@@ -116,19 +116,19 @@
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           svg="zap"
-          :title="$t('app.shortcuts')"
+          :title="t('app.shortcuts')"
           @click.native="showShortcuts = true"
         />
         <ButtonSecondary
           v-if="navigatorShare"
           v-tippy="{ theme: 'tooltip' }"
           svg="share-2"
-          :title="$t('request.share')"
+          :title="t('request.share')"
           @click.native="nativeShare()"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="COLUMN_LAYOUT ? $t('layout.row') : $t('layout.column')"
+          :title="COLUMN_LAYOUT ? t('layout.row') : t('layout.column')"
           svg="columns"
           class="transform"
           :class="{ 'rotate-90': !COLUMN_LAYOUT }"
@@ -142,7 +142,7 @@
         >
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
-            :title="SIDEBAR ? $t('hide.sidebar') : $t('show.sidebar')"
+            :title="SIDEBAR ? t('hide.sidebar') : t('show.sidebar')"
             svg="sidebar-open"
             class="transform"
             :class="{ 'rotate-180': !SIDEBAR }"
@@ -161,7 +161,9 @@ import { ref, watch } from "@nuxtjs/composition-api"
 import { defineActionHandler } from "~/helpers/actions"
 import { showChat } from "~/helpers/support"
 import { useSetting } from "~/newstore/settings"
+import { useI18n } from "~/helpers/utils/composables"
 
+const t = useI18n()
 const showShortcuts = ref(false)
 const showShare = ref(false)
 

packages/hoppscotch-app/components/app/Fuse.vue

@@ -15,7 +15,7 @@
     >
       <i class="opacity-75 pb-2 material-icons">manage_search</i>
       <span class="text-center">
-        {{ $t("state.nothing_found") }} "{{ search }}"
+        {{ t("state.nothing_found") }} "{{ search }}"
       </span>
     </div>
   </div>
@@ -26,6 +26,9 @@ import { computed, onUnmounted, onMounted } from "@nuxtjs/composition-api"
 import Fuse from "fuse.js"
 import { useArrowKeysNavigation } from "~/helpers/powerSearchNavigation"
 import { HoppAction } from "~/helpers/actions"
+import { useI18n } from "~/helpers/utils/composables"
+
+const t = useI18n()
 
 const props = defineProps<{
   input: Record<string, any>[]

packages/hoppscotch-app/components/app/Header.vue

@@ -15,21 +15,21 @@
         <ButtonSecondary
           id="installPWA"
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('header.install_pwa')"
+          :title="t('header.install_pwa')"
           svg="download"
           class="rounded"
           @click.native="showInstallPrompt()"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="`${$t('app.search')} <kbd>/</kbd>`"
+          :title="`${t('app.search')} <kbd>/</kbd>`"
           svg="search"
           class="rounded"
           @click.native="showSearch = true"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="`${$t('support.title')} <kbd>?</kbd>`"
+          :title="`${t('support.title')} <kbd>?</kbd>`"
           svg="life-buoy"
           class="rounded"
           @click.native="showSupport = true"
@@ -37,21 +37,21 @@
         <ButtonSecondary
           v-if="currentUser === null"
           svg="upload-cloud"
-          :label="$t('header.save_workspace')"
+          :label="t('header.save_workspace')"
           filled
           class="hidden md:flex"
           @click.native="showLogin = true"
         />
         <ButtonPrimary
           v-if="currentUser === null"
-          :label="$t('header.login')"
+          :label="t('header.login')"
           @click.native="showLogin = true"
         />
         <div v-else class="space-x-2 inline-flex items-center">
           <ButtonPrimary
             v-tippy="{ theme: 'tooltip' }"
-            :title="$t('team.invite_tooltip')"
-            :label="$t('team.invite')"
+            :title="t('team.invite_tooltip')"
+            :label="t('team.invite')"
             svg="user-plus"
             class="
               !bg-green-500
@@ -78,7 +78,7 @@
                 <ButtonSecondary
                   v-else
                   v-tippy="{ theme: 'tooltip' }"
-                  :title="$t('header.account')"
+                  :title="t('header.account')"
                   class="rounded"
                   svg="user"
                 />
@@ -86,13 +86,13 @@
               <SmartItem
                 to="/profile"
                 svg="user"
-                :label="$t('navigation.profile')"
+                :label="t('navigation.profile')"
                 @click.native="$refs.user.tippy().hide()"
               />
               <SmartItem
                 to="/settings"
                 svg="settings"
-                :label="$t('navigation.settings')"
+                :label="t('navigation.settings')"
                 @click.native="$refs.user.tippy().hide()"
               />
               <FirebaseLogout @confirm-logout="$refs.user.tippy().hide()" />
@@ -110,18 +110,20 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, useContext } from "@nuxtjs/composition-api"
+import { onMounted, ref } from "@nuxtjs/composition-api"
 import intializePwa from "~/helpers/pwa"
 import { probableUser$ } from "~/helpers/fb/auth"
 import { getLocalConfig, setLocalConfig } from "~/newstore/localpersistence"
-import { useReadonlyStream } from "~/helpers/utils/composables"
+import {
+  useReadonlyStream,
+  useI18n,
+  useToast,
+} from "~/helpers/utils/composables"
 import { defineActionHandler } from "~/helpers/actions"
 
-const {
-  $toast,
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
+const t = useI18n()
+
+const toast = useToast()
 
 /**
  * Once the PWA code is initialized, this holds a method
@@ -160,7 +162,7 @@ onMounted(() => {
 
   const cookiesAllowed = getLocalConfig("cookiesAllowed") === "yes"
   if (!cookiesAllowed) {
-    $toast.show(`${t("app.we_use_cookies")}`, {
+    toast.show(`${t("app.we_use_cookies")}`, {
       duration: 0,
       action: [
         {

packages/hoppscotch-app/components/app/Interceptor.vue

@@ -4,17 +4,17 @@
       :on="PROXY_ENABLED"
       @change="toggleSettingKey('PROXY_ENABLED')"
     >
-      {{ $t("settings.proxy") }}
+      {{ t("settings.proxy") }}
     </SmartToggle>
     <SmartToggle
       :on="EXTENSIONS_ENABLED"
       @change="toggleSettingKey('EXTENSIONS_ENABLED')"
     >
-      {{ $t("settings.extensions") }}:
+      {{ t("settings.extensions") }}:
       {{
         extensionVersion != null
           ? `v${extensionVersion.major}.${extensionVersion.minor}`
-          : $t("settings.extension_ver_not_reported")
+          : t("settings.extension_ver_not_reported")
       }}
     </SmartToggle>
   </div>
@@ -25,6 +25,9 @@ import { defineComponent } from "@nuxtjs/composition-api"
 import { KeysMatching } from "~/types/ts-utils"
 import { SettingsType, toggleSetting, useSetting } from "~/newstore/settings"
 import { hasExtensionInstalled } from "~/helpers/strategies/ExtensionStrategy"
+import { useI18n } from "~/helpers/utils/composables"
+
+const t = useI18n()
 
 const PROXY_ENABLED = useSetting("PROXY_ENABLED")
 const EXTENSIONS_ENABLED = useSetting("EXTENSIONS_ENABLED")

packages/hoppscotch-app/components/app/PowerSearch.vue

@@ -13,7 +13,7 @@
         type="text"
         autocomplete="off"
         name="command"
-        :placeholder="`${$t('app.type_a_command_search')}`"
+        :placeholder="`${t('app.type_a_command_search')}`"
         class="
           bg-transparent
           border-b border-dividerLight
@@ -45,7 +45,7 @@
           class="flex flex-col"
         >
           <h5 class="my-2 text-secondaryLight py-2 px-6">
-            {{ $t(map.section) }}
+            {{ t(map.section) }}
           </h5>
           <AppPowerSearchEntry
             v-for="(shortcut, shortcutIndex) in map.shortcuts"
@@ -66,6 +66,9 @@ import { ref, computed, watch } from "@nuxtjs/composition-api"
 import { HoppAction, invokeAction } from "~/helpers/actions"
 import { spotlight as mappings, fuse } from "~/helpers/shortcuts"
 import { useArrowKeysNavigation } from "~/helpers/powerSearchNavigation"
+import { useI18n } from "~/helpers/utils/composables"
+
+const t = useI18n()
 
 const props = defineProps<{
   show: boolean

packages/hoppscotch-app/components/app/PowerSearchEntry.vue

@@ -24,7 +24,7 @@
       class="flex flex-1 mr-4 font-medium transition"
       :class="{ 'text-secondaryDark': active }"
     >
-      {{ $t(shortcut.label) }}
+      {{ t(shortcut.label) }}
     </span>
     <span
       v-for="(key, keyIndex) in shortcut.keys"
@@ -37,6 +37,10 @@
 </template>
 
 <script setup lang="ts">
+import { useI18n } from "~/helpers/utils/composables"
+
+const t = useI18n()
+
 defineProps<{
   shortcut: Object
   active: Boolean

packages/hoppscotch-app/components/app/Share.vue

@@ -1,12 +1,12 @@
 <template>
   <SmartModal
     v-if="show"
-    :title="$t('app.invite_your_friends')"
+    :title="t('app.invite_your_friends')"
     @close="hideModal"
   >
     <template #body>
       <p class="text-secondaryLight mb-8 px-2">
-        {{ $t("app.invite_description") }}
+        {{ t("app.invite_description") }}
       </p>
       <div class="flex flex-col space-y-2 px-2">
         <div class="grid gap-4 grid-cols-3">
@@ -25,7 +25,7 @@
           <button class="share-link" @click="copyAppLink">
             <SmartIcon class="h-6 text-xl w-6" :name="copyIcon" />
             <span class="mt-3">
-              {{ $t("app.copy") }}
+              {{ t("app.copy") }}
             </span>
           </button>
         </div>
@@ -35,14 +35,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, useContext } from "@nuxtjs/composition-api"
+import { ref } from "@nuxtjs/composition-api"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
+import { useI18n, useToast } from "~/helpers/utils/composables"
 
-const {
-  $toast,
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
+const t = useI18n()
+
+const toast = useToast()
 
 defineProps<{
   show: Boolean
@@ -92,7 +91,7 @@ const platforms = [
 const copyAppLink = () => {
   copyToClipboard(url)
   copyIcon.value = "check"
-  $toast.success(`${t("state.copied_to_clipboard")}`)
+  toast.success(`${t("state.copied_to_clipboard")}`)
   setTimeout(() => (copyIcon.value = "copy"), 1000)
 }
 

packages/hoppscotch-app/components/app/Shortcuts.vue

@@ -14,7 +14,7 @@
           justify-between
         "
       >
-        <h3 class="ml-4 heading">{{ $t("app.shortcuts") }}</h3>
+        <h3 class="ml-4 heading">{{ t("app.shortcuts") }}</h3>
         <div class="flex">
           <ButtonSecondary svg="x" class="rounded" @click.native="close()" />
         </div>
@@ -35,7 +35,7 @@
               px-4
               focus-visible:border-divider
             "
-            :placeholder="`${$t('action.search')}`"
+            :placeholder="`${t('action.search')}`"
           />
         </div>
       </div>
@@ -46,7 +46,7 @@
           class="space-y-4 py-4 px-6"
         >
           <h1 class="font-semibold text-secondaryDark">
-            {{ $t(map.item.section) }}
+            {{ t(map.item.section) }}
           </h1>
           <AppShortcutsEntry
             v-for="(shortcut, index) in map.item.shortcuts"
@@ -66,7 +66,7 @@
         >
           <i class="opacity-75 pb-2 material-icons">manage_search</i>
           <span class="text-center">
-            {{ $t("state.nothing_found") }} "{{ filterText }}"
+            {{ t("state.nothing_found") }} "{{ filterText }}"
           </span>
         </div>
       </div>
@@ -85,7 +85,7 @@
           class="space-y-4 py-4 px-6"
         >
           <h1 class="font-semibold text-secondaryDark">
-            {{ $t(map.section) }}
+            {{ t(map.section) }}
           </h1>
           <AppShortcutsEntry
             v-for="(shortcut, shortcutIndex) in map.shortcuts"
@@ -102,6 +102,9 @@
 import { computed, ref } from "@nuxtjs/composition-api"
 import Fuse from "fuse.js"
 import mappings from "~/helpers/shortcuts"
+import { useI18n } from "~/helpers/utils/composables"
+
+const t = useI18n()
 
 defineProps<{
   show: boolean

packages/hoppscotch-app/components/app/ShortcutsEntry.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex items-center">
     <span class="flex flex-1 mr-4">
-      {{ $t(shortcut.label) }}
+      {{ t(shortcut.label) }}
     </span>
     <span
       v-for="(key, index) in shortcut.keys"
@@ -14,6 +14,10 @@
 </template>
 
 <script setup lang="ts">
+import { useI18n } from "~/helpers/utils/composables"
+
+const t = useI18n()
+
 defineProps<{
   shortcut: Object
 }>()

packages/hoppscotch-app/components/app/Sidenav.vue

@@ -27,14 +27,11 @@
 </template>
 
 <script setup lang="ts">
-import { useContext } from "@nuxtjs/composition-api"
 import useWindowSize from "~/helpers/utils/useWindowSize"
 import { useSetting } from "~/newstore/settings"
+import { useI18n } from "~/helpers/utils/composables"
 
-const {
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
+const t = useI18n()
 
 const windowInnerWidth = useWindowSize()
 const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")