atomic-ghost-markers.md 2.2 KB

Ghost markers — унификация стиля маркеров на карте

Контекст: Все маркеры мест на карте используют единый ghost-стиль (радиальный градиент, неинтерактивные). Различие только в интерактивности для авторизованных пользователей.

Суть

Ранее маркеры имели разный визуал для обычных и авторизованных пользователей, плюс была концепция «точек посетителей» (visitor dots), которые отображались отдельно.

После рефакторинга:

  • Все маркеры — жёлтый радиальный градиент (radial-gradient(circle, rgba(255,238,0,1) 0%, rgba(255,238,0,0) 75%))
  • Неавторизованныеinteractive: false (не реагируют на hover/click)
  • Авторизованныеinteractive: true (tooltip с названием, клик)

    // frontend/src/lib/map.ts
    const ghost = options?.ghost
    const marker = L.marker([lat, lng], { icon, interactive: !ghost })
    

Что изменилось

  • b2d22a1 — удалена концепция visitor location с карты (WebSocket visitor dots больше не рендерятся)
  • 4cb4eb6 — все маркеры используют единый ghost стиль
  • 2377646 — ghost visual for all markers, keep interactive for auth users
  • 39ee188 — исправлено обновление цвета маркера после логина

Файлы

  • frontend/src/lib/map.ts:19-31 — определение стиля маркера
  • frontend/src/lib/map.ts:99-101 — применение interactive в зависимости от ghost
  • frontend/src/components/MapView.tsx — логика показа ghost-маркеров

Связанные заметки

  • [[architecture-overview]] — общая архитектура
  • [[frontend-api-client]] — API клиент

Источник

Code review 2026-07-01, унификация UI/UX карты.

#frontend #leaflet #ui #ux #markers #refactoring