diff --git a/src/App.test.tsx b/src/App.test.tsx index 5d35f7b2..26b59af9 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -181,6 +181,22 @@ describe("Switchify PC shell", () => { expect(within(footer as HTMLElement).queryByRole("button")).not.toBeInTheDocument(); }); + it("distinguishes the Android install QR from pairing for existing users", async () => { + render(); + await screen.findByRole("heading", { name: "Switchify PC" }); + fireEvent.click(screen.getByRole("button", { name: "Android connection" })); + expect(screen.getByRole("heading", { name: "Install Switchify for Android" })).toBeInTheDocument(); + const qr = screen.getByRole("img", { name: "QR code for Switchify on Google Play" }); + expect(qr.closest("figure")).toHaveTextContent("Scan to open Google Play and install Switchify."); + expect(screen.getByRole("link", { name: "Open Google Play" })).toHaveAttribute("href", expect.stringContaining("play.google.com")); + const pairing = screen.getByRole("heading", { name: "Already installed? Connect to this computer" }).closest("section")!; + expect(within(pairing).getAllByRole("listitem").map((item) => item.textContent)).toEqual([ + "Open Switchify on your Android device and select this computer.", + "Compare the pairing codes shown in both apps.", + "Approve the pairing request on this computer only if the codes match.", + ]); + }); + it("shows when paired devices last connected", async () => { const connectedAt = Date.UTC(2026, 7, 22, 12, 30); browserState.pairedDevices = [ diff --git a/src/App.tsx b/src/App.tsx index 8de86337..7a260ea6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -87,7 +87,11 @@ function AndroidConnection({ state, onDisconnect }: { state: AppState; onDisconn {state.bluetooth === "connected" && }

Android connection is optional. Bluetooth advertises automatically; local switches do not need an Android device. Connecting an Android device pauses local scanning until it disconnects.

-

Connect Switchify for Android

Install Switchify, select this computer, then approve the pairing request only if the codes match in both apps.

Open Google Play
QR code for Switchify on Google Play
+
+

Install Switchify for Android

Need the Android app? Scan the QR code or open Google Play to install Switchify.

Open Google Play
+
QR code for Switchify on Google Play
Scan to open Google Play and install Switchify.
+
+

Already installed? Connect to this computer

  1. Open Switchify on your Android device and select this computer.
  2. Compare the pairing codes shown in both apps.
  3. Approve the pairing request on this computer only if the codes match.
; } diff --git a/src/styles.css b/src/styles.css index 13a39be7..bf3892b7 100644 --- a/src/styles.css +++ b/src/styles.css @@ -187,6 +187,10 @@ button:disabled { cursor: default; opacity: 0.55; } .setup-statuses article { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; min-height: 92px; border-bottom: 1px solid var(--border); padding: 14px 4px; } .setup-statuses h3 { font-size: 14px; } .android-download { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 36px; } +.android-download figure { margin: 0; max-width: 210px; } +.android-download figcaption { margin-top: 8px; color: var(--muted); font-size: 13px; } +.android-pairing { margin-top: 28px; } +.android-pairing ol { padding-left: 24px; color: var(--muted); line-height: 1.6; } .android-download a { width: max-content; margin-top: 22px; text-decoration: none; } .android-download img { width: 190px; height: 190px; border: 1px solid var(--border); border-radius: 9px; padding: 10px; background: white; image-rendering: crisp-edges; } .setup-pairings { margin-top: 20px; border-top: 1px solid var(--border); }