fix(pwa): reword the install prompt and keep it off the bottom nav

The banner sat fixed at the viewport bottom at z-index 1000, covering the
authed shell's mobile nav; it now offsets above the nav's geometry when a
signed-in mobile user has one. New casual copy replaces the Twilio line,
the dismiss button gains a localized aria-label, and de/es/ja catalogs
carry the new strings.
This commit is contained in:
2026-08-23 18:27:40 -07:00
parent f63dfde85d
commit a45c2aeafa
5 changed files with 57 additions and 27 deletions
+17 -3
View File
@@ -2,9 +2,16 @@ import { useEffect, useState } from 'react'
import { Box, Paper, Group, Text, ActionIcon } from '@mantine/core' import { Box, Paper, Group, Text, ActionIcon } from '@mantine/core'
import { DownloadIcon, XIcon } from '@phosphor-icons/react' import { DownloadIcon, XIcon } from '@phosphor-icons/react'
import { Trans, useLingui } from '@lingui/react/macro' import { Trans, useLingui } from '@lingui/react/macro'
import { useAuth } from '@/contexts/auth-context'
import { useIsMobile } from '@/hooks/use-is-mobile'
// Navbar geometry: 4rem height + 0.5rem margin + its safe-area bottom offset.
const ABOVE_MOBILE_NAV_OFFSET = 'calc(4.5rem + env(safe-area-inset-bottom, 0px))'
export function IOSInstallPrompt() { export function IOSInstallPrompt() {
const { t } = useLingui() const { t } = useLingui()
const { user } = useAuth()
const isMobile = useIsMobile()
const [show, setShow] = useState(false) const [show, setShow] = useState(false)
const [platform, setPlatform] = useState<'ios' | 'android' | null>(null) const [platform, setPlatform] = useState<'ios' | 'android' | null>(null)
@@ -36,22 +43,29 @@ export function IOSInstallPrompt() {
? t`Tap Share → Add to Home Screen` ? t`Tap Share → Add to Home Screen`
: t`Tap Menu (⋮) → Add to Home screen` : t`Tap Menu (⋮) → Add to Home screen`
// Navbar renders only under _authed, so a signed-in mobile user on a public
// route has no nav to clear.
const aboveBottomNav = Boolean(user) && isMobile
const bottomStyle = aboveBottomNav
? { bottom: ABOVE_MOBILE_NAV_OFFSET, paddingBottom: '8px' }
: { bottom: 0, paddingBottom: 'calc(8px + env(safe-area-inset-bottom, 0px))' }
return ( return (
<Box style={{ position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 1000, padding: '8px' }}> <Box style={{ position: 'fixed', left: 0, right: 0, zIndex: 1000, padding: '8px', ...bottomStyle }}>
<Paper shadow="lg" p="sm" style={{ background: 'var(--mantine-color-blue-9)', color: 'white' }}> <Paper shadow="lg" p="sm" style={{ background: 'var(--mantine-color-blue-9)', color: 'white' }}>
<Group justify="space-between" wrap="nowrap"> <Group justify="space-between" wrap="nowrap">
<Group gap="xs" wrap="nowrap" style={{ flex: 1 }}> <Group gap="xs" wrap="nowrap" style={{ flex: 1 }}>
<DownloadIcon size={20} style={{ flexShrink: 0 }} /> <DownloadIcon size={20} style={{ flexShrink: 0 }} />
<Box style={{ flex: 1, minWidth: 0 }}> <Box style={{ flex: 1, minWidth: 0 }}>
<Text size="sm" fw={500} style={{ lineHeight: 1.3 }}> <Text size="sm" fw={500} style={{ lineHeight: 1.3 }}>
<Trans>Please install FLXN • This will save me Twilio credits as you won't be signed out!</Trans> <Trans>Add FLXN to your home screen — smoother experience, always one tap away</Trans>
</Text> </Text>
<Text size="xs" opacity={0.9} style={{ lineHeight: 1.2 }}> <Text size="xs" opacity={0.9} style={{ lineHeight: 1.2 }}>
{instructions} {instructions}
</Text> </Text>
</Box> </Box>
</Group> </Group>
<ActionIcon variant="subtle" color="white" onClick={handleDismiss}> <ActionIcon variant="subtle" color="white" onClick={handleDismiss} aria-label={t`Dismiss`}>
<XIcon size={18} /> <XIcon size={18} />
</ActionIcon> </ActionIcon>
</Group> </Group>
+10 -6
View File
@@ -392,6 +392,10 @@ msgstr "Aktivitäten"
msgid "Activity Details" msgid "Activity Details"
msgstr "Aktivitätsdetails" msgstr "Aktivitätsdetails"
#: src/components/ios-install-prompt.tsx:61
msgid "Add FLXN to your home screen — smoother experience, always one tap away"
msgstr "Leg FLXN auf deinen Homescreen — läuft flüssiger und ist immer nur einen Tipp entfernt"
#: src/features/tournaments/components/edit-enrolled-players.tsx:117 #: src/features/tournaments/components/edit-enrolled-players.tsx:117
msgid "Add Player" msgid "Add Player"
msgstr "Spieler hinzufügen" msgstr "Spieler hinzufügen"
@@ -841,6 +845,10 @@ msgstr "deviceId ist für die Übertragungsaktion erforderlich"
msgid "Disconnect Spotify" msgid "Disconnect Spotify"
msgstr "Spotify trennen" msgstr "Spotify trennen"
#: src/components/ios-install-prompt.tsx:68
msgid "Dismiss"
msgstr "Schließen"
#: src/features/bracket/components/match-report.tsx:159 #: src/features/bracket/components/match-report.tsx:159
msgid "Does this look right?" msgid "Does this look right?"
msgstr "Sieht das richtig aus?" msgstr "Sieht das richtig aus?"
@@ -1864,10 +1872,6 @@ msgstr "Spieler sind erforderlich"
msgid "Playing on {0}" msgid "Playing on {0}"
msgstr "Wird auf {0} abgespielt" msgstr "Wird auf {0} abgespielt"
#: src/components/ios-install-prompt.tsx:47
msgid "Please install FLXN • This will save me Twilio credits as you won't be signed out!"
msgstr "Installier FLXN • Das spart mir Twilio-Credits, weil du nicht ausgeloggt wirst!"
#: src/features/tournaments/components/group-stage-view.tsx:314 #: src/features/tournaments/components/group-stage-view.tsx:314
msgid "Populate Knockout Bracket" msgid "Populate Knockout Bracket"
msgstr "K.-o.-Runde befüllen" msgstr "K.-o.-Runde befüllen"
@@ -2320,11 +2324,11 @@ msgstr "T"
msgid "Tap an opponent below to compare" msgid "Tap an opponent below to compare"
msgstr "Tippe unten auf einen Gegner zum Vergleichen" msgstr "Tippe unten auf einen Gegner zum Vergleichen"
#: src/components/ios-install-prompt.tsx:37 #: src/components/ios-install-prompt.tsx:44
msgid "Tap Menu (⋮) → Add to Home screen" msgid "Tap Menu (⋮) → Add to Home screen"
msgstr "Tippe auf Menü (⋮) → Zum Home-Bildschirm hinzufügen" msgstr "Tippe auf Menü (⋮) → Zum Home-Bildschirm hinzufügen"
#: src/components/ios-install-prompt.tsx:36 #: src/components/ios-install-prompt.tsx:43
msgid "Tap Share → Add to Home Screen" msgid "Tap Share → Add to Home Screen"
msgstr "Tippe auf Teilen → Zum Home-Bildschirm hinzufügen" msgstr "Tippe auf Teilen → Zum Home-Bildschirm hinzufügen"
+10 -6
View File
@@ -392,6 +392,10 @@ msgstr "Activities"
msgid "Activity Details" msgid "Activity Details"
msgstr "Activity Details" msgstr "Activity Details"
#: src/components/ios-install-prompt.tsx:61
msgid "Add FLXN to your home screen — smoother experience, always one tap away"
msgstr "Add FLXN to your home screen — smoother experience, always one tap away"
#: src/features/tournaments/components/edit-enrolled-players.tsx:117 #: src/features/tournaments/components/edit-enrolled-players.tsx:117
msgid "Add Player" msgid "Add Player"
msgstr "Add Player" msgstr "Add Player"
@@ -841,6 +845,10 @@ msgstr "deviceId is required for transfer action"
msgid "Disconnect Spotify" msgid "Disconnect Spotify"
msgstr "Disconnect Spotify" msgstr "Disconnect Spotify"
#: src/components/ios-install-prompt.tsx:68
msgid "Dismiss"
msgstr "Dismiss"
#: src/features/bracket/components/match-report.tsx:159 #: src/features/bracket/components/match-report.tsx:159
msgid "Does this look right?" msgid "Does this look right?"
msgstr "Does this look right?" msgstr "Does this look right?"
@@ -1864,10 +1872,6 @@ msgstr "Players are required"
msgid "Playing on {0}" msgid "Playing on {0}"
msgstr "Playing on {0}" msgstr "Playing on {0}"
#: src/components/ios-install-prompt.tsx:47
msgid "Please install FLXN • This will save me Twilio credits as you won't be signed out!"
msgstr "Please install FLXN • This will save me Twilio credits as you won't be signed out!"
#: src/features/tournaments/components/group-stage-view.tsx:314 #: src/features/tournaments/components/group-stage-view.tsx:314
msgid "Populate Knockout Bracket" msgid "Populate Knockout Bracket"
msgstr "Populate Knockout Bracket" msgstr "Populate Knockout Bracket"
@@ -2320,11 +2324,11 @@ msgstr "T"
msgid "Tap an opponent below to compare" msgid "Tap an opponent below to compare"
msgstr "Tap an opponent below to compare" msgstr "Tap an opponent below to compare"
#: src/components/ios-install-prompt.tsx:37 #: src/components/ios-install-prompt.tsx:44
msgid "Tap Menu (⋮) → Add to Home screen" msgid "Tap Menu (⋮) → Add to Home screen"
msgstr "Tap Menu (⋮) → Add to Home screen" msgstr "Tap Menu (⋮) → Add to Home screen"
#: src/components/ios-install-prompt.tsx:36 #: src/components/ios-install-prompt.tsx:43
msgid "Tap Share → Add to Home Screen" msgid "Tap Share → Add to Home Screen"
msgstr "Tap Share → Add to Home Screen" msgstr "Tap Share → Add to Home Screen"
+10 -6
View File
@@ -392,6 +392,10 @@ msgstr "Actividades"
msgid "Activity Details" msgid "Activity Details"
msgstr "Detalles de la actividad" msgstr "Detalles de la actividad"
#: src/components/ios-install-prompt.tsx:61
msgid "Add FLXN to your home screen — smoother experience, always one tap away"
msgstr "Agrega FLXN a tu pantalla de inicio — funciona mejor y siempre está a un toque"
#: src/features/tournaments/components/edit-enrolled-players.tsx:117 #: src/features/tournaments/components/edit-enrolled-players.tsx:117
msgid "Add Player" msgid "Add Player"
msgstr "Agregar Jugador" msgstr "Agregar Jugador"
@@ -841,6 +845,10 @@ msgstr "Se requiere deviceId para la acción de transferencia"
msgid "Disconnect Spotify" msgid "Disconnect Spotify"
msgstr "Desconectar Spotify" msgstr "Desconectar Spotify"
#: src/components/ios-install-prompt.tsx:68
msgid "Dismiss"
msgstr "Cerrar"
#: src/features/bracket/components/match-report.tsx:159 #: src/features/bracket/components/match-report.tsx:159
msgid "Does this look right?" msgid "Does this look right?"
msgstr "¿Se ve bien así?" msgstr "¿Se ve bien así?"
@@ -1864,10 +1872,6 @@ msgstr "Los jugadores son obligatorios"
msgid "Playing on {0}" msgid "Playing on {0}"
msgstr "Reproduciendo en {0}" msgstr "Reproduciendo en {0}"
#: src/components/ios-install-prompt.tsx:47
msgid "Please install FLXN • This will save me Twilio credits as you won't be signed out!"
msgstr "Por favor instala FLXN • Así me ahorras créditos de Twilio porque no se cerrará tu sesión"
#: src/features/tournaments/components/group-stage-view.tsx:314 #: src/features/tournaments/components/group-stage-view.tsx:314
msgid "Populate Knockout Bracket" msgid "Populate Knockout Bracket"
msgstr "Llenar el bracket eliminatorio" msgstr "Llenar el bracket eliminatorio"
@@ -2320,11 +2324,11 @@ msgstr "T"
msgid "Tap an opponent below to compare" msgid "Tap an opponent below to compare"
msgstr "Toca un oponente abajo para comparar" msgstr "Toca un oponente abajo para comparar"
#: src/components/ios-install-prompt.tsx:37 #: src/components/ios-install-prompt.tsx:44
msgid "Tap Menu (⋮) → Add to Home screen" msgid "Tap Menu (⋮) → Add to Home screen"
msgstr "Toca Menú (⋮) → Agregar a pantalla de inicio" msgstr "Toca Menú (⋮) → Agregar a pantalla de inicio"
#: src/components/ios-install-prompt.tsx:36 #: src/components/ios-install-prompt.tsx:43
msgid "Tap Share → Add to Home Screen" msgid "Tap Share → Add to Home Screen"
msgstr "Toca Compartir → Agregar a pantalla de inicio" msgstr "Toca Compartir → Agregar a pantalla de inicio"
+10 -6
View File
@@ -392,6 +392,10 @@ msgstr "アクティビティ"
msgid "Activity Details" msgid "Activity Details"
msgstr "アクティビティの詳細" msgstr "アクティビティの詳細"
#: src/components/ios-install-prompt.tsx:61
msgid "Add FLXN to your home screen — smoother experience, always one tap away"
msgstr "FLXNをホーム画面に追加。もっと快適に使えて、いつでもワンタップで開けます"
#: src/features/tournaments/components/edit-enrolled-players.tsx:117 #: src/features/tournaments/components/edit-enrolled-players.tsx:117
msgid "Add Player" msgid "Add Player"
msgstr "プレイヤーを追加" msgstr "プレイヤーを追加"
@@ -841,6 +845,10 @@ msgstr "転送操作にはdeviceIdが必要です"
msgid "Disconnect Spotify" msgid "Disconnect Spotify"
msgstr "Spotifyの連携を解除" msgstr "Spotifyの連携を解除"
#: src/components/ios-install-prompt.tsx:68
msgid "Dismiss"
msgstr "閉じる"
#: src/features/bracket/components/match-report.tsx:159 #: src/features/bracket/components/match-report.tsx:159
msgid "Does this look right?" msgid "Does this look right?"
msgstr "これで合っていますか?" msgstr "これで合っていますか?"
@@ -1864,10 +1872,6 @@ msgstr "プレイヤーの選択が必要です"
msgid "Playing on {0}" msgid "Playing on {0}"
msgstr "{0}で再生中" msgstr "{0}で再生中"
#: src/components/ios-install-prompt.tsx:47
msgid "Please install FLXN • This will save me Twilio credits as you won't be signed out!"
msgstr "FLXNをインストールしてください • ログアウトされなくなるので、Twilioのクレジット節約になります!"
#: src/features/tournaments/components/group-stage-view.tsx:314 #: src/features/tournaments/components/group-stage-view.tsx:314
msgid "Populate Knockout Bracket" msgid "Populate Knockout Bracket"
msgstr "ノックアウトブラケットを作成" msgstr "ノックアウトブラケットを作成"
@@ -2320,11 +2324,11 @@ msgstr "T"
msgid "Tap an opponent below to compare" msgid "Tap an opponent below to compare"
msgstr "下の対戦相手をタップして比較" msgstr "下の対戦相手をタップして比較"
#: src/components/ios-install-prompt.tsx:37 #: src/components/ios-install-prompt.tsx:44
msgid "Tap Menu (⋮) → Add to Home screen" msgid "Tap Menu (⋮) → Add to Home screen"
msgstr "メニュー (⋮) をタップ →「ホーム画面に追加」" msgstr "メニュー (⋮) をタップ →「ホーム画面に追加」"
#: src/components/ios-install-prompt.tsx:36 #: src/components/ios-install-prompt.tsx:43
msgid "Tap Share → Add to Home Screen" msgid "Tap Share → Add to Home Screen"
msgstr "共有をタップ →「ホーム画面に追加」" msgstr "共有をタップ →「ホーム画面に追加」"