ADR-065: сообщения по сторонам — свои вправо, чужие влево

Заменяет десктопную сетку «автор 132 px + текст» (часть ADR-024) единым
для десктопа и мобильного потоком: блок сообщения прижат к своему краю
ленты, ширина ограничена, текст внутри блока по-прежнему слева. Разделители
дат и «новые» — во всю ширину. CSS-класс grid переименован в feed-list —
сетки в разметке больше нет.

Проверено вживую (два аккаунта, DM, скриншоты 390 и 1280 px через
Playwright/Chromium) — своя и чужая сторона видны на обоих брейкпоинтах,
перенос длинного текста и разделители работают.

Обновлены ui.md, identity/brief.md и эталонный мок screens.html.
sw.js VERSION → v5 (менялись app.css и js/ui/chat.js, накопительно
с композером из ADR-064 — ни то ни другое ещё не в проде).
This commit is contained in:
Claude
2026-08-24 06:37:57 +00:00
parent 334ce95935
commit 9935acb86d
7 changed files with 84 additions and 73 deletions
+15 -2
View File
@@ -79,7 +79,7 @@ export function renderChat(root, ctx, chatId) {
root.append(head(view));
view.feed = el("div", "feed");
view.body = el("div", "grid");
view.body = el("div", "feed-list");
view.body.setAttribute("aria-live", "polite");
view.feed.append(view.body);
// Прокрутка к верхнему краю берёт следующую страницу (ADR-053).
@@ -524,12 +524,25 @@ function line(view, record, previous, parent = view.body) {
}
// Подряд идущие сообщения одного автора — без повтора автора.
const first = marks.length > 0 || !previous || previous.from !== record.from;
const node = el("div", first ? "line is-head" : "line");
const node = el("div", lineClass(record, view.me, first));
node.append(author(view, record, first), text(view, record));
parent.append(...marks, node);
view.nodes.set(record.id, { node, marks });
}
// lineClass — своя сторона ленты: свои сообщения вправо, чужие влево
// (ADR-065), классом на самой строке — выравнивает feed-list.
function lineClass(record, me, first) {
const classes = ["line"];
if (record.from === me) {
classes.push("line--me");
}
if (first) {
classes.push("is-head");
}
return classes.join(" ");
}
// redraw обновляет одну строку на месте: автор и группировка от состояния
// сообщения не зависят.
function redraw(view, record) {