feat: Compact Mode toggle for Nodes 2.0 (read-only app view)

src/composables/useCoreCommands.ts

@@ -19,6 +19,7 @@ import {
 } from '@/lib/litegraph/src/litegraph'
 import type { Point } from '@/lib/litegraph/src/litegraph'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
+import { useCompactModeStore } from '@/stores/compactModeStore'
 import { useAssetBrowserDialog } from '@/platform/assets/composables/useAssetBrowserDialog'
 import { createModelNodeFromAsset } from '@/platform/assets/utils/createModelNodeFromAsset'
 import { useSettingStore } from '@/platform/settings/settingStore'
@@ -90,6 +91,7 @@ export function useCoreCommands(): ComfyCommand[] {
 
   const dialogStore = useDialogStore()
   const maskEditorStore = useMaskEditorStore()
+  const compactModeStore = useCompactModeStore()
 
   const { getSelectedNodes, toggleSelectedNodesMode } =
     useSelectedLiteGraphItems()
@@ -106,6 +108,7 @@ export function useCoreCommands(): ComfyCommand[] {
   const moveSelectedNodes = (
     positionUpdater: (pos: Point, gridSize: number) => Point
   ) => {
+    if (compactModeStore.isCompactMode) return
     const selectedNodes = getSelectedNodes()
     if (selectedNodes.length === 0) return
 
@@ -594,6 +597,7 @@ export function useCoreCommands(): ComfyCommand[] {
       versionAdded: '1.3.7',
       category: 'essentials' as const,
       function: () => {
+        if (compactModeStore.isCompactMode) return
         const { canvas } = app
         if (!canvas.selectedItems?.size) {
           toastStore.add({
@@ -898,6 +902,7 @@ export function useCoreCommands(): ComfyCommand[] {
       icon: 'icon-[lucide--clipboard-paste]',
       label: 'Paste',
       function: () => {
+        if (compactModeStore.isCompactMode) return
         app.canvas.pasteFromClipboard()
       }
     },
@@ -906,6 +911,7 @@ export function useCoreCommands(): ComfyCommand[] {
       icon: 'icon-[lucide--clipboard-paste]',
       label: () => t('Paste with Connect'),
       function: () => {
+        if (compactModeStore.isCompactMode) return
         app.canvas.pasteFromClipboard({ connectInputs: true })
       }
     },
@@ -923,6 +929,7 @@ export function useCoreCommands(): ComfyCommand[] {
       label: 'Delete Selected Items',
       versionAdded: '1.10.5',
       function: () => {
+        if (compactModeStore.isCompactMode) return
         if (app.canvas.selectedItems.size === 0) {
           app.canvas.canvas.dispatchEvent(
             new CustomEvent('litegraph:no-items-selected', { bubbles: true })
@@ -1034,6 +1041,7 @@ export function useCoreCommands(): ComfyCommand[] {
       versionAdded: '1.20.1',
       category: 'essentials' as const,
       function: () => {
+        if (compactModeStore.isCompactMode) return
         const canvas = canvasStore.getCanvas()
         const graph = canvas.subgraph ?? canvas.graph
         if (!graph) throw new TypeError('Canvas has no graph or subgraph set.')
@@ -1349,6 +1357,35 @@ export function useCoreCommands(): ComfyCommand[] {
         if (newMode) useTelemetry()?.trackEnterLinear({ source })
         canvasStore.linearMode = newMode
       }
+    },
+    {
+      id: 'Comfy.ToggleCompactMode',
+      icon: 'pi pi-th-large',
+      label: 'Toggle Compact Mode',
+      category: 'view-controls' as const,
+      active: () => compactModeStore.isCompactMode,
+      function: async () => {
+        compactModeStore.toggle()
+        if (compactModeStore.isCompactMode) {
+          compactModeStore.savedLinkRenderMode = settingStore.get(
+            'Comfy.LinkRenderMode'
+          )
+          await settingStore.set('Comfy.LinkRenderMode', LiteGraph.HIDDEN_LINK)
+          return
+        }
+        const linksAreStillHidden =
+          settingStore.get('Comfy.LinkRenderMode') === LiteGraph.HIDDEN_LINK
+        if (
+          linksAreStillHidden &&
+          compactModeStore.savedLinkRenderMode != null
+        ) {
+          await settingStore.set(
+            'Comfy.LinkRenderMode',
+            compactModeStore.savedLinkRenderMode
+          )
+        }
+        compactModeStore.savedLinkRenderMode = null
+      }
     }
   ]
 

src/composables/useWorkflowActionsMenu.test.ts

@@ -61,6 +61,10 @@ const mockFeatureFlags = vi.hoisted(() => ({
   flags: { linearToggleEnabled: false }
 }))
 
+const mockSettingStore = vi.hoisted(() => ({
+  get: vi.fn<(key: string) => unknown>(() => undefined)
+}))
+
 vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
   useWorkflowStore: vi.fn(() => mockWorkflowStore),
   useWorkflowBookmarkStore: vi.fn(() => mockBookmarkStore)
@@ -92,6 +96,10 @@ vi.mock('@/composables/useFeatureFlags', () => ({
   useFeatureFlags: vi.fn(() => mockFeatureFlags)
 }))
 
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: vi.fn(() => mockSettingStore)
+}))
+
 type MenuItems = ReturnType<typeof useWorkflowActionsMenu>['menuItems']['value']
 
 function actionItems(items: MenuItems): WorkflowMenuAction[] {
@@ -120,6 +128,9 @@ describe('useWorkflowActionsMenu', () => {
     mockFeatureFlags.flags.linearToggleEnabled = false
     mockAppModeStore.selectedInputs.length = 0
     mockAppModeStore.selectedOutputs.length = 0
+    mockSettingStore.get.mockImplementation((key: string) =>
+      key === 'Comfy.VueNodes.Enabled' ? true : undefined
+    )
     mockWorkflowStore.activeWorkflow = {
       path: 'test.json',
       isPersisted: true
@@ -375,6 +386,25 @@ describe('useWorkflowActionsMenu', () => {
     expect(bookmark.disabled).toBe(true)
   })
 
+  it('shows the Compact Mode item when Vue Nodes is enabled', () => {
+    const { menuItems } = useWorkflowActionsMenu(vi.fn(), { isRoot: true })
+    const labels = menuLabels(menuItems.value)
+
+    expect(labels).toContain('breadcrumbsMenu.enterCompactMode')
+  })
+
+  it('hides the Compact Mode item when Vue Nodes is disabled', () => {
+    mockSettingStore.get.mockImplementation((key: string) =>
+      key === 'Comfy.VueNodes.Enabled' ? false : undefined
+    )
+
+    const { menuItems } = useWorkflowActionsMenu(vi.fn(), { isRoot: true })
+    const labels = menuLabels(menuItems.value)
+
+    expect(labels).not.toContain('breadcrumbsMenu.enterCompactMode')
+    expect(labels).not.toContain('breadcrumbsMenu.exitCompactMode')
+  })
+
   it('switches to custom workflow before executing rename', async () => {
     const customWorkflow = ref({
       path: 'other.json',

src/composables/useWorkflowActionsMenu.ts

@@ -12,7 +12,9 @@ import {
   useWorkflowBookmarkStore,
   useWorkflowStore
 } from '@/platform/workflow/management/stores/workflowStore'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCommandStore } from '@/stores/commandStore'
+import { useCompactModeStore } from '@/stores/compactModeStore'
 import { useMenuItemStore } from '@/stores/menuItemStore'
 import { useSubgraphStore } from '@/stores/subgraphStore'
 import { useAppModeStore } from '@/stores/appModeStore'
@@ -56,6 +58,8 @@ export function useWorkflowActionsMenu(
   const { flags } = useFeatureFlags()
   const appModeStore = useAppModeStore()
   const { enterBuilder, pruneLinearData } = appModeStore
+  const compactModeStore = useCompactModeStore()
+  const settingStore = useSettingStore()
 
   const targetWorkflow = computed(
     () => workflow?.value ?? workflowStore.activeWorkflow
@@ -220,6 +224,23 @@ export function useWorkflowActionsMenu(
       prependSeparator: true
     })
 
+    const isVueNodesEnabled =
+      settingStore.get('Comfy.VueNodes.Enabled') ?? false
+    addItem({
+      id: 'toggle-compact-mode',
+      label: compactModeStore.isCompactMode
+        ? t('breadcrumbsMenu.exitCompactMode')
+        : t('breadcrumbsMenu.enterCompactMode'),
+      icon: 'icon-[lucide--minimize-2]',
+      command: async () => {
+        await ensureWorkflowActive(targetWorkflow.value)
+        await commandStore.execute('Comfy.ToggleCompactMode')
+      },
+      visible: !isLinearMode && isVueNodesEnabled,
+      prependSeparator: !showAppModeItems,
+      isNew: true
+    })
+
     const isActive = workflow === workflowStore.activeWorkflow
     const rawLd = isActive
       ? {

src/locales/en/main.json

@@ -1421,6 +1421,7 @@
     "Canvas Performance": "Canvas Performance",
     "Help Center": "Help Center",
     "Toggle App Mode": "Toggle App Mode",
+    "Toggle Compact Mode": "Toggle Compact Mode",
     "Toggle Queue Panel V2": "Toggle Queue Panel V2",
     "Toggle Theme (Dark/Light)": "Toggle Theme (Dark/Light)",
     "Undo": "Undo",
@@ -2742,6 +2743,8 @@
     "duplicate": "Duplicate",
     "enterAppMode": "Enter app mode",
     "exitAppMode": "Exit app mode",
+    "enterCompactMode": "Enter compact mode",
+    "exitCompactMode": "Exit compact mode",
     "enterBuilderMode": "Build app",
     "editBuilderMode": "Edit app",
     "workflowActions": "Workflow actions",

src/renderer/extensions/vueNodes/components/ImagePreview.vue

@@ -114,7 +114,7 @@
 
     <!-- Image Dimensions (gallery mode only) -->
     <div
-      v-if="viewMode === 'gallery'"
+      v-if="viewMode === 'gallery' && !compactModeStore.isCompactMode"
       class="pt-2 text-center text-xs text-base-foreground"
     >
       <span
@@ -174,6 +174,7 @@ import { downloadFile } from '@/base/common/downloadUtil'
 import Skeleton from '@/components/ui/skeleton/Skeleton.vue'
 import { useMaskEditor } from '@/composables/maskeditor/useMaskEditor'
 import { useToastStore } from '@/platform/updates/common/toastStore'
+import { useCompactModeStore } from '@/stores/compactModeStore'
 import { useNodeOutputStore } from '@/stores/nodeOutputStore'
 import { resolveNode } from '@/utils/litegraphUtil'
 import { cn } from '@comfyorg/tailwind-utils'
@@ -201,6 +202,7 @@ function defaultViewMode(urls: readonly string[]): ViewMode {
   return urls.length > 1 ? 'grid' : 'gallery'
 }
 
+const compactModeStore = useCompactModeStore()
 const currentIndex = ref(0)
 const viewMode = ref<ViewMode>(defaultViewMode(imageUrls))
 const galleryPanelEl = ref<HTMLDivElement>()