style: update reaction styling and layout; remove unused emoji fallback logic

src/assets/item.css

@@ -271,7 +271,7 @@
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
-  margin-top: 8px;
+  margin: 0;
 }
 
 .reaction-pill {

src/assets/style.css

@@ -327,6 +327,17 @@ audio::-webkit-media-controls-panel {
   margin-left: 3px;
 }
 
+.reaction-box {
+  border-left: 2px solid var(--border-color);
+  padding: 6px 0px 24px 30px;
+  margin-left: 3px;
+}
+
+.text-box + .reaction-box {
+  margin-top: -12px;
+  padding-top: 0px;
+}
+
 .text-box p:first-child {
   margin-top: 0px;
 }

src/components/item.astro

@@ -31,21 +31,23 @@ const timeago = datetime.isBefore(dayjs().subtract(1, 'w')) ? datetime.format('H
   {post.content.length > 0 && <div class={`text-box content`} set:html={post.content} />}
   {
     post.reactions?.length > 0 && (
-      <div class="reaction-list">
-        {post.reactions.map((reaction) => (
-          <span class={`reaction-pill${reaction.isPaid ? ' reaction-pill-paid' : ''}`}>
-            <span class="reaction-emoji">
-              {
-                reaction.isPaid
-                  ? '⭐'
-                  : reaction.emojiImage
-                    ? <img src={reaction.emojiImage} alt={reaction.emoji || 'emoji'} loading="lazy" />
-                    : reaction.emoji
-              }
+      <div class="reaction-box">
+        <div class="reaction-list">
+          {post.reactions.map((reaction) => (
+            <span class={`reaction-pill${reaction.isPaid ? ' reaction-pill-paid' : ''}`}>
+              <span class="reaction-emoji">
+                {
+                  reaction.isPaid
+                    ? '\u2B50'
+                    : reaction.emojiImage
+                      ? <img src={reaction.emojiImage} alt={reaction.emoji || 'emoji'} loading="lazy" />
+                      : reaction.emoji
+                }
+              </span>
+              <span class="reaction-count">{reaction.count}</span>
             </span>
-            <span class="reaction-count">{reaction.count}</span>
-          </span>
-        ))}
+          ))}
+        </div>
       </div>
     )
   }

src/lib/telegram/index.js

@@ -13,22 +13,6 @@ const cache = new LRUCache({
   },
 })
 
-// Common emoji-id to standard emoji fallback mapping
-const EMOJI_ID_FALLBACK = {
-  '5368324170671202286': '\uD83D\uDC4D',
-  '5427127139151397446': '\uD83E\uDD1D',
-  '5388841349703284277': '\uD83D\uDD25',
-  '5265077361648368841': '\u2764\uFE0F',
-  '5388967613151851494': '\uD83C\uDF89',
-  '5881813392380923308': '\uD83D\uDE0D',
-  '5456669990092545624': '\uD83D\uDCAF',
-  '5384108682290152083': '\uD83D\uDC4F',
-  '5449800250032143374': '\uD83D\uDE02',
-  '5006239808935167310': '\uD83D\uDE97',
-  '5472105307985419058': '\u261D\uFE0F',
-  '5375338737028841420': '\uD83E\uDD29',
-}
-
 // Normalize emoji variants (e.g., heart variants)
 function normalizeEmoji(emoji) {
   const emojiMap = {
@@ -40,37 +24,11 @@ function normalizeEmoji(emoji) {
   return emojiMap[emoji] || emoji
 }
 
-const customEmojiFallback = new Map(Object.entries(EMOJI_ID_FALLBACK))
-
 const customEmojiCache = new LRUCache({
   ttl: 1000 * 60 * 60 * 24, // 24 hours
   max: 500,
 })
 
-function getEmojiFallback(emojiId) {
-  if (!emojiId)
-    return ''
-  return customEmojiFallback.get(emojiId) || ''
-}
-
-function setEmojiFallback(emojiId, emoji) {
-  if (!emojiId || !emoji)
-    return
-  customEmojiFallback.set(emojiId, emoji)
-}
-
-function extractTgEmojiFallback($, emojiEl) {
-  const nestedEmoji = $(emojiEl).find('.emoji b').text().trim()
-  if (nestedEmoji) {
-    return normalizeEmoji(nestedEmoji)
-  }
-  const attrEmoji = $(emojiEl).attr('emoji') ?? $(emojiEl).attr('alt') ?? ''
-  if (attrEmoji) {
-    return normalizeEmoji(attrEmoji.trim())
-  }
-  return ''
-}
-
 async function getCustomEmojiImage(emojiId, staticProxy = '') {
   if (!emojiId)
     return null
@@ -100,15 +58,6 @@ async function hydrateTgEmoji($, content, { staticProxy } = {}) {
 
   await Promise.all(emojiNodes.map(async (emojiEl) => {
     const emojiId = $(emojiEl).attr('emoji-id')
-    const nestedFallback = extractTgEmojiFallback($, emojiEl)
-    const fallback = nestedFallback || getEmojiFallback(emojiId)
-    if (emojiId && fallback) {
-      setEmojiFallback(emojiId, fallback)
-    }
-    if (fallback) {
-      $(emojiEl).text(fallback)
-      return
-    }
     if (!emojiId)
       return
 
@@ -264,16 +213,9 @@ async function getReactions($, item, staticProxy) {
     if (tgEmoji.length && !emoji) {
       emojiId = tgEmoji.attr('emoji-id')
       if (emojiId) {
-        const nestedFallback = extractTgEmojiFallback($, tgEmoji.get(0))
-        emoji = nestedFallback || getEmojiFallback(emojiId)
-        if (emoji) {
-          setEmojiFallback(emojiId, emoji)
-        }
-        else {
-          const imageUrl = await getCustomEmojiImage(emojiId, staticProxy)
-          if (imageUrl) {
-            emojiImage = imageUrl
-          }
+        const imageUrl = await getCustomEmojiImage(emojiId, staticProxy)
+        if (imageUrl) {
+          emojiImage = imageUrl
         }
       }
     }
@@ -288,7 +230,7 @@ async function getReactions($, item, staticProxy) {
 
     if (count) {
       reactions.push({
-        emoji: emoji || (emojiImage ? '' : '\uD83D\uDC4D'),
+        emoji,
         emojiId,
         emojiImage,
         count,