feat: render bluemoji emotes in post

src/api/richtext/segment.ts

···
-import type { AppBskyRichtextFacet } from '@atcute/client/lexicons';
+import type { AppBskyRichtextFacet, BlueMojiRichtextFacet, Brand } from '@atcute/client/lexicons';
 
 import type { UnwrapArray } from '../utils/types';
 import { textDecoder, textEncoder } from './intl';
···
 };
 
 type Facet = AppBskyRichtextFacet.Main;
-type FacetFeature = UnwrapArray<Facet['features']>;
+type FacetFeature = UnwrapArray<Facet['features']> | Brand.Union<BlueMojiRichtextFacet.Main>;
 
 export interface RichtextSegment {
 	text: string;
-	feature: FacetFeature | undefined;
+	features: FacetFeature[] | undefined;
 }
 
-const createRichtextSegment = (text: string, feature: FacetFeature | undefined): RichtextSegment => {
-	return { text: text, feature: feature };
+const createRichtextSegment = (text: string, features: FacetFeature[] | undefined): RichtextSegment => {
+	return { text: text, features: features };
 };
 
 export const segmentRichText = (rtText: string, facets: Facet[] | undefined): RichtextSegment[] => {
···
 			if (features.length === 0 || subtext.trim().length === 0) {
 				segments.push(createRichtextSegment(subtext, undefined));
 			} else {
-				segments.push(createRichtextSegment(subtext, features[0]));
+				segments.push(createRichtextSegment(subtext, features));
 			}
 		}
 

src/components/rich-text.tsx

···
 import { segmentRichText } from '~/api/richtext/segment';
 import { isLinkValid, safeUrlParse } from '~/api/utils/strings';
 
+import { getCdnUrl } from '~/lib/bluemoji/render';
 import {
 	BSKY_FEED_LINK_RE,
 	BSKY_LIST_LINK_RE,
···
 			for (let idx = 0, len = segments.length; idx < len; idx++) {
 				const segment = segments[idx];
 				const subtext = segment.text;
-				const feature = segment.feature;
+				const features = segment.features;
+
+				let node: JSX.Element = subtext;
+
+				if (features) {
+					for (let j = 0, jlen = features.length; j < jlen; j++) {
+						const feature = features[j];
+						const type = feature.$type;
+
+						if (type === 'app.bsky.richtext.facet#link') {
+							const uri = feature.uri;
+							const redirect = findLinkRedirect(uri);
+
+							if (redirect === null) {
+								node = renderExternalLink(uri, subtext);
+							} else {
+								node = renderInternalLink(redirect, subtext);
+							}
 
-				let to: string | undefined;
-				let external = false;
+							break;
+						} else if (type === 'app.bsky.richtext.facet#mention') {
+							node = renderInternalLink(`/${feature.did}`, subtext);
 
-				if (feature) {
-					const type = feature.$type;
+							break;
+						} else if (type === 'app.bsky.richtext.facet#tag') {
+							node = renderInternalLink(`/topics/${feature.tag}`, subtext);
 
-					if (type === 'app.bsky.richtext.facet#link') {
-						const uri = feature.uri;
-						const redirect = findLinkRedirect(uri);
+							break;
+						} else if (type === 'blue.moji.richtext.facet') {
+							const formats = feature.formats;
+							if (formats.$type !== 'blue.moji.richtext.facet#formats_v0' || !formats.png_128) {
+								continue;
+							}
 
-						if (redirect === null) {
-							to = uri;
-							external = true;
-						} else {
-							to = redirect;
+							node = (
+								<img
+									src={/* @once */ getCdnUrl(feature.did, formats.png_128)}
+									title={/* @once */ feature.name}
+									class={`mx-px inline-block align-top text-[0]` + (!large ? ` h-5 w-5` : ` h-6 w-6`)}
+								/>
+							);
+							break;
 						}
-					} else if (type === 'app.bsky.richtext.facet#mention') {
-						to = `/${feature.did}`;
-					} else if (type === 'app.bsky.richtext.facet#tag') {
-						to = `/topics/${feature.tag}`;
 					}
 				}
 
-				if (to !== undefined) {
-					if (!external) {
-						nodes.push(
-							<a href={to} class="text-accent hover:underline">
-								{subtext}
-							</a>,
-						);
-					} else {
-						nodes.push(
-							<a
-								target="_blank"
-								href={to}
-								onClick={handleUnsafeLinkNavigation}
-								onAuxClick={handleUnsafeLinkNavigation}
-								class="text-accent hover:underline"
-							>
-								{subtext}
-							</a>,
-						);
-					}
-				} else {
-					nodes.push(subtext);
-				}
+				nodes.push(node);
 			}
 		} else {
 			nodes = text;
···
 };
 
 export default RichText;
+
+const renderInternalLink = (to: string, subtext: string) => {
+	return (
+		<a href={to} class="text-accent hover:underline">
+			{subtext}
+		</a>
+	);
+};
+
+const renderExternalLink = (to: string, subtext: string) => {
+	return (
+		<a
+			target="_blank"
+			href={to}
+			onClick={handleUnsafeLinkNavigation}
+			onAuxClick={handleUnsafeLinkNavigation}
+			class="text-accent hover:underline"
+		>
+			{subtext}
+		</a>
+	);
+};
 
 const handleUnsafeLinkNavigation = (ev: MouseEvent) => {
 	if (ev.defaultPrevented || (ev.type === 'auxclick' && (ev as MouseEvent).button !== 1)) {

src/lib/bluemoji/render.ts

···
-import type { At } from '@atcute/client/lexicons';
-
-export const getCdnUrl = (did: At.DID, cid: string, format: 'png' | 'jpeg' | 'webp' = 'webp') => {
+export const getCdnUrl = (did: string, cid: string, format: 'png' | 'jpeg' | 'webp' = 'webp') => {
 	return `https://cdn.bsky.app/img/avatar_thumbnail/plain/${did}/${cid}@${format}`;
 };