feat(test-app): add emoji icons to platform and status badges

Add platform-specific emojis (🤖 Android, 🍎 iOS, 🌐 Web) and status
indicators ( Ready, ⚠️ Not Ready,  Unknown) to improve visual
clarity in the home view welcome section.
This commit is contained in:
Jose Olarte III
2026-01-06 16:23:20 +08:00
parent f97b3bec5b
commit b230a8e7b5

View File

@@ -21,10 +21,10 @@
</p> </p>
<div class="platform-info"> <div class="platform-info">
<span class="platform-badge" :class="platformClass"> <span class="platform-badge" :class="platformClass">
{{ platformName }} {{ platformEmoji }} {{ platformName }}
</span> </span>
<span class="status-badge" :class="statusClass"> <span class="status-badge" :class="statusClass">
{{ statusText }} {{ statusEmoji }} {{ statusText }}
</span> </span>
</div> </div>
</div> </div>
@@ -138,6 +138,20 @@ const platformName = computed(() => {
return platform.charAt(0).toUpperCase() + platform.slice(1) return platform.charAt(0).toUpperCase() + platform.slice(1)
}) })
const platformEmoji = computed(() => {
const platform = Capacitor.getPlatform()
switch (platform) {
case 'android':
return '🤖'
case 'ios':
return '🍎'
case 'web':
return '🌐'
default:
return '📱'
}
})
const platformClass = computed(() => `platform-${Capacitor.getPlatform()}`) const platformClass = computed(() => `platform-${Capacitor.getPlatform()}`)
const statusClass = computed(() => { const statusClass = computed(() => {
@@ -154,6 +168,13 @@ const statusText = computed(() => {
return 'Not Ready' return 'Not Ready'
}) })
const statusEmoji = computed(() => {
const status = appStore.notificationStatus
if (!status) return '❓'
if (status.canScheduleNow) return '✅'
return '⚠️'
})
const systemStatus = computed(() => { const systemStatus = computed(() => {
const status = appStore.notificationStatus const status = appStore.notificationStatus
if (!status) { if (!status) {