feat: right side panel favorites, no selection state, and more... (#7812)

Most of the features in this pull request are completed and can be
reviewed and merged.

## TODO

- [x] no selection panel
- [x] group selected panel
- [x] tabs 
  - [x] favorites tab
  - [x] global settings tab
  - [x] nodes tab
- [x] widget actions menu 
  - [x] [Bug]: style bugs
- [x] button zoom to the node on canvas.
- [x] rename widgets on widget actions
  - [ ] [Bug]: the canvas has not been updated after renaming. 
- [x] global settings
  - [ ] setting item: "show advanced parameters"
    - blocked by other things. skip for now.
  - [x] setting item: show toolbox on selection 
  - [x] setting item: nodes 2.0
  - [ ] setting item: "background color"
    - blocked by other things. skip for now.
  - [x] setting item: grid spacing
  - [x] setting item: snap nodes to grid
  - [x] setting item: link shape
  - [x] setting item: show connected links
  - [x] form style reuses the form style of node widgets
- [x] group node cases
  - [x] group node settings
  - [x] show all nodes in group
  - [x] show frame name on nodes when multiple selections are made
  - [x] group multiple selections
- [x] [Bug]: nodes without widgets cannot display the location and their
group
  - [x] [Bug]: labels layout
- [x] favorites
  - [x] the indicator on widgets
  - [x] favorite and unfavorite buttons on widgets
- [x] [Bug]: show node name in favorite widgets + improve labels layout
- [ ] [Bug]: After canceling the like, the like list will not be updated
immediately.
- [x] [Bug]: The favorite function does not work for the project on
Subgraph.
- [x] subgraph
- [x] add the node name from where this parameter comes from when node
is subgraph
  - [x] show and hide directly on Inputs
    - [x] some bugs need to be fixed.
- [x] advanced widgets 
  - [x] button: show advanced inputs
- Clicking button expands the "Advanced Inputs" section on the right
side panel, regardless of whether the panel is open or not
    - [x] [Bug]: style bugs
  - [x] advanced inputs section when node is subgraph
- [x] inputs tab rearranging
  - [x] favorited inputs rearranging
  - [x] subgraph inputs rearranging
- [ ] review and reconstruction to improve complexity and architecture

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7812-feat-right-side-panel-favorites-no-selection-state-and-more-2da6d73d36508134b503d676f9b3d248)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: bymyself <cbyrne@comfy.org>

src/components/rightSidePanel/parameters/SectionWidgets.vue

@@ -1,87 +1,185 @@
 <script setup lang="ts">
-import { computed, provide } from 'vue'
+import { computed, inject, provide, ref, shallowRef, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useReactiveWidgetValue } from '@/composables/graph/useGraphNodeManager'
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import Button from '@/components/ui/button/Button.vue'
+import { isProxyWidget } from '@/core/graph/subgraph/proxyWidget'
+import { parseProxyWidgets } from '@/core/schemas/proxyWidget'
+import type {
+  LGraphGroup,
+  LGraphNode,
+  SubgraphNode
+} 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,
-  shouldExpand
-} from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
-import { cn } from '@/utils/tailwindUtil'
 
 import PropertiesAccordionItem from '../layout/PropertiesAccordionItem.vue'
+import { GetNodeParentGroupKey } from '../shared'
+import WidgetItem from './WidgetItem.vue'
 
-const { label, widgets } = defineProps<{
+const {
+  label,
+  node,
+  widgets: widgetsProp,
+  showLocateButton = false,
+  isDraggable = false,
+  hiddenFavoriteIndicator = false,
+  showNodeName = false,
+  parents = [],
+  enableEmptyState = false,
+  tooltip
+} = defineProps<{
   label?: string
+  parents?: SubgraphNode[]
+  node?: LGraphNode
   widgets: { widget: IBaseWidget; node: LGraphNode }[]
+  showLocateButton?: boolean
+  isDraggable?: boolean
+  hiddenFavoriteIndicator?: boolean
+  showNodeName?: boolean
+  /**
+   * Whether to show the empty state slot when there are no widgets.
+   */
+  enableEmptyState?: boolean
+  tooltip?: string
 }>()
 
+const collapse = defineModel<boolean>('collapse', { default: false })
+
+const widgetsContainer = ref<HTMLElement>()
+const rootElement = ref<HTMLElement>()
+
+const widgets = shallowRef(widgetsProp)
+watchEffect(() => (widgets.value = widgetsProp))
+
 provide('hideLayoutField', true)
 
 const canvasStore = useCanvasStore()
 const { t } = useI18n()
 
-function getWidgetComponent(widget: IBaseWidget) {
-  const component = getComponent(widget.type, widget.name)
-  return component || WidgetLegacy
+const getNodeParentGroup = inject(GetNodeParentGroupKey, null)
+
+function isWidgetShownOnParents(
+  widgetNode: LGraphNode,
+  widget: IBaseWidget
+): boolean {
+  if (!parents.length) return false
+  const proxyWidgets = parseProxyWidgets(parents[0].properties.proxyWidgets)
+
+  // For proxy widgets (already promoted), check using overlay information
+  if (isProxyWidget(widget)) {
+    return proxyWidgets.some(
+      ([nodeId, widgetName]) =>
+        widget._overlay.nodeId == nodeId &&
+        widget._overlay.widgetName === widgetName
+    )
+  }
+
+  // For regular widgets (not yet promoted), check using node ID and widget name
+  return proxyWidgets.some(
+    ([nodeId, widgetName]) =>
+      widgetNode.id == nodeId && widget.name === widgetName
+  )
 }
 
-function onWidgetValueChange(
-  widget: IBaseWidget,
-  value: string | number | boolean | object
-) {
-  widget.value = value
-  widget.callback?.(value)
-  canvasStore.canvas?.setDirty(true, true)
-}
-
-const isEmpty = computed(() => widgets.length === 0)
+const isEmpty = computed(() => widgets.value.length === 0)
 
 const displayLabel = computed(
-  () =>
-    label ??
-    (isEmpty.value
-      ? t('rightSidePanel.inputsNone')
-      : t('rightSidePanel.inputs'))
+  () => label ?? (node ? node.title : t('rightSidePanel.inputs'))
 )
+
+const targetNode = computed<LGraphNode | null>(() => {
+  if (node) return node
+  if (isEmpty.value) return null
+
+  const firstNodeId = widgets.value[0].node.id
+  const allSameNode = widgets.value.every(({ node }) => node.id === firstNodeId)
+
+  return allSameNode ? widgets.value[0].node : null
+})
+
+const parentGroup = computed<LGraphGroup | null>(() => {
+  if (!targetNode.value || !getNodeParentGroup) return null
+  return getNodeParentGroup(targetNode.value)
+})
+
+const canShowLocateButton = computed(
+  () => showLocateButton && targetNode.value !== null
+)
+
+function handleLocateNode() {
+  if (!targetNode.value || !canvasStore.canvas) return
+
+  const graphNode = canvasStore.canvas.graph?.getNodeById(targetNode.value.id)
+  if (graphNode) {
+    canvasStore.canvas.animateToBounds(graphNode.boundingRect)
+  }
+}
+
+defineExpose({
+  widgetsContainer,
+  rootElement
+})
 </script>
 
 <template>
-  <PropertiesAccordionItem :is-empty>
-    <template #label>
-      <slot name="label">
-        {{ displayLabel }}
-      </slot>
-    </template>
-
-    <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}`"
-        class="widget-item gap-1.5 col-span-full grid grid-cols-subgrid"
-      >
-        <div class="min-h-8">
-          <p v-if="widget.name" class="text-sm leading-8 p-0 m-0 line-clamp-1">
-            {{ widget.label || widget.name }}
-          </p>
+  <div ref="rootElement">
+    <PropertiesAccordionItem
+      v-model:collapse="collapse"
+      :enable-empty-state
+      :disabled="isEmpty"
+      :tooltip
+    >
+      <template #label>
+        <div class="flex items-center gap-2 flex-1 min-w-0">
+          <span class="flex-1 flex items-center gap-2 min-w-0">
+            <span class="truncate">
+              <slot name="label">
+                {{ displayLabel }}
+              </slot>
+            </span>
+            <span
+              v-if="parentGroup"
+              class="text-xs text-muted-foreground truncate flex-1 text-right min-w-11"
+              :title="parentGroup.title"
+            >
+              {{ parentGroup.title }}
+            </span>
+          </span>
+          <Button
+            v-if="canShowLocateButton"
+            variant="textonly"
+            size="icon-sm"
+            class="subbutton shrink-0 mr-3 size-8 cursor-pointer text-muted-foreground hover:text-base-foreground"
+            :title="t('rightSidePanel.locateNode')"
+            :aria-label="t('rightSidePanel.locateNode')"
+            @click.stop="handleLocateNode"
+          >
+            <i class="icon-[lucide--locate] size-4" />
+          </Button>
         </div>
-        <component
-          :is="getWidgetComponent(widget)"
-          :widget="widget"
-          :model-value="useReactiveWidgetValue(widget)"
-          :node-id="String(node.id)"
-          :node-type="node.type"
-          :class="cn('col-span-1', shouldExpand(widget.type) && 'min-h-36')"
-          @update:model-value="
-            (value: string | number | boolean | object) =>
-              onWidgetValueChange(widget, value)
-          "
-        />
+      </template>
+
+      <template #empty><slot name="empty" /></template>
+
+      <div
+        ref="widgetsContainer"
+        class="space-y-2 rounded-lg px-4 pt-1 relative"
+      >
+        <TransitionGroup name="list-scale">
+          <WidgetItem
+            v-for="{ widget, node } in widgets"
+            :key="`${node.id}-${widget.name}-${widget.type}`"
+            :widget="widget"
+            :node="node"
+            :is-draggable="isDraggable"
+            :hidden-favorite-indicator="hiddenFavoriteIndicator"
+            :show-node-name="showNodeName"
+            :parents="parents"
+            :is-shown-on-parents="isWidgetShownOnParents(node, widget)"
+          />
+        </TransitionGroup>
       </div>
-    </div>
-  </PropertiesAccordionItem>
+    </PropertiesAccordionItem>
+  </div>
 </template>