refactor: change progress restore prompt from modal to toast

packages/hoppscotch-app/assets/scss/styles.scss

@@ -311,6 +311,8 @@ pre.ace_editor {
 }
 
 .toasted-container {
+  @apply max-w-md;
+
   .toasted {
     &.toasted-primary {
       @apply bg-tooltip;

packages/hoppscotch-app/pages/index.vue

@@ -103,12 +103,6 @@
         </SmartTab>
       </SmartTabs>
     </Pane>
-    <SmartConfirmModal
-      :show="confirmSync"
-      :title="`${$t('confirm.sync')}`"
-      @hide-modal="confirmSync = false"
-      @resolve="syncRequest"
-    />
   </Splitpanes>
 </template>
 
@@ -121,6 +115,7 @@ import {
   Ref,
   ref,
   useContext,
+  watch,
 } from "@nuxtjs/composition-api"
 import { Splitpanes, Pane } from "splitpanes"
 import "splitpanes/dist/splitpanes.css"
@@ -147,8 +142,10 @@ import {
 import { translateExtURLParams } from "~/helpers/RESTExtURLParams"
 import {
   pluckRef,
+  useI18n,
   useReadonlyStream,
   useStream,
+  useToast,
 } from "~/helpers/utils/composables"
 import { loadRequestFromSync, startRequestSync } from "~/helpers/fb/request"
 import { onLoggedIn } from "~/helpers/fb/auth"
@@ -235,6 +232,32 @@ export default defineComponent({
 
     const confirmSync = ref(false)
 
+    const toast = useToast()
+    const t = useI18n()
+
+    watch(confirmSync, (newValue) => {
+      if (newValue) {
+        toast.show(`${t("confirm.sync")}`, {
+          duration: 0,
+          action: [
+            {
+              text: `${t("action.yes")}`,
+              onClick: (_, toastObject) => {
+                syncRequest()
+                toastObject.goAway(0)
+              },
+            },
+            {
+              text: `${t("action.no")}`,
+              onClick: (_, toastObject) => {
+                toastObject.goAway(0)
+              },
+            },
+          ],
+        })
+      }
+    })
+
     const syncRequest = () => {
       setRESTRequest(
         safelyExtractRESTRequest(requestForSync.value!, getDefaultRESTRequest())