From b63c70762405d543e740c27a1039d4470f8ad105 Mon Sep 17 00:00:00 2001
From: Shreyas <CuriousCorrelation@gmail.com>
Date: Tue, 10 Jun 2025 13:21:54 +0530
Subject: [PATCH] fix(desktop): align connected instance with launch (#5132)

---
 .../src/components/app/Header.vue             | 22 ++++++--
 .../src/components/instance/Switcher.vue      | 25 ++++++++-
 .../hoppscotch-common/src/platform/index.ts   |  2 +
 .../src/platform/instance.ts                  | 10 ++++
 .../src/services/instance-switcher.service.ts | 55 ++++++++++++-------
 .../hoppscotch-desktop/src/views/Home.vue     | 34 ++++++++++--
 packages/hoppscotch-selfhost-web/src/main.ts  | 10 ++++
 7 files changed, 126 insertions(+), 32 deletions(-)
 create mode 100644 packages/hoppscotch-common/src/platform/instance.ts

diff --git a/packages/hoppscotch-common/src/components/app/Header.vue b/packages/hoppscotch-common/src/components/app/Header.vue
index 6d72a9a3..7c766829 100644
--- a/packages/hoppscotch-common/src/components/app/Header.vue
+++ b/packages/hoppscotch-common/src/components/app/Header.vue
@@ -22,11 +22,23 @@
             :on-shown="() => instanceSwitcherRef.focus()"
           >
             <div class="flex items-center cursor-pointer">
-              <span
-                class="!font-bold uppercase tracking-wide !text-secondaryDark pr-1"
-              >
-                {{ instanceDisplayName }}
-              </span>
+              <div class="flex">
+                <span
+                  class="!font-bold uppercase tracking-wide !text-secondaryDark pr-1"
+                >
+                  {{ instanceDisplayName }}
+                </span>
+                <span
+                  v-if="
+                    currentState.status === 'connected' &&
+                    'type' in currentState.instance &&
+                    currentState.instance.type === 'vendored'
+                  "
+                  class="!font-bold uppercase tracking-wide !text-secondaryDark pr-1"
+                >
+                  {{ platform.instance.displayConfig.description }}
+                </span>
+              </div>
               <IconChevronDown class="h-4 w-4 text-secondaryDark" />
             </div>
             <template #content="{ hide }">
diff --git a/packages/hoppscotch-common/src/components/instance/Switcher.vue b/packages/hoppscotch-common/src/components/instance/Switcher.vue
index 9fe359f7..8dc5054e 100644
--- a/packages/hoppscotch-common/src/components/instance/Switcher.vue
+++ b/packages/hoppscotch-common/src/components/instance/Switcher.vue
@@ -11,9 +11,27 @@
       <div class="flex items-center gap-4">
         <IconLucidePackage />
         <div class="flex flex-col">
-          <span class="font-semibold uppercase">Hoppscotch</span>
+          <span class="font-semibold uppercase">{{
+            platform.instance.displayConfig.displayName
+          }}</span>
           <div class="flex items-center gap-1">
-            <span class="text-xs">On-prem</span>
+            <!-- NOTE:
+                 If this is set to `platform.instance.displayConfig.description`
+                 it'll be bound to app's perspective, i.e.
+                 when in vendored cloud app, it'll show `Cloud`
+                 and in vendored self-hosted app, it'll show `On-Prem`
+                 even tho both are actually pointing to the same bundle.
+                 Essentially switching instance is a **perspective shift**
+                 for the underlying desktop app launcher.
+
+                 The best way to solve this would be to make instance information
+                 into "links" to the bundles hosted by the `appload` plugin,
+                 which is already underway in HFE-829.
+
+                 This is a workaround for the time being. See `Header.vue`
+                 for code that maintains backwards compatibility.
+            -->
+            <span class="text-xs">Default</span>
             <span class="text-xs"> app </span>
           </div>
         </div>
@@ -235,6 +253,7 @@ import {
   InstanceSwitcherService,
   InstanceType,
 } from "~/services/instance-switcher.service"
+import { platform } from "~/platform"
 
 import IconLucideGlobe from "~icons/lucide/globe"
 import IconLucideCheck from "~icons/lucide/check"
@@ -285,7 +304,7 @@ const connectionError = computed(() => {
 })
 
 const isVendored = computed(() => {
-  return currentInstance.value?.type === "vendored"
+  return currentInstance.value?.type === platform.instance.instanceType
 })
 
 const isValidUrl = computed(() => {
diff --git a/packages/hoppscotch-common/src/platform/index.ts b/packages/hoppscotch-common/src/platform/index.ts
index b79e475b..cec460c4 100644
--- a/packages/hoppscotch-common/src/platform/index.ts
+++ b/packages/hoppscotch-common/src/platform/index.ts
@@ -21,6 +21,7 @@ import { BackendPlatformDef } from "./backend"
 import { OrganizationPlatformDef } from "./organization"
 import { KernelIO } from "./kernel-io"
 import { AdditionalLinksPlatformDef } from "./additionalLinks"
+import { InstancePlatformDef } from "./instance"
 
 export type PlatformDef = {
   ui?: UIPlatformDef
@@ -31,6 +32,7 @@ export type PlatformDef = {
   // NOTE: To be deprecated
   // io: IOPlatformDef
   kernelIO: KernelIO
+  instance: InstancePlatformDef
   sync: {
     environments: EnvironmentsPlatformDef
     collections: CollectionsPlatformDef
diff --git a/packages/hoppscotch-common/src/platform/instance.ts b/packages/hoppscotch-common/src/platform/instance.ts
new file mode 100644
index 00000000..98e8fbbe
--- /dev/null
+++ b/packages/hoppscotch-common/src/platform/instance.ts
@@ -0,0 +1,10 @@
+export type InstancePlatformDef = {
+  instanceType: "vendored"
+  displayConfig: {
+    displayName: string
+    description: string
+    version: string
+    connectingMessage: string
+    connectedMessage: string
+  }
+}
diff --git a/packages/hoppscotch-common/src/services/instance-switcher.service.ts b/packages/hoppscotch-common/src/services/instance-switcher.service.ts
index e874bfdc..9b109133 100644
--- a/packages/hoppscotch-common/src/services/instance-switcher.service.ts
+++ b/packages/hoppscotch-common/src/services/instance-switcher.service.ts
@@ -4,6 +4,7 @@ import { computed } from "vue"
 import { LazyStore } from "@tauri-apps/plugin-store"
 import { download, load, clear, remove } from "@hoppscotch/plugin-appload"
 import { useToast } from "~/composables/toast"
+import { platform } from "~/platform"
 
 const STORE_PATH = "hopp.store.json"
 const MAX_RECENT_INSTANCES = 10
@@ -39,21 +40,26 @@ export class InstanceSwitcherService extends Service<ConnectionState> {
   private store!: LazyStore
   private toast = useToast()
 
+  public getVendoredInstance(): VendoredInstance {
+    const { instanceType, displayConfig } = platform.instance
+    const { displayName, version } = displayConfig
+
+    return {
+      type: instanceType,
+      displayName,
+      version,
+    }
+  }
+
   override async onServiceInit(): Promise<void> {
     this.store = new LazyStore(STORE_PATH)
     await this.store.init()
     await this.loadRecentInstances()
 
     if (this.inVendoredEnvironment()) {
-      const instance: VendoredInstance = {
-        type: "vendored",
-        displayName: "Hoppscotch",
-        version: "25.5.1",
-      }
-
       this.state$.next({
         status: "connected",
-        instance,
+        instance: this.getVendoredInstance(),
       })
       this.emit(this.state$.value)
     } else {
@@ -113,26 +119,25 @@ export class InstanceSwitcherService extends Service<ConnectionState> {
 
     this.state$.next({
       status: "connecting",
-      target: "Vendored",
+      target: this.getVendoredInstance().displayName,
     })
     this.emit(this.state$.value)
 
     try {
-      const instance: VendoredInstance = {
-        type: "vendored",
-        displayName: "Hoppscotch",
-        version: "25.5.1",
-      }
-
       this.state$.next({
         status: "connected",
-        instance,
+        instance: this.getVendoredInstance(),
       })
       this.emit(this.state$.value)
 
       await this.saveCurrentState()
 
-      this.toast.success("Connecting to Vendored")
+      this.toast.success(
+        platform.instance.displayConfig.connectingMessage.replace(
+          "{instanceName}",
+          this.getVendoredInstance().displayName
+        )
+      )
 
       const loadResponse = await load({
         bundleName: "Hoppscotch",
@@ -140,17 +145,24 @@ export class InstanceSwitcherService extends Service<ConnectionState> {
       })
 
       if (!loadResponse.success) {
-        throw new Error("Failed to load vendored bundle")
+        throw new Error(
+          `Failed to load ${this.getVendoredInstance().type} bundle`
+        )
       }
 
-      this.toast.success("Connected to Vendored")
+      this.toast.success(
+        platform.instance.displayConfig.connectedMessage.replace(
+          "{instanceName}",
+          this.getVendoredInstance().displayName
+        )
+      )
       return true
     } catch (error) {
       const errorMessage =
         error instanceof Error ? error.message : String(error)
       this.state$.next({
         status: "error",
-        target: "Vendored",
+        target: this.getVendoredInstance().displayName,
         message: errorMessage,
       })
       this.emit(this.state$.value)
@@ -325,7 +337,10 @@ export class InstanceSwitcherService extends Service<ConnectionState> {
 
   public isCurrentlyVendored(): boolean {
     const state = this.state$.value
-    return state.status === "connected" && state.instance.type === "vendored"
+    return (
+      state.status === "connected" &&
+      state.instance.type === this.getVendoredInstance().type
+    )
   }
 
   public isCurrentlyConnectedTo(serverUrl: string): boolean {
diff --git a/packages/hoppscotch-desktop/src/views/Home.vue b/packages/hoppscotch-desktop/src/views/Home.vue
index 47d82cd1..fbfcb5e1 100644
--- a/packages/hoppscotch-desktop/src/views/Home.vue
+++ b/packages/hoppscotch-desktop/src/views/Home.vue
@@ -105,6 +105,11 @@ import IconLucideDownload from "~icons/lucide/download";
 
 const APP_STORE_PATH = "hoppscotch-desktop.store";
 
+// `InstanceSwitcherService` store path.
+// NOTE: This should be removed eventually,
+// right now this is part 1/5 of HFE-864
+const INSTANCE_STORE_PATH = "hopp.store.json";
+
 enum AppState {
   LOADING = "loading",
   UPDATE_AVAILABLE = "update_available",
@@ -214,16 +219,37 @@ const loadVendored = async () => {
   try {
     statusMessage.value = "Loading application...";
 
+    // Standardized vendored instance data.
+    // NOTE: This should be removed eventually,
+    // right now this is part 1/5 of HFE-864
     const vendoredInstance: VendoredInstance = {
       type: "vendored",
-      displayName: "Vendored",
-      version: "vendored"
+      displayName: "Hoppscotch",
+      version: "25.5.1"
     };
 
-    await saveConnectionState({
+    const connectionState: ConnectionState = {
       status: "connected",
       instance: vendoredInstance
-    });
+    };
+
+    // Save to current app store.
+    // NOTE: This is existing behavior
+    await saveConnectionState(connectionState);
+
+    // ALSO save to `InstanceSwitcherService` store,
+    // NOTE: This should be removed eventually,
+    // right now this is part 1/5 of HFE-864
+    try {
+      const instanceStore = new LazyStore(INSTANCE_STORE_PATH);
+      await instanceStore.init();
+      await instanceStore.set("connectionState", connectionState);
+      await instanceStore.save();
+      console.log("Successfully saved vendored state to `InstanceSwitcherService` store");
+    } catch (instanceStoreError) {
+      console.error("Failed to save to `InstanceSwitcherService` store:", instanceStoreError);
+      // Don't need to fail the flow if this fails.
+    }
 
     console.log("Loading vendored app...");
     const loadResp = await load({
diff --git a/packages/hoppscotch-selfhost-web/src/main.ts b/packages/hoppscotch-selfhost-web/src/main.ts
index 39927b1f..cf865cef 100644
--- a/packages/hoppscotch-selfhost-web/src/main.ts
+++ b/packages/hoppscotch-selfhost-web/src/main.ts
@@ -78,6 +78,16 @@ async function initApp() {
     },
     auth: platformDefs.auth.get(kernelMode),
     kernelIO,
+    instance: {
+      instanceType: 'vendored',
+      displayConfig: {
+        displayName: 'Hoppscotch',
+        description: 'On-Prem',
+        version: '25.5.1',
+        connectingMessage: 'Connecting to On-prem',
+        connectedMessage: 'Connected to On-prem'
+      }
+    },
     sync: {
       environments: platformDefs.environments.get(kernelMode),
       collections: platformDefs.collections.get(kernelMode),