merge: update Tours branch with current Places filters

client/src/components/Map/MapTogglePill.tsx

@@ -6,7 +6,7 @@ import { MAP_CONTROL_SHADOW } from './mapControlShadow'
  * One round on/off control in the frosted shell every map control wears, so a new
  * one lines up with the compass, the layer switcher and the overview toggle.
  */
-export function MapTogglePill({ active, onToggle, label, icon, testId, tooltipPlacement = 'left' }: {
+export function MapTogglePill({ active, onToggle, label, icon, testId, tooltipPlacement = 'left', badge = 0, opensDialog = false }: {
   active: boolean
   onToggle: () => void
   label: string
@@ -14,9 +14,18 @@ export function MapTogglePill({ active, onToggle, label, icon, testId, tooltipPl
   testId?: string
   /** Away from the edge the control hugs: left on the right edge, right on the left one. */
   tooltipPlacement?: 'left' | 'right'
+  /** A count pinned to the top right corner while above zero (how many filters are on, say). */
+  badge?: number
+  /**
+   * The control opens a dialog instead of switching something on and off (the phone
+   * map's places filter): it then announces the dialog, not a pressed state it
+   * does not have. `active` still lights it.
+   */
+  opensDialog?: boolean
 }) {
   return (
     <div style={{
+      position: 'relative',
       display: 'inline-flex', alignItems: 'center', padding: 4, borderRadius: 999, pointerEvents: 'auto',
       background: 'var(--sidebar-bg)',
       backdropFilter: 'blur(20px) saturate(180%)',
@@ -30,7 +39,8 @@ export function MapTogglePill({ active, onToggle, label, icon, testId, tooltipPl
           type="button"
           onClick={onToggle}
           aria-label={label}
-          aria-pressed={active}
+          aria-pressed={opensDialog ? undefined : active}
+          aria-haspopup={opensDialog ? 'dialog' : undefined}
           data-testid={testId}
           className={active ? 'text-accent' : 'text-content-muted'}
           style={{
@@ -45,6 +55,14 @@ export function MapTogglePill({ active, onToggle, label, icon, testId, tooltipPl
           {icon}
         </button>
       </Tooltip>
+      {badge > 0 && (
+        <span
+          aria-hidden="true"
+          className="pointer-events-none absolute -right-[3px] -top-[3px] box-border flex h-4 min-w-[16px] items-center justify-center rounded-full bg-accent px-1 font-geist text-[0.5625rem] font-bold tabular-nums text-accent-text"
+        >
+          {badge}
+        </span>
+      )}
     </div>
   )
 }