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/stores/workspace/rightSidePanelStore.ts

@@ -1,16 +1,33 @@
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 
-export type RightSidePanelTab = 'parameters' | 'settings' | 'info' | 'subgraph'
+import { useSettingStore } from '@/platform/settings/settingStore'
+
+export type RightSidePanelTab =
+  | 'parameters'
+  | 'nodes'
+  | 'settings'
+  | 'info'
+  | 'subgraph'
+
+type RightSidePanelSection = 'advanced-inputs' | string
 
 /**
  * Store for managing the right side panel state.
  * This panel displays properties and settings for selected nodes.
  */
 export const useRightSidePanelStore = defineStore('rightSidePanel', () => {
-  const isOpen = ref(false)
+  const settingStore = useSettingStore()
+
+  const isOpen = computed({
+    get: () => settingStore.get('Comfy.RightSidePanel.IsOpen'),
+    set: (value: boolean) =>
+      settingStore.set('Comfy.RightSidePanel.IsOpen', value)
+  })
   const activeTab = ref<RightSidePanelTab>('parameters')
   const isEditingSubgraph = computed(() => activeTab.value === 'subgraph')
+  const focusedSection = ref<RightSidePanelSection | null>(null)
+  const searchQuery = ref('')
 
   function openPanel(tab?: RightSidePanelTab) {
     isOpen.value = true
@@ -27,12 +44,33 @@ export const useRightSidePanelStore = defineStore('rightSidePanel', () => {
     isOpen.value = !isOpen.value
   }
 
+  /**
+   * Focus on a specific section in the right side panel.
+   * This will open the panel, switch to the parameters tab, and signal
+   * the component to expand and scroll to the section.
+   */
+  function focusSection(section: RightSidePanelSection) {
+    openPanel('parameters')
+    focusedSection.value = section
+  }
+
+  /**
+   * Clear the focused section after it has been handled.
+   */
+  function clearFocusedSection() {
+    focusedSection.value = null
+  }
+
   return {
     isOpen,
     activeTab,
     isEditingSubgraph,
+    focusedSection,
+    searchQuery,
     openPanel,
     closePanel,
-    togglePanel
+    togglePanel,
+    focusSection,
+    clearFocusedSection
   }
 })