feat: preferences syncing frontend (#7192)

* feat: prefs frontend

* fix: DI issue

* fix: lint

* feat: appearance settings cleanup + fix settings, remove pinia

* fix: sync btn when logged out

* fix: prepr

* fix: sidebar issue

* feat: language coverage + cleanup

* feat: cleanup lang settings

* fix: fmt

* fix: CI

* fix: ci

* fix: storybook

* feat: bring back loader/game version sort

---------

Co-authored-by: tdgao <mr.trumgao@gmail.com>

apps/app-frontend/src/components/ui/library/instance-group/instance-card.vue

@@ -9,13 +9,13 @@ import { useRouter } from 'vue-router'
 import InstanceCardView from '@/components/ui/library/instance-group/instance-card-view.vue'
 import { getLibraryInstanceSelectionKey, useLibrary } from '@/components/ui/library/use-library'
 import { useAppEvent } from '@/composables/use-app-event'
+import { handleSevereError } from '@/composables/use-error.js'
 import { trackEvent } from '@/helpers/analytics'
 import { install_existing_instance, install_pack_to_existing_instance } from '@/helpers/install'
 import { kill, run } from '@/helpers/instance'
 import { get_by_instance_id } from '@/helpers/process'
 import type { GameInstance } from '@/helpers/types'
 import { showInstanceInFolder } from '@/helpers/utils.js'
-import { handleSevereError } from '@/store/error.js'
 
 type ProcessEvent = 'installing' | 'launched' | 'finished'
 

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

@@ -36,6 +36,8 @@ export const librarySortOptions = [
 	'Hours played',
 	'Date created',
 	'Date modified',
+	'Loader',
+	'Game version',
 ] as const
 
 export const libraryGroupOptions = [
@@ -328,6 +330,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