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>

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>