fix(app): draw the mention badge cutout from the badge itself (#1868)

fluxer_app/src/features/ui/components/MentionBadge.module.css

@@ -32,5 +32,17 @@
 }
 
 .animatedWrapper {
+	position: relative;
+	display: flex;
 	pointer-events: none;
+	isolation: isolate;
+}
+
+.animatedWrapper::before {
+	content: '';
+	position: absolute;
+	inset: -0.1875rem;
+	z-index: -1;
+	border-radius: calc(var(--radius-md) + 0.1875rem);
+	background-color: var(--mention-badge-cutout-surface, transparent);
 }

fluxer_app/src/features/ui/components/MentionBadge.tsx

@@ -2,12 +2,49 @@
 
 import Accessibility from '@app/features/accessibility/state/Accessibility';
 import styles from '@app/features/ui/components/MentionBadge.module.css';
+import {
+	AnimePresence,
+	type AnimeTarget,
+	type AnimeTween,
+	AnimeTweenType,
+	createAnimeFlxElement,
+} from '@app/features/ui/motion/AnimeElement';
 import {getCurrentLocale} from '@app/features/user/utils/LocaleUtils';
 import {formatCompactNumber, formatNumber} from '@pkgs/number_utils/src/NumberFormatting';
 import {clsx} from 'clsx';
-import {AnimatePresence, motion} from 'framer-motion';
 import {observer} from 'mobx-react-lite';
 
+const MentionBadgeSurface = createAnimeFlxElement('flx-ui-mention-badge-surface');
+
+const HIDDEN_MENTION_BADGE: AnimeTarget = Object.freeze({opacity: 0, scale: 0.85});
+const VISIBLE_MENTION_BADGE: AnimeTarget = Object.freeze({opacity: 1, scale: 1});
+
+interface MentionBadgeMotion {
+	readonly from: AnimeTarget;
+	readonly to: AnimeTarget;
+	readonly tween: AnimeTween;
+}
+
+const MENTION_BADGE_LEAVE = false as const;
+
+const STANDARD_MENTION_BADGE_MOTION: MentionBadgeMotion = Object.freeze({
+	from: HIDDEN_MENTION_BADGE,
+	to: VISIBLE_MENTION_BADGE,
+	tween: Object.freeze({type: AnimeTweenType.SPRING, stiffness: 500, damping: 22}),
+});
+const REDUCED_MENTION_BADGE_MOTION: MentionBadgeMotion = Object.freeze({
+	from: VISIBLE_MENTION_BADGE,
+	to: VISIBLE_MENTION_BADGE,
+	tween: Object.freeze({duration: 0}),
+});
+
+function resolveMentionBadgeMotion(useReducedMotion: boolean): MentionBadgeMotion {
+	if (useReducedMotion) {
+		return REDUCED_MENTION_BADGE_MOTION;
+	}
+	return STANDARD_MENTION_BADGE_MOTION;
+}
+
 const formatMentionCount = (mentionCount: number) => {
 	const locale = getCurrentLocale();
 	if (mentionCount > 99 && mentionCount < 1000) {
@@ -38,34 +75,25 @@ export const MentionBadge = observer(({mentionCount, size = 'medium'}: MentionBa
 	);
 });
 export const MentionBadgeAnimated = observer(({mentionCount, size = 'medium'}: MentionBadgeProps) => {
-	const shouldAnimate = !Accessibility.useReducedMotion;
-	if (!shouldAnimate) {
-		return mentionCount > 0 ? (
-			<MentionBadge
-				mentionCount={mentionCount}
-				size={size}
-				data-flx="ui.mention-badge.mention-badge-animated.mention-badge"
-			/>
-		) : null;
-	}
+	const motion = resolveMentionBadgeMotion(Accessibility.useReducedMotion);
 	return (
-		<AnimatePresence initial={false} mode="wait" data-flx="ui.mention-badge.mention-badge-animated.animate-presence">
+		<AnimePresence enterOnMount={false} data-flx="ui.mention-badge.mention-badge-animated.anime-presence">
 			{mentionCount > 0 && (
-				<motion.div
+				<MentionBadgeSurface
 					className={styles.animatedWrapper}
-					initial={{opacity: 0, scale: 0.85}}
-					animate={{opacity: 1, scale: 1}}
-					exit={{opacity: 0, scale: 0.85}}
-					transition={{type: 'spring', stiffness: 500, damping: 22}}
+					from={motion.from}
+					to={motion.to}
+					leave={MENTION_BADGE_LEAVE}
+					tween={motion.tween}
 					data-flx="ui.mention-badge.mention-badge-animated.animated-wrapper"
 				>
 					<MentionBadge
 						mentionCount={mentionCount}
 						size={size}
-						data-flx="ui.mention-badge.mention-badge-animated.mention-badge--2"
+						data-flx="ui.mention-badge.mention-badge-animated.mention-badge"
 					/>
-				</motion.div>
+				</MentionBadgeSurface>
 			)}
-		</AnimatePresence>
+		</AnimePresence>
 	);
 });