feat: bring back loader/game version sort

apps/app-frontend/src/components/ui/library/library-toolbar/sort-menu.vue

@@ -15,6 +15,8 @@ const { formatMessage } = useVIntl()
 
 const messages = defineMessages({
 	name: { id: 'app.library.sort.name', defaultMessage: 'Name' },
+	loaderSort: { id: 'app.library.sort.loader', defaultMessage: 'Loader' },
+	gameVersionSort: { id: 'app.library.sort.game-version', defaultMessage: 'Game version' },
 	lastPlayed: { id: 'app.library.sort.last-played', defaultMessage: 'Last played' },
 	hoursPlayed: { id: 'app.library.sort.hours-played', defaultMessage: 'Hours played' },
 	dateCreated: { id: 'app.library.sort.date-created', defaultMessage: 'Date created' },
@@ -34,6 +36,8 @@ const sortLabels = {
 	'Hours played': messages.hoursPlayed,
 	'Date created': messages.dateCreated,
 	'Date modified': messages.dateModified,
+	Loader: messages.loaderSort,
+	'Game version': messages.gameVersionSort,
 }
 
 const groupLabels = {
@@ -60,6 +64,7 @@ const groupOptions: ComboboxOption<LibraryGroupBy>[] = libraryGroupOptions.map((
 		class="w-max"
 		:options="sortOptions"
 		:show-icon-in-selected="false"
+		:max-height="320"
 		dropdown-min-width="160px"
 	>
 		<template #prefix>

apps/app-frontend/src/components/ui/library/use-library.ts

@@ -39,6 +39,8 @@ export const librarySortOptions = [
 	'Hours played',
 	'Date created',
 	'Date modified',
+	'Loader',
+	'Game version',
 ] as const
 
 export const libraryGroupOptions = [
@@ -363,6 +365,18 @@ function createLibraryState(instances: Ref<GameInstance[]>) {
 			case 'Name':
 				visibleInstances.sort((a, b) => a.name.localeCompare(b.name))
 				break
+			case 'Loader':
+				visibleInstances.sort((a, b) =>
+					formatLoader(formatMessage, a.loader).localeCompare(
+						formatLoader(formatMessage, b.loader),
+					),
+				)
+				break
+			case 'Game version':
+				visibleInstances.sort((a, b) =>
+					a.game_version.localeCompare(b.game_version, undefined, { numeric: true }),
+				)
+				break
 			case 'Last played':
 				visibleInstances.sort((a, b) => dayjs(b.last_played ?? 0).diff(dayjs(a.last_played ?? 0)))
 				break

apps/app-frontend/src/locales/en-US/index.json

@@ -1091,6 +1091,9 @@
   "app.library.sort.date-modified": {
     "message": "Date modified"
   },
+  "app.library.sort.game-version": {
+    "message": "Game version"
+  },
   "app.library.sort.hours-played": {
     "message": "Hours played"
   },
@@ -1100,6 +1103,9 @@
   "app.library.sort.last-played": {
     "message": "Last played"
   },
+  "app.library.sort.loader": {
+    "message": "Loader"
+  },
   "app.library.sort.name": {
     "message": "Name"
   },