Палитра «Сияние» по умолчанию, новые роли цветов. Лента канала: плоские записи, ряд действий с равным шагом иконок, дата у записи. Обсуждение со строкой ввода, личный чат, шторки. Вход и регистрация: стартовый экран (надпись «СИЯНИЕ», сияние мандалы), настройки входа со статусами серверов, статус логина в одну строку, вход с другого устройства (код, таймер, шаги), сохранение ключей с переключателями. Корневые разделы – заголовок по центру; фильтр чатов – переключатель; уведомления – список как в чатах; фото – просмотр на весь экран. Общее: один зазор под шапкой (--page-top-gap), переключатели высотой с поле ввода, второстепенные кнопки по одной роли (в том числе на экранах устройств и серверов), иконки только из ui-icon.js, полоса прокрутки скрыта, среднее тире в текстах интерфейса. Что нужно от сервера и разработчика – docs/UI-Design/UI-v4-for-dev.md. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
7.7 KiB
UI v3–v4: что нужно от сервера и что знать разработчику
Макет V3/V4 перенесён в настоящий код (v3) и доведён по экранам (v4): палитра «Сияние», лента канала, обсуждение, личный чат, вход и регистрация, уведомления, настройки, просмотр фото. Всё сделано на текущем API без его изменений. Там, где интерфейсу не хватает сервера, UI к этому готов: нет данных – элемент просто не появляется.
Нужно от сервера
-
Кто недавно ответил – миниатюры рядом со счётчиком обсуждения в ленте канала. Поле
recentRepliers: string[](до двух логинов, свежие первыми) у сообщений вGetChannelMessagesиGetMessageThread. UI:channel-view.js,mapApiMessageToPost→recentRepliers. Нет поля – нет миниатюр. -
«Не уведомлять об ответах» в обсуждении. Пункт меню обсуждения сейчас запоминает выбор только на устройстве (
localStorage, ключshine-ui-thread-muted-v1) и на уведомления не влияет. Нужна настройка пользователя «без уведомлений об ответах в этом обсуждении» (по ссылке на исходную запись), учитываемая при создании уведомленийreply. Удобно через существующийUpsertUserSetting. -
Ссылка на комментарий. «Поделиться комментарием» даёт ссылку на обсуждение с якорем
#comment-<blockNumber>. Роутер якорь игнорирует. Нужно: при открытии обсуждения с таким якорем прокрутить к комментарию и подсветить (в UI для этого естьjumpToвchannel-thread-view.js). -
Уведомления об ответах – на что ответили (по желанию). В уведомлении есть только текст ответа (
sourceText). Чтобы показать «в ответ на: …», нужен короткий текст исходного сообщения (targetText) вGetNotifications. -
Стоимость публикации (экран «Публикация · подтверждение» макета). Шага подтверждения в приложении нет – запись уходит сразу. Если публикация станет платной или будет ждать Arweave, нужна цена до отправки.
Нужно от разработчика
- Удалить
pages/key-storage-view.jsи маршрут/key-storage. Экран никуда не подключён: в поля вписаны описания ключей, «OK» вызываетauthorizeSession()без данных. Настоящий выбор ключей –registration-keys-view.js(переделан в v4). Вместе с ним можно убрать.key-storage-option*/.key-storage-note*вdeveloper-tools.css.
Что важно знать об изменениях v4
- Второстепенные кнопки – одна роль во всём приложении, включая экраны устройств и серверов: прозрачная, рамка, цвет
--action. - Полоса прокрутки скрыта по умолчанию (
scrollbar: 'hidden'в режимах оболочкиapp.js) – как было у каналов, ленты и обсуждения. Прокрутка работает, контент не прыгает при появлении полосы. - Один зазор под шапкой:
--page-top-gapвmain.css(12 px). Его берутapp-shell.css, каналы и экраны входа – свои отступы сверху экранам не нужны. - Шапка корневых разделов (Чаты, Каналы, Связи, Уведомления, Профиль) – заголовок по центру, 24 px (
.topbar--root). - Переключатели
.tabs– высотой с поле ввода (44 px, кнопки 34 px);.tabs--dense– для 4–5 коротких пунктов (фильтр чатов вместо чипов). - Новые общие компоненты:
components/media-viewer.js+styles/components/media-viewer.css(фото/видео на весь экран, «1/3» и «Скачать» под фото; заменилopenAttachmentViewerи кнопку скачивания на фото),components/shine-wordmark.js(надпись «СИЯНИЕ» в контурах, шрифт Tenor Sans, OFL), переключатель.switch(перенесён изsettings.cssвprimitives.css). - Иконки – только из
ui-icon.js(добавленыeye,eyeOff;iconHtml(name, filled, className)). Текстовые символы вместо иконок («↻», «+», «✕») заменены. - «Дополнительные настройки» теперь открываются пятью быстрыми нажатиями на заголовок «Настройки» (логотип над настройками убран).
- Стартовый экран: знак по центру, кнопки внизу; сияние мандалы – два вращающихся слоя в
preauth.css(.auth-logo-wrap::before/::after), фаза случайная; приprefers-reduced-motionнеподвижно. - Тексты: в строках интерфейса только среднее тире с пробелами «–» (длинное «—» заменено везде, кроме комментариев).
- Уведомления – список как в чатах; «Настройки входа» – одна карточка серверов со статусом-пилюлей, проверка при открытии; вход с другого устройства – код, таймер, три шага.
Найденные ошибки (не наши)
styles/components/avatar.css:url("../assets/glass_overlay_faithful.png")ведёт вstyles/assets/…– файла там нет, стеклянный ободок аватара не загружается. Путь должен быть../../assets/….- Обработчик ошибок в
index.htmlпоказывал красную плашку «BOOT ERROR ResizeObserver loop…» – это предупреждение браузера, не ошибка. В v3 отсеивается. - Пункты 1–2 из
ISSUES-for-dev.md(подписки у логинов с заглавными, превью «Сообщение недоступно») по-прежнему актуальны. - Вход по паролю на
http://по адресу в локальной сети не работает («Криптография браузера недоступна»): WebCrypto есть только на https и localhost. Это ограничение браузера – для проверки с телефона нужен https.