Separate Android installation from pairing instructions

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(<App />);
+    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 = [

src/App.tsx

@@ -87,7 +87,11 @@ function AndroidConnection({ state, onDisconnect }: { state: AppState; onDisconn
       {state.bluetooth === "connected" && <button className="secondary" onClick={onDisconnect}>Disconnect</button>}
     </section>
     <p>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.</p>
-    <div className="android-download"><div><h2>Connect Switchify for Android</h2><p>Install Switchify, select this computer, then approve the pairing request only if the codes match in both apps.</p><a className="secondary" href={androidDownloadUrl} target="_blank" rel="noreferrer">Open Google Play</a></div><img src={androidQrUrl} alt="QR code for Switchify on Google Play" /></div>
+    <div className="android-download">
+      <div><h2>Install Switchify for Android</h2><p>Need the Android app? Scan the QR code or open Google Play to install Switchify.</p><a className="secondary" href={androidDownloadUrl} target="_blank" rel="noreferrer">Open Google Play</a></div>
+      <figure><img src={androidQrUrl} alt="QR code for Switchify on Google Play" /><figcaption>Scan to open Google Play and install Switchify.</figcaption></figure>
+    </div>
+    <section className="android-pairing"><h2>Already installed? Connect to this computer</h2><ol><li>Open Switchify on your Android device and select this computer.</li><li>Compare the pairing codes shown in both apps.</li><li>Approve the pairing request on this computer only if the codes match.</li></ol></section>
   </section>;
 }
 

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); }