feat: pride 2026 frontend

apps/app-frontend/src/App.vue

@@ -84,6 +84,7 @@ import InstallToPlayModal from '@/components/ui/modal/InstallToPlayModal.vue'
 import ModpackAlreadyInstalledModal from '@/components/ui/modal/ModpackAlreadyInstalledModal.vue'
 import UpdateToPlayModal from '@/components/ui/modal/UpdateToPlayModal.vue'
 import NavButton from '@/components/ui/NavButton.vue'
+import PrideFundraiserBanner from '@/components/ui/PrideFundraiserBanner.vue'
 import PromotionWrapper from '@/components/ui/PromotionWrapper.vue'
 import QuickInstanceSwitcher from '@/components/ui/QuickInstanceSwitcher.vue'
 import SplashScreen from '@/components/ui/SplashScreen.vue'
@@ -134,6 +135,10 @@ const route = useRoute()
 const APP_LEFT_NAV_WIDTH = '4rem'
 const APP_SIDEBAR_WIDTH = 300
 const INTERCOM_BUBBLE_DEFAULT_PADDING = 20
+const prideFundraiserData = {
+	goal_amount: 5000,
+	live_amount: 3250,
+}
 const credentials = ref()
 const sidebarToggled = ref(true)
 const unsubscribeSidebarToggle = themeStore.$subscribe(() => {
@@ -1477,6 +1482,12 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 							<FriendsList :credentials="credentials" :sign-in="() => signIn()" />
 						</suspense>
 					</div>
+					<div
+						v-if="themeStore.getFeatureFlag('pride_fundraiser')"
+						class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid"
+					>
+						<PrideFundraiserBanner v-bind="prideFundraiserData" />
+					</div>
 					<div v-if="news && news.length > 0" class="p-4 flex flex-col items-center">
 						<h3 class="text-base mb-4 text-primary font-medium m-0 text-left w-full">News</h3>
 						<div class="space-y-4 flex flex-col items-center w-full">

apps/app-frontend/src/components/ui/PrideFundraiserBanner.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { CalendarIcon, ExternalIcon, UsersIcon } from '@modrinth/assets'
+import { ProgressBar } from '@modrinth/ui'
+import { openUrl } from '@tauri-apps/plugin-opener'
+import { computed } from 'vue'
+
+const props = defineProps<{
+	goal_amount: number
+	live_amount: number
+}>()
+
+const currencyFormatter = new Intl.NumberFormat('en-US', {
+	style: 'currency',
+	currency: 'USD',
+	maximumFractionDigits: 0,
+})
+
+const formattedGoalAmount = computed(() => currencyFormatter.format(props.goal_amount))
+const formattedLiveAmount = computed(() => currencyFormatter.format(props.live_amount))
+const progressLabel = computed(
+	() => `${formattedLiveAmount.value} of ${formattedGoalAmount.value} raised`,
+)
+
+async function openPrideFundraiser() {
+	await openUrl('https://modrinth.com/pride')
+}
+</script>
+
+<template>
+	<section
+		class="flex w-full flex-col gap-3 rounded-xl border border-solid border-surface-5 bg-button-bg p-3 text-primary"
+	>
+		<div class="flex w-full items-center justify-between gap-2">
+			<h2 class="m-0 min-w-0 truncate text-base font-semibold text-contrast">
+				Pride Fundraiser 2026
+			</h2>
+			<button
+				type="button"
+				class="m-0 flex size-5 shrink-0 cursor-pointer items-center justify-center border-0 bg-transparent p-0 text-primary transition-colors hover:text-contrast focus-visible:text-contrast"
+				aria-label="Open Pride fundraiser"
+				@click="openPrideFundraiser"
+			>
+				<ExternalIcon aria-hidden="true" class="size-5" />
+			</button>
+		</div>
+		<div class="h-px w-full bg-surface-5" />
+		<div class="flex w-full flex-col gap-2.5">
+			<div class="flex items-end gap-1 whitespace-nowrap">
+				<span class="text-base font-semibold leading-5 text-contrast">
+					{{ formattedLiveAmount }}
+				</span>
+				<span class="text-xs font-medium leading-4">of {{ formattedGoalAmount }}</span>
+			</div>
+			<ProgressBar
+				class="pride-fundraiser-banner__progress"
+				:progress="live_amount"
+				:max="goal_amount"
+				color="purple"
+				full-width
+				:gradient-border="false"
+				:aria-label="progressLabel"
+			/>
+			<div class="flex flex-wrap items-center gap-2 text-xs font-medium leading-4">
+				<span class="flex items-center gap-1">
+					<UsersIcon aria-hidden="true" class="size-4 shrink-0" />
+					6767 supporters
+				</span>
+				<span class="flex items-center gap-1">
+					<CalendarIcon aria-hidden="true" class="size-4 shrink-0" />
+					6 days left
+				</span>
+			</div>
+		</div>
+	</section>
+</template>
+
+<style scoped>
+.pride-fundraiser-banner__progress :deep(.progress-bar) {
+	background: linear-gradient(
+		90deg,
+		var(--color-red) 0%,
+		var(--color-orange) 20%,
+		var(--color-green) 50%,
+		var(--color-blue) 75%,
+		var(--color-purple) 100%
+	);
+}
+</style>

apps/app-frontend/src/components/ui/friends/FriendsList.vue

@@ -393,7 +393,6 @@ const messages = defineMessages({
 			<FriendsSection
 				v-if="pendingFriends.length > 0"
 				:is-searching="!!search"
-				open-by-default
 				:friends="pendingFriends"
 				:heading="formatMessage(messages.pending)"
 				:remove-friend="removeFriend"

apps/app-frontend/src/store/theme.ts

@@ -9,6 +9,7 @@ export const DEFAULT_FEATURE_FLAGS = {
 	server_ram_as_bytes_always_on: false,
 	always_show_app_controls: false,
 	skip_unknown_pack_warning: false,
+	pride_fundraiser: false,
 	i18n_debug: false,
 }
 

packages/app-lib/src/state/settings.rs

@@ -58,6 +58,7 @@ pub enum FeatureFlag {
     ServerRamAsBytesAlwaysOn,
     AlwaysShowAppControls,
     SkipUnknownPackWarning,
+    PrideFundraiser,
     ServersInApp,
     ServerProjectQa,
     I18nDebug,