feat: Integrated tab UI updates (#8516)

## Summary
Next iteration of the integrated tab/top menu

## Changes
- **What**:  
- make integrated default, rename old to legacy
- move feedback to integrated
- fix user icon shapes
- remove comfy cloud text in top bar, move to canvas stats
- add chevron to C logo menu
- move help back to sidebar
   - remove now unused help top positioning code

## Screenshots (if applicable)
<img width="428" height="148" alt="image"
src="https://github.com/user-attachments/assets/725025b7-4982-4f61-be11-8aabb0a1faff"
/>
<img width="264" height="187" alt="image"
src="https://github.com/user-attachments/assets/91fa5e92-df08-4467-9bc5-50a614d9b8aa"
/>
<img width="1169" height="220" alt="image"
src="https://github.com/user-attachments/assets/68c81bea-0cff-48df-8303-a6231a1d2fc4"
/>
<img width="242" height="207" alt="image"
src="https://github.com/user-attachments/assets/5a10f40e-83ae-44c3-9434-3dbe87ba30e2"
/>
<img width="302" height="222" alt="image"
src="https://github.com/user-attachments/assets/27fcc638-5fff-4302-9a1f-066227aafd86"
/>

---------

Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: github-actions <github-actions@github.com>

src/components/TopMenuSection.test.ts

@@ -166,13 +166,22 @@ describe('TopMenuSection', () => {
   })
 
   describe('authentication state', () => {
+    function createLegacyTabBarWrapper() {
+      const pinia = createTestingPinia({ createSpy: vi.fn })
+      const settingStore = useSettingStore(pinia)
+      vi.mocked(settingStore.get).mockImplementation((key) =>
+        key === 'Comfy.UI.TabBarLayout' ? 'Legacy' : undefined
+      )
+      return createWrapper({ pinia })
+    }
+
     describe('when user is logged in', () => {
       beforeEach(() => {
         mockData.isLoggedIn = true
       })
 
       it('should display CurrentUserButton and not display LoginButton', () => {
-        const wrapper = createWrapper()
+        const wrapper = createLegacyTabBarWrapper()
         expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(true)
         expect(wrapper.findComponent(LoginButton).exists()).toBe(false)
       })
@@ -186,7 +195,7 @@ describe('TopMenuSection', () => {
       describe('on desktop platform', () => {
         it('should display LoginButton and not display CurrentUserButton', () => {
           mockData.isDesktop = true
-          const wrapper = createWrapper()
+          const wrapper = createLegacyTabBarWrapper()
           expect(wrapper.findComponent(LoginButton).exists()).toBe(true)
           expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(false)
         })
@@ -194,7 +203,7 @@ describe('TopMenuSection', () => {
 
       describe('on web platform', () => {
         it('should not display CurrentUserButton and not display LoginButton', () => {
-          const wrapper = createWrapper()
+          const wrapper = createLegacyTabBarWrapper()
           expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(false)
           expect(wrapper.findComponent(LoginButton).exists()).toBe(false)
         })

src/components/TopMenuSection.vue

@@ -183,7 +183,7 @@ const isActionbarFloating = computed(
   () => isActionbarEnabled.value && !isActionbarDocked.value
 )
 const isIntegratedTabBar = computed(
-  () => settingStore.get('Comfy.UI.TabBarLayout') === 'Integrated'
+  () => settingStore.get('Comfy.UI.TabBarLayout') !== 'Legacy'
 )
 const { isQueuePanelV2Enabled, isRunProgressBarEnabled } =
   useQueueFeatureFlags()

src/components/common/UserAvatar.vue

@@ -1,6 +1,6 @@
 <template>
   <Avatar
-    class="bg-interface-panel-selected-surface"
+    class="aspect-square bg-interface-panel-selected-surface"
     :image="photoUrl ?? undefined"
     :icon="hasAvatar ? undefined : 'icon-[lucide--user]'"
     :pt:icon:class="{ 'size-4': !hasAvatar }"

src/components/helpcenter/HelpCenterPopups.vue

@@ -5,11 +5,8 @@
       v-if="isHelpCenterVisible"
       class="help-center-popup"
       :class="{
-        'sidebar-left':
-          triggerLocation === 'sidebar' && sidebarLocation === 'left',
-        'sidebar-right':
-          triggerLocation === 'sidebar' && sidebarLocation === 'right',
-        'topbar-right': triggerLocation === 'topbar',
+        'sidebar-left': sidebarLocation === 'left',
+        'sidebar-right': sidebarLocation === 'right',
         'small-sidebar': isSmall
       }"
     >
@@ -63,7 +60,6 @@ const { isSmall = false } = defineProps<{
 
 const {
   isHelpCenterVisible,
-  triggerLocation,
   sidebarLocation,
   closeHelpCenter,
   handleWhatsNewDismissed
@@ -101,25 +97,6 @@ const {
   right: 1rem;
 }
 
-.help-center-popup.topbar-right {
-  top: 2rem;
-  right: 1rem;
-  bottom: auto;
-  animation: slideInDown 0.2s ease-out;
-}
-
-@keyframes slideInDown {
-  from {
-    opacity: 0;
-    transform: translateY(-20px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 @keyframes slideInUp {
   from {
     opacity: 0;

src/components/sidebar/ComfyMenuButton.vue

@@ -11,12 +11,13 @@
     }"
     @click="onLogoMenuClick($event)"
   >
-    <div class="flex size-8 items-center justify-center rounded-lg bg-black">
+    <div class="flex items-center gap-0.5">
       <ComfyLogo
         alt="ComfyUI Logo"
-        class="comfyui-logo h-[18px] w-[18px] text-white"
+        class="comfyui-logo h-[18px] w-[18px]"
         mode="fill"
       />
+      <i class="icon-[lucide--chevron-down] size-3 text-muted-foreground" />
     </div>
   </div>
 

src/components/sidebar/SideToolbar.vue

@@ -41,7 +41,7 @@
           v-if="userStore.isMultiUserServer"
           :is-small="isSmall"
         />
-        <SidebarHelpCenterIcon v-if="!isIntegratedTabBar" :is-small="isSmall" />
+        <SidebarHelpCenterIcon :is-small="isSmall" />
         <SidebarBottomPanelToggleButton v-if="!isCloud" :is-small="isSmall" />
         <SidebarShortcutsToggleButton :is-small="isSmall" />
         <SidebarSettingsButton :is-small="isSmall" />
@@ -95,9 +95,6 @@ const sidebarLocation = computed<'left' | 'right'>(() =>
   settingStore.get('Comfy.Sidebar.Location')
 )
 const sidebarStyle = computed(() => settingStore.get('Comfy.Sidebar.Style'))
-const isIntegratedTabBar = computed(
-  () => settingStore.get('Comfy.UI.TabBarLayout') === 'Integrated'
-)
 const isConnected = computed(
   () =>
     selectedTab.value ||

src/components/sidebar/SidebarHelpCenterIcon.vue

@@ -7,7 +7,7 @@
     :icon-badge="shouldShowRedDot ? '•' : ''"
     badge-class="-top-1 -right-1 min-w-2 w-2 h-2 p-0 rounded-full text-[0px] bg-[#ff3b30]"
     :is-small="isSmall"
-    @click="toggleHelpCenter"
+    @click="toggleHelpCenter()"
   />
 </template>
 

src/components/topbar/CurrentUserButton.vue

@@ -30,7 +30,7 @@
         <UserAvatar
           v-else
           :photo-url="photoURL"
-          :class="compact && 'size-full'"
+          :class="compact && 'h-full w-auto'"
         />
 
         <i v-if="showArrow" class="icon-[lucide--chevron-down] size-4 px-1" />

src/components/topbar/TopMenuHelpButton.vue

@@ -1,21 +0,0 @@
-<template>
-  <Button
-    class="comfy-help-center-btn relative text-base-foreground"
-    variant="textonly"
-    @click="toggleHelpCenter"
-  >
-    <div class="not-md:hidden">{{ $t('menu.helpAndFeedback') }}</div>
-    <i class="ml-0.5 icon-[lucide--circle-help]" />
-    <span
-      v-if="shouldShowRedDot"
-      class="absolute top-[7px] right-[7px] size-1.5 rounded-full bg-[#ff3b30]"
-    />
-  </Button>
-</template>
-
-<script setup lang="ts">
-import Button from '@/components/ui/button/Button.vue'
-import { useHelpCenter } from '@/composables/useHelpCenter'
-
-const { shouldShowRedDot, toggleHelpCenter } = useHelpCenter('topbar')
-</script>

src/components/topbar/WorkflowTabs.vue

@@ -83,13 +83,18 @@
       v-if="isIntegratedTabBar"
       class="ml-auto flex shrink-0 items-center gap-2 px-2"
     >
-      <TopMenuHelpButton />
-      <CurrentUserButton
-        v-if="isLoggedIn"
-        :show-arrow="false"
-        compact
-        class="grid w-10 shrink-0 p-1"
-      />
+      <Button
+        v-if="isCloud || isNightly"
+        v-tooltip="{ value: $t('actionbar.feedbackTooltip'), showDelay: 300 }"
+        variant="muted-textonly"
+        size="icon"
+        class="shrink-0 text-base-foreground"
+        :aria-label="$t('actionbar.feedback')"
+        @click="openFeedback"
+      >
+        <i class="icon-[lucide--message-square-text]" />
+      </Button>
+      <CurrentUserButton v-if="showCurrentUser" compact class="shrink-0 p-1" />
       <LoginButton v-else-if="isDesktop" class="p-1" />
     </div>
     <div v-if="isDesktop" class="window-actions-spacer app-drag shrink-0" />
@@ -102,21 +107,20 @@ import ScrollPanel from 'primevue/scrollpanel'
 import SelectButton from 'primevue/selectbutton'
 import { computed, nextTick, onUpdated, ref, watch } from 'vue'
 import type { WatchStopHandle } from 'vue'
-
 import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
 import LoginButton from '@/components/topbar/LoginButton.vue'
-import TopMenuHelpButton from '@/components/topbar/TopMenuHelpButton.vue'
 import WorkflowTab from '@/components/topbar/WorkflowTab.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useOverflowObserver } from '@/composables/element/useOverflowObserver'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { buildFeedbackUrl } from '@/platform/support/config'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
-import { isDesktop } from '@/platform/distribution/types'
+import { isCloud, isDesktop, isNightly } from '@/platform/distribution/types'
 import { whileMouseDown } from '@/utils/mouseDownUtil'
 
 import WorkflowOverflowMenu from './WorkflowOverflowMenu.vue'
@@ -138,8 +142,14 @@ const commandStore = useCommandStore()
 const { isLoggedIn } = useCurrentUser()
 
 const isIntegratedTabBar = computed(
-  () => settingStore.get('Comfy.UI.TabBarLayout') === 'Integrated'
+  () => settingStore.get('Comfy.UI.TabBarLayout') !== 'Legacy'
 )
+const showCurrentUser = computed(() => isCloud || isLoggedIn.value)
+
+const feedbackUrl = buildFeedbackUrl()
+function openFeedback() {
+  window.open(feedbackUrl, '_blank', 'noopener,noreferrer')
+}
 
 const containerRef = ref<HTMLElement | null>(null)
 const showOverflowArrows = ref(false)