chore: introduce platform object for platform specific code

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

@@ -102,7 +102,6 @@ declare module '@vue/runtime-core' {
     IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
     IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
     IconLucideGlobe: typeof import('~icons/lucide/globe')['default']
-    IconLucideHelpCircle: typeof import('~icons/lucide/help-circle')['default']
     IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
     IconLucideInfo: typeof import('~icons/lucide/info')['default']
     IconLucideLayers: typeof import('~icons/lucide/layers')['default']
@@ -111,7 +110,6 @@ declare module '@vue/runtime-core' {
     IconLucideSearch: typeof import('~icons/lucide/search')['default']
     IconLucideUser: typeof import('~icons/lucide/user')['default']
     IconLucideUsers: typeof import('~icons/lucide/users')['default']
-    IconLucideVerified: typeof import('~icons/lucide/verified')['default']
     LensesHeadersRenderer: typeof import('./components/lenses/HeadersRenderer.vue')['default']
     LensesHeadersRendererEntry: typeof import('./components/lenses/HeadersRendererEntry.vue')['default']
     LensesRenderersHTMLLensRenderer: typeof import('./components/lenses/renderers/HTMLLensRenderer.vue')['default']

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

@@ -3,7 +3,13 @@
     <header
       class="flex items-center justify-between flex-1 flex-shrink-0 px-2 py-2 space-x-2 overflow-x-auto overflow-y-hidden"
     >
-      <div class="inline-flex items-center space-x-2">
+      <div
+        class="inline-flex items-center space-x-2"
+        :style="{
+          paddingTop: platform.ui?.appHeader?.paddingTop?.value,
+          paddingLeft: platform.ui?.appHeader?.paddingLeft?.value,
+        }"
+      >
         <ButtonSecondary
           class="tracking-wide !font-bold !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark uppercase"
           :label="t('app.name')"
@@ -169,6 +175,7 @@ import { probableUser$ } from "@helpers/fb/auth"
 import { useI18n } from "@composables/i18n"
 import { useReadonlyStream } from "@composables/stream"
 import { invokeAction } from "@helpers/actions"
+import { platform } from "~/index"
 
 const t = useI18n()
 

packages/hoppscotch-common/src/index.ts

@@ -1,4 +1,4 @@
-import { createApp } from "vue"
+import { createApp, Ref } from "vue"
 import { setupLocalPersistence } from "./newstore/localpersistence"
 import { performMigrations } from "./helpers/migrations"
 import { initializeFirebase } from "./helpers/fb"
@@ -12,7 +12,26 @@ import "nprogress/nprogress.css"
 
 import App from "./App.vue"
 
-export function createHoppApp(el: string | Element) {
+export type PlatformDef = {
+  ui?: {
+    appHeader?: {
+      paddingTop?: Ref<string>
+      paddingLeft?: Ref<string>
+    }
+  }
+}
+
+/**
+ * Defines the fields, functions and properties that will be
+ * filled in by the individual platforms.
+ *
+ * This value is populated upon calling `createHoppApp`
+ */
+export let platform: PlatformDef
+
+export function createHoppApp(el: string | Element, platformDef: PlatformDef) {
+  platform = platformDef
+
   const app = createApp(App)
 
   // Some basic work that needs to be done before module inits even

packages/hoppscotch-web/src/main.ts

@@ -1,3 +1,3 @@
 import { createHoppApp } from "@hoppscotch/common"
 
-createHoppApp("#app")
+createHoppApp("#app", {})