ui-gallery: componentize remaining patterns

[wilhel1812]

Summary

All UI patterns demonstrated in the UI gallery should have proper React component wrappers in src/components/ui/. Currently only Surface.tsx exists. The rest of the app should import these components rather than hard-coding CSS class names.

Components to create

• MapControlButton.tsx — .map-control-btn, .map-control-btn-icon
• ProgressBar.tsx — .map-progress-track, .map-progress-fill-indeterminate
• StateDot.tsx — .state-dot, .state-dot-{state}
• Badge.tsx — .access-badge, .map-band-chip
• NotificationItem.tsx — .app-notification-item-{type}
• InlineNotice.tsx — .map-inline-notice

Existing components (already wrapped)

• ActionButton.tsx
• InlineCloseIconButton.tsx
• InfoTip.tsx
• UiSlider.tsx
• AvatarBadge.tsx
• Surface.tsx (new)

Goal

Changing a component's appearance (corner radius, padding, color) should require editing only one place.