[backport core/1.32] make vue node settings appear higher in the settings dialog (#6821)

Backport of #6820 to `core/1.32`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6821-backport-core-1-32-make-vue-node-settings-appear-higher-in-the-settings-dialog-2b36d73d365081f98ab0f9540ffc362c)
by [Unito](https://www.unito.io)

Co-authored-by: Christian Byrne <cbyrne@comfy.org>

src/locales/en/settings.json

@@ -335,11 +335,11 @@
     "name": "Validate workflows"
   },
   "Comfy_VueNodes_AutoScaleLayout": {
-    "name": "Auto-scale layout (Vue nodes)",
+    "name": "Auto-scale layout (Nodes 2.0)",
     "tooltip": "Automatically scale node positions when switching to Vue rendering to prevent overlap"
   },
   "Comfy_VueNodes_Enabled": {
-    "name": "Modern Node Design (Vue Nodes)",
+    "name": "Modern Node Design (Nodes 2.0)",
     "tooltip": "Modern: DOM-based rendering with enhanced interactivity, native browser features, and updated visual design. Classic: Traditional canvas rendering."
   },
   "Comfy_WidgetControlMode": {

src/platform/settings/components/SettingDialogContent.vue

@@ -107,10 +107,17 @@ const {
 
 const authActions = useFirebaseAuthActions()
 
+// Get max sortOrder from settings in a group
+const getGroupSortOrder = (group: SettingTreeNode): number =>
+  Math.max(0, ...flattenTree<SettingParams>(group).map((s) => s.sortOrder ?? 0))
+
 // Sort groups for a category
 const sortedGroups = (category: SettingTreeNode): ISettingGroup[] => {
   return [...(category.children ?? [])]
-    .sort((a, b) => a.label.localeCompare(b.label))
+    .sort((a, b) => {
+      const orderDiff = getGroupSortOrder(b) - getGroupSortOrder(a)
+      return orderDiff !== 0 ? orderDiff : a.label.localeCompare(b.label)
+    })
     .map((group) => ({
       label: group.label,
       settings: flattenTree<SettingParams>(group).sort((a, b) => {

src/platform/settings/constants/coreSettings.ts

@@ -1082,24 +1082,28 @@ export const CORE_SETTINGS: SettingParams[] = [
   },
 
   /**
-   * Vue Node System Settings
+   * Nodes 2.0 Settings
    */
   {
     id: 'Comfy.VueNodes.Enabled',
-    name: 'Modern Node Design (Vue Nodes)',
+    category: ['Comfy', 'Nodes 2.0', 'VueNodesEnabled'],
+    name: 'Modern Node Design (Nodes 2.0)',
     type: 'boolean',
     tooltip:
       'Modern: DOM-based rendering with enhanced interactivity, native browser features, and updated visual design. Classic: Traditional canvas rendering.',
     defaultValue: false,
+    sortOrder: 100,
     experimental: true,
     versionAdded: '1.27.1'
   },
   {
     id: 'Comfy.VueNodes.AutoScaleLayout',
-    name: 'Auto-scale layout (Vue nodes)',
+    category: ['Comfy', 'Nodes 2.0', 'AutoScaleLayout'],
+    name: 'Auto-scale layout (Nodes 2.0)',
     tooltip:
       'Automatically scale node positions when switching to Vue rendering to prevent overlap',
     type: 'boolean',
+    sortOrder: 50,
     experimental: true,
     defaultValue: true,
     versionAdded: '1.30.3'