Files
SHiNE-server/docs/UI-Design/UI-v4-for-dev.md
T
qandClaude Opus 5.5 2e62616b46 UI v4: новый стиль по макету V3/V4 и доводка экранов
Палитра «Сияние» по умолчанию, новые роли цветов. Лента канала: плоские записи, ряд действий
с равным шагом иконок, дата у записи. Обсуждение со строкой ввода, личный чат, шторки.
Вход и регистрация: стартовый экран (надпись «СИЯНИЕ», сияние мандалы), настройки входа
со статусами серверов, статус логина в одну строку, вход с другого устройства (код, таймер, шаги),
сохранение ключей с переключателями. Корневые разделы – заголовок по центру; фильтр чатов –
переключатель; уведомления – список как в чатах; фото – просмотр на весь экран.
Общее: один зазор под шапкой (--page-top-gap), переключатели высотой с поле ввода,
второстепенные кнопки по одной роли (в том числе на экранах устройств и серверов),
иконки только из ui-icon.js, полоса прокрутки скрыта, среднее тире в текстах интерфейса.

Что нужно от сервера и разработчика – docs/UI-Design/UI-v4-for-dev.md.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-29 01:36:52 +03:00

7.7 KiB
Raw Blame History

UI v3–v4: что нужно от сервера и что знать разработчику

Макет V3/V4 перенесён в настоящий код (v3) и доведён по экранам (v4): палитра «Сияние», лента канала, обсуждение, личный чат, вход и регистрация, уведомления, настройки, просмотр фото. Всё сделано на текущем API без его изменений. Там, где интерфейсу не хватает сервера, UI к этому готов: нет данных – элемент просто не появляется.

Нужно от сервера

  1. Кто недавно ответил – миниатюры рядом со счётчиком обсуждения в ленте канала. Поле recentRepliers: string[] (до двух логинов, свежие первыми) у сообщений в GetChannelMessages и GetMessageThread. UI: channel-view.js, mapApiMessageToPost → recentRepliers. Нет поля – нет миниатюр.

  2. «Не уведомлять об ответах» в обсуждении. Пункт меню обсуждения сейчас запоминает выбор только на устройстве (localStorage, ключ shine-ui-thread-muted-v1) и на уведомления не влияет. Нужна настройка пользователя «без уведомлений об ответах в этом обсуждении» (по ссылке на исходную запись), учитываемая при создании уведомлений reply. Удобно через существующий UpsertUserSetting.

  3. Ссылка на комментарий. «Поделиться комментарием» даёт ссылку на обсуждение с якорем #comment-<blockNumber>. Роутер якорь игнорирует. Нужно: при открытии обсуждения с таким якорем прокрутить к комментарию и подсветить (в UI для этого есть jumpTo в channel-thread-view.js).

  4. Уведомления об ответах – на что ответили (по желанию). В уведомлении есть только текст ответа (sourceText). Чтобы показать «в ответ на: …», нужен короткий текст исходного сообщения (targetText) в GetNotifications.

  5. Стоимость публикации (экран «Публикация · подтверждение» макета). Шага подтверждения в приложении нет – запись уходит сразу. Если публикация станет платной или будет ждать Arweave, нужна цена до отправки.

Нужно от разработчика

  1. Удалить 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 неподвижно.
  • Тексты: в строках интерфейса только среднее тире с пробелами «–» (длинное «—» заменено везде, кроме комментариев).
  • Уведомления – список как в чатах; «Настройки входа» – одна карточка серверов со статусом-пилюлей, проверка при открытии; вход с другого устройства – код, таймер, три шага.

Найденные ошибки (не наши)

  1. styles/components/avatar.css: url("../assets/glass_overlay_faithful.png") ведёт в styles/assets/… – файла там нет, стеклянный ободок аватара не загружается. Путь должен быть ../../assets/….
  2. Обработчик ошибок в index.html показывал красную плашку «BOOT ERROR ResizeObserver loop…» – это предупреждение браузера, не ошибка. В v3 отсеивается.
  3. Пункты 1–2 из ISSUES-for-dev.md (подписки у логинов с заглавными, превью «Сообщение недоступно») по-прежнему актуальны.
  4. Вход по паролю на http:// по адресу в локальной сети не работает («Криптография браузера недоступна»): WebCrypto есть только на https и localhost. Это ограничение браузера – для проверки с телефона нужен https.