add mfm support

src/components/common/MfmContent.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  /**
+   * Status HTML renderer with Pleroma-FE-compatible MFM effects.
+   *
+   * This consumes the server-rendered FEP-c16b spans found in `status.content`;
+   * it intentionally does not parse raw `$[...]` source syntax.
+   */
+  import type { CustomEmoji, StatusMention, StatusTag } from '$lib/api/types'
+  import { renderMfmHtml } from '$lib/util/mfm'
+
+  interface Props {
+    html: string | null | undefined
+    emojis?: CustomEmoji[]
+    mentions?: StatusMention[]
+    tags?: StatusTag[]
+    inline?: boolean
+    class?: string
+    lang?: string | null
+    /** Pleroma-FE defaults to pausing animation until hover. */
+    pause?: boolean
+    scale?: boolean
+  }
+
+  let {
+    html,
+    emojis,
+    mentions,
+    tags,
+    inline = false,
+    class: extraClass = '',
+    lang,
+    pause = true,
+    scale = false,
+  }: Props = $props()
+
+  const rendered = $derived(
+    renderMfmHtml(html, { emojis, mentions, tags, inline, pause, scale }),
+  )
+</script>
+
+{#if rendered}
+  <div
+    class="rich-text {extraClass}"
+    class:rich-text--inline={inline}
+    lang={lang ?? undefined}
+    dir="auto"
+  >
+    <!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitized in renderMfmHtml -->
+    {@html rendered}
+  </div>
+{/if}