kyle/flxn-app
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0189ASmkMee4F5aJ3jnKeKQv
This commit is contained in:
kyle
2026-08-23 18:27:40 -07:00
co-authored by Claude Fable 5
parent b0e0cb9e61
commit b98e4fda73
5 changed files with 57 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ios-install-prompt.tsx
+17 -3
View File
@@ -2,9 +2,16 @@ import { useEffect, useState } from 'react'
import { Box, Paper, Group, Text, ActionIcon } from '@mantine/core'
import { DownloadIcon, XIcon } from '@phosphor-icons/react'
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() {
const { t } = useLingui()
const { user } = useAuth()
const isMobile = useIsMobile()
const [show, setShow] = useState(false)
const [platform, setPlatform] = useState<'ios' | 'android' | null>(null)
@@ -36,22 +43,29 @@ export function IOSInstallPrompt() {
? t`Tap Share → 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 (
<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' }}>
<Group justify="space-between" wrap="nowrap">
<Group gap="xs" wrap="nowrap" style={{ flex: 1 }}>
<DownloadIcon size={20} style={{ flexShrink: 0 }} />
<Box style={{ flex: 1, minWidth: 0 }}>
<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 size="xs" opacity={0.9} style={{ lineHeight: 1.2 }}>
{instructions}
</Text>
</Box>
</Group>
<ActionIcon variant="subtle" color="white" onClick={handleDismiss}>
<ActionIcon variant="subtle" color="white" onClick={handleDismiss} aria-label={t`Dismiss`}>
<XIcon size={18} />
</ActionIcon>
</Group>
src/locales/de/messages.po
+10 -6
View File
@@ -392,6 +392,10 @@ msgstr "Aktivitäten"
msgid "Activity Details"
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
msgid "Add Player"
msgstr "Spieler hinzufügen"
@@ -841,6 +845,10 @@ msgstr "deviceId ist für die Übertragungsaktion erforderlich"
msgid "Disconnect Spotify"
msgstr "Spotify trennen"
#: src/components/ios-install-prompt.tsx:68
msgid "Dismiss"
msgstr "Schließen"
#: src/features/bracket/components/match-report.tsx:159
msgid "Does this look right?"
msgstr "Sieht das richtig aus?"
@@ -1864,10 +1872,6 @@ msgstr "Spieler sind erforderlich"
msgid "Playing on {0}"
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
msgid "Populate Knockout Bracket"
msgstr "K.-o.-Runde befüllen"
@@ -2320,11 +2324,11 @@ msgstr "T"
msgid "Tap an opponent below to compare"
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"
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"
msgstr "Tippe auf Teilen → Zum Home-Bildschirm hinzufügen"
src/locales/en/messages.po
+10 -6
View File
@@ -392,6 +392,10 @@ msgstr "Activities"
msgid "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
msgid "Add Player"
msgstr "Add Player"
@@ -841,6 +845,10 @@ msgstr "deviceId is required for transfer action"
msgid "Disconnect Spotify"
msgstr "Disconnect Spotify"
#: src/components/ios-install-prompt.tsx:68
msgid "Dismiss"
msgstr "Dismiss"
#: src/features/bracket/components/match-report.tsx:159
msgid "Does this look right?"
msgstr "Does this look right?"
@@ -1864,10 +1872,6 @@ msgstr "Players are required"
msgid "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
msgid "Populate Knockout Bracket"
msgstr "Populate Knockout Bracket"
@@ -2320,11 +2324,11 @@ msgstr "T"
msgid "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"
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"
msgstr "Tap Share → Add to Home Screen"
src/locales/es/messages.po
+10 -6
View File
@@ -392,6 +392,10 @@ msgstr "Actividades"
msgid "Activity Details"
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
msgid "Add Player"
msgstr "Agregar Jugador"
@@ -841,6 +845,10 @@ msgstr "Se requiere deviceId para la acción de transferencia"
msgid "Disconnect Spotify"
msgstr "Desconectar Spotify"
#: src/components/ios-install-prompt.tsx:68
msgid "Dismiss"
msgstr "Cerrar"
#: src/features/bracket/components/match-report.tsx:159
msgid "Does this look right?"
msgstr "¿Se ve bien así?"
@@ -1864,10 +1872,6 @@ msgstr "Los jugadores son obligatorios"
msgid "Playing on {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
msgid "Populate Knockout Bracket"
msgstr "Llenar el bracket eliminatorio"
@@ -2320,11 +2324,11 @@ msgstr "T"
msgid "Tap an opponent below to compare"
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"
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"
msgstr "Toca Compartir → Agregar a pantalla de inicio"
src/locales/ja/messages.po
+10 -6
View File
@@ -392,6 +392,10 @@ msgstr "アクティビティ"
msgid "Activity Details"
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
msgid "Add Player"
msgstr "プレイヤーを追加"
@@ -841,6 +845,10 @@ msgstr "転送操作にはdeviceIdが必要です"
msgid "Disconnect Spotify"
msgstr "Spotifyの連携を解除"
#: src/components/ios-install-prompt.tsx:68
msgid "Dismiss"
msgstr "閉じる"
#: src/features/bracket/components/match-report.tsx:159
msgid "Does this look right?"
msgstr "これで合っていますか?"
@@ -1864,10 +1872,6 @@ msgstr "プレイヤーの選択が必要です"
msgid "Playing on {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
msgid "Populate Knockout Bracket"
msgstr "ノックアウトブラケットを作成"
@@ -2320,11 +2324,11 @@ msgstr "T"
msgid "Tap an opponent below to compare"
msgstr "下の対戦相手をタップして比較"
#: src/components/ios-install-prompt.tsx:37
#: src/components/ios-install-prompt.tsx:44
msgid "Tap Menu (⋮) → Add to Home screen"
msgstr "メニュー (⋮) をタップ →「ホーム画面に追加」"
#: src/components/ios-install-prompt.tsx:36
#: src/components/ios-install-prompt.tsx:43
msgid "Tap Share → Add to Home Screen"
msgstr "共有をタップ →「ホーム画面に追加」"