fix: server search and medal server upgrade (#5903)

* fix: server search sort by

* fix: medal server listing upgrade button

* fix: bottom pagination spacing

packages/ui/src/components/servers/marketing/MedalServerListing.vue

@@ -180,7 +180,7 @@ type MedalServerListingProps = {
 
 const props = defineProps<MedalServerListingProps>()
 
-const emit = defineEmits<{ (e: 'upgrade'): void }>()
+const emit = defineEmits<{ (e: 'upgrade', serverId: string): void }>()
 const { formatMessage } = useVIntl()
 
 const client = injectModrinthClient()
@@ -257,7 +257,7 @@ const expiryDate = computed(() => (props.medal_expires ? dayjs(props.medal_expir
 
 function handleUpgrade(event: Event) {
 	event.stopPropagation()
-	emit('upgrade')
+	emit('upgrade', props.server_id)
 }
 
 function navigateToServer(event: MouseEvent | KeyboardEvent) {

packages/ui/src/layouts/shared/browse-tab/layout.vue

@@ -251,7 +251,7 @@ const maxResultsOptions = computed<ComboboxOption<number>[]>(() =>
 			</template>
 		</ProjectCardList>
 
-		<div :class="ctx.variant === 'web' ? 'pagination-after' : 'flex justify-end'">
+		<div :class="ctx.variant === 'web' ? 'pagination-after my-3' : 'flex justify-end'">
 			<Pagination
 				:page="ctx.currentPage.value"
 				:count="ctx.pageCount.value"

packages/ui/src/layouts/wrapped/hosting/manage/index.vue

@@ -32,6 +32,13 @@
 			@purchase-success="handlePurchaseSuccess"
 			@hide="clearPurchaseIntent"
 		/>
+		<ServersUpgradeModalWrapper
+			v-if="loggedIn"
+			ref="medalUpgradeModal"
+			:stripe-publishable-key="props.stripePublishableKey"
+			:site-url="props.siteUrl"
+			:products="props.products"
+		/>
 		<ResubscribeModal ref="resubscribeModal" @resubscribe="handleResubscribeConfirm" />
 
 		<div
@@ -163,7 +170,7 @@
 							v-for="server in filteredData.filter((s) => s.is_medal)"
 							:key="server.server_id"
 							v-bind="server"
-							@upgrade="openPurchaseModal"
+							@upgrade="openMedalUpgradeModal"
 						/>
 						<ServerListing
 							v-for="server in filteredData.filter((s) => !s.is_medal)"
@@ -208,9 +215,10 @@ import { useIntervalFn } from '@vueuse/core'
 import dayjs from 'dayjs'
 import Fuse from 'fuse.js'
 import type Stripe from 'stripe'
-import { computed, ref, watch } from 'vue'
+import { type ComponentPublicInstance, computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
+import ServersUpgradeModalWrapper from '#ui/components/billing/ServersUpgradeModalWrapper.vue'
 import MedalServerListing from '#ui/components/servers/marketing/MedalServerListing.vue'
 import ServerListing from '#ui/components/servers/ServerListing.vue'
 import { createHostingPurchaseIntentContext, provideHostingPurchaseIntent } from '#ui/providers'
@@ -339,6 +347,8 @@ function startNewServerPolling(initialServers: Archon.Servers.v0.Server[]) {
 
 const guestPlanModal = ref<InstanceType<typeof ServersGuestPlanModal> | null>(null)
 const purchaseModal = ref<InstanceType<typeof ModrinthServersPurchaseModal> | null>(null)
+type UpgradeModalRef = ComponentPublicInstance<{ open: (id?: string) => void | Promise<void> }>
+const medalUpgradeModal = ref<UpgradeModalRef | null>(null)
 const resubscribeModal = ref<InstanceType<typeof ResubscribeModal> | null>(null)
 const affiliateCode = ref<string | null>(null)
 const selectedCurrency = ref<string>('USD')
@@ -691,6 +701,10 @@ provideHostingPurchaseIntent(hostingPurchaseIntent)
 
 const { openPurchaseModal, handleGuestPlanContinue, clearPurchaseIntent } = hostingPurchaseIntent
 
+function openMedalUpgradeModal(serverId: string) {
+	medalUpgradeModal.value?.open(serverId)
+}
+
 const { data: subscriptions } = useQuery({
 	queryKey: ['billing', 'subscriptions'],
 	queryFn: () => client.labrinth.billing_internal.getSubscriptions(),

packages/ui/src/utils/server-search.ts

@@ -1,7 +1,7 @@
 import type { Labrinth } from '@modrinth/api-client'
 import { getCategoryIcon, GlobeIcon, SERVER_CATEGORY_ICON_MAP, UserIcon } from '@modrinth/assets'
 import { sortedCategories } from '@modrinth/utils'
-import { computed, type Ref, ref } from 'vue'
+import { computed, type Ref, ref, shallowRef } from 'vue'
 import { useRoute } from 'vue-router'
 
 import { defineMessage, LOCALES, useVIntl } from '../composables/i18n'
@@ -138,7 +138,7 @@ export function useServerSearch(opts: {
 
 	const route = useRoute()
 
-	const serverCurrentSortType = ref<SortType>(SERVER_SORT_TYPES[0])
+	const serverCurrentSortType = shallowRef<SortType>(SERVER_SORT_TYPES[0])
 	const serverCurrentFilters = ref<FilterValue[]>([{ type: 'server_status', option: 'online' }])
 	const serverToggledGroups = ref<string[]>([])