Cleanup: Properties Panel

browser_tests/fixtures/ComfyPage.ts

@@ -33,12 +33,14 @@ class ComfyMenu {
   private _topbar: Topbar | null = null
 
   public readonly sideToolbar: Locator
+  public readonly propertiesPanel: Locator
   public readonly themeToggleButton: Locator
   public readonly saveButton: Locator
 
   constructor(public readonly page: Page) {
     this.sideToolbar = page.locator('.side-tool-bar-container')
     this.themeToggleButton = page.locator('.comfy-vue-theme-toggle')
+    this.propertiesPanel = page.getByTestId('properties-panel')
     this.saveButton = page
       .locator('button[title="Save the current workflow"]')
       .nth(0)

browser_tests/helpers/actionbar.ts

@@ -5,14 +5,18 @@ import type { AutoQueueMode } from '../../src/stores/queueStore'
 export class ComfyActionbar {
   public readonly root: Locator
   public readonly queueButton: ComfyQueueButton
+  public readonly propertiesButton: Locator
 
   constructor(public readonly page: Page) {
-    this.root = page.locator('.actionbar')
+    this.root = page.locator('.actionbar-container')
     this.queueButton = new ComfyQueueButton(this)
+    this.propertiesButton = this.root.getByLabel('Toggle properties panel')
   }
 
   async isDocked() {
-    const className = await this.root.getAttribute('class')
+    const className = await this.root
+      .locator('.actionbar')
+      .getAttribute('class')
     return className?.includes('static') ?? false
   }
 }

browser_tests/tests/nodeHelp.spec.ts

@@ -52,13 +52,10 @@ test.describe('Node Help', () => {
       await expect(helpButton).toBeVisible()
       await helpButton.click()
 
-      // Verify that the node library sidebar is opened
-      await expect(
-        comfyPage.menu.nodeLibraryTab.selectedTabButton
-      ).toBeVisible()
-
       // Verify that the help page is shown for the correct node
-      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+      const helpPage = comfyPage.page.locator(
+        '[data-testid="properties-panel"]'
+      )
       await expect(helpPage).toContainText('KSampler')
       await expect(helpPage.locator('.node-help-content')).toBeVisible()
     })
@@ -170,7 +167,9 @@ test.describe('Node Help', () => {
       await helpButton.click()
 
       // Verify loading spinner is shown
-      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+      const helpPage = comfyPage.page.locator(
+        '[data-testid="properties-panel"]'
+      )
       await expect(helpPage.locator('.p-progressspinner')).toBeVisible()
 
       // Wait for content to load
@@ -200,7 +199,9 @@ test.describe('Node Help', () => {
       await helpButton.click()
 
       // Verify fallback content is shown (description, inputs, outputs)
-      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+      const helpPage = comfyPage.page.locator(
+        '[data-testid="properties-panel"]'
+      )
       await expect(helpPage).toContainText('Description')
       await expect(helpPage).toContainText('Inputs')
       await expect(helpPage).toContainText('Outputs')
@@ -233,7 +234,9 @@ test.describe('Node Help', () => {
       )
       await helpButton.click()
 
-      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+      const helpPage = comfyPage.page.locator(
+        '[data-testid="properties-panel"]'
+      )
       await expect(helpPage).toContainText('KSampler Documentation')
 
       // Check that relative image paths are prefixed correctly
@@ -281,7 +284,9 @@ test.describe('Node Help', () => {
       )
       await helpButton.click()
 
-      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+      const helpPage = comfyPage.page.locator(
+        '[data-testid="properties-panel"]'
+      )
 
       // Check relative video paths are prefixed
       const relativeVideo = helpPage.locator('video[src*="demo.mp4"]')
@@ -354,7 +359,9 @@ This is documentation for a custom node.
       if (await helpButton.isVisible()) {
         await helpButton.click()
 
-        const helpPage = comfyPage.page.locator('.sidebar-content-container')
+        const helpPage = comfyPage.page.locator(
+          '[data-testid="properties-panel"]'
+        )
         await expect(helpPage).toContainText('Custom Node Documentation')
 
         // Check image path for custom nodes
@@ -394,7 +401,9 @@ This is documentation for a custom node.
       )
       await helpButton.click()
 
-      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+      const helpPage = comfyPage.page.locator(
+        '[data-testid="properties-panel"]'
+      )
 
       // Dangerous elements should be removed
       await expect(helpPage.locator('script')).toHaveCount(0)
@@ -461,7 +470,9 @@ This is English documentation.
       )
       await helpButton.click()
 
-      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+      const helpPage = comfyPage.page.locator(
+        '[data-testid="properties-panel"]'
+      )
       await expect(helpPage).toContainText('KSamplerノード')
       await expect(helpPage).toContainText('これは日本語のドキュメントです')
 
@@ -484,7 +495,9 @@ This is English documentation.
       )
       await helpButton.click()
 
-      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+      const helpPage = comfyPage.page.locator(
+        '[data-testid="properties-panel"]'
+      )
 
       // Should show fallback content (node description)
       await expect(helpPage).toBeVisible()
@@ -528,7 +541,9 @@ This is English documentation.
       )
       await helpButton.click()
 
-      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+      const helpPage = comfyPage.page.locator(
+        '[data-testid="properties-panel"]'
+      )
       await expect(helpPage).toContainText('KSampler Help')
       await expect(helpPage).toContainText('This is KSampler documentation')
 

browser_tests/tests/propertiesPanel/propertiesPanel.spec.ts

@@ -0,0 +1,19 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+
+test.describe('Properties panel', () => {
+  test('opens and updates title based on selection', async ({ comfyPage }) => {
+    await comfyPage.actionbar.propertiesButton.click()
+
+    const { propertiesPanel } = comfyPage.menu
+
+    await expect(propertiesPanel.getByText('No node(s) selected')).toBeVisible()
+
+    await comfyPage.selectNodes(['KSampler', 'CLIP Text Encode (Prompt)'])
+
+    await expect(propertiesPanel.getByText('3 nodes selected')).toBeVisible()
+
+    await expect(propertiesPanel.getByText('KSampler')).toHaveCount(1) // Will be 2 in Vue mode
+  })
+})

src/components/LiteGraphCanvasSplitterOverlay.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="splitter-overlay-root pointer-events-none flex flex-col">
+  <div
+    class="w-full h-full absolute top-0 left-0 z-999 pointer-events-none flex flex-col"
+  >
     <slot name="workflow-tabs" />
 
     <div
@@ -15,14 +17,13 @@
 
       <Splitter
         :key="splitterRefreshKey"
-        class="splitter-overlay flex-1 overflow-hidden"
-        :pt:gutter="getSplitterGutterClasses"
+        class="bg-transparent pointer-events-none border-none flex-1 overflow-hidden"
         :state-key="sidebarStateKey"
         state-storage="local"
       >
         <SplitterPanel
-          v-if="sidebarLocation === 'left'"
-          class="side-bar-panel pointer-events-auto"
+          v-if="sidebarLocation === 'left' && !focusMode"
+          class="side-bar-panel bg-comfy-menu-bg pointer-events-auto"
           :min-size="10"
           :size="20"
           :style="{
@@ -39,14 +40,16 @@
         </SplitterPanel>
 
         <SplitterPanel :size="80" class="flex flex-col">
-          <slot name="topmenu" :sidebar-panel-visible="sidebarPanelVisible" />
+          <slot name="topmenu" :sidebar-panel-visible />
 
           <Splitter
-            class="splitter-overlay splitter-overlay-bottom mr-1 mb-1 ml-1 flex-1"
+            class="bg-transparent pointer-events-none border-none splitter-overlay-bottom mr-1 mb-1 ml-1 flex-1"
             layout="vertical"
             :pt:gutter="
-              'rounded-tl-lg rounded-tr-lg ' +
-              (bottomPanelVisible ? '' : 'hidden')
+              cn(
+                'rounded-tl-lg rounded-tr-lg ',
+                !(bottomPanelVisible && !focusMode) && 'hidden'
+              )
             "
             state-key="bottom-panel-splitter"
             state-storage="local"
@@ -55,16 +58,16 @@
               <slot name="graph-canvas-panel" />
             </SplitterPanel>
             <SplitterPanel
-              v-show="bottomPanelVisible"
-              class="bottom-panel pointer-events-auto rounded-lg"
+              v-show="bottomPanelVisible && !focusMode"
+              class="bottom-panel border border-(--p-panel-border-color) max-w-full overflow-x-auto bg-comfy-menu-bg pointer-events-auto rounded-lg"
             >
               <slot name="bottom-panel" />
             </SplitterPanel>
           </Splitter>
         </SplitterPanel>
 
         <SplitterPanel
-          v-if="sidebarLocation === 'right'"
+          v-if="sidebarLocation === 'right' && !focusMode"
           class="side-bar-panel pointer-events-auto"
           :min-size="10"
           :size="20"
@@ -83,8 +86,8 @@
 
         <!-- Right Side Panel - independent of sidebar -->
         <SplitterPanel
-          v-if="rightSidePanelVisible"
-          class="right-side-panel pointer-events-auto"
+          v-if="rightSidePanelVisible && !focusMode"
+          class="bg-comfy-menu-bg pointer-events-auto"
           :min-size="15"
           :size="20"
         >
@@ -96,6 +99,8 @@
 </template>
 
 <script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+import { storeToRefs } from 'pinia'
 import Splitter from 'primevue/splitter'
 import SplitterPanel from 'primevue/splitterpanel'
 import { computed } from 'vue'
@@ -104,9 +109,12 @@ import { useSettingStore } from '@/platform/settings/settingStore'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
+import { useWorkspaceStore } from '@/stores/workspaceStore'
 
+const workspaceStore = useWorkspaceStore()
 const settingStore = useSettingStore()
 const rightSidePanelStore = useRightSidePanelStore()
+const sidebarTabStore = useSidebarTabStore()
 const sidebarLocation = computed<'left' | 'right'>(() =>
   settingStore.get('Comfy.Sidebar.Location')
 )
@@ -115,23 +123,19 @@ const unifiedWidth = computed(() =>
   settingStore.get('Comfy.Sidebar.UnifiedWidth')
 )
 
-const sidebarPanelVisible = computed(
-  () => useSidebarTabStore().activeSidebarTab !== null
-)
-const bottomPanelVisible = computed(
-  () => useBottomPanelStore().bottomPanelVisible
-)
-const rightSidePanelVisible = computed(() => rightSidePanelStore.isOpen)
-const activeSidebarTabId = computed(
-  () => useSidebarTabStore().activeSidebarTabId
-)
+const { focusMode } = storeToRefs(workspaceStore)
+
+const { activeSidebarTabId, activeSidebarTab } = storeToRefs(sidebarTabStore)
+const { bottomPanelVisible } = storeToRefs(useBottomPanelStore())
+const { isOpen: rightSidePanelVisible } = storeToRefs(rightSidePanelStore)
+
+const sidebarPanelVisible = computed(() => activeSidebarTab.value !== null)
 
 const sidebarStateKey = computed(() => {
-  if (unifiedWidth.value) {
-    return 'unified-sidebar'
-  }
-  // When no tab is active, use a default key to maintain state
-  return activeSidebarTabId.value ?? 'default-sidebar'
+  return unifiedWidth.value
+    ? 'unified-sidebar'
+    : // When no tab is active, use a default key to maintain state
+      (activeSidebarTabId.value ?? 'default-sidebar')
 })
 
 /**
@@ -142,17 +146,9 @@ const splitterRefreshKey = computed(() => {
     ? 'main-splitter-with-right-panel'
     : 'main-splitter'
 })
-
-// Gutter visibility should be controlled by CSS targeting specific gutters
-const getSplitterGutterClasses = computed(() => {
-  // Empty string - let individual gutter styles handle visibility
-  return ''
-})
 </script>
 
 <style scoped>
-@reference '../assets/css/style.css';
-
 :deep(.p-splitter-gutter) {
   pointer-events: auto;
 }
@@ -169,36 +165,7 @@ const getSplitterGutterClasses = computed(() => {
   display: none;
 }
 
-.side-bar-panel {
-  background-color: var(--bg-color);
-}
-
-.right-side-panel {
-  background-color: var(--bg-color);
-}
-
-.bottom-panel {
-  background-color: var(--comfy-menu-bg);
-  border: 1px solid var(--p-panel-border-color);
-  max-width: 100%;
-  overflow-x: auto;
-}
-
 .splitter-overlay-bottom :deep(.p-splitter-gutter) {
   transform: translateY(5px);
 }
-
-.splitter-overlay {
-  @apply bg-transparent pointer-events-none border-none;
-}
-
-.splitter-overlay-root {
-  @apply w-full h-full absolute top-0 left-0;
-
-  /* Set it the same as the ComfyUI menu */
-  /* Note: Lite-graph DOM widgets have the same z-index as the node id, so
-  999 should be sufficient to make sure splitter overlays on node's DOM
-  widgets */
-  z-index: 999;
-}
 </style>

src/components/MenuHamburger.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-show="workspaceState.focusMode"
-    class="comfy-menu-hamburger no-drag top-0 right-0"
+    class="fixed z-9999 flex flex-row no-drag top-0 right-0"
   >
     <Button
       v-tooltip="{ value: $t('menu.showMenu'), showDelay: 300 }"
@@ -44,11 +44,3 @@ watchEffect(() => {
   }
 })
 </script>
-
-<style scoped>
-@reference '../assets/css/style.css';
-
-.comfy-menu-hamburger {
-  @apply fixed z-9999 flex flex-row;
-}
-</style>