Этап 2: чат 1:1 — устройства, очередь, SSE, шифрование сообщений
Сервер: регистрация устройств и X-Device, hub с одним потоком на устройство, очередь per-device с фан-аутом без эха отправителю, POST /api/messages с проверками в порядке protocol.md, ACK, SSE с воспроизведением очереди, ready и пингом раз в 20 секунд, контакты в обе стороны при первом сообщении, лимит 30 сообщений в минуту. Клиент: ULID, ключ 1:1 из ECDH через HKDF, шифрование конверта с AAD, sync.js как единственный писатель в IndexedDB, ACK строго после записи, список чатов, экран чата по эталону, разделители дат и «новые», pending и failed с повтором, полоса «нет соединения». ADR-033: у неотправленного есть текст отказа — clock_skew стало видно. ADR-034: входящее с известным id не перезаписывает запись. Собеседник знает открытый id конверта и подменял им чужое сообщение в чужой истории — вплоть до стирания своего присланного, чего «удалить у всех не существует» не допускает. ADR-035: один поток событий на браузерный профиль (locks + BroadcastChannel): две вкладки отбирали поток друг у друга и оставались без живой доставки. ADR-036: повтор отправки сохраняет ULID, пока он в пределах окна часов, — иначе потерянный ответ давал у собеседника два сообщения вместо одного. Приёмка на боевом сервере: два аккаунта, пять устройств, живая доставка, копия на второе устройство, очередь офлайн-устройству, ACK, подмена from игнорируется, чужой deviceId и запрос без Origin отбиваются, плейнтекста в базе и WAL ноль вхождений. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015DbCjVfTFq4ZFG8juD45YJ
This commit is contained in:
Claude Opus 5
@@ -0,0 +1,425 @@
|
||||
// Экран чата — docs/ui.md, «Чат»; вид — docs/identity/screens.html.
|
||||
//
|
||||
// Данные и действия идут только через sync.js: экран не пишет в базу
|
||||
// и не ходит в сеть сам.
|
||||
|
||||
import * as sync from "../sync.js";
|
||||
import { DESKTOP, clear, el, wide } from "./dom.js";
|
||||
|
||||
// Предел текста и порог счётчика — docs/ui.md, «Чат».
|
||||
const LIMIT = 4000;
|
||||
const COUNTER_AT = 3500;
|
||||
|
||||
// Разделители дат: на десктопе — полная дата, на мобильном — короткая,
|
||||
// как в эталоне. Время — ЧЧ:ММ в локальной зоне.
|
||||
const DAY_LONG = new Intl.DateTimeFormat("ru-RU", { weekday: "long", day: "numeric", month: "long" });
|
||||
const DAY_SHORT = new Intl.DateTimeFormat("ru-RU", { day: "numeric", month: "short" });
|
||||
const TIME = new Intl.DateTimeFormat("ru-RU", { hour: "2-digit", minute: "2-digit" });
|
||||
|
||||
// Тексты нерасшифрованного — docs/ui.md, «Чат». Ключа комнаты нет —
|
||||
// это про комнату; всё остальное в личном чате означает чужой ключ.
|
||||
const NO_ROOM_KEY = "не удалось расшифровать: нет ключа комнаты";
|
||||
const KEY_CHANGED = "не удалось расшифровать: ключ изменился";
|
||||
|
||||
// Насколько далеко от низа ленты человек ещё считается «внизу»: пришедшее
|
||||
// сообщение подматывает ленту только тогда, когда он и так смотрит конец.
|
||||
const NEAR_BOTTOM = 80;
|
||||
|
||||
// renderChat рисует чат в root и отдаёт отписку.
|
||||
export function renderChat(root, ctx, chatId) {
|
||||
const view = {
|
||||
ctx,
|
||||
chatId,
|
||||
me: ctx.me.nick,
|
||||
peer: sync.peerOf(chatId),
|
||||
limit: ctx.config?.maxMessageChars ?? LIMIT,
|
||||
alive: true,
|
||||
// Лента: записи по возрастанию id и их строки в разметке.
|
||||
items: [],
|
||||
nodes: new Map(),
|
||||
// Граница «новых»: первый непрочитанный на момент открытия.
|
||||
newId: null,
|
||||
chain: Promise.resolve(),
|
||||
};
|
||||
|
||||
root.append(head(view));
|
||||
|
||||
view.feed = el("div", "feed");
|
||||
view.body = el("div", "grid");
|
||||
view.body.setAttribute("aria-live", "polite");
|
||||
view.feed.append(view.body);
|
||||
root.append(view.feed);
|
||||
|
||||
root.append(composer(view));
|
||||
|
||||
const offMessages = sync.on("messages", (detail) => {
|
||||
if (detail.chatId === view.chatId) {
|
||||
run(view, () => apply(view, detail));
|
||||
}
|
||||
});
|
||||
const offNet = sync.on("net", () => paintBar(view));
|
||||
const media = matchMedia(DESKTOP);
|
||||
const onMedia = () => paint(view, true);
|
||||
media.addEventListener("change", onMedia);
|
||||
|
||||
run(view, () => load(view));
|
||||
|
||||
return () => {
|
||||
view.alive = false;
|
||||
offMessages();
|
||||
offNet();
|
||||
media.removeEventListener("change", onMedia);
|
||||
};
|
||||
}
|
||||
|
||||
// run выстраивает работу экрана в очередь: загрузка и приходящие события
|
||||
// не должны перемешиваться.
|
||||
function run(view, task) {
|
||||
view.chain = view.chain.then(task).catch(() => {});
|
||||
return view.chain;
|
||||
}
|
||||
|
||||
// --- разметка -----------------------------------------------------------
|
||||
|
||||
// head — шапка: имя чата, по нажатию — карточка контакта. «назад» слева
|
||||
// нужен там, где виден один экран за раз; на десктопе его прячет CSS.
|
||||
function head(view) {
|
||||
const bar = el("div", "head");
|
||||
const back = el("button", "back back--chat", "назад");
|
||||
back.type = "button";
|
||||
back.addEventListener("click", () => view.ctx.go("#/"));
|
||||
const title = el("button", "chat-title", `@${view.peer}`);
|
||||
title.type = "button";
|
||||
title.addEventListener("click", () => view.ctx.go(`#/contact/${view.peer}`));
|
||||
bar.append(back, title);
|
||||
return bar;
|
||||
}
|
||||
|
||||
// composer — полоса состояния и строка ввода: рамка 1 px ink, слева «>»
|
||||
// цветом mark. Enter отправляет только на десктопе; на мобильном он делает
|
||||
// перенос, а отправляет кнопка «>» справа (docs/ui.md, «Чат»).
|
||||
function composer(view) {
|
||||
const form = el("form", "compose");
|
||||
form.noValidate = true;
|
||||
|
||||
view.bar = el("p", "bar");
|
||||
view.bar.hidden = true;
|
||||
view.bar.setAttribute("aria-live", "polite");
|
||||
|
||||
const row = el("div", "input");
|
||||
const prompt = el("span", "p", ">");
|
||||
prompt.setAttribute("aria-hidden", "true");
|
||||
|
||||
view.field = el("textarea", "input__field");
|
||||
view.field.rows = 1;
|
||||
view.field.placeholder = "сообщение";
|
||||
view.field.maxLength = view.limit;
|
||||
|
||||
view.counter = el("span", "counter");
|
||||
view.counter.hidden = true;
|
||||
|
||||
const send = el("button", "input__send", ">");
|
||||
send.type = "submit";
|
||||
|
||||
row.append(prompt, view.field, view.counter, el("span", "enter", "enter — отправить"), send);
|
||||
form.append(view.bar, row);
|
||||
|
||||
view.field.addEventListener("input", () => count(view));
|
||||
view.field.addEventListener("keydown", (event) => {
|
||||
if (event.key !== "Enter" || event.shiftKey || event.isComposing) {
|
||||
return;
|
||||
}
|
||||
if (!wide()) {
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
submit(view);
|
||||
});
|
||||
form.addEventListener("submit", (event) => {
|
||||
event.preventDefault();
|
||||
submit(view);
|
||||
});
|
||||
|
||||
return form;
|
||||
}
|
||||
|
||||
// count — счётчик остатка: появляется после порога (docs/ui.md, «Чат»).
|
||||
function count(view) {
|
||||
const length = view.field.value.length;
|
||||
view.counter.textContent = String(view.limit - length);
|
||||
view.counter.hidden = length <= COUNTER_AT;
|
||||
}
|
||||
|
||||
function submit(view) {
|
||||
const text = view.field.value;
|
||||
if (text.trim() === "") {
|
||||
return;
|
||||
}
|
||||
view.field.value = "";
|
||||
count(view);
|
||||
run(view, () => sync.send(view.chatId, text));
|
||||
}
|
||||
|
||||
// --- лента --------------------------------------------------------------
|
||||
|
||||
async function load(view) {
|
||||
let record = null;
|
||||
let list = [];
|
||||
try {
|
||||
record = await sync.chat(view.chatId);
|
||||
list = await sync.messagesBefore(view.chatId);
|
||||
} catch {
|
||||
// Базы нет — рисуем пустую ленту: отправка от этого не ломается.
|
||||
}
|
||||
if (!view.alive) {
|
||||
return;
|
||||
}
|
||||
view.items = list;
|
||||
view.newId = firstUnread(record, list, view.me);
|
||||
paint(view, true);
|
||||
// Фокус в строку ввода при открытии чата на десктопе (docs/ui.md,
|
||||
// «Доступность»); на мобильном это подняло бы клавиатуру на весь экран.
|
||||
if (wide()) {
|
||||
view.field.focus();
|
||||
}
|
||||
await read(view);
|
||||
}
|
||||
|
||||
// firstUnread — граница «новых»: первый чужой непрочитанный. Своё
|
||||
// непрочитанным не бывает, поэтому и границей не становится.
|
||||
function firstUnread(record, list, me) {
|
||||
if (!record || record.unread <= 0) {
|
||||
return null;
|
||||
}
|
||||
const bound = record.lastReadId;
|
||||
const found = list.find((m) => m.from !== me && (!bound || m.id > bound));
|
||||
return found ? found.id : null;
|
||||
}
|
||||
|
||||
// read помечает чат прочитанным — после отрисовки: до этого lastReadId
|
||||
// и есть граница «новых» (docs/storage.md).
|
||||
async function read(view) {
|
||||
try {
|
||||
await sync.markRead(view.chatId);
|
||||
} catch {
|
||||
// Счётчик непрочитанных подождёт до следующего раза.
|
||||
}
|
||||
}
|
||||
|
||||
// apply разбирает изменения ленты. Дописать в конец дешевле, чем
|
||||
// перерисовать: лента — живая область, и перерисовка заставила бы
|
||||
// экранного диктора зачитать её целиком.
|
||||
async function apply(view, detail) {
|
||||
const incoming = [];
|
||||
for (const id of detail.ids ?? []) {
|
||||
let record = null;
|
||||
try {
|
||||
record = await sync.message(id);
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
if (record && record.chatId === view.chatId) {
|
||||
incoming.push(record);
|
||||
}
|
||||
}
|
||||
if (!view.alive) {
|
||||
return;
|
||||
}
|
||||
const bottom = atBottom(view);
|
||||
let whole = false;
|
||||
let added = 0;
|
||||
|
||||
for (const id of detail.removed ?? []) {
|
||||
const at = view.items.findIndex((m) => m.id === id);
|
||||
if (at >= 0) {
|
||||
view.items.splice(at, 1);
|
||||
whole = true;
|
||||
}
|
||||
}
|
||||
incoming.sort((a, b) => (a.id < b.id ? -1 : 1));
|
||||
for (const record of incoming) {
|
||||
const at = view.items.findIndex((m) => m.id === record.id);
|
||||
if (at >= 0) {
|
||||
// Та же запись в новом состоянии: pending стал sent или failed.
|
||||
view.items[at] = record;
|
||||
if (!whole) {
|
||||
redraw(view, record);
|
||||
}
|
||||
continue;
|
||||
}
|
||||
const last = view.items[view.items.length - 1];
|
||||
if (last && last.id > record.id) {
|
||||
// Из очереди сервера пришло то, что старше уже нарисованного.
|
||||
view.items.splice(view.items.findIndex((m) => m.id > record.id), 0, record);
|
||||
whole = true;
|
||||
continue;
|
||||
}
|
||||
view.items.push(record);
|
||||
if (!whole) {
|
||||
line(view, record, view.items[view.items.length - 2] ?? null);
|
||||
}
|
||||
added += 1;
|
||||
}
|
||||
|
||||
if (whole) {
|
||||
paint(view, bottom);
|
||||
} else {
|
||||
if (bottom && added > 0) {
|
||||
down(view);
|
||||
}
|
||||
paintBar(view);
|
||||
}
|
||||
if (whole || added > 0) {
|
||||
await read(view);
|
||||
}
|
||||
}
|
||||
|
||||
// paint рисует ленту заново.
|
||||
function paint(view, bottom) {
|
||||
clear(view.body);
|
||||
view.nodes.clear();
|
||||
let previous = null;
|
||||
for (const record of view.items) {
|
||||
line(view, record, previous);
|
||||
previous = record;
|
||||
}
|
||||
paintBar(view);
|
||||
if (bottom) {
|
||||
down(view);
|
||||
}
|
||||
}
|
||||
|
||||
// line дописывает сообщение в конец ленты вместе с разделителями,
|
||||
// которые перед ним нужны.
|
||||
function line(view, record, previous) {
|
||||
const day = !previous || dayOf(previous.ts) !== dayOf(record.ts);
|
||||
if (day) {
|
||||
view.body.append(divider(label(record.ts), false));
|
||||
}
|
||||
const fresh = record.id === view.newId;
|
||||
if (fresh) {
|
||||
view.body.append(divider("новые", true));
|
||||
}
|
||||
// Подряд идущие сообщения одного автора — без повтора автора.
|
||||
const first = day || fresh || !previous || previous.from !== record.from;
|
||||
const node = el("div", first ? "line is-head" : "line");
|
||||
node.append(author(view, record, first), text(view, record));
|
||||
view.body.append(node);
|
||||
view.nodes.set(record.id, node);
|
||||
}
|
||||
|
||||
// redraw обновляет одну строку на месте: автор и группировка от состояния
|
||||
// сообщения не зависят.
|
||||
function redraw(view, record) {
|
||||
const node = view.nodes.get(record.id);
|
||||
if (!node) {
|
||||
return;
|
||||
}
|
||||
const first = node.classList.contains("is-head");
|
||||
clear(node);
|
||||
node.append(author(view, record, first), text(view, record));
|
||||
}
|
||||
|
||||
function divider(caption, fresh) {
|
||||
const node = el("div", fresh ? "divider divider--new" : "divider");
|
||||
node.append(el("span", null, caption));
|
||||
return node;
|
||||
}
|
||||
|
||||
// author — колонка автора: ник и время. Свой ник — цветом mark.
|
||||
function author(view, record, first) {
|
||||
const node = el("div", record.from === view.me ? "author author--me" : "author");
|
||||
if (!first) {
|
||||
return node;
|
||||
}
|
||||
node.append(el("span", null, record.from), el("span", "t", TIME.format(record.ts)));
|
||||
return node;
|
||||
}
|
||||
|
||||
// text — само сообщение. Нерасшифрованное — курсивом с причиной, pending —
|
||||
// цветом stone, failed — с пометкой «не отправлено · повторить».
|
||||
function text(view, record) {
|
||||
const node = el("div", "text");
|
||||
if (record.text === null) {
|
||||
node.classList.add("text--none");
|
||||
node.textContent = view.peer === null && record.undecryptable === "unknown_key"
|
||||
? NO_ROOM_KEY
|
||||
: KEY_CHANGED;
|
||||
return node;
|
||||
}
|
||||
if (record.status === "pending") {
|
||||
node.classList.add("text--pending");
|
||||
}
|
||||
node.append(el("p", "text__body", record.text));
|
||||
if (record.status === "failed") {
|
||||
const note = el("p", "fail");
|
||||
const again = el("button", "link", "повторить");
|
||||
again.type = "button";
|
||||
again.addEventListener("click", () => run(view, () => sync.retry(record.id)));
|
||||
note.append(el("span", null, "не отправлено ·"), again);
|
||||
node.append(note);
|
||||
}
|
||||
return node;
|
||||
}
|
||||
|
||||
// paintBar — полоса над вводом. Причина одна за раз: отказ отправки
|
||||
// перебивает «нет соединения», потому что он про конкретное сообщение
|
||||
// и уходит при следующей попытке (ADR-033).
|
||||
function paintBar(view) {
|
||||
const failed = lastFailed(view);
|
||||
if (failed) {
|
||||
view.bar.className = "bar bar--mark";
|
||||
view.bar.textContent = failed.error;
|
||||
view.bar.hidden = false;
|
||||
return;
|
||||
}
|
||||
if (!sync.online()) {
|
||||
view.bar.className = "bar";
|
||||
view.bar.textContent = "нет соединения";
|
||||
view.bar.hidden = false;
|
||||
return;
|
||||
}
|
||||
view.bar.hidden = true;
|
||||
view.bar.textContent = "";
|
||||
}
|
||||
|
||||
// lastFailed — последнее своё неотправленное сообщение с текстом отказа
|
||||
// (docs/ui.md, «Чат»). Смотреть на состояние последнего своего нельзя:
|
||||
// лента отсортирована по ULID, а время в нём — часы отправителя. Отставшие
|
||||
// часы ставят новое сообщение перед его же старыми, и последним своим
|
||||
// остаётся давно отправленное — ровно в том случае, ради которого текст
|
||||
// про часы и заведён (ADR-033).
|
||||
function lastFailed(view) {
|
||||
for (let i = view.items.length - 1; i >= 0; i -= 1) {
|
||||
const record = view.items[i];
|
||||
if (record.from === view.me && record.status === "failed" && record.error) {
|
||||
return record;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// --- прокрутка и даты ---------------------------------------------------
|
||||
|
||||
function atBottom(view) {
|
||||
const feed = view.feed;
|
||||
return feed.scrollHeight - feed.scrollTop - feed.clientHeight < NEAR_BOTTOM;
|
||||
}
|
||||
|
||||
function down(view) {
|
||||
view.feed.scrollTop = view.feed.scrollHeight;
|
||||
}
|
||||
|
||||
function dayOf(ts) {
|
||||
const date = new Date(ts);
|
||||
return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
|
||||
}
|
||||
|
||||
// label — дата разделителя. Короткая форма на мобильном без точки
|
||||
// сокращения: так в эталоне.
|
||||
function label(ts) {
|
||||
if (wide()) {
|
||||
return DAY_LONG.format(ts);
|
||||
}
|
||||
return DAY_SHORT.format(ts).replace(/\.$/, "");
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
// Список чатов в сайдбаре — docs/ui.md, «Список чатов».
|
||||
//
|
||||
// Секции «каналы» и «личные», порядок — по lastId по убыванию (его держит
|
||||
// sync.chats). Пустая секция не рисуется: комнат до этапа 3 нет.
|
||||
|
||||
import * as sync from "../sync.js";
|
||||
import { clear, el } from "./dom.js";
|
||||
|
||||
const SECTIONS = [
|
||||
["room", "каналы"],
|
||||
["dm", "личные"],
|
||||
];
|
||||
|
||||
// mount рисует список в root и держит его в актуальном виде, пока экран
|
||||
// жив. Отдаёт отписку.
|
||||
export function mount(root, ctx, active) {
|
||||
// Событий «chats» приходит больше одного подряд; рисует последнее.
|
||||
let generation = 0;
|
||||
const paint = async () => {
|
||||
const mine = ++generation;
|
||||
let list;
|
||||
try {
|
||||
list = await sync.chats();
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
if (mine !== generation) {
|
||||
return;
|
||||
}
|
||||
clear(root);
|
||||
for (const [type, title] of SECTIONS) {
|
||||
const part = list.filter((chat) => chat.type === type);
|
||||
if (part.length === 0) {
|
||||
continue;
|
||||
}
|
||||
const items = el("ul", "items");
|
||||
for (const chat of part) {
|
||||
items.append(item(ctx, chat, active));
|
||||
}
|
||||
root.append(el("h2", "section", title), items);
|
||||
}
|
||||
};
|
||||
const off = sync.on("chats", paint);
|
||||
paint();
|
||||
return off;
|
||||
}
|
||||
|
||||
function item(ctx, chat, active) {
|
||||
const row = el("li");
|
||||
const button = el("button", "item");
|
||||
button.type = "button";
|
||||
if (chat.id === active) {
|
||||
// Активный чат — инверсия (docs/identity/brief.md).
|
||||
button.classList.add("is-active");
|
||||
button.setAttribute("aria-current", "true");
|
||||
}
|
||||
button.append(el("span", "item__name", sigil(chat) + chat.title));
|
||||
if (chat.unread > 0) {
|
||||
button.append(el("span", "n", String(chat.unread)));
|
||||
}
|
||||
button.addEventListener("click", () => ctx.go(hashOf(chat)));
|
||||
row.append(button);
|
||||
return row;
|
||||
}
|
||||
|
||||
// Сигил ставит экран: в базе чат зовётся без «@» и «#» (docs/storage.md).
|
||||
function sigil(chat) {
|
||||
return chat.type === "dm" ? "@" : "#";
|
||||
}
|
||||
|
||||
function hashOf(chat) {
|
||||
return chat.type === "dm" ? `#/dm/${chat.peer}` : `#/room/${chat.roomId}`;
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
// Карточка контакта — docs/ui.md, «Карточка контакта».
|
||||
//
|
||||
// Смена ключа собеседника и «доверять новому ключу» появятся вместе
|
||||
// с TOFU (этап 3, ADR-016): до тех пор у записи peers нет pending.
|
||||
|
||||
import * as sync from "../sync.js";
|
||||
import { fingerprintGroups } from "../crypto.js";
|
||||
import { button, el, message, setError, setNote } from "./dom.js";
|
||||
|
||||
export function renderContact(root, ctx, nick) {
|
||||
root.append(head(ctx, nick));
|
||||
const body = el("div", "body settings");
|
||||
root.append(body);
|
||||
|
||||
const card = el("section", "block block--first");
|
||||
body.append(card, remove(ctx, nick));
|
||||
|
||||
// Отпечаток лежит в записи TOFU; её может ещё не быть, если чат
|
||||
// открыли до первого ключа.
|
||||
sync.peer(nick).then((record) => {
|
||||
if (!record?.fingerprint || !card.isConnected) {
|
||||
return;
|
||||
}
|
||||
const groups = fingerprintGroups(record.fingerprint);
|
||||
card.append(
|
||||
el("p", "fp", groups.slice(0, 8).join(" ")),
|
||||
el("p", "fp", groups.slice(8).join(" ")),
|
||||
el("p", "fp-hint", "сверьте с собеседником голосом или лично"),
|
||||
);
|
||||
}).catch(() => {});
|
||||
}
|
||||
|
||||
function head(ctx, nick) {
|
||||
const bar = el("div", "head");
|
||||
const back = el("button", "back", "назад");
|
||||
back.type = "button";
|
||||
back.addEventListener("click", () => ctx.go(`#/dm/${nick}`));
|
||||
bar.append(back, el("span", "title", `@${nick}`));
|
||||
return bar;
|
||||
}
|
||||
|
||||
// remove — «убрать из списка»: строка контакта уходит с сервера, история
|
||||
// на устройстве остаётся (ADR-019).
|
||||
function remove(ctx, nick) {
|
||||
const box = el("section", "block");
|
||||
const note = message();
|
||||
const drop = button("убрать из списка");
|
||||
drop.addEventListener("click", async () => {
|
||||
drop.disabled = true;
|
||||
setNote(note, "");
|
||||
try {
|
||||
await sync.forgetChat(sync.dmChatId(nick));
|
||||
ctx.go("#/");
|
||||
} catch (err) {
|
||||
setError(note, ctx.errorText(err));
|
||||
drop.disabled = false;
|
||||
}
|
||||
});
|
||||
box.append(drop, note);
|
||||
return box;
|
||||
}
|
||||
@@ -3,6 +3,15 @@
|
||||
|
||||
const SVG = "http://www.w3.org/2000/svg";
|
||||
|
||||
// DESKTOP — порог десктопа: сайдбар и чат рядом, один экран за раз кончается
|
||||
// (docs/ui.md, «Каркас»). Экраны спрашивают ширину в момент события, а не
|
||||
// перерисовываются на каждое изменение размера.
|
||||
export const DESKTOP = "(min-width: 760px)";
|
||||
|
||||
export function wide() {
|
||||
return matchMedia(DESKTOP).matches;
|
||||
}
|
||||
|
||||
export function el(tag, className, text) {
|
||||
const node = document.createElement(tag);
|
||||
if (className) {
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
// Новый чат — docs/ui.md, «Новый чат». Строка `#имя комнаты` появится
|
||||
// вместе с комнатами (этап 3): создавать пока нечего.
|
||||
|
||||
import * as sync from "../sync.js";
|
||||
import { el, message, setError, setNote } from "./dom.js";
|
||||
|
||||
export function renderNew(root, ctx) {
|
||||
root.append(head(ctx));
|
||||
|
||||
const body = el("div", "body");
|
||||
const form = el("form", "form");
|
||||
form.noValidate = true;
|
||||
|
||||
const row = el("div", "input");
|
||||
const prompt = el("span", "p", ">");
|
||||
prompt.setAttribute("aria-hidden", "true");
|
||||
const field = el("input", "input__field");
|
||||
field.type = "text";
|
||||
field.placeholder = "@ник";
|
||||
field.autocapitalize = "off";
|
||||
field.autocomplete = "off";
|
||||
field.spellcheck = false;
|
||||
const go = el("button", "input__send", ">");
|
||||
go.type = "submit";
|
||||
row.append(prompt, field, go);
|
||||
|
||||
const note = message();
|
||||
form.append(row, note);
|
||||
|
||||
form.addEventListener("submit", async (event) => {
|
||||
event.preventDefault();
|
||||
if (go.disabled) {
|
||||
return;
|
||||
}
|
||||
setNote(note, "");
|
||||
// Ник вводят как в списке: с «@» или без. Регистр не хранится —
|
||||
// ники строчные (ADR-019).
|
||||
const nick = field.value.trim().replace(/^@/, "").toLowerCase();
|
||||
if (nick === "") {
|
||||
field.focus();
|
||||
return;
|
||||
}
|
||||
field.value = nick;
|
||||
go.disabled = true;
|
||||
try {
|
||||
await sync.openDm(nick);
|
||||
ctx.go(`#/dm/${nick}`);
|
||||
} catch (err) {
|
||||
setError(note, ctx.errorText(err));
|
||||
field.focus();
|
||||
} finally {
|
||||
go.disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
body.append(form);
|
||||
root.append(body);
|
||||
field.focus();
|
||||
}
|
||||
|
||||
function head(ctx) {
|
||||
const bar = el("div", "head");
|
||||
const back = el("button", "back", "назад");
|
||||
back.type = "button";
|
||||
back.addEventListener("click", () => ctx.go("#/"));
|
||||
bar.append(back, el("span", "title", "новый чат"));
|
||||
return bar;
|
||||
}
|
||||
+16
-11
@@ -1,19 +1,22 @@
|
||||
// Каркас: сайдбар со списком чатов и место под экран — docs/ui.md, «Каркас»
|
||||
// и «Список чатов». Чаты появятся на этапе 2, секции пока пустые.
|
||||
// и «Список чатов».
|
||||
|
||||
import { el, mark } from "./dom.js";
|
||||
import { mount } from "./chats.js";
|
||||
|
||||
// frame отдаёт корень и место под экран. screen — что показывать
|
||||
// на мобильном, где виден один экран за раз: "list" или "screen".
|
||||
export function frame(ctx, screen) {
|
||||
// frame отдаёт корень, место под экран и отписку списка чатов.
|
||||
// screen — что показывать на мобильном, где виден один экран за раз:
|
||||
// "list" или "screen". active — чат, который сейчас открыт.
|
||||
export function frame(ctx, screen, active = null) {
|
||||
const root = el("div", "shell");
|
||||
root.dataset.screen = screen;
|
||||
const main = el("main", "main");
|
||||
root.append(side(ctx), main);
|
||||
return { root, main };
|
||||
const { nav, dispose } = side(ctx, active);
|
||||
root.append(nav, main);
|
||||
return { root, main, dispose };
|
||||
}
|
||||
|
||||
function side(ctx) {
|
||||
function side(ctx, active) {
|
||||
const nav = el("nav", "side");
|
||||
|
||||
const brand = el("div", "brand");
|
||||
@@ -21,9 +24,11 @@ function side(ctx) {
|
||||
nav.append(brand);
|
||||
|
||||
const list = el("div", "list");
|
||||
for (const title of ["каналы", "личные"]) {
|
||||
list.append(el("h2", "section", title), el("ul", "items"));
|
||||
}
|
||||
const add = el("button", "item item--new", "+ новый чат");
|
||||
add.type = "button";
|
||||
add.addEventListener("click", () => ctx.go("#/new"));
|
||||
const items = el("div");
|
||||
list.append(add, items);
|
||||
nav.append(list);
|
||||
|
||||
const me = el("button", "me");
|
||||
@@ -34,5 +39,5 @@ function side(ctx) {
|
||||
me.addEventListener("click", () => ctx.go("#/settings"));
|
||||
nav.append(me);
|
||||
|
||||
return nav;
|
||||
return { nav, dispose: mount(items, ctx, active) };
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user