Як додати власний застосунок Noe, що підсвічує листи від конкретного відправника

Застосунок Noe - це маленький скрипт, який ви можете вставити на будь-якій сторінці Intum. Тут я показую, як зробити застосунок, що підсвітить червоним усі листи від [email protected] у списку inbox.

Готовий ефект: заходите в inbox, у консолі браузера з’являється лог, що застосунок запустився, а листи від обраного відправника мають червоне тло і червону смугу ліворуч.

Спершу - увімкніть модуль Noe

Якщо в меню ви не бачите позиції Noe, модуль вимкнено і його потрібно активувати:

1. Відкрийте Обліковий запис -> Модулі (меню користувача у правому верхньому куті або безпосередньо /account/modules)
2. Знайдіть у списку позицію Noe (розділ AI/Застосунки)
3. Переключіть перемикач на Активний і збережіть
4. Оновіть сторінку - у лівому меню з’явиться Noe з підпунктом Застосунки

Якщо перемикача немає або він заблокований, це означає, що обліковий запис не має прав доступу до цього модуля - зв’яжіться з адміністратором або зі службою підтримки Intum.

Де ми додаємо застосунок

У головному меню відкрийте Noe -> Застосунки Noe і натисніть +Додати (кнопка + у правому верхньому куті списку).

Що вписати у форму

• Назва - будь-що описове, напр. Підсвічення листа від [email protected]
• Код url - короткий код, напр. highlight_system_emails , без українських/польських символів і пробілів. Те саме з’явиться потім в URL застосунку (/a/highlight_system_emails)
• Опис - однореченнєвий опис для себе і команди, щоб пізніше знати, для чого цей застосунок
• Рушій застосунку - виберіть JS (чистий JavaScript, без компіляції)
• Рушій CSS - none (застосунок лише задає inline-стилі, не потребує Tailwind)
• Показати в модулі - впишіть **mail/emails/index**. Це ключ - завдяки цьому застосунок вмикається лише в inbox і списку листів, а не всюди
• Активний - позначте, щоб застосунок справді запускався

Решту полів (промпт, код бази даних) залишаємо порожніми.

Повний список значень, які можна вписати в Показати в модулі, ви знайдете тут: Внутрішні застосунки Noe.

Код для вставлення в поле Вихідний код

Скопіюйте це 1:1 у поле Вихідний код:

(function() {
  console.log('[Noe] Aplikacja podswietlania emaili od [email protected] odpalila sie');
  const TARGET = '[email protected]';
  const RED_BG = '#fee2e2';
  const RED_BORDER = '#dc2626';

  function highlight() {
    const frames = document.querySelectorAll('turbo-frame[id^="index_email_"]');
    frames.forEach(frame => {
      const titles = Array.from(frame.querySelectorAll('[title]'))
        .map(e => e.getAttribute('title') \|\| '').join(' ');
      const text = frame.textContent \|\| '';
      const haystack = (text + ' ' + titles).toLowerCase();
      if (haystack.includes(TARGET)) {
        const li = frame.querySelector('li');
        if (li && !li.dataset.noeHighlighted) {
          li.style.backgroundColor = RED_BG;
          li.style.borderLeft = '4px solid ' + RED_BORDER;
          li.dataset.noeHighlighted = '1';
          console.log('[Noe] Podswietlono email od', TARGET, frame.id);
        }
      }
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', highlight);
  } else {
    highlight();
  }
  document.addEventListener('turbo:frame-load', highlight);
  document.addEventListener('turbo:render', highlight);
  document.addEventListener('turbo:load', highlight);

  const list = document.querySelector('ul[data-id="mail_email"]');
  if (list) {
    new MutationObserver(highlight).observe(list, { childList: true, subtree: true });
  }
})();

Що саме робить цей код

1. Логує в консоль, що застосунок запустився
2. Сканує всі фрейми turbo-frame[id^="index_email_"] - кожен рядок inbox це такий фрейм
3. Перевіряє текст і атрибути title у фреймі - якщо знайде [email protected], задає червоне тло і ліву смугу на елементі <li> всередині
4. Реагує на події Turbo (turbo:frame-load, turbo:render, turbo:load) - завдяки цьому застосунок працює також після переходу на наступну сторінку списку без перезавантаження
5. Стежить за списком листів через MutationObserver - коли Turbo додасть нові рядки (фільтрування, пагінація), код знову їх перевірить
6. Кожен підсвічений рядок отримує data-noe-highlighted="1", щоб не накладати стиль по колу

Як змінити адресу для підсвічення

У коді змініть один рядок:

const TARGET = '[email protected]';

Впишіть там будь-яку адресу, напр. '[email protected]'. Порівняння case-insensitive, тож регістр літер не має значення.

Ви можете також вказати сам фрагмент, напр. '@firma.pl' - тоді застосунок підсвітить усе з цього домену.

Як перевірити, що працює

1. Збережіть застосунок і зайдіть у Mail -> Inbox
2. Відкрийте консоль браузера (F12 -> Console)
3. Ви маєте побачити лог [Noe] Aplikacja podswietlania emaili od [email protected] odpalila sie
4. Листи від заданого відправника матимуть червоне тло і червону смужку ліворуч

Якщо нічого не відбувається:

• перевірте, чи поле Active позначене
• переконайтеся, що Показати в модулі це саме mail/emails/index (без помилок)
• у консолі перевірте, чи немає помилки JS - типово відсутня кома або лапка

Ідеї що далі

• змініть колір (RED_BG, RED_BORDER) на відповідний до вашої теми
• додайте іконку біля теми листа замість тла
• зробіть версію, яка підсвічує за списком адрес, а не одної
• додайте ту саму логіку у вигляді потоку (mail/emails/show) і підсвітіть повідомлення від конкретної особи всередині розмови