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/TabNormalInputs.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { computed, ref, shallowRef } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import FormSearchInput from '@/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue'
+import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
+
+import { searchWidgetsAndNodes } from '../shared'
+import type { NodeWidgetsListList } from '../shared'
+import SectionWidgets from './SectionWidgets.vue'
+
+const { nodes, mustShowNodeTitle } = defineProps<{
+  mustShowNodeTitle?: boolean
+  nodes: LGraphNode[]
+}>()
+
+const { t } = useI18n()
+
+const rightSidePanelStore = useRightSidePanelStore()
+const { searchQuery } = storeToRefs(rightSidePanelStore)
+
+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 }
+  })
+})
+
+const isMultipleNodesSelected = computed(
+  () => widgetsSectionDataList.value.length > 1
+)
+
+const searchedWidgetsSectionDataList = shallowRef<NodeWidgetsListList>(
+  widgetsSectionDataList.value
+)
+const isSearching = ref(false)
+
+async function searcher(query: string) {
+  const list = widgetsSectionDataList.value
+  const target = searchedWidgetsSectionDataList
+  isSearching.value = query.trim() !== ''
+  target.value = searchWidgetsAndNodes(list, query)
+}
+
+const label = computed(() => {
+  const sections = widgetsSectionDataList.value
+  return !mustShowNodeTitle && sections.length === 1
+    ? sections[0].widgets.length !== 0
+      ? t('rightSidePanel.inputs')
+      : t('rightSidePanel.inputsNone')
+    : undefined // SectionWidgets display node titles by default
+})
+</script>
+
+<template>
+  <div class="px-4 pt-1 pb-4 flex gap-2 border-b border-interface-stroke">
+    <FormSearchInput
+      v-model="searchQuery"
+      :searcher
+      :update-key="widgetsSectionDataList"
+    />
+  </div>
+  <TransitionGroup tag="div" name="list-scale" class="relative">
+    <div
+      v-if="searchedWidgetsSectionDataList.length === 0"
+      class="text-sm text-muted-foreground px-4 py-10 text-center"
+    >
+      {{
+        isSearching
+          ? t('rightSidePanel.noneSearchDesc')
+          : t('rightSidePanel.nodesNoneDesc')
+      }}
+    </div>
+    <SectionWidgets
+      v-for="{ widgets, node } in searchedWidgetsSectionDataList"
+      :key="node.id"
+      :node
+      :label
+      :widgets
+      :collapse="isMultipleNodesSelected && !isSearching"
+      :show-locate-button="isMultipleNodesSelected"
+      :tooltip="
+        isSearching || widgets.length
+          ? ''
+          : t('rightSidePanel.inputsNoneTooltip')
+      "
+      class="border-b border-interface-stroke"
+    />
+  </TransitionGroup>
+</template>