fix(ui): Cashu/Ark emoji rendered as tofu boxes on kiosk TVs
All checks were successful
Demo images / Build & push demo images (push) Successful in 2m50s

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>
This commit is contained in:
archipelago 2026-07-21 13:55:36 -04:00
parent b23f46c3d8
commit 24b3d33ac3
3 changed files with 13 additions and 3 deletions

View File

@ -384,6 +384,7 @@ RUN apt-get update && apt-get -y full-upgrade && apt-get install -y --no-install
chromium \ chromium \
unclutter \ unclutter \
fonts-liberation \ fonts-liberation \
fonts-noto-color-emoji \
xfonts-base \ xfonts-base \
plymouth \ plymouth \
plymouth-themes \ plymouth-themes \

View File

@ -104,7 +104,10 @@
<svg v-else-if="rail === 'lightning'" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <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" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg> </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"> <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" /> <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> </svg>

View File

@ -122,7 +122,11 @@
</div> </div>
<div class="flex items-center justify-between p-3 bg-white/5 rounded-lg"> <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
<div class="flex items-center gap-3"> <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> <span class="text-sm text-white/80">Cashu</span>
</div> </div>
<span class="text-purple-400 text-sm font-medium">{{ walletEcash.toLocaleString() }} sats</span> <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 --> <!-- 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 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"> <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> <span class="text-sm text-white/80">Ark</span>
</div> </div>
<span class="text-teal-400 text-sm font-medium">{{ (walletArk ?? 0).toLocaleString() }} sats</span> <span class="text-teal-400 text-sm font-medium">{{ (walletArk ?? 0).toLocaleString() }} sats</span>