From d75440bfe46e3c21d7207b9d823251857c86728e Mon Sep 17 00:00:00 2001
From: Dmitry Lunin <br@slack.ru>
Date: Tue, 21 Apr 2026 23:03:20 +0300
Subject: [PATCH] fix: wrap server display names with Twemoji for
 cross-platform emoji rendering

---
 src/pages/AdminCampaignCreate.tsx         | 7 ++++++-
 src/pages/AdminCampaignEdit.tsx           | 7 ++++++-
 src/pages/AdminPromoOfferTemplateEdit.tsx | 7 ++++++-
 src/pages/AdminRemnawave.tsx              | 5 ++++-
 src/pages/AdminRemnawaveSquadDetail.tsx   | 5 ++++-
 src/pages/AdminServerEdit.tsx             | 7 ++++++-
 src/pages/AdminServers.tsx                | 7 ++++++-
 src/pages/AdminTariffCreate.tsx           | 7 ++++++-
 src/pages/Subscription.tsx                | 5 ++++-
 src/pages/SubscriptionPurchase.tsx        | 9 ++++++++-
 10 files changed, 56 insertions(+), 10 deletions(-)

diff --git a/src/pages/AdminCampaignCreate.tsx b/src/pages/AdminCampaignCreate.tsx
index 2aa9c42..5021065 100644
--- a/src/pages/AdminCampaignCreate.tsx
+++ b/src/pages/AdminCampaignCreate.tsx
@@ -12,6 +12,7 @@ import {
 import { partnerApi } from '../api/partners';
 import { AdminBackButton } from '../components/admin';
 import { createNumberInputHandler, toNumber } from '../utils/inputHelpers';
+import Twemoji from 'react-twemoji';
 // Icons
 const CampaignIcon = () => (
   <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
@@ -108,7 +109,11 @@ function ServerSelector({
             >
               {selected.includes(server.squad_uuid) && <CheckIcon />}
             </div>
-            <span className="text-sm font-medium">{server.display_name}</span>
+            <span className="text-sm font-medium">
+              <Twemoji options={{ className: 'twemoji', folder: 'svg', ext: '.svg' }}>
+                {server.display_name}
+              </Twemoji>
+            </span>
           </button>
         ))}
       </div>
diff --git a/src/pages/AdminCampaignEdit.tsx b/src/pages/AdminCampaignEdit.tsx
index 7318ae6..f376b7a 100644
--- a/src/pages/AdminCampaignEdit.tsx
+++ b/src/pages/AdminCampaignEdit.tsx
@@ -13,6 +13,7 @@ import {
 import { AdminBackButton } from '../components/admin';
 import { CheckIcon, CampaignIcon } from '../components/icons';
 import { createNumberInputHandler, toNumber } from '../utils/inputHelpers';
+import Twemoji from 'react-twemoji';
 
 // Bonus type config
 const bonusTypeConfig: Record<
@@ -83,7 +84,11 @@ function ServerSelector({
             >
               {selected.includes(server.squad_uuid) && <CheckIcon />}
             </div>
-            <span className="text-sm font-medium">{server.display_name}</span>
+            <span className="text-sm font-medium">
+              <Twemoji options={{ className: 'twemoji', folder: 'svg', ext: '.svg' }}>
+                {server.display_name}
+              </Twemoji>
+            </span>
           </button>
         ))}
       </div>
diff --git a/src/pages/AdminPromoOfferTemplateEdit.tsx b/src/pages/AdminPromoOfferTemplateEdit.tsx
index a3a4851..273bb70 100644
--- a/src/pages/AdminPromoOfferTemplateEdit.tsx
+++ b/src/pages/AdminPromoOfferTemplateEdit.tsx
@@ -11,6 +11,7 @@ import {
 import { serversApi } from '../api/servers';
 import { AdminBackButton } from '../components/admin';
 import { createNumberInputHandler, toNumber } from '../utils/inputHelpers';
+import Twemoji from 'react-twemoji';
 
 const getOfferTypeIcon = (offerType: string): string => {
   return OFFER_TYPE_CONFIG[offerType as OfferType]?.icon || '🎁';
@@ -254,7 +255,11 @@ export default function AdminPromoOfferTemplateEdit() {
                             }}
                             className="accent-accent-500"
                           />
-                          <span className="text-dark-200">{server.display_name}</span>
+                          <span className="text-dark-200">
+                            <Twemoji options={{ className: 'twemoji', folder: 'svg', ext: '.svg' }}>
+                              {server.display_name}
+                            </Twemoji>
+                          </span>
                           {server.country_code && (
                             <span className="text-dark-500">{server.country_code}</span>
                           )}
diff --git a/src/pages/AdminRemnawave.tsx b/src/pages/AdminRemnawave.tsx
index dcf82b8..3c6b53d 100644
--- a/src/pages/AdminRemnawave.tsx
+++ b/src/pages/AdminRemnawave.tsx
@@ -12,6 +12,7 @@ import {
 } from '../api/adminRemnawave';
 import { usePlatform } from '../platform/hooks/usePlatform';
 import { formatUptime } from '../utils/format';
+import Twemoji from 'react-twemoji';
 import {
   ServerIcon,
   ChartIcon,
@@ -225,7 +226,9 @@ function SquadCard({ squad, onClick }: SquadCardProps) {
           <div className="flex items-center gap-2">
             <span className="text-lg">{getCountryFlag(squad.country_code)}</span>
             <h3 className="truncate font-medium text-dark-100">
-              {squad.display_name || squad.name}
+              <Twemoji options={{ className: 'twemoji', folder: 'svg', ext: '.svg' }}>
+                {squad.display_name || squad.name}
+              </Twemoji>
             </h3>
             {squad.is_synced ? (
               <span className="rounded-full bg-success-500/20 px-2 py-0.5 text-xs text-success-400">
diff --git a/src/pages/AdminRemnawaveSquadDetail.tsx b/src/pages/AdminRemnawaveSquadDetail.tsx
index 9902035..d59ee53 100644
--- a/src/pages/AdminRemnawaveSquadDetail.tsx
+++ b/src/pages/AdminRemnawaveSquadDetail.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { adminRemnawaveApi, SquadWithLocalInfo } from '../api/adminRemnawave';
 import { AdminBackButton } from '../components/admin';
 import { ServerIcon, UsersIcon, CheckIcon, XIcon } from '../components/icons';
+import Twemoji from 'react-twemoji';
 // Country flags helper
 const getCountryFlag = (code: string | null | undefined): string => {
   if (!code) return '🌍';
@@ -112,7 +113,9 @@ export default function AdminRemnawaveSquadDetail() {
         </div>
         <div>
           <h1 className="text-xl font-semibold text-dark-100">
-            {squad.display_name || squad.name}
+            <Twemoji options={{ className: 'twemoji', folder: 'svg', ext: '.svg' }}>
+              {squad.display_name || squad.name}
+            </Twemoji>
           </h1>
           <p className="text-sm text-dark-400">{squad.name}</p>
         </div>
diff --git a/src/pages/AdminServerEdit.tsx b/src/pages/AdminServerEdit.tsx
index 797cbbf..8204c15 100644
--- a/src/pages/AdminServerEdit.tsx
+++ b/src/pages/AdminServerEdit.tsx
@@ -6,6 +6,7 @@ import { serversApi, ServerUpdateRequest } from '../api/servers';
 import { AdminBackButton } from '../components/admin';
 import { ServerIcon } from '../components/icons';
 import { createNumberInputHandler, toNumber } from '../utils/inputHelpers';
+import Twemoji from 'react-twemoji';
 
 // Country flags (simple emoji mapping)
 const getCountryFlag = (code: string | null): string => {
@@ -139,7 +140,11 @@ export default function AdminServerEdit() {
         </div>
         <div>
           <h1 className="text-xl font-semibold text-dark-100">{t('admin.servers.edit')}</h1>
-          <p className="text-sm text-dark-400">{server.display_name}</p>
+          <p className="text-sm text-dark-400">
+            <Twemoji options={{ className: 'twemoji', folder: 'svg', ext: '.svg' }}>
+              {server.display_name}
+            </Twemoji>
+          </p>
         </div>
       </div>
 
diff --git a/src/pages/AdminServers.tsx b/src/pages/AdminServers.tsx
index 30a7d7c..be2ba1f 100644
--- a/src/pages/AdminServers.tsx
+++ b/src/pages/AdminServers.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { serversApi, ServerListItem } from '../api/servers';
 import { SyncIcon, EditIcon, CheckIcon, XIcon, UsersIcon, GiftIcon } from '../components/icons';
 import { usePlatform } from '../platform/hooks/usePlatform';
+import Twemoji from 'react-twemoji';
 
 // BackIcon
 const BackIcon = () => (
@@ -145,7 +146,11 @@ export default function AdminServers() {
                 <div className="min-w-0 flex-1">
                   <div className="mb-1 flex items-center gap-2">
                     <span className="text-lg">{getCountryFlag(server.country_code)}</span>
-                    <h3 className="truncate font-medium text-dark-100">{server.display_name}</h3>
+                    <h3 className="truncate font-medium text-dark-100">
+                      <Twemoji options={{ className: 'twemoji', folder: 'svg', ext: '.svg' }}>
+                        {server.display_name}
+                      </Twemoji>
+                    </h3>
                     {server.is_trial_eligible && (
                       <span className="rounded bg-success-500/20 px-2 py-0.5 text-xs text-success-400">
                         {t('admin.servers.trial')}
diff --git a/src/pages/AdminTariffCreate.tsx b/src/pages/AdminTariffCreate.tsx
index 798c7dc..c2116f5 100644
--- a/src/pages/AdminTariffCreate.tsx
+++ b/src/pages/AdminTariffCreate.tsx
@@ -13,6 +13,7 @@ import {
 } from '../api/tariffs';
 import { AdminBackButton } from '../components/admin';
 import { createNumberInputHandler, toNumber } from '../utils/inputHelpers';
+import Twemoji from 'react-twemoji';
 
 // Icons
 const PlusIcon = () => (
@@ -782,7 +783,11 @@ export default function AdminTariffCreate() {
                       >
                         {isSelected && <CheckIcon />}
                       </div>
-                      <span className="flex-1 text-sm font-medium">{server.display_name}</span>
+                      <span className="flex-1 text-sm font-medium">
+                        <Twemoji options={{ className: 'twemoji', folder: 'svg', ext: '.svg' }}>
+                          {server.display_name}
+                        </Twemoji>
+                      </span>
                       {server.country_code && (
                         <span className="text-xs text-dark-500">{server.country_code}</span>
                       )}
diff --git a/src/pages/Subscription.tsx b/src/pages/Subscription.tsx
index e8ffbeb..2be268d 100644
--- a/src/pages/Subscription.tsx
+++ b/src/pages/Subscription.tsx
@@ -24,6 +24,7 @@ import {
   getInsufficientBalanceError,
   getFlagEmoji,
 } from '../utils/subscriptionHelpers';
+import Twemoji from 'react-twemoji';
 
 /** Isolated countdown so 1s interval doesn't re-render the whole page */
 const CountdownTimer = memo(function CountdownTimer({
@@ -980,7 +981,9 @@ export default function Subscription() {
                         {server.country_code && (
                           <span className="text-xs">{getFlagEmoji(server.country_code)}</span>
                         )}
-                        {server.name}
+                        <Twemoji options={{ className: 'twemoji', folder: 'svg', ext: '.svg' }}>
+                          {server.name}
+                        </Twemoji>
                       </span>
                     ))}
                   </div>
diff --git a/src/pages/SubscriptionPurchase.tsx b/src/pages/SubscriptionPurchase.tsx
index f178001..b3a888c 100644
--- a/src/pages/SubscriptionPurchase.tsx
+++ b/src/pages/SubscriptionPurchase.tsx
@@ -19,6 +19,7 @@ import InsufficientBalancePrompt from '../components/InsufficientBalancePrompt';
 import { useCurrency } from '../hooks/useCurrency';
 import { useCloseOnSuccessNotification } from '../store/successNotification';
 import { CheckIcon } from '../components/icons';
+import Twemoji from 'react-twemoji';
 import {
   getErrorMessage,
   getInsufficientBalanceError,
@@ -1795,7 +1796,13 @@ export default function SubscriptionPurchase() {
                               {selectedServers.includes(server.uuid) && <CheckIcon />}
                             </div>
                             <div>
-                              <div className="font-medium text-dark-100">{server.name}</div>
+                              <div className="font-medium text-dark-100">
+                                <Twemoji
+                                  options={{ className: 'twemoji', folder: 'svg', ext: '.svg' }}
+                                >
+                                  {server.name}
+                                </Twemoji>
+                              </div>
                               <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
                                 <span className="text-sm text-accent-400">
                                   {formatPrice(promoServer.price)}