From 58f2ab6c8b2e66c7561da071a313728d4bff8c9a Mon Sep 17 00:00:00 2001
From: Marie <github@yuugi.dev>
Date: Wed, 5 Mar 2025 21:14:46 +0100
Subject: [PATCH] upd: separate menu and change

---
 .../frontend/src/pages/settings/profile.vue   | 241 +++++++-----------
 1 file changed, 90 insertions(+), 151 deletions(-)

diff --git a/packages/frontend/src/pages/settings/profile.vue b/packages/frontend/src/pages/settings/profile.vue
index 6bc171cceb..c53c285915 100644
--- a/packages/frontend/src/pages/settings/profile.vue
+++ b/packages/frontend/src/pages/settings/profile.vue
@@ -7,13 +7,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 <div class="_gaps_m">
 	<div class="_panel">
 		<div :class="$style.banner" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
-			<MkButton primary rounded :class="$style.bannerEdit" @click="changeBanner">{{ i18n.ts._profile.changeBanner }}</MkButton>
-			<MkButton primary rounded :class="$style.backgroundEdit" @click="changeBackground">{{ i18n.ts._profile.changeBackground }}</MkButton>
+			<MkButton primary rounded :class="$style.bannerEdit" @click="changeOrRemoveBanner">{{ i18n.ts._profile.changeBanner }}</MkButton>
+			<MkButton primary rounded :class="$style.backgroundEdit" @click="changeOrRemoveBackground">{{ i18n.ts._profile.changeBackground }}</MkButton>
 		</div>
 		<div :class="$style.avatarContainer">
-			<MkAvatar :class="$style.avatar" :user="$i" forceShowDecoration @click="changeAvatar"/>
+			<MkAvatar :class="$style.avatar" :user="$i" forceShowDecoration @click="changeOrRemoveAvatar"/>
 			<div class="_buttonsCenter">
-				<MkButton primary rounded @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
+				<MkButton primary rounded @click="changeOrRemoveAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
 				<MkButton primary rounded link to="/settings/avatar-decoration">{{ i18n.ts.decorate }} <i class="ti ti-sparkles"></i></MkButton>
 			</div>
 		</div>
@@ -249,34 +249,88 @@ function save() {
 }
 
 function changeAvatar(ev) {
+	selectFile(ev.currentTarget ?? ev.target, i18n.ts.avatar).then(async (file) => {
+		let originalOrCropped = file;
+
+		const { canceled } = await os.confirm({
+			type: 'question',
+			text: i18n.ts.cropImageAsk,
+			okText: i18n.ts.cropYes,
+			cancelText: i18n.ts.cropNo,
+		});
+
+		if (!canceled) {
+			originalOrCropped = await os.cropImage(file, {
+				aspectRatio: 1,
+			});
+		}
+
+		const i = await os.apiWithDialog('i/update', {
+			avatarId: originalOrCropped.id,
+		});
+		$i.avatarId = i.avatarId;
+		$i.avatarUrl = i.avatarUrl;
+		globalEvents.emit('requestClearPageCache');
+	});
+}
+
+function changeBanner(ev) {
+	selectFile(ev.currentTarget ?? ev.target, i18n.ts.banner).then(async (file) => {
+		let originalOrCropped = file;
+
+		const { canceled } = await os.confirm({
+			type: 'question',
+			text: i18n.ts.cropImageAsk,
+			okText: i18n.ts.cropYes,
+			cancelText: i18n.ts.cropNo,
+		});
+
+		if (!canceled) {
+			originalOrCropped = await os.cropImage(file, {
+				aspectRatio: 2,
+			});
+		}
+
+		const i = await os.apiWithDialog('i/update', {
+			bannerId: originalOrCropped.id,
+		});
+		$i.bannerId = i.bannerId;
+		$i.bannerUrl = i.bannerUrl;
+		globalEvents.emit('requestClearPageCache');
+	});
+}
+
+function changeBackground(ev) {
+	selectFile(ev.currentTarget ?? ev.target, i18n.ts.background).then(async (file) => {
+		let originalOrCropped = file;
+
+		const { canceled } = await os.confirm({
+			type: 'question',
+			text: i18n.ts.cropImageAsk,
+			okText: i18n.ts.cropYes,
+			cancelText: i18n.ts.cropNo,
+		});
+
+		if (!canceled) {
+			originalOrCropped = await os.cropImage(file, {
+				aspectRatio: 2,
+			});
+		}
+
+		const i = await os.apiWithDialog('i/update', {
+			backgroundId: originalOrCropped.id,
+		});
+		$i.backgroundId = i.backgroundId;
+		$i.backgroundUrl = i.backgroundUrl;
+		globalEvents.emit('requestClearPageCache');
+	});
+}
+
+function changeOrRemoveAvatar(ev) {
 	if ($i.avatarId) {
 		os.popupMenu([{
 			text: i18n.ts._profile.updateAvatar,
-			action: async () => {
-				selectFile(ev.currentTarget ?? ev.target, i18n.ts.avatar).then(async (file) => {
-					let originalOrCropped = file;
-
-					const { canceled } = await os.confirm({
-						type: 'question',
-						text: i18n.ts.cropImageAsk,
-						okText: i18n.ts.cropYes,
-						cancelText: i18n.ts.cropNo,
-					});
-
-					if (!canceled) {
-						originalOrCropped = await os.cropImage(file, {
-							aspectRatio: 1,
-						});
-					}
-
-					const i = await os.apiWithDialog('i/update', {
-						avatarId: originalOrCropped.id,
-					});
-					$i.avatarId = i.avatarId;
-					$i.avatarUrl = i.avatarUrl;
-					globalEvents.emit('requestClearPageCache');
-				});
-			},
+			action: () => changeAvatar(ev),
 		}, {
 			text: i18n.ts._profile.removeAvatar,
 			action: async () => {
@@ -289,62 +343,15 @@ function changeAvatar(ev) {
 			},
 		}], ev.currentTarget ?? ev.target);
 	} else {
-		selectFile(ev.currentTarget ?? ev.target, i18n.ts.avatar).then(async (file) => {
-			let originalOrCropped = file;
-
-			const { canceled } = await os.confirm({
-				type: 'question',
-				text: i18n.ts.cropImageAsk,
-				okText: i18n.ts.cropYes,
-				cancelText: i18n.ts.cropNo,
-			});
-
-			if (!canceled) {
-				originalOrCropped = await os.cropImage(file, {
-					aspectRatio: 1,
-				});
-			}
-
-			const i = await os.apiWithDialog('i/update', {
-				avatarId: originalOrCropped.id,
-			});
-			$i.avatarId = i.avatarId;
-			$i.avatarUrl = i.avatarUrl;
-			globalEvents.emit('requestClearPageCache');
-			claimAchievement('profileFilled');
-		});
+		changeAvatar(ev);
 	}
 }
 
-function changeBanner(ev) {
+function changeOrRemoveBanner(ev) {
 	if ($i.bannerId) {
 		os.popupMenu([{
 			text: i18n.ts._profile.updateBanner,
-			action: async () => {
-				selectFile(ev.currentTarget ?? ev.target, i18n.ts.banner).then(async (file) => {
-					let originalOrCropped = file;
-
-					const { canceled } = await os.confirm({
-						type: 'question',
-						text: i18n.ts.cropImageAsk,
-						okText: i18n.ts.cropYes,
-						cancelText: i18n.ts.cropNo,
-					});
-
-					if (!canceled) {
-						originalOrCropped = await os.cropImage(file, {
-							aspectRatio: 2,
-						});
-					}
-
-					const i = await os.apiWithDialog('i/update', {
-						bannerId: originalOrCropped.id,
-					});
-					$i.bannerId = i.bannerId;
-					$i.bannerUrl = i.bannerUrl;
-					globalEvents.emit('requestClearPageCache');
-				});
-			},
+			action: () => changeBanner(ev),
 		}, {
 			text: i18n.ts._profile.removeBanner,
 			action: async () => {
@@ -357,61 +364,15 @@ function changeBanner(ev) {
 			},
 		}], ev.currentTarget ?? ev.target);
 	} else {
-		selectFile(ev.currentTarget ?? ev.target, i18n.ts.banner).then(async (file) => {
-			let originalOrCropped = file;
-
-			const { canceled } = await os.confirm({
-				type: 'question',
-				text: i18n.ts.cropImageAsk,
-				okText: i18n.ts.cropYes,
-				cancelText: i18n.ts.cropNo,
-			});
-
-			if (!canceled) {
-				originalOrCropped = await os.cropImage(file, {
-					aspectRatio: 2,
-				});
-			}
-
-			const i = await os.apiWithDialog('i/update', {
-				bannerId: originalOrCropped.id,
-			});
-			$i.bannerId = i.bannerId;
-			$i.bannerUrl = i.bannerUrl;
-			globalEvents.emit('requestClearPageCache');
-		});
+		changeBanner(ev);
 	}
 }
 
-function changeBackground(ev) {
+function changeOrRemoveBackground(ev) {
 	if ($i.backgroundId) {
 		os.popupMenu([{
 			text: i18n.ts._profile.updateBackground,
-			action: async () => {
-				selectFile(ev.currentTarget ?? ev.target, i18n.ts.background).then(async (file) => {
-					let originalOrCropped = file;
-
-					const { canceled } = await os.confirm({
-						type: 'question',
-						text: i18n.ts.cropImageAsk,
-						okText: i18n.ts.cropYes,
-						cancelText: i18n.ts.cropNo,
-					});
-
-					if (!canceled) {
-						originalOrCropped = await os.cropImage(file, {
-							aspectRatio: 1,
-						});
-					}
-
-					const i = await os.apiWithDialog('i/update', {
-						backgroundId: originalOrCropped.id,
-					});
-					$i.backgroundId = i.backgroundId;
-					$i.backgroundUrl = i.backgroundUrl;
-					globalEvents.emit('requestClearPageCache');
-				});
-			},
+			action: () => changeBackground(ev),
 		}, {
 			text: i18n.ts._profile.removeBackground,
 			action: async () => {
@@ -424,29 +385,7 @@ function changeBackground(ev) {
 			},
 		}], ev.currentTarget ?? ev.target);
 	} else {
-		selectFile(ev.currentTarget ?? ev.target, i18n.ts.background).then(async (file) => {
-			let originalOrCropped = file;
-
-			const { canceled } = await os.confirm({
-				type: 'question',
-				text: i18n.ts.cropImageAsk,
-				okText: i18n.ts.cropYes,
-				cancelText: i18n.ts.cropNo,
-			});
-
-			if (!canceled) {
-				originalOrCropped = await os.cropImage(file, {
-					aspectRatio: 1,
-				});
-			}
-
-			const i = await os.apiWithDialog('i/update', {
-				backgroundId: originalOrCropped.id,
-			});
-			$i.backgroundId = i.backgroundId;
-			$i.backgroundUrl = i.backgroundUrl;
-			globalEvents.emit('requestClearPageCache');
-		});
+		changeBackground(ev);
 	}
 }