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>

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>