From 24b3d33ac38f209b7048e33d7ef2a36547d9d770 Mon Sep 17 00:00:00 2001
From: archipelago <archipelago@localhost>
Date: Tue, 21 Jul 2026 13:55:36 -0400
Subject: [PATCH] fix(ui): Cashu/Ark emoji rendered as tofu boxes on kiosk TVs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The kiosk image ships no color-emoji font, so the wallet card's 🥜 and ⚓
drew as empty squares on TVs. Swap them for inline stroke SVGs matching
the neighbouring rows (wallet card + scan modal), and add
fonts-noto-color-emoji to the ISO package set so remaining emoji across
the UI (peer files, chat, content) render on future installs.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 image-recipe/_archived/build-auto-installer-iso.sh |  1 +
 neode-ui/src/components/WalletScanModal.vue        |  5 ++++-
 neode-ui/src/views/home/HomeWalletCard.vue         | 10 ++++++++--
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/image-recipe/_archived/build-auto-installer-iso.sh b/image-recipe/_archived/build-auto-installer-iso.sh
index c4fb837f..546009c3 100755
--- a/image-recipe/_archived/build-auto-installer-iso.sh
+++ b/image-recipe/_archived/build-auto-installer-iso.sh
@@ -384,6 +384,7 @@ RUN apt-get update && apt-get -y full-upgrade && apt-get install -y --no-install
     chromium \
     unclutter \
     fonts-liberation \
+    fonts-noto-color-emoji \
     xfonts-base \
     plymouth \
     plymouth-themes \
diff --git a/neode-ui/src/components/WalletScanModal.vue b/neode-ui/src/components/WalletScanModal.vue
index 8c8e270d..8cb78a07 100644
--- a/neode-ui/src/components/WalletScanModal.vue
+++ b/neode-ui/src/components/WalletScanModal.vue
@@ -104,7 +104,10 @@
                   <svg v-else-if="rail === 'lightning'" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                   </svg>
-                  <span v-else-if="rail === 'cashu'" class="text-base" role="img" aria-label="Cashu">🥜</span>
+                  <!-- SVG, not 🥜: kiosk images ship no color-emoji font -->
+                  <svg v-else-if="rail === 'cashu'" class="w-5 h-5" role="img" aria-label="Cashu" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
+                  </svg>
                   <svg v-else class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a4 4 0 00-3-3.87M9 20H4v-2a4 4 0 013-3.87m6-.13a4 4 0 10-4-4 4 4 0 004 4zm6 0a4 4 0 10-3-6.65" />
                   </svg>
diff --git a/neode-ui/src/views/home/HomeWalletCard.vue b/neode-ui/src/views/home/HomeWalletCard.vue
index 69eb1db3..f2b6bd4c 100644
--- a/neode-ui/src/views/home/HomeWalletCard.vue
+++ b/neode-ui/src/views/home/HomeWalletCard.vue
@@ -122,7 +122,11 @@
           </div>
           <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
             <div class="flex items-center gap-3">
-              <span class="w-5 h-5 text-base leading-none flex items-center justify-center" role="img" aria-label="Cashu">🥜</span>
+              <!-- Inline SVG, not an emoji: kiosk images ship no color-emoji
+                   font, so 🥜 rendered as a tofu box on TVs -->
+              <svg class="w-5 h-5 text-purple-400" role="img" aria-label="Cashu" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
+              </svg>
               <span class="text-sm text-white/80">Cashu</span>
             </div>
             <span class="text-purple-400 text-sm font-medium">{{ walletEcash.toLocaleString() }} sats</span>
@@ -139,7 +143,9 @@
           <!-- Only rendered once barkd reports a balance — most nodes don't run the Ark sidecar -->
           <div v-if="(walletArk ?? 0) > 0" class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
             <div class="flex items-center gap-3">
-              <span class="w-5 h-5 text-base leading-none flex items-center justify-center" role="img" aria-label="Ark">⚓</span>
+              <svg class="w-5 h-5 text-teal-400" role="img" aria-label="Ark" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8a2.5 2.5 0 10-2.5-2.5A2.5 2.5 0 0012 8zm0 0v13m-7-7c0 3.87 3.13 7 7 7s7-3.13 7-7m-14 0H3m18 0h-2" />
+              </svg>
               <span class="text-sm text-white/80">Ark</span>
             </div>
             <span class="text-teal-400 text-sm font-medium">{{ (walletArk ?? 0).toLocaleString() }} sats</span>