diff --git a/CHANGELOG.md b/CHANGELOG.md index 10482bcb1..052f5c305 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,20 @@ audit log records which token wrote them. Measurement tokens you already have can do this too, without being created again. (#1377) +### Fixed + +- **Opening a record on a phone.** In the account menu, "Open a record" + used to open a second menu beside the first, and on a narrow screen it + ran off the edge and cut the names off. On a phone the records now + unfold inside the account menu itself; wider screens keep the side + menu. (#1372) +- **A clearer message when the browser refuses push.** When the browser's + push service turned the registration down, enabling Browser Push said + only "Activation failed". It now says that the push service refused and + links the help page. Brave keeps push messaging off by default, so in + Brave the message names the setting to turn on: "Use Google services + for push messaging" under brave://settings/privacy. (Discussion #1378) + ### Security - The `hono` dependency floor is raised to 4.13.16 (CVE-2026-126355 to diff --git a/messages/de.json b/messages/de.json index 0f121edcd..f20b0b617 100644 --- a/messages/de.json +++ b/messages/de.json @@ -6429,6 +6429,9 @@ "webPushSubscribed": "Push-Benachrichtigungen aktiviert!", "webPushUnsubscribed": "Push-Benachrichtigungen deaktiviert.", "webPushSubscribeFailed": "Aktivierung fehlgeschlagen", + "webPushServiceRefused": "Der Push-Dienst deines Browsers hat die Anmeldung abgelehnt, deshalb ließ sich Push nicht einschalten. Der Browser muss seinen Push-Dienst erreichen, und eine Datenschutzeinstellung, ein Blocker oder das Netzwerk kann das verhindern. Versuche es später noch einmal oder in einem anderen Browser.", + "webPushServiceRefusedBrave": "Der Push-Dienst von Brave hat die Anmeldung abgelehnt. Brave lässt Push ab Werk ausgeschaltet: Öffne brave://settings/privacy, schalte dort die Nutzung von Google-Diensten für Push-Nachrichten ein und tippe dann noch einmal auf „Push aktivieren“.", + "webPushHelpLink": "Hilfe zu Browser-Push", "codexConnected": "ChatGPT erfolgreich verbunden! Insights sind jetzt aktiv.", "codexDisconnected": "ChatGPT-Verbindung getrennt.", "codexConnectionFailed": "ChatGPT-Verbindung fehlgeschlagen. Bitte versuche es erneut.", diff --git a/messages/en.json b/messages/en.json index 4e34e614a..eb5be78e0 100644 --- a/messages/en.json +++ b/messages/en.json @@ -6429,6 +6429,9 @@ "webPushSubscribed": "Push notifications enabled!", "webPushUnsubscribed": "Push notifications disabled.", "webPushSubscribeFailed": "Activation failed", + "webPushServiceRefused": "Your browser's push service refused the registration, so push could not be turned on. The browser has to reach its push service, and a privacy setting, a blocker or the network can stop it. Try again later or in another browser.", + "webPushServiceRefusedBrave": "Brave's push service refused the registration. Brave keeps push off by default: open brave://settings/privacy, turn on “Use Google services for push messaging” and tap Enable push again.", + "webPushHelpLink": "Help with browser push", "codexConnected": "ChatGPT connected successfully! Insights are now active.", "codexDisconnected": "ChatGPT connection removed.", "codexConnectionFailed": "ChatGPT connection failed. Please try again.", diff --git a/messages/es.json b/messages/es.json index 839f8df00..775344b65 100644 --- a/messages/es.json +++ b/messages/es.json @@ -6429,6 +6429,9 @@ "webPushSubscribed": "¡Notificaciones push activadas!", "webPushUnsubscribed": "Notificaciones push desactivadas.", "webPushSubscribeFailed": "Falló la activación", + "webPushServiceRefused": "El servicio push de tu navegador rechazó el registro, así que no se pudo activar push. El navegador tiene que llegar a su servicio push, y una opción de privacidad, un bloqueador o la red pueden impedirlo. Vuelve a intentarlo más tarde o en otro navegador.", + "webPushServiceRefusedBrave": "El servicio push de Brave rechazó el registro. Brave trae push desactivado de fábrica: abre brave://settings/privacy, activa el uso de los servicios de Google para la mensajería push y toca otra vez «Activar push».", + "webPushHelpLink": "Ayuda con push en el navegador", "codexConnected": "¡ChatGPT conectado correctamente! Insights ya está activo.", "codexDisconnected": "Conexión con ChatGPT eliminada.", "codexConnectionFailed": "Falló la conexión con ChatGPT. Inténtalo de nuevo.", diff --git a/messages/fr.json b/messages/fr.json index 03854772e..a975e27db 100644 --- a/messages/fr.json +++ b/messages/fr.json @@ -6429,6 +6429,9 @@ "webPushSubscribed": "Notifications push activées !", "webPushUnsubscribed": "Notifications push désactivées.", "webPushSubscribeFailed": "Échec de l’activation", + "webPushServiceRefused": "Le service push de votre navigateur a refusé l’inscription, le push n’a donc pas pu être activé. Le navigateur doit pouvoir joindre son service push, et un réglage de confidentialité, un bloqueur ou le réseau peut l’en empêcher. Réessayez plus tard ou dans un autre navigateur.", + "webPushServiceRefusedBrave": "Le service push de Brave a refusé l’inscription. Brave désactive le push par défaut : ouvrez brave://settings/privacy, activez l’utilisation des services Google pour la messagerie push, puis touchez à nouveau « Activer le push ».", + "webPushHelpLink": "Aide sur le push du navigateur", "codexConnected": "ChatGPT connecté ! Insights est maintenant actif.", "codexDisconnected": "Connexion à ChatGPT supprimée.", "codexConnectionFailed": "Échec de la connexion à ChatGPT. Veuillez réessayer.", diff --git a/messages/it.json b/messages/it.json index 86ad2cccf..d74b13623 100644 --- a/messages/it.json +++ b/messages/it.json @@ -6429,6 +6429,9 @@ "webPushSubscribed": "Notifiche push attivate!", "webPushUnsubscribed": "Notifiche push disattivate.", "webPushSubscribeFailed": "Attivazione non riuscita", + "webPushServiceRefused": "Il servizio push del browser ha rifiutato la registrazione, quindi non è stato possibile attivare il push. Il browser deve raggiungere il proprio servizio push, e un'impostazione sulla privacy, un blocco dei contenuti o la rete possono impedirlo. Riprova più tardi o con un altro browser.", + "webPushServiceRefusedBrave": "Il servizio push di Brave ha rifiutato la registrazione. Brave tiene il push disattivato di serie: apri brave://settings/privacy, attiva l'uso dei servizi Google per la messaggistica push e tocca di nuovo «Attiva push».", + "webPushHelpLink": "Aiuto sul push del browser", "codexConnected": "ChatGPT connesso correttamente! Insights è ora attivo.", "codexDisconnected": "Connessione a ChatGPT rimossa.", "codexConnectionFailed": "Connessione a ChatGPT non riuscita. Riprova.", diff --git a/messages/ko.json b/messages/ko.json index 9432b7efc..fc0e19afb 100644 --- a/messages/ko.json +++ b/messages/ko.json @@ -6429,6 +6429,9 @@ "webPushSubscribed": "푸시 알림을 켰어요!", "webPushUnsubscribed": "푸시 알림을 껐어요.", "webPushSubscribeFailed": "켜지 못했어요", + "webPushServiceRefused": "브라우저의 푸시 서비스가 등록을 거부해서 푸시를 켜지 못했어요. 브라우저가 푸시 서비스에 연결할 수 있어야 하는데, 개인정보 보호 설정이나 차단 프로그램, 네트워크가 이를 막을 수 있어요. 나중에 다시 시도하거나 다른 브라우저에서 시도해 주세요.", + "webPushServiceRefusedBrave": "Brave의 푸시 서비스가 등록을 거부했어요. Brave는 기본적으로 푸시가 꺼져 있어요. brave://settings/privacy를 열고 푸시 메시지에 Google 서비스를 사용하는 설정을 켠 다음 '푸시 켜기'를 다시 눌러 주세요.", + "webPushHelpLink": "브라우저 푸시 도움말", "codexConnected": "ChatGPT를 연결했어요! 이제 인사이트를 쓸 수 있어요.", "codexDisconnected": "ChatGPT 연결을 해제했어요.", "codexConnectionFailed": "ChatGPT 연결에 실패했어요. 다시 시도해 주세요.", diff --git a/messages/nl.json b/messages/nl.json index f3d6374b3..568855935 100644 --- a/messages/nl.json +++ b/messages/nl.json @@ -6429,6 +6429,9 @@ "webPushSubscribed": "Pushmeldingen ingeschakeld!", "webPushUnsubscribed": "Pushmeldingen uitgeschakeld.", "webPushSubscribeFailed": "Activeren mislukt", + "webPushServiceRefused": "De pushdienst van je browser heeft de registratie geweigerd, dus push kon niet worden ingeschakeld. De browser moet zijn pushdienst kunnen bereiken, en een privacyinstelling, een blocker of het netwerk kan dat tegenhouden. Probeer het later opnieuw of in een andere browser.", + "webPushServiceRefusedBrave": "De pushdienst van Brave heeft de registratie geweigerd. Brave zet push standaard uit: open brave://settings/privacy, zet het gebruik van Google-services voor pushberichten aan en tik daarna opnieuw op 'Push inschakelen'.", + "webPushHelpLink": "Hulp bij browserpush", "codexConnected": "ChatGPT gekoppeld! Inzichten zijn nu actief.", "codexDisconnected": "Koppeling met ChatGPT verwijderd.", "codexConnectionFailed": "Koppelen met ChatGPT is mislukt. Probeer het opnieuw.", diff --git a/messages/pl.json b/messages/pl.json index bc156a6e5..53c7e2046 100644 --- a/messages/pl.json +++ b/messages/pl.json @@ -6429,6 +6429,9 @@ "webPushSubscribed": "Powiadomienia push włączone!", "webPushUnsubscribed": "Powiadomienia push wyłączone.", "webPushSubscribeFailed": "Aktywacja nie powiodła się", + "webPushServiceRefused": "Usługa push Twojej przeglądarki odrzuciła rejestrację, więc nie udało się włączyć push. Przeglądarka musi mieć dostęp do swojej usługi push, a może to zablokować ustawienie prywatności, bloker albo sieć. Spróbuj ponownie później albo w innej przeglądarce.", + "webPushServiceRefusedBrave": "Usługa push przeglądarki Brave odrzuciła rejestrację. Brave domyślnie ma wyłączony push: otwórz brave://settings/privacy, włącz korzystanie z usług Google do wiadomości push i stuknij ponownie „Włącz push”.", + "webPushHelpLink": "Pomoc dotycząca push w przeglądarce", "codexConnected": "ChatGPT połączony pomyślnie! Insights jest teraz aktywny.", "codexDisconnected": "Połączenie z ChatGPT usunięte.", "codexConnectionFailed": "Połączenie z ChatGPT nie powiodło się. Spróbuj ponownie.", diff --git a/messages/pt-BR.json b/messages/pt-BR.json index 630e46106..1c4729025 100644 --- a/messages/pt-BR.json +++ b/messages/pt-BR.json @@ -6429,6 +6429,9 @@ "webPushSubscribed": "Notificações push ativadas!", "webPushUnsubscribed": "Notificações push desativadas.", "webPushSubscribeFailed": "Falha na ativação", + "webPushServiceRefused": "O serviço de push do seu navegador recusou o registro, então não foi possível ativar o push. O navegador precisa alcançar o serviço de push dele, e uma configuração de privacidade, um bloqueador ou a rede podem impedir isso. Tente de novo mais tarde ou em outro navegador.", + "webPushServiceRefusedBrave": "O serviço de push do Brave recusou o registro. O Brave vem com o push desligado: abra brave://settings/privacy, ative o uso dos serviços do Google para mensagens push e toque de novo em “Ativar push”.", + "webPushHelpLink": "Ajuda com push no navegador", "codexConnected": "ChatGPT conectado com sucesso! Os insights agora estão ativos.", "codexDisconnected": "Conexão com o ChatGPT removida.", "codexConnectionFailed": "Falha na conexão com o ChatGPT. Tente novamente.", diff --git a/messages/ru.json b/messages/ru.json index bdfcdf495..17c31b407 100644 --- a/messages/ru.json +++ b/messages/ru.json @@ -6429,6 +6429,9 @@ "webPushSubscribed": "Push-уведомления включены!", "webPushUnsubscribed": "Push-уведомления выключены.", "webPushSubscribeFailed": "Не удалось активировать", + "webPushServiceRefused": "Push-сервис вашего браузера отклонил регистрацию, поэтому push не удалось включить. Браузер должен иметь доступ к своему push-сервису, а этому может помешать настройка конфиденциальности, блокировщик или сеть. Попробуйте позже или в другом браузере.", + "webPushServiceRefusedBrave": "Push-сервис Brave отклонил регистрацию. В Brave push по умолчанию выключен: откройте brave://settings/privacy, включите использование сервисов Google для push-сообщений и снова нажмите «Включить push».", + "webPushHelpLink": "Справка по push в браузере", "codexConnected": "ChatGPT успешно подключён! Аналитика теперь активна.", "codexDisconnected": "Подключение ChatGPT удалено.", "codexConnectionFailed": "Не удалось подключить ChatGPT. Попробуйте снова.", diff --git a/src/components/layout/__tests__/account-switcher-menu.browser.test.tsx b/src/components/layout/__tests__/account-switcher-menu.browser.test.tsx new file mode 100644 index 000000000..7b64edd10 --- /dev/null +++ b/src/components/layout/__tests__/account-switcher-menu.browser.test.tsx @@ -0,0 +1,182 @@ +/** + * The record switcher inside the account menu, at phone and desktop width + * (#1372). + * + * On a phone the account menu sits against the right edge of the top bar and + * takes most of the width. The records used to open in a side sub-menu that + * had room on neither side, so it ran off the screen and cut the names off. + * Below `sm` they now unfold inside the account menu itself; at desktop width + * the side sub-menu stays. + * + * The harness mounts the switcher the way the top bar does: a right-aligned + * trigger, `align="end"`, a `w-60` menu. + * + * Mutation check, run: forcing the side sub-menu at every width (the + * component before the fix) turns "unfolds the records inside the account + * menu" red, because the entries land outside the viewport and outside the + * account menu. + */ +import { afterEach, describe, expect, it, vi } from "vitest"; +import { page, userEvent } from "vitest/browser"; + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; +import type { AccountAccessEntry } from "@/lib/sharing/account-access-view"; + +import { renderWithApp } from "../../../../tests/browser/render"; + +const switchTo = vi.fn(); +const mutate = vi.fn(); + +vi.mock("@/hooks/use-account-switch", () => ({ + useAccountSwitch: () => ({ mutate, switchTo, isPending: false }), +})); + +import { AccountSwitcherMenuItems } from "../account-switcher-menu"; + +function entry( + accountId: string, + fullName: string, + recordKind: "shared" | "managed", +): AccountAccessEntry { + return { + accountId, + username: accountId, + displayName: null, + fullName, + access: "read", + level: "read", + sections: null, + recordKind, + canWrite: false, + writableDomains: [], + manageableDomains: [], + }; +} + +const ACCOUNTS = [ + entry("acct-a", "Alexandra Konstantinopoulou-Wetherington", "shared"), + entry("acct-b", "Maximilian Oberhausen", "managed"), +]; + +async function mountMenu() { + await renderWithApp( +
+ + Account + + Settings + + + +
, + { + user: { + accountAccess: { accounts: ACCOUNTS, active: null, canSwitch: true }, + }, + }, + ); + await page.getByRole("button", { name: "Account" }).click(); + await expect + .poll(() => + document.querySelector('[data-slot="account-switcher-trigger"]'), + ) + .toBeTruthy(); +} + +function trigger(): HTMLElement { + return document.querySelector( + '[data-slot="account-switcher-trigger"]', + )!; +} + +function entries(): HTMLElement[] { + return [ + ...document.querySelectorAll( + '[data-slot="account-switcher-entry"]', + ), + ]; +} + +afterEach(() => { + switchTo.mockClear(); + mutate.mockClear(); +}); + +describe("the record switcher at phone width", () => { + it("unfolds the records inside the account menu", async () => { + await page.viewport(390, 844); + await mountMenu(); + + await userEvent.click(trigger()); + await expect.poll(() => entries().length).toBe(ACCOUNTS.length); + + const accountMenu = trigger().closest('[role="menu"]'); + for (const row of entries()) { + // In the account menu, not in a menu of its own beside it. + expect(row.closest('[role="menu"]')).toBe(accountMenu); + const box = row.getBoundingClientRect(); + expect(box.left).toBeGreaterThanOrEqual(0); + expect(box.right).toBeLessThanOrEqual(window.innerWidth); + // A finger-sized row. + expect(box.height).toBeGreaterThanOrEqual(44); + } + expect(document.querySelectorAll('[role="menu"]')).toHaveLength(1); + expect(trigger().getAttribute("aria-expanded")).toBe("true"); + }); + + it("keeps the account menu open while the list unfolds and folds", async () => { + await page.viewport(390, 844); + await mountMenu(); + + expect(entries()).toHaveLength(0); + expect(trigger().getAttribute("aria-expanded")).toBe("false"); + + await userEvent.click(trigger()); + await expect.poll(() => entries().length).toBe(ACCOUNTS.length); + + await userEvent.click(trigger()); + await expect.poll(() => entries().length).toBe(0); + // The account menu itself is still there. + expect(trigger()).toBeTruthy(); + expect(trigger().getAttribute("aria-expanded")).toBe("false"); + }); + + it("opens the chosen record from the inline list", async () => { + await page.viewport(390, 844); + await mountMenu(); + + await userEvent.click(trigger()); + await expect.poll(() => entries().length).toBe(ACCOUNTS.length); + await userEvent.click( + document.querySelector( + '[data-slot="account-switcher-entry"][data-account-id="acct-b"]', + )!, + ); + + expect(switchTo).toHaveBeenCalledTimes(1); + expect(switchTo.mock.calls[0][0]).toBe("acct-b"); + }); +}); + +describe("the record switcher at desktop width", () => { + it("keeps the side sub-menu", async () => { + await page.viewport(1280, 900); + await mountMenu(); + + expect(trigger().hasAttribute("data-presentation")).toBe(false); + await userEvent.click(trigger()); + await expect.poll(() => entries().length).toBe(ACCOUNTS.length); + + const accountMenu = trigger().closest('[role="menu"]'); + for (const row of entries()) { + const menu = row.closest('[role="menu"]'); + expect(menu).toBeTruthy(); + expect(menu).not.toBe(accountMenu); + } + }); +}); diff --git a/src/components/layout/account-switcher-menu.tsx b/src/components/layout/account-switcher-menu.tsx index 54abd94ca..98f2e98f0 100644 --- a/src/components/layout/account-switcher-menu.tsx +++ b/src/components/layout/account-switcher-menu.tsx @@ -1,8 +1,10 @@ "use client"; -import { Check, Loader2, Users } from "lucide-react"; +import { useId, useState } from "react"; +import { Check, ChevronDown, Loader2, Users } from "lucide-react"; import { + DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuSub, @@ -11,10 +13,15 @@ import { } from "@/components/ui/dropdown-menu"; import { useAccountSwitch } from "@/hooks/use-account-switch"; import { useAuth } from "@/hooks/use-auth"; +import { useIsMobile } from "@/hooks/use-is-mobile"; import { useTranslations } from "@/lib/i18n/context"; import { resolveRecordPresentation } from "@/lib/navigation/record-presentation"; import { sharedRecordLandingHref } from "@/lib/navigation/shared-record"; -import { accountLabel } from "@/lib/sharing/account-access-view"; +import { + accountLabel, + type AccountAccess, +} from "@/lib/sharing/account-access-view"; +import { cn } from "@/lib/utils"; /** * v1.36.0 — the switcher, as a slice of the user menu. @@ -35,16 +42,83 @@ import { accountLabel } from "@/lib/sharing/account-access-view"; * "Your own record" is a first-class entry rather than only a banner action: * the way out has to be reachable from the same menu as the way in, because * that is where somebody will look for it. + * + * Below the `sm` breakpoint the records open inside the account menu rather + * than in a sub-menu beside it. The phone's account menu sits against the + * right edge and takes most of the width; a 240 px sub-menu has room on + * neither side, and Radix only shifts a side menu along its own axis, so it + * ran off the screen and cut the names off. The trigger keeps its slot and the + * list keeps `account-switcher-menu`, so a journey that taps the trigger and + * then an entry reads the same at either width. */ export function AccountSwitcherMenuItems() { const { user } = useAuth(); const { t } = useTranslations(); const switchAccount = useAccountSwitch(); + const inline = useIsMobile("sm"); + const [expanded, setExpanded] = useState(false); + const listId = useId(); const access = user?.accountAccess; if (!access?.canSwitch) return null; const activeId = access.active?.accountId ?? null; + const label = t("recordSharing.switcher.label"); + const icon = switchAccount.isPending ? ( +