function settingsPage(
	title,
	settings,
	callback,
	type = "united",
) {
	let hideSearchBar = () => {};
	const $page = Page(title);
	$page.id = "settings";
	/**@type {HTMLDivElement} */
	const $list = <div tabIndex={0} className="main list"></div>;
	/**@type {ListItem} */
	let note;

	settings = settings.filter((setting) => {
		if ("note" in setting) {
			note = setting.note;
			return false;
		}

		if (!setting.info) {
			Object.defineProperty(setting, "info", {
				get() {
					return strings[`info-${this.key.toLocaleLowerCase()}`];
				},
			});
		}

		return true;
	});

	if (type === "united" || (type === "separate" && settings.length > 5)) {
		const $search = <span className="icon search" attr-action="search"></span>;
		$search.onclick = () =>
			searchBar(
				$list,
				(hide) => {
					hideSearchBar = hide;
				},
				type === "united"
					? () => {
							Object.values(appSettings.uiSettings).forEach((page) => {
								page.restoreList();
							});
						}
					: null,
				type === "united"
					? (key) => {
							const $items = [];
							Object.values(appSettings.uiSettings).forEach((page) => {
								$items.push(...page.search(key));
							});
							return $items;
						}
					: null,
			);

		$page.header.append($search);
	}

	/** DISCLAIMER: do not assign hideSearchBar directly because it can change  */
	$page.ondisconnect = () => hideSearchBar();
	$page.onhide = () => {
		helpers.hideAd();
		actionStack.remove(title);
	};

	listItems($list, settings, callback);
	$page.body = $list;

	/**@type {HTMLElement[]} */
	const children = [...$list.children];

	if (note) {
		$page.append(
			<div className="note">
				<div className="note-title">
					<span className="icon info"></span>
					<span>{strings.info}</span>
				</div>
				<p innerHTML={note}></p>
			</div>,
		);
	}

	$page.append(<div style={{ height: "50vh" }}></div>);

	return {
		/**
		 * Show settings page
		 * @param {string} goTo Key of setting to scroll to and select
		 * @returns {void}
		 */
		show(goTo) {
			actionStack.push({
				id: title,
				action: $page.hide,
			});
			app.append($page);
			helpers.showAd();

			if (goTo) {
				const $item = $list.get(`[data-key="${goTo}"]`);
				if (!$item) return;

				$item.scrollIntoView();
				$item.click();
				return;
			}

			$list.focus();
		},
		hide() {
			$page.hide();
		},
		/**
		 * Search for a setting
		 * @param {string} key
		 */
		search(key) {
			return children.filter((child) => {
				const text = child.textContent.toLowerCase();
				return text.match(key, "i");
			});
		},
		/**
		 * Restore list to original state
		 */
		restoreList() {
			$list.content = children;
		},
		/**
		 * Set title of settings page
		 * @param {string} title
		 */
		setTitle(title) {
			$page.settitle(title);
		},
	};
}
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']
@returns {SettingsPage}