fix(app): stop own profile preview trapping mobile web (#3463)

fluxer_app/src/features/user/components/modals/UserProfileModal.tsx

@@ -766,6 +766,7 @@ export const UserProfileModal: UserProfileModalComponent = observer(
 		return (
 			<Modal.Root
 				size="medium"
+				centered
 				initialFocusRef={autoFocusNote ? noteRef : undefined}
 				className={userProfileModalStyles.modalRoot}
 				data-flx="user.user-profile-modal.modal-root"

fluxer_app/src/features/user/components/modals/tabs/MyProfileTab.tsx

@@ -30,7 +30,10 @@ import * as UserCommands from '@app/features/user/commands/UserCommands';
 import * as UserProfileCommands from '@app/features/user/commands/UserProfileCommands';
 import styles from '@app/features/user/components/modals/tabs/MyProfileTab.module.css';
 import {AccentColorPicker} from '@app/features/user/components/modals/tabs/my_profile_tab/AccentColorPicker';
-import {AvatarUploader} from '@app/features/user/components/modals/tabs/my_profile_tab/AvatarUploader';
+import {
+	AvatarUploader,
+	useChangeAvatarAction,
+} from '@app/features/user/components/modals/tabs/my_profile_tab/AvatarUploader';
 import {BannerUploader} from '@app/features/user/components/modals/tabs/my_profile_tab/BannerUploader';
 import {BIO_MARKDOWN_PARSER_FLAGS, BioEditor} from '@app/features/user/components/modals/tabs/my_profile_tab/BioEditor';
 import {UsernameSection} from '@app/features/user/components/modals/tabs/my_profile_tab/MyProfileTabUsernameSection';
@@ -615,6 +618,7 @@ const MyProfileTabComponent = observer(function MyProfileTabComponent({
 		form.setValue('avatar', null);
 		transitionAvatarAsset({type: 'asset.cleared'});
 	}, [form, transitionAvatarAsset]);
+	const {openChangeAvatar} = useChangeAvatarAction({onAvatarChange: handleAvatarChange});
 	const handleBannerChange = useCallback(
 		(base64: string) => {
 			form.setValue('banner', base64);
@@ -674,6 +678,7 @@ const MyProfileTabComponent = observer(function MyProfileTabComponent({
 	const guilds = Guilds.getGuilds();
 	const selectedGuild = selectedGuildId ? guilds.find((g) => g.id === selectedGuildId) : null;
 	const isPerGuildProfileCustomizationDisabled = isPerGuildProfile && !hasPerGuildProfiles;
+	const isAvatarCustomizationDisabled = isProfileCustomizationLocked || isPerGuildProfileCustomizationDisabled;
 	const isPronounsDisabled = isProfileCustomizationLocked;
 	const profileCustomizationDescription = isProfileEmailLocked
 		? isPerGuildProfile
@@ -840,7 +845,7 @@ const MyProfileTabComponent = observer(function MyProfileTabComponent({
 											hasAvatar={hasAvatar}
 											onAvatarChange={handleAvatarChange}
 											onAvatarClear={handleAvatarClear}
-											disabled={isProfileCustomizationLocked || isPerGuildProfileCustomizationDisabled}
+											disabled={isAvatarCustomizationDisabled}
 											disableModeSelection={isProfileCustomizationLocked}
 											isPerGuildProfile={isPerGuildProfile}
 											errorMessage={form.formState.errors.avatar?.message}
@@ -934,6 +939,9 @@ const MyProfileTabComponent = observer(function MyProfileTabComponent({
 										}}
 										ignoreGuildAvatarInPreview={isPerGuildProfile && avatarAsset.mode === 'inherit'}
 										ignoreGuildBannerInPreview={isPerGuildProfile && bannerAsset.mode === 'inherit'}
+										onAvatarClick={
+											mobileLayout.enabled && !isAvatarCustomizationDisabled ? openChangeAvatar : undefined
+										}
 										data-flx="user.my-profile-tab.my-profile-tab-component.profile-preview"
 									/>
 								</div>

fluxer_app/src/features/user/components/modals/tabs/my_profile_tab/AvatarUploader.tsx

@@ -116,47 +116,22 @@ interface AvatarUploaderProps {
 	onAvatarModeChange?: (mode: AvatarMode) => void;
 }
 
-export const AvatarUploader = observer(
+interface ChangeAvatarActionOptions {
-	({
+	onAvatarChange: (base64: string) => void;
-		hasAvatar,
+	requireAnimatedAvatarEntitlement?: boolean;
+}
+
+export function useChangeAvatarAction({
 	onAvatarChange,
-		onAvatarClear,
-		disabled,
-		disableModeSelection,
 	requireAnimatedAvatarEntitlement = true,
-		isPerGuildProfile,
+}: ChangeAvatarActionOptions) {
-		errorMessage,
-		avatarMode = 'inherit',
-		onAvatarModeChange,
-	}: AvatarUploaderProps) => {
-		const PREMIUM_PRODUCT_NAME = getPremiumProductName();
 	const {i18n} = useLingui();
+	const PREMIUM_PRODUCT_NAME = getPremiumProductName();
 	const hasAnimatedAvatarEntitlement = isLimitToggleEnabled(
 		{feature_animated_avatar: LimitResolver.resolve({key: 'feature_animated_avatar', fallback: 0})},
 		'feature_animated_avatar',
 	);
 	const canUploadAnimatedAvatar = !requireAnimatedAvatarEntitlement || hasAnimatedAvatarEntitlement;
-		const getAvatarModeOptions = useCallback(
-			() => [
-				{
-					value: 'inherit' as AvatarMode,
-					name: i18n._(USE_GLOBAL_PROFILE_DESCRIPTOR),
-					desc: i18n._(SHOW_YOUR_GLOBAL_PROFILE_AVATAR_IN_THIS_COMMUNITY_DESCRIPTOR),
-				},
-				{
-					value: 'custom' as AvatarMode,
-					name: i18n._(USE_CUSTOM_IMAGE_DESCRIPTOR),
-					desc: i18n._(UPLOAD_A_CUSTOM_AVATAR_FOR_THIS_COMMUNITY_DESCRIPTOR),
-					disabled: !canUploadAnimatedAvatar,
-				},
-				{
-					value: 'unset' as AvatarMode,
-					name: i18n._(DON_T_SHOW_DESCRIPTOR),
-					desc: i18n._(SHOW_DEFAULT_AVATAR_IGNORING_YOUR_GLOBAL_PROFILE_DESCRIPTOR),
-				},
-			],
-			[canUploadAnimatedAvatar, i18n],
-		);
 	const processAvatarFile = useCallback(
 		async (file: File) => {
 			if (file.size > GlobalLimits.getAvatarMaxSize()) {
@@ -189,8 +164,8 @@ export const AvatarUploader = observer(
 									<>
 										<p data-flx="user.my-profile-tab.avatar-uploader.handle-avatar-upload.p">
 											<Trans>
-													Animated avatars ({ANIMATED_AVATAR_FORMATS}) are exclusively available to{' '}
+												Animated avatars ({ANIMATED_AVATAR_FORMATS}) are exclusively available to {PREMIUM_PRODUCT_NAME}{' '}
-													{PREMIUM_PRODUCT_NAME} subscribers.
+												subscribers.
 											</Trans>
 										</p>
 										<p
@@ -335,6 +310,48 @@ export const AvatarUploader = observer(
 			onSelectGif: (gif) => void handleSelectAvatarGif(gif),
 		});
 	}, [canUploadAnimatedAvatar, handlePickAvatarFile, handleSelectAvatarGif, i18n]);
+	return {canUploadAnimatedAvatar, openChangeAvatar: handleAvatarUpload};
+}
+
+export const AvatarUploader = observer(
+	({
+		hasAvatar,
+		onAvatarChange,
+		onAvatarClear,
+		disabled,
+		disableModeSelection,
+		requireAnimatedAvatarEntitlement = true,
+		isPerGuildProfile,
+		errorMessage,
+		avatarMode = 'inherit',
+		onAvatarModeChange,
+	}: AvatarUploaderProps) => {
+		const {i18n} = useLingui();
+		const {canUploadAnimatedAvatar, openChangeAvatar: handleAvatarUpload} = useChangeAvatarAction({
+			onAvatarChange,
+			requireAnimatedAvatarEntitlement,
+		});
+		const getAvatarModeOptions = useCallback(
+			() => [
+				{
+					value: 'inherit' as AvatarMode,
+					name: i18n._(USE_GLOBAL_PROFILE_DESCRIPTOR),
+					desc: i18n._(SHOW_YOUR_GLOBAL_PROFILE_AVATAR_IN_THIS_COMMUNITY_DESCRIPTOR),
+				},
+				{
+					value: 'custom' as AvatarMode,
+					name: i18n._(USE_CUSTOM_IMAGE_DESCRIPTOR),
+					desc: i18n._(UPLOAD_A_CUSTOM_AVATAR_FOR_THIS_COMMUNITY_DESCRIPTOR),
+					disabled: !canUploadAnimatedAvatar,
+				},
+				{
+					value: 'unset' as AvatarMode,
+					name: i18n._(DON_T_SHOW_DESCRIPTOR),
+					desc: i18n._(SHOW_DEFAULT_AVATAR_IGNORING_YOUR_GLOBAL_PROFILE_DESCRIPTOR),
+				},
+			],
+			[canUploadAnimatedAvatar, i18n],
+		);
 		const handleModeChange = useCallback(
 			(mode: AvatarMode) => {
 				if (mode === 'custom') {

fluxer_app/src/features/user/components/profile/ProfilePreview.tsx

@@ -65,6 +65,7 @@ interface ProfilePreviewProps {
 	showMessageButton?: boolean;
 	showPreviewLabel?: boolean;
 	previewCustomStatus?: CustomStatus | null;
+	onAvatarClick?: () => void;
 }
 
 export const ProfilePreview: React.FC<ProfilePreviewProps> = observer(
@@ -90,6 +91,7 @@ export const ProfilePreview: React.FC<ProfilePreviewProps> = observer(
 		showMessageButton = true,
 		showPreviewLabel = true,
 		previewCustomStatus,
+		onAvatarClick,
 	}) => {
 		const {i18n} = useLingui();
 		const previewOverrides = useMemo<ProfilePreviewOverrides>(
@@ -245,7 +247,7 @@ export const ProfilePreview: React.FC<ProfilePreviewProps> = observer(
 							avatarUrl={finalAvatarUrl}
 							hoverAvatarUrl={finalHoverAvatarUrl}
 							isClickable={true}
-							onAvatarClick={openMockProfile}
+							onAvatarClick={onAvatarClick ?? openMockProfile}
 							data-flx="user.profile.profile-preview.profile-card-banner"
 						/>
 						<UserProfileBadges