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/services/banner.service.ts

@@ -0,0 +1,28 @@
+import { Service } from "dioc"
+import { ref } from "vue"
+
+/**
+ * The different types of banners that can be used.
+ */
+export type BannerType = "info" | "warning" | "error"
+
+export type BannerContent = {
+  type: BannerType
+  text: string
+  // Can be used to display an alternate text when display size is small
+  alternateText?: string
+}
+
+/**
+ * This service is used to display a banner on the app.
+ * It can used to display information, warnings or errors.
+ */
+export class BannerService extends Service {
+  public static readonly ID = "BANNER_SERVICE"
+
+  /**
+   * This is a reactive variable that can be used to set the contents of the banner
+   * and use it to render the banner on components.
+   */
+  public content = ref<BannerContent | null>(null)
+}