From faf2bfc8ebeed5a0315b8636c39246dc361c6611 Mon Sep 17 00:00:00 2001
From: James George <25279263+jamesgeorge007@users.noreply.github.com>
Date: Mon, 23 Feb 2026 20:06:10 +0530
Subject: [PATCH] feat(common): add foundational support for dropdown-based
 organization switcher (#5890)

---
 packages/hoppscotch-common/locales/en.json    |  5 +-
 .../src/components/app/Header.vue             | 46 +++++++++++++++++++
 .../src/components/workspace/Selector.vue     | 14 ------
 .../hoppscotch-common/src/layouts/default.vue | 18 --------
 .../src/platform/organization.ts              | 13 ++----
 5 files changed, 52 insertions(+), 44 deletions(-)

diff --git a/packages/hoppscotch-common/locales/en.json b/packages/hoppscotch-common/locales/en.json
index ec24f16b..ced36197 100644
--- a/packages/hoppscotch-common/locales/en.json
+++ b/packages/hoppscotch-common/locales/en.json
@@ -2219,13 +2219,12 @@
     "admin": "Admin"
   },
   "organization_sidebar": {
-    "instances": "Instances",
     "hoppscotch_cloud": "Hoppscotch Cloud",
     "admin": "Admin",
-    "no_orgs_title": "No organizations yet",
-    "no_orgs_description": "Join or create an organization to collaborate with your team",
     "error_loading": "Failed to load organizations",
     "inactive_orgs": "Inactive Organizations",
+    "no_orgs_found": "No organizations found",
+    "organizations_for": "Organizations for {email}",
     "multi_account_notice": "Each organization keeps its own login, using the last account accessed.",
     "inactive_orgs_tooltip": "Contact support for assistance."
   },
diff --git a/packages/hoppscotch-common/src/components/app/Header.vue b/packages/hoppscotch-common/src/components/app/Header.vue
index 29948a26..0e43d708 100644
--- a/packages/hoppscotch-common/src/components/app/Header.vue
+++ b/packages/hoppscotch-common/src/components/app/Header.vue
@@ -45,6 +45,40 @@
             </template>
           </tippy>
 
+          <!-- Organization Switcher (Web/Cloud) -->
+          <tippy
+            v-else-if="
+              platform.organization?.customOrganizationSwitcherComponent
+            "
+            interactive
+            trigger="click"
+            theme="popover"
+            :on-shown="() => orgSwitcherRef?.focus()"
+            :on-create="onOrgSwitcherCreate"
+          >
+            <HoppButtonSecondary
+              class="!font-bold uppercase tracking-wide !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark"
+              :label="t('app.name')"
+              :icon="IconChevronDown"
+              reverse
+            />
+            <template #content="{ hide }">
+              <div
+                ref="orgSwitcherRef"
+                class="flex flex-col focus:outline-none min-w-72"
+                tabindex="0"
+                @keyup.escape="hide()"
+              >
+                <component
+                  :is="
+                    platform.organization.customOrganizationSwitcherComponent
+                  "
+                  @close-dropdown="hide()"
+                />
+              </div>
+            </template>
+          </tippy>
+
           <HoppButtonSecondary
             v-else
             class="!font-bold uppercase tracking-wide !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark"
@@ -360,7 +394,9 @@ import { breakpointsTailwind, useBreakpoints, useNetwork } from "@vueuse/core"
 import { useService } from "dioc/vue"
 import * as TE from "fp-ts/TaskEither"
 import { pipe } from "fp-ts/function"
+import type { Instance } from "tippy.js"
 import { computed, onMounted, reactive, ref, watch } from "vue"
+
 import { useToast } from "~/composables/toast"
 import { GetMyTeamsQuery, TeamAccessRole } from "~/helpers/backend/graphql"
 import { deleteTeam as backendDeleteTeam } from "~/helpers/backend/mutations/Team"
@@ -390,6 +426,16 @@ const downloadableLinksRef =
   kernelMode === "web" ? ref<any | null>(null) : ref(null)
 const instanceSwitcherRef =
   kernelMode === "desktop" ? ref<any | null>(null) : ref(null)
+const orgSwitcherRef = ref<HTMLElement | null>(null)
+
+// Reserve scrollbar gutter so content width doesn't shift when the list
+// grows long enough to scroll inside the popover's `max-h-[45vh]` container.
+const onOrgSwitcherCreate = (instance: Instance) => {
+  const content = instance.popper?.querySelector(".tippy-content")
+  if (content instanceof HTMLElement) {
+    content.style.scrollbarGutter = "stable"
+  }
+}
 
 const isUserAdmin = ref(false)
 
diff --git a/packages/hoppscotch-common/src/components/workspace/Selector.vue b/packages/hoppscotch-common/src/components/workspace/Selector.vue
index c511f32d..81535d83 100644
--- a/packages/hoppscotch-common/src/components/workspace/Selector.vue
+++ b/packages/hoppscotch-common/src/components/workspace/Selector.vue
@@ -65,14 +65,6 @@
         <icon-lucide-help-circle class="svg-icons mb-4" />
         {{ t("error.something_went_wrong") }}
       </div>
-
-      <div v-if="showCreateOrganizationCTA" class="flex flex-col">
-        <hr />
-        <HoppButtonPrimary
-          :label="t('organization.create_an_organization')"
-          to="/orgs"
-        />
-      </div>
     </div>
     <TeamsAdd
       :show="showModalAdd"
@@ -174,12 +166,6 @@ const isActiveWorkspace = computed(() => (id: string) => {
   return workspace.value.teamID === id
 })
 
-const showCreateOrganizationCTA = computed(() => {
-  const { organization } = platform
-
-  return organization?.isDefaultCloudInstance ?? false
-})
-
 const switchToTeamWorkspace = (team: GetMyTeamsQuery["myTeams"][number]) => {
   REMEMBERED_TEAM_ID.value = team.id
   workspaceService.changeWorkspace({
diff --git a/packages/hoppscotch-common/src/layouts/default.vue b/packages/hoppscotch-common/src/layouts/default.vue
index 523aa6d0..a35e9f51 100644
--- a/packages/hoppscotch-common/src/layouts/default.vue
+++ b/packages/hoppscotch-common/src/layouts/default.vue
@@ -16,16 +16,6 @@
           >
             <AppSidenav />
           </Pane>
-          <Pane
-            v-if="showOrgSidebar"
-            style="width: auto; height: auto"
-            class="hidden !overflow-auto md:flex md:flex-col"
-          >
-            <component
-              :is="platform.organization.customOrganizationSidebarComponent"
-            />
-          </Pane>
-          <!-- Changed to !overflow-auto to allow organization sidebar and main content to scroll independently -->
           <Pane class="flex flex-1 !overflow-auto">
             <Splitpanes
               class="no-splitter"
@@ -121,14 +111,6 @@ const rootExtensionComponents = uiExtensionService.rootUIExtensionComponents
 
 const HAS_OPENED_SPOTLIGHT = useSetting("HAS_OPENED_SPOTLIGHT")
 
-// Show organization sidebar if organization switching is enabled and sidebar component is provided
-const showOrgSidebar = computed(() => {
-  return (
-    platform.organization?.organizationSwitchingEnabled === true &&
-    platform.organization.customOrganizationSidebarComponent
-  )
-})
-
 onBeforeMount(() => {
   if (!mdAndLarger.value) {
     rightSidebar.value = false
diff --git a/packages/hoppscotch-common/src/platform/organization.ts b/packages/hoppscotch-common/src/platform/organization.ts
index 29f0bcb4..ce886a30 100644
--- a/packages/hoppscotch-common/src/platform/organization.ts
+++ b/packages/hoppscotch-common/src/platform/organization.ts
@@ -13,16 +13,11 @@ export type OrganizationPlatformDef = {
   initiateOnboarding: () => void
 
   /**
-   * Whether organization switching is enabled for this platform
-   * If true, an organization switcher will be shown
+   * Custom component for the organization switcher dropdown
+   * If provided, will be shown as a dropdown in the header (like the instance switcher)
+   * The component should emit 'close-dropdown' when the dropdown should close
    */
-  organizationSwitchingEnabled?: boolean
-
-  /**
-   * Custom component for the organization sidebar
-   * If provided, will be shown as a sidebar in the layout
-   */
-  customOrganizationSidebarComponent?: Component
+  customOrganizationSwitcherComponent?: Component
 
   /**
    * Switch to a specific organization instance or default cloud instance