feat: added change log prompt for PWA updates (#4098)

Co-authored-by: jamesgeorge007 <25279263+jamesgeorge007@users.noreply.github.com>
Co-authored-by: nivedin <nivedinp@gmail.com>
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

package.json

@@ -25,7 +25,7 @@
   "devDependencies": {
     "@commitlint/cli": "16.3.0",
     "@commitlint/config-conventional": "16.2.4",
-    "@hoppscotch/ui": "0.1.0",
+    "@hoppscotch/ui": "0.2.0",
     "@types/node": "17.0.27",
     "cross-env": "7.0.3",
     "http-server": "14.1.1",

packages/hoppscotch-common/locales/en.json

@@ -98,7 +98,9 @@
     "twitter": "Twitter",
     "type_a_command_search": "Type a command or search…",
     "we_use_cookies": "We use cookies",
+    "updated_text": "Hoppscotch has been updated to the version {version} 🎉",
     "whats_new": "What's new?",
+    "see_whats_new": "See what’s new",
     "wiki": "Wiki"
   },
   "auth": {

packages/hoppscotch-common/package.json

@@ -36,7 +36,7 @@
     "@hoppscotch/codemirror-lang-graphql": "workspace:^",
     "@hoppscotch/data": "workspace:^",
     "@hoppscotch/js-sandbox": "workspace:^",
-    "@hoppscotch/ui": "0.1.0",
+    "@hoppscotch/ui": "0.2.0",
     "@hoppscotch/vue-toasted": "0.1.0",
     "@lezer/highlight": "1.2.0",
     "@unhead/vue": "1.8.8",

packages/hoppscotch-common/src/App.vue

@@ -8,6 +8,7 @@
     </div>
     <ErrorPage v-if="errorInfo !== null" :error="errorInfo" />
     <RouterView v-else />
+    <Toaster rich-colors />
   </div>
 </template>
 
@@ -19,6 +20,7 @@ import { isLoadingInitialRoute } from "@modules/router"
 import { useI18n } from "@composables/i18n"
 import { APP_IS_IN_DEV_MODE } from "@helpers/dev"
 import { platform } from "./platform"
+import { Toaster } from "@hoppscotch/ui"
 
 const t = useI18n()
 

packages/hoppscotch-common/src/components.d.ts

@@ -23,6 +23,7 @@ declare module 'vue' {
     AppLogo: typeof import('./components/app/Logo.vue')['default']
     AppOptions: typeof import('./components/app/Options.vue')['default']
     AppPaneLayout: typeof import('./components/app/PaneLayout.vue')['default']
+    AppPWAPrompt: typeof import('./components/app/PWAPrompt.vue')['default']
     AppShare: typeof import('./components/app/Share.vue')['default']
     AppShortcuts: typeof import('./components/app/Shortcuts.vue')['default']
     AppShortcutsEntry: typeof import('./components/app/ShortcutsEntry.vue')['default']
@@ -38,6 +39,7 @@ declare module 'vue' {
     AppSpotlightEntryRESTTeamRequestEntry: typeof import('./components/app/spotlight/entry/RESTTeamRequestEntry.vue')['default']
     AppSpotlightSearch: typeof import('./components/app/SpotlightSearch.vue')['default']
     AppSupport: typeof import('./components/app/Support.vue')['default']
+    AppWhatsNewDialog: typeof import('./components/app/WhatsNewDialog.vue')['default']
     Collections: typeof import('./components/collections/index.vue')['default']
     CollectionsAdd: typeof import('./components/collections/Add.vue')['default']
     CollectionsAddFolder: typeof import('./components/collections/AddFolder.vue')['default']

packages/hoppscotch-common/src/components/app/WhatsNewDialog.vue

@@ -0,0 +1,46 @@
+<template>
+  <div
+    class="flex flex-col py-2 px-4 w-72 relative border border-[#BCB78B] bg-[#FEFFD2] rounded-md text-[#7E7103]"
+  >
+    <button
+      class="absolute top-2 right-2 hover:text-black"
+      @click="$emit('close-toast')"
+    >
+      <IconLucideX />
+    </button>
+    <div class="flex flex-col space-y-3">
+      <p class="leading-5 font-semibold">
+        {{ t("app.updated_text", { version: version }) }}
+      </p>
+      <button
+        class="flex items-center space-x-1 hover:underline"
+        @click="openWhatsNew"
+      >
+        <span>
+          {{ t("app.see_whats_new") }}
+        </span>
+        <IconLucideArrowUpRight />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from "~/composables/i18n"
+import { platform } from "~/platform"
+
+const t = useI18n()
+
+const props = defineProps<{
+  notesUrl: string
+  version: string
+}>()
+
+defineEmits<{
+  (e: "close-toast"): void
+}>()
+
+const openWhatsNew = () => {
+  if (props.notesUrl) platform.io.openExternalLink(props.notesUrl)
+}
+</script>

packages/hoppscotch-common/src/components/http/Codegen.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col">
-    <label for="requestType" class="px-4 pb-4" v-if="!hideLabel">
+    <label v-if="!hideLabel" for="requestType" class="px-4 pb-4">
       {{ t("request.choose_language") }}
     </label>
     <tippy

packages/hoppscotch-common/src/components/http/Sidebar.vue

@@ -46,9 +46,9 @@
         {{ t("tab.code_snippet") }}
       </div>
       <HttpCodegen
+        v-if="selectedNavigationTab === 'codegen'"
         :hide-label="true"
         class="px-4 mt-4"
-        v-if="selectedNavigationTab === 'codegen'"
       />
     </HoppSmartTab>
   </HoppSmartTabs>

packages/hoppscotch-common/src/composables/pwa.ts

@@ -1,7 +1,7 @@
-import { watch } from "vue"
-import { useToast } from "@composables/toast"
 import { useI18n } from "@composables/i18n"
+import { useToast } from "@composables/toast"
 import { pwaNeedsRefresh, refreshAppForPWAUpdate } from "@modules/pwa"
+import { watch } from "vue"
 
 export const usePwaPrompt = function () {
   const toast = useToast()
@@ -11,28 +11,33 @@ export const usePwaPrompt = function () {
     pwaNeedsRefresh,
     (value) => {
       if (value) {
-        toast.show(`${t("app.new_version_found")}`, {
+        showUpdateToast()
-          duration: 0,
-          action: [
-            {
-              text: `${t("action.dismiss")}`,
-              onClick: (_, toastObject) => {
-                toastObject.goAway(0)
-              },
-            },
-            {
-              text: `${t("app.reload")}`,
-              onClick: (_, toastObject) => {
-                toastObject.goAway(0)
-                refreshAppForPWAUpdate()
-              },
-            },
-          ],
-        })
       }
     },
     {
       immediate: true,
     }
   )
+
+  function showUpdateToast() {
+    toast.show(`${t("app.new_version_found")}`, {
+      position: "bottom-left",
+      duration: 0,
+      action: [
+        {
+          text: `${t("action.dismiss")}`,
+          onClick: (_, toastObject) => {
+            toastObject.goAway(0)
+          },
+        },
+        {
+          text: `${t("app.reload")}`,
+          onClick: (_, toastObject) => {
+            toastObject.goAway(0)
+            refreshAppForPWAUpdate()
+          },
+        },
+      ],
+    })
+  }
 }

packages/hoppscotch-common/src/composables/whats-new.ts

@@ -0,0 +1,61 @@
+import { toast as sonner } from "@hoppscotch/ui"
+import { markRaw } from "vue"
+
+import WhatsNewDialog from "~/components/app/WhatsNewDialog.vue"
+import { getService } from "~/modules/dioc"
+import { PersistenceService } from "~/services/persistence"
+import { version as hoppscotchCommonPkgVersion } from "./../../package.json"
+
+export const useWhatsNewDialog = async function () {
+  const persistenceService = getService(PersistenceService)
+
+  const versionFromLocalStorage = persistenceService.getLocalConfig("hopp_v")
+
+  // Set new entry `hopp_v` under `localStorage` if not present
+  if (!versionFromLocalStorage) {
+    persistenceService.setLocalConfig("hopp_v", hoppscotchCommonPkgVersion)
+    return
+  }
+
+  // Already on the latest version
+  if (versionFromLocalStorage === hoppscotchCommonPkgVersion) {
+    return
+  }
+
+  const getMajorVersion = (v: string) => v.split(".").slice(0, 2).join(".")
+
+  const majorVersionFromLocalStorage = getMajorVersion(versionFromLocalStorage)
+  const hoppscotchCommonPkgMajorVersion = getMajorVersion(
+    hoppscotchCommonPkgVersion
+  )
+
+  // Skipping the minor version update. e.g. 2024.1.0 -> 2024.1.1
+  // Checking major version update. e.g. 2024.1 -> 2024.2
+
+  // Show the release notes during a major version update
+  if (majorVersionFromLocalStorage !== hoppscotchCommonPkgMajorVersion) {
+    const notesUrl = await getReleaseNotes(hoppscotchCommonPkgMajorVersion)
+    if (notesUrl) {
+      sonner.custom(markRaw(WhatsNewDialog), {
+        componentProps: {
+          notesUrl,
+          version: hoppscotchCommonPkgVersion,
+        },
+      })
+    }
+  }
+
+  persistenceService.setLocalConfig("hopp_v", hoppscotchCommonPkgVersion)
+}
+
+async function getReleaseNotes(v: string): Promise<string | undefined> {
+  try {
+    const { release_notes } = await fetch(
+      `https://releases.hoppscotch.com/releases/${v}.json`
+    ).then((res) => res.json())
+
+    return release_notes
+  } catch (_) {
+    return undefined
+  }
+}

packages/hoppscotch-common/src/modules/whats-new.ts

@@ -0,0 +1,8 @@
+import { useWhatsNewDialog } from "~/composables/whats-new"
+import { HoppModule } from "."
+
+export default <HoppModule>{
+  onRootSetup() {
+    useWhatsNewDialog()
+  },
+}

pnpm-lock.yaml

@@ -20,8 +20,8 @@ importers:
         specifier: 16.2.4
         version: 16.2.4
       '@hoppscotch/ui':
-        specifier: 0.1.0
+        specifier: 0.2.0
-        version: 0.1.0(eslint@8.57.0)(terser@5.31.0)(vite@5.0.5(@types/node@17.0.27)(sass@1.69.5)(terser@5.31.0))(vue@3.3.9(typescript@4.9.5))
+        version: 0.2.0(eslint@8.57.0)(terser@5.31.0)(typescript@4.9.5)(vite@5.0.5(@types/node@17.0.27)(sass@1.69.5)(terser@5.31.0))(vue@3.3.9(typescript@4.9.5))
       '@types/node':
         specifier: 17.0.27
         version: 17.0.27
@@ -410,8 +410,8 @@ importers:
         specifier: workspace:^
         version: link:../hoppscotch-js-sandbox
       '@hoppscotch/ui':
-        specifier: 0.1.0
+        specifier: 0.2.0
-        version: 0.1.0(eslint@8.57.0)(terser@5.31.0)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))(vue@3.3.9(typescript@5.3.2))
+        version: 0.2.0(eslint@8.57.0)(terser@5.31.0)(typescript@5.3.2)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))(vue@3.3.9(typescript@5.3.2))
       '@hoppscotch/vue-toasted':
         specifier: 0.1.0
         version: 0.1.0(vue@3.3.9(typescript@5.3.2))
@@ -757,7 +757,7 @@ importers:
         version: 4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0)
       vite-plugin-checker:
         specifier: 0.6.2
-        version: 0.6.2(eslint@8.57.0)(meow@8.1.2)(optionator@0.9.4)(typescript@5.3.2)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))(vue-tsc@1.8.24(typescript@5.3.2))
+        version: 0.6.2(eslint@8.57.0)(optionator@0.9.4)(typescript@5.3.2)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))(vue-tsc@1.8.24(typescript@5.3.2))
       vite-plugin-fonts:
         specifier: 0.7.0
         version: 0.7.0(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))
@@ -876,7 +876,7 @@ importers:
         version: 2.8.4
       ts-jest:
         specifier: 27.1.5
-        version: 27.1.5(@babel/core@7.24.5)(@types/jest@27.5.2)(babel-jest@29.7.0(@babel/core@7.24.5))(jest@29.7.0(@types/node@17.0.45)(ts-node@10.9.1(@swc/core@1.4.2)(@types/node@17.0.45)(typescript@4.9.5)))(typescript@4.9.5)
+        version: 27.1.5(@babel/core@7.24.5)(@types/jest@27.5.2)(jest@29.7.0(@types/node@17.0.45)(ts-node@10.9.1(@swc/core@1.4.2)(@types/node@17.0.45)(typescript@4.9.5)))(typescript@4.9.5)
       typescript:
         specifier: 4.9.5
         version: 4.9.5
@@ -1060,7 +1060,7 @@ importers:
         version: 0.14.9(@vue/compiler-sfc@3.3.10)(vue-template-compiler@2.7.16)
       unplugin-vue-components:
         specifier: 0.21.0
-        version: 0.21.0(@babel/parser@7.24.5)(esbuild@0.20.2)(rollup@3.29.4)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))(vue@3.3.9(typescript@4.9.5))(webpack@5.91.0(@swc/core@1.4.2)(esbuild@0.20.2))
+        version: 0.21.0(@babel/parser@7.24.5)(esbuild@0.20.2)(rollup@2.79.1)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))(vue@3.3.9(typescript@4.9.5))(webpack@5.91.0(@swc/core@1.4.2)(esbuild@0.20.2))
       vite:
         specifier: 4.5.0
         version: 4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0)
@@ -1069,7 +1069,7 @@ importers:
         version: 1.0.11(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))
       vite-plugin-inspect:
         specifier: 0.7.38
-        version: 0.7.38(rollup@3.29.4)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))
+        version: 0.7.38(rollup@2.79.1)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))
       vite-plugin-pages:
         specifier: 0.26.0
         version: 0.26.0(@vue/compiler-sfc@3.3.10)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))
@@ -1229,7 +1229,7 @@ importers:
         version: 0.17.4(@vue/compiler-sfc@3.3.10)(vue-template-compiler@2.7.16)
       unplugin-vue-components:
         specifier: 0.25.2
-        version: 0.25.2(@babel/parser@7.24.5)(rollup@3.29.4)(vue@3.3.9(typescript@5.3.2))
+        version: 0.25.2(@babel/parser@7.24.5)(rollup@2.79.1)(vue@3.3.9(typescript@5.3.2))
       vite:
         specifier: 4.5.0
         version: 4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0)
@@ -1241,7 +1241,7 @@ importers:
         version: 1.0.11(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))
       vite-plugin-inspect:
         specifier: 0.7.42
-        version: 0.7.42(rollup@3.29.4)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))
+        version: 0.7.42(rollup@2.79.1)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))
       vite-plugin-pages:
         specifier: 0.31.0
         version: 0.31.0(@vue/compiler-sfc@3.3.10)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))
@@ -1283,7 +1283,7 @@ importers:
         version: 0.1.0(vue@3.3.9(typescript@4.9.3))
       '@intlify/unplugin-vue-i18n':
         specifier: 1.2.0
-        version: 1.2.0(rollup@3.29.4)(vue-i18n@9.2.2(vue@3.3.9(typescript@4.9.3)))
+        version: 1.2.0(rollup@2.79.1)(vue-i18n@9.2.2(vue@3.3.9(typescript@4.9.3)))
       '@types/cors':
         specifier: 2.8.13
         version: 2.8.13
@@ -1349,7 +1349,7 @@ importers:
         version: 0.14.9(@vue/compiler-sfc@3.2.45)(vue-template-compiler@2.7.16)
       unplugin-vue-components:
         specifier: 0.21.0
-        version: 0.21.0(@babel/parser@7.24.5)(esbuild@0.20.2)(rollup@3.29.4)(vite@3.2.4(@types/node@18.18.8)(sass@1.58.0)(terser@5.31.0))(vue@3.3.9(typescript@4.9.3))(webpack@5.91.0(@swc/core@1.4.2)(esbuild@0.20.2))
+        version: 0.21.0(@babel/parser@7.24.5)(esbuild@0.20.2)(rollup@2.79.1)(vite@3.2.4(@types/node@18.18.8)(sass@1.58.0)(terser@5.31.0))(vue@3.3.9(typescript@4.9.3))(webpack@5.91.0(@swc/core@1.4.2)(esbuild@0.20.2))
       vue:
         specifier: 3.3.9
         version: 3.3.9(typescript@4.9.3)
@@ -3376,6 +3376,15 @@ packages:
     peerDependencies:
       vue: 3.3.9
 
+  '@hoppscotch/ui@0.2.0':
+    resolution: {integrity: sha512-2FuHIQ65FuMhN8BMy1IlTUZ2MLWLYAXFOKOT4Kx7YrlEk0UUk5iZt6SdwxDR1aLoLMGoDRJofEbCubgtxYuBPg==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      vue: 3.3.9
+
+  '@hoppscotch/vue-sonner@1.2.3':
+    resolution: {integrity: sha512-P1gyvHHLsPeB8lsLP5SrqwQatuwOKtbsP83sKhyIV3WL2rJj3+DiFfqo2ErNBa+Sl0gM68o1V+wuOS7zbR//6g==}
+
   '@hoppscotch/vue-toasted@0.1.0':
     resolution: {integrity: sha512-DIgmeTHxWwX5UeaHLEqDYNLJFGRosx/5N1fCHkaO8zt+sZv8GrHlkrIpjfKF2drmA3kKw5cY42Cw7WuCoabR3g==}
     peerDependencies:
@@ -11913,6 +11922,9 @@ packages:
     peerDependencies:
       vue: 3.3.9
 
+  vue-promise-modals@0.1.0:
+    resolution: {integrity: sha512-LmPejeqvZSkxj4KkJe6ZUEJmCUQXVeEAj9ihTX+BRFfZftVCZSZd3B4uuZSKF0iCeQUemkodXUZFxcsNT/2dmg==}
+
   vue-router@4.1.0:
     resolution: {integrity: sha512-A+dYO0ZXLJFZ40ebW3XtqehCW0Wv2xNH4lFddOByDja4NtItEdyirrShTlvD3UA4xc5a5mG2RRI30BusYpOb9g==}
     peerDependencies:
@@ -11923,6 +11935,9 @@ packages:
     peerDependencies:
       vue: 3.3.9
 
+  vue-sonner@1.1.3:
+    resolution: {integrity: sha512-6I+5GNobKvE2nR5MPhO+T59d4j2LXRQoc/ZCmGtCoBWKDQr5nzSqjFaOOdPysHFI2p42wNLhQMafd0N540UW9Q==}
+
   vue-template-compiler@2.7.16:
     resolution: {integrity: sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==}
 
@@ -15273,48 +15288,6 @@ snapshots:
       - terser
       - vite
 
-  '@hoppscotch/ui@0.1.0(eslint@8.57.0)(terser@5.31.0)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))(vue@3.3.9(typescript@5.3.2))':
-    dependencies:
-      '@boringer-avatars/vue3': 0.2.1(vue@3.3.9(typescript@5.3.2))
-      '@fontsource-variable/inter': 5.0.15
-      '@fontsource-variable/material-symbols-rounded': 5.0.16
-      '@fontsource-variable/roboto-mono': 5.0.16
-      '@hoppscotch/vue-toasted': 0.1.0(vue@3.3.9(typescript@5.3.2))
-      '@vitejs/plugin-legacy': 2.3.0(terser@5.31.0)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))
-      '@vueuse/core': 8.9.4(vue@3.3.9(typescript@5.3.2))
-      fp-ts: 2.16.2
-      lodash-es: 4.17.21
-      path: 0.12.7
-      vite-plugin-eslint: 1.8.1(eslint@8.57.0)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))
-      vue: 3.3.9(typescript@5.3.2)
-      vuedraggable-es: 4.1.1(vue@3.3.9(typescript@5.3.2))
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - eslint
-      - terser
-      - vite
-
-  '@hoppscotch/ui@0.1.0(eslint@8.57.0)(terser@5.31.0)(vite@5.0.5(@types/node@17.0.27)(sass@1.69.5)(terser@5.31.0))(vue@3.3.9(typescript@4.9.5))':
-    dependencies:
-      '@boringer-avatars/vue3': 0.2.1(vue@3.3.9(typescript@4.9.5))
-      '@fontsource-variable/inter': 5.0.15
-      '@fontsource-variable/material-symbols-rounded': 5.0.16
-      '@fontsource-variable/roboto-mono': 5.0.16
-      '@hoppscotch/vue-toasted': 0.1.0(vue@3.3.9(typescript@4.9.5))
-      '@vitejs/plugin-legacy': 2.3.0(terser@5.31.0)(vite@5.0.5(@types/node@17.0.27)(sass@1.69.5)(terser@5.31.0))
-      '@vueuse/core': 8.9.4(vue@3.3.9(typescript@4.9.5))
-      fp-ts: 2.16.2
-      lodash-es: 4.17.21
-      path: 0.12.7
-      vite-plugin-eslint: 1.8.1(eslint@8.57.0)(vite@5.0.5(@types/node@17.0.27)(sass@1.69.5)(terser@5.31.0))
-      vue: 3.3.9(typescript@4.9.5)
-      vuedraggable-es: 4.1.1(vue@3.3.9(typescript@4.9.5))
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - eslint
-      - terser
-      - vite
-
   '@hoppscotch/ui@0.1.3(eslint@8.57.0)(terser@5.31.0)(vite@3.2.4(@types/node@18.18.8)(sass@1.58.0)(terser@5.31.0))(vue@3.3.9(typescript@4.9.3))':
     dependencies:
       '@boringer-avatars/vue3': 0.2.1(vue@3.3.9(typescript@4.9.3))
@@ -15336,6 +15309,58 @@ snapshots:
       - terser
       - vite
 
+  '@hoppscotch/ui@0.2.0(eslint@8.57.0)(terser@5.31.0)(typescript@4.9.5)(vite@5.0.5(@types/node@17.0.27)(sass@1.69.5)(terser@5.31.0))(vue@3.3.9(typescript@4.9.5))':
+    dependencies:
+      '@boringer-avatars/vue3': 0.2.1(vue@3.3.9(typescript@4.9.5))
+      '@fontsource-variable/inter': 5.0.15
+      '@fontsource-variable/material-symbols-rounded': 5.0.16
+      '@fontsource-variable/roboto-mono': 5.0.16
+      '@hoppscotch/vue-sonner': 1.2.3
+      '@hoppscotch/vue-toasted': 0.1.0(vue@3.3.9(typescript@4.9.5))
+      '@vitejs/plugin-legacy': 2.3.0(terser@5.31.0)(vite@5.0.5(@types/node@17.0.27)(sass@1.69.5)(terser@5.31.0))
+      '@vueuse/core': 8.9.4(vue@3.3.9(typescript@4.9.5))
+      fp-ts: 2.16.2
+      lodash-es: 4.17.21
+      path: 0.12.7
+      vite-plugin-eslint: 1.8.1(eslint@8.57.0)(vite@5.0.5(@types/node@17.0.27)(sass@1.69.5)(terser@5.31.0))
+      vue: 3.3.9(typescript@4.9.5)
+      vue-promise-modals: 0.1.0(typescript@4.9.5)
+      vue-sonner: 1.1.3
+      vuedraggable-es: 4.1.1(vue@3.3.9(typescript@4.9.5))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - eslint
+      - terser
+      - typescript
+      - vite
+
+  '@hoppscotch/ui@0.2.0(eslint@8.57.0)(terser@5.31.0)(typescript@5.3.2)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))(vue@3.3.9(typescript@5.3.2))':
+    dependencies:
+      '@boringer-avatars/vue3': 0.2.1(vue@3.3.9(typescript@5.3.2))
+      '@fontsource-variable/inter': 5.0.15
+      '@fontsource-variable/material-symbols-rounded': 5.0.16
+      '@fontsource-variable/roboto-mono': 5.0.16
+      '@hoppscotch/vue-sonner': 1.2.3
+      '@hoppscotch/vue-toasted': 0.1.0(vue@3.3.9(typescript@5.3.2))
+      '@vitejs/plugin-legacy': 2.3.0(terser@5.31.0)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))
+      '@vueuse/core': 8.9.4(vue@3.3.9(typescript@5.3.2))
+      fp-ts: 2.16.2
+      lodash-es: 4.17.21
+      path: 0.12.7
+      vite-plugin-eslint: 1.8.1(eslint@8.57.0)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))
+      vue: 3.3.9(typescript@5.3.2)
+      vue-promise-modals: 0.1.0(typescript@5.3.2)
+      vue-sonner: 1.1.3
+      vuedraggable-es: 4.1.1(vue@3.3.9(typescript@5.3.2))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - eslint
+      - terser
+      - typescript
+      - vite
+
+  '@hoppscotch/vue-sonner@1.2.3': {}
+
   '@hoppscotch/vue-toasted@0.1.0(vue@3.3.9(typescript@4.9.3))':
     dependencies:
       vue: 3.3.9(typescript@4.9.3)
@@ -15533,11 +15558,11 @@ snapshots:
 
   '@intlify/shared@9.8.0': {}
 
-  '@intlify/unplugin-vue-i18n@1.2.0(rollup@3.29.4)(vue-i18n@9.2.2(vue@3.3.9(typescript@4.9.3)))':
+  '@intlify/unplugin-vue-i18n@1.2.0(rollup@2.79.1)(vue-i18n@9.2.2(vue@3.3.9(typescript@4.9.3)))':
     dependencies:
       '@intlify/bundle-utils': 7.5.1(vue-i18n@9.2.2(vue@3.3.9(typescript@4.9.3)))
       '@intlify/shared': 9.13.1
-      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
+      '@rollup/pluginutils': 5.1.0(rollup@2.79.1)
       '@vue/compiler-sfc': 3.3.10
       debug: 4.3.4(supports-color@9.4.0)
       fast-glob: 3.3.2
@@ -25212,7 +25237,7 @@ snapshots:
 
   ts-interface-checker@0.1.13: {}
 
-  ts-jest@27.1.5(@babel/core@7.24.5)(@types/jest@27.5.2)(babel-jest@29.7.0(@babel/core@7.24.5))(jest@29.7.0(@types/node@17.0.45)(ts-node@10.9.1(@swc/core@1.4.2)(@types/node@17.0.45)(typescript@4.9.5)))(typescript@4.9.5):
+  ts-jest@27.1.5(@babel/core@7.24.5)(@types/jest@27.5.2)(jest@29.7.0(@types/node@17.0.45)(ts-node@10.9.1(@swc/core@1.4.2)(@types/node@17.0.45)(typescript@4.9.5)))(typescript@4.9.5):
     dependencies:
       bs-logger: 0.2.6
       fast-json-stable-stringify: 2.1.0
@@ -25227,7 +25252,6 @@ snapshots:
     optionalDependencies:
       '@babel/core': 7.24.5
       '@types/jest': 27.5.2
-      babel-jest: 29.7.0(@babel/core@7.24.5)
 
   ts-jest@29.0.5(@babel/core@7.24.5)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.24.5))(jest@29.4.1(@types/node@18.11.10)(ts-node@10.9.1(@swc/core@1.4.2)(@types/node@18.11.10)(typescript@4.9.3)))(typescript@4.9.3):
     dependencies:
@@ -25671,7 +25695,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  unplugin-vue-components@0.21.0(@babel/parser@7.24.5)(esbuild@0.20.2)(rollup@3.29.4)(vite@3.2.4(@types/node@18.18.8)(sass@1.58.0)(terser@5.31.0))(vue@3.3.9(typescript@4.9.3))(webpack@5.91.0(@swc/core@1.4.2)(esbuild@0.20.2)):
+  unplugin-vue-components@0.21.0(@babel/parser@7.24.5)(esbuild@0.20.2)(rollup@2.79.1)(vite@3.2.4(@types/node@18.18.8)(sass@1.58.0)(terser@5.31.0))(vue@3.3.9(typescript@4.9.3))(webpack@5.91.0(@swc/core@1.4.2)(esbuild@0.20.2)):
     dependencies:
       '@antfu/utils': 0.5.2
       '@rollup/pluginutils': 4.2.1
@@ -25682,7 +25706,7 @@ snapshots:
       magic-string: 0.26.7
       minimatch: 5.1.6
       resolve: 1.22.8
-      unplugin: 0.7.2(esbuild@0.20.2)(rollup@3.29.4)(vite@3.2.4(@types/node@18.18.8)(sass@1.58.0)(terser@5.31.0))(webpack@5.91.0(@swc/core@1.4.2)(esbuild@0.20.2))
+      unplugin: 0.7.2(esbuild@0.20.2)(rollup@2.79.1)(vite@3.2.4(@types/node@18.18.8)(sass@1.58.0)(terser@5.31.0))(webpack@5.91.0(@swc/core@1.4.2)(esbuild@0.20.2))
       vue: 3.3.9(typescript@4.9.3)
     optionalDependencies:
       '@babel/parser': 7.24.5
@@ -25693,7 +25717,7 @@ snapshots:
       - vite
       - webpack
 
-  unplugin-vue-components@0.21.0(@babel/parser@7.24.5)(esbuild@0.20.2)(rollup@3.29.4)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))(vue@3.3.9(typescript@4.9.5))(webpack@5.91.0(@swc/core@1.4.2)(esbuild@0.20.2)):
+  unplugin-vue-components@0.21.0(@babel/parser@7.24.5)(esbuild@0.20.2)(rollup@2.79.1)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))(vue@3.3.9(typescript@4.9.5))(webpack@5.91.0(@swc/core@1.4.2)(esbuild@0.20.2)):
     dependencies:
       '@antfu/utils': 0.5.2
       '@rollup/pluginutils': 4.2.1
@@ -25704,7 +25728,7 @@ snapshots:
       magic-string: 0.26.7
       minimatch: 5.1.6
       resolve: 1.22.8
-      unplugin: 0.7.2(esbuild@0.20.2)(rollup@3.29.4)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))(webpack@5.91.0(@swc/core@1.4.2)(esbuild@0.20.2))
+      unplugin: 0.7.2(esbuild@0.20.2)(rollup@2.79.1)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))(webpack@5.91.0(@swc/core@1.4.2)(esbuild@0.20.2))
       vue: 3.3.9(typescript@4.9.5)
     optionalDependencies:
       '@babel/parser': 7.24.5
@@ -25715,10 +25739,10 @@ snapshots:
       - vite
       - webpack
 
-  unplugin-vue-components@0.25.2(@babel/parser@7.24.5)(rollup@3.29.4)(vue@3.3.9(typescript@5.3.2)):
+  unplugin-vue-components@0.25.2(@babel/parser@7.24.5)(rollup@2.79.1)(vue@3.3.9(typescript@5.3.2)):
     dependencies:
       '@antfu/utils': 0.7.7
-      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
+      '@rollup/pluginutils': 5.1.0(rollup@2.79.1)
       chokidar: 3.6.0
       debug: 4.3.4(supports-color@9.4.0)
       fast-glob: 3.3.2
@@ -25753,7 +25777,7 @@ snapshots:
       - rollup
       - supports-color
 
-  unplugin@0.7.2(esbuild@0.20.2)(rollup@3.29.4)(vite@3.2.4(@types/node@18.18.8)(sass@1.58.0)(terser@5.31.0))(webpack@5.91.0(@swc/core@1.4.2)(esbuild@0.20.2)):
+  unplugin@0.7.2(esbuild@0.20.2)(rollup@2.79.1)(vite@3.2.4(@types/node@18.18.8)(sass@1.58.0)(terser@5.31.0))(webpack@5.91.0(@swc/core@1.4.2)(esbuild@0.20.2)):
     dependencies:
       acorn: 8.11.3
       chokidar: 3.6.0
@@ -25761,11 +25785,11 @@ snapshots:
       webpack-virtual-modules: 0.4.6
     optionalDependencies:
       esbuild: 0.20.2
-      rollup: 3.29.4
+      rollup: 2.79.1
       vite: 3.2.4(@types/node@18.18.8)(sass@1.58.0)(terser@5.31.0)
       webpack: 5.91.0(@swc/core@1.4.2)(esbuild@0.20.2)
 
-  unplugin@0.7.2(esbuild@0.20.2)(rollup@3.29.4)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))(webpack@5.91.0(@swc/core@1.4.2)(esbuild@0.20.2)):
+  unplugin@0.7.2(esbuild@0.20.2)(rollup@2.79.1)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))(webpack@5.91.0(@swc/core@1.4.2)(esbuild@0.20.2)):
     dependencies:
       acorn: 8.11.3
       chokidar: 3.6.0
@@ -25773,7 +25797,7 @@ snapshots:
       webpack-virtual-modules: 0.4.6
     optionalDependencies:
       esbuild: 0.20.2
-      rollup: 3.29.4
+      rollup: 2.79.1
       vite: 4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0)
       webpack: 5.91.0(@swc/core@1.4.2)(esbuild@0.20.2)
 
@@ -25914,7 +25938,7 @@ snapshots:
       - supports-color
       - terser
 
-  vite-plugin-checker@0.6.2(eslint@8.57.0)(meow@8.1.2)(optionator@0.9.4)(typescript@5.3.2)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))(vue-tsc@1.8.24(typescript@5.3.2)):
+  vite-plugin-checker@0.6.2(eslint@8.57.0)(optionator@0.9.4)(typescript@5.3.2)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))(vue-tsc@1.8.24(typescript@5.3.2)):
     dependencies:
       '@babel/code-frame': 7.24.2
       ansi-escapes: 4.3.2
@@ -25936,7 +25960,6 @@ snapshots:
       vscode-uri: 3.0.8
     optionalDependencies:
       eslint: 8.57.0
-      meow: 8.1.2
       optionator: 0.9.4
       typescript: 5.3.2
       vue-tsc: 1.8.24(typescript@5.3.2)
@@ -25982,10 +26005,10 @@ snapshots:
     dependencies:
       vite: 4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0)
 
-  vite-plugin-inspect@0.7.38(rollup@3.29.4)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0)):
+  vite-plugin-inspect@0.7.38(rollup@2.79.1)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0)):
     dependencies:
       '@antfu/utils': 0.7.7
-      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
+      '@rollup/pluginutils': 5.1.0(rollup@2.79.1)
       debug: 4.3.4(supports-color@9.4.0)
       error-stack-parser-es: 0.1.1
       fs-extra: 11.2.0
@@ -25997,10 +26020,10 @@ snapshots:
       - rollup
       - supports-color
 
-  vite-plugin-inspect@0.7.42(rollup@3.29.4)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0)):
+  vite-plugin-inspect@0.7.42(rollup@2.79.1)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0)):
     dependencies:
       '@antfu/utils': 0.7.7
-      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
+      '@rollup/pluginutils': 5.1.0(rollup@2.79.1)
       debug: 4.3.4(supports-color@9.4.0)
       error-stack-parser-es: 0.1.1
       fs-extra: 11.2.0
@@ -26430,6 +26453,18 @@ snapshots:
     dependencies:
       vue: 3.3.9(typescript@5.3.2)
 
+  vue-promise-modals@0.1.0(typescript@4.9.5):
+    dependencies:
+      vue: 3.3.9(typescript@4.9.5)
+    transitivePeerDependencies:
+      - typescript
+
+  vue-promise-modals@0.1.0(typescript@5.3.2):
+    dependencies:
+      vue: 3.3.9(typescript@5.3.2)
+    transitivePeerDependencies:
+      - typescript
+
   vue-router@4.1.0(vue@3.3.9(typescript@4.9.3)):
     dependencies:
       '@vue/devtools-api': 6.6.1
@@ -26445,6 +26480,8 @@ snapshots:
       '@vue/devtools-api': 6.6.1
       vue: 3.3.9(typescript@5.3.2)
 
+  vue-sonner@1.1.3: {}
+
   vue-template-compiler@2.7.16:
     dependencies:
       de-indent: 1.0.2