Files

vitya 5bbbd0b533 feat(render): renderBoard + formatAge + partition (17 tests)

Pure renderer logic for the 5-col kanban view.
- formatAge: m/h/d/w/mo/y with calendar-month arithmetic
- partitionByStatus: canonical 5-col order
- renderBoard: 5 columns, cards with data-slug/data-raw-url/data-archived,
  HTML-escaped fields, JSON embed escaped via \uXXXX (XSS-safe)
- archived flag: done > 14d hidden by default (toggle visible)
- align task acceptance emoji set to ⚪🔴🟡🔵🟢

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

2026-05-22 14:43:29 +03:00

3.6 KiB

Raw Blame History

board-viewer-html-render

Goal

Рендер 5-колоночного kanban-board из нормализованной структуры (продукт board-viewer-gitea-reader). Статический HTML + минимальный клиент-сайд JS для фильтра / drawer / refresh-таймера. Без write-side, без realtime.

TDD-mode: обязательно по follow tdd-criteria. Снапшот-тесты на HTML-output из фиксированных reader-фикстур. Не модифицировать assert'ы без [test-modify: ...] маркера. Визуальная отделка (CSS) — под carve-out «visual CSS», но логика рендера (распределение по колонкам, age-расчёт, drawer-привязка) — TDD.

Key files

(TBD) src/render.{ts,py} — main renderer
(TBD) templates/board.html — template (Mustache / Jinja / template literals — выбор имплементера)
(TBD) static/board.css, static/board.js — styling + filter/drawer client-side
(TBD) tests/render.test.{ts,py} — snapshot tests

Acceptance criteria

5 колонок по статусам: ⚪ open / 🔴 in-progress / 🟡 paused / 🔵 blocked / 🟢 done. Названия колонок — emoji + слово.
Карточка:
- title (truncate на 80 chars в default-view),
- project badge (e.g. books, board-viewer),
- owner (если есть) — pill,
- age — относительное (3d, 2w, 5mo) от last_commit_iso,
- last-commit-marker — короткий hash или дата.
Группировка по проекту — toggle вверху: «по статусам» (5 колонок × проекты внутри) vs «по проектам» (per-project колонки × статусы внутри).
Поиск/фильтр — клиент-сайд input: substring по slug, title, project; multi-select по статусам.
Per-card drawer — клик по карточке → side panel с full markdown из per-task <slug>.md (lazy-fetch из raw_url). Markdown рендерится клиент-сайд (e.g. marked для TS, markdown-it для Py-side-rendered).
Refresh-таймер видно в header: «refreshed Xm ago, next in Ym» (data attribute из generation timestamp).
Output: один index.html файл + sidecar static/. Открывается локально без сервера для smoke-test.
Tests: snapshot-тесты на 3 reader-фикстуры (пустая доска / 1-2 таски / N≥10 тасок). Snapshots checked-in.

Decisions log

2026-05-22: task создан промоушеном; зависит от board-viewer-gitea-reader контракта.

Open questions

Markdown-renderer: client-side (marked) или server-side (Jinja с pre-rendered HTML вшито в data-attr)? Client-side проще — но добавляет ~50KB JS.
CSS framework: ничего (raw CSS) / Pico / Tailwind via CDN? Минимализм — за raw. Раздёргать через первый прототип.
Архивные таски (🟢 done старше N дней) скрывать по умолчанию? Toggle?

Completed steps

(фиксируется при выполнении)

Notes

Стиль: минимализм без аватарок/гифок/анимаций. Это инструмент глядеть на доску, не дашборд для презентации. Whitespace + типографика.

3.6 KiB Raw Blame History Unescape Escape