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/composables/use-error.js

@@ -0,0 +1,48 @@
+import { reactive } from 'vue'
+
+import { findMinecraftAuthError } from '@/components/ui/minecraft-auth-error-modal/minecraft-auth-errors'
+
+const errorState = reactive({
+	errorModal: null,
+	minecraftAuthErrorModal: null,
+	minecraftRequiredModal: null,
+	setErrorModal(ref) {
+		this.errorModal = ref
+	},
+	setMinecraftAuthErrorModal(ref) {
+		this.minecraftAuthErrorModal = ref
+	},
+	setMinecraftRequiredModal(ref) {
+		this.minecraftRequiredModal = ref
+	},
+	showError(error, context, closable = true, source = null) {
+		const errorMessage = error.message?.toLowerCase()
+		if (
+			(errorMessage?.includes('user is not logged in') ||
+				errorMessage?.includes('cannot play instance since minecraft is required')) &&
+			this.minecraftRequiredModal
+		) {
+			this.minecraftRequiredModal.show()
+			return
+		}
+		if (
+			error.message &&
+			(error.message.includes('Minecraft authentication error:') ||
+				findMinecraftAuthError(error.message)) &&
+			this.minecraftAuthErrorModal
+		) {
+			this.minecraftAuthErrorModal.show(error)
+			return
+		}
+		this.errorModal.show(error, context, closable, source)
+	},
+})
+
+export function useError() {
+	return errorState
+}
+
+export const handleSevereError = (error, context) => {
+	useError().showError(error, context)
+	console.error(error)
+}