Merge branch 'main' into webcam-capture

eslint.config.ts

@@ -240,6 +240,20 @@ export default defineConfig([
       ]
     }
   },
+  {
+    files: ['**/*.test.ts'],
+    rules: {
+      'no-restricted-properties': [
+        'error',
+        {
+          object: 'vi',
+          property: 'doMock',
+          message:
+            'Use vi.mock() with vi.hoisted() instead of vi.doMock(). See docs/testing/vitest-patterns.md'
+        }
+      ]
+    }
+  },
   {
     files: ['scripts/**/*.js'],
     languageOptions: {

src/components/topbar/CurrentUserButton.test.ts

@@ -25,7 +25,24 @@ vi.mock('firebase/auth', () => ({
 }))
 
 // Mock pinia
-vi.mock('pinia')
+vi.mock('pinia', () => ({
+  storeToRefs: vi.fn((store) => store)
+}))
+
+// Mock the useFeatureFlags composable
+vi.mock('@/composables/useFeatureFlags', () => ({
+  useFeatureFlags: vi.fn(() => ({
+    flags: { teamWorkspacesEnabled: false }
+  }))
+}))
+
+// Mock the useTeamWorkspaceStore
+vi.mock('@/platform/workspace/stores/teamWorkspaceStore', () => ({
+  useTeamWorkspaceStore: vi.fn(() => ({
+    workspaceName: { value: '' },
+    initState: { value: 'idle' }
+  }))
+}))
 
 // Mock the useCurrentUser composable
 vi.mock('@/composables/auth/useCurrentUser', () => ({

src/components/topbar/CurrentUserButton.vue

@@ -12,12 +12,18 @@
         :class="
           cn(
             'flex items-center gap-1 rounded-full hover:bg-interface-button-hover-surface justify-center',
-            compact && 'size-full aspect-square'
+            compact && 'size-full '
           )
         "
       >
+        <Skeleton
+          v-if="showWorkspaceSkeleton"
+          shape="circle"
+          width="32px"
+          height="32px"
+        />
         <WorkspaceProfilePic
-          v-if="showWorkspaceIcon"
+          v-else-if="showWorkspaceIcon"
           :workspace-name="workspaceName"
           :class="compact && 'size-full'"
         />
@@ -40,13 +46,16 @@
         }
       }"
     >
-      <!-- Workspace mode: workspace-aware popover -->
+      <!-- Workspace mode: workspace-aware popover (only when ready) -->
       <CurrentUserPopoverWorkspace
-        v-if="teamWorkspacesEnabled"
+        v-if="teamWorkspacesEnabled && initState === 'ready'"
         @close="closePopover"
       />
       <!-- Legacy mode: original popover -->
-      <CurrentUserPopover v-else @close="closePopover" />
+      <CurrentUserPopover
+        v-else-if="!teamWorkspacesEnabled"
+        @close="closePopover"
+      />
     </Popover>
   </div>
 </template>
@@ -54,6 +63,7 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 import Popover from 'primevue/popover'
+import Skeleton from 'primevue/skeleton'
 import { computed, defineAsyncComponent, ref } from 'vue'
 
 import UserAvatar from '@/components/common/UserAvatar.vue'
@@ -85,12 +95,20 @@ const photoURL = computed<string | undefined>(
   () => userPhotoUrl.value ?? undefined
 )
 
-const showWorkspaceIcon = computed(() => isCloud && teamWorkspacesEnabled.value)
+const { workspaceName: teamWorkspaceName, initState } = storeToRefs(
+  useTeamWorkspaceStore()
+)
+
+const showWorkspaceSkeleton = computed(
+  () => isCloud && teamWorkspacesEnabled.value && initState.value === 'loading'
+)
+const showWorkspaceIcon = computed(
+  () => isCloud && teamWorkspacesEnabled.value && initState.value === 'ready'
+)
 
 const workspaceName = computed(() => {
   if (!showWorkspaceIcon.value) return ''
-  const { workspaceName } = storeToRefs(useTeamWorkspaceStore())
-  return workspaceName.value
+  return teamWorkspaceName.value
 })
 
 const popover = ref<InstanceType<typeof Popover> | null>(null)

src/components/topbar/CurrentUserPopoverWorkspace.vue

@@ -217,6 +217,7 @@ import { useDialogService } from '@/services/dialogService'
 
 const workspaceStore = useTeamWorkspaceStore()
 const {
+  initState,
   workspaceName,
   isInPersonalWorkspace: isPersonalWorkspace,
   isWorkspaceSubscribed
@@ -234,15 +235,20 @@ const { userDisplayName, userEmail, userPhotoUrl, handleSignOut } =
   useCurrentUser()
 const authActions = useFirebaseAuthActions()
 const dialogService = useDialogService()
-const { isActiveSubscription } = useSubscription()
+const { isActiveSubscription, subscriptionStatus } = useSubscription()
 const { totalCredits, isLoadingBalance } = useSubscriptionCredits()
 const subscriptionDialog = useSubscriptionDialog()
 
 const displayedCredits = computed(() => {
-  const isSubscribed = isPersonalWorkspace.value
-    ? isActiveSubscription.value
-    : isWorkspaceSubscribed.value
-  return isSubscribed ? totalCredits.value : '0'
+  if (initState.value !== 'ready') return ''
+  // Only personal workspaces have subscription status from useSubscription()
+  // Team workspaces don't have backend subscription data yet
+  if (isPersonalWorkspace.value) {
+    // Wait for subscription status to load
+    if (subscriptionStatus.value === null) return ''
+    return isActiveSubscription.value ? totalCredits.value : '0'
+  }
+  return '0'
 })
 
 const canUpgrade = computed(() => {

src/stores/firebaseAuthStore.test.ts

@@ -82,6 +82,21 @@ vi.mock('@/stores/toastStore', () => ({
 // Mock useDialogService
 vi.mock('@/services/dialogService')
 
+const mockDistributionTypes = vi.hoisted(() => ({
+  isCloud: false,
+  isDesktop: false
+}))
+
+vi.mock('@/platform/distribution/types', () => mockDistributionTypes)
+
+const mockApiKeyStore = vi.hoisted(() => ({
+  getAuthHeader: vi.fn().mockReturnValue(null)
+}))
+
+vi.mock('@/stores/apiKeyAuthStore', () => ({
+  useApiKeyAuthStore: () => mockApiKeyStore
+}))
+
 describe('useFirebaseAuthStore', () => {
   let store: ReturnType<typeof useFirebaseAuthStore>
   let authStateCallback: (user: any) => void
@@ -147,12 +162,9 @@ describe('useFirebaseAuthStore', () => {
   })
 
   describe('token refresh events', () => {
-    beforeEach(async () => {
-      vi.resetModules()
-      vi.doMock('@/platform/distribution/types', () => ({
-        isCloud: true,
-        isDesktop: true
-      }))
+    beforeEach(() => {
+      mockDistributionTypes.isCloud = true
+      mockDistributionTypes.isDesktop = true
 
       vi.mocked(firebaseAuth.onIdTokenChanged).mockImplementation(
         (_auth, callback) => {
@@ -164,8 +176,7 @@ describe('useFirebaseAuthStore', () => {
       vi.mocked(vuefire.useFirebaseAuth).mockReturnValue(mockAuth as any)
 
       setActivePinia(createPinia())
-      const storeModule = await import('@/stores/firebaseAuthStore')
-      store = storeModule.useFirebaseAuthStore()
+      store = useFirebaseAuthStore()
     })
 
     it("should not increment tokenRefreshTrigger on the user's first ID token event", () => {
@@ -442,13 +453,8 @@ describe('useFirebaseAuthStore', () => {
       // This test reproduces the issue where getAuthHeader fails due to network errors
       // when Firebase Auth tries to refresh tokens offline
 
-      // Mock useApiKeyAuthStore to return null (no API key fallback)
-      const mockApiKeyStore = {
-        getAuthHeader: vi.fn().mockReturnValue(null)
-      }
-      vi.doMock('@/stores/apiKeyAuthStore', () => ({
-        useApiKeyAuthStore: () => mockApiKeyStore
-      }))
+      // Configure mockApiKeyStore to return null (no API key fallback)
+      mockApiKeyStore.getAuthHeader.mockReturnValue(null)
 
       // Setup user with network error on token refresh
       mockUser.getIdToken.mockReset()

src/workbench/extensions/manager/utils/versionUtil.test.ts

@@ -1,15 +1,16 @@
-import { describe, expect, it, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import {
   checkVersionCompatibility,
   getFrontendVersion
 } from '@/workbench/extensions/manager/utils/versionUtil'
 
-// Mock config module
+const mockConfig = vi.hoisted((): { app_version: string | undefined } => ({
+  app_version: '1.24.0-1'
+}))
+
 vi.mock('@/config', () => ({
-  default: {
-    app_version: '1.24.0-1'
-  }
+  default: mockConfig
 }))
 
 describe('versionUtil', () => {
@@ -266,79 +267,40 @@ describe('versionUtil', () => {
   })
 
   describe('getFrontendVersion', () => {
+    let originalEnv: string | undefined
+
+    beforeEach(() => {
+      originalEnv = import.meta.env.VITE_APP_VERSION
+      mockConfig.app_version = '1.24.0-1'
+    })
+
+    afterEach(() => {
+      if (originalEnv !== undefined) {
+        import.meta.env.VITE_APP_VERSION = originalEnv
+      } else {
+        delete import.meta.env.VITE_APP_VERSION
+      }
+    })
+
     it('should return app_version from config when available', () => {
       const version = getFrontendVersion()
       expect(version).toBe('1.24.0-1')
     })
 
-    it('should fallback to VITE_APP_VERSION when app_version is not available', async () => {
-      // Save original environment
-      const originalEnv = import.meta.env.VITE_APP_VERSION
-
-      // Mock config without app_version
-      vi.doMock('@/config', () => ({
-        default: {}
-      }))
-
-      // Set VITE_APP_VERSION
+    it('should fallback to VITE_APP_VERSION when app_version is not available', () => {
+      mockConfig.app_version = undefined
       import.meta.env.VITE_APP_VERSION = '2.0.0'
 
-      // Clear module cache to force re-import
-      vi.resetModules()
-
-      // Import fresh module
-      const versionUtil =
-        await import('@/workbench/extensions/manager/utils/versionUtil')
-
-      const version = versionUtil.getFrontendVersion()
+      const version = getFrontendVersion()
       expect(version).toBe('2.0.0')
-
-      // Restore original env
-      import.meta.env.VITE_APP_VERSION = originalEnv
-
-      // Reset mocks for next test
-      vi.resetModules()
-      vi.doMock('@/config', () => ({
-        default: {
-          app_version: '1.24.0-1'
-        }
-      }))
     })
 
-    it('should return undefined when no version is available', async () => {
-      // Save original environment
-      const originalEnv = import.meta.env.VITE_APP_VERSION
-
-      // Mock config without app_version
-      vi.doMock('@/config', () => ({
-        default: {}
-      }))
-
-      // Clear VITE_APP_VERSION
+    it('should return undefined when no version is available', () => {
+      mockConfig.app_version = undefined
       delete import.meta.env.VITE_APP_VERSION
 
-      // Clear module cache to force re-import
-      vi.resetModules()
-
-      // Import fresh module
-      const versionUtil =
-        await import('@/workbench/extensions/manager/utils/versionUtil')
-
-      const version = versionUtil.getFrontendVersion()
+      const version = getFrontendVersion()
       expect(version).toBeUndefined()
-
-      // Restore original env
-      if (originalEnv !== undefined) {
-        import.meta.env.VITE_APP_VERSION = originalEnv
-      }
-
-      // Reset mocks for next test
-      vi.resetModules()
-      vi.doMock('@/config', () => ({
-        default: {
-          app_version: '1.24.0-1'
-        }
-      }))
     })
   })
 })