feat(settings): add option to preserve original item order (#1772)

Add `preserveOrder` option to settingsPage that skips alphabetical
sorting, keeping items in their defined array order.

Author: bajrangCoder

src/components/settingsPage.js

@@ -21,19 +21,26 @@ import searchBar from "./searchbar";
  * @property {()=>void} restoreList restore list to original state
  */
 
+/**
+ * @typedef {Object} SettingsPageOptions
+ * @property {boolean} [preserveOrder] - If true, items are listed in the order provided instead of alphabetical
+ */
+
 /**
  *  Creates a settings page
  * @param {string} title
  * @param {ListItem[]} settings
  * @param {(key, value) => void} callback  called when setting is changed
  * @param {'united'|'separate'} [type='united']
+ * @param {SettingsPageOptions} [options={}]
  * @returns {SettingsPage}
  */
 export default function settingsPage(
 	title,
 	settings,
 	callback,
 	type = "united",
+	options = {},
 ) {
 	let hideSearchBar = () => {};
 	const $page = Page(title);
@@ -96,7 +103,7 @@ export default function settingsPage(
 		actionStack.remove(title);
 	};
 
-	listItems($list, settings, callback);
+	listItems($list, settings, callback, options);
 	$page.body = $list;
 
 	/**@type {HTMLElement[]} */
@@ -190,15 +197,18 @@ export default function settingsPage(
  * @param {HTMLUListElement} $list
  * @param {Array<ListItem>} items
  * @param {()=>void} callback called when setting is changed
+ * @param {SettingsPageOptions} [options={}]
  */
-function listItems($list, items, callback) {
+function listItems($list, items, callback, options = {}) {
 	const $items = [];
 
-	// sort settings by text before rendering
-	items.sort((acc, cur) => {
-		if (!acc?.text || !cur?.text) return 0;
-		return acc.text.localeCompare(cur.text);
-	});
+	// sort settings by text before rendering (unless preserveOrder is true)
+	if (!options.preserveOrder) {
+		items.sort((acc, cur) => {
+			if (!acc?.text || !cur?.text) return 0;
+			return acc.text.localeCompare(cur.text);
+		});
+	}
 	items.forEach((item) => {
 		const $setting = Ref();
 		const $settingName = Ref();

src/settings/terminalSettings.js

@@ -188,7 +188,9 @@ export default function terminalSettings() {
 		},
 	];
 
-	return settingsPage(title, items, callback);
+	return settingsPage(title, items, callback, undefined, {
+		preserveOrder: true,
+	});
 
 	/**
 	 * Callback for settings page when an item is clicked