Чат v1.1.1: упростить ввод и стороны по устройству

2026-08-24 12:17:13 +03:00
parent d7624dfade
commit 1a56d2f8a1
17 changed files with 146 additions and 318 deletions
@@ -1,6 +1,6 @@
 # ADR-024: Айдентика «Скобы», интерфейс и язык

-Уточнён [ADR-075](075-no-zoom-app-feel.md) (масштабирование запрещено, размеры шрифтов прежние), [ADR-067](067-version-in-sidebar-foot.md) (версия и время коммита в подвале сайдбара) и [ADR-069](069-message-input-is-editable-block.md) (строка сообщения — редактируемый блок).
+Уточнён [ADR-075](075-no-zoom-app-feel.md) (масштабирование запрещено, размеры шрифтов прежние), [ADR-067](067-version-in-sidebar-foot.md) (версия и время коммита в подвале сайдбара), [ADR-076](076-ios-input-accessory-is-system.md) (строка сообщения — `textarea`) и [ADR-077](077-message-alignment-by-pointer.md) (стороны сообщений зависят от способа ввода).

 ## Контекст

@@ -1,5 +1,7 @@
 # ADR-064: строка ввода — div, а не form

+Пересмотрен [ADR-076](076-ios-input-accessory-is-system.md): ни контейнер, ни вид редактируемого элемента не дают веб-странице управления системной панелью iOS; поле снова стало `textarea`, контейнер `div` оставлен как безвредная деталь реализации.
+
 Уточняет `docs/ui.md`, «Доступность»: `form` в списке семантики держит `role="form"`, а не элемент `<form>`, — для строки ввода чата.

 Пересмотрен [ADR-069](069-message-input-is-editable-block.md). Диагноз здесь неверен: полосу помощника форм iOS рисует не из-за `<form>`, а для любых `input` и `textarea`, — вынос поля из формы её не убрал. Контейнер `div` с `role="form"` и кнопка `type="button"` остаются, `textarea` заменён редактируемым блоком — тем самым «следующим шагом», который записан ниже в «Следствиях».
@@ -19,7 +21,7 @@
 - `<form class="compose">` → `<div class="compose" role="form">`. `role="form"` — тот же ориентир для скринридера, что и элемент `<form>`, без вызывающих панель heuristics WebKit.
 - Кнопка отправки — `type="button"` с явным `click`, вместо `type="submit"` и события `submit` на форме.
 - `autocomplete="off"` на самом поле — на случай, если панель зависит ещё и от него, а не только от `<form>`.
- `textarea`, `maxLength`, `field-sizing: content`, placeholder — без изменений.
+- На момент решения `textarea`, `maxLength`, `field-sizing: content` и placeholder оставались без изменений; актуальное состояние строки ввода задаёт пересмотревший это решение ADR-076.

 Остальные формы (вход, `#/new`, участники, настройки) не тронуты: там несколько полей в форме, панель навигации между ними — по крайней мере, не чистый минус, и незачем менять то, что не жаловались.

@@ -1,5 +1,7 @@
 # ADR-065: сообщения выравниваются по стороне — свои вправо, чужие влево

+Уточнён [ADR-077](077-message-alignment-by-pointer.md): стороны остаются на телефоне и планшете, на десктопе все сообщения выравниваются слева.
+
 Пересматривает часть [ADR-024](024-identity-and-ui.md): десктопную сетку ленты «автор 132 px + текст» из `docs/identity/brief.md`, «Компоновка». Уточняет `docs/ui.md`, «Чат».

 ## Контекст
@@ -1,5 +1,7 @@
 # ADR-069: Строка сообщения — редактируемый блок, а не поле формы

+Пересмотрен [ADR-076](076-ios-input-accessory-is-system.md): проверка на реальном iPhone опровергла главное следствие — системная панель остаётся и у `contenteditable`; строка снова стала `textarea`.
+
 Уточняет [ADR-024](024-identity-and-ui.md) («Чат» и «Доступность» в `docs/ui.md`) и [ADR-075](075-no-zoom-app-feel.md): в перечне элементов управления, по которым второй тап не гасится, прибавился редактируемый блок.

 Уточнён [ADR-071](071-input-limit-cuts-what-arrives.md): предел держится до вставки и режет приходящее, а не хвост блока.
@@ -1,5 +1,7 @@
 # ADR-071: Предел строки сообщения держится до вставки

+Пересмотрен [ADR-076](076-ios-input-accessory-is-system.md): после возврата к `textarea` предел снова держит нативный `maxLength`; ручная обработка вставки больше не нужна.
+
 Уточняет [ADR-069](069-message-input-is-editable-block.md): предел 4000 символов держит по-прежнему сам блок, но режет он приходящее, а не набранное.

 ## Контекст
@@ -2,7 +2,7 @@

 Уточняет [ADR-024](024-identity-and-ui.md): типографика из `docs/identity/brief.md` остаётся как записана, а страница перестаёт масштабироваться.

-Уточнён [ADR-069](069-message-input-is-editable-block.md): строка сообщения стала редактируемым блоком, и она в перечне элементов управления, по которым второй тап не гасится.
+Уточнён [ADR-076](076-ios-input-accessory-is-system.md): строка сообщения снова стала `textarea`; она уже входит в перечень элементов управления, по которым второй тап не гасится.

 ## Контекст

@@ -0,0 +1,26 @@
+# ADR-076: Панель ввода iOS системная, строка сообщения — `textarea`
+
+Пересматривает [ADR-064](064-composer-not-form.md), [ADR-069](069-message-input-is-editable-block.md) и [ADR-071](071-input-limit-cuts-what-arrives.md). Уточняет `docs/ui.md`, «Чат» и «Доступность».
+
+## Контекст
+
+В v1.1 строка сообщения прошла два варианта: `textarea` вынесли из `<form>`, затем заменили на `contenteditable="plaintext-only"`. Оба решения исходили из предположения, что системная полоса iOS со стрелками и «готово» появляется только у поля формы.
+
+Проверка v1.1 на реальном iPhone опровергла предположение: полоса осталась и у `contenteditable`. Это часть клавиатурного интерфейса WebKit, а не узел страницы. Web API для её отключения нет. В нативной оболочке внешний вид клавиатуры может менять хост iOS; установленная PWA остаётся веб-страницей и такого доступа не получает.
+
+`contenteditable` при этом стоил клиенту ручной реализации подсказки, предела, вставки без разметки, переноса строки, `disabled`, счётчика, работы IME и запасного пути для браузеров без `plaintext-only`. Главное следствие ADR-069 не наступило, а цена осталась.
+
+## Решение
+
+- Строка сообщения снова становится `textarea` с нативными `placeholder`, `maxLength`, `disabled`, выделением, вставкой и отменой. Число `rows` считается по фактической высоте текста от одной до семи: это сохраняет автовысоту в Safari без поддержки `field-sizing`. Доступное имя повторяет подсказку через `aria-label`, кнопка `>` объявляется как «отправить»; `autocapitalize`, `autocorrect` и `enterkeyhint` остаются прежними.
+- Контейнер `div role="form"` и кнопка `type="button"` остаются. Они не убирают системную панель, но и не создают отдельного поведения; менять их ещё раз без причины незачем.
+- Системная панель iOS принимается как ограничение веб-клиента. `inputmode="none"` и собственная экранная клавиатура не используются: убрать вместе с панелью системную клавиатуру означает потерять обычный набор, раскладки, диктовку и доступность.
+- Нативная iOS-оболочка не добавляется в Bare. Если абсолютное управление панелью станет требованием, это отдельный продуктовый и архитектурный выбор.
+- Тап по неинтерактивному месту истории вызывает `blur()` строки сообщения и закрывает клавиатуру. Кнопки и ссылки в ленте сохраняют своё действие.
+
+## Следствия
+
+- Строка сообщения снова опирается на браузерное текстовое поле и стала заметно проще. Лишнее не проходит через `maxLength`; ручная обработка `beforeinput`, вставки, IME и текстовых узлов удалена.
+- Полоса со стрелками и «готово» на iPhone остаётся. Код и документация больше не обещают веб-странице контроль над системным UI.
+- Тап по истории возвращает место ленте без нажатия системной кнопки «готово».
+- Проверка самой панели по-прежнему требует реального iPhone; поведение `textarea`, отправки и снятия фокуса проверяется в обычном браузере.
@@ -0,0 +1,21 @@
+# ADR-077: На десктопе все сообщения слева, на touch свои справа
+
+Уточняет [ADR-065](065-message-side-alignment.md) и `docs/ui.md`, «Чат».
+
+## Контекст
+
+ADR-065 развёл свои и чужие сообщения по сторонам на всех экранах. На телефоне и планшете сторона ускоряет чтение короткой узкой ленты. На десктопе широкая лента даёт обратный эффект: взгляд ходит между краями, хотя цвет собственного ника уже отличает автора.
+
+Порог ширины не отличает тип устройства. Планшет бывает шире небольшого окна ноутбука и не должен менять привычную мобильную сторону только из-за поворота экрана.
+
+## Решение
+
+- На устройстве с точным основным указателем и наведением (`hover: hover` и `pointer: fine`) все блоки сообщений выравниваются по левому краю.
+- В остальных случаях сохраняется ADR-065: свои сообщения справа, чужие слева. Это телефоны, планшеты и другие touch-интерфейсы.
+- Поток, ограничение ширины блока, автор над текстом, цвет своего ника и полноширинные разделители не меняются.
+
+## Следствия
+
+- Десктопная лента снова читается по одному левому краю, но не возвращается к старой сетке `132px 1fr`.
+- Планшет не считается десктопом только из-за ширины экрана.
+- Гибридное устройство следует своему основному указателю, который сообщает браузер. Подключение дополнительной мыши само по себе правило не меняет.