From af0b3a1d089ad693c2c133129ba54af268167534 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Mon, 25 May 2026 16:00:26 +0100
Subject: [PATCH 1/2] feat: pride 2026 banner app sidebar

---
 apps/app-frontend/src/App.vue                 | 11 +++
 .../components/ui/PrideFundraiserBanner.vue   | 86 +++++++++++++++++++
 .../src/components/ui/friends/FriendsList.vue |  1 -
 apps/app-frontend/src/store/theme.ts          |  1 +
 packages/app-lib/src/state/settings.rs        |  1 +
 5 files changed, 99 insertions(+), 1 deletion(-)
 create mode 100644 apps/app-frontend/src/components/ui/PrideFundraiserBanner.vue

diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index c841f5fc9c..005313ef77 100644
--- a/apps/app-frontend/src/App.vue
+++ b/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">
diff --git a/apps/app-frontend/src/components/ui/PrideFundraiserBanner.vue b/apps/app-frontend/src/components/ui/PrideFundraiserBanner.vue
new file mode 100644
index 0000000000..41e87ed516
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/PrideFundraiserBanner.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { CalendarIcon, ExternalIcon, UsersIcon } from '@modrinth/assets'
+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 progressPercent = computed(() => {
+	if (props.goal_amount <= 0) {
+		return 0
+	}
+
+	return Math.min(Math.max((props.live_amount / props.goal_amount) * 100, 0), 100)
+})
+const progressWidth = computed(() => `${progressPercent.value}%`)
+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>
+			<div
+				class="h-2 w-full overflow-hidden rounded-full bg-surface-5"
+				role="progressbar"
+				:aria-label="progressLabel"
+				:aria-valuenow="Math.round(progressPercent)"
+				aria-valuemin="0"
+				aria-valuemax="100"
+			>
+				<div
+					class="h-full rounded-l-full bg-[linear-gradient(90deg,var(--color-red)_0%,var(--color-orange)_25%,var(--color-green)_50%,var(--color-blue)_75%,var(--color-purple)_100%)]"
+					:style="{ width: progressWidth }"
+				/>
+			</div>
+			<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" />
+					312 supporters
+				</span>
+				<span class="flex items-center gap-1">
+					<CalendarIcon aria-hidden="true" class="size-4 shrink-0" />
+					9 days left
+				</span>
+			</div>
+		</div>
+	</section>
+</template>
diff --git a/apps/app-frontend/src/components/ui/friends/FriendsList.vue b/apps/app-frontend/src/components/ui/friends/FriendsList.vue
index ba9e78d694..cff91a960c 100644
--- a/apps/app-frontend/src/components/ui/friends/FriendsList.vue
+++ b/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"
diff --git a/apps/app-frontend/src/store/theme.ts b/apps/app-frontend/src/store/theme.ts
index 0d5d0c9b3f..40f1a5c1e2 100644
--- a/apps/app-frontend/src/store/theme.ts
+++ b/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,
 }
 
diff --git a/packages/app-lib/src/state/settings.rs b/packages/app-lib/src/state/settings.rs
index 813580333f..023924aeea 100644
--- a/packages/app-lib/src/state/settings.rs
+++ b/packages/app-lib/src/state/settings.rs
@@ -58,6 +58,7 @@ pub enum FeatureFlag {
     ServerRamAsBytesAlwaysOn,
     AlwaysShowAppControls,
     SkipUnknownPackWarning,
+    PrideFundraiser,
     ServersInApp,
     ServerProjectQa,
     I18nDebug,

From 3a945db960e739aa7840ce44547d6f742235fc05 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Mon, 25 May 2026 16:04:26 +0100
Subject: [PATCH 2/2] feat: use ProgressBar component

---
 .../components/ui/PrideFundraiserBanner.vue   | 46 ++++++++++---------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/PrideFundraiserBanner.vue b/apps/app-frontend/src/components/ui/PrideFundraiserBanner.vue
index 41e87ed516..676f4bb6ce 100644
--- a/apps/app-frontend/src/components/ui/PrideFundraiserBanner.vue
+++ b/apps/app-frontend/src/components/ui/PrideFundraiserBanner.vue
@@ -1,5 +1,6 @@
 <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'
 
@@ -16,14 +17,6 @@ const currencyFormatter = new Intl.NumberFormat('en-US', {
 
 const formattedGoalAmount = computed(() => currencyFormatter.format(props.goal_amount))
 const formattedLiveAmount = computed(() => currencyFormatter.format(props.live_amount))
-const progressPercent = computed(() => {
-	if (props.goal_amount <= 0) {
-		return 0
-	}
-
-	return Math.min(Math.max((props.live_amount / props.goal_amount) * 100, 0), 100)
-})
-const progressWidth = computed(() => `${progressPercent.value}%`)
 const progressLabel = computed(
 	() => `${formattedLiveAmount.value} of ${formattedGoalAmount.value} raised`,
 )
@@ -58,29 +51,38 @@ async function openPrideFundraiser() {
 				</span>
 				<span class="text-xs font-medium leading-4">of {{ formattedGoalAmount }}</span>
 			</div>
-			<div
-				class="h-2 w-full overflow-hidden rounded-full bg-surface-5"
-				role="progressbar"
+			<ProgressBar
+				class="pride-fundraiser-banner__progress"
+				:progress="live_amount"
+				:max="goal_amount"
+				color="purple"
+				full-width
+				:gradient-border="false"
 				:aria-label="progressLabel"
-				:aria-valuenow="Math.round(progressPercent)"
-				aria-valuemin="0"
-				aria-valuemax="100"
-			>
-				<div
-					class="h-full rounded-l-full bg-[linear-gradient(90deg,var(--color-red)_0%,var(--color-orange)_25%,var(--color-green)_50%,var(--color-blue)_75%,var(--color-purple)_100%)]"
-					:style="{ width: progressWidth }"
-				/>
-			</div>
+			/>
 			<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" />
-					312 supporters
+					6767 supporters
 				</span>
 				<span class="flex items-center gap-1">
 					<CalendarIcon aria-hidden="true" class="size-4 shrink-0" />
-					9 days left
+					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>