V3 UI - Tabs & Menu rework

[pythongosssss]

• Moves workflow tabs to the top level
  • Shrinks tabs down to a minumum size before overflowing
  • Add scroll arrows to make it more obvious when tabs dont fit
• Moves the app menu into the ComfyUI logo
  • On Desktop, right click context menu is the "native" context menu
• Moves the subgraph breadcrumbs next to the logo and always shows top level graph item
  • Progressively collapses the text/items at smaller window sizes
  • Add item specific commands to active workflow/subgraph (rename/duplicate/delete/etc)
• Optimized for Desktop with custom window chrome (Only Windows tested)
• Move "toggle bottom panel" button to left menu
• Move theme & settings to app menu
• Fix "clear" command deleting top level workflow when inside a subgraph
• Overflow scroll extension buttons

┆Issue is synchronized with this Notion page by Unito

[JorgeR81]

Looks really good !

I think it could replace some of my suggestions:

• [Feature Request]: option to show only icons on extension buttons ( in the Top Bar ) #1116
• [Feature Request]: [Style] Replace all GUI text with icons #3380
• [Style] Add guidelines for custom node's button style #3428
• [Feature Request]: User setting to display the subgraph tree in a dedicated Topbar #4204

[christian-byrne]

These are all changes which don't have to block merging, but we could consider adjusting in follow-up PRs:

High Priority

1. [src/components/breadcrumb/SubgraphBreadcrumb.vue] - Issue: Brittle overflow calculation with hardcoded values. Suggestion: Explore CSS-based solutions or dynamic constant derivation.

2. [src/components/breadcrumb/SubgraphBreadcrumbItem.vue] - Issue: Direct DOM manipulation for width. Suggestion: Use reactive Vue styling.

3. [src/components/topbar/CommandMenubar.vue:233-239] - Issue: Direct manipulation of undocumented PrimeVue internal property (.dirty). Suggestion: Avoid internal hacks; find public API or implement custom logic. HIGH PRIORITY FIX.

4. [src/components/topbar/CommandMenubar.vue] - Issue: Use of !important in CSS. Suggestion: Prefer more specific selectors or component props.

5. [src/components/topbar/WorkflowTabs.vue] - Issue: Inconsistent horizontal scroll amount calculation. Suggestion: Refine scrollAmount for consistent behavior across devices.

6. [src/components/breadcrumb/SubgraphBreadcrumbItem.vue:35] - Issue: Extreme z-index (10000). Suggestion: Use design system value (1100-1200).

Medium Priority

9. [src/components/breadcrumb/SubgraphBreadcrumb.vue:58-64] - Issue: Unsafe type casting for DOM access. Suggestion: Use proper TypeScript typing with null checks.

10. [src/composables/element/useOverflowObserver.ts:34-37] - Issue: Only checks horizontal overflow. Suggestion: Add option for vertical overflow detection.

11. [src/components/topbar/WorkflowTabs.vue:220] - Issue: Hardcoded scroll amount (20px). Suggestion: Make configurable or viewport-based.

12. [src/components/topbar/WorkflowTabs.vue:376-386] - Issue: Complex CSS with magic numbers and experimental env(). Suggestion: Add fallback styles and document compatibility.

13. [src/components/topbar/CommandMenubar.vue:114-125] - Issue: Recursive function without depth limit. Suggestion: Add maximum recursion depth protection.

Low Priority

14. [src/utils/mouseDownUtil.ts:3-7] - Issue: No input validation. Suggestion: Add type guards and parameter validation.

15. [src/components/breadcrumb/SubgraphBreadcrumbItem.vue:162-167] - Issue: Relying on event.detail for click detection. Suggestion: Use more robust double-click handling.

16. [src/components/breadcrumb/SubgraphBreadcrumb.vue:133-151] - Issue: Complex manual width calculation. Suggestion: Use ResizeObserver or getBoundingClientRect().

[christian-byrne]

LGTM