feat(common): add platform support for organization switcher (hoppscotch#5708)

Extends the organization platform definition to support switching between multiple organizations and displaying custom branding (logo and name) in the application header. Adds shared utilities for file uploads and avatar generation, including deterministic colour support.

These changes enable the Cloud for Organizations tier to offer:
- Multi-organization switching via sidebar UI.
- Custom logo uploads for organization branding.
- Seamless navigation between different organization instances.

Author: jamesgeorge007

packages/hoppscotch-common/locales/en.json

@@ -152,6 +152,7 @@
     "new_version_found": "New version found. Refresh to update.",
     "open_in_hoppscotch": "Open in Hoppscotch",
     "options": "Options",
+    "powered_by": "Powered by Hoppscotch",
     "proxy_privacy_policy": "Proxy privacy policy",
     "reload": "Reload",
     "search": "Search and commands",
@@ -735,6 +736,22 @@
     "title": "Export",
     "success": "Successfully exported"
   },
+  "file_upload": {
+    "choose_file": "Choose file",
+    "max_size_format": "Max 5MB. Supports JPEG, PNG, GIF, WebP",
+    "profile_photo_updated": "Profile photo updated successfully",
+    "profile_photo_removed": "Profile photo removed successfully",
+    "org_logo_updated": "Organization logo updated successfully",
+    "error_size_limit": "File size must be less than 5MB",
+    "error_invalid_format": "File must be an image (JPEG, PNG, GIF, or WebP)",
+    "error_invalid_upload_type": "Invalid upload type",
+    "error_invalid_org_id": "Invalid organization ID format",
+    "error_upload_failed": "Upload failed. Please try again",
+    "error_network_failed": "Network error. Please check your connection",
+    "error_timeout": "Upload timed out after 30 seconds. Please try again",
+    "error_missing_backend_url": "Backend URL is not configured. Please set the VITE_BACKEND_API_URL environment variable in your environment settings",
+    "error_invalid_backend_url": "Invalid backend URL configuration"
+  },
   "filename": {
     "cookie_key_value_pairs": "Cookie",
     "codegen": "{request_name} - code",
@@ -1257,6 +1274,7 @@
     "profile_description": "Update your profile details",
     "profile_email": "Email address",
     "profile_name": "Profile name",
+    "profile_photo": "Profile photo",
     "proxy": "Proxy",
     "proxy_url": "Proxy URL",
     "proxy_use_toggle": "Use the proxy middleware to send requests",
@@ -2191,7 +2209,25 @@
     "delete_account_description": "This will delete all data associated with your Hoppscotch account, including this and any other organizations you are part of.",
     "delete_account": "Delete Hoppscotch Account",
     "user_deletion_failed_sole_admin": "The user is the sole admin of one or more organization instances. Please demote the user before attempting deletion.",
-    "user_deletion_failed_sole_team_owner": "The user is the sole team owner on one or more organization instances. Please transfer the ownership or delete the relevant workspaces before attempting deletion."
+    "user_deletion_failed_sole_team_owner": "The user is the sole team owner on one or more organization instances. Please transfer the ownership or delete the relevant workspaces before attempting deletion.",
+    "no_organizations": "You are not a member of any organizations",
+    "admin": "Admin"
+  },
+  "organization_sidebar": {
+    "instances": "Instances",
+    "hoppscotch": "Hoppscotch",
+    "organizations": "Organizations",
+    "admin": "Admin",
+    "no_orgs": "No organizations yet",
+    "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",
+    "expand": "Expand sidebar",
+    "collapse": "Collapse sidebar",
+    "status_canceled": "Canceled",
+    "status_inactive": "Inactive",
+    "status_canceled_tooltip": "Subscription canceled - Contact support to reactivate this workspace",
+    "status_inactive_tooltip": "This organization is temporarily inactive - Contact support for assistance"
   },
   "billing": {
     "confirm": {

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

@@ -235,6 +235,7 @@ declare module 'vue' {
     IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
     IconLucideArrowUpRight: typeof import('~icons/lucide/arrow-up-right')['default']
     IconLucideBrush: typeof import('~icons/lucide/brush')['default']
+    IconLucideCheck: typeof import('~icons/lucide/check')['default']
     IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
     IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
     IconLucideCircleCheck: typeof import('~icons/lucide/circle-check')['default']
@@ -251,11 +252,13 @@ declare module 'vue' {
     IconLucideLoader2: typeof import('~icons/lucide/loader2')['default']
     IconLucideLock: typeof import('~icons/lucide/lock')['default']
     IconLucideMinus: typeof import('~icons/lucide/minus')['default']
+    IconLucidePauseCircle: typeof import('~icons/lucide/pause-circle')['default']
     IconLucidePlusCircle: typeof import('~icons/lucide/plus-circle')['default']
     IconLucideRss: typeof import('~icons/lucide/rss')['default']
     IconLucideSearch: typeof import('~icons/lucide/search')['default']
     IconLucideTerminal: typeof import('~icons/lucide/terminal')['default']
     IconLucideTriangleAlert: typeof import('~icons/lucide/triangle-alert')['default']
+    IconLucideUser: typeof import('~icons/lucide/user')['default']
     IconLucideUsers: typeof import('~icons/lucide/users')['default']
     IconLucideVerified: typeof import('~icons/lucide/verified')['default']
     IconLucideX: typeof import('~icons/lucide/x')['default']

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

@@ -14,6 +14,7 @@
         }"
       >
         <div class="flex">
+          <!-- Instance Switcher (Desktop/On-prem) -->
           <tippy
             v-if="platform.instance?.instanceSwitchingEnabled"
             interactive
@@ -43,6 +44,42 @@
               </div>
             </template>
           </tippy>
+
+          <router-link
+            v-else-if="showOrgLogo"
+            to="/"
+            class="flex items-center gap-2 px-2 py-1 rounded hover:bg-primaryDark focus-visible:bg-primaryDark focus-visible:outline-none transition-colors"
+          >
+            <div
+              v-if="orgInfo?.logo"
+              class="h-6 w-6 rounded overflow-hidden flex-shrink-0"
+            >
+              <img
+                :src="sanitizeLogoUrl(orgInfo.logo)"
+                :alt="orgInfo.name || t('app.name')"
+                class="h-full w-full object-cover"
+              />
+            </div>
+            <div
+              v-else-if="orgInfo?.name"
+              class="h-6 w-6 rounded flex items-center justify-center text-xs font-semibold flex-shrink-0"
+              :class="getOrgColor(orgInfo.name)"
+              aria-hidden="true"
+            >
+              {{ getOrgInitials(orgInfo.name) }}
+            </div>
+            <div class="flex items-center gap-1.5 min-w-0">
+              <span class="font-bold tracking-wide text-secondaryDark truncate">
+                {{ orgInfo?.name || t("app.name") }}
+              </span>
+              <span
+                class="text-secondary text-xs hidden sm:inline flex-shrink-0"
+              >
+                • {{ t("app.powered_by") }}
+              </span>
+            </div>
+          </router-link>
+
           <HoppButtonSecondary
             v-else
             class="!font-bold uppercase tracking-wide !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark"
@@ -354,6 +391,11 @@ import { getKernelMode } from "@hoppscotch/kernel"
 import { useI18n } from "@composables/i18n"
 import { useReadonlyStream } from "@composables/stream"
 import { defineActionHandler, invokeAction } from "@helpers/actions"
+import {
+  getOrgInitials,
+  getOrgColor,
+  sanitizeLogoUrl,
+} from "@helpers/utils/organization"
 import { breakpointsTailwind, useBreakpoints, useNetwork } from "@vueuse/core"
 import { useService } from "dioc/vue"
 import * as TE from "fp-ts/TaskEither"
@@ -390,6 +432,7 @@ const instanceSwitcherRef =
   kernelMode === "desktop" ? ref<any | null>(null) : ref(null)
 
 const isUserAdmin = ref(false)
+const orgInfo = ref<{ name?: string; logo?: string | null } | null>(null)
 
 /**
  * Feature flag to enable the workspace selector login conversion
@@ -398,18 +441,23 @@ const workspaceSelectorFlagEnabled = computed(
   () => !!platform.platformFeatureFlags.workspaceSwitcherLogin?.value
 )
 
-/**
- * Show the dashboard link if the user is not on the default cloud instance and is an admin
- */
+const showOrgLogo = computed(() => {
+  return platform.organization?.isDefaultCloudInstance === false
+})
+
 onMounted(async () => {
   const { organization } = platform
 
   if (!organization || organization.isDefaultCloudInstance) return
 
-  const orgInfo = await organization.getOrgInfo()
+  const fetchedOrgInfo = await organization.getOrgInfo()
 
-  if (orgInfo) {
-    isUserAdmin.value = !!orgInfo.isAdmin
+  if (fetchedOrgInfo) {
+    isUserAdmin.value = !!fetchedOrgInfo.isAdmin
+    orgInfo.value = {
+      name: fetchedOrgInfo.name,
+      logo: fetchedOrgInfo.logo || null,
+    }
   }
 })