Cleanup: Properties Panel (#7137)

## Summary

- Code cleanup
- Copy, padding, color, alignment of components
- Subgraph Edit mode changes
- Partial fix for the Node Info location (need to do context menu still)
- Editing node title

### Still to-do

- Bi-directionality in values

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7137-WIP-Cleanup-Properties-Panel-2be6d73d3650813e9430f6bcb09dfb4d)
by [Unito](https://www.unito.io)

---------

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

browser_tests/fixtures/ComfyPage.ts

@@ -27,18 +27,32 @@ dotenv.config()
 
 type WorkspaceStore = ReturnType<typeof useWorkspaceStore>
 
+class ComfyPropertiesPanel {
+  readonly root: Locator
+  readonly panelTitle: Locator
+  readonly searchBox: Locator
+
+  constructor(readonly page: Page) {
+    this.root = page.getByTestId('properties-panel')
+    this.panelTitle = this.root.locator('h3')
+    this.searchBox = this.root.getByPlaceholder('Search...')
+  }
+}
+
 class ComfyMenu {
   private _nodeLibraryTab: NodeLibrarySidebarTab | null = null
   private _workflowsTab: WorkflowsSidebarTab | null = null
   private _topbar: Topbar | null = null
 
   public readonly sideToolbar: Locator
+  public readonly propertiesPanel: ComfyPropertiesPanel
   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 = new ComfyPropertiesPanel(page)
     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,35 @@
+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.panelTitle).toContainText(
+      'No node(s) selected'
+    )
+
+    await comfyPage.selectNodes(['KSampler', 'CLIP Text Encode (Prompt)'])
+
+    await expect(propertiesPanel.panelTitle).toContainText('3 nodes selected')
+    await expect(propertiesPanel.root.getByText('KSampler')).toHaveCount(1)
+    await expect(
+      propertiesPanel.root.getByText('CLIP Text Encode (Prompt)')
+    ).toHaveCount(2)
+
+    await propertiesPanel.searchBox.fill('seed')
+    await expect(propertiesPanel.root.getByText('KSampler')).toHaveCount(1)
+    await expect(
+      propertiesPanel.root.getByText('CLIP Text Encode (Prompt)')
+    ).toHaveCount(0)
+
+    await propertiesPanel.searchBox.fill('')
+    await expect(propertiesPanel.root.getByText('KSampler')).toHaveCount(1)
+    await expect(
+      propertiesPanel.root.getByText('CLIP Text Encode (Prompt)')
+    ).toHaveCount(2)
+  })
+})

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,15 +17,14 @@
 
       <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"
         @resizestart="onResizestart"
       >
         <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="{
@@ -40,14 +41,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"
@@ -57,8 +60,8 @@
               <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>
@@ -66,7 +69,7 @@
         </SplitterPanel>
 
         <SplitterPanel
-          v-if="sidebarLocation === 'right'"
+          v-if="sidebarLocation === 'right' && !focusMode"
           class="side-bar-panel pointer-events-auto"
           :min-size="10"
           :size="20"
@@ -85,8 +88,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"
         >
@@ -98,6 +101,8 @@
 </template>
 
 <script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+import { storeToRefs } from 'pinia'
 import Splitter from 'primevue/splitter'
 import type { SplitterResizeStartEvent } from 'primevue/splitter'
 import SplitterPanel from 'primevue/splitterpanel'
@@ -107,9 +112,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')
 )
@@ -118,38 +126,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'
-})
-
-/**
- * Force refresh the splitter when right panel visibility changes to recalculate the width
- */
-const splitterRefreshKey = computed(() => {
-  return rightSidePanelVisible.value
-    ? '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 ''
+  return unifiedWidth.value
+    ? 'unified-sidebar'
+    : // When no tab is active, use a default key to maintain state
+      (activeSidebarTabId.value ?? 'default-sidebar')
 })
 
 /**
@@ -158,11 +147,18 @@ const getSplitterGutterClasses = computed(() => {
 function onResizestart({ originalEvent: event }: SplitterResizeStartEvent) {
   event.preventDefault()
 }
+
+/*
+ * Force refresh the splitter when right panel visibility changes to recalculate the width
+ */
+const splitterRefreshKey = computed(() => {
+  return rightSidePanelVisible.value
+    ? 'main-splitter-with-right-panel'
+    : 'main-splitter'
+})
 </script>
 
 <style scoped>
-@reference '../assets/css/style.css';
-
 :deep(.p-splitter-gutter) {
   pointer-events: auto;
 }
@@ -179,36 +175,7 @@ function onResizestart({ originalEvent: event }: SplitterResizeStartEvent) {
   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>

src/components/TopMenuSection.vue

@@ -24,17 +24,14 @@
           v-tooltip.bottom="queueHistoryTooltipConfig"
           type="transparent"
           size="sm"
-          class="queue-history-toggle relative mr-2 transition-colors duration-200 ease-in-out hover:bg-secondary-background-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-background"
-          :class="queueHistoryButtonBackgroundClass"
+          class="relative mr-2 text-base-foreground transition-colors duration-200 ease-in-out bg-secondary-background hover:bg-secondary-background-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-background"
           :aria-pressed="isQueueOverlayExpanded"
           :aria-label="
             t('sideToolbar.queueProgressOverlay.expandCollapsedQueue')
           "
           @click="toggleQueueOverlay"
         >
-          <i
-            class="icon-[lucide--history] block size-4 text-muted-foreground"
-          />
+          <i class="icon-[lucide--history] size-4" />
           <span
             v-if="queuedCount > 0"
             class="absolute -top-1 -right-1 min-w-[16px] rounded-full bg-primary-background py-0.25 text-[10px] font-medium leading-[14px] text-white"
@@ -49,14 +46,11 @@
           v-tooltip.bottom="rightSidePanelTooltipConfig"
           type="transparent"
           size="sm"
-          class="mr-2 transition-colors duration-200 ease-in-out hover:bg-secondary-background-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-background"
-          :aria-pressed="isRightSidePanelOpen"
+          class="mr-2 text-base-foreground transition-colors duration-200 ease-in-out bg-secondary-background hover:bg-secondary-background-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-background"
           :aria-label="t('rightSidePanel.togglePanel')"
-          @click="toggleRightSidePanel"
+          @click="rightSidePanelStore.togglePanel"
         >
-          <i
-            class="icon-[lucide--panel-right] block size-4 text-muted-foreground"
-          />
+          <i class="icon-[lucide--panel-right] size-4" />
         </IconButton>
       </div>
       <QueueProgressOverlay
@@ -68,6 +62,7 @@
 </template>
 
 <script setup lang="ts">
+import { storeToRefs } from 'pinia'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -98,22 +93,13 @@ const queuedCount = computed(() => queueStore.pendingTasks.length)
 const queueHistoryTooltipConfig = computed(() =>
   buildTooltipConfig(t('sideToolbar.queueProgressOverlay.viewJobHistory'))
 )
-const queueHistoryButtonBackgroundClass = computed(() =>
-  isQueueOverlayExpanded.value
-    ? 'bg-secondary-background-selected'
-    : 'bg-secondary-background'
-)
 
 // Right side panel toggle
-const isRightSidePanelOpen = computed(() => rightSidePanelStore.isOpen)
+const { isOpen: isRightSidePanelOpen } = storeToRefs(rightSidePanelStore)
 const rightSidePanelTooltipConfig = computed(() =>
   buildTooltipConfig(t('rightSidePanel.togglePanel'))
 )
 
-const toggleRightSidePanel = () => {
-  rightSidePanelStore.togglePanel()
-}
-
 // Maintain support for legacy topbar elements attached by custom scripts
 const legacyCommandsContainerRef = ref<HTMLElement>()
 onMounted(() => {

src/components/graph/GraphCanvas.vue

@@ -44,7 +44,7 @@
     <template #graph-canvas-panel>
       <GraphCanvasMenu v-if="canvasMenuEnabled" class="pointer-events-auto" />
       <MiniMap
-        v-if="comfyAppReady && minimapEnabled && showUI"
+        v-if="comfyAppReady && minimapEnabled && betaMenuEnabled"
         class="pointer-events-auto"
       />
     </template>

src/components/graph/selectionToolbox/InfoButton.vue

@@ -9,17 +9,17 @@
     severity="secondary"
     @click="onInfoClick"
   >
-    <i class="icon-[lucide--info] h-4 w-4" />
+    <i class="icon-[lucide--info] size-4" />
   </Button>
 </template>
 
 <script setup lang="ts">
 import Button from 'primevue/button'
 
-import { useSelectionState } from '@/composables/graph/useSelectionState'
 import { useTelemetry } from '@/platform/telemetry'
+import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 
-const { showNodeHelp: toggleHelp } = useSelectionState()
+const rightSidePanelStore = useRightSidePanelStore()
 
 /**
  * Track node info button click and toggle node help.
@@ -28,6 +28,6 @@ const onInfoClick = () => {
   useTelemetry()?.trackUiButtonClicked({
     button_id: 'selection_toolbox_node_info_opened'
   })
-  toggleHelp()
+  rightSidePanelStore.openPanel('info')
 }
 </script>

src/components/rightSidePanel/RightSidePanel.vue

@@ -1,15 +1,17 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import { computed, watchEffect } from 'vue'
+import { computed, ref, toValue, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import IconButton from '@/components/button/IconButton.vue'
+import EditableText from '@/components/common/EditableText.vue'
 import Tab from '@/components/tab/Tab.vue'
 import TabList from '@/components/tab/TabList.vue'
 import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
+import type { RightSidePanelTab } from '@/stores/workspace/rightSidePanelStore'
 import { isLGraphNode } from '@/utils/litegraphUtil'
 import { cn } from '@/utils/tailwindUtil'
 
@@ -27,8 +29,8 @@ const { activeTab, isEditingSubgraph } = storeToRefs(rightSidePanelStore)
 
 const hasSelection = computed(() => selectedItems.value.length > 0)
 
-const selectedNodes = computed(() => {
-  return selectedItems.value.filter(isLGraphNode) as LGraphNode[]
+const selectedNodes = computed((): LGraphNode[] => {
+  return selectedItems.value.filter(isLGraphNode)
 })
 
 const isSubgraphNode = computed(() => {
@@ -44,25 +46,29 @@ const selectedNode = computed(() => {
 const selectionCount = computed(() => selectedItems.value.length)
 
 const panelTitle = computed(() => {
-  if (!hasSelection.value) return t('rightSidePanel.properties')
   if (isSingleNodeSelected.value && selectedNode.value) {
     return selectedNode.value.title || selectedNode.value.type || 'Node'
   }
-  return t('rightSidePanel.multipleSelection', { count: selectionCount.value })
+  return t('rightSidePanel.title', { count: selectionCount.value })
 })
 
 function closePanel() {
   rightSidePanelStore.closePanel()
 }
 
-const tabs = computed<{ label: () => string; value: string }[]>(() => {
-  const list = [
+type RightSidePanelTabList = Array<{
+  label: () => string
+  value: RightSidePanelTab
+}>
+
+const tabs = computed<RightSidePanelTabList>(() => {
+  const list: RightSidePanelTabList = [
     {
       label: () => t('rightSidePanel.parameters'),
       value: 'parameters'
     },
     {
-      label: () => t('rightSidePanel.settings'),
+      label: () => t('g.settings'),
       value: 'settings'
     }
   ]
@@ -80,19 +86,57 @@ const tabs = computed<{ label: () => string; value: string }[]>(() => {
 
 // Use global state for activeTab and ensure it's valid
 watchEffect(() => {
-  if (!tabs.value.some((tab) => tab.value === activeTab.value)) {
-    activeTab.value = tabs.value[0].value as 'parameters' | 'settings' | 'info'
+  if (
+    !tabs.value.some((tab) => tab.value === activeTab.value) &&
+    !(activeTab.value === 'subgraph' && isSubgraphNode.value)
+  ) {
+    rightSidePanelStore.openPanel(tabs.value[0].value)
   }
 })
+
+const isEditing = ref(false)
+
+function handleTitleEdit(newTitle: string) {
+  isEditing.value = false
+
+  const trimmedTitle = newTitle.trim()
+  if (!trimmedTitle) return
+
+  const node = toValue(selectedNode)
+  if (!node) return
+
+  if (trimmedTitle === node.title) return
+
+  node.title = trimmedTitle
+  canvasStore.canvas?.setDirty(true, false)
+}
+
+function handleTitleCancel() {
+  isEditing.value = false
+}
 </script>
 
 <template>
-  <div class="flex h-full w-full flex-col bg-interface-panel-surface">
+  <div
+    data-testid="properties-panel"
+    class="flex size-full flex-col bg-interface-panel-surface"
+  >
     <!-- Panel Header -->
-    <div class="border-b border-interface-stroke pt-1">
+    <section class="pt-1">
       <div class="flex items-center justify-between pl-4 pr-3">
         <h3 class="my-3.5 text-sm font-semibold line-clamp-2">
-          {{ panelTitle }}
+          <EditableText
+            v-if="isSingleNodeSelected"
+            :model-value="panelTitle"
+            :is-editing="isEditing"
+            :input-attrs="{ 'data-testid': 'node-title-input' }"
+            @edit="handleTitleEdit"
+            @cancel="handleTitleCancel"
+            @dblclick="isEditing = true"
+          />
+          <template v-else>
+            {{ panelTitle }}
+          </template>
         </h3>
 
         <div class="flex gap-2">
@@ -100,36 +144,41 @@ watchEffect(() => {
             v-if="isSubgraphNode"
             type="transparent"
             size="sm"
-            class="bg-secondary-background hover:bg-secondary-background-hover"
             :class="
               cn(
-                'bg-secondary-background hover:bg-secondary-background-hover',
-                isEditingSubgraph
-                  ? 'bg-secondary-background-selected'
-                  : 'bg-secondary-background'
+                'bg-secondary-background hover:bg-secondary-background-hover text-base-foreground',
+                isEditingSubgraph && 'bg-secondary-background-selected'
+              )
+            "
+            @click="
+              rightSidePanelStore.openPanel(
+                isEditingSubgraph ? 'parameters' : 'subgraph'
               )
             "
-            @click="isEditingSubgraph = !isEditingSubgraph"
           >
             <i class="icon-[lucide--settings-2]" />
           </IconButton>
           <IconButton
             type="transparent"
             size="sm"
-            class="bg-secondary-background hover:bg-secondary-background-hover"
+            class="bg-secondary-background hover:bg-secondary-background-hover text-base-foreground"
             :aria-pressed="rightSidePanelStore.isOpen"
             :aria-label="t('rightSidePanel.togglePanel')"
             @click="closePanel"
           >
-            <i class="icon-[lucide--panel-right]" />
+            <i class="icon-[lucide--panel-right] size-4" />
           </IconButton>
         </div>
       </div>
-      <div
-        v-if="hasSelection && !(isSubgraphNode && isEditingSubgraph)"
-        class="px-4 pb-2 pt-1"
-      >
-        <TabList v-model="activeTab">
+      <nav v-if="hasSelection" class="px-4 pb-2 pt-1">
+        <TabList
+          :model-value="activeTab"
+          @update:model-value="
+            (newTab: RightSidePanelTab) => {
+              rightSidePanelStore.openPanel(newTab)
+            }
+          "
+        >
           <Tab
             v-for="tab in tabs"
             :key="tab.value"
@@ -139,23 +188,21 @@ watchEffect(() => {
             {{ tab.label() }}
           </Tab>
         </TabList>
-      </div>
-    </div>
+      </nav>
+    </section>
 
     <!-- Panel Content -->
     <div class="scrollbar-thin flex-1 overflow-y-auto">
+      <div
+        v-if="!hasSelection"
+        class="flex size-full p-4 items-start justify-start text-sm text-muted-foreground"
+      >
+        {{ $t('rightSidePanel.noSelection') }}
+      </div>
       <SubgraphEditor
-        v-if="isSubgraphNode && isEditingSubgraph"
+        v-else-if="isSubgraphNode && isEditingSubgraph"
         :node="selectedNode"
       />
-      <div
-        v-else-if="!hasSelection"
-        class="flex h-full items-center justify-center text-center"
-      >
-        <div class="px-4 text-sm text-base-foreground-muted">
-          {{ $t('rightSidePanel.noSelection') }}
-        </div>
-      </div>
       <template v-else>
         <TabParameters
           v-if="activeTab === 'parameters'"

src/components/rightSidePanel/info/TabInfo.vue

@@ -1,15 +1,16 @@
 <script setup lang="ts">
-import { computed, watch } from 'vue'
+import { whenever } from '@vueuse/core'
+import { computed } from 'vue'
 
 import NodeHelpContent from '@/components/node/NodeHelpContent.vue'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
 
-const props = defineProps<{
+const { nodes } = defineProps<{
   nodes: LGraphNode[]
 }>()
-const node = computed(() => props.nodes[0])
+const node = computed(() => nodes[0])
 
 const nodeDefStore = useNodeDefStore()
 const nodeHelpStore = useNodeHelpStore()
@@ -19,19 +20,17 @@ const nodeInfo = computed(() => {
 })
 
 // Open node help when the selected node changes
-watch(
+whenever(
   nodeInfo,
   (info) => {
-    if (info) {
-      nodeHelpStore.openHelp(info)
-    }
+    nodeHelpStore.openHelp(info)
   },
   { immediate: true }
 )
 </script>
 
 <template>
-  <div v-if="nodeInfo" class="rounded-lg bg-interface-surface p-3">
+  <div v-if="nodeInfo" class="p-3">
     <NodeHelpContent :node="nodeInfo" />
   </div>
 </template>

src/components/rightSidePanel/layout/PropertiesAccordionItem.vue

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import { cn } from '@/utils/tailwindUtil'
+
+defineProps<{
+  isEmpty?: boolean
+}>()
+
+const isCollapse = defineModel<boolean>('collapse', { default: false })
+</script>
+
+<template>
+  <div class="flex flex-col bg-interface-panel-surface">
+    <div
+      class="sticky top-0 z-10 flex items-center justify-between backdrop-blur-xl bg-inherit"
+    >
+      <button
+        v-tooltip="
+          isEmpty
+            ? {
+                value: $t('rightSidePanel.inputsNoneTooltip'),
+                showDelay: 1_000
+              }
+            : undefined
+        "
+        type="button"
+        :class="
+          cn(
+            'group min-h-12 bg-transparent border-0 outline-0 ring-0 w-full text-left flex items-center justify-between pl-4 pr-3',
+            !isEmpty && 'cursor-pointer'
+          )
+        "
+        :disabled="isEmpty"
+        @click="isCollapse = !isCollapse"
+      >
+        <span class="text-sm font-semibold line-clamp-2">
+          <slot name="label" />
+        </span>
+
+        <i
+          v-if="!isEmpty"
+          :class="
+            cn(
+              'text-muted-foreground group-hover:text-base-foreground group-focus:text-base-foreground icon-[lucide--chevron-up] size-4 transition-all',
+              isCollapse && '-rotate-180'
+            )
+          "
+        />
+      </button>
+    </div>
+    <div v-if="!isCollapse && !isEmpty" class="pb-4">
+      <slot />
+    </div>
+  </div>
+</template>

src/components/rightSidePanel/layout/RightPanelSection.vue

@@ -1,51 +0,0 @@
-<script lang="ts" setup>
-import { watch } from 'vue'
-
-import { cn } from '@/utils/tailwindUtil'
-
-const props = defineProps<{
-  label?: string
-  defaultCollapse?: boolean
-}>()
-const isCollapse = defineModel<boolean>('collapse', { default: false })
-
-if (props.defaultCollapse) {
-  isCollapse.value = true
-}
-watch(
-  () => props.defaultCollapse,
-  (value) => (isCollapse.value = value)
-)
-</script>
-
-<template>
-  <div class="flex flex-col">
-    <div
-      class="sticky top-0 z-10 flex items-center justify-between backdrop-blur-xl min-h-12"
-    >
-      <button
-        class="group min-h-12 bg-transparent border-0 outline-0 ring-0 w-full text-left flex items-center justify-between pl-4 pr-3 cursor-pointer"
-        @click="isCollapse = !isCollapse"
-      >
-        <span class="text-sm font-semibold line-clamp-2">
-          <slot name="label">
-            {{ props.label ?? '' }}
-          </slot>
-        </span>
-
-        <i
-          :class="
-            cn(
-              'icon-[lucide--chevron-down] size-5 min-w-5 transition-all',
-              isCollapse && 'rotate-90'
-            )
-          "
-          class="relative top-px text-xs leading-none text-node-component-header-icon group-hover:text-base-foreground"
-        />
-      </button>
-    </div>
-    <div v-if="!isCollapse" class="pb-4">
-      <slot />
-    </div>
-  </div>
-</template>

src/components/rightSidePanel/layout/SidePanelSearch.vue

@@ -1,39 +1,31 @@
 <script setup lang="ts">
 import { refDebounced } from '@vueuse/core'
-import { ref, toRef, watch } from 'vue'
+import { ref, toRef, toValue, watch } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
 
 import { cn } from '@/utils/tailwindUtil'
 
-const props = withDefaults(
-  defineProps<{
-    searcher?: (
-      query: string,
-      onCleanup: (cleanupFn: () => void) => void
-    ) => Promise<void>
-    updateKey?: (() => unknown) | unknown
-  }>(),
-  {
-    searcher: async () => {}
-  }
-)
+const { searcher = async () => {}, updateKey } = defineProps<{
+  searcher?: (
+    query: string,
+    onCleanup: (cleanupFn: () => void) => void
+  ) => Promise<void>
+  updateKey?: MaybeRefOrGetter<unknown>
+}>()
 
 const searchQuery = defineModel<string>({ default: '' })
 
 const isQuerying = ref(false)
-const debouncedSearchQuery = refDebounced(searchQuery, 700, {
-  maxWait: 700
+const debouncedSearchQuery = refDebounced(searchQuery, 100, {
+  maxWait: 100
 })
 watch(searchQuery, (value) => {
   isQuerying.value = value !== debouncedSearchQuery.value
 })
-
-const updateKey =
-  typeof props.updateKey === 'function'
-    ? props.updateKey
-    : toRef(props, 'updateKey')
+const updateKeyRef = toRef(() => toValue(updateKey))
 
 watch(
-  [debouncedSearchQuery, updateKey],
+  [debouncedSearchQuery, updateKeyRef],
   (_, __, onCleanup) => {
     let isCleanup = false
     let cleanupFn: undefined | (() => void)
@@ -42,8 +34,10 @@ watch(
       cleanupFn?.()
     })
 
-    void props
-      .searcher(debouncedSearchQuery.value, (cb) => (cleanupFn = cb))
+    void searcher(debouncedSearchQuery.value, (cb) => (cleanupFn = cb))
+      .catch((error) => {
+        console.error('[SidePanelSearch] searcher failed', error)
+      })
       .finally(() => {
         if (!isCleanup) isQuerying.value = false
       })
@@ -56,24 +50,28 @@ watch(
   <label
     :class="
       cn(
-        'h-8 bg-zinc-500/20 rounded-lg outline outline-offset-[-1px] outline-node-component-border transition-all duration-150',
-        'flex-1 flex px-2 items-center text-base leading-none cursor-text',
-        searchQuery?.trim() !== '' ? 'text-base-foreground' : '',
-        'hover:outline-component-node-widget-background-highlighted/80',
-        'focus-within:outline-component-node-widget-background-highlighted/80'
+        'mt-1 py-1.5 bg-secondary-background rounded-lg transition-all duration-150',
+        'flex-1 flex gap-2 px-2 items-center',
+        'text-base-foreground border-0',
+        'focus-within:ring focus-within:ring-component-node-widget-background-highlighted/80'
       )
     "
   >
     <i
-      v-if="isQuerying"
-      class="mr-2 icon-[lucide--loader-circle] size-4 animate-spin"
+      :class="
+        cn(
+          'size-4 text-muted-foreground',
+          isQuerying
+            ? 'icon-[lucide--loader-circle] animate-spin'
+            : 'icon-[lucide--search]'
+        )
+      "
     />
-    <i v-else class="mr-2 icon-[lucide--search] size-4" />
     <input
       v-model="searchQuery"
       type="text"
-      class="bg-transparent border-0 outline-0 ring-0 text-left"
-      :placeholder="$t('g.search')"
+      class="bg-transparent border-0 outline-0 ring-0 h-5"
+      :placeholder="$t('g.searchPlaceholder')"
     />
   </label>
 </template>

src/components/rightSidePanel/parameters/SectionWidgets.vue

@@ -1,15 +1,20 @@
 <script setup lang="ts">
-import { provide } from 'vue'
+import { computed, provide } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import WidgetLegacy from '@/renderer/extensions/vueNodes/widgets/components/WidgetLegacy.vue'
-import { getComponent } from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
+import {
+  getComponent,
+  shouldExpand
+} from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
+import { cn } from '@/utils/tailwindUtil'
 
-import RightPanelSection from '../layout/RightPanelSection.vue'
+import PropertiesAccordionItem from '../layout/PropertiesAccordionItem.vue'
 
-defineProps<{
+const { label, widgets } = defineProps<{
   label?: string
   widgets: { widget: IBaseWidget; node: LGraphNode }[]
 }>()
@@ -17,6 +22,7 @@ defineProps<{
 provide('hideLayoutField', true)
 
 const canvasStore = useCanvasStore()
+const { t } = useI18n()
 
 function getWidgetComponent(widget: IBaseWidget) {
   const component = getComponent(widget.type, widget.name)
@@ -31,17 +37,27 @@ function onWidgetValueChange(
   widget.callback?.(value)
   canvasStore.canvas?.setDirty(true, true)
 }
+
+const isEmpty = computed(() => widgets.length === 0)
+
+const displayLabel = computed(
+  () =>
+    label ??
+    (isEmpty.value
+      ? t('rightSidePanel.inputsNone')
+      : t('rightSidePanel.inputs'))
+)
 </script>
 
 <template>
-  <RightPanelSection>
+  <PropertiesAccordionItem :is-empty>
     <template #label>
       <slot name="label">
-        {{ label ?? $t('rightSidePanel.inputs') }}
+        {{ displayLabel }}
       </slot>
     </template>
 
-    <div class="space-y-4 rounded-lg bg-interface-surface px-4">
+    <div v-if="!isEmpty" class="space-y-4 rounded-lg bg-interface-surface px-4">
       <div
         v-for="({ widget, node }, index) in widgets"
         :key="`widget-${index}-${widget.name}`"
@@ -58,7 +74,7 @@ function onWidgetValueChange(
           :model-value="widget.value"
           :node-id="String(node.id)"
           :node-type="node.type"
-          class="col-span-1"
+          :class="cn('col-span-1', shouldExpand(widget.type) && 'min-h-36')"
           @update:model-value="
             (value: string | number | boolean | object) =>
               onWidgetValueChange(widget, value)
@@ -66,5 +82,5 @@ function onWidgetValueChange(
         />
       </div>
     </div>
-  </RightPanelSection>
+  </PropertiesAccordionItem>
 </template>

src/components/rightSidePanel/parameters/TabParameters.vue

@@ -7,35 +7,30 @@ import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import SidePanelSearch from '../layout/SidePanelSearch.vue'
 import SectionWidgets from './SectionWidgets.vue'
 
-const props = defineProps<{
+const { nodes } = defineProps<{
   nodes: LGraphNode[]
 }>()
 
-const widgetsSectionDataList = computed(() => {
-  const list: {
-    widgets: { node: LGraphNode; widget: IBaseWidget }[]
-    node: LGraphNode
-  }[] = []
-  for (const node of props.nodes) {
-    const shownWidgets: IBaseWidget[] = []
-    for (const widget of node.widgets ?? []) {
-      if (widget.options?.canvasOnly || widget.options?.hidden) continue
-      shownWidgets.push(widget)
-    }
-    list.push({
-      widgets: shownWidgets?.map((widget) => ({ node, widget })) ?? [],
+type NodeWidgetsList = Array<{ node: LGraphNode; widget: IBaseWidget }>
+type NodeWidgetsListList = Array<{
+  node: LGraphNode
+  widgets: NodeWidgetsList
+}>
+
+const widgetsSectionDataList = computed((): NodeWidgetsListList => {
+  return nodes.map((node) => {
+    const { widgets = [] } = node
+    const shownWidgets = widgets
+      .filter((w) => !(w.options?.canvasOnly || w.options?.hidden))
+      .map((widget) => ({ node, widget }))
+    return {
+      widgets: shownWidgets,
       node
-    })
-  }
-  return list
+    }
+  })
 })
 
-const searchedWidgetsSectionDataList = shallowRef<
-  {
-    widgets: { node: LGraphNode; widget: IBaseWidget }[]
-    node: LGraphNode
-  }[]
->([])
+const searchedWidgetsSectionDataList = shallowRef<NodeWidgetsListList>([])
 
 /**
  * Searches widgets in all selected nodes and returns search results.
@@ -72,7 +67,7 @@ async function searcher(query: string) {
 </script>
 
 <template>
-  <div class="p-4 flex gap-2 border-b border-interface-stroke">
+  <div class="px-4 pb-4 flex gap-2 border-b border-interface-stroke">
     <SidePanelSearch :searcher :update-key="widgetsSectionDataList" />
   </div>
   <SectionWidgets

src/components/rightSidePanel/settings/TabSettings.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="space-y-4 rounded-lg bg-interface-surface p-3">
+  <div class="space-y-4 p-3 text-sm text-muted-foreground">
     <!-- Node State -->
     <div class="flex flex-col gap-2">
-      <span class="text-sm text-text-secondary">
+      <span>
         {{ t('rightSidePanel.nodeState') }}
       </span>
       <FormSelectButton
@@ -27,11 +27,11 @@
 
     <!-- Color Picker -->
     <div class="flex flex-col gap-2">
-      <span class="text-sm text-text-secondary">
+      <span>
         {{ t('rightSidePanel.color') }}
       </span>
       <div
-        class="bg-component-node-widget-background text-component-node-foreground border-none rounded-lg p-1 grid grid-cols-5 gap-1 justify-items-center"
+        class="bg-secondary-background border-none rounded-lg p-1 grid grid-cols-5 gap-1 justify-items-center"
       >
         <button
           v-for="option of colorOptions"
@@ -39,12 +39,9 @@
           :class="
             cn(
               'size-8 rounded-lg bg-transparent border-0 outline-0 ring-0 text-left flex justify-center items-center cursor-pointer',
-              {
-                'bg-interface-menu-component-surface-selected':
-                  option.name === nodeColor,
-                'hover:bg-interface-menu-component-surface-selected':
-                  option.name !== nodeColor
-              }
+              option.name === nodeColor
+                ? 'bg-interface-menu-component-surface-selected'
+                : 'hover:bg-interface-menu-component-surface-selected'
             )
           "
           @click="nodeColor = option.name"
@@ -71,7 +68,7 @@
 
     <!-- Pinned Toggle -->
     <div class="flex items-center justify-between">
-      <span class="text-sm text-text-secondary">
+      <span>
         {{ t('rightSidePanel.pinned') }}
       </span>
       <ToggleSwitch v-model="isPinned" />
@@ -81,7 +78,7 @@
 
 <script setup lang="ts">
 import ToggleSwitch from 'primevue/toggleswitch'
-import { computed, shallowRef, triggerRef, watchEffect } from 'vue'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { LGraphCanvas, LiteGraph } from '@/lib/litegraph/src/litegraph'
@@ -93,8 +90,7 @@ import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { adjustColor } from '@/utils/colorUtil'
 import { cn } from '@/utils/tailwindUtil'
 
-const props = defineProps<{
-  node?: LGraphNode
+const { nodes = [] } = defineProps<{
   nodes?: LGraphNode[]
 }>()
 
@@ -106,36 +102,25 @@ const isLightTheme = computed(
   () => colorPaletteStore.completedActivePalette.light_theme
 )
 
-const targetNodes = shallowRef<LGraphNode[]>([])
-watchEffect(() => {
-  if (props.node) {
-    targetNodes.value = [props.node]
-  } else {
-    targetNodes.value = props.nodes || []
-  }
-})
-
 const nodeState = computed({
-  get() {
-    let mode: LGraphNode['mode'] | null = null
+  get(): LGraphNode['mode'] | null {
+    if (!nodes.length) return null
+    if (nodes.length === 1) {
+      return nodes[0].mode
+    }
 
     // For multiple nodes, if all nodes have the same mode, return that mode, otherwise return null
-    if (targetNodes.value.length > 1) {
-      mode = targetNodes.value[0].mode
-      if (!targetNodes.value.every((node) => node.mode === mode)) {
-        mode = null
-      }
-    } else {
-      mode = targetNodes.value[0].mode
+    const mode: LGraphNode['mode'] = nodes[0].mode
+    if (!nodes.every((node) => node.mode === mode)) {
+      return null
     }
 
     return mode
   },
   set(value: LGraphNode['mode']) {
-    targetNodes.value.forEach((node) => {
+    nodes.forEach((node) => {
       node.mode = value
     })
-    triggerRef(targetNodes)
     canvasStore.canvas?.setDirty(true, true)
   }
 })
@@ -143,11 +128,10 @@ const nodeState = computed({
 // Pinned state
 const isPinned = computed<boolean>({
   get() {
-    return targetNodes.value.some((node) => node.pinned)
+    return nodes.some((node) => node.pinned)
   },
   set(value) {
-    targetNodes.value.forEach((node) => node.pin(value))
-    triggerRef(targetNodes)
+    nodes.forEach((node) => node.pin(value))
     canvasStore.canvas?.setDirty(true, true)
   }
 })
@@ -191,10 +175,8 @@ const colorOptions: NodeColorOption[] = [
 
 const nodeColor = computed<NodeColorOption['name'] | null>({
   get() {
-    if (targetNodes.value.length === 0) return null
-    const theColorOptions = targetNodes.value.map((item) =>
-      item.getColorOption()
-    )
+    if (nodes.length === 0) return null
+    const theColorOptions = nodes.map((item) => item.getColorOption())
 
     let colorOption: ColorOption | null | false = theColorOptions[0]
     if (!theColorOptions.every((option) => option === colorOption)) {
@@ -220,10 +202,9 @@ const nodeColor = computed<NodeColorOption['name'] | null>({
         ? null
         : LGraphCanvas.node_colors[colorName]
 
-    for (const item of targetNodes.value) {
+    for (const item of nodes) {
       item.setColorOption(canvasColorOption)
     }
-    triggerRef(targetNodes)
     canvasStore.canvas?.setDirty(true, true)
   }
 })

src/components/tab/Tab.vue

@@ -12,19 +12,19 @@
   </button>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends string = string">
 import type { Ref } from 'vue'
 import { computed, inject } from 'vue'
 
 import { cn } from '@/utils/tailwindUtil'
 
 const { value, panelId } = defineProps<{
-  value: string
+  value: T
   panelId?: string
 }>()
 
-const currentValue = inject<Ref<string>>('tabs-value')
-const updateValue = inject<(value: string) => void>('tabs-update')
+const currentValue = inject<Ref<T>>('tabs-value')
+const updateValue = inject<(value: T) => void>('tabs-update')
 
 const tabId = computed(() => `tab-${value}`)
 const isActive = computed(() => currentValue?.value === value)

src/components/tab/TabList.stories.ts

@@ -3,8 +3,13 @@ import { ref } from 'vue'
 
 import Tab from './Tab.vue'
 import TabList from './TabList.vue'
+import type { ComponentExposed } from 'vue-component-type-helpers'
 
-const meta: Meta<typeof TabList> = {
+interface GenericMeta<C> extends Omit<Meta<C>, 'component'> {
+  component: ComponentExposed<C>
+}
+
+const meta: GenericMeta<typeof TabList> = {
   title: 'Components/Tab/TabList',
   component: TabList,
   tags: ['autodocs'],

src/components/tab/TabList.vue

@@ -4,14 +4,14 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends string = string">
 import { provide } from 'vue'
 
-const modelValue = defineModel<string>({ required: true })
+const modelValue = defineModel<T>({ required: true })
 
 // Provide for child Tab components
 provide('tabs-value', modelValue)
-provide('tabs-update', (value: string) => {
+provide('tabs-update', (value: T) => {
   modelValue.value = value
 })
 </script>

src/locales/en/main.json

@@ -2259,20 +2259,17 @@
   "rightSidePanel": {
     "togglePanel": "Toggle properties panel",
     "noSelection": "Select a node to see its properties and info.",
-    "multipleSelection": "{count} items selected",
+    "title": "No node(s) selected | 1 node selected | {count} nodes selected",
     "parameters": "Parameters",
     "info": "Info",
-    "nodeType": "Type",
-    "nodeId": "ID",
-    "description": "Description",
     "color": "Node color",
     "pinned": "Pinned",
     "bypass": "Bypass",
     "normal": "Normal",
     "mute": "Mute",
     "inputs": "INPUTS",
-    "properties": "Properties",
-    "nodeState": "Node state",
-    "settings": "Settings"
+    "inputsNone": "NO INPUTS",
+    "inputsNoneTooltip": "Node has no inputs",
+    "nodeState": "Node state"
   }
-}
+}

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

@@ -83,6 +83,7 @@ import WidgetDOM from '@/renderer/extensions/vueNodes/widgets/components/WidgetD
 import WidgetLegacy from '@/renderer/extensions/vueNodes/widgets/components/WidgetLegacy.vue'
 import {
   getComponent,
+  shouldExpand,
   shouldRenderAsVue
 } from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
 import type { SimplifiedWidget, WidgetValue } from '@/types/simplifiedWidget'
@@ -192,28 +193,11 @@ const processedWidgets = computed((): ProcessedWidget[] => {
   return result
 })
 
-// TODO: Derive from types in widgetRegistry
-const EXPANDING_TYPES = [
-  'textarea',
-  'TEXTAREA',
-  'multiline',
-  'customtext',
-  'markdown',
-  'MARKDOWN',
-  'progressText',
-  'load3D',
-  'LOAD_3D'
-] as const
-
 const gridTemplateRows = computed((): string => {
   const widgets = toValue(processedWidgets)
   return widgets
     .filter((w) => !w.simplified.options?.hidden)
-    .map((w) =>
-      EXPANDING_TYPES.includes(w.type as (typeof EXPANDING_TYPES)[number])
-        ? 'auto'
-        : 'min-content'
-    )
+    .map((w) => (shouldExpand(w.type) ? 'auto' : 'min-content'))
     .join(' ')
 })
 </script>

src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts

@@ -197,3 +197,12 @@ export const isEssential = (type: string): boolean => {
 export const shouldRenderAsVue = (widget: Partial<SafeWidgetData>): boolean => {
   return !widget.options?.canvasOnly && !!widget.type
 }
+
+const EXPANDING_TYPES = ['textarea', 'markdown', 'load3D'] as const
+
+export function shouldExpand(type: string): boolean {
+  const canonicalType = getCanonicalType(type)
+  return EXPANDING_TYPES.includes(
+    canonicalType as (typeof EXPANDING_TYPES)[number]
+  )
+}

src/stores/workspace/rightSidePanelStore.ts

@@ -1,52 +1,38 @@
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 
-type RightSidePanelTab = 'parameters' | 'settings' | 'info'
+export type RightSidePanelTab = 'parameters' | 'settings' | 'info' | 'subgraph'
 
 /**
  * Store for managing the right side panel state.
  * This panel displays properties and settings for selected nodes.
  */
 export const useRightSidePanelStore = defineStore('rightSidePanel', () => {
-  // Panel visibility state
   const isOpen = ref(false)
-  const isEditingSubgraph = ref(false)
-
-  // Active tab in the node properties panel
   const activeTab = ref<RightSidePanelTab>('parameters')
+  const isEditingSubgraph = computed(() => activeTab.value === 'subgraph')
 
-  // Actions
-  function openPanel(tab?: RightSidePanelTab | 'subgraph') {
+  function openPanel(tab?: RightSidePanelTab) {
     isOpen.value = true
-    if (tab === 'subgraph') {
-      activeTab.value = 'parameters'
-      isEditingSubgraph.value = true
-    } else if (tab) {
+    if (tab) {
       activeTab.value = tab
-      isEditingSubgraph.value = false
     }
   }
 
   function closePanel() {
     isOpen.value = false
-    isEditingSubgraph.value = false
   }
 
   function togglePanel() {
     isOpen.value = !isOpen.value
   }
 
-  function setActiveTab(tab: RightSidePanelTab) {
-    activeTab.value = tab
-  }
-
   return {
     isOpen,
     activeTab,
     isEditingSubgraph,
     openPanel,
     closePanel,
-    togglePanel,
-    setActiveTab
+    togglePanel
   }
 })