feat: App mode - double click to rename widget (#10341)

## Summary

Allows users to rename widgets by double clicking the label

## Changes

- **What**: Uses EditableText component to allow inline renaming

## Screenshots (if applicable)


https://github.com/user-attachments/assets/f5cbb908-14cf-4dfa-8eb2-1024284effef

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-10341-feat-App-mode-double-click-to-rename-widget-3296d73d36508146bbccf8c29f56dc96)
by [Unito](https://www.unito.io)

browser_tests/fixtures/helpers/AppModeHelper.ts

@@ -160,4 +160,42 @@ export class AppModeHelper {
     await dialogInput.waitFor({ state: 'hidden' })
     await this.comfyPage.nextFrame()
   }
+
+  /**
+   * Rename a builder IoItem via the popover menu "Rename" action.
+   * @param title The current widget title shown in the IoItem.
+   * @param newName The new name to assign.
+   */
+  async renameBuilderInputViaMenu(title: string, newName: string) {
+    const menu = this.getBuilderInputItemMenu(title)
+    await menu.click()
+    await this.page.getByText('Rename', { exact: true }).click()
+
+    const input = this.page
+      .getByTestId(TestIds.builder.ioItemTitle)
+      .getByRole('textbox')
+    await input.fill(newName)
+    await this.page.keyboard.press('Enter')
+    await this.comfyPage.nextFrame()
+  }
+
+  /**
+   * Rename a builder IoItem by double-clicking its title to trigger
+   * inline editing.
+   * @param title The current widget title shown in the IoItem.
+   * @param newName The new name to assign.
+   */
+  async renameBuilderInput(title: string, newName: string) {
+    const titleEl = this.page
+      .getByTestId(TestIds.builder.ioItemTitle)
+      .filter({ hasText: title })
+    await titleEl.dblclick()
+
+    const input = this.page
+      .getByTestId(TestIds.builder.ioItemTitle)
+      .getByRole('textbox')
+    await input.fill(newName)
+    await this.page.keyboard.press('Enter')
+    await this.comfyPage.nextFrame()
+  }
 }

browser_tests/fixtures/selectors.ts

@@ -64,6 +64,7 @@ export const TestIds = {
   },
   builder: {
     ioItem: 'builder-io-item',
+    ioItemTitle: 'builder-io-item-title',
     widgetActionsMenu: 'widget-actions-menu'
   },
   breadcrumb: {

browser_tests/tests/appModeWidgetRename.spec.ts

@@ -82,7 +82,9 @@ test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
   })
 
-  test('Rename from builder input-select sidebar', async ({ comfyPage }) => {
+  test('Rename from builder input-select sidebar via menu', async ({
+    comfyPage
+  }) => {
     const { appMode } = comfyPage
     await setupSubgraphBuilder(comfyPage)
 
@@ -91,11 +93,11 @@ test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
 
     const menu = appMode.getBuilderInputItemMenu('seed')
     await expect(menu).toBeVisible({ timeout: 5000 })
-    await appMode.renameWidget(menu, 'Builder Input Seed')
+    await appMode.renameBuilderInputViaMenu('seed', 'Builder Input Seed')
 
     // Verify in app mode after save/reload
     await appMode.exitBuilder()
-    const workflowName = `${new Date().getTime()} builder-input`
+    const workflowName = `${new Date().getTime()} builder-input-menu`
     await saveAndReopenInAppMode(comfyPage, workflowName)
 
     await expect(appMode.linearWidgets).toBeVisible({ timeout: 5000 })
@@ -104,6 +106,24 @@ test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
     ).toBeVisible()
   })
 
+  test('Rename from builder input-select sidebar via double-click', async ({
+    comfyPage
+  }) => {
+    const { appMode } = comfyPage
+    await setupSubgraphBuilder(comfyPage)
+
+    await appMode.goToInputs()
+
+    await appMode.renameBuilderInput('seed', 'Dblclick Seed')
+
+    await appMode.exitBuilder()
+    const workflowName = `${new Date().getTime()} builder-input-dblclick`
+    await saveAndReopenInAppMode(comfyPage, workflowName)
+
+    await expect(appMode.linearWidgets).toBeVisible({ timeout: 5000 })
+    await expect(appMode.linearWidgets.getByText('Dblclick Seed')).toBeVisible()
+  })
+
   test('Rename from builder preview sidebar', async ({ comfyPage }) => {
     const { appMode } = comfyPage
     await setupSubgraphBuilder(comfyPage)

src/components/builder/AppBuilder.vue

@@ -25,7 +25,7 @@ import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteracti
 import TransformPane from '@/renderer/core/layout/transform/TransformPane.vue'
 import { app } from '@/scripts/app'
 import { DOMWidgetImpl } from '@/scripts/domWidget'
-import { promptRenameWidget } from '@/utils/widgetUtil'
+import { renameWidget } from '@/utils/widgetUtil'
 import { useAppMode } from '@/composables/useAppMode'
 import { nodeTypeValidForApp, useAppModeStore } from '@/stores/appModeStore'
 import { resolveNodeWidget } from '@/utils/litegraphUtil'
@@ -63,7 +63,7 @@ const inputsWithState = computed(() =>
       widgetName,
       label: widget.label,
       subLabel: node.title,
-      rename: () => promptRenameWidget(widget, node, t)
+      canRename: true
     }
   })
 )
@@ -74,6 +74,16 @@ const outputsWithState = computed<[NodeId, string][]>(() =>
   ])
 )
 
+function inlineRenameInput(
+  nodeId: NodeId,
+  widgetName: string,
+  newLabel: string
+) {
+  const [node, widget] = resolveNodeWidget(nodeId, widgetName)
+  if (!node || !widget) return
+  renameWidget(widget, node, newLabel)
+}
+
 function getHovered(
   e: MouseEvent
 ): undefined | [LGraphNode, undefined] | [LGraphNode, IBaseWidget] {
@@ -234,7 +244,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
               widgetName,
               label,
               subLabel,
-              rename
+              canRename
             } in inputsWithState"
             :key="`${nodeId}: ${widgetName}`"
             :class="
@@ -242,7 +252,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
             "
             :title="label ?? widgetName"
             :sub-title="subLabel"
-            :rename
+            :can-rename="canRename"
             :remove="
               () =>
                 remove(
@@ -250,6 +260,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
                   ([id, name]) => nodeId == id && widgetName === name
                 )
             "
+            @rename="inlineRenameInput(nodeId, widgetName, $event)"
           />
         </DraggableList>
       </PropertiesAccordionItem>

src/components/builder/IoItem.vue

@@ -2,31 +2,43 @@
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import EditableText from '@/components/common/EditableText.vue'
 import Popover from '@/components/ui/Popover.vue'
 import Button from '@/components/ui/button/Button.vue'
+import { cn } from '@/utils/tailwindUtil'
 
 const { t } = useI18n()
 
-const titleTooltip = ref<string | null>(null)
 const subTitleTooltip = ref<string | null>(null)
+const isEditing = ref(false)
 
 function isTruncated(e: MouseEvent): boolean {
   const el = e.currentTarget as HTMLElement
   return el.scrollWidth > el.clientWidth
 }
-const { rename, remove } = defineProps<{
+const { title, canRename, remove } = defineProps<{
   title: string
   subTitle?: string
-  rename?: () => void
+  canRename?: boolean
   remove?: () => void
 }>()
 
+const emit = defineEmits<{
+  rename: [newName: string]
+}>()
+
+function onEditComplete(newName: string) {
+  isEditing.value = false
+  const trimmed = newName.trim()
+  if (trimmed && trimmed !== title) emit('rename', trimmed)
+}
+
 const entries = computed(() => {
   const items = []
-  if (rename)
+  if (canRename)
     items.push({
       label: t('g.rename'),
-      command: rename,
+      command: () => setTimeout(() => (isEditing.value = true)),
       icon: 'icon-[lucide--pencil]'
     })
   if (remove)
@@ -43,13 +55,24 @@ const entries = computed(() => {
     class="my-2 flex items-center-safe gap-2 rounded-lg p-2"
     data-testid="builder-io-item"
   >
-    <div class="drag-handle mr-auto flex min-w-0 flex-col gap-1">
-      <div
-        v-tooltip.left="{ value: titleTooltip, showDelay: 300 }"
-        class="drag-handle truncate text-sm"
+    <div class="drag-handle mr-auto flex w-full min-w-0 flex-col gap-1">
+      <EditableText
+        :model-value="title"
+        :is-editing="isEditing"
+        :input-attrs="{ class: 'p-1' }"
+        :class="
+          cn(
+            'drag-handle h-5 text-sm',
+            isEditing && 'relative -top-0.5 -left-1 -mt-px mb-px -ml-px',
+            !isEditing && 'truncate'
+          )
+        "
         data-testid="builder-io-item-title"
-        @mouseenter="titleTooltip = isTruncated($event) ? title : null"
-        v-text="title"
+        label-class="drag-handle"
+        label-type="div"
+        @dblclick="canRename && (isEditing = true)"
+        @edit="onEditComplete"
+        @cancel="isEditing = false"
       />
       <div
         v-tooltip.left="{ value: subTitleTooltip, showDelay: 300 }"

src/components/common/EditableText.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="editable-text">
-    <span v-if="!isEditing">
+    <component :is="labelType" v-if="!isEditing" :class="labelClass">
       {{ modelValue }}
-    </span>
+    </component>
     <!-- Avoid double triggering finishEditing event when keydown.enter is triggered -->
     <InputText
       v-else
@@ -35,11 +35,15 @@ import { nextTick, ref, watch } from 'vue'
 const {
   modelValue,
   isEditing = false,
-  inputAttrs = {}
+  inputAttrs = {},
+  labelClass = '',
+  labelType = 'span'
 } = defineProps<{
   modelValue: string
   isEditing?: boolean
   inputAttrs?: Record<string, string>
+  labelClass?: string
+  labelType?: string
 }>()
 
 const emit = defineEmits(['edit', 'cancel'])