feat: update purchase server flow (#5714)

* implement server list empty state component

* fix stories and adjust spacing

* implement select plan design refresh

* implement auth for empty server list

* use refs instead of reactive

* pnpm prepr

* fix auth usage for empty servers list

* move app auth provider setup to src/providers/setup

* pnpm prepr

apps/app-frontend/src/App.vue

@@ -40,7 +40,6 @@ import {
 	OverflowMenu,
 	PopupNotificationPanel,
 	ProgressSpinner,
-	provideAuth,
 	provideModalBehavior,
 	provideModrinthClient,
 	provideNotificationManager,
@@ -58,7 +57,7 @@ import { openUrl } from '@tauri-apps/plugin-opener'
 import { type } from '@tauri-apps/plugin-os'
 import { saveWindowState, StateFlags } from '@tauri-apps/plugin-window-state'
 import { $fetch } from 'ofetch'
-import { computed, onMounted, onUnmounted, provide, reactive, ref, watch, watchEffect } from 'vue'
+import { computed, onMounted, onUnmounted, provide, ref, watch } from 'vue'
 import { RouterView, useRoute, useRouter } from 'vue-router'
 
 import ModrinthAppLogo from '@/assets/modrinth_app.svg?component'
@@ -107,6 +106,7 @@ import {
 } from '@/providers/download-progress.ts'
 import { createServerInstall, provideServerInstall } from '@/providers/server-install'
 import { setupProviders } from '@/providers/setup'
+import { setupAuthProvider } from '@/providers/setup/auth'
 import { useError } from '@/store/error.js'
 import { useLoading, useTheming } from '@/store/state'
 
@@ -455,21 +455,10 @@ const credentials = ref()
 
 const modrinthLoginFlowWaitModal = ref()
 
-const authProvider = reactive({
-	session_token: null,
-	user: null,
-	requestSignIn: async (_redirectPath) => {
-		await signIn()
-	},
+setupAuthProvider(credentials, async (_redirectPath) => {
+	await signIn()
 })
 
-watchEffect(() => {
-	authProvider.session_token = credentials.value?.session ?? null
-	authProvider.user = credentials.value?.user ?? null
-})
-
-provideAuth(authProvider)
-
 async function fetchCredentials() {
 	const creds = await getCreds().catch(handleError)
 	if (creds && creds.user_id) {

apps/app-frontend/src/providers/setup/auth.ts

@@ -0,0 +1,29 @@
+import type { Labrinth } from '@modrinth/api-client'
+import { type AuthProvider, provideAuth } from '@modrinth/ui'
+import { type Ref, ref, watchEffect } from 'vue'
+
+type AppCredentials = {
+	session?: string | null
+	user?: Labrinth.Users.v2.User | null
+}
+
+export function setupAuthProvider(
+	credentials: Ref<AppCredentials | null | undefined>,
+	requestSignIn: (redirectPath: string) => void | Promise<void>,
+) {
+	const sessionToken = ref<string | null>(null)
+	const user = ref<Labrinth.Users.v2.User | null>(null)
+
+	const authProvider: AuthProvider = {
+		session_token: sessionToken,
+		user,
+		requestSignIn,
+	}
+
+	watchEffect(() => {
+		sessionToken.value = credentials.value?.session ?? null
+		user.value = credentials.value?.user ?? null
+	})
+
+	provideAuth(authProvider)
+}

apps/frontend/src/providers/setup/auth.ts

@@ -1,12 +1,15 @@
 import type { Labrinth } from '@modrinth/api-client'
 import { type AuthProvider, provideAuth } from '@modrinth/ui'
-import { reactive, watchEffect } from 'vue'
+import { ref, watchEffect } from 'vue'
 
 export function setupAuthProvider(auth: Awaited<ReturnType<typeof useAuth>>) {
 	const router = useRouter()
-	const authProvider = reactive<AuthProvider>({
-		session_token: null,
-		user: null,
+	const sessionToken = ref<string | null>(null)
+	const user = ref<Labrinth.Users.v2.User | null>(null)
+
+	const authProvider: AuthProvider = {
+		session_token: sessionToken,
+		user,
 		requestSignIn: async (redirectPath: string) => {
 			await router.push({
 				path: '/auth/sign-in',
@@ -15,11 +18,11 @@ export function setupAuthProvider(auth: Awaited<ReturnType<typeof useAuth>>) {
 				},
 			})
 		},
-	})
+	}
 
 	watchEffect(() => {
-		authProvider.session_token = auth.value.token || null
-		authProvider.user = (auth.value.user as Labrinth.Users.v2.User | null) ?? null
+		sessionToken.value = auth.value.token || null
+		user.value = (auth.value.user as Labrinth.Users.v2.User | null) ?? null
 	})
 
 	provideAuth(authProvider)