From 6ef99c59890744ccb0f95ff92434d8cf898e721b Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Tue, 28 Jul 2026 17:36:26 +0100
Subject: [PATCH] feat: profile settings xplat

---
 apps/app-frontend/src/App.vue                 |   7 +-
 .../components/ui/modal/AppSettingsModal.vue  |  87 +++-
 .../ui/settings/account/ProfileSettings.vue   |  70 ++++
 apps/app-frontend/src/helpers/users.ts        |  14 +-
 apps/app-frontend/src/pages/User.vue          |   7 +-
 .../src/providers/app-settings-modal.ts       |  21 +
 apps/app-frontend/src/providers/setup/auth.ts |  10 +-
 apps/app/src/api/users.rs                     |  23 ++
 apps/frontend/src/pages/settings/profile.vue  | 319 +++------------
 .../src/modules/labrinth/users/v2.ts          |  32 +-
 packages/app-lib/src/api/users.rs             |  60 ++-
 packages/app-lib/src/util/fetch.rs            |  39 +-
 .../src/components/base/FloatingActionBar.vue |  74 +++-
 .../components/base/UnsavedChangesPopup.vue   |  14 +-
 packages/ui/src/components/modal/NewModal.vue |  10 +-
 .../ui/src/components/modal/TabbedModal.vue   |  22 +-
 .../layouts/shared/user-profile/layout.vue    |   6 +-
 .../wrapped/AccountProfileSettings.vue        | 380 ++++++++++++++++++
 .../layouts/wrapped/AccountSocialSettings.vue |   5 +-
 packages/ui/src/layouts/wrapped/index.ts      |   1 +
 .../src/stories/modal/TabbedModal.stories.ts  |  42 ++
 packages/ui/src/utils/common-messages.ts      |   4 +-
 22 files changed, 954 insertions(+), 293 deletions(-)
 create mode 100644 apps/app-frontend/src/components/ui/settings/account/ProfileSettings.vue
 create mode 100644 apps/app-frontend/src/providers/app-settings-modal.ts
 create mode 100644 packages/ui/src/layouts/wrapped/AccountProfileSettings.vue

diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index ae6ab71590..53a259e3b6 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -152,6 +152,7 @@ import { generateSkinPreviews } from './helpers/rendering/batch-skin-renderer'
 import { get_available_capes, get_available_skins } from './helpers/skins'
 import { AppNotificationManager } from './providers/app-notifications'
 import { AppPopupNotificationManager } from './providers/app-popup-notifications'
+import { appSettingsModalOpenProfileKey } from './providers/app-settings-modal'
 
 const themeStore = useTheming()
 const router = useRouter()
@@ -760,6 +761,8 @@ const sharedInstanceInviteHandler = ref()
 const updateToPlayModal = ref()
 
 const modrinthLoginModal = ref()
+const appSettingsModal = ref()
+provide(appSettingsModalOpenProfileKey, () => appSettingsModal.value?.showProfile())
 
 watch(incompatibilityWarningModal, (modal) => {
 	if (modal) {
@@ -1574,7 +1577,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			</div>
 		</Transition>
 		<Suspense>
-			<AppSettingsModal ref="settingsModal" />
+			<AppSettingsModal ref="appSettingsModal" />
 		</Suspense>
 		<Suspense>
 			<ModrinthAccountRequiredModal ref="modrinthLoginModal" :request-auth="requestModrinthAuth" />
@@ -1646,7 +1649,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			<div class="flex flex-grow"></div>
 			<NavButton
 				v-tooltip.right="formatMessage(commonMessages.settingsLabel)"
-				:to="() => $refs.settingsModal.show()"
+				:to="() => appSettingsModal?.show()"
 			>
 				<SettingsIcon />
 			</NavButton>
diff --git a/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue b/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue
index 4c4ac0710f..76c59c8691 100644
--- a/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue
@@ -10,6 +10,7 @@ import {
 	Settings2Icon,
 	ShieldIcon,
 	ToggleRightIcon,
+	UserIcon,
 } from '@modrinth/assets'
 import {
 	commonMessages,
@@ -18,13 +19,15 @@ import {
 	defineMessages,
 	ProgressBar,
 	TabbedModal,
+	UnsavedChangesPopup,
 	useVIntl,
 } from '@modrinth/ui'
 import { getVersion } from '@tauri-apps/api/app'
 import { platform as getOsPlatform, version as getOsVersion } from '@tauri-apps/plugin-os'
-import { computed, ref, watch } from 'vue'
+import { computed, provide, ref, watch } from 'vue'
 
 import PrivacySettings from '@/components/ui/settings/account/PrivacySettings.vue'
+import ProfileSettings from '@/components/ui/settings/account/ProfileSettings.vue'
 import SocialSettings from '@/components/ui/settings/account/SocialSettings.vue'
 import AppearanceSettings from '@/components/ui/settings/display/AppearanceSettings.vue'
 import BehaviorSettings from '@/components/ui/settings/display/BehaviorSettings.vue'
@@ -34,6 +37,10 @@ import DefaultInstanceSettings from '@/components/ui/settings/instances/DefaultI
 import JavaSettings from '@/components/ui/settings/instances/JavaSettings.vue'
 import ResourceManagementSettings from '@/components/ui/settings/instances/ResourceManagementSettings.vue'
 import { get, set } from '@/helpers/settings.ts'
+import {
+	appSettingsModalContextKey,
+	type UnsavedChangesController,
+} from '@/providers/app-settings-modal'
 import { injectAppUpdateDownloadProgress } from '@/providers/download-progress.ts'
 import { useTheming } from '@/store/state'
 
@@ -100,6 +107,12 @@ const tabs = [
 		content: FeatureFlagSettings,
 		developerOnly: true,
 	},
+	{
+		name: commonSettingsMessages.profile,
+		category: tabCategories.account,
+		icon: UserIcon,
+		content: ProfileSettings,
+	},
 	{
 		name: commonSettingsMessages.social,
 		category: tabCategories.account,
@@ -147,12 +160,62 @@ const tabs = [
 const availableTabs = computed(() => tabs.filter((tab) => !tab.developerOnly || themeStore.devMode))
 
 const modal = ref<InstanceType<typeof TabbedModal> | null>(null)
+const unsavedChangesPopup = ref<{ nudge: () => void } | null>(null)
+const unsavedChangesController = ref<UnsavedChangesController | null>(null)
+const emptyUnsavedChangesState: Record<string, unknown> = {}
+const originalUnsavedChangesState = computed(
+	() => unsavedChangesController.value?.getOriginal() ?? emptyUnsavedChangesState,
+)
+const modifiedUnsavedChangesState = computed(
+	() => unsavedChangesController.value?.getModified() ?? emptyUnsavedChangesState,
+)
+const savingUnsavedChanges = computed(
+	() => unsavedChangesController.value?.isSaving() ?? false,
+)
+const hasUnsavedChanges = computed(
+	() => unsavedChangesController.value?.hasChanges() ?? false,
+)
+
+function canLeaveCurrentTab(): boolean {
+	if (!unsavedChangesController.value?.hasChanges()) return true
+	unsavedChangesPopup.value?.nudge()
+	return false
+}
+
+function close(): boolean {
+	return modal.value?.hide() ?? false
+}
+
+function registerUnsavedChangesController(controller: UnsavedChangesController | null): void {
+	unsavedChangesController.value = controller
+}
+
+provide(appSettingsModalContextKey, {
+	close,
+	registerUnsavedChangesController,
+})
+
+function resetUnsavedChanges(): void {
+	unsavedChangesController.value?.reset()
+}
+
+function saveUnsavedChanges(): void {
+	void unsavedChangesController.value?.save()
+}
 
 function show() {
 	modal.value?.show()
 }
 
-defineExpose({ show })
+function showProfile(): void {
+	const profileTabIndex = availableTabs.value.findIndex((tab) => tab.content === ProfileSettings)
+	if (profileTabIndex >= 0) {
+		modal.value?.setTab(profileTabIndex)
+	}
+	modal.value?.show()
+}
+
+defineExpose({ show, showProfile })
 
 const { progress, version: downloadingVersion } = injectAppUpdateDownloadProgress()
 
@@ -205,12 +268,30 @@ const messages = defineMessages({
 })
 </script>
 <template>
-	<TabbedModal ref="modal" :tabs="availableTabs" :width="'min(928px, calc(95vw - 10rem))'">
+	<TabbedModal
+		ref="modal"
+		:tabs="availableTabs"
+		:width="'min(928px, calc(95vw - 10rem))'"
+		:before-hide="canLeaveCurrentTab"
+		:before-tab-change="canLeaveCurrentTab"
+		:floating-action-bar-shown="hasUnsavedChanges"
+	>
 		<template #title>
 			<span class="text-2xl font-semibold text-contrast">
 				{{ formatMessage(commonMessages.settingsLabel) }}
 			</span>
 		</template>
+		<template #floating-action-bar>
+			<UnsavedChangesPopup
+				ref="unsavedChangesPopup"
+				:original="originalUnsavedChangesState"
+				:modified="modifiedUnsavedChangesState"
+				:saving="savingUnsavedChanges"
+				inline
+				@reset="resetUnsavedChanges"
+				@save="saveUnsavedChanges"
+			/>
+		</template>
 		<template #footer>
 			<div class="mt-auto text-secondary text-sm">
 				<div class="mb-3">
diff --git a/apps/app-frontend/src/components/ui/settings/account/ProfileSettings.vue b/apps/app-frontend/src/components/ui/settings/account/ProfileSettings.vue
new file mode 100644
index 0000000000..093cf77ad9
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/settings/account/ProfileSettings.vue
@@ -0,0 +1,70 @@
+<template>
+	<AccountProfileSettings
+		ref="profileSettings"
+		:patch-user="patchUser"
+		:change-avatar="changeAvatar"
+		:delete-avatar="deleteAvatar"
+		:get-authenticated-user="getAuthenticatedUser"
+		@profile-link-click="handleProfileLinkClick"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { AccountProfileSettings, injectAuth } from '@modrinth/ui'
+import { inject, onBeforeUnmount, onMounted, ref } from 'vue'
+
+import {
+	change_user_avatar,
+	delete_user_avatar,
+	get_user_profile,
+	patch_user,
+} from '@/helpers/users'
+import { appSettingsModalContextKey } from '@/providers/app-settings-modal'
+
+const settingsModal = inject(appSettingsModalContextKey, null)
+const auth = injectAuth()
+const profileSettings = ref<InstanceType<typeof AccountProfileSettings> | null>(null)
+
+onMounted(() => {
+	settingsModal?.registerUnsavedChangesController({
+		hasChanges: () => profileSettings.value?.hasChanges ?? false,
+		getOriginal: () => profileSettings.value?.originalState ?? {},
+		getModified: () => profileSettings.value?.modifiedState ?? {},
+		isSaving: () => profileSettings.value?.saving ?? false,
+		reset: () => profileSettings.value?.reset(),
+		save: () => profileSettings.value?.save(),
+	})
+})
+
+onBeforeUnmount(() => {
+	settingsModal?.registerUnsavedChangesController(null)
+})
+
+function handleProfileLinkClick(event: MouseEvent): void {
+	if (settingsModal && !settingsModal.close()) {
+		event.preventDefault()
+	}
+}
+
+function patchUser(
+	userId: string,
+	patch: Partial<Pick<Labrinth.Users.v2.User, 'bio' | 'username'>>,
+): Promise<void> {
+	return patch_user(userId, patch)
+}
+
+async function changeAvatar(userId: string, file: Blob, extension: string): Promise<void> {
+	await change_user_avatar(userId, new Uint8Array(await file.arrayBuffer()), extension)
+}
+
+function deleteAvatar(userId: string): Promise<void> {
+	return delete_user_avatar(userId)
+}
+
+function getAuthenticatedUser(): Promise<Labrinth.Users.v3.User> {
+	const userId = auth.user.value?.id
+	if (!userId) throw new Error('Cannot refresh a signed-out user.')
+	return get_user_profile(userId)
+}
+</script>
diff --git a/apps/app-frontend/src/helpers/users.ts b/apps/app-frontend/src/helpers/users.ts
index 405fc3ea7d..37c39b879b 100644
--- a/apps/app-frontend/src/helpers/users.ts
+++ b/apps/app-frontend/src/helpers/users.ts
@@ -50,11 +50,23 @@ export async function get_user_collections(
 
 export async function patch_user(
 	userId: string,
-	patch: Partial<Pick<Labrinth.Users.v3.User, 'badges' | 'role'>>,
+	patch: Partial<Pick<Labrinth.Users.v2.User, 'badges' | 'bio' | 'role' | 'username'>>,
 ): Promise<void> {
 	await invoke('plugin:users|patch_user', { userId, patch })
 }
 
+export async function change_user_avatar(
+	userId: string,
+	image: Uint8Array,
+	extension: string,
+): Promise<void> {
+	await invoke('plugin:users|change_user_avatar', { userId, image, extension })
+}
+
+export async function delete_user_avatar(userId: string): Promise<void> {
+	await invoke('plugin:users|delete_user_avatar', { userId })
+}
+
 export async function block_user(userId: string): Promise<void> {
 	await invoke('plugin:users|block_user', { userId })
 }
diff --git a/apps/app-frontend/src/pages/User.vue b/apps/app-frontend/src/pages/User.vue
index e0c2217c9f..96c5b794ad 100644
--- a/apps/app-frontend/src/pages/User.vue
+++ b/apps/app-frontend/src/pages/User.vue
@@ -1,11 +1,12 @@
 <template>
-	<div class="w-full pt-2">
+	<div class="w-full px-2 pt-2">
 		<UserProfilePageLayout
 			:user-id="userId"
 			:project-type="projectType"
 			variant="app"
 			site-url="https://modrinth.com"
 			project-link-mode="app"
+			:edit-profile-link="openProfileSettings"
 			external-navigation
 		/>
 	</div>
@@ -14,7 +15,7 @@
 <script setup lang="ts">
 import { provideUserProfile, UserProfilePageLayout } from '@modrinth/ui'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
-import { computed, watch } from 'vue'
+import { computed, inject, watch } from 'vue'
 import { onBeforeRouteUpdate, useRoute } from 'vue-router'
 
 import {
@@ -27,9 +28,11 @@ import {
 	patch_user,
 	unblock_user,
 } from '@/helpers/users'
+import { appSettingsModalOpenProfileKey } from '@/providers/app-settings-modal'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
 
 const route = useRoute()
+const openProfileSettings = inject(appSettingsModalOpenProfileKey, () => {})
 const queryClient = useQueryClient()
 const breadcrumbs = useBreadcrumbs()
 const userProfile = provideUserProfile({
diff --git a/apps/app-frontend/src/providers/app-settings-modal.ts b/apps/app-frontend/src/providers/app-settings-modal.ts
new file mode 100644
index 0000000000..a8136a2ce6
--- /dev/null
+++ b/apps/app-frontend/src/providers/app-settings-modal.ts
@@ -0,0 +1,21 @@
+import type { InjectionKey } from 'vue'
+
+export type UnsavedChangesController = {
+	hasChanges: () => boolean
+	getOriginal: () => Record<string, unknown>
+	getModified: () => Record<string, unknown>
+	isSaving: () => boolean
+	reset: () => void
+	save: () => void | Promise<void>
+}
+
+export type AppSettingsModalContext = {
+	close: () => boolean
+	registerUnsavedChangesController: (controller: UnsavedChangesController | null) => void
+}
+
+export const appSettingsModalContextKey: InjectionKey<AppSettingsModalContext> =
+	Symbol('appSettingsModalContext')
+export const appSettingsModalOpenProfileKey: InjectionKey<() => void> = Symbol(
+	'appSettingsModalOpenProfile',
+)
diff --git a/apps/app-frontend/src/providers/setup/auth.ts b/apps/app-frontend/src/providers/setup/auth.ts
index 7c688c6fa1..57bde7d324 100644
--- a/apps/app-frontend/src/providers/setup/auth.ts
+++ b/apps/app-frontend/src/providers/setup/auth.ts
@@ -6,7 +6,7 @@ import {
 	type AuthUser,
 	provideAuth,
 } from '@modrinth/ui'
-import { computed, type Ref, ref, watchEffect } from 'vue'
+import { computed, type Ref, ref, watch, watchEffect } from 'vue'
 
 type AppCredentials = {
 	session?: string | null
@@ -37,5 +37,13 @@ export function setupAuthProvider(
 		user.value = credentials.value?.user ?? null
 	})
 
+	watch(user, (updatedUser) => {
+		if (!credentials.value || !updatedUser || credentials.value.user === updatedUser) return
+		credentials.value = {
+			...credentials.value,
+			user: updatedUser,
+		}
+	})
+
 	provideAuth(authProvider)
 }
diff --git a/apps/app/src/api/users.rs b/apps/app/src/api/users.rs
index a7041f77f6..b81c25eb26 100644
--- a/apps/app/src/api/users.rs
+++ b/apps/app/src/api/users.rs
@@ -32,6 +32,27 @@ pub async fn patch_user(user_id: &str, patch: Value) -> Result<()> {
     Ok(theseus::users::patch_user(user_id, patch).await?)
 }
 
+#[tauri::command]
+pub async fn change_user_avatar(
+    user_id: &str,
+    image: Vec<u8>,
+    extension: &str,
+) -> Result<()> {
+    Ok(
+        theseus::users::change_user_avatar(
+            user_id,
+            image.into(),
+            extension,
+        )
+        .await?,
+    )
+}
+
+#[tauri::command]
+pub async fn delete_user_avatar(user_id: &str) -> Result<()> {
+    Ok(theseus::users::delete_user_avatar(user_id).await?)
+}
+
 #[tauri::command]
 pub async fn block_user(user_id: &str) -> Result<()> {
     Ok(theseus::users::block_user(user_id).await?)
@@ -56,6 +77,8 @@ pub fn init<R: tauri::Runtime>() -> tauri::plugin::TauriPlugin<R> {
             get_user_organizations,
             get_user_collections,
             patch_user,
+            change_user_avatar,
+            delete_user_avatar,
             block_user,
             unblock_user,
             get_blocked_users,
diff --git a/apps/frontend/src/pages/settings/profile.vue b/apps/frontend/src/pages/settings/profile.vue
index 65941a9d0f..6f1d924bfa 100644
--- a/apps/frontend/src/pages/settings/profile.vue
+++ b/apps/frontend/src/pages/settings/profile.vue
@@ -1,276 +1,77 @@
 <template>
-	<div>
-		<section class="card">
-			<h2 class="text-2xl">{{ formatMessage(messages.title) }}</h2>
-			<p class="mb-4">
-				<IntlFormatted :message-id="messages.description">
-					<template #docs-link="{ children }">
-						<a href="https://docs.modrinth.com/" target="_blank" class="text-link">
-							<component :is="() => children" />
-						</a>
-					</template>
-				</IntlFormatted>
-			</p>
-			<label>
-				<span class="label__title">{{ formatMessage(messages.profilePicture) }}</span>
-			</label>
-			<div class="avatar-changer">
-				<Avatar
-					:src="previewImage ? previewImage : avatarUrl"
-					size="md"
-					circle
-					:alt="auth.user.username"
-				/>
-				<div class="flex flex-col gap-2">
-					<ButtonStyled>
-						<FileInput
-							:max-size="262144"
-							:show-icon="true"
-							class="button-like"
-							:prompt="formatMessage(commonMessages.uploadImageButton)"
-							accept="image/png,image/jpeg,image/gif,image/webp"
-							@change="showPreviewImage"
-						>
-							<UploadIcon />
-						</FileInput>
-					</ButtonStyled>
-					<ButtonStyled v-if="avatarUrl !== null">
-						<button @click="removePreviewImage">
-							<TrashIcon />
-							{{ formatMessage(commonMessages.removeImageButton) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled v-if="previewImage">
-						<button
-							@click="
-								() => {
-									icon = null
-									previewImage = null
-								}
-							"
-						>
-							<UndoIcon />
-							{{ formatMessage(commonMessages.resetButton) }}
-						</button>
-					</ButtonStyled>
-				</div>
-			</div>
-			<label for="username-field">
-				<span class="label__title">{{ formatMessage(commonMessages.usernameLabel) }}</span>
-				<span class="label__description">
-					{{ formatMessage(messages.usernameDescription) }}
-				</span>
-			</label>
-			<StyledInput id="username-field" v-model="current.username" />
-			<div
-				v-if="current.username.length >= 30"
-				id="bio-character-limit"
-				class="inline-block pl-2"
-				:class="{ 'text-red': current.username.length > 39 }"
-			>
-				{{ current.username.length }}/{{ 39 }}
-			</div>
-			<label for="bio-field">
-				<span class="label__title">{{ formatMessage(messages.bioTitle) }}</span>
-				<span class="label__description">
-					{{ formatMessage(messages.bioDescription) }}
-				</span>
-			</label>
-			<StyledInput id="bio-field" v-model="current.bio" multiline />
-			<div id="bio-character-limit" class="pt-2" :class="{ 'text-red': current.bio.length > 160 }">
-				{{ current.bio.length }}/{{ 160 }}
-			</div>
-			<div class="input-group mt-4">
-				<ButtonStyled>
-					<NuxtLink :to="`/user/${auth.user.username}`">
-						<UserIcon /> {{ formatMessage(commonMessages.visitYourProfile) }}
-					</NuxtLink>
-				</ButtonStyled>
-			</div>
-		</section>
-		<UnsavedChangesPopup
-			:original="originalState"
-			:modified="modifiedState"
-			:saving="saving"
-			@reset="reset"
-			@save="save"
+	<section v-if="auth.user" class="universal-card">
+		<AccountProfileSettings
+			ref="profileSettings"
+			:patch-user="patchUser"
+			:change-avatar="changeAvatar"
+			:delete-avatar="deleteAvatar"
+			:get-authenticated-user="getAuthenticatedUser"
+			disclaimer-position="bottom"
 		/>
-	</div>
+		<UnsavedChangesPopup
+			:original="profileSettings?.originalState ?? emptyProfileState"
+			:modified="profileSettings?.modifiedState ?? emptyProfileState"
+			:saving="profileSettings?.saving ?? false"
+			@reset="resetProfileSettings"
+			@save="saveProfileSettings"
+		/>
+	</section>
 </template>
 
-<script setup>
-import { TrashIcon, UndoIcon, UploadIcon, UserIcon } from '@modrinth/assets'
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
 import {
-	Avatar,
-	ButtonStyled,
-	commonMessages,
-	defineMessages,
-	FileInput,
-	injectNotificationManager,
-	IntlFormatted,
-	StyledInput,
+	AccountProfileSettings,
+	commonSettingsMessages,
+	injectModrinthClient,
 	UnsavedChangesPopup,
-	useSavable,
 	useVIntl,
 } from '@modrinth/ui'
 
-const { addNotification } = injectNotificationManager()
-const { formatMessage } = useVIntl()
-
 definePageMeta({
 	middleware: 'auth',
 })
 
-const messages = defineMessages({
-	headTitle: {
-		id: 'settings.profile.head-title',
-		defaultMessage: 'Profile settings',
-	},
-	title: {
-		id: 'settings.profile.profile-info',
-		defaultMessage: 'Profile information',
-	},
-	description: {
-		id: 'settings.profile.description',
-		defaultMessage:
-			'Your profile information is publicly viewable on Modrinth and through the <docs-link>Modrinth API</docs-link>.',
-	},
-	profilePicture: {
-		id: 'settings.profile.profile-picture.title',
-		defaultMessage: 'Profile picture',
-	},
-	usernameDescription: {
-		id: 'settings.profile.username.description',
-		defaultMessage: 'A unique case-insensitive name to identify your profile.',
-	},
-	bioTitle: {
-		id: 'settings.profile.bio.title',
-		defaultMessage: 'Bio',
-	},
-	bioDescription: {
-		id: 'settings.profile.bio.description',
-		defaultMessage: 'A short description to tell everyone a little bit about you.',
-	},
-})
+const auth = await useAuth()
+const client = injectModrinthClient()
+const { formatMessage } = useVIntl()
+const profileSettings = ref<InstanceType<typeof AccountProfileSettings> | null>(null)
+const emptyProfileState = {
+	username: '',
+	bio: '',
+	avatarChanged: false,
+}
+
+function patchUser(
+	userId: string,
+	patch: Partial<Pick<Labrinth.Users.v2.User, 'bio' | 'username'>>,
+): Promise<void> {
+	return client.labrinth.users_v2.patch(userId, patch)
+}
+
+function changeAvatar(userId: string, file: Blob, extension: string): Promise<void> {
+	return client.labrinth.users_v2.changeIcon(userId, file, extension)
+}
+
+function deleteAvatar(userId: string): Promise<void> {
+	return client.labrinth.users_v2.deleteIcon(userId)
+}
+
+async function getAuthenticatedUser(): Promise<Labrinth.Users.v3.User> {
+	const user = await client.labrinth.users_v3.getAuthenticated()
+	auth.value.user = user
+	return user
+}
+
+function resetProfileSettings(): void {
+	profileSettings.value?.reset()
+}
+
+function saveProfileSettings(): void {
+	void profileSettings.value?.save()
+}
 
 useHead({
-	title: () => `${formatMessage(messages.headTitle)} - Modrinth`,
+	title: () => `${formatMessage(commonSettingsMessages.profile)} - Modrinth`,
 })
-
-const auth = await useAuth()
-
-// Avatar state (separate from useSavable)
-const avatarUrl = ref(auth.value.user.avatar_url)
-const icon = shallowRef(null)
-const previewImage = shallowRef(null)
-const pendingAvatarDeletion = ref(false)
-const saving = ref(false)
-
-const {
-	saved,
-	current,
-	reset: resetFields,
-} = useSavable(
-	() => ({
-		username: auth.value.user.username,
-		bio: auth.value.user.bio ?? '',
-	}),
-	async () => {}, // Save is handled manually due to complex icon logic
-)
-
-// Combined state for UnsavedChangesPopup
-const originalState = computed(() => ({
-	...saved.value,
-	avatarChanged: false,
-}))
-
-const modifiedState = computed(() => ({
-	...current.value,
-	avatarChanged: !!(previewImage.value || pendingAvatarDeletion.value),
-}))
-
-const reset = () => {
-	resetFields()
-	icon.value = null
-	previewImage.value = null
-	pendingAvatarDeletion.value = false
-}
-
-function showPreviewImage(files) {
-	const reader = new FileReader()
-	icon.value = files[0]
-	reader.readAsDataURL(icon.value)
-	reader.onload = (event) => {
-		previewImage.value = event.target.result
-	}
-}
-
-function removePreviewImage() {
-	pendingAvatarDeletion.value = true
-	previewImage.value = 'https://cdn.modrinth.com/placeholder.png'
-}
-
-async function save() {
-	saving.value = true
-	try {
-		if (pendingAvatarDeletion.value) {
-			await useBaseFetch(`user/${auth.value.user.id}/icon`, {
-				method: 'DELETE',
-			})
-			pendingAvatarDeletion.value = false
-			previewImage.value = null
-		}
-
-		if (icon.value) {
-			await useBaseFetch(
-				`user/${auth.value.user.id}/icon?ext=${
-					icon.value.type.split('/')[icon.value.type.split('/').length - 1]
-				}`,
-				{
-					method: 'PATCH',
-					body: icon.value,
-				},
-			)
-			icon.value = null
-			previewImage.value = null
-		}
-
-		const body = {}
-
-		if (auth.value.user.username !== current.value.username) {
-			body.username = current.value.username
-		}
-
-		if (auth.value.user.bio !== current.value.bio) {
-			body.bio = current.value.bio
-		}
-
-		await useBaseFetch(`user/${auth.value.user.id}`, {
-			method: 'PATCH',
-			body,
-		})
-		await useAuth(auth.value.token)
-		avatarUrl.value = auth.value.user.avatar_url
-	} catch (err) {
-		addNotification({
-			title: formatMessage(commonMessages.errorNotificationTitle),
-			text: err
-				? err.data
-					? err.data.description
-						? err.data.description
-						: err.data
-					: err
-				: 'aaaaahhh',
-			type: 'error',
-		})
-	}
-	saving.value = false
-}
 </script>
-<style lang="scss" scoped>
-.avatar-changer {
-	display: flex;
-	gap: var(--gap-lg);
-	margin-top: var(--gap-md);
-}
-</style>
diff --git a/packages/api-client/src/modules/labrinth/users/v2.ts b/packages/api-client/src/modules/labrinth/users/v2.ts
index 2f2cafdef0..de08c07aab 100644
--- a/packages/api-client/src/modules/labrinth/users/v2.ts
+++ b/packages/api-client/src/modules/labrinth/users/v2.ts
@@ -168,7 +168,7 @@ export class LabrinthUsersV2Module extends AbstractModule {
 	 */
 	public async patch(
 		idOrUsername: string,
-		data: Partial<Pick<Labrinth.Users.v2.User, 'badges' | 'role'>>,
+		data: Partial<Pick<Labrinth.Users.v2.User, 'badges' | 'bio' | 'role' | 'username'>>,
 	): Promise<void> {
 		return this.client.request(`/user/${idOrUsername}`, {
 			api: 'labrinth',
@@ -177,4 +177,34 @@ export class LabrinthUsersV2Module extends AbstractModule {
 			body: data,
 		})
 	}
+
+	/**
+	 * Change a user's avatar.
+	 *
+	 * @param idOrUsername - The user's ID or username
+	 * @param file - Image file to upload
+	 * @param ext - File extension (e.g., 'png', 'jpeg', 'gif', 'webp')
+	 */
+	public async changeIcon(idOrUsername: string, file: Blob, ext: string): Promise<void> {
+		return this.client.request(`/user/${idOrUsername}/icon`, {
+			api: 'labrinth',
+			version: 2,
+			method: 'PATCH',
+			params: { ext },
+			body: file,
+		})
+	}
+
+	/**
+	 * Delete a user's avatar.
+	 *
+	 * @param idOrUsername - The user's ID or username
+	 */
+	public async deleteIcon(idOrUsername: string): Promise<void> {
+		return this.client.request(`/user/${idOrUsername}/icon`, {
+			api: 'labrinth',
+			version: 2,
+			method: 'DELETE',
+		})
+	}
 }
diff --git a/packages/app-lib/src/api/users.rs b/packages/app-lib/src/api/users.rs
index b92a00b7b1..4db8ec8f5a 100644
--- a/packages/app-lib/src/api/users.rs
+++ b/packages/app-lib/src/api/users.rs
@@ -1,5 +1,8 @@
 use crate::State;
-use crate::util::fetch::{fetch_advanced, fetch_json};
+use crate::util::fetch::{
+    fetch_advanced, fetch_advanced_bytes, fetch_json,
+};
+use bytes::Bytes;
 use reqwest::Method;
 use serde::{Deserialize, Serialize};
 use serde_json::Value;
@@ -130,6 +133,61 @@ pub async fn patch_user(user_id: &str, patch: Value) -> crate::Result<()> {
     Ok(())
 }
 
+#[tracing::instrument(skip(image))]
+pub async fn change_user_avatar(
+    user_id: &str,
+    image: Bytes,
+    extension: &str,
+) -> crate::Result<()> {
+    let state = State::get().await?;
+    let user_id = urlencoding::encode(user_id);
+    let extension = urlencoding::encode(extension);
+
+    fetch_advanced_bytes(
+        Method::PATCH,
+        &format!(
+            "{}user/{}/icon?ext={}",
+            env!("MODRINTH_API_URL"),
+            user_id,
+            extension
+        ),
+        image,
+        Some(("Content-Type", "application/octet-stream")),
+        Some("/v2/user/:id/icon"),
+        &state.api_semaphore,
+        &state.pool,
+    )
+    .await?;
+
+    Ok(())
+}
+
+#[tracing::instrument]
+pub async fn delete_user_avatar(user_id: &str) -> crate::Result<()> {
+    let state = State::get().await?;
+    let user_id = urlencoding::encode(user_id);
+
+    fetch_advanced(
+        Method::DELETE,
+        &format!(
+            "{}user/{}/icon",
+            env!("MODRINTH_API_URL"),
+            user_id
+        ),
+        None,
+        None,
+        None,
+        None,
+        None,
+        Some("/v2/user/:id/icon"),
+        &state.api_semaphore,
+        &state.pool,
+    )
+    .await?;
+
+    Ok(())
+}
+
 #[tracing::instrument]
 pub async fn block_user(user_id: &str) -> crate::Result<()> {
     let state = State::get().await?;
diff --git a/packages/app-lib/src/util/fetch.rs b/packages/app-lib/src/util/fetch.rs
index a7cb5215ae..4106af68a2 100644
--- a/packages/app-lib/src/util/fetch.rs
+++ b/packages/app-lib/src/util/fetch.rs
@@ -428,6 +428,7 @@ pub async fn fetch_with_client_progress(
         sha1,
         None,
         None,
+        None,
         download_meta,
         None,
         uri_path,
@@ -493,6 +494,35 @@ pub async fn fetch_advanced(
     .await
 }
 
+#[tracing::instrument(skip(body, semaphore))]
+#[allow(clippy::too_many_arguments)]
+pub async fn fetch_advanced_bytes(
+    method: Method,
+    url: &str,
+    body: Bytes,
+    header: Option<(&str, &str)>,
+    uri_path: Option<&'static str>,
+    semaphore: &FetchSemaphore,
+    exec: impl sqlx::Executor<'_, Database = sqlx::Sqlite>,
+) -> crate::Result<Bytes> {
+    fetch_advanced_with_client_and_progress(
+        method,
+        url,
+        None,
+        None,
+        Some(body),
+        header,
+        None,
+        None,
+        uri_path,
+        semaphore,
+        exec,
+        &INSECURE_REQWEST_CLIENT,
+        None,
+    )
+    .await
+}
+
 #[tracing::instrument(skip(json_body, semaphore, progress))]
 #[allow(clippy::too_many_arguments)]
 pub async fn fetch_advanced_with_progress(
@@ -513,6 +543,7 @@ pub async fn fetch_advanced_with_progress(
         url,
         sha1,
         json_body,
+        None,
         header,
         download_meta,
         loading_bar,
@@ -546,6 +577,7 @@ pub async fn fetch_advanced_with_client(
         url,
         sha1,
         json_body,
+        None,
         header,
         download_meta,
         loading_bar,
@@ -558,13 +590,16 @@ pub async fn fetch_advanced_with_client(
     .await
 }
 
-#[tracing::instrument(skip(json_body, semaphore, client, progress))]
+#[tracing::instrument(
+    skip(json_body, bytes_body, semaphore, client, progress)
+)]
 #[allow(clippy::too_many_arguments)]
 async fn fetch_advanced_with_client_and_progress(
     method: Method,
     url: &str,
     sha1: Option<&str>,
     json_body: Option<serde_json::Value>,
+    bytes_body: Option<Bytes>,
     header: Option<(&str, &str)>,
     download_meta: Option<&DownloadMeta>,
     loading_bar: Option<(&LoadingBarId, f64)>,
@@ -611,6 +646,8 @@ async fn fetch_advanced_with_client_and_progress(
 
         if let Some(body) = json_body.clone() {
             req = req.json(&body);
+        } else if let Some(body) = bytes_body.clone() {
+            req = req.body(body);
         }
 
         if let Some(header) = header {
diff --git a/packages/ui/src/components/base/FloatingActionBar.vue b/packages/ui/src/components/base/FloatingActionBar.vue
index 7554295275..a15d6f86b3 100644
--- a/packages/ui/src/components/base/FloatingActionBar.vue
+++ b/packages/ui/src/components/base/FloatingActionBar.vue
@@ -17,6 +17,7 @@ const props = defineProps<{
 	ariaLabel?: string
 	belowModal?: boolean
 	hideWhenModalOpen?: boolean
+	inline?: boolean
 }>()
 
 const INTERCOM_BUBBLE_GAP = 8
@@ -24,6 +25,7 @@ const INTERCOM_BUBBLE_GAP = 8
 const barEl = ref<HTMLElement | null>(null)
 const toolbarEl = ref<HTMLElement | null>(null)
 const compact = ref(false)
+const attentionRequested = ref(false)
 
 const { stackCount } = useModalStack()
 const pageContext = injectPageContext(null)
@@ -75,6 +77,7 @@ function updateIntercomBubbleClearance() {
 
 	if (
 		typeof window === 'undefined' ||
+		props.inline ||
 		!shown.value ||
 		stackCount.value > 0 ||
 		!barEl.value ||
@@ -105,7 +108,7 @@ function updateIntercomBubbleClearance() {
 function updateBodyState(isShown = shown.value) {
 	if (typeof document === 'undefined') return
 
-	if (isShown) {
+	if (isShown && !props.inline) {
 		visibleFloatingActionBars.add(floatingActionBarId)
 	} else {
 		visibleFloatingActionBars.delete(floatingActionBarId)
@@ -149,10 +152,10 @@ watch(
 )
 
 watch(
-	shown,
+	[shown, () => props.inline],
 	async (isShown) => {
 		await nextTick()
-		updateBodyState(isShown)
+		updateBodyState(isShown[0])
 		scheduleIntercomBubbleClearanceUpdate()
 	},
 	{ immediate: true },
@@ -187,24 +190,44 @@ onUnmounted(() => {
 	if (typeof document === 'undefined') return
 	updateFloatingActionBarBodyClass()
 })
+
+async function nudge(): Promise<void> {
+	attentionRequested.value = false
+	await nextTick()
+	attentionRequested.value = true
+}
+
+defineExpose({ nudge })
 </script>
 
 <template>
-	<Teleport to="body">
+	<Teleport to="body" :disabled="inline">
 		<Transition name="floating-action-bar" appear>
 			<div
 				v-if="shown"
 				ref="barEl"
-				class="floating-action-bar drop-shadow-2xl fixed p-4 bottom-0"
-				:style="barStyle"
+				class="floating-action-bar drop-shadow-2xl"
+				:class="
+					inline
+						? 'floating-action-bar--inline z-10'
+						: 'fixed bottom-0 p-4'
+				"
+				:style="inline ? undefined : barStyle"
 				aria-live="polite"
 			>
 				<div
 					ref="toolbarEl"
 					role="toolbar"
 					:aria-label="ariaLabel"
-					class="relative overflow-clip flex items-center gap-1.5 rounded-[20px] bg-surface-3 border border-surface-5 border-solid mx-auto md:max-w-[60vw] px-3 py-2.5 shadow-[0px_1px_3px_0px_rgba(0,0,0,0.3),0px_6px_10px_0px_rgba(0,0,0,0.15)]"
-					:class="{ 'bar-compact': compact }"
+					class="relative overflow-clip flex items-center gap-1.5 rounded-[20px] bg-surface-3 border border-surface-5 border-solid px-3 py-2.5 shadow-[0px_1px_3px_0px_rgba(0,0,0,0.3),0px_6px_10px_0px_rgba(0,0,0,0.15)]"
+					:class="[
+						{
+							'bar-compact': compact,
+							'floating-action-bar-attention': attentionRequested,
+						},
+						inline ? 'w-full' : 'mx-auto md:max-w-[60vw]',
+					]"
+					@animationend="attentionRequested = false"
 				>
 					<slot />
 				</div>
@@ -220,6 +243,31 @@ onUnmounted(() => {
 	transition: bottom 0.25s ease-in-out;
 }
 
+.floating-action-bar--inline {
+	left: auto;
+	right: auto;
+}
+
+.floating-action-bar-attention {
+	animation: floating-action-bar-attention 300ms ease-in-out;
+}
+
+@keyframes floating-action-bar-attention {
+	0%,
+	100% {
+		transform: translateX(0);
+	}
+	25% {
+		transform: translateX(-0.4rem);
+	}
+	50% {
+		transform: translateX(0.4rem);
+	}
+	75% {
+		transform: translateX(-0.2rem);
+	}
+}
+
 .floating-action-bar-enter-active {
 	transition:
 		transform 0.25s cubic-bezier(0.15, 1.4, 0.64, 0.96),
@@ -243,14 +291,20 @@ onUnmounted(() => {
 }
 
 @media (any-hover: none) and (max-width: 640px) {
-	.floating-action-bar {
+	.floating-action-bar:not(.floating-action-bar--inline) {
 		bottom: var(--size-mobile-navbar-height);
 	}
 
-	.expanded-mobile-nav .floating-action-bar {
+	.expanded-mobile-nav .floating-action-bar:not(.floating-action-bar--inline) {
 		bottom: var(--size-mobile-navbar-height-expanded);
 	}
 }
+
+@media (prefers-reduced-motion: reduce) {
+	.floating-action-bar-attention {
+		animation: none;
+	}
+}
 </style>
 
 <style>
diff --git a/packages/ui/src/components/base/UnsavedChangesPopup.vue b/packages/ui/src/components/base/UnsavedChangesPopup.vue
index 107cbecf4e..4606042c86 100644
--- a/packages/ui/src/components/base/UnsavedChangesPopup.vue
+++ b/packages/ui/src/components/base/UnsavedChangesPopup.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts" generic="T">
 import { HistoryIcon, SaveIcon, SpinnerIcon } from '@modrinth/assets'
 import { isEqual } from 'es-toolkit'
-import { type Component, computed } from 'vue'
+import { type Component, computed, ref } from 'vue'
 
 import { defineMessage, type MessageDescriptor, useVIntl } from '../../composables/i18n'
 import { commonMessages } from '../../utils'
@@ -24,6 +24,7 @@ const props = withDefaults(
 		saveLabel?: MessageDescriptor | string
 		savingLabel?: MessageDescriptor | string
 		saveIcon?: Component
+		inline?: boolean
 	}>(),
 	{
 		canReset: true,
@@ -36,6 +37,7 @@ const props = withDefaults(
 		saveLabel: () => commonMessages.saveButton,
 		savingLabel: () => commonMessages.savingButton,
 		saveIcon: SaveIcon,
+		inline: false,
 	},
 )
 
@@ -46,10 +48,18 @@ const shown = computed(() =>
 function localizeIfPossible(message: MessageDescriptor | string) {
 	return typeof message === 'string' ? message : formatMessage(message)
 }
+
+const actionBar = ref<InstanceType<typeof FloatingActionBar> | null>(null)
+
+function nudge(): void {
+	void actionBar.value?.nudge()
+}
+
+defineExpose({ nudge })
 </script>
 
 <template>
-	<FloatingActionBar :shown="shown">
+	<FloatingActionBar ref="actionBar" :shown="shown" :inline="inline">
 		<p class="m-0 font-semibold text-sm md:text-base">{{ localizeIfPossible(text) }}</p>
 		<div class="ml-auto flex gap-2">
 			<ButtonStyled v-if="canReset" type="transparent">
diff --git a/packages/ui/src/components/modal/NewModal.vue b/packages/ui/src/components/modal/NewModal.vue
index dee1783b86..8840a012da 100644
--- a/packages/ui/src/components/modal/NewModal.vue
+++ b/packages/ui/src/components/modal/NewModal.vue
@@ -175,6 +175,7 @@ const props = withDefaults(
 		onHide?: () => void
 		onAfterHide?: () => void
 		onShow?: () => void
+		beforeHide?: () => boolean
 		mergeHeader?: boolean
 		scrollable?: boolean
 		maxContentHeight?: string
@@ -202,6 +203,7 @@ const props = withDefaults(
 		onHide: () => {},
 		onAfterHide: () => {},
 		onShow: () => {},
+		beforeHide: undefined,
 		mergeHeader: false,
 		// TODO: migrate all modals to use scrollable and remove this prop
 		scrollable: false,
@@ -279,9 +281,12 @@ function show(event?: MouseEvent) {
 	}, 50)
 }
 
-function hide() {
+function hide(): boolean {
 	if (props.disableClose) {
-		return
+		return false
+	}
+	if (props.beforeHide?.() === false) {
+		return false
 	}
 	props.onHide?.()
 	resetMousePosition()
@@ -302,6 +307,7 @@ function hide() {
 		hideTimeout = null
 		nextTick(() => props.onAfterHide?.())
 	}, 300)
+	return true
 }
 
 async function scrollToBottom(behavior: ScrollBehavior = 'smooth') {
diff --git a/packages/ui/src/components/modal/TabbedModal.vue b/packages/ui/src/components/modal/TabbedModal.vue
index acf8406326..b076e2492e 100644
--- a/packages/ui/src/components/modal/TabbedModal.vue
+++ b/packages/ui/src/components/modal/TabbedModal.vue
@@ -28,6 +28,9 @@ const props = withDefaults(
 		closable?: boolean
 		onHide?: () => void
 		onShow?: () => void
+		beforeHide?: () => boolean
+		beforeTabChange?: (fromIndex: number, toIndex: number) => boolean
+		floatingActionBarShown?: boolean
 	}>(),
 	{
 		header: undefined,
@@ -36,6 +39,9 @@ const props = withDefaults(
 		closable: true,
 		onHide: undefined,
 		onShow: undefined,
+		beforeHide: undefined,
+		beforeTabChange: undefined,
+		floatingActionBarShown: false,
 	},
 )
 
@@ -50,6 +56,8 @@ const { showTopFade, showBottomFade, checkScrollState, forceCheck } =
 const modal = ref<InstanceType<typeof NewModal> | null>(null)
 
 function setTab(index: number) {
+	if (index === selectedTab.value) return
+	if (props.beforeTabChange?.(selectedTab.value, index) === false) return
 	selectedTab.value = index
 	nextTick(() => forceCheck())
 }
@@ -58,8 +66,8 @@ function show(event?: MouseEvent) {
 	modal.value?.show(event)
 }
 
-function hide() {
-	modal.value?.hide()
+function hide(): boolean {
+	return modal.value?.hide() ?? false
 }
 
 function startsCategory(index: number) {
@@ -78,6 +86,7 @@ defineExpose({ show, hide, selectedTab, setTab })
 		:closable="closable"
 		:on-hide="onHide"
 		:on-show="onShow"
+		:before-hide="beforeHide"
 		no-padding
 	>
 		<template v-if="$slots.title" #title>
@@ -133,7 +142,8 @@ defineExpose({ show, hide, selectedTab, setTab })
 
 				<div
 					ref="scrollContainer"
-					class="absolute inset-0 overflow-y-auto px-6 pb-6"
+					class="absolute inset-0 overflow-y-auto px-6"
+					:class="floatingActionBarShown ? 'pb-24' : 'pb-6'"
 					@scroll="checkScrollState"
 				>
 					<Suspense>
@@ -157,6 +167,12 @@ defineExpose({ show, hide, selectedTab, setTab })
 						class="pointer-events-none absolute bottom-0 left-0 right-0 z-10 h-16 bg-gradient-to-t from-bg-raised to-transparent"
 					/>
 				</Transition>
+
+				<div class="pointer-events-none absolute bottom-3 left-6 right-6 z-20">
+					<div class="pointer-events-auto">
+						<slot name="floating-action-bar" />
+					</div>
+				</div>
 			</div>
 		</div>
 	</NewModal>
diff --git a/packages/ui/src/layouts/shared/user-profile/layout.vue b/packages/ui/src/layouts/shared/user-profile/layout.vue
index 3f26f61472..6199ed79f6 100644
--- a/packages/ui/src/layouts/shared/user-profile/layout.vue
+++ b/packages/ui/src/layouts/shared/user-profile/layout.vue
@@ -500,6 +500,7 @@ const props = withDefaults(
 		siteUrl?: string
 		externalNavigation?: boolean
 		projectLinkMode?: 'website' | 'app'
+		editProfileLink?: string | (() => void)
 		onCreateProject?: (event?: MouseEvent) => void
 		onCreateCollection?: (event?: MouseEvent) => void
 	}>(),
@@ -511,6 +512,7 @@ const props = withDefaults(
 		siteUrl: 'https://modrinth.com',
 		externalNavigation: false,
 		projectLinkMode: 'website',
+		editProfileLink: undefined,
 		onCreateProject: undefined,
 		onCreateCollection: undefined,
 	},
@@ -837,7 +839,9 @@ const showCollectionsEmptyState = computed(
 )
 
 const normalizedSiteUrl = computed(() => props.siteUrl.replace(/\/$/, ''))
-const editProfileLink = computed(() => linkTarget('/settings/profile'))
+const editProfileLink = computed(
+	() => props.editProfileLink ?? linkTarget('/settings/profile'),
+)
 
 function externalUrl(path: string): string {
 	return `${normalizedSiteUrl.value}${path.startsWith('/') ? path : `/${path}`}`
diff --git a/packages/ui/src/layouts/wrapped/AccountProfileSettings.vue b/packages/ui/src/layouts/wrapped/AccountProfileSettings.vue
new file mode 100644
index 0000000000..aa80fbe10d
--- /dev/null
+++ b/packages/ui/src/layouts/wrapped/AccountProfileSettings.vue
@@ -0,0 +1,380 @@
+<template>
+	<EmptyState
+		v-if="!auth.user.value"
+		type="empty"
+		class="[&>div:last-child]:!mt-6"
+		:heading="formatMessage(messages.signInRequiredTitle)"
+		:description="formatMessage(messages.signInRequiredDescription)"
+	>
+		<template #illustration>
+			<div class="relative mb-4 h-[200px]">
+				<img :src="ThinkingRinthbot" alt="" class="h-full w-auto object-contain" />
+				<div
+					class="pointer-events-none absolute inset-x-0 bottom-0 h-14 bg-gradient-to-t from-bg-raised to-transparent"
+				/>
+			</div>
+		</template>
+		<template #actions>
+			<ButtonStyled color="brand" size="large">
+				<button type="button" @click="requestSignIn">
+					<LogInIcon aria-hidden="true" />
+					{{ formatMessage(commonMessages.signInButton) }}
+				</button>
+			</ButtonStyled>
+		</template>
+	</EmptyState>
+
+	<div v-else class="flex flex-col gap-4">
+		<p
+			class="m-0 text-secondary"
+			:class="{ 'order-last': disclaimerPosition === 'bottom' }"
+		>
+			<IntlFormatted :message-id="messages.description">
+				<template #profile-link="{ children }">
+					<RouterLink v-slot="{ href, navigate }" :to="profilePath" custom>
+						<a
+							:href="href"
+							class="text-link"
+							@click="handleProfileLinkClick($event, navigate)"
+						>
+							<component :is="() => children" />
+						</a>
+					</RouterLink>
+				</template>
+				<template #docs-link="{ children }">
+					<a href="https://docs.modrinth.com/" target="_blank" class="text-link">
+						<component :is="() => children" />
+					</a>
+				</template>
+			</IntlFormatted>
+		</p>
+
+		<hr
+			v-if="disclaimerPosition === 'top'"
+			class="m-0 h-px w-full border-none bg-divider"
+			aria-hidden="true"
+		/>
+
+		<section class="flex flex-col gap-6">
+			<div class="flex flex-col gap-2.5">
+				<h2 class="m-0 text-lg font-semibold text-contrast">
+					{{ formatMessage(messages.profilePicture) }}
+				</h2>
+				<div class="flex items-center gap-4">
+					<Avatar
+						:src="displayedAvatarUrl"
+						size="md"
+						circle
+						:alt="auth.user.value.username"
+					/>
+					<div class="flex flex-col gap-2">
+						<ButtonStyled>
+							<FileInput
+								:max-size="262144"
+								:show-icon="true"
+								class="button-like !shadow-none"
+								:prompt="formatMessage(commonMessages.uploadImageButton)"
+								accept="image/png,image/jpeg,image/gif,image/webp"
+								@change="showPreviewImage"
+							>
+								<UploadIcon aria-hidden="true" />
+							</FileInput>
+						</ButtonStyled>
+						<ButtonStyled v-if="avatarUrl && !pendingAvatarDeletion">
+							<button type="button" class="!shadow-none" @click="removePreviewImage">
+								<TrashIcon aria-hidden="true" />
+								{{ formatMessage(commonMessages.removeImageButton) }}
+							</button>
+						</ButtonStyled>
+						<ButtonStyled v-if="avatarFile || pendingAvatarDeletion">
+							<button type="button" class="!shadow-none" @click="resetAvatar">
+								<UndoIcon aria-hidden="true" />
+								{{ formatMessage(commonMessages.resetButton) }}
+							</button>
+						</ButtonStyled>
+					</div>
+				</div>
+			</div>
+
+			<div class="flex flex-col gap-2.5">
+				<h2 class="m-0 text-lg font-semibold text-contrast">
+					{{ formatMessage(commonMessages.usernameLabel) }}
+				</h2>
+				<div class="flex items-center gap-2">
+					<StyledInput
+						id="username-field"
+						v-model="current.username"
+						class="w-full max-w-md"
+						:error="current.username.length > 39"
+					/>
+					<span
+						v-if="current.username.length >= 30"
+						class="shrink-0 text-secondary"
+						:class="{ 'text-red': current.username.length > 39 }"
+					>
+						{{ current.username.length }}/39
+					</span>
+				</div>
+				<p class="m-0 text-secondary">
+					{{ formatMessage(messages.usernameDescription) }}
+				</p>
+			</div>
+
+			<div class="flex flex-col gap-2.5">
+				<h2 class="m-0 text-lg font-semibold text-contrast">
+					{{ formatMessage(messages.bioTitle) }}
+				</h2>
+				<StyledInput
+					id="bio-field"
+					v-model="current.bio"
+					multiline
+					:error="current.bio.length > 160"
+				/>
+				<div class="text-secondary" :class="{ 'text-red': current.bio.length > 160 }">
+					{{ current.bio.length }}/160
+				</div>
+				<p class="m-0 text-secondary">
+					{{ formatMessage(messages.bioDescription) }}
+				</p>
+			</div>
+		</section>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { LogInIcon, ThinkingRinthbot, TrashIcon, UndoIcon, UploadIcon } from '@modrinth/assets'
+import { computed, onBeforeUnmount, ref, shallowRef, watch } from 'vue'
+import { RouterLink } from 'vue-router'
+
+import Avatar from '#ui/components/base/Avatar.vue'
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import EmptyState from '#ui/components/base/EmptyState.vue'
+import FileInput from '#ui/components/base/FileInput.vue'
+import IntlFormatted from '#ui/components/base/IntlFormatted.vue'
+import StyledInput from '#ui/components/base/StyledInput.vue'
+import { defineMessages, useVIntl } from '#ui/composables'
+import {
+	type AuthUser,
+	injectAuth,
+	injectNotificationManager,
+} from '#ui/providers'
+import { commonMessages } from '#ui/utils'
+
+type ProfileFields = {
+	username: string
+	bio: string
+}
+
+const props = withDefaults(
+	defineProps<{
+		patchUser: (userId: string, patch: Partial<ProfileFields>) => Promise<void>
+		changeAvatar: (userId: string, file: Blob, extension: string) => Promise<void>
+		deleteAvatar: (userId: string) => Promise<void>
+		getAuthenticatedUser: () => Promise<AuthUser>
+		disclaimerPosition?: 'top' | 'bottom'
+	}>(),
+	{
+		disclaimerPosition: 'top',
+	},
+)
+const emit = defineEmits<{
+	profileLinkClick: [event: MouseEvent]
+}>()
+
+const auth = injectAuth()
+const notificationManager = injectNotificationManager()
+const { formatMessage } = useVIntl()
+
+const activeUserId = ref<string | null>(null)
+const original = ref<ProfileFields>({ username: '', bio: '' })
+const current = ref<ProfileFields>({ username: '', bio: '' })
+const avatarUrl = ref<string | null>(null)
+const avatarFile = shallowRef<File | null>(null)
+const previewImageUrl = ref<string | null>(null)
+const pendingAvatarDeletion = ref(false)
+const saving = ref(false)
+
+const displayedAvatarUrl = computed(() => {
+	if (previewImageUrl.value) return previewImageUrl.value
+	if (pendingAvatarDeletion.value) return null
+	return avatarUrl.value
+})
+const profilePath = computed(
+	() => `/user/${encodeURIComponent(auth.user.value?.username ?? current.value.username)}`,
+)
+const originalState = computed(() => ({
+	...original.value,
+	avatarChanged: false,
+}))
+const modifiedState = computed(() => ({
+	...current.value,
+	avatarChanged: Boolean(avatarFile.value || pendingAvatarDeletion.value),
+}))
+const hasChanges = computed(
+	() =>
+		current.value.username !== original.value.username ||
+		current.value.bio !== original.value.bio ||
+		Boolean(avatarFile.value || pendingAvatarDeletion.value),
+)
+
+watch(
+	() => auth.user.value,
+	(user) => {
+		if (!user || user.id !== activeUserId.value) {
+			syncFromUser(user)
+		}
+	},
+	{ immediate: true },
+)
+
+function syncFromUser(user: AuthUser | null): void {
+	revokePreviewImage()
+	activeUserId.value = user?.id ?? null
+	original.value = {
+		username: user?.username ?? '',
+		bio: user?.bio ?? '',
+	}
+	current.value = { ...original.value }
+	avatarUrl.value = user?.avatar_url ?? null
+	avatarFile.value = null
+	pendingAvatarDeletion.value = false
+}
+
+function revokePreviewImage(): void {
+	if (previewImageUrl.value) {
+		URL.revokeObjectURL(previewImageUrl.value)
+		previewImageUrl.value = null
+	}
+}
+
+function showPreviewImage(files: File[]): void {
+	const file = files[0]
+	if (!file) return
+
+	revokePreviewImage()
+	avatarFile.value = file
+	previewImageUrl.value = URL.createObjectURL(file)
+	pendingAvatarDeletion.value = false
+}
+
+function removePreviewImage(): void {
+	revokePreviewImage()
+	avatarFile.value = null
+	pendingAvatarDeletion.value = true
+}
+
+function resetAvatar(): void {
+	revokePreviewImage()
+	avatarFile.value = null
+	pendingAvatarDeletion.value = false
+}
+
+function reset(): void {
+	current.value = { ...original.value }
+	resetAvatar()
+}
+
+async function requestSignIn(): Promise<void> {
+	await auth.requestSignIn('')
+}
+
+function handleProfileLinkClick(
+	event: MouseEvent,
+	navigate: (event?: MouseEvent) => unknown,
+): void {
+	emit('profileLinkClick', event)
+	if (!event.defaultPrevented) {
+		navigate(event)
+	}
+}
+
+async function save(): Promise<void> {
+	const user = auth.user.value
+	if (!user || saving.value) return
+
+	saving.value = true
+	try {
+		const patch: Partial<ProfileFields> = {}
+		if (current.value.username !== original.value.username) {
+			patch.username = current.value.username
+		}
+		if (current.value.bio !== original.value.bio) {
+			patch.bio = current.value.bio
+		}
+		if (Object.keys(patch).length > 0) {
+			await props.patchUser(user.id, patch)
+		}
+
+		if (pendingAvatarDeletion.value) {
+			await props.deleteAvatar(user.id)
+		} else if (avatarFile.value) {
+			const extension = avatarFile.value.type.split('/').at(-1)
+			if (!extension) throw new Error('The selected image does not have a valid file type.')
+			await props.changeAvatar(user.id, avatarFile.value, extension)
+		}
+
+		const refreshedUser = await props.getAuthenticatedUser()
+		auth.user.value = refreshedUser
+		syncFromUser(refreshedUser)
+	} catch {
+		notificationManager.addNotification({
+			type: 'error',
+			title: formatMessage(messages.saveError),
+			text: formatMessage(messages.saveErrorDescription),
+		})
+	} finally {
+		saving.value = false
+	}
+}
+
+onBeforeUnmount(revokePreviewImage)
+
+defineExpose({
+	originalState,
+	modifiedState,
+	saving,
+	hasChanges,
+	reset,
+	save,
+})
+
+const messages = defineMessages({
+	description: {
+		id: 'settings.profile.public-information.description',
+		defaultMessage:
+			'Your profile information is publicly <profile-link>viewable on Modrinth</profile-link> and through the <docs-link>Modrinth API</docs-link>.',
+	},
+	profilePicture: {
+		id: 'settings.profile.profile-picture.title',
+		defaultMessage: 'Profile picture',
+	},
+	usernameDescription: {
+		id: 'settings.profile.username.description',
+		defaultMessage: 'A unique case-insensitive name to identify your profile.',
+	},
+	bioTitle: {
+		id: 'settings.profile.bio.title',
+		defaultMessage: 'Bio',
+	},
+	bioDescription: {
+		id: 'settings.profile.bio.description',
+		defaultMessage: 'A short description to tell everyone a little bit about you.',
+	},
+	signInRequiredTitle: {
+		id: 'settings.profile.sign-in-required.title',
+		defaultMessage: 'Modrinth account required',
+	},
+	signInRequiredDescription: {
+		id: 'settings.profile.sign-in-required.description',
+		defaultMessage: 'Sign in with a Modrinth account to customize your public profile.',
+	},
+	saveError: {
+		id: 'settings.profile.save-error',
+		defaultMessage: 'Failed to update profile',
+	},
+	saveErrorDescription: {
+		id: 'settings.profile.save-error-description',
+		defaultMessage: 'An error occurred while updating your profile. Please try again.',
+	},
+})
+</script>
diff --git a/packages/ui/src/layouts/wrapped/AccountSocialSettings.vue b/packages/ui/src/layouts/wrapped/AccountSocialSettings.vue
index c3808f6abc..6d2f4f5d8c 100644
--- a/packages/ui/src/layouts/wrapped/AccountSocialSettings.vue
+++ b/packages/ui/src/layouts/wrapped/AccountSocialSettings.vue
@@ -347,11 +347,12 @@ const messages = defineMessages({
 	},
 	sharedInstanceInvitesTitle: {
 		id: 'settings.social.shared-instance-invites.title',
-		defaultMessage: 'Shared instance invites',
+		defaultMessage: 'Invitations',
 	},
 	sharedInstanceInvitesDescription: {
 		id: 'settings.social.shared-instance-invites.description',
-		defaultMessage: 'Control who can send you invites to shared instances on Modrinth.',
+		defaultMessage:
+			'Control who can send you invites to shared instances and Modrinth Hosting panels.',
 	},
 	everyone: {
 		id: 'settings.social.interaction-source.everyone',
diff --git a/packages/ui/src/layouts/wrapped/index.ts b/packages/ui/src/layouts/wrapped/index.ts
index 00e5854d6a..79bec2d024 100644
--- a/packages/ui/src/layouts/wrapped/index.ts
+++ b/packages/ui/src/layouts/wrapped/index.ts
@@ -1,3 +1,4 @@
+export { default as AccountProfileSettings } from './AccountProfileSettings.vue'
 export { default as AccountSocialSettings } from './AccountSocialSettings.vue'
 export { default as ServersManageAccessPage } from './hosting/manage/[id]/access/access.vue'
 export { default as ServerOnboardingPanelPage } from './hosting/manage/[id]/onboarding.vue'
diff --git a/packages/ui/src/stories/modal/TabbedModal.stories.ts b/packages/ui/src/stories/modal/TabbedModal.stories.ts
index 7ed018ee8c..aee894f212 100644
--- a/packages/ui/src/stories/modal/TabbedModal.stories.ts
+++ b/packages/ui/src/stories/modal/TabbedModal.stories.ts
@@ -15,6 +15,7 @@ import type { StoryObj } from '@storybook/vue3-vite'
 import { defineComponent, h, ref } from 'vue'
 
 import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import UnsavedChangesPopup from '../../components/base/UnsavedChangesPopup.vue'
 import TabbedModal from '../../components/modal/TabbedModal.vue'
 
 function makeTabContent(label: string, lines = 3) {
@@ -152,6 +153,47 @@ export const WithFooter: StoryObj = {
 	}),
 }
 
+export const WithFloatingActionBar: StoryObj = {
+	render: () => ({
+		components: { TabbedModal, ButtonStyled, UnsavedChangesPopup },
+		setup() {
+			const modalRef = ref<InstanceType<typeof TabbedModal> | null>(null)
+			const dirty = ref(true)
+			const tabs = [
+				{
+					name: { id: 'general', defaultMessage: 'General' },
+					icon: InfoIcon,
+					content: makeTabContent('General', 20),
+				},
+			]
+			return { modalRef, dirty, tabs }
+		},
+		template: /* html */ `
+			<div>
+				<ButtonStyled color="brand">
+					<button @click="dirty = true; modalRef?.show()">Open with Floating Action Bar</button>
+				</ButtonStyled>
+				<TabbedModal
+					ref="modalRef"
+					header="Settings"
+					:tabs="tabs"
+					:floating-action-bar-shown="dirty"
+				>
+					<template #floating-action-bar>
+						<UnsavedChangesPopup
+							:original="{ dirty: false }"
+							:modified="{ dirty }"
+							inline
+							@save="dirty = false"
+							@reset="dirty = false"
+						/>
+					</template>
+				</TabbedModal>
+			</div>
+		`,
+	}),
+}
+
 export const WithBadge: StoryObj = {
 	render: () => ({
 		components: { TabbedModal, ButtonStyled },
diff --git a/packages/ui/src/utils/common-messages.ts b/packages/ui/src/utils/common-messages.ts
index 66dc30b9b2..8f98041d01 100644
--- a/packages/ui/src/utils/common-messages.ts
+++ b/packages/ui/src/utils/common-messages.ts
@@ -1068,8 +1068,8 @@ export const commonSettingsMessages = defineMessages({
 		defaultMessage: 'Personal access tokens',
 	},
 	profile: {
-		id: 'settings.profile.title',
-		defaultMessage: 'Public profile',
+		id: 'settings.profile.navigation-title',
+		defaultMessage: 'Profile',
 	},
 	sessions: {
 		id: 'settings.sessions.title',