fix: new PAT not in list and cmp revenue (#5614)

* fix cmp info revenue not showing #5610

* fix use head referencing undefined

* fix new PAT not pushed to list and use new modal

* remove flex wrap in header nav

apps/frontend/src/layouts/default.vue

@@ -69,7 +69,7 @@
 				</NuxtLink>
 			</div>
 			<div
-				class="col-span-2 row-start-2 flex flex-wrap justify-center lg:col-span-1 lg:row-start-auto"
+				class="col-span-2 row-start-2 flex justify-center lg:col-span-1 lg:row-start-auto"
 				:class="{ 'gap-4': !flags.projectTypesPrimaryNav }"
 			>
 				<template v-if="flags.projectTypesPrimaryNav">

apps/frontend/src/pages/legal/cmp-info.vue

@@ -195,6 +195,8 @@ const { data: transparencyInformation } = useQuery({
 	queryFn: () => client.labrinth.payouts_v3.getPlatformRevenue(),
 })
 
-const platformRevenue = (transparencyInformation.value as any)?.all_time
-const platformRevenueData = (transparencyInformation.value as any)?.data?.slice(0, 5) ?? []
+const platformRevenue = computed(() => (transparencyInformation.value as any)?.all_time)
+const platformRevenueData = computed(
+	() => (transparencyInformation.value as any)?.data?.slice(0, 5) ?? [],
+)
 </script>

apps/frontend/src/pages/settings/applications.vue

@@ -283,10 +283,6 @@ definePageMeta({
 	middleware: 'auth',
 })
 
-useHead({
-	title: () => `${formatMessage(messages.headTitle)} - Modrinth`,
-})
-
 const messages = defineMessages({
 	headTitle: {
 		id: 'settings.applications.head-title',
@@ -420,6 +416,10 @@ const messages = defineMessages({
 	},
 })
 
+useHead({
+	title: () => `${formatMessage(messages.headTitle)} - Modrinth`,
+})
+
 const { scopesToLabels } = useScopes()
 
 const scopeCategories = computed(() => {

apps/frontend/src/pages/settings/index.vue

@@ -193,13 +193,13 @@ import MessageBanner from '~/components/ui/MessageBanner.vue'
 import type { DisplayLocation } from '~/plugins/cosmetics'
 import { isDarkTheme, type Theme } from '~/plugins/theme/index.ts'
 
+const { addNotification } = injectNotificationManager()
+const { formatMessage } = useVIntl()
+
 useHead({
 	title: () => `${formatMessage(messages.headTitle)} - Modrinth`,
 })
 
-const { addNotification } = injectNotificationManager()
-const { formatMessage } = useVIntl()
-
 const messages = defineMessages({
 	headTitle: {
 		id: 'settings.head-title',

apps/frontend/src/pages/settings/pats.vue

@@ -7,51 +7,65 @@
 			:proceed-label="formatMessage(deleteModalMessages.action)"
 			@proceed="removePat(deletePatIndex)"
 		/>
-		<Modal
+		<NewModal
 			ref="patModal"
 			:header="
 				editPatId !== null
 					? formatMessage(createModalMessages.editTitle)
 					: formatMessage(createModalMessages.createTitle)
 			"
+			:width="'550px'"
 		>
-			<div class="universal-modal">
-				<label for="pat-name">
-					<span class="label__title">{{ formatMessage(createModalMessages.nameLabel) }}</span>
-				</label>
-				<StyledInput
-					id="pat-name"
-					v-model="name"
-					:maxlength="2048"
-					:placeholder="formatMessage(createModalMessages.namePlaceholder)"
-				/>
-				<label for="pat-scopes">
-					<span class="label__title">{{ formatMessage(commonMessages.scopesLabel) }}</span>
-				</label>
-				<div
-					id="pat-scopes"
-					class="scope-items mt-2 grid grid-cols-1 gap-x-6 gap-y-4 min-[600px]:grid-cols-2"
-				>
-					<div v-for="category in scopeCategories" :key="category.name" class="flex flex-col gap-2">
-						<h4 class="m-0 border-b border-divider pb-1 text-base font-bold text-contrast">
-							{{ category.name }}
-						</h4>
-						<div class="flex flex-col gap-2">
-							<Checkbox
-								v-for="scope in category.scopes"
-								:key="scope"
-								:label="scopesToLabels(getScopeValue(scope)).join(', ')"
-								:model-value="hasScope(scopesVal, scope)"
-								@update:model-value="scopesVal = toggleScope(scopesVal, scope)"
-							/>
+			<div class="flex flex-col gap-4">
+				<div class="flex w-full flex-col">
+					<label for="pat-name">
+						<span class="label__title">{{ formatMessage(createModalMessages.nameLabel) }}</span>
+					</label>
+					<StyledInput
+						id="pat-name"
+						v-model="name"
+						:maxlength="2048"
+						:placeholder="formatMessage(createModalMessages.namePlaceholder)"
+					/>
+				</div>
+
+				<div class="flex w-full flex-col">
+					<label for="pat-scopes">
+						<span class="label__title">{{ formatMessage(commonMessages.scopesLabel) }}</span>
+					</label>
+					<div
+						id="pat-scopes"
+						class="scope-items mt-2 grid grid-cols-1 gap-x-6 gap-y-4 min-[600px]:grid-cols-2"
+					>
+						<div
+							v-for="category in scopeCategories"
+							:key="category.name"
+							class="flex flex-col gap-2"
+						>
+							<h4 class="m-0 border-b border-divider pb-1 text-base font-bold text-contrast">
+								{{ category.name }}
+							</h4>
+							<div class="flex flex-col gap-2">
+								<Checkbox
+									v-for="scope in category.scopes"
+									:key="scope"
+									:label="scopesToLabels(getScopeValue(scope)).join(', ')"
+									:model-value="hasScope(scopesVal, scope)"
+									@update:model-value="scopesVal = toggleScope(scopesVal, scope)"
+								/>
+							</div>
 						</div>
 					</div>
 				</div>
-				<label for="pat-name" class="mt-4">
-					<span class="label__title">{{ formatMessage(createModalMessages.expiresLabel) }}</span>
-				</label>
-				<StyledInput id="pat-expires" v-model="expires" type="date" />
-				<p></p>
+
+				<div class="flex w-full flex-col">
+					<label for="pat-expires">
+						<span class="label__title">{{ formatMessage(createModalMessages.expiresLabel) }}</span>
+					</label>
+					<StyledInput id="pat-expires" v-model="expires" type="date" />
+					<p></p>
+				</div>
+
 				<div class="input-group push-right">
 					<button class="iconified-button" @click="$refs.patModal.hide()">
 						<XIcon />
@@ -79,7 +93,7 @@
 					</button>
 				</div>
 			</div>
-		</Modal>
+		</NewModal>
 
 		<div class="header__row">
 			<div class="header__title">
@@ -199,6 +213,7 @@ import {
 	injectModrinthClient,
 	injectNotificationManager,
 	IntlFormatted,
+	NewModal,
 	StyledInput,
 	useFormatDateTime,
 	useRelativeTime,
@@ -206,7 +221,6 @@ import {
 } from '@modrinth/ui'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 
-import Modal from '~/components/ui/Modal.vue'
 import {
 	getScopeValue,
 	hasScope,
@@ -403,7 +417,7 @@ async function createPat() {
 			scopes: Number(scopesVal.value),
 			expires: data.$dayjs(expires.value).toISOString(),
 		})
-		pats.value.push(res)
+		queryClient.setQueryData(['pat'], (old) => [...(old || []), res])
 		patModal.value.hide()
 	} catch (err) {
 		addNotification({

apps/frontend/src/pages/settings/profile.vue

@@ -99,10 +99,6 @@ import {
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
-useHead({
-	title: () => `${formatMessage(messages.headTitle)} - Modrinth`,
-})
-
 definePageMeta({
 	middleware: 'auth',
 })
@@ -139,6 +135,10 @@ const messages = defineMessages({
 	},
 })
 
+useHead({
+	title: () => `${formatMessage(messages.headTitle)} - Modrinth`,
+})
+
 const auth = await useAuth()
 
 // Avatar state (separate from useSavable)