diff --git a/apps/marketing/components/OkCodeLogo.tsx b/apps/marketing/components/OkCodeLogo.tsx index a90024c81..2e1c5e699 100644 --- a/apps/marketing/components/OkCodeLogo.tsx +++ b/apps/marketing/components/OkCodeLogo.tsx @@ -9,17 +9,8 @@ type OkCodeLogoProps = { export function OkCodeMark({ className = "w-6 h-6" }: OkCodeMarkProps) { return ( -
diff --git a/apps/web/src/components/mobile/MobilePairingScreen.tsx b/apps/web/src/components/mobile/MobilePairingScreen.tsx index a9522f9b2..d62748f7d 100644 --- a/apps/web/src/components/mobile/MobilePairingScreen.tsx +++ b/apps/web/src/components/mobile/MobilePairingScreen.tsx @@ -97,8 +97,8 @@ export function MobilePairingScreen() {

Pair this device

- Open Settings → Mobile Companion on your desktop to show a QR - pairing code, then copy the link and paste it below. + Open Settings → Mobile Companion on your desktop to generate a + pairing link, then copy the link and paste it below.

diff --git a/apps/web/src/components/mobile/PairingQrCode.tsx b/apps/web/src/components/mobile/PairingLink.tsx similarity index 68% rename from apps/web/src/components/mobile/PairingQrCode.tsx rename to apps/web/src/components/mobile/PairingLink.tsx index 935060dde..118d9b783 100644 --- a/apps/web/src/components/mobile/PairingQrCode.tsx +++ b/apps/web/src/components/mobile/PairingLink.tsx @@ -1,8 +1,8 @@ import { useCallback, useEffect, useState } from "react"; -import { generateQrSvg } from "../../lib/qrCode"; import { resolveServerHttpOrigin } from "../../lib/runtimeBridge"; import { Button } from "../ui/button"; +import { Input } from "../ui/input"; interface PairingInfo { pairingUrl: string; @@ -11,17 +11,14 @@ interface PairingInfo { } /** - * PairingQrCode renders a QR code on the desktop web app that mobile devices - * can scan to pair. It fetches a short-lived pairing link from the server's - * `/api/pairing` endpoint and displays it as a scannable QR code. - * - * The QR code auto-refreshes when the pairing link expires. + * PairingLink renders the desktop pairing link used to connect a mobile + * device. It fetches a short-lived pairing link from the server's + * `/api/pairing` endpoint and lets the user copy it directly. */ -export function PairingQrCode() { +export function PairingLink() { const [pairing, setPairing] = useState(null); const [error, setError] = useState(null); const [loading, setLoading] = useState(false); - const [svgHtml, setSvgHtml] = useState(null); const [expiresIn, setExpiresIn] = useState(null); const [copied, setCopied] = useState(false); @@ -39,26 +36,21 @@ export function PairingQrCode() { if ("error" in data) { setError(data.error as unknown as string); setPairing(null); - setSvgHtml(null); return; } setPairing(data); - setSvgHtml(generateQrSvg(data.pairingUrl)); } catch (err) { setError(err instanceof Error ? err.message : "Failed to generate pairing link."); setPairing(null); - setSvgHtml(null); } finally { setLoading(false); } }, []); - // Fetch on mount useEffect(() => { void fetchPairingLink(); }, [fetchPairingLink]); - // Countdown timer useEffect(() => { if (!pairing?.expiresAt) { setExpiresIn(null); @@ -72,7 +64,6 @@ export function PairingQrCode() { ); setExpiresIn(remaining); if (remaining <= 0) { - // Auto-refresh when expired void fetchPairingLink(); } }; @@ -89,7 +80,7 @@ export function PairingQrCode() { setCopied(true); setTimeout(() => setCopied(false), 2000); } catch { - // Fallback: select the text in the details element + // Fallback: select the text in the input below. } }; @@ -100,11 +91,11 @@ export function PairingQrCode() { }; return ( -
-

Scan with OK Code mobile app

+
+

Pair with a mobile device

{error ? ( -
+

{error}

- ) : svgHtml ? ( + ) : pairing?.pairingUrl ? ( <> -
- {expiresIn !== null && ( +

- {expiresIn > 0 ? <>Expires in {formatTime(expiresIn)} : <>Refreshing...} + Copy this link and open it on the mobile app or device you want to pair.

- )} -
+ event.currentTarget.select()} + className="font-mono text-xs" + /> +
+
@@ -142,13 +133,14 @@ export function PairingQrCode() { {loading ? "Generating..." : "Refresh"}
-

- Scan the QR code with your phone camera, or copy the link and paste it in the mobile - app. -

+ {expiresIn !== null ? ( +

+ {expiresIn > 0 ? <>Expires in {formatTime(expiresIn)} : <>Refreshing...} +

+ ) : null} ) : loading ? ( -
+

Generating...

) : null} diff --git a/apps/web/src/components/skills/SkillsPage.tsx b/apps/web/src/components/skills/SkillsPage.tsx index cc70f1389..7a11481db 100644 --- a/apps/web/src/components/skills/SkillsPage.tsx +++ b/apps/web/src/components/skills/SkillsPage.tsx @@ -510,11 +510,10 @@ export function SkillsPage(props: {
-

- Unable to load skills -

+

Unable to load skills

- {queryErrorMessage ?? "The skills service is unavailable. Check that the server is running."} + {queryErrorMessage ?? + "The skills service is unavailable. Check that the server is running."}