---
type: phase-brd
phase_id: PH-5.redesign
title: "Редизайн: тёмная тема, mobile UI, UX"
version: 1
status: done
created_at: 2026-05-18
authors:
  - "agent:stream"
---

# PH-5 — Редизайн

## Цель

Переработать UI/UX приложения: добавить тёмную/светлую тему с автопереключением, адаптировать под мобильные устройства, улучшить юзабилити (линейка, метки, поиск).

## Scope

- Тёмная/светлая тема (авто по SunCalc — переключение по закату/рассвету)
- Mobile UI: bottom sheets, toolbar, touch-оптимизация
- Линейка (измерение расстояний на карте)
- Метки (сохранение точек интереса, localStorage)
- Поиск (Nominatim geocoding)
- CSS custom properties для theming
- Синхронизация темы карты и UI

## Что реализовано

- Система тем: CSS custom properties, авто (SunCalc), ручное переключение
- Стиль карты MapLibre синхронизирован с UI-темой
- Bottom sheet для мобильных (маршрут, статистика, настройки)
- Toolbar с иконками (режимы, инструменты)
- Touch-события: long press для метки, swipe для bottom sheet
- Линейка: клик-клик для измерения, отображение дистанции
- Метки: создание, редактирование, удаление, persist в localStorage
- Поиск: Nominatim API, debounce, fly-to результату

## Ключевые решения

| Решение | Причина |
|---------|---------|
| SunCalc для авто-темы | Точное время заката для координат пользователя |
| CSS custom properties | Нативный theming без препроцессоров |
| Bottom sheets (не sidebar) | Мобильный паттерн, thumb-friendly |
| localStorage для меток | Простота, нет backend-зависимости |

## Дата завершения

05-06.05.2026