feat: new banner service and added ability to bind additional services from other platforms (#3474)

Co-authored-by: jamesgeorge007 <jamesgeorge998001@gmail.com>

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

@@ -215,7 +215,7 @@
         </div>
       </div>
     </header>
-    <AppAnnouncement v-if="!network.isOnline" />
+    <AppBanner v-if="banner" :banner="banner" />
     <TeamsModal :show="showTeamsModal" @hide-modal="showTeamsModal = false" />
     <TeamsInvite
       v-if="workspace.type === 'team' && workspace.teamID"
@@ -264,6 +264,7 @@ import IconUsers from "~icons/lucide/users"
 import { pipe } from "fp-ts/function"
 import * as TE from "fp-ts/TaskEither"
 import { deleteTeam as backendDeleteTeam } from "~/helpers/backend/mutations/Team"
+import { BannerService } from "~/services/banner.service"
 
 const t = useI18n()
 const toast = useToast()
@@ -281,8 +282,21 @@ const showTeamsModal = ref(false)
 const breakpoints = useBreakpoints(breakpointsTailwind)
 const mdAndLarger = breakpoints.greater("md")
 
+const { content: banner } = useService(BannerService)
 const network = reactive(useNetwork())
 
+watch(network, () => {
+  if (network.isOnline) {
+    banner.value = null
+    return
+  }
+  banner.value = {
+    type: "info",
+    text: t("helpers.offline"),
+    alternateText: t("helpers.offline_short"),
+  }
+})
+
 const currentUser = useReadonlyStream(
   platform.auth.getProbableUserStream(),
   platform.auth.getProbableUser()