refactor: composables for i18n and toast

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: [
         {