feat(files): allow custom setting order

apps/files/src/models/Setting.js

@@ -9,6 +9,7 @@ export default class Setting {
 	_el
 	_name
 	_open
+	_order
 
 	/**
 	 * Create a new files app setting
@@ -19,12 +20,14 @@ export default class Setting {
 	 * @param {Function} component.el function that returns an unmounted dom element to be added
 	 * @param {Function} [component.open] callback for when setting is added
 	 * @param {Function} [component.close] callback for when setting is closed
+	 * @param {number} [component.order] the order of this setting, lower numbers are shown first
 	 */
-	constructor(name, { el, open, close }) {
+	constructor(name, { el, open, close, order }) {
 		this._name = name
 		this._el = el
 		this._open = open
 		this._close = close
+		this._order = order || 0
 
 		if (typeof this._open !== 'function') {
 			this._open = () => {}
@@ -33,6 +36,18 @@ export default class Setting {
 		if (typeof this._close !== 'function') {
 			this._close = () => {}
 		}
+
+		if (typeof this._el !== 'function') {
+			throw new Error('Setting must have an `el` function that returns a DOM element')
+		}
+
+		if (typeof this._name !== 'string') {
+			throw new Error('Setting must have a `name` string')
+		}
+
+		if (typeof this._order !== 'number') {
+			throw new Error('Setting must have an `order` number')
+		}
 	}
 
 	get name() {
@@ -51,4 +66,8 @@ export default class Setting {
 		return this._close
 	}
 
+	get order() {
+		return this._order
+	}
+
 }

apps/files/src/views/Settings.vue

@@ -340,6 +340,16 @@ export default {
 		userConfig() {
 			return this.userConfigStore.userConfig
 		},
+
+		sortedSettings() {
+			// Sort settings by name
+			return [...this.settings].sort((a, b) => {
+				if (a.order && b.order) {
+					return a.order - b.order
+				}
+				return a.name.localeCompare(b.name)
+			})
+		},
 	},
 
 	created() {