f7cloud_mobile/docs/app-map/notifications.md

# Карта: Уведомления (forbion, мобильная веб-версия)

Снято 2026-07-12. Метод по mail/078: структура берётся ИЗ КОДА
(апстрим `nextcloud/notifications`, компоненты `NotificationsApp.vue` / `NotificationItem.vue` /
`ActionButton.vue` / `IconNotification.vue`; на forbion версия 5.0.0-dev.0 — компоненты стабильны
между версиями), живой мобильный web forbion (вьюпорт 390px, аккаунт `cloude`, строго read-only
по mail/073) — для визуальной сверки размещения и порядка. Живой аккаунт `cloude` на момент съёмки
имел **пустую ленту** (empty-state), поэтому структура элемента уведомления и действий снята с кода,
а не с экрана. Пишущих кнопок («Скрыть», «Скрыть все», action-кнопки) НЕ нажимал — dismiss и
выполнение действий это записи (DELETE / произвольный HTTP-метод), а аккаунт реальный рабочий.

Уведомления — НЕ отдельное приложение (нет пункта в шторке приложений и своего URL-роута), а
глобальный **дропдаун-лента в шапке** (компонент `NotificationsApp`, монтируется в `#notifications`).

## Вход
В мобильной вёрстке forbion иконка-триггер (колокольчик) живёт в **шторке приложений**, а не на
плавающей нижней панели. Путь:
- Нижняя панель шелла → `≡` («три полоски», `#open-header-menu-mobile`) открывает шторку
  `app-menu--mobile`.
- В шторке — слот `#mobile-header-notifications` (класс `f7-mobile-menu-control-slot`,
  `mobile-bottom-slot--overlay`) с кнопкой-колокольчиком (`.notifications-button`,
  `aria-label="Уведомления"`, `aria-expanded`).
- Нижняя плавающая панель (общая, зона лида, для ориентира): `<`/`>` (сайдбар-навигация,
  `#mobile-header-left-sidebar-button`) · конверт → Почта (`/apps/mail/`) · «карточки» → Задачи
  (`/apps/tasks/`) · камера → Конференции (`/apps/spreed/`) · `≡` → шторка приложений.

## Триггер (колокольчик) — `IconNotification`
**Вид:** иконка «колокол». Индикатор состояния (`showDot`):
- точка-бейдж показывается, когда `notifications.length !== 0` **или** когда браузерные разрешения
  ещё не запрошены (`webNotificationsGranted === null`);
- значок-предупреждение (`showWarning`) — когда push-уведомления задросселированы политикой
  честного использования (`hasThrottledPushNotifications`).
**Действие:** тап → раскрывает дропдаун-ленту (`aria-expanded` false→true), эмит `@opened → onOpen`
(подгрузка/пометка ленты активной). Повторный тап или клик вне (кроме `.popover`) — закрывает.

## Экран: Лента уведомлений (дропдаун `NcHeaderMenu`, класс `header-menu`)
Контейнер `.notification-container` внутри `.header-menu__content`. Тайтл шапки в мобильной
теме — «Уведомления» (`.tooltip-header--notifications`). Два взаимоисключающих состояния:

### Состояние A — есть уведомления (`notifications.length > 0`)
**Тело:** список `<ul class="notification-wrapper">` из элементов `NotificationItem` (см. ниже),
сверху вниз, новые (`notificationId > lastOpenMaxId`) помечены классом `notification--new`.
Если push задросселирован — первым нештатным элементом идёт баннер «Push notifications might be
unreliable» (fairUsePolicy, `key=-2016`).
**Низ:** блок `.dismiss-all` — кнопка **«Скрыть все уведомления»** (tertiary, во всю ширину,
иконка «×»). ⚠️ Пишущая: `onDismissAll` → `DELETE /ocs/v2.php/apps/notifications/api/v2/notifications`.

### Состояние B — пусто (empty-state `NcEmptyContent`) — наблюдалось у `cloude`
Три варианта текста (computed `emptyContentMessage`):
- `webNotificationsGranted === null` → **«Запрос разрешений для показа уведомлений в браузере»**
  (именно это видел у `cloude` — иконка колокола `bell-outline-icon`);
- задросселированы push → заголовок = subject fairUsePolicy + описание + кнопка «Contact
  Nextcloud GmbH ↗» (внешняя ссылка), иконка `icon-alert-outline`;
- иначе → **«Нет уведомлений»** (`No notifications`). При переходе списка из >0 в 0 на ~5 сек
  показывается анимация inbox-zero (галочка + конфетти), затем обычный колокол.

## Элемент: `NotificationItem` (`<li class="notification">`, из кода)
data-атрибуты: `data-id`, `data-timestamp`, `data-object-type`, `data-app`.
**Шапка элемента (`.notification-heading`):**
- время (`NcDateTime`, формат «время + длинная дата», `.notification-time`) — если есть timestamp;
- кнопка **«Скрыть»** (`.notification-dismiss-button`, tertiary, иконка «×», `aria-label="Dismiss"`).
  ⚠️ Пишущая: `onDismissNotification` → `DELETE …/api/v2/notifications/{id}`, затем `@remove` (убрать из ленты).
**Субъект (заголовок), три варианта рендера:**
- если `externalLink` → `<a target=_blank>` класс `full-subject-link external`, текст «{subject} ↗»;
- иначе если есть `link` (useLink) → `<a>` на этот линк;
- иначе — просто блок `.notification-subject` без ссылки.
  Внутри: опциональная иконка (`img.notification-icon`); если есть `subjectRich` — богатый рендер
  `NcRichText` с параметрами (см. Parameters ниже), иначе простой `.subject` с текстом subject.
**Сообщение (`.notification-message`, если есть `message`):** богатый (`messageRich` + autolink)
или простой текст; длинное сворачивается (`.message-container.collapsed` + градиент
`.notification-overflow`), тап по сообщению — разворот (`onClickMessage`).
**Действия (`.notification-actions`):**
- если `notification.actions[]` непусто — ряд `ActionButton` по каждому action;
- иначе, если есть `externalLink` — одна primary-кнопка «Contact Nextcloud GmbH ↗».

## Элемент: `ActionButton` (кнопка действия уведомления)
Поля action (из API): `label`, `link`, `type`, `primary`.
- `type === 'WEB'` (isWebLink) или `primary` → кнопка **primary**; для WEB это прямой `href` (ссылка).
- прочие типы (GET/POST/DELETE/PUT) → кнопка **secondary**.
**Клик (`onClickAction`):** эмит `notifications:action:execute` (приложение может отменить,
`cancelAction`); для WEB — просто переход по ссылке; иначе ⚠️ пишущий вызов
`axios({ method: action.type, url: action.link })`, при успехе — `@remove` (уходит из ленты) +
эмит `notifications:action:executed`. Ошибка → тост «Failed to perform action».
Пример типового уведомления с действиями — приглашение в Talk-беседу: subject + действия
«Присоединиться»/«Отклонить» и т.п. (состав задаёт серверное приложение-источник).

## Параметры rich-subject/message (`Components/Parameters/`)
`NcRichText` подставляет типизированные плейсхолдеры:
- `UserParameter` — пользователь (аватар + имя, кликабельно);
- `FileParameter` — файл (иконка + имя, ссылка на файл);
- `DefaultParameter` — прочие (просто текст).
`расхождение:` в нативном клиенте (`NotificationsRepository`/`NotificationsSheet`) сейчас берётся
только плоский `subject`/`message` (API v2), rich-параметры и иконка app не разворачиваются —
это мой бэклог (см. представление mail/070).

## API (из кода, все через OCS `apps/notifications/api/v2/notifications`)
- `GET …/notifications` — лента (в нативе уже есть, `NotificationsRepository.load`, limit=50);
- `DELETE …/notifications/{id}` — скрыть одно (в нативе есть `dismiss`);
- `DELETE …/notifications` — скрыть все (в нативе НЕТ — бэклог «отметить/скрыть все»);
- `{action.type} {action.link}` — выполнить действие уведомления (в нативе действий НЕТ — бэклог).
Обновление ленты — по ETag (`lastETag`) и, если доступен, через notify_push (`@nextcloud/notify_push`).

## Стили (тема forbion)
Отдельного `_mobile-notifications.css` в теме нет: на вебе лента — дроп в шапке
(`css/components/_header.css`), мобильное размещение колокольчика — слот
`#mobile-header-notifications` в `header__mobile-bottom`/шторке (тема
`css/pages/pages-mobile/_mobile-common.css`). Для нативной ленты держим общий карточный стиль
модулей (`_mobile-common.css` + токены designsystem) — согласовано с лидом (mail/070).

## Открытые вопросы / сверить, когда лента будет непустой
- (?) Как именно выглядит `notification--new` в мобильной теме (подсветка/полоса) — на пустом
  аккаунте не увидеть; сверить на аккаунте с уведомлениями.
- (?) Точный порядок и подписи action-кнопок для реальных источников (Talk-приглашение, дедлайны
  Deck/Календаря) — снять живьём, когда появятся уведомления.
- (?) Сворачивание длинного message в мобильной ширине 390px (высота `.message-container`).