From c4bef0e99b1f9e2f64ddd4b3dbd380b39a95b94a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Wed, 29 Jan 2025 11:13:14 -0600
Subject: [PATCH] Use twemojis for reactions

---
 src/components/ReactionSelector.svelte | 2 ++
 src/components/Reactions.svelte        | 6 ++++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/ReactionSelector.svelte b/src/components/ReactionSelector.svelte
index bb86f7442..9d74df086 100644
--- a/src/components/ReactionSelector.svelte
+++ b/src/components/ReactionSelector.svelte
@@ -4,6 +4,7 @@
   import Border from "./Border.svelte";
   import Icon from "./Icon.svelte";
   import Popover from "./Popover.svelte";
+  import { twemoji } from "@app/lib/utils";
 
   interface Props {
     reactions?: Reaction[];
@@ -62,6 +63,7 @@
             ({ emoji }) => emoji === reaction,
           )}
           <button
+            use:twemoji={{ exclude: ["21a9"] }}
             class:active={Boolean(lookedUpReaction)}
             onclick={() =>
               select(lookedUpReaction || { emoji: reaction, authors: [] })}>
diff --git a/src/components/Reactions.svelte b/src/components/Reactions.svelte
index 491bacefd..95e51f8bd 100644
--- a/src/components/Reactions.svelte
+++ b/src/components/Reactions.svelte
@@ -2,6 +2,8 @@
   import type { Author } from "@bindings/cob/Author";
   import type { Reaction } from "@bindings/cob/Reaction";
 
+  import { twemoji } from "@app/lib/utils";
+
   interface Props {
     reactions: Reaction[];
     handleReaction?: (authors: Author[], reaction: string) => Promise<void>;
@@ -42,12 +44,12 @@
               await handleReaction(authors, emoji);
             }
           }}>
-          <span>{emoji}</span>
+          <span use:twemoji={{ exclude: ["21a9"] }}>{emoji}</span>
           <span>{authors.length}</span>
         </div>
       {:else}
         <div class="reaction txt-tiny" style="padding: 2px 4px;">
-          <span>{emoji}</span>
+          <span use:twemoji={{ exclude: ["21a9"] }}>{emoji}</span>
           <span>{authors.length}</span>
         </div>
       {/if}