From d4bbd1c411dc0b617704a6131f4a0a09fccb2135 Mon Sep 17 00:00:00 2001 From: variablefate Date: Mon, 11 May 2026 15:18:00 -0700 Subject: [PATCH 1/3] feat(share): add Add-to-RoadFlare button on driver shares (roadflared:) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Closes #2. Supersedes draft #4. Re-introduces the in-page "Add to RoadFlare" CTA on `/share/d/`, deleted in #6 for being non-functional pre-iOS-1.0. With variablefate/roadflare-ios#66 (roadflared: URL scheme) and #113 (Universal Links) both shipped, the button is now functional via the custom scheme. ## Why roadflared: and not https:// A button with `href="https://roadflare.app/share/d/"` on the share page itself wouldn't fire — Safari treats same-URL clicks as no-ops, so no Universal Link handoff happens. The custom scheme is the deterministic way to invoke the app from this surface. ## Why a button at all (vs. Smart App Banner only) The Smart App Banner from #8 only renders in iOS Safari. This button covers the surfaces it doesn't: - Chrome / Firefox / DuckDuckGo on iOS - Any browser on Android - Desktop browsers when the page is shared cross-device - Other Nostr-aware clients (drivestr, ridestr) where the user has the RoadFlare app installed but isn't on Safari `roadflared:` is registered system-wide on iOS once RoadFlare is installed, so the dispatch works regardless of browser. Browsers without a handler (desktop, Android-without-app) get the normal "no app to handle this" behavior — graceful, since the App Store buttons below provide install. ## Visibility Driver shares only (`/share/d/`). Rider shares (`/share/r/`) remain untouched — no rider-side iOS app registers a handler yet, so showing the button there would dead-tap. Tracked in #3. ## Test plan - [ ] Visit `/share/d/` → button visible above store buttons, href is `roadflared:npub1...?name=...` with display name URL-encoded correctly - [ ] Visit `/share/d/` → href is `roadflared:npub1...` (no name param) - [ ] Visit `/share/r/` → button NOT visible - [ ] Tap on iPhone with RoadFlare installed → Add Driver sheet opens pre-filled - [ ] Tap on Android / desktop → graceful no-app dialog (App Store buttons still available below) - [ ] Smart App Banner from #8 still surfaces independently on iOS Safari 🤖 Generated with [Claude Code](https://claude.com/claude-code) --- 404.html | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/404.html b/404.html index c67e8ab..718295d 100644 --- a/404.html +++ b/404.html @@ -356,6 +356,7 @@
+
App Store Google Play @@ -1013,6 +1014,19 @@ }).catch(() => {}); }); + // Driver deep link: roadflared:[?name=...] — handled by RoadFlare iOS. + // Custom scheme (vs. https://) so a same-page tap deterministically launches + // the app — Universal Links don't fire on same-URL clicks in Safari, and this + // button also serves non-Safari browsers (Chrome on iOS/Android, desktop) where + // the Smart App Banner doesn't render. + if (isDriver) { + const driverBtn = document.getElementById('add-driver-btn'); + const realName = profile.display_name || profile.name || ''; + const nameParam = realName ? '?name=' + encodeURIComponent(realName) : ''; + driverBtn.href = 'roadflared:' + npub + nameParam; + driverBtn.hidden = false; + } + // Google Play placeholder (Android still in development) document.getElementById('playstore-btn').href = '#'; document.getElementById('playstore-btn').textContent = 'Google Play (coming soon)'; From 1d43179dcc577c349c1eaf23dc7b9ae5a7c131bf Mon Sep 17 00:00:00 2001 From: variablefate Date: Mon, 11 May 2026 15:27:30 -0700 Subject: [PATCH 2/3] fix(share): eliminate horizontal scroll + widen QR on mobile MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Several minor fixes to make the share page sit cleanly on a single mobile viewport without any horizontal scrolling. No layout / design changes — same vertical order, same components, same colors. ## Horizontal scroll fix The `.account-id-btn .npub-text` flex item had `white-space: nowrap` + `text-overflow: ellipsis` but no `min-width: 0`. The flex default of `min-width: auto` won't shrink a child below its intrinsic content width — and the npub is 63 characters of unbreakable monospace, so the button refused to truncate and pushed past the viewport. `min-width: 0` lets the flex child shrink and the ellipsis kick in. Pairs with `overflow-x: hidden` on `body` as a safety net so any future stray-wide element won't reintroduce sideways scroll. ## QR widening `generateQR` was called with size 160 — visibly tiny on a 390px+ viewport. Bumped to 240 (the canvas `width`/`height` attributes matched, so initial layout doesn't shift). The canvas now also has `max-width: 100%; height: auto;` so it scales down gracefully on iPhone SE (320px viewport, ~272px content area). ## Container padding on very small screens Container padding stays at `2rem 1.5rem` on all "normal" phones. For ≤360px viewports (iPhone SE / Mini), reduce horizontal padding to `1rem` — gains 16px of usable width without visibly changing margins on larger devices. 🤖 Generated with [Claude Code](https://claude.com/claude-code) --- 404.html | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/404.html b/404.html index 718295d..c57df7b 100644 --- a/404.html +++ b/404.html @@ -50,6 +50,7 @@ min-height: 100vh; display: flex; flex-direction: column; + overflow-x: hidden; } .container { max-width: 480px; @@ -59,6 +60,9 @@ display: flex; flex-direction: column; } + @media (max-width: 360px) { + .container { padding: 2rem 1rem; } + } /* Header */ .header { @@ -151,6 +155,8 @@ } .qr-section canvas { border-radius: 12px; + max-width: 100%; + height: auto; } .qr-label { font-size: 0.75rem; @@ -190,6 +196,7 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + min-width: 0; } .account-id-btn .copy-icon { font-size: 0.75rem; @@ -343,7 +350,7 @@
- +
Scan to view this profile
@@ -996,7 +1003,7 @@ // QR code const pageUrl = window.location.href; try { - generateQR(pageUrl, document.getElementById('qr-canvas'), 160); + generateQR(pageUrl, document.getElementById('qr-canvas'), 240); } catch (_) {} // Account ID (tap to copy) From 843eb38a4d54d03655f26498101b8a0863c930ac Mon Sep 17 00:00:00 2001 From: variablefate Date: Mon, 11 May 2026 18:31:51 -0700 Subject: [PATCH 3/3] fix(share): use .hidden class on driver button + harden name overflow MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Three pass-2 findings on top of the original PR: ## 1. Driver button visible on rider shares (high) The `
+
App Store Google Play @@ -1031,7 +1033,7 @@ const realName = profile.display_name || profile.name || ''; const nameParam = realName ? '?name=' + encodeURIComponent(realName) : ''; driverBtn.href = 'roadflared:' + npub + nameParam; - driverBtn.hidden = false; + driverBtn.classList.remove('hidden'); } // Google Play placeholder (Android still in development)