Страница Telegram-канала в админке

Клик по строке канала на странице «Сборщики» открывает страницу, где видно всё, что сборщик собрал из этого канала: каждая карточка рядом с текстом поста, из которого она получилась, с разбором алгоритма и состоянием на стенде.

17 сентября 2026Стенд dusha.uxbrain.ruДокумент docs/38Продолжает docs/37 и ADR-0003
9источников по удобству изучено, из каждого что-то взято
15решений по устройству страницы (Д-1…Д-15)
выкаченона стенд, проверено в браузере на живом канале
не закоммиченокак и весь слой Telegram: в дереве чужие правки

Что получилось

Как этим пользоваться

  1. Админка стенда → «События» → «Сборщики» → блок «Telegram-каналы».
  2. Клик по строке канала или по его имени — открывается страница канала.
  3. Плитки сверху показывают, сколько карточек и в каком они состоянии; клик по плитке оставляет только их. Ниже — поиск по названию и тексту поста, вид поста, сортировка.
  4. Клик по строке карточки — под ней текст поста с подсветкой и разбор. Сверить «Когда» и «Где» с текстом — это и есть проверка алгоритма.
  5. «Карточка» открывает редактор, где принимается решение о публикации; «↗» — пост в Telegram. «← Сборщики» или кнопка «Назад» браузера возвращают список как был.

Что говорят источники

Изучено 17 сентября 2026. Первая колонка — источник, дальше его рекомендация и то, что из неё взято на страницу.

№ИсточникРекомендацияЧто взято
И-1Data Tables: Four Key Considerations
Nielsen Norman Group
Первая колонка — то, по чему узнают запись; колонки по важности; заметное состояние фильтров; правка одной записи в боковой панели, а не в модальном окне, чтобы соседние строки оставались видны.Порядок колонок; разбор раскрывается на месте; редактор карточки открывается поверх страницы.
И-2Block Links, Cards, Clickable Regions, Rows, Etc.
Adrian Roselli
Нельзя оборачивать всю строку в ссылку или кнопку: скринридер читает всё содержимое до того, как назовёт тип элемента. Настоящая ссылка — на одном элементе, у вложенных кнопок своё место.В строке канала одна настоящая ссылка — имя канала; ссылка на Telegram и кнопки «Выключить/Удалить» — отдельно.
И-3Cards
Heydon Pickering, Inclusive Components
«Избыточный клик»: контейнер повторяет ссылку скриптом, текст остаётся выделяемым; нажатие дольше ~200 мс — выделение, а не переход.Долгое нажатие и выделение текста не открывают страницу; Enter и пробел работают с клавиатуры.
И-4Accordions on Desktop
Nielsen Norman Group
Раскрывающиеся блоки хороши, когда нужна часть содержимого; не сворачивать соседей автоматически; давать «развернуть все / свернуть все».Несколько строк открыты одновременно; кнопки «Развернуть все» и «Свернуть все».
И-5Cards: UI-Component Definition
Nielsen Norman Group
Плитки-карточки — для разнородного контента; для однородных записей, поиска и сравнения лучше таблица: положение элементов предсказуемо для глаза.Карточки канала — таблица; плитки только для счётчиков-фильтров.
И-6Explainability + Trust
Google PAIR Guidebook
Уверенность показывать категорией, а не процентами; лучшее объяснение — частичное: одна фраза о том, на что опёрлась система.Уверенность словом (высокая / средняя / низкая), число мелко рядом; фраза «почему алгоритм счёл это событием».
И-7Errors + Graceful Failure
Google PAIR Guidebook
Помочь человеку заметить и исправить ошибку системы; объяснять, почему результата нет, и что делать дальше.Флаги с расшифровкой (реклама, с оговоркой, подборка, конфликт дат); пустые состояния с причиной и следующим шагом.
И-8Back link
GOV.UK Design System
Ссылка «назад» вверху страницы возвращает на предыдущую страницу в её прежнем состоянии; многие избегают кнопки браузера, потому что сайты её ломают.«← Сборщики» в шапке возвращает список как был; кнопка «Назад» браузера тоже работает.
И-9Line Length Readability
Baymard Institute
50–75 знаков в строке, не больше 80: длинные строки утомляют, и их пропускают.Текст поста ограничен 70 знаками в строке, переносы строк поста сохранены.

Не удалось проверить в сети сегодня (страницы переехали или закрыты): описания макета «список–деталь» у Material Design и SAP Fiori, таблицы Shopify Polaris, экраны проверки распознавания документов у Rossum и Google Document AI. Их общий приём взят как рабочая гипотеза: исходный документ и извлечённые поля рядом, сомнительные поля помечены, из поля видно, откуда оно взято. На этом держится решение Д-6.

Решения по устройству страницы

Что под капотом

Сервис сборщиков GET /api/export/telegram/channels/<канал>/events карточки канала + текст поста из последнего снимка + пометки правил Django GET /admin-api/ingest/telegram/channels/<канал>/events подмешивает состояние каждой карточки на стенде и считает счётчики Консоль #events/collectors/telegram/<канал> модуль sections/ingest-telegram.js; фильтры и поиск — в браузере

Тесты: три новых на базе (связь канал → карточки, текст из последнего снимка, экранирование «_» в имени канала); весь набор Telegram — 39 зелёных. На стенде проверено в браузере: клик по строке, раскрытие, фильтр плиткой, клавиатура, «← Сборщики» и «Назад» браузера — без ошибок в консоли.

Дополнение вечером: первый сотрудник у панели

Владелец добавил канал @gr2hub, увидел «читается» и ждал карточек — а прогона не было: чтение начиналось только кнопкой «Собрать» или автосбором раз в 12 часов, а «читается» означало лишь «лента открывается». Исправлено в тот же вечер.

Про обложки: у @moscowafishi 5 из 7 постов в веб-версии без фото — только эмодзи, поэтому обложек у них нет честно; у @yogapark обложки есть у 7 из 8. Видеопосты обложки пока не дают: миниатюра видео не берётся.

Что не сделано и что предлагается дальше