#33 Option to render emoji with the system emoji font instead of Facebook's

[Anonymous]

Originally created by: kristofferR

Summary

Add a setting to render emoji in messages with the system / native emoji font
instead of Facebook's own emoji sprites. Some users prefer Apple/Segoe/Noto emoji
over FB's set (a long-standing Caprine feature: Show messages from Facebook in the
system emoji font).

Default off (keep FB emoji) so nothing changes for users who don't opt in.

How Messenger renders emoji (needs confirmation on the debug build)

facebook.com/messages does not render emoji as plain Unicode text — it
swaps them for image sprites: typically an <img> (or a <span> with a
background-image) pointing at FB's emoji CDN, with the actual Unicode emoji
carried in the element's alt / aria-label. To show system emoji we need to
suppress the FB sprite and surface the underlying Unicode glyph so the OS font
renders it.

First step before coding: inspect the live markup in the running
"Carrier (debug)" build via tauri-mcp (query_page / get_dom) on a thread
containing emoji, to pin down the exact element + where the Unicode lives
(alt, aria-label, a sibling text node, or data-*). The implementation
choice below depends on that.

Implementation

Wire it like the existing page-side toggles (mirror hide_names_avatars):

1. src-tauri/src/lib.rs — add a system_emoji: bool field to Settings
   (default false) + its Default. It's pushed to the page with the rest of
   settings (window.__CARRIER_SETTINGS__ / carrier:settings); no tray item
   needed.
2. dist/settings.html — add ["system_emoji", "System Emoji", "Render emoji with your system's emoji font instead of Facebook's."] to FIELDS,
   and list it under the General tab's fields.
3. src-tauri/inject/messenger.js — react to the setting (same pattern as
   hideNames()): toggle a root attribute (e.g. data-carrier-system-emoji)
   and apply the effect. Two candidate mechanisms, pick per what the markup
   inspection shows:
4. CSS-only (preferred if it works): in messenger.css, hide the emoji
   sprite image and reveal the Unicode glyph (e.g. via the alt-bearing
   element / a ::after on the carrier of the text). Cleanest, no observer.
5. JS replace (fallback): a MutationObserver that replaces each emoji
   sprite node with a <span> holding its Unicode glyph. More robust to FB
   markup but heavier; scope it tightly and bail quietly when selectors miss
   (FB markup churns).

Constraints / notes

• Don't reach into the React fiber. Operate on rendered DOM/CSS only; FB
  reships its bundle constantly.
• Tolerate the sprite element/markup being absent or changing — fail quiet.
• Emoji appear in multiple places (message bubbles, the conversation-list
  preview line, reactions, the composer). Decide scope — at minimum message
  bubbles; note which surfaces are covered.
• Validate: node --check inject/messenger.js, and the usual Rust gate for the
  Settings change (cargo fmt && cargo clippy --all-targets -- -D warnings && cargo test --lib).
• Reference: Caprine "system emoji" option.

[Anonymous]

Originally posted by: kristofferR

Implemented on main in 35374e5.

Adds Settings > General > System Emoji (default off), which renders Facebook emoji sprites with the OS emoji font when enabled. README updated too.

[Anonymous]

Ticket changed by: kristofferR

• status: open --> closed