Jak dodać własną apkę Noe podświetlającą maile od konkretnego nadawcy

Apka Noe to mały skrypt, który możesz wstrzyknąć na dowolnej stronie Intum. Tutaj pokazuję jak zrobić apkę, która podświetli na czerwono wszystkie maile od przykladowy@intum123.net na liście inbox.

Gotowy efekt: wchodzisz na inbox, w konsoli przeglądarki pojawia się log że apka się odpaliła, a maile od wybranego nadawcy mają czerwone tło i czerwony pasek z lewej.

Najpierw - włącz moduł Noe

Jeśli w menu nie widzisz pozycji Noe, moduł jest wyłączony i trzeba go aktywować:

1. Otwórz Konto -> Moduły (menu użytkownika w prawym górnym rogu albo bezpośrednio /account/modules)
2. Znajdź na liście pozycję Noe (sekcja AI/Aplikacje)
3. Przełącz przełącznik na Aktywny i zapisz
4. Odśwież stronę - w lewym menu pojawi się Noe z podpunktem Aplikacje

Jeżeli przełącznika nie ma albo jest zablokowany, oznacza to że konto nie ma uprawnień do tego modułu - skontaktuj się z administratorem albo z supportem Intum.

Gdzie dodajemy apkę

W menu głównym otwórz Noe -> Aplikacje i kliknij Dodaj aplikację (przycisk + w prawym górnym rogu listy).

Co wpisać w formularzu

• Nazwa - cokolwiek opisowego, np. Highlight emails from przykladowy@intum123.net
• Url code - krótki slug, np. highlight_system_emails. To samo pojawi się potem w URL apki (/a/highlight_system_emails)
• Opis - jednozdaniowy opis dla siebie i zespołu, żeby później wiedzieć po co ta apka
• App engine - wybierz JS (czysty JavaScript, bez kompilacji)
• CSS engine - none (apka tylko ustawia inline style, nie potrzebuje Tailwinda)
• Show in module - wpisz mail/emails/index. To jest klucz - dzięki temu apka odpala się tylko na inboxie i liście maili, nie wszędzie
• Active - zaznacz, żeby apka faktycznie się wstrzykiwała

Reszta pól (prompt, db_code, fields, public) zostawiamy puste.

Pełną listę wartości jakie można wpisać w Show in module znajdziesz tutaj: Aplikacje Noe Wewnętrzne.

Kod do wklejenia w pole Source code

Skopiuj to 1:1 do pola Source code:

(function() {
  console.log('[Noe] Aplikacja podswietlania emaili od przykladowy@intum123.net odpalila sie');
  const TARGET = 'przykladowy@intum123.net';
  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 });
  }
})();

Co dokładnie robi ten kod

1. Loguje do konsoli że apka wystartowała - dzięki temu od razu widzisz czy się wstrzyknęła
2. Skanuje wszystkie ramki turbo-frame[id^="index_email_"] - każdy wiersz inboxa to taka ramka
3. Sprawdza tekst i atrybuty title w ramce - jeżeli znajdzie przykladowy@intum123.net, ustawia czerwone tło i lewy pasek na elemencie <li> w środku
4. Reaguje na zdarzenia Turbo (turbo:frame-load, turbo:render, turbo:load) - dzięki temu apka działa też po przejściu na następną stronę listy bez przeładowania
5. Pilnuje listy maili przez MutationObserver - jak Turbo doda nowe wiersze (filtrowanie, paginacja), kod znowu je przeleci
6. Każdy podświetlony wiersz dostaje data-noe-highlighted="1", żeby nie nakładać stylu w kółko

Jak zmienić adres do podświetlania

W kodzie zmień jedną linijkę:

const TARGET = 'przykladowy@intum123.net';

Wpisz tam dowolny adres, np. 'kontakt@firma.pl'. Porównanie jest case-insensitive, więc wielkość liter nie ma znaczenia.

Możesz też podać sam fragment, np. '@firma.pl' - wtedy apka podświetli wszystko z tej domeny.

Jak sprawdzić że działa

1. Zapisz apkę i wejdź na Mail -> Inbox
2. Otwórz konsolę przeglądarki (F12 -> Console)
3. Powinieneś zobaczyć log [Noe] Aplikacja podswietlania emaili od przykladowy@intum123.net odpalila sie
4. Maile od ustawionego nadawcy będą miały czerwone tło i czerwoną kreskę z lewej

Jeśli nic się nie dzieje:

• sprawdź czy pole Active jest zaznaczone
• upewnij się że Show in module to dokładnie mail/emails/index (bez literówek)
• w konsoli sprawdź czy nie ma błędu JS - typowo brakujący przecinek lub cudzysłów

Pomysły co dalej

• zmień kolor (RED_BG, RED_BORDER) na pasujący do twojego motywu
• dodaj ikonę obok tematu maila zamiast tła
• zrób wersję, która podświetla według listy adresów, nie pojedynczego
• wstrzyknij tę samą logikę na widoku wątku (mail/emails/show) i podświetl wiadomości od konkretnej osoby w środku rozmowy