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

fluxer_app/src/features/app/components/layout/GuildsLayout.module.css

@@ -306,14 +306,9 @@
 	isolation: isolate;
 }
 
-.guildBadgeActive::before,
+.guildBadgeActive,
-.guildBadge:not(:empty)::before {
+.guildBadge:not(:empty) {
-	content: '';
+	--mention-badge-cutout-surface: var(--guild-badge-surface);
-	position: absolute;
-	inset: -0.1875rem;
-	z-index: -1;
-	border-radius: calc(var(--radius-md) + 0.1875rem);
-	background-color: var(--guild-badge-surface);
 }
 
 .guildVoiceBadge {

fluxer_app/src/features/app/components/layout/sidebar_nav/GuildFolderItem.module.css

@@ -145,14 +145,9 @@
 	isolation: isolate;
 }
 
-.folderBadgeActive::before,
+.folderBadgeActive,
-.folderBadge:not(:empty)::before {
+.folderBadge:not(:empty) {
-	content: '';
+	--mention-badge-cutout-surface: var(--guild-badge-surface);
-	position: absolute;
-	inset: -0.1875rem;
-	z-index: -1;
-	border-radius: calc(var(--radius-md) + 0.1875rem);
-	background-color: var(--guild-badge-surface);
 }
 
 .expandedFolderBackground {

fluxer_app/src/features/app/components/layout/sidebar_nav/GuildFolderItem.tsx

@@ -759,14 +759,14 @@ export const GuildFolderItem = observer((props: GuildFolderItemProps) => {
 	);
 });
 
+const MINI_GUILD_INITIALS_MAX_LENGTH = 2;
+
 interface MiniGuildIconProps {
 	readonly guild: Guild;
 }
 
 const MiniGuildIcon = observer(({guild}: MiniGuildIconProps) => {
 	const iconURL = AvatarSourceUtils.getGuildIconURL(guild, false);
-	const initials = getInitialsFromName(guild.name);
-	const displayInitials = truncateInitials(initials, 2);
 	if (iconURL !== '') {
 		return (
 			<flx-app-mini-guild-icon
@@ -785,7 +785,7 @@ const MiniGuildIcon = observer(({guild}: MiniGuildIconProps) => {
 				className={styles.miniGuildInitials}
 				data-flx="app.sidebar-nav.guild-folder-item.mini-guild-icon.mini-guild-initials"
 			>
-				{displayInitials}
+				{truncateInitials(getInitialsFromName(guild.name), MINI_GUILD_INITIALS_MAX_LENGTH)}
 			</span>
 		</flx-app-mini-guild-icon>
 	);

fluxer_app/src/features/app/components/skeleton/GuildRailSkeleton.module.css

@@ -59,7 +59,6 @@
 }
 
 .itemSlot {
-	--guild-rail-skeleton-badge-size: var(--mention-badge-small-size);
 	position: relative;
 	display: flex;
 	align-items: center;
@@ -82,18 +81,6 @@
 	min-height: var(--guild-list-item-box-size);
 }
 
-.mentionBadge {
-	position: absolute;
-	right: calc(50% - var(--guild-icon-size) / 2 - 0.25rem);
-	bottom: calc(50% - var(--guild-icon-size) / 2 - 0.25rem);
-	box-shadow: 0 0 0 0.1875rem var(--guild-badge-surface);
-}
-
-.folderSlot .mentionBadge {
-	right: -0.25rem;
-	bottom: -0.25rem;
-}
-
 .itemsTrailingGapCancel {
 	margin-bottom: calc(-1 * var(--guild-list-item-gap));
 }

fluxer_app/src/features/app/components/skeleton/GuildRailSkeleton.tsx

@@ -34,7 +34,6 @@ import {useState} from 'react';
 
 const GUILD_ICON_SIZE = skeletonSurfaceVar('--guild-icon-size');
 const FOLDER_ICON_SIZE = skeletonSurfaceVar('--guild-list-item-box-size');
-const MENTION_BADGE_SIZE = 'var(--guild-rail-skeleton-badge-size)';
 const GUILD_PLACEHOLDER_COUNT = 6;
 const SHOWS_DOWNLOAD_ACTION = !Platform.isElectron && !Platform.isPWA;
 const FALLBACK_ORGANIZED_ITEMS: ReadonlyArray<RememberedSkeletonGuildRailItem> = Object.freeze(
@@ -190,17 +189,6 @@ function showsSkeletonIndicator({indicator, selected}: SkeletonIndicatorVisibili
 	return indicator !== SkeletonGuildRailItemIndicator.NONE;
 }
 
-const MentionBadgePlaceholder = () => (
-	<SkeletonBlock
-		width={MENTION_BADGE_SIZE}
-		height={MENTION_BADGE_SIZE}
-		radius={SkeletonRadius.MEDIUM}
-		emphasis={SkeletonEmphasis.MUTED}
-		className={styles.mentionBadge}
-		data-flx="app.skeleton.guild-rail-skeleton.mention-badge-placeholder.mention-badge"
-	/>
-);
-
 const GuildPlaceholder = ({
 	indicator,
 	selected,
@@ -223,9 +211,6 @@ const GuildPlaceholder = ({
 			size={GUILD_ICON_SIZE}
 			data-flx="app.skeleton.guild-rail-skeleton.guild-placeholder.skeleton-circle"
 		/>
-		{indicator === SkeletonGuildRailItemIndicator.MENTION && (
-			<MentionBadgePlaceholder data-flx="app.skeleton.guild-rail-skeleton.guild-placeholder.mention-badge-placeholder" />
-		)}
 	</flx-app-guild-rail-skeleton-item-slot>
 );
 
@@ -326,9 +311,6 @@ const CollapsedFolderPlaceholder = ({
 				</flx-app-guild-rail-skeleton-collapsed-folder-grid>
 			)}
 		</flx-app-guild-rail-skeleton-collapsed-folder>
-		{indicator === SkeletonGuildRailItemIndicator.MENTION && (
-			<MentionBadgePlaceholder data-flx="app.skeleton.guild-rail-skeleton.collapsed-folder-placeholder.mention-badge-placeholder" />
-		)}
 	</flx-app-guild-rail-skeleton-item-slot>
 );
 
@@ -354,9 +336,6 @@ const ExpandedFolderGuildPlaceholder = ({
 			size={GUILD_ICON_SIZE}
 			data-flx="app.skeleton.guild-rail-skeleton.expanded-folder-guild-placeholder.skeleton-circle"
 		/>
-		{indicator === SkeletonGuildRailItemIndicator.MENTION && (
-			<MentionBadgePlaceholder data-flx="app.skeleton.guild-rail-skeleton.expanded-folder-guild-placeholder.mention-badge-placeholder" />
-		)}
 	</flx-app-guild-rail-skeleton-expanded-folder-guild>
 );
 

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;
+	const motion = resolveMentionBadgeMotion(Accessibility.useReducedMotion);
-	if (!shouldAnimate) {
-		return mentionCount > 0 ? (
-			<MentionBadge
-				mentionCount={mentionCount}
-				size={size}
-				data-flx="ui.mention-badge.mention-badge-animated.mention-badge"
-			/>
-		) : null;
-	}
 	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}}
+					from={motion.from}
-					animate={{opacity: 1, scale: 1}}
+					to={motion.to}
-					exit={{opacity: 0, scale: 0.85}}
+					leave={MENTION_BADGE_LEAVE}
-					transition={{type: 'spring', stiffness: 500, damping: 22}}
+					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>
 	);
 });