Skip to content

Add shareable map links, tutorial fixes, and mobile mode spec#60

Merged
jeremymanning merged 5 commits intomainfrom
009-fix-mobile-mode
Mar 12, 2026
Merged

Add shareable map links, tutorial fixes, and mobile mode spec#60
jeremymanning merged 5 commits intomainfrom
009-fix-mobile-mode

Conversation

@jeremymanning
Copy link
Copy Markdown
Member

Summary

  • Shareable map links: Token encoding/decoding for map state, shared view mode with read-only chrome, social sharing (copy link, Facebook, Instagram)
  • Tutorial polish: Auto-advance arrow points from left of toggle switch; question mode buttons compacted to icon-only with tooltips
  • Share text simplified: Removed "top areas" annotation, now uses clean "Here's what I know: " format
  • OG meta tags fixed: Preview image moved to public/ for stable Vite build URLs
  • Mobile mode spec: Full speckit specification for 009-fix-mobile-mode (header button grouping, swipe-reveal overflow, drawer pull centering)

Test plan

  • Unit tests pass (npm test)
  • Playwright core flow tests pass (chromium)
  • Share modal generates valid token URLs
  • Shared view mode loads and displays map correctly
  • OG preview image accessible at /mapper/og-preview.png
  • Validate OG previews on social platform debuggers (needs live deploy)

🤖 Generated with Claude Code

Co-Authored-By: Claude Opus 4.6 noreply@anthropic.com

jeremymanning and others added 5 commits March 12, 2026 12:54
- Replace text labels with icon-only circular buttons (baby, flame, bullseye)
- Move auto-advance toggle into the same row (margin-left: auto)
- All mode controls now fit on a single line below the progress bar
- Update tutorial message to reference icons instead of button text

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Changed arrowTarget from .auto-advance-label to .auto-advance-track
and arrowSide from 'right' to 'left' so the arrow appears to the
left of the switch instead of being cut off on the right.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…sharing

- Token codec: sparse binary format + pako deflate + base64url for compact URLs
- Question index: deterministic sort by (domain_ids[0], id) for stable encoding
- Shared view: reuses normal app boot, injects decoded responses, hides interactive chrome
- Share modal: Copy Link, Facebook, Instagram, LinkedIn, X/Twitter, Bluesky buttons
- All social share buttons use token URL with encoded responses
- OG meta tags + Twitter Card for link previews (1200x630 preview image)
- Logo click returns to welcome screen in all views
- Shared view preserves user's own localStorage responses
- Empty tokens supported (shows blank map)
- 22 unit tests for token codec and question index

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Write feature spec for 009-fix-mobile-mode: header button grouping
  with swipe-reveal overflow, drawer pull centering, emulator testing
- Add requirements quality checklist (all items pass)
- Simplify share text: remove "top areas" annotation, use
  "Here's what I know: <link>" format instead

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Copy og-preview.png to public/ so Vite serves it at a predictable
  path instead of hashing it in dist/assets/
- Update OG and Twitter Card meta tags to reference /mapper/og-preview.png

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@jeremymanning jeremymanning merged commit f7cf3a5 into main Mar 12, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant