feat(work-time): интеграция редизайна модалки «Time worked» — таймлайны с временем суток (клиент, grid) #566
No Assignees
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: vvzvlad/gitmost#566
Reference in New Issue
Block a user
Delete Branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Проблема / Цель
Есть готовый прототип редизайна окна «Time worked on this article» —
NewDesign/TimeWorkedModal.tsx(Mantine v7, светлая/тёмная тема). Главное отличие от текущей версии: на суточных дорожках видно время суток — часовая ось00–06–12–18–24сверху с делениями, ночные часы затемнены, у каждого блока hover-тултип «начало–конец · длительность», а у сегодняшнего дня — граница «сейчас».Нужно натянуть этот визуал на существующую фичу учёта времени с нулём изменений бэкенда: все данные уже отдаёт текущий эндпоинт
POST /pages/history/time. Прототип писался без знания нашей модели данных, поэтому его входные пропсы (days: DaySummary[], заранее готовыеtotalLabel/agentLabel) надо заменить адаптером над реальнымIPageWorkTime.Для кого: авторы/редакторы, которые смотрят, сколько времени и в какие часы шла работа над статьёй (человек и, отдельно, агент).
Контекст и исследование
Фича #395 «time worked», подсистема
work-time:<Modal title="Time worked on this article">с теломWorkTimePunchCard. Виджет скрыт, покаworkMs<=0 && agentOnlyMs<=0; на agent-only странице заголовок показывает агентскую оценку.left=(w.start-day.day)/DAY_MS, деления 6/12/18, цвета work/agent, суточные итоги, и схлопывает прогоны ≥8 пустых дней в строку-разделитель «× N days without edits» (collapseEmptyRuns).IPageWorkTime = {workMs, agentOnlyMs, perDay: IPerDay[], config, tz};IPerDay = {day (epoch-ms локальной полуночи в tz), dayISO, activeMs, agentMs, windows: IDayWindow[]};IDayWindow = {start, end (epoch-ms), class: 'work'|'agent_only'}. Окна клипаются к суткам на сервере (bucket-by-day.ts).tz = viewerTimezone()(браузерная IANA-зона); та же tz уходит на сервер для бакетирования по дням, поэтомуday(epoch-ms локальной полуночи) и браузерное форматирование даты согласованы.formatHeadline(«≈ 1h 24m»,""приworkMs<=0),formatDayTotal(«1h 24m» / «—»),formatGapMinutes. Все берутt().Вывод: данные для прототипа полностью доступны на клиенте — это чисто визуальный оверхол
WorkTimePunchCardи обёртки-модалки. Совпадает с заявлением прототипа «изменений API не требуется».Расхождения прототипа ↔ реальность (закрываются адаптером):
DaySummary[]с готовыми строками; реально приходитIPageWorkTime— маппим и форматируем существующими хелперами.Block.start/end— часовые доли 0..24; реальноwindowsв epoch-ms →(w.start-day.day)/3.6e6.kind: 'work'|'agent'↔class: 'work'|'agent_only'.tz='Europe/Moscow',inactivityGapMin=15захардкожены — берёмdata.tzиformatGapMinutes(data.config.tGap).t().Дизайн
Принцип: контейнер, запрос, эндпоинт, алгоритм — прежние; меняем только визуал тела модалки (и её хром). Ось времени —
grid(решение человека). Бэкенд не трогаем.1. Ось
grid(только она). Порт визуала из TimeWorkedModal.tsx: часовая шкала00/06/12/18/24(липкая), вертикальные деления 25/50/75%, затемнение ночных часов (0–6 и 21–24, как вtrackBgпрототипа), легенда Work/Agent, per-block тултип, граница «сейчас». Веткуaxis='phases'не портируем (вне scope; возможный будущий тумблер).2. Адаптер
IPageWorkTime → входы компонента(заменяет пропсы прототипа):day.windows.map(w => ({ start:(w.start-day.day)/3.6e6, end:(w.end-day.day)/3.6e6, kind: w.class==='work' ? 'work' : 'agent' })); позиционирование/ширина — как в текущем punch-card (left,width, clamp[0,24], мин. видимая ширина 0.6%).formatDayTotal(day.activeMs, t)(«—» при 0).dayHeading(day.day)(browser-tz, согласован с бакетингом).total = workMs>0 ? formatHeadline(workMs,t) : t("agent: {{value}}", {value: formatHeadline(agentOnlyMs,t)}). Вторичную строкуagent: …показываем только когдаworkMs>0 && agentOnlyMs>0(иначе агентская оценка уже в главном слоте). Так большой 22px-слот НИКОГДА не пустой (formatHeadline(0)==="").data.tz,formatGapMinutes(data.config.tGap)в подписи-футере.3. Сохранение схлопывания пустых прогонов (находка критика №2). Контракт входа делаем
rows: (DaySummary | { gap: number })[](или добавляемDaySummary.gap?: number-вариант). Портируем существующийcollapseEmptyRuns(EMPTY_RUN_COLLAPSE = 8): прогон ≥8 пустых дней → строка-разделительt("× {{count}} days without edits", {count})в исходном порядке (не в конец); короткий (<8) прогон пустых дней рендерится полупрозрачными дорожками с итогом «—». Прототипный плоскийdays.mapзаменяем на рендерrowsс веткой gap-строки.4. Граница «сейчас». Помечаем
isTodayтотperDay, у которого[day, day+DAY_MS)содержитDate.now(), сnowFraction=(Date.now()-day.day)/DAY_MS. Если сегодняшнего дня вperDayнет (сегодня правок не было —bucketByDayне добавляет пустой хвост), маркер не показываем. Ложных срабатываний нет (последнийperDay— всегда активный день).5. Тултип блока (находка критика №3 — DST). Позиционирование остаётся по часовой доле
(w.start-day.day)/DAY_MS(как сейчас). Но время в тултипе («начало–конец») форматируем из реального epoch (w.start/w.end) вdata.tzчерезIntl.DateTimeFormat(locale,{hour,minute,timeZone:data.tz}), а НЕ из 24-часовой доли — иначе в дни перевода часов (сутки 23/25ч) тултип покажет время, съехавшее до часа. Длительность блока — из epoch (w.end-w.start), т.е. клипнутая к суткам порция (для посуточной дорожки это корректно).6. i18n. Все видимые строки — через
react-i18nextt()(шапка, легенда, пустое состояние, футер, «× N days», тултип-разделители).Policy-константы:
EMPTY_RUN_COLLAPSE=8(существующая), мин. ширина блока0.6%, затемнение ночных часов0–6и21–24, ширина модалки ~46rem — из прототипа.Затрагиваемые файлы:
work-time-timeline.tsxрядом и переключить импорт вwork-time-stat). СохранитьcollapseEmptyRuns, форматтеры, позиционную математику.Modal(ширеsize, паддинги/шапка по прототипу); логика триггера/useDisclosure/скрытия виджета — без изменений.usePageWorkTime,formatHeadline/formatDayTotal/formatGapMinutes,dayHeading,IPageWorkTime/IPerDay/IDayWindow.NewDesign/TimeWorkedModal.tsx(исходник-прототип; прочие файлы вNewDesign/— для отдельных задач, не трогаем).Границы scope
Не входит:
axis='phases'(цветные полосы фаз) — не портируем; возможный будущий тумблер grid/phases.Критерии приёмки
Проверяемо на стенде (страница с историей правок в разные часы):
00/06/12/18/24, ночные часы затемнены.(w.start-day.day)/DAY_MS).× N days without editsна своём месте в списке; короткий прогон пустых дней — полупрозрачные дорожки с итогом «—».workMs=0, agentOnlyMs>0) открывается, и главный слот заголовка показывает агентскую оценку (НЕ пустой), без дублирующей строкиagent:.data.tz(в DST-переходный день не съезжает).Отказы и наблюдаемость
usePageWorkTime(react-query); состояния загрузки/ошибки/пусто — как сейчас (No time tracked yetприworkMs<=0 && agentOnlyMs<=0). Новых сетевых путей нет.[0,24], мин. ширина) — как в текущем punch-card.Совместимость и миграции
Решённые развилки
phases— возможный будущий тумблер, вне scope.formatHeadline(0)===""иначе даёт пустой 22px-слот — находка критика).collapseEmptyRunsчерезrows: (DaySummary|{gap})[]. Кто решил: анти-регрессия (у прототипа концепции нет).Связи
axis='phases'из прототипа).