fix(client): make folder lists more readable (#1086)

* fix(client): make the folder list less hideous

* fix: also order by version

client/src/components/game/charts/ChartInfoFormat.tsx

@@ -53,6 +53,8 @@ export default function ChartInfoFormat({
 		return <Loading />;
 	}
 
+	const versions = Object.keys(GetGamePTConfig(game, playtype).versions);
+
 	return (
 		<Row
 			className="text-center align-items-center"
@@ -61,23 +63,31 @@ export default function ChartInfoFormat({
 				justifyContent: "space-evenly",
 			}}
 		>
-			<Col xs={12} lg={3}>
+			<Col xs={12} lg={3} style={{ textAlign: "left" }}>
 				<h4>Appears In</h4>
 				{data.length !== 0 ? (
-					data.map((e) => (
-						<li key={e.folderID}>
-							{user && ugs ? (
-								<Link
-									className="text-decoration-none"
-									to={`/u/${user.username}/games/${game}/${playtype}/folders/${e.folderID}`}
-								>
-									{e.title}
-								</Link>
-							) : (
-								<span>{e.title}</span>
-							)}
-						</li>
-					))
+					data
+						.sort((a, b) => a.title.localeCompare(b.title))
+						.sort((a, b) =>
+							"versions" in a.data && "versions" in b.data
+								? versions.indexOf(a.data.versions) -
+								  versions.indexOf(b.data.versions)
+								: 0
+						)
+						.map((e) => (
+							<li key={e.folderID}>
+								{user && ugs ? (
+									<Link
+										className="text-decoration-none"
+										to={`/u/${user.username}/games/${game}/${playtype}/folders/${e.folderID}`}
+									>
+										{e.title}
+									</Link>
+								) : (
+									<span>{e.title}</span>
+								)}
+							</li>
+						))
 				) : (
 					<Muted>No folders...</Muted>
 				)}