feat: confirm transfer project/org modals (#5532)

* feat: implement confirm transfer project/org modals

* pnpm prepr

* update warning banner copy

* update warning banner again

apps/frontend/src/pages/organization/[id]/settings/members.vue

@@ -1,5 +1,21 @@
 <template>
 	<div class="normal-page__content">
+		<ConfirmTransferOrgModal
+			v-if="transferTargetMember"
+			ref="transferModal"
+			:organization="{ name: organization.name, icon_url: organization.icon_url }"
+			:current-owner="{
+				avatar_url: currentMember.user?.avatar_url,
+				username: currentMember.user?.username ?? '',
+				role: currentMember.role ?? 'Owner',
+			}"
+			:transfer-to="{
+				avatar_url: transferTargetMember.user?.avatar_url,
+				username: transferTargetMember.user?.username ?? '',
+				role: transferTargetMember.role || 'Member',
+			}"
+			:on-confirm="() => onTransferOwnership(organization.team_id, transferTargetMember.user.id)"
+		/>
 		<div class="universal-card">
 			<div class="label">
 				<h3>
@@ -205,7 +221,7 @@
 					</Button>
 					<Button
 						v-if="!member.is_owner && currentMember.is_owner && member.accepted"
-						@click="() => onTransferOwnership(organization.team_id, member.user.id)"
+						@click="(e) => openTransferModal(member, e)"
 					>
 						<TransferIcon />
 						Transfer ownership
@@ -233,8 +249,9 @@ import {
 	injectNotificationManager,
 	StyledInput,
 } from '@modrinth/ui'
-import { ref } from 'vue'
+import { nextTick, ref } from 'vue'
 
+import ConfirmTransferOrgModal from '~/components/ui/ConfirmTransferOrgModal.vue'
 import { removeTeamMember } from '~/helpers/teams.js'
 import { injectOrganizationContext } from '~/providers/organization-context.ts'
 import { isPermission } from '~/utils/permissions.ts'
@@ -246,6 +263,8 @@ const auth = await useAuth()
 
 const currentUsername = ref('')
 const openTeamMembers = ref([])
+const transferTargetMember = ref(null)
+const transferModal = ref(null)
 
 const allTeamMembers = ref(organization.value.members)
 
@@ -344,6 +363,13 @@ const onUpdateTeamMember = useClientTry(async (teamId, member) => {
 	})
 })
 
+const openTransferModal = (member, e) => {
+	transferTargetMember.value = member
+	nextTick(() => {
+		transferModal.value?.show(e)
+	})
+}
+
 const onTransferOwnership = useClientTry(async (teamId, uid) => {
 	const data = {
 		user_id: uid,