update help button in topbar integrated mode

- fix positioning of help
- remove label
- increase icon size

src/components/helpcenter/HelpCenterPopups.vue

@@ -9,9 +9,10 @@
           triggerLocation === 'sidebar' && sidebarLocation === 'left',
         'sidebar-right':
           triggerLocation === 'sidebar' && sidebarLocation === 'right',
-        'topbar-right': triggerLocation === 'topbar',
+        'topbar-trigger': triggerLocation === 'topbar',
         'small-sidebar': isSmall
       }"
+      :style="popupStyles"
     >
       <HelpCenterMenuContent @close="closeHelpCenter" />
     </div>
@@ -51,6 +52,9 @@
 </template>
 
 <script setup lang="ts">
+import type { CSSProperties } from 'vue'
+import { computed } from 'vue'
+
 import { useHelpCenter } from '@/composables/useHelpCenter'
 import ReleaseNotificationToast from '@/platform/updates/components/ReleaseNotificationToast.vue'
 import WhatsNewPopup from '@/platform/updates/components/WhatsNewPopup.vue'
@@ -64,10 +68,26 @@ const { isSmall = false } = defineProps<{
 const {
   isHelpCenterVisible,
   triggerLocation,
+  triggerElement,
   sidebarLocation,
   closeHelpCenter,
   handleWhatsNewDismissed
 } = useHelpCenter()
+
+const popupStyles = computed<CSSProperties | undefined>(() => {
+  if (
+    !isHelpCenterVisible.value ||
+    triggerLocation.value !== 'topbar' ||
+    !triggerElement.value
+  ) {
+    return undefined
+  }
+  const rect = triggerElement.value.getBoundingClientRect()
+  return {
+    top: `${rect.bottom}px`,
+    right: `${window.innerWidth - rect.right}px`
+  }
+})
 </script>
 
 <style scoped>
@@ -101,9 +121,7 @@ const {
   right: 1rem;
 }
 
-.help-center-popup.topbar-right {
-  top: 2rem;
-  right: 1rem;
+.help-center-popup.topbar-trigger {
   bottom: auto;
   animation: slideInDown 0.2s ease-out;
 }

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/TopMenuHelpButton.vue

@@ -1,11 +1,10 @@
 <template>
   <Button
-    class="comfy-help-center-btn relative text-base-foreground"
+    class="comfy-help-center-btn relative text-base-foreground text-lg"
     variant="textonly"
-    @click="toggleHelpCenter"
+    @click="toggleHelpCenter($event.currentTarget)"
   >
-    <div class="not-md:hidden">{{ $t('menu.helpAndFeedback') }}</div>
-    <i class="icon-[lucide--circle-help] ml-0.5" />
+    <i class="icon-[lucide--circle-help]" />
     <span
       v-if="shouldShowRedDot"
       class="absolute top-[7px] right-[7px] size-1.5 rounded-full bg-[#ff3b30]"

src/composables/useHelpCenter.ts

@@ -16,8 +16,11 @@ export function useHelpCenter(
   const settingStore = useSettingStore()
   const releaseStore = useReleaseStore()
   const helpCenterStore = useHelpCenterStore()
-  const { isVisible: isHelpCenterVisible, triggerLocation } =
-    storeToRefs(helpCenterStore)
+  const {
+    isVisible: isHelpCenterVisible,
+    triggerLocation,
+    triggerElement
+  } = storeToRefs(helpCenterStore)
   const { shouldShowRedDot: showReleaseRedDot } = storeToRefs(releaseStore)
 
   const conflictDetection = useConflictDetection()
@@ -40,11 +43,11 @@ export function useHelpCenter(
   /**
    * Toggle Help Center and track UI button click.
    */
-  const toggleHelpCenter = () => {
+  const toggleHelpCenter = (element?: HTMLElement | null) => {
     useTelemetry()?.trackUiButtonClicked({
       button_id: `${triggerFrom}_help_center_toggled`
     })
-    helpCenterStore.toggle(triggerFrom)
+    helpCenterStore.toggle(triggerFrom, element)
   }
 
   const closeHelpCenter = () => {
@@ -91,6 +94,7 @@ export function useHelpCenter(
   return {
     isHelpCenterVisible,
     triggerLocation,
+    triggerElement,
     shouldShowRedDot,
     sidebarLocation,
     toggleHelpCenter,

src/locales/ar/main.json

@@ -1527,7 +1527,6 @@
     "disabledTooltip": "لن يتم وضع سير العمل في قائمة الانتظار تلقائيًا",
     "execute": "تنفيذ",
     "help": "مساعدة",
-    "helpAndFeedback": "المساعدة والتعليقات",
     "hideMenu": "إخفاء القائمة",
     "instant": "فوري",
     "instantTooltip": "سيتم وضع سير العمل في قائمة الانتظار فور انتهاء التوليد",

src/locales/en/main.json

@@ -893,7 +893,6 @@
     "customNodesManager": "Custom Nodes Manager",
     "settings": "Settings",
     "help": "Help",
-    "helpAndFeedback": "Help & Feedback",
     "queue": "Queue Panel"
   },
   "tabMenu": {

src/locales/es/main.json

@@ -1527,7 +1527,6 @@
     "disabledTooltip": "El flujo de trabajo no se encolará automáticamente",
     "execute": "Ejecutar",
     "help": "Ayuda",
-    "helpAndFeedback": "Ayuda y comentarios",
     "hideMenu": "Ocultar menú",
     "instant": "Instantáneo",
     "instantTooltip": "El flujo de trabajo se encolará instantáneamente después de que finalice una generación",

src/locales/fa/main.json

@@ -1527,7 +1527,6 @@
     "disabledTooltip": "workflow به صورت خودکار در صف قرار نمی‌گیرد",
     "execute": "اجرا",
     "help": "راهنما",
-    "helpAndFeedback": "راهنما و بازخورد",
     "hideMenu": "مخفی کردن منو",
     "instant": "فوری",
     "instantTooltip": "workflow بلافاصله پس از پایان تولید در صف قرار می‌گیرد",

src/locales/fr/main.json

@@ -1527,7 +1527,6 @@
     "disabledTooltip": "Le flux de travail ne sera pas mis en file d'attente automatiquement",
     "execute": "Exécuter",
     "help": "Aide",
-    "helpAndFeedback": "Aide et commentaires",
     "hideMenu": "Masquer le menu",
     "instant": "Instantané",
     "instantTooltip": "Le flux de travail sera mis en file d'attente immédiatement après la fin d'une génération",

src/locales/ja/main.json

@@ -1527,7 +1527,6 @@
     "disabledTooltip": "ワークフローは自動的にキューに追加されません",
     "execute": "実行",
     "help": "ヘルプ",
-    "helpAndFeedback": "ヘルプとフィードバック",
     "hideMenu": "メニューを隠す",
     "instant": "即時",
     "instantTooltip": "生成完了後すぐにキューに追加",

src/locales/ko/main.json

@@ -1527,7 +1527,6 @@
     "disabledTooltip": "워크플로 작업을 자동으로 실행 대기열에 추가하지 않습니다.",
     "execute": "실행",
     "help": "도움말",
-    "helpAndFeedback": "도움말 및 피드백",
     "hideMenu": "메뉴 숨기기",
     "instant": "즉시",
     "instantTooltip": "워크플로 실행이 완료되면 즉시 실행 대기열에 추가합니다.",

src/locales/pt-BR/main.json

@@ -1527,7 +1527,6 @@
     "disabledTooltip": "O fluxo de trabalho não será enfileirado automaticamente",
     "execute": "Executar",
     "help": "Ajuda",
-    "helpAndFeedback": "Ajuda e feedback",
     "hideMenu": "Ocultar menu",
     "instant": "Instantâneo",
     "instantTooltip": "O fluxo de trabalho será enfileirado instantaneamente após uma geração terminar",

src/locales/ru/main.json

@@ -1527,7 +1527,6 @@
     "disabledTooltip": "Рабочий процесс не будет автоматически помещён в очередь",
     "execute": "Выполнить",
     "help": "Справка",
-    "helpAndFeedback": "Помощь и обратная связь",
     "hideMenu": "Скрыть меню",
     "instant": "Мгновенно",
     "instantTooltip": "Рабочий процесс будет помещён в очередь сразу же после завершения генерации",

src/locales/tr/main.json

@@ -1527,7 +1527,6 @@
     "disabledTooltip": "İş akışı otomatik olarak kuyruğa alınmayacak",
     "execute": "Yürüt",
     "help": "Yardım",
-    "helpAndFeedback": "Yardım ve Geri Bildirim",
     "hideMenu": "Menüyü Gizle",
     "instant": "Anında",
     "instantTooltip": "İş akışı, bir oluşturma işlemi bittikten sonra anında kuyruğa alınacak",

src/locales/zh-TW/main.json

@@ -1527,7 +1527,6 @@
     "disabledTooltip": "工作流程將不會自動排入佇列",
     "execute": "執行",
     "help": "說明",
-    "helpAndFeedback": "說明與回饋",
     "hideMenu": "隱藏選單",
     "instant": "立即",
     "instantTooltip": "每次產生完成後，工作流程會立即排入佇列",

src/locales/zh/main.json

@@ -1527,7 +1527,6 @@
     "disabledTooltip": "工作流将不会自动执行",
     "execute": "执行",
     "help": "说明",
-    "helpAndFeedback": "帮助与反馈",
     "hideMenu": "隐藏菜单",
     "instant": "实时",
     "instantTooltip": "工作流将会在生成完成后立即执行",

src/stores/helpCenterStore.ts

@@ -1,21 +1,30 @@
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
+import { ref, shallowRef } from 'vue'
 
 export type HelpCenterTriggerLocation = 'sidebar' | 'topbar'
 
 export const useHelpCenterStore = defineStore('helpCenter', () => {
   const isVisible = ref(false)
   const triggerLocation = ref<HelpCenterTriggerLocation>('sidebar')
+  const triggerElement = shallowRef<HTMLElement | null>(null)
 
-  const toggle = (location: HelpCenterTriggerLocation = 'sidebar') => {
+  const toggle = (
+    location: HelpCenterTriggerLocation = 'sidebar',
+    element?: HTMLElement | null
+  ) => {
     if (!isVisible.value) {
       triggerLocation.value = location
+      triggerElement.value = element ?? null
     }
     isVisible.value = !isVisible.value
   }
 
-  const show = (location: HelpCenterTriggerLocation = 'sidebar') => {
+  const show = (
+    location: HelpCenterTriggerLocation = 'sidebar',
+    element?: HTMLElement | null
+  ) => {
     triggerLocation.value = location
+    triggerElement.value = element ?? null
     isVisible.value = true
   }
 
@@ -26,6 +35,7 @@ export const useHelpCenterStore = defineStore('helpCenter', () => {
   return {
     isVisible,
     triggerLocation,
+    triggerElement,
     toggle,
     show,
     hide