Этап 5: история — экспорт и импорт .bare, устройства, место, пагинация
Экспорт: ключ архива из секрета аккаунта через HKDF, заголовок ровно 65 байт (magic, версия, соль, 32 сырых байта отпечатка владельца, iv) и он же целиком AAD шифротекста. Ника владельца в файле нет. Импорт сверяет отпечаток до расшифровки, сливает идемпотентно по id, а записи peers берёт только для ников, которых в локальном TOFU ещё нет: архивом доверие к ключу не перебить. Настройки: устройства с датой и пометкой «это устройство», «занято N МБ», кнопка «экспортировать» в подтверждении выхода и в подтверждении входа под другим ником — долг этапа 1 и обещание ADR-029 закрыты. Лента: страницы по 50 с подгрузкой вверх без прыжка прокрутки; новая страница вставляется, а не пересобирает ленту. ADR-050: импорт не перезаписывает лежащую запись — у своей есть состояние отправки, которого в архиве нет. ADR-054: архив — недоверенный ввод. Ревью собрало архивы с ts вне диапазона Date, мусорным lastId, ником с bidi-переопределением и roomId с обходом пути: каждый из них навсегда ломал ленту или счётчик. Теперь форма ника, roomId, id, ts и автора проверяется, а lastId из файла не читается вовсе. ADR-051, 052, 053: тексты и кнопки, устройства и место, страницы ленты без виртуализации. Приёмка: формат сверен побайтно на модулях, скачанных с боевого сервера, — смещения заголовка, отпечаток сырыми байтами, новые соль и iv на каждый экспорт, подмена любого байта заголовка ломает расшифровку, чужой секрет не открывает, семь видов битых файлов отвергнуты. 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
+25
-4
@@ -1,6 +1,7 @@
|
||||
// Экран входа и регистрации — docs/ui.md, «Вход и регистрация».
|
||||
|
||||
import { clear, confirmPanel, el, field, mark, message, setError, setNote } from "./dom.js";
|
||||
import { exportHistory } from "../export.js";
|
||||
import { EXPORT_FAILED, clear, confirmPanel, el, field, mark, message, setError, setNote } from "./dom.js";
|
||||
|
||||
const HINT = "пароль — это ключ шифрования, а не запись в базе. восстановления нет. "
|
||||
+ "не короче 12 символов; лучше — фраза из нескольких слов.";
|
||||
@@ -58,8 +59,11 @@ function screen(ctx, view, paint) {
|
||||
form.append(submit);
|
||||
|
||||
// На устройстве могут лежать ключи другого ника: вход под этим сотрёт
|
||||
// историю прежнего, поэтому сначала подтверждение (ADR-029).
|
||||
const wipe = confirmPanel("", "удалить");
|
||||
// историю прежнего, поэтому сначала подтверждение (ADR-029). История
|
||||
// на устройстве — единственная копия, и подтверждение предлагает сначала
|
||||
// сохранить её: секрет прежнего аккаунта ещё здесь, экспорту сессия
|
||||
// не нужна (ADR-014).
|
||||
const wipe = confirmPanel("", "удалить", "экспортировать");
|
||||
form.append(wipe.root);
|
||||
|
||||
const note = message();
|
||||
@@ -101,6 +105,22 @@ function screen(ctx, view, paint) {
|
||||
wipe.root.hidden = true;
|
||||
submit.hidden = false;
|
||||
};
|
||||
// Экспорт подтверждение не закрывает: архив скачался, а входить или нет —
|
||||
// отдельное решение.
|
||||
wipe.extra.addEventListener("click", async () => {
|
||||
if (wipe.extra.disabled) {
|
||||
return;
|
||||
}
|
||||
wipe.extra.disabled = true;
|
||||
fail("");
|
||||
try {
|
||||
await exportHistory();
|
||||
} catch {
|
||||
fail(EXPORT_FAILED);
|
||||
} finally {
|
||||
wipe.extra.disabled = false;
|
||||
}
|
||||
});
|
||||
wipe.no.addEventListener("click", () => {
|
||||
hideWipe();
|
||||
submit.focus();
|
||||
@@ -151,7 +171,8 @@ function screen(ctx, view, paint) {
|
||||
wipe.text.textContent = `на этом устройстве история @${other}. вход под другим ником удалит её.`;
|
||||
wipe.root.hidden = false;
|
||||
submit.hidden = true;
|
||||
wipe.yes.focus();
|
||||
// Фокус — на «экспортировать»: с него безопасно начинать.
|
||||
wipe.extra.focus();
|
||||
return;
|
||||
}
|
||||
await run();
|
||||
|
||||
+157
-23
@@ -34,6 +34,11 @@ const NAME_IN_HINT = 12;
|
||||
// сообщение подматывает ленту только тогда, когда он и так смотрит конец.
|
||||
const NEAR_BOTTOM = 80;
|
||||
|
||||
// Насколько близко к верхнему краю берётся следующая страница. Запас
|
||||
// в экран: страница успевает приехать до того, как человек упрётся
|
||||
// в край (ADR-053).
|
||||
const NEAR_TOP = 200;
|
||||
|
||||
// renderChat рисует чат в root и отдаёт отписку.
|
||||
export function renderChat(root, ctx, chatId) {
|
||||
const view = {
|
||||
@@ -53,9 +58,19 @@ export function renderChat(root, ctx, chatId) {
|
||||
// Комнаты у нас больше нет: вышли сами, убрал владелец, комната
|
||||
// удалена. Ввод заблокирован, лента остаётся (ADR-044).
|
||||
gone: false,
|
||||
// Лента: записи по возрастанию id и их строки в разметке.
|
||||
// Лента: записи по возрастанию id и их разметка — строка и её
|
||||
// разделители, id → {node, marks}.
|
||||
items: [],
|
||||
nodes: new Map(),
|
||||
// Выше загруженного есть ещё сообщения: последняя страница пришла
|
||||
// целой (ADR-053).
|
||||
more: false,
|
||||
// Страница уже едет: событий scroll приходит много подряд.
|
||||
loading: false,
|
||||
// Граница «новых» на момент открытия: было ли непрочитанное и докуда
|
||||
// читали. Сама граница считается по всему загруженному — подгрузка
|
||||
// вверх двигает её выше (ADR-053).
|
||||
mark: { unread: false, bound: null },
|
||||
// Граница «новых»: первый непрочитанный на момент открытия.
|
||||
newId: null,
|
||||
chain: Promise.resolve(),
|
||||
@@ -67,6 +82,12 @@ export function renderChat(root, ctx, chatId) {
|
||||
view.body = el("div", "grid");
|
||||
view.body.setAttribute("aria-live", "polite");
|
||||
view.feed.append(view.body);
|
||||
// Прокрутка к верхнему краю берёт следующую страницу (ADR-053).
|
||||
view.feed.addEventListener("scroll", () => {
|
||||
if (view.feed.scrollTop <= NEAR_TOP) {
|
||||
pull(view);
|
||||
}
|
||||
});
|
||||
root.append(view.feed);
|
||||
|
||||
root.append(composer(view));
|
||||
@@ -258,27 +279,133 @@ async function load(view) {
|
||||
return;
|
||||
}
|
||||
view.items = list;
|
||||
view.newId = firstUnread(record, list, view.me);
|
||||
// Страница пришла целой — выше есть ещё (ADR-053).
|
||||
view.more = list.length >= sync.PAGE;
|
||||
view.mark = { unread: (record?.unread ?? 0) > 0, bound: record?.lastReadId ?? null };
|
||||
view.newId = firstUnread(view.mark, list, view.me);
|
||||
paint(view, true);
|
||||
// Фокус в строку ввода при открытии чата на десктопе (docs/ui.md,
|
||||
// «Доступность»); на мобильном это подняло бы клавиатуру на весь экран.
|
||||
if (wide()) {
|
||||
view.field.focus();
|
||||
}
|
||||
reach(view);
|
||||
await read(view);
|
||||
}
|
||||
|
||||
// firstUnread — граница «новых»: первый чужой непрочитанный. Своё
|
||||
// непрочитанным не бывает, поэтому и границей не становится.
|
||||
function firstUnread(record, list, me) {
|
||||
if (!record || record.unread <= 0) {
|
||||
//
|
||||
// Считается по всему загруженному: чат с сотней непрочитанных открывается
|
||||
// последней страницей, и первый из них лежит выше — граница находится,
|
||||
// когда до него домотают (ADR-053).
|
||||
function firstUnread(mark, list, me) {
|
||||
if (!mark.unread) {
|
||||
return null;
|
||||
}
|
||||
const bound = record.lastReadId;
|
||||
const found = list.find((m) => m.from !== me && (!bound || m.id > bound));
|
||||
const found = list.find((m) => m.from !== me && (!mark.bound || m.id > mark.bound));
|
||||
return found ? found.id : null;
|
||||
}
|
||||
|
||||
// --- страницы -----------------------------------------------------------
|
||||
|
||||
// pull просит следующую страницу. Событий scroll приходит много подряд,
|
||||
// поэтому вход закрывается до постановки в очередь.
|
||||
function pull(view) {
|
||||
if (!view.more || view.loading || !view.alive) {
|
||||
return;
|
||||
}
|
||||
view.loading = true;
|
||||
run(view, () => older(view));
|
||||
}
|
||||
|
||||
// older дописывает страницу сверху: курсор по индексу «chat» назад
|
||||
// от самого старого загруженного, по 50 (docs/storage.md, ADR-053).
|
||||
// Страница короче полной означает, что выше ничего нет.
|
||||
async function older(view) {
|
||||
const first = view.items[0] ?? null;
|
||||
try {
|
||||
const list = await sync.messagesBefore(view.chatId, first ? first.id : null);
|
||||
if (!view.alive) {
|
||||
return;
|
||||
}
|
||||
if (list.length < sync.PAGE) {
|
||||
view.more = false;
|
||||
}
|
||||
if (list.length === 0) {
|
||||
return;
|
||||
}
|
||||
view.items = [...list, ...view.items];
|
||||
keep(view, () => grow(view, list, first));
|
||||
} catch {
|
||||
// Базы нет — оставляем то, что уже загружено.
|
||||
} finally {
|
||||
view.loading = false;
|
||||
reach(view);
|
||||
}
|
||||
}
|
||||
|
||||
// grow дописывает страницу сверху, не пересобирая ленту: нарисованное
|
||||
// переживает подгрузку — выделение текста не пропадает, а живая область
|
||||
// не зачитывается экранным диктором заново (ADR-053). Заново считаются две
|
||||
// строки: та, что держала линию «новые», если граница уехала выше, и бывшая
|
||||
// первая — у неё появился сосед сверху, а от соседа зависят разделитель
|
||||
// даты и повтор автора.
|
||||
function grow(view, list, head) {
|
||||
const was = view.newId;
|
||||
view.newId = firstUnread(view.mark, view.items, view.me);
|
||||
const page = document.createDocumentFragment();
|
||||
let previous = null;
|
||||
for (const record of list) {
|
||||
line(view, record, previous, page);
|
||||
previous = record;
|
||||
}
|
||||
view.body.insertBefore(page, view.body.firstChild);
|
||||
if (was !== null && was !== view.newId && (head === null || was !== head.id)) {
|
||||
const at = view.items.findIndex((m) => m.id === was);
|
||||
if (at > 0) {
|
||||
reline(view, view.items[at], view.items[at - 1]);
|
||||
}
|
||||
}
|
||||
if (head !== null) {
|
||||
reline(view, head, previous);
|
||||
}
|
||||
}
|
||||
|
||||
// reline перерисовывает одну строку вместе с её разделителями: у неё
|
||||
// сменился сосед сверху или уехала линия «новые».
|
||||
function reline(view, record, previous) {
|
||||
const old = view.nodes.get(record.id);
|
||||
if (!old) {
|
||||
return;
|
||||
}
|
||||
const next = old.node.nextSibling;
|
||||
for (const node of old.marks) {
|
||||
node.remove();
|
||||
}
|
||||
old.node.remove();
|
||||
const box = document.createDocumentFragment();
|
||||
line(view, record, previous, box);
|
||||
view.body.insertBefore(box, next);
|
||||
}
|
||||
|
||||
// keep сохраняет расстояние до низа ленты: подгрузка вверх не должна
|
||||
// двигать то, что человек читает.
|
||||
function keep(view, draw) {
|
||||
const feed = view.feed;
|
||||
const bottom = feed.scrollHeight - feed.scrollTop;
|
||||
draw();
|
||||
feed.scrollTop = feed.scrollHeight - bottom;
|
||||
}
|
||||
|
||||
// reach берёт следующую страницу, когда прокручивать нечего: лента короче
|
||||
// окна, события scroll не будет, а сообщения выше есть.
|
||||
function reach(view) {
|
||||
if (view.feed.scrollHeight <= view.feed.clientHeight) {
|
||||
pull(view);
|
||||
}
|
||||
}
|
||||
|
||||
// read помечает чат прочитанным — после отрисовки: до этого lastReadId
|
||||
// и есть граница «новых» (docs/storage.md).
|
||||
async function read(view) {
|
||||
@@ -293,6 +420,13 @@ async function read(view) {
|
||||
// перерисовать: лента — живая область, и перерисовка заставила бы
|
||||
// экранного диктора зачитать её целиком.
|
||||
async function apply(view, detail) {
|
||||
// Импорт архива приносит недостающую историю пачкой и в середину ленты:
|
||||
// перечитать её целиком дешевле, чем вставлять сообщение за сообщением
|
||||
// (ADR-050).
|
||||
if (detail.whole === true) {
|
||||
await load(view);
|
||||
return;
|
||||
}
|
||||
const incoming = [];
|
||||
for (const id of detail.ids ?? []) {
|
||||
let record = null;
|
||||
@@ -372,35 +506,35 @@ function paint(view, bottom) {
|
||||
}
|
||||
}
|
||||
|
||||
// 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));
|
||||
// line дописывает сообщение в конец parent вместе с разделителями, которые
|
||||
// перед ним нужны. Разделители принадлежат строке: подгрузка страницы
|
||||
// сверху перерисовывает строку вместе с ними, а не всю ленту.
|
||||
function line(view, record, previous, parent = view.body) {
|
||||
const marks = [];
|
||||
if (!previous || dayOf(previous.ts) !== dayOf(record.ts)) {
|
||||
marks.push(divider(label(record.ts), false));
|
||||
}
|
||||
const fresh = record.id === view.newId;
|
||||
if (fresh) {
|
||||
view.body.append(divider("новые", true));
|
||||
if (record.id === view.newId) {
|
||||
marks.push(divider("новые", true));
|
||||
}
|
||||
// Подряд идущие сообщения одного автора — без повтора автора.
|
||||
const first = day || fresh || !previous || previous.from !== record.from;
|
||||
const first = marks.length > 0 || !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);
|
||||
parent.append(...marks, node);
|
||||
view.nodes.set(record.id, { node, marks });
|
||||
}
|
||||
|
||||
// redraw обновляет одну строку на месте: автор и группировка от состояния
|
||||
// сообщения не зависят.
|
||||
function redraw(view, record) {
|
||||
const node = view.nodes.get(record.id);
|
||||
if (!node) {
|
||||
const known = view.nodes.get(record.id);
|
||||
if (!known) {
|
||||
return;
|
||||
}
|
||||
const first = node.classList.contains("is-head");
|
||||
clear(node);
|
||||
node.append(author(view, record, first), text(view, record));
|
||||
const first = known.node.classList.contains("is-head");
|
||||
clear(known.node);
|
||||
known.node.append(author(view, record, first), text(view, record));
|
||||
}
|
||||
|
||||
function divider(caption, fresh) {
|
||||
|
||||
+21
-5
@@ -76,20 +76,36 @@ export function button(text, className = "button") {
|
||||
return node;
|
||||
}
|
||||
|
||||
// confirmPanel — вопрос и две кнопки; спрятан, пока не спросили.
|
||||
// Вопрос отдаётся наружу: его текст бывает известен только к моменту показа.
|
||||
export function confirmPanel(question, yesLabel) {
|
||||
// confirmPanel — вопрос и кнопки; спрятан, пока не спросили. Вопрос
|
||||
// отдаётся наружу: его текст бывает известен только к моменту показа.
|
||||
//
|
||||
// extraLabel — необязательная третья кнопка перед «да». Там, где
|
||||
// подтверждение уносит историю, это «экспортировать»: единственная копия
|
||||
// не должна исчезать без предложения сохранить её (docs/ui.md, ADR-029).
|
||||
// Отдаётся отдельным полем; без неё оно null.
|
||||
export function confirmPanel(question, yesLabel, extraLabel = null) {
|
||||
const root = el("div");
|
||||
root.hidden = true;
|
||||
const text = el("p", "confirm", question);
|
||||
const yes = button(yesLabel);
|
||||
const no = button("отмена");
|
||||
const row = el("div", "row");
|
||||
const extra = extraLabel === null ? null : button(extraLabel);
|
||||
// Три кнопки в один ряд помещаются не всегда: «экспортировать» шире
|
||||
// трети колонки, и ряд переносится (ADR-051).
|
||||
const row = el("div", extra === null ? "row" : "row row--wrap");
|
||||
if (extra !== null) {
|
||||
row.append(extra);
|
||||
}
|
||||
row.append(yes, no);
|
||||
root.append(text, row);
|
||||
return { root, text, yes, no };
|
||||
return { root, text, yes, no, extra };
|
||||
}
|
||||
|
||||
// EXPORT_FAILED — экспорт не собрался: истории не прочитать или ключей
|
||||
// аккаунта на устройстве нет (docs/ui.md, «Тексты состояний»). Текст один
|
||||
// на все три места, где стоит кнопка «экспортировать».
|
||||
export const EXPORT_FAILED = "экспорт не удался";
|
||||
|
||||
// message — строка состояния под формой: ошибка цветом mark, ответ — mute.
|
||||
export function message() {
|
||||
const node = el("p", "message");
|
||||
|
||||
+233
-9
@@ -1,11 +1,22 @@
|
||||
// Настройки — docs/ui.md, «Настройки». На этом этапе только разделы,
|
||||
// которые уже работают: кто ты, уведомления, установка приложения, смена
|
||||
// пароля, выход, удаление аккаунта. Устройства и история — дальше по плану.
|
||||
// Настройки — docs/ui.md, «Настройки»: кто ты, уведомления, установка
|
||||
// приложения, устройства, история, смена пароля, выход, удаление аккаунта.
|
||||
|
||||
import { ApiError } from "../api.js";
|
||||
import { fingerprintGroups } from "../crypto.js";
|
||||
import { ARCHIVE_EXT, ArchiveError, exportHistory, importHistory } from "../export.js";
|
||||
import * as pwa from "../pwa.js";
|
||||
import { INSTALL_IOS, button, confirmPanel, el, field, message, setError, setNote } from "./dom.js";
|
||||
import {
|
||||
EXPORT_FAILED,
|
||||
INSTALL_IOS,
|
||||
button,
|
||||
clear,
|
||||
confirmPanel,
|
||||
el,
|
||||
field,
|
||||
message,
|
||||
setError,
|
||||
setNote,
|
||||
} from "./dom.js";
|
||||
|
||||
// Состояния уведомлений и инструкция установки — docs/ui.md, «Настройки».
|
||||
const NOTIFICATIONS = {
|
||||
@@ -16,6 +27,27 @@ const NOTIFICATIONS = {
|
||||
|
||||
const INSTALL_HINT = "поделиться → на экран «домой»";
|
||||
|
||||
// Сколько символов идентификатора устройства видно в списке (docs/ui.md,
|
||||
// «Настройки»). Восьми хватает, чтобы отличить одно устройство от другого:
|
||||
// идентификатор случайный.
|
||||
const ID_SHOWN = 8;
|
||||
|
||||
// Дата появления устройства — местная, цифрами: она стоит в строке рядом
|
||||
// с идентификатором, и длинная форма её бы утопила (ADR-052).
|
||||
const DEVICE_DAY = new Intl.DateTimeFormat("ru-RU", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
});
|
||||
|
||||
// МБ занятого места — 1024×1024 байта (ADR-052).
|
||||
const MB = 1024 * 1024;
|
||||
|
||||
// Импорт не дошёл до базы: места на устройстве нет или ключей аккаунта
|
||||
// на нём нет (docs/ui.md, «Тексты состояний»). Порча самого файла говорит
|
||||
// о себе своими словами.
|
||||
const IMPORT_FAILED = "импорт не удался";
|
||||
|
||||
export function renderSettings(root, ctx) {
|
||||
root.append(head(ctx));
|
||||
const body = el("div", "body settings");
|
||||
@@ -24,7 +56,7 @@ export function renderSettings(root, ctx) {
|
||||
if (install !== null) {
|
||||
body.append(install);
|
||||
}
|
||||
body.append(passwordBlock(ctx), exitBlock(ctx), deleteBlock(ctx));
|
||||
body.append(devicesBlock(ctx), historyBlock(), passwordBlock(ctx), exitBlock(ctx), deleteBlock(ctx));
|
||||
root.append(body);
|
||||
}
|
||||
|
||||
@@ -137,6 +169,187 @@ function installBlock() {
|
||||
return box;
|
||||
}
|
||||
|
||||
// devicesBlock — «устройства»: список идентификаторов, дата появления
|
||||
// и «удалить» (docs/ui.md, «Настройки»).
|
||||
//
|
||||
// У своей строки кнопки нет: там пометка «это устройство». Удаление уносит
|
||||
// сессии устройства, и на своём это оставило бы человека на экране входа
|
||||
// с целой историей и без объяснения; отцепляет своё устройство «выйти»
|
||||
// (ADR-052).
|
||||
function devicesBlock(ctx) {
|
||||
const box = block("устройства");
|
||||
const list = el("ul", "devices");
|
||||
const note = message();
|
||||
box.append(list, note);
|
||||
|
||||
const row = (item) => {
|
||||
const line = el("li", "device");
|
||||
line.append(el("span", "device__id", item.id.slice(0, ID_SHOWN)));
|
||||
if (Number.isFinite(item.createdAt)) {
|
||||
line.append(el("span", "tag", DEVICE_DAY.format(item.createdAt)));
|
||||
}
|
||||
if (item.current) {
|
||||
line.append(el("span", "tag", "это устройство"));
|
||||
return line;
|
||||
}
|
||||
const drop = el("button", "link", "удалить");
|
||||
drop.type = "button";
|
||||
drop.addEventListener("click", async () => {
|
||||
drop.disabled = true;
|
||||
setNote(note, "");
|
||||
try {
|
||||
await ctx.removeDevice(item.id);
|
||||
await paint();
|
||||
} catch (err) {
|
||||
setError(note, ctx.errorText(err));
|
||||
drop.disabled = false;
|
||||
}
|
||||
});
|
||||
line.append(drop);
|
||||
return line;
|
||||
};
|
||||
|
||||
// paint перечитывает список: он же и есть ответ на удаление.
|
||||
async function paint() {
|
||||
let items;
|
||||
try {
|
||||
items = await ctx.devices();
|
||||
} catch (err) {
|
||||
setError(note, ctx.errorText(err));
|
||||
return;
|
||||
}
|
||||
setNote(note, "");
|
||||
clear(list);
|
||||
for (const item of items) {
|
||||
list.append(row(item));
|
||||
}
|
||||
}
|
||||
|
||||
paint();
|
||||
return box;
|
||||
}
|
||||
|
||||
// historyBlock — «история»: занятое место, экспорт и импорт архива
|
||||
// (docs/ui.md, «Настройки»).
|
||||
function historyBlock() {
|
||||
const box = block("история");
|
||||
// Место занято не только сообщениями: считает его браузер, а не мы
|
||||
// (ADR-009). Браузер, который считать не умеет, строки не получает —
|
||||
// писать в неё нечего (ADR-052).
|
||||
const used = el("p", "state", "");
|
||||
used.hidden = true;
|
||||
// Строка перечитывается и после импорта: «добавлено N сообщений» рядом
|
||||
// с прежней цифрой — две строки об одном действии, говорящие разное.
|
||||
const showSpace = async () => {
|
||||
const bytes = await space();
|
||||
if (bytes === null) {
|
||||
return;
|
||||
}
|
||||
used.textContent = `занято ${megabytes(bytes)} МБ`;
|
||||
used.hidden = false;
|
||||
};
|
||||
showSpace();
|
||||
const out = button("экспорт");
|
||||
const take = button("импорт");
|
||||
// Выбор файла — обычный <input type="file">, спрятанный за кнопкой:
|
||||
// системный вид ему тут не к месту, а поведение нужно родное.
|
||||
const picker = el("input");
|
||||
picker.type = "file";
|
||||
picker.accept = ARCHIVE_EXT;
|
||||
picker.hidden = true;
|
||||
const note = message();
|
||||
box.append(used, out, take, picker, note);
|
||||
|
||||
out.addEventListener("click", () => runExport(out, note));
|
||||
take.addEventListener("click", () => {
|
||||
if (take.disabled) {
|
||||
return;
|
||||
}
|
||||
setNote(note, "");
|
||||
picker.click();
|
||||
});
|
||||
picker.addEventListener("change", async () => {
|
||||
const file = picker.files?.[0] ?? null;
|
||||
// Тот же файл, выбранный второй раз подряд, обязан считаться выбором:
|
||||
// без сброса change не приходит.
|
||||
picker.value = "";
|
||||
if (file === null) {
|
||||
return;
|
||||
}
|
||||
take.disabled = true;
|
||||
try {
|
||||
const added = await importHistory(file);
|
||||
setNote(note, `добавлено ${plural(added)}`);
|
||||
await showSpace();
|
||||
} catch (err) {
|
||||
setError(note, err instanceof ArchiveError ? err.message : IMPORT_FAILED);
|
||||
} finally {
|
||||
take.disabled = false;
|
||||
}
|
||||
});
|
||||
return box;
|
||||
}
|
||||
|
||||
// runExport — «экспорт» в разделе истории и «экспортировать» в подтверждении
|
||||
// выхода: действие одно, кнопки две. Удача говорит сама за себя — браузер
|
||||
// сохраняет файл, писать об этом нечего.
|
||||
async function runExport(action, note) {
|
||||
if (action.disabled) {
|
||||
return;
|
||||
}
|
||||
action.disabled = true;
|
||||
setNote(note, "");
|
||||
try {
|
||||
await exportHistory();
|
||||
} catch {
|
||||
setError(note, EXPORT_FAILED);
|
||||
} finally {
|
||||
action.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
// space — занятое место в байтах или null, если браузер его не считает
|
||||
// (docs/storage.md, ADR-009). Это оценка происхождения целиком: индексы
|
||||
// и служебные страницы IndexedDB тоже занимают место.
|
||||
async function space() {
|
||||
if (!navigator.storage?.estimate) {
|
||||
return null;
|
||||
}
|
||||
try {
|
||||
const { usage } = await navigator.storage.estimate();
|
||||
return Number.isFinite(usage) ? usage : null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// megabytes — «занято N МБ» человеческим числом: до десятых, пока меньше
|
||||
// десяти, дальше целые (ADR-052). Десятые округляются вверх: пара сотен
|
||||
// килобайт — это не «0 МБ».
|
||||
function megabytes(bytes) {
|
||||
const value = bytes / MB;
|
||||
if (value >= 10) {
|
||||
return String(Math.round(value));
|
||||
}
|
||||
return (Math.ceil(value * 10) / 10).toLocaleString("ru-RU");
|
||||
}
|
||||
|
||||
// plural склоняет «сообщение» с числом: «добавлено 1 сообщение»,
|
||||
// «добавлено 2 сообщения», «добавлено 5 сообщений» (docs/ui.md).
|
||||
function plural(count) {
|
||||
const tail = count % 100;
|
||||
const last = count % 10;
|
||||
if (tail < 11 || tail > 14) {
|
||||
if (last === 1) {
|
||||
return `${count} сообщение`;
|
||||
}
|
||||
if (last >= 2 && last <= 4) {
|
||||
return `${count} сообщения`;
|
||||
}
|
||||
}
|
||||
return `${count} сообщений`;
|
||||
}
|
||||
|
||||
function passwordBlock(ctx) {
|
||||
const box = block("сменить пароль");
|
||||
const form = el("form", "form");
|
||||
@@ -198,27 +411,38 @@ function passwordBlock(ctx) {
|
||||
function exitBlock(ctx) {
|
||||
const box = block("выйти");
|
||||
const start = button("выйти");
|
||||
// Кнопки «экспортировать» пока нет: экспорт — этап 5 (docs/plan.md).
|
||||
const panel = confirmPanel("история на этом устройстве будет удалена. экспортировать сначала?", "выйти");
|
||||
// История на этом устройстве — единственная копия, поэтому подтверждение
|
||||
// предлагает сначала сохранить её (docs/ui.md, ADR-029).
|
||||
const panel = confirmPanel(
|
||||
"история на этом устройстве будет удалена. экспортировать сначала?",
|
||||
"выйти",
|
||||
"экспортировать",
|
||||
);
|
||||
const note = message();
|
||||
|
||||
start.addEventListener("click", () => {
|
||||
start.hidden = true;
|
||||
panel.root.hidden = false;
|
||||
panel.yes.focus();
|
||||
panel.extra.focus();
|
||||
});
|
||||
// Экспорт подтверждение не закрывает: человек скачивает архив и решает
|
||||
// дальше сам.
|
||||
panel.extra.addEventListener("click", () => runExport(panel.extra, note));
|
||||
panel.no.addEventListener("click", () => {
|
||||
panel.root.hidden = true;
|
||||
setNote(note, "");
|
||||
start.hidden = false;
|
||||
start.focus();
|
||||
});
|
||||
panel.yes.addEventListener("click", async () => {
|
||||
panel.yes.disabled = true;
|
||||
panel.no.disabled = true;
|
||||
panel.extra.disabled = true;
|
||||
await ctx.signOut();
|
||||
ctx.go("#/");
|
||||
});
|
||||
|
||||
box.append(start, panel.root);
|
||||
box.append(start, panel.root, note);
|
||||
return box;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user