chore: bug fix cleanup (#4)

fluxer_app/src/lib/markdown/renderers/MessageJumpLink.module.css

@@ -58,6 +58,7 @@
 .jumpLinkGuildIcon {
 	width: 1rem;
 	height: 1rem;
+	--guild-icon-size: 1rem;
 	flex-shrink: 0;
 	display: inline-flex;
 	align-items: center;

fluxer_app/src/lib/markdown/renderers/emoji-renderer.tsx

@@ -129,7 +129,10 @@ const EmojiRendererInner = observer(function EmojiRendererInner({
 	const tooltipQualitySuffix = `?size=${tooltipEmojiSize}&quality=lossless`;
 
 	const isCustomEmoji = node.kind.kind === EmojiKind.Custom;
-	const emojiRecord = isCustomEmoji && emojiData.id ? EmojiStore.getEmojiById(emojiData.id) : null;
+	const emojiRecord: Emoji | null =
+		isCustomEmoji && emojiData.id ? (EmojiStore.getEmojiById(emojiData.id) ?? null) : null;
+	const fallbackGuildId = emojiRecord?.guildId;
+	const fallbackAnimated = emojiRecord?.animated ?? emojiData.isAnimated;
 
 	const handleOpenBottomSheet = React.useCallback(() => {
 		if (!isMobile) return;
@@ -160,12 +163,16 @@ const EmojiRendererInner = observer(function EmojiRendererInner({
 		if (emojiRecord) {
 			return emojiRecord;
 		}
+
 		return {
+			id: emojiData.id,
+			guildId: fallbackGuildId,
+			animated: fallbackAnimated,
 			name: node.kind.name,
 			allNamesString: node.kind.name,
 			uniqueName: node.kind.name,
 		};
-	}, [emojiRecord, node.kind.name]);
+	}, [emojiData.id, emojiData.isAnimated, emojiRecord, node.kind.name]);
 
 	const getTooltipData = React.useCallback(() => {
 		const emojiUrl =

fluxer_app/src/lib/markdown/renderers/link-renderer.tsx

@@ -62,11 +62,21 @@ interface JumpLinkMentionProps {
 	guild: GuildRecord | null;
 	messageId?: string;
 	i18n: I18n;
+	interactive?: boolean;
 }
 
-const JumpLinkMention = observer(function JumpLinkMention({channel, guild, messageId, i18n}: JumpLinkMentionProps) {
+const INLINE_REPLY_CONTEXT = 1;
+
+const JumpLinkMention = observer(function JumpLinkMention({
+	channel,
+	guild,
+	messageId,
+	i18n,
+	interactive = true,
+}: JumpLinkMentionProps) {
 	const handleClick = React.useCallback(
-		(event: React.MouseEvent<HTMLButtonElement>) => {
+		(event: React.MouseEvent<HTMLButtonElement | HTMLSpanElement>) => {
+			if (!interactive) return;
 			event.preventDefault();
 			event.stopPropagation();
 
@@ -98,17 +108,26 @@ const JumpLinkMention = observer(function JumpLinkMention({channel, guild, messa
 			? i18n._(msg`Jump to ${labelText}`)
 			: i18n._(msg`Jump to the linked channel`);
 
+	const Component = interactive ? 'button' : 'span';
+
 	return (
-		<button
-			type="button"
-			className={clsx(markupStyles.mention, markupStyles.interactive, jumpLinkStyles.jumpLinkButton)}
+		<Component
+			{...(interactive ? {type: 'button'} : {})}
+			className={clsx(markupStyles.mention, interactive && markupStyles.interactive, jumpLinkStyles.jumpLinkButton)}
 			onClick={handleClick}
 			aria-label={ariaLabel}
+			tabIndex={interactive ? 0 : -1}
 		>
 			<span className={jumpLinkStyles.jumpLinkInfo}>
 				{guild ? (
 					<span className={jumpLinkStyles.jumpLinkGuild}>
-						<GuildIcon id={guild.id} name={guild.name} icon={guild.icon} className={jumpLinkStyles.jumpLinkGuildIcon} />
+						<GuildIcon
+							id={guild.id}
+							name={guild.name}
+							icon={guild.icon}
+							className={jumpLinkStyles.jumpLinkGuildIcon}
+							containerProps={{'data-jump-link-guild-icon': ''}}
+						/>
 						<span className={jumpLinkStyles.jumpLinkGuildName}>{guild.name}</span>
 					</span>
 				) : shouldShowDMIconLabel ? (
@@ -137,7 +156,7 @@ const JumpLinkMention = observer(function JumpLinkMention({channel, guild, messa
 					</span>
 				)}
 			</span>
-		</button>
+		</Component>
 	);
 });
 
@@ -156,13 +175,20 @@ export const LinkRenderer = observer(function LinkRenderer({
 	const jumpTarget = messageJumpTarget ?? parseChannelJumpLink(url);
 	const jumpChannel = jumpTarget ? (ChannelStore.getChannel(jumpTarget.channelId) ?? null) : null;
 	const jumpGuild = jumpChannel?.guildId ? (GuildStore.getGuild(jumpChannel.guildId) ?? null) : null;
+	const isInlineReplyContext = options.context === INLINE_REPLY_CONTEXT;
 
 	if (jumpTarget && jumpChannel) {
-		return (
-			<FocusRing key={id}>
-				<JumpLinkMention channel={jumpChannel} guild={jumpGuild} messageId={messageJumpTarget?.messageId} i18n={i18n} />
-			</FocusRing>
+		const mention = (
+			<JumpLinkMention
+				channel={jumpChannel}
+				guild={jumpGuild}
+				messageId={messageJumpTarget?.messageId}
+				i18n={i18n}
+				interactive={!isInlineReplyContext}
+			/>
 		);
+
+		return isInlineReplyContext ? mention : <FocusRing key={id}>{mention}</FocusRing>;
 	}
 
 	const shouldShowAccessDeniedModal = Boolean(jumpTarget && !jumpChannel);