feat(workspace): enable local credit workspace switching FE-1584

src/components/topbar/CurrentUserButton.test.ts

@@ -217,4 +217,15 @@ describe('CurrentUserButton', () => {
     expect(screen.getByText('WorkspaceProfilePic')).toBeInTheDocument()
     expect(screen.queryByText('Avatar')).not.toBeInTheDocument()
   })
+
+  it('shows WorkspaceProfilePic for an active local team workspace', () => {
+    mockTeamWorkspaceStore.initState.value = 'ready'
+    mockTeamWorkspaceStore.isInPersonalWorkspace.value = false
+    mockTeamWorkspaceStore.workspaceName.value = 'My Team'
+
+    renderComponent()
+
+    expect(screen.getByText('WorkspaceProfilePic')).toBeInTheDocument()
+    expect(screen.queryByText('Avatar')).not.toBeInTheDocument()
+  })
 })

src/components/topbar/CurrentUserButton.vue

@@ -101,7 +101,7 @@ const showWorkspaceSkeleton = computed(
   () => isCloud && initState.value === 'loading'
 )
 const showWorkspaceIcon = computed(
-  () => isCloud && initState.value === 'ready' && !isInPersonalWorkspace.value
+  () => initState.value === 'ready' && !isInPersonalWorkspace.value
 )
 
 const workspaceName = computed(() => {

src/components/topbar/CurrentUserPopoverLegacy.test.ts

@@ -1,3 +1,4 @@
+import { createTestingPinia } from '@pinia/testing'
 import { render, screen } from '@testing-library/vue'
 import userEvent from '@testing-library/user-event'
 import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest'
@@ -79,6 +80,7 @@ vi.mock('@/composables/billing/useBillingContext', () => ({
     subscription: mockSubscription,
     balance: mockBalance,
     isLoading: mockIsLoading,
+    isTeamPlan: ref(false),
     fetchStatus: mockFetchStatus,
     fetchBalance: mockFetchBalance
   }))
@@ -164,7 +166,7 @@ describe('CurrentUserPopoverLegacy', () => {
     mockIsLoading.value = false
   })
 
-  function renderComponent() {
+  function renderComponent(teamWorkspaceState?: Record<string, unknown>) {
     const i18n = createI18n({
       legacy: false,
       locale: 'en',
@@ -175,7 +177,15 @@ describe('CurrentUserPopoverLegacy', () => {
 
     render(CurrentUserPopoverLegacy, {
       global: {
-        plugins: [i18n],
+        plugins: [
+          i18n,
+          createTestingPinia({
+            createSpy: vi.fn,
+            initialState: teamWorkspaceState
+              ? { teamWorkspace: teamWorkspaceState }
+              : {}
+          })
+        ],
         stubs: {
           Divider: true
         }
@@ -531,4 +541,85 @@ describe('CurrentUserPopoverLegacy', () => {
       expect(screen.getByTestId('logout-menu-item')).toBeInTheDocument()
     })
   })
+
+  describe('workspace selector (non-cloud)', () => {
+    const workspace = (overrides: Record<string, unknown>) => ({
+      isSubscribed: false,
+      subscriptionPlan: null,
+      subscriptionTier: null,
+      members: [],
+      pendingInvites: [],
+      ...overrides
+    })
+
+    const readyWorkspaceState = {
+      initState: 'ready',
+      activeWorkspaceId: 'ws-personal',
+      isFetchingWorkspaces: false,
+      workspaces: [
+        workspace({
+          id: 'ws-personal',
+          name: 'Personal Workspace',
+          type: 'personal',
+          role: 'owner'
+        }),
+        workspace({
+          id: 'ws-team',
+          name: 'Team Comfy',
+          type: 'team',
+          role: 'member'
+        })
+      ]
+    }
+
+    beforeEach(() => {
+      mockIsCloud.value = false
+    })
+
+    it('stays hidden while the workspace store is not hydrated', () => {
+      renderComponent()
+
+      expect(screen.queryByTestId('workspace-switcher-trigger')).toBeNull()
+    })
+
+    it.for(['ready', 'error'])(
+      'stays hidden when workspace initialization is %s without workspaces',
+      (initState) => {
+        renderComponent({
+          initState,
+          activeWorkspaceId: null,
+          isFetchingWorkspaces: false,
+          workspaces: []
+        })
+
+        expect(screen.queryByTestId('workspace-switcher-trigger')).toBeNull()
+      }
+    )
+
+    it('shows the trigger and opens the switcher once the store is ready', async () => {
+      const { user } = renderComponent(readyWorkspaceState)
+
+      const trigger = screen.getByTestId('workspace-switcher-trigger')
+      expect(trigger).toHaveAttribute('aria-expanded', 'false')
+      expect(screen.queryByTestId('workspace-switcher-panel')).toBeNull()
+
+      await user.click(trigger)
+
+      expect(screen.getByTestId('workspace-switcher-panel')).toBeInTheDocument()
+      expect(trigger).toHaveAttribute('aria-expanded', 'true')
+    })
+
+    it('keeps credits visible but hides top-up for workspace members', () => {
+      mockCanAccessSubscriptionFeatures.value = false
+      renderComponent({
+        ...readyWorkspaceState,
+        activeWorkspaceId: 'ws-team'
+      })
+
+      expect(screen.getByTestId('manage-plan-menu-item')).toHaveTextContent(
+        enMessages.credits.credits
+      )
+      expect(screen.queryByTestId('add-credits-button')).toBeNull()
+    })
+  })
 })

src/components/topbar/CurrentUserPopoverLegacy.vue

@@ -30,9 +30,39 @@
       </span>
     </div>
 
+    <div v-if="showWorkspaceSwitcher" class="relative">
+      <Button
+        v-tooltip="{ value: workspaceName, showDelay: 300 }"
+        variant="muted-textonly"
+        class="flex h-auto w-full items-center justify-between rounded-lg px-4 py-2 hover:bg-secondary-background-hover"
+        :aria-expanded="isWorkspaceSwitcherOpen"
+        data-testid="workspace-switcher-trigger"
+        @click="isWorkspaceSwitcherOpen = !isWorkspaceSwitcherOpen"
+      >
+        <div class="flex w-0 flex-1 items-center gap-2">
+          <WorkspaceProfilePic
+            class="size-6 shrink-0 text-xs"
+            :workspace-name="workspaceName"
+          />
+          <span class="truncate text-sm text-base-foreground">
+            {{ workspaceName }}
+          </span>
+        </div>
+        <i class="pi pi-chevron-down shrink-0 text-sm text-muted-foreground" />
+      </Button>
+
+      <div
+        v-if="isWorkspaceSwitcherOpen"
+        class="absolute top-0 right-full z-10 mr-4 rounded-lg border border-border-default bg-base-background shadow-[1px_1px_8px_0_rgba(0,0,0,0.4)]"
+        data-testid="workspace-switcher-panel"
+      >
+        <WorkspaceSwitcherPopover @select="isWorkspaceSwitcherOpen = false" />
+      </div>
+    </div>
+
     <!-- Credits Section -->
     <div
-      v-if="canAccessSubscriptionFeatures"
+      v-if="canAccessSubscriptionFeatures || showWorkspaceSwitcher"
       class="flex items-center gap-2 px-4 py-2"
     >
       <i class="icon-[lucide--component] text-sm text-credit" />
@@ -60,7 +90,7 @@
         {{ $t('subscription.upgradeToAddCredits') }}
       </Button>
       <Button
-        v-else
+        v-else-if="showAddCredits"
         variant="secondary"
         size="sm"
         class="text-base-foreground"
@@ -114,7 +144,7 @@
     </div>
 
     <div
-      v-if="canAccessSubscriptionFeatures"
+      v-if="canAccessSubscriptionFeatures || showWorkspaceSwitcher"
       class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
       data-testid="manage-plan-menu-item"
       @click="handleOpenPlanAndCreditsSettings"
@@ -160,9 +190,10 @@
 
 <script setup lang="ts">
 import { cn } from '@comfyorg/tailwind-utils'
+import { storeToRefs } from 'pinia'
 import Divider from 'primevue/divider'
 import Skeleton from 'primevue/skeleton'
-import { computed, onMounted } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { formatCreditsFromCents } from '@/base/credits/comfyCredits'
@@ -176,7 +207,11 @@ import { useSubscriptionDialog } from '@/platform/cloud/subscription/composables
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
 import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
+import WorkspaceProfilePic from '@/platform/workspace/components/WorkspaceProfilePic.vue'
+import WorkspaceSwitcherPopover from '@/platform/workspace/components/WorkspaceSwitcherPopover.vue'
 import { useWorkspaceTierLabel } from '@/platform/workspace/composables/useWorkspaceTierLabel'
+import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
 import { useDialogService } from '@/services/dialogService'
 
 const emit = defineEmits<{
@@ -203,6 +238,21 @@ const { formatTierName } = useWorkspaceTierLabel()
 const subscriptionDialog = useSubscriptionDialog()
 const { locale, t } = useI18n()
 
+const { initState, workspaces, workspaceName } = storeToRefs(
+  useTeamWorkspaceStore()
+)
+const isWorkspaceSwitcherOpen = ref(false)
+const showWorkspaceSwitcher = computed(
+  () => initState.value === 'ready' && workspaces.value.length > 0
+)
+
+const { permissions } = useWorkspaceUI()
+const showAddCredits = computed(() =>
+  showWorkspaceSwitcher.value
+    ? permissions.value.canTopUp
+    : canAccessSubscriptionFeatures.value
+)
+
 const subscriptionTierName = computed(() =>
   formatTierName(tier.value, subscription.value?.duration === 'ANNUAL')
 )