Remove non-functional "Add to RoadFlare" share-page button#6
Merged
Conversation
The button set href to nostr:<npub>, but RoadFlare iOS does not register any URL scheme today, so tapping it never opened the app — best case it errored in Safari, worst case some unrelated Nostr client handled it. The copy button on Account ID and the QR code already provide the working paths for adding a driver/rider; the broken CTA only created confusion. A driver-only replacement using a future roadflared: scheme is drafted in #4 (pairs with variablefate/roadflare-ios#64). A rider-only replacement using roadflarer: is drafted in #5, waiting on a future iOS driver app. This commit clears the way for both by removing the placeholder element and its JS handler. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This was referenced May 11, 2026
variablefate
added a commit
that referenced
this pull request
May 12, 2026
…red:) (#10) * feat(share): add Add-to-RoadFlare button on driver shares (roadflared:) Closes #2. Supersedes draft #4. Re-introduces the in-page "Add to RoadFlare" CTA on `/share/d/<npub>`, 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/<npub>"` 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/<npub>`). Rider shares (`/share/r/<npub>`) 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/<real-npub>` → button visible above store buttons, href is `roadflared:npub1...?name=...` with display name URL-encoded correctly - [ ] Visit `/share/d/<npub-without-display-name>` → href is `roadflared:npub1...` (no name param) - [ ] Visit `/share/r/<npub>` → 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) * fix(share): eliminate horizontal scroll + widen QR on mobile 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) * fix(share): use .hidden class on driver button + harden name overflow Three pass-2 findings on top of the original PR: ## 1. Driver button visible on rider shares (high) The `<a class="btn btn-primary" hidden>` element used the HTML `hidden` attribute, which CSS `display: flex` on `.btn` overrides — so the button was rendered visible on every share page, including rider shares where the JS never sets the `roadflared:` href. Result: riders saw a primary "Add to RoadFlare" CTA pointing at `#`. Switched to the file's existing `.hidden` class convention (used at lines 329, 340, 347, 375, 384) — which lives later in the stylesheet than `.btn` so source-order wins. JS now toggles via `classList.remove('hidden')` instead of the broken `.hidden = false` property. ## 2. Long Nostr display names re-trigger horizontal scroll (medium) `.profile-name` and `.vehicle-text` had no `overflow-wrap` rule. A long unbroken display_name or vehicle string from a kind-0 event would push the card past the viewport — defeating the npub-truncation fix from the previous commit. Added `overflow-wrap: break-word` to both (broader browser compat than `anywhere`, same behavior for our use case). ## 3. `min-width: 0` looked deletable (low) Added an inline comment explaining the flex-shrink invariant so a future maintainer doesn't strip it during a "remove unused rules" pass. 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: variablefate <variablefate@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The "Add to RoadFlare" primary CTA on
/share/d/<npub>and/share/r/<npub>set its href tonostr:<npub>, but RoadFlare iOS does not register thenostr:URL scheme — so tapping the button either errored in Safari or dispatched to some unrelated Nostr client. Either way, it never opened RoadFlare. This PR removes the placeholder element and the JS that sets its href.Users already have two functional paths for adding a driver/rider:
The button's behavior on the live site has never been useful in a way those two flows don't already cover.
Follow-up
Two draft PRs are already open with scheme-specific replacements, each waiting on matching app-side support:
roadflared:<npub>, blocked on variablefate/roadflare-ios#64 (RoadFlare iOS registering the scheme)roadflarer:<npub>, blocked on a future iOS driver appBoth draft PRs are designed to cleanly rebase onto the post-merge state of this PR (they add new elements with new IDs rather than modifying the ones deleted here — non-conflicting in any merge order).
Diff
404.html:<a class="btn btn-primary" id="add-btn" href="#">Add to RoadFlare</a>from.actions// Deep link/document.getElementById('add-btn').href = 'nostr:' + npub;4 lines deleted, 0 added. No CSS / config / CNAME touched.
Test plan
/share/d/<real-npub>— profile renders, QR + copy button work, App Store button routes correctly, no "Add to RoadFlare" button present/share/r/<real-npub>— same as abovedocument.getElementById('add-btn')null-ref errors)🤖 Generated with Claude Code