From b98e4fda731d70360379b0891d53eb5083c8f9fc Mon Sep 17 00:00:00 2001 From: yohlo Date: Sun, 23 Aug 2026 18:27:40 -0700 Subject: [PATCH] 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. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_0189ASmkMee4F5aJ3jnKeKQv --- src/components/ios-install-prompt.tsx | 20 +++++++++++++++++--- src/locales/de/messages.po | 16 ++++++++++------ src/locales/en/messages.po | 16 ++++++++++------ src/locales/es/messages.po | 16 ++++++++++------ src/locales/ja/messages.po | 16 ++++++++++------ 5 files changed, 57 insertions(+), 27 deletions(-) diff --git a/src/components/ios-install-prompt.tsx b/src/components/ios-install-prompt.tsx index a6aabd2..6b4a8f6 100644 --- a/src/components/ios-install-prompt.tsx +++ b/src/components/ios-install-prompt.tsx @@ -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 ( - + - Please install FLXN • This will save me Twilio credits as you won't be signed out! + Add FLXN to your home screen — smoother experience, always one tap away {instructions} - + diff --git a/src/locales/de/messages.po b/src/locales/de/messages.po index 2c1f76f..3e39176 100644 --- a/src/locales/de/messages.po +++ b/src/locales/de/messages.po @@ -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" diff --git a/src/locales/en/messages.po b/src/locales/en/messages.po index 65dbc22..c746078 100644 --- a/src/locales/en/messages.po +++ b/src/locales/en/messages.po @@ -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" diff --git a/src/locales/es/messages.po b/src/locales/es/messages.po index c399db6..1a0c931 100644 --- a/src/locales/es/messages.po +++ b/src/locales/es/messages.po @@ -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" diff --git a/src/locales/ja/messages.po b/src/locales/ja/messages.po index 5b6e10a..2c73643 100644 --- a/src/locales/ja/messages.po +++ b/src/locales/ja/messages.po @@ -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 "共有をタップ →「ホーム画面に追加」"