Outer-customer saved directions (carrier)

Tasks: A-006 — https://github.com/logisticsdesign/logistics-2/issues/34; A-008 — https://github.com/logisticsdesign/logistics-2/issues/48 (states and edge-case alerts) · member anastasia-ermoshina · agent: Claude Code.

Readiness

Purpose

The carrier subscribes to directions (departure → arrival) to get notified about matching tenders. Saved directions exist for every tender type; this prototype builds them on the outer-customer section as the first example. Directions are created from the tender list (bookmark on a card, not wired yet) or here — by typing or by clicking regions on the map.

Source and Route

• Route /tenders/outer-customer, role «Перевозчик», tab «Сохранённые направления» (screen.tender-outer-customer). The tab has no route of its own; switching tabs keeps the saved directions.

Layout

• Under the tabs, 16 px down: one bordered box (radius 16 px) filling the rest of the height. Left — a 429 px panel with a right border; right — the map on --color-background-dropdown-active.
• The tab «Сохранённые направления» carries a counter badge with the number of saved directions (0 in the empty state).

Primary Scenario

1. Empty state (18061:19217). «0 из 50 направлений», a grey card with wbl-empty-state: «Направлений пока нет», «Подпишитесь на направление, чтобы вам приходили уведомления о подходящих тендерах», action «Добавить направление». Below — «Предложенные направления / По вашим тендерам за последние 90 дней» with four suggestion tags «Москва → Омская обл.», «Омская обл. → Любой», «Новосибирская обл. → Москва», «Санкт-Петербург → Любой»; «+» on a tag saves that direction at once.
2. New direction (18066:41988). «‹ Новое направление», «Введите точки вручную или выберите с помощью карты», the departure field «Город или регион отправления» with a «Любой» switch, a divider with the swap button, the arrival field «Город или регион прибытия» with its own «Любой», a divider, the switch «Получать уведомления о тендерах» (on) and «Сохранить» (size M, disabled while nothing would be created).
3. Search (18066:45830). Typing opens suggestions in two groups «Город» and «Регионы», up to five each; a place matches when a word in its name starts with the query, names starting with it come first, the matched part is medium weight. Arrow keys move, Enter chooses, Escape restores the value.
4. Departure is one place, arrival is several (18066:47303, 18066:48168, 18066:49012). The chosen departure shows as «Отправление / value»; arrivals show as removable tags with «Добавить ещё»; Backspace in an empty arrival input removes the last tag. «Будет создано направлений: N» appears above «Сохранить» — one direction per departure × arrival pair not yet saved. «Любой» turns its field grey with a «Любой» tag; «Любой → Любой» is never created.
5. Swap. Exchanges departure and arrival (including «Любой»). It is disabled while there are several arrivals, with the tooltip «Поменять местами можно, когда прибытие одно».
6. Save (18726:16935). New pairs go on top of the list with the chosen notification setting; toast «Добавлено N направлений» (declined by number); the form stays open and empty for the next direction; the map keeps the saved regions filled. «‹» returns to the list.
7. My directions (18066:49516). «Мои направления» with «Добавить», «N из 50 направлений», full-width search «Поиск» (by either place or the whole label), sort icon and chips «Все · С тендерами · С уведомлениями». «С тендерами» keeps directions with more than 0 tenders, «С уведомлениями» — those with notifications on; both can be on at once and combine with «И»; «Все» is on when no chip is and turns the others off. The map shows only what the list shows (chips and search): fills, pins, cities. Each row: tender count badge (accent when > 0, grey at 0), «Откуда → Куда» with short names («обл.», «Р.»), and 16 px icon buttons in --color-text-icon-primary-gray, 12 px apart, with tooltips — «Создать обратное направление» (disabled with «Обратное направление уже есть» when it exists), the bell and «Удалить».
   • Notifications. A crossed bell means notifications are off: tooltip «Включить уведомления», a click turns them on, the icon becomes the filled bell and a toast «Уведомления включены» shows for 3 s. A filled bell means on: tooltip «Выключить уведомления», toast «Уведомления выключены».
   • Delete (18731:18448 → 18731:20286 → 18731:20487). «Удалить» opens wbl-modal S «Удалить направление?» with the direction and «Не удалять» / «Удалить» (danger). After deleting — toast «Направление удалено» with «Вернуть» (18066:51347, 5 s); «Вернуть» puts the direction back in its place in the list.
   • Hovering a region or a city on the map outlines the rows it takes part in (18232:52161). Hover on a row shows the direction on the map. A click selects the row (accent background and a 4 px accent bar on the left) and zooms the map as close as both regions still fit (18232:51490); a second click on the selected row clears the selection and returns the map to the default view (zoom ×1, nothing selected).

Map (Specs 18288:41309, 18158:15162)

• Only the outline of Russia by region, no base map: 83 regions from the SVG «russia 1» exported from Figma (public/assets/maps/russia-regions.svg), each path keyed by its ISO code (RU-KYA, RU-NVS …). Moscow and Saint Petersburg are map regions but cities in search.
• Every region reacts to hover: a dark outline on top of its neighbours and a tooltip next to the cursor:
  • list or empty state, region without directions — «Регион / Нажмите, чтобы добавить направление»; region with directions — «Регион / Участвует в N направлениях. Нажмите» and a stronger fill with an accent outline;
  • form with a focused departure — «Регион / Выбрать как отправление», with an arrival target — «Регион / Выбрать как прибытие», crosshair cursor.
• Click: in the form with a target, the region goes straight into that field (after the departure the target moves to the arrival); otherwise a wbl-popup opens at the click: for a region without directions — «Выбрать как отправление» / «Выбрать как прибытие» (opens the form with it); for a region with directions — «N направлений», the list with tender badges (a click opens that direction: selects the row and zooms to it, 18227:50538) and «Добавить направление» (form with this region as departure). The popup closes on its cross, Escape or a click on empty map.
• States: saved regions — light accent fill; the shown direction — stronger fill and accent outline plus an arc between the two regions; regions chosen in the form — accent outline; cities chosen in the form — a 6 px accent dot in their region.
• Pins (list only): wbl-map-pin S in the centre of every region with directions — «✓» for one, the number for several. A region whose only direction goes to «Любой» shows an arrow out of it (arrow-upright); one whose only direction comes from «Любой» — an arrow into it (arrow-downleft, 18232:52161). Pins closer than 22 px on screen merge into a group pin with the number of regions; a click on the group zooms as close as those regions fit (18885:20228).
• Zoom +/− in whole steps ×1 … ×8 and drag to pan when zoomed; pins, dots and line widths keep their size. «ⓘ» is visual only.
• Cities («Показать города» / «Скрыть города», 18890:20851). Cities appear by population, not all at once: from ×2.5 — the 16 cities over a million; from ×3.5 — plus 24 cities over 500 000; from ×4.5 — the other regional centres (86 in total). A caption under the zoom says what is shown now and what comes next. A city in a saved direction (in the form — a chosen one) is a filled dot and is shown even with cities off; the rest are outlined dots. Every dot has its name; labels never overlap — on a conflict the label of the smaller city is hidden (the dot stays). A click on a city opens the same card as a region; the type is written in the same line as the name — «Г. Тула» — without a separate line. A city with listed directions shows them like a region; otherwise «Выбрать как отправление / прибытие». In the form with a target field the city goes straight into it. The city tooltip is «Г. Тула» plus the same action line as for a region.
• City points are fixtures: latitude/longitude projected onto the Figma SVG with a projection fitted to the region centres (mean error about one SVG unit); four cities near a region edge are pulled inside their region.
• The direction arc ends in a city point for a city and in the region centre for a region.

States, Errors, and Edge Cases

• Form alerts (A-008, 18729:17718). wbl-alert S above «Будет создано направлений», danger first, then warning, then info. With any warning the button reads «Всё равно сохранить» and the summary adds «из N» (19083:61352).

  • warning «N направления уже покрыты правилом «X → (Любой)»» / «Уведомления могут дублироваться» / «Удалить дубликаты» — removes those arrivals; their tags carry a warning icon;
  • warning «Правило «X → (Любой)» шире N сохранённых направлений из …» / «Они станут лишними» / «Удалить лишние сохранённые ранее» — deletes them;
  • danger «Направление «A → B» уже сохранено» / «Показать в списке» — opens the list with that row selected;
  • info «Будет создано N направлений» / «… уже сохранены и будут пропущены»;
  • info «Отправление и прибытие совпадают» / «Будут приходить уведомления о перевозках внутри …»;
  • info «Обратное направление «B → A» уже сохранено» / «Кругорейс будет закрыт полностью»;
  • warning «Тула входит в Тульскую область, а направление «…» уже сохранено»;
  • info «Осталось N направлений из 50» (5 or fewer);
  • danger «Сохранено 50 из 50 направлений» / «К списку направлений»;
  • warning «Выбрано N прибытий, свободно M слота» / «Оставить первые M»;
  • info «За последние 90 дней по направлению … не было тендеров» (one or several, by the tender fixture);
  • warning «Список городов и регионов не загрузился» / «Выбор с карты пока недоступен» / «Повторить» — reloads the map.

• Implemented: empty, form (empty, filled, «Любой»), list (all / filtered / «Ничего не найдено»), map hover, popups, selection, toast.

• The limit is 50: «Добавить» and the popup action are disabled at 50; a save creates at most the remaining number of pairs (see the limit alerts).

• Suggestions are shown only in the empty state.

• Not designed: loading, errors, an empty search in the fields (the layout 18066:44818 shows the placeholder «Показываем тут примеры?»; the prototype opens suggestions only after typing).

Data and Integration Boundary

• Directions live in SavedDirectionsStore, provided by the outer-customer screen: they survive tab and role switches while the screen is open and are lost on reload. No API, persistence, permissions or notifications.
• Region names, the 30 search cities, suggestions and tender counts are fixtures in saved-directions.models.ts; tender counts for the layout's directions repeat 18066:49516 (12, 9, 9, 4, 0), others are a stable pseudo random fixture.
• Visual only: sort, «ⓘ».

Components and Accessibility

• DS: wbl-empty-state (standard composition), wbl-tag, wbl-switch, wbl-button, wbl-button-flat, wbl-divider, wbl-tooltip, wbl-input-search, wbl-chip, wbl-badge, wbl-popup, wbl-toast, wbl-map-pin, wbl-map-zoom, wbl-map-control-button.
• Feature code (not in the design system yet):
  • app-direction-point-field — a combobox (role="combobox", aria-expanded, aria-activedescendant) with a grouped listbox. The DS wbl-multiselect is a checkbox list without typing groups, so it does not cover this field.
  • app-russia-map — the SVG map. MapLibre wbl-map is not used: the layout asks for region outlines only. The cursor tooltip is drawn by the map (tooltip tokens), because wbl-tooltip anchors to an element with a delay.
  • New icon icons/arrows-swap.svg from the layout's row action.
• Keyboard path: all actions are reachable from the panel — fields, switches, buttons, row toggle (aria-pressed) and row actions with accessible names. The map is a pointer shortcut; its regions are not in the tab order. Popup buttons are regular buttons; Escape closes the popup.
• Each «Любой» switch sits in a group named «Отправление» / «Прибытие».
• Motion is off with prefers-reduced-motion.

Related Flows

• screen.tender-outer-customer — the tab lives on this screen (carrier).
• Proposed: saving a direction from a lot card bookmark in the tender list.

Open Questions

• wbl-empty-state shows a grey title and a secondary «+» action; the layout shows a dark title and a primary button. Kept the DS composition — the DS owner decides whether the empty state needs this variant.
• What the empty departure field should suggest before typing («Показываем тут примеры?» in 18066:44818).
• Meaning of the «✓» pin: the prototype uses it for a region in exactly one direction (Specs sheet); confirm.
• «Вся Россия» (a «Любой → Любой» rule) from 18729:17718 is not created: the form never saves «Любой → Любой»; its alert is not implemented.
• The city tooltip in 18232:52161 reads «Направление: 1. Нажмите»; the prototype keeps the region wording «Участвует в N направлениях. Нажмите».
• The undo toast stays 5 s (other toasts 3 s) — confirm.
• What «ⓘ» and sort do.
• The cities layout 18890:20851 shows millionaire cities at the default view; the prototype follows the written thresholds (×2.5 / ×3.5 / ×4.5).
• The chip «Регионы × 1» next to the zoom in 18227:50538 is not explained — not implemented.
• Real coordinates of cities (the prototype uses a fitted projection).
• Region with several departures (the field allows one departure; several departures would need its own layout).