Show every date at a place, and stop scrolling re-rendering the app

Two dates at one venue drew two markers at identical coordinates — one
exactly on top of the other. The one underneath was invisible and
impossible to click, so a place you'd been to twice looked like you'd
been once. Dates now share a pin when they share a place: the pin wears
a count and the card lists all of them, soonest first. Verified with two
dates at one venue: seven placed dates draw six pins, and the card shows
both. The no-key fallback map had the identical bug, so both now use one
grouping function.

Scrolling stuttered on phones because cards and calendar cells set state
on mouseenter — and touchscreens synthesise mouse events, so dragging a
finger past a card re-rendered the whole app, all 42 calendar cells
included, mid-scroll. Hover handlers are now only attached on a real
pointer, where hover-linking actually means something. DateCard is
memoised so an unrelated change doesn't rebuild every card, and the
hover lift is behind a hover media query.

Also aliased the maps library's Map import: it shadows the global Map
constructor, which silently broke `new Map()` in that file.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: Kjubikstronk

src/components/Calendar.tsx

@@ -253,8 +253,9 @@ export default function Calendar({
               onKeyDown={(e) => onKeyDown(e, day)}
               onFocus={() => setFocusKey(k)}
               onClick={() => onSelect(k)}
-              onMouseEnter={() => onHoverDay?.(k)}
-              onMouseLeave={() => onHoverDay?.(null)}
+              {...(onHoverDay
+                ? { onMouseEnter: () => onHoverDay(k), onMouseLeave: () => onHoverDay(null) }
+                : {})}
               aria-selected={isSelected}
               aria-label={`${format(day, 'EEEE d MMMM')}${
                 entries.length ? `, ${entries.length} planned` : ''
@@ -271,7 +272,7 @@ export default function Calendar({
                     : outside
                       ? ''
                       : 'bg-[var(--color-card)]',
-                !outside && 'hover:-translate-y-0.5',
+                !outside && '[@media(hover:hover)]:hover:-translate-y-0.5',
               ]
                 .filter(Boolean)
                 .join(' ')}

src/components/DateCard.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { memo, useState } from 'react'
 import { format, parseISO } from 'date-fns'
 import type { DateIdea } from '../types'
 import PixelHeart from './PixelHeart'
@@ -19,7 +19,7 @@ type Props = {
 
 type Mode = 'idle' | 'calling-off' | 'deleting'
 
-export default function DateCard({
+function DateCard({
   item,
   onUpdate,
   onDelete,
@@ -52,8 +52,9 @@ export default function DateCard({
       ]
         .filter(Boolean)
         .join(' ')}
-      onMouseEnter={() => onHover?.(item.id)}
-      onMouseLeave={() => onHover?.(null)}
+      {...(onHover
+        ? { onMouseEnter: () => onHover(item.id), onMouseLeave: () => onHover(null) }
+        : {})}
     >
       {/* The whole header is the "take me there" target — bigger than any
           icon and the obvious thing to hit. */}
@@ -271,3 +272,9 @@ export default function DateCard({
     </li>
   )
 }
+
+/**
+ * Memoised: the agenda re-renders whenever anything in the app changes, and
+ * without this every card rebuilt each time — including on scroll.
+ */
+export default memo(DateCard)