fix(ui): DevFlags order in TOML export (#4155)

* fix(ui): update artist link rendering and improve button styles

Signed-off-by: Deluan <deluan@navidrome.org>

* fix(ui): Move Dev* flags before sections in export

---------

Signed-off-by: Deluan <deluan@navidrome.org>
Co-authored-by: Deluan <deluan@navidrome.org>

ui/src/utils/toml.js

@@ -127,17 +127,6 @@ export const configToToml = (configData, translate = (key) => key) => {
     tomlContent += '\n'
   }
 
-  // Add sections
-  Object.keys(regularSections)
-    .sort()
-    .forEach((sectionName) => {
-      tomlContent += `[${sectionName}]\n`
-      regularSections[sectionName].forEach(({ key, value }) => {
-        tomlContent += `${key} = ${formatTomlValue(value)}\n`
-      })
-      tomlContent += '\n'
-    })
-
   // Add dev configs if any
   if (devConfigs.length > 0) {
     tomlContent += `# ${translate('about.config.devFlagsHeader')}\n`
@@ -166,5 +155,16 @@ export const configToToml = (configData, translate = (key) => key) => {
       })
   }
 
+  // Add sections
+  Object.keys(regularSections)
+    .sort()
+    .forEach((sectionName) => {
+      tomlContent += `[${sectionName}]\n`
+      regularSections[sectionName].forEach(({ key, value }) => {
+        tomlContent += `${key} = ${formatTomlValue(value)}\n`
+      })
+      tomlContent += '\n'
+    })
+
   return tomlContent
 }

ui/src/utils/toml.test.js

@@ -199,15 +199,30 @@ describe('configToToml', () => {
         { key: 'RootKey', value: 'rootValue' },
         { key: 'Section.NestedKey', value: 'nestedValue' },
         { key: 'Section.AnotherKey', value: 'anotherValue' },
+        { key: 'DevA', value: 'DevValue' },
       ],
     }
 
     const result = configToToml(configData, mockTranslate)
+    // Fields in a section are sorted alphabetically
+    const fields = [
+      'RootKey = "rootValue"',
+      'DevA = "DevValue"',
+      '[Section]',
+      'AnotherKey = "anotherValue"',
+      'NestedKey = "nestedValue"',
+    ]
 
-    expect(result).toContain('RootKey = "rootValue"')
-    expect(result).toContain('[Section]')
-    expect(result).toContain('NestedKey = "nestedValue"')
-    expect(result).toContain('AnotherKey = "anotherValue"')
+    for (let idx = 0; idx < fields.length - 1; idx++) {
+      expect(result).toContain(fields[idx])
+
+      const idxA = result.indexOf(fields[idx])
+      const idxB = result.indexOf(fields[idx + 1])
+
+      expect(idxA).toBeLessThan(idxB)
+    }
+
+    expect(result).toContain(fields[fields.length - 1])
   })
 
   it('includes dev flags header when dev configs exist', () => {