Add swipeable floating event cards for mobile

[Copilot]

• Add #event-card floating bottom-sheet with live drag, peek card, and velocity animation
• Keyboard ArrowLeft/ArrowRight navigation
• showEventCard() opens the infoWindow for the event at the same time as the card
• finishNavigation() updates the infoWindow to the new event after each swipe/keyboard navigation
• "Details" button (unfold-more icon ↕) toggles the <details> section inside the already-open infoWindow
• hideEventCard() also closes the infoWindow when the card is dismissed
• Calendar button uses the same <add-to-calendar-button> web component as the infoWindow (Apple, Google, iCal, Outlook.com)
• Enabling card mode while an event is selected immediately shows the card for that event
• Redact hardcoded Spotify CLIENT_ID and CLIENT_SECRET from 19hz/map.js (and preview copy)
• Reduce card nav padding — ‹/› buttons now embedded closer to the corners and top of the card
• Cards toggle icon switches between bottom-panel-open (cards OFF) and bottom-panel-close with downward chevron (cards ON) to reflect current state; Details button uses unfold-more icon

Cards OFF	Cards ON

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Add cards that people can swipe through on mobile</issue_title>
<issue_description>when an event is selected add cards that appear to float above the map near the bottom of the screen that I can swipe left and right to change selected event or swipe down to close the floating card. I should be able to toggle this feature on and off in case I prefer to only use infowindow popups on the map instead of floating cards</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Add cards that people can swipe through on mobile #5

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[ProLoser]

@copilot add keyboard left/right support. i want the card to slide while i drag my finger left or right to swipe, and I would like placeholder card that slides into view while the current card I'm dragging slides out of view, with a little bit velocity animation

[Copilot]

@copilot add keyboard left/right support. i want the card to slide while i drag my finger left or right to swipe, and I would like placeholder card that slides into view while the current card I'm dra...

Done in 7b82065. Here's what was added:

• Live drag tracking — touchmove translates both #event-card-current and #event-card-peek in real-time as the finger moves. The peek card is pre-populated with the adjacent event and positioned just off-screen at the edge, so it slides in simultaneously as the current card slides out.
• Velocity-based commit — on touchend, the swipe commits if |velocity| > 0.3 px/ms (a quick flick) even if the distance threshold wasn't crossed. Otherwise it springs back with the same animation.
• Keyboard ← / → — ArrowLeft/ArrowRight trigger the same animated commitNavigation() as the buttons, so the slide-in/out animation plays for keyboard too.
• Gesture axis is locked after 8px of movement so horizontal and vertical swipes don't interfere with each other.

[ProLoser]

@copilot the event infowindow should be shown at the same time the event's card is shown. when the user clicks full details it should expand the show more section in the infowindow

[Copilot]

@copilot the event infowindow should be shown at the same time the event's card is shown. when the user clicks full details it should expand the show more section in the infowindow

Done in 932b4b8:

• Card + infoWindow open together — showEventCard() now calls Events.infoWindow(event).open(...) so the infoWindow appears at the marker simultaneously with the bottom card.
• InfoWindow follows card navigation — finishNavigation() also calls Events.infoWindow(ev).open(...) after each swipe or keyboard navigate, keeping the infoWindow in sync with whichever card is currently showing.
• Full Details expands the details section — instead of re-opening the infoWindow from scratch, the button now sets detailsEl.open = true on the live <details> DOM node already inside the open infoWindow, expanding the "Expand Details" section in place.

[ProLoser]

@copilot closing the card should also close the infowindow

[Copilot]

@copilot closing the card should also close the infowindow

Done in 9e3b3f3 — hideEventCard() now calls Events.infoWindow().close() so dismissing the card (✕ button, ESC, swipe down, or map tap) also closes the infoWindow.

[github-actions]

PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-03-01 08:40 UTC

[ProLoser]

@copilot rename "full details" button to "details" and make it toggle the show more

[Copilot]

@copilot you exposed my secret tokens

Done in f815588 — replaced the hardcoded SPOTIFY_CLIENT_ID and SPOTIFY_CLIENT_SECRET values with YOUR_SPOTIFY_CLIENT_ID / YOUR_SPOTIFY_CLIENT_SECRET placeholders in both 19hz/map.js and the preview/pr-56/19hz/map.js copy. The existing guard in getSpotifyAccessToken() will warn in the console when the placeholders haven't been substituted with real values.

[ProLoser]

@copilot reduce card nav padding so it looks more embedded into the corners and top. the action elements look much taller than the add to calendar button in the middle

[Copilot]

@copilot reduce card nav padding so it looks more embedded into the corners and top. the action elements look much taller than the add to calendar button in the middle

Done in cc594d5 — reduced #event-card-nav padding from 8px 16px 0 → 4px 6px 0, gap from 8px → 4px, and button padding from 4px 10px → 2px 6px (min-width 36px → 28px). Also trimmed the drag handle top margin from 10px → 6px.

[ProLoser]

@copilot add an icon to the details button on the card

[Copilot]

@copilot add an icon to the details button on the card

Done in 185a8cf — added ℹ before the label so the button now reads "ℹ Details".

[ProLoser]

@copilot change the card-mode-toggle icon to a bottom panel open / close icon and change the details icon to an unfold more icon

[Copilot]

@copilot change the card-mode-toggle icon to a bottom panel open / close icon and change the details icon to an unfold more icon

Done in b32340a:

• Cards toggle → bottom-panel open/close icon (screen with highlighted bottom strip)
• Details button → unfold-more chevrons (↕)

Cards toggle	Details button on card

[ProLoser]

@copilot can you make the cards toggle icon change between bottom panel open icon and bottom panel close icon depending on the current state of the button

[ProLoser]

@copilot the details icon is too big compared to the close icon size and the details text is not vertically centered with the icon

[Copilot]

@copilot can you make the cards toggle icon change between bottom panel open icon and bottom panel close icon depending on the current state of the button

Done in b7960e9. The button now embeds two SVG elements — CSS shows .icon-open when inactive and swaps to .icon-close (same panel icon + downward chevron) when .active is set.

Cards OFF (inactive)	Cards ON (active)