[Sugester V2](https://pomoc.sugester2.pl.md) / [Dodatki i AI](https://pomoc.sugester2.pl/dotatki.md)

# [Jak dodać własną aplikację Noe podświetlającą maile od konkretnego nadawcy](https://pomoc.sugester2.pl/jak-dodac-wlasna-aplikacje-noe-podswietlajaca-maile-od-konkretnego-nadawcy.md)

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.

![](637bdb7ebced-Screenshot - 2026-05-12T164611.346.png)![](25a3eaabbaf8-Screenshot - 2026-05-12T164611.346.png)

## 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 Noe** i kliknij +**Dodaj** (przycisk + w prawym górnym rogu listy).

## Co wpisać w formularzu

- **Nazwa** - cokolwiek opisowego, np. `Podświetlenie maila od przykladowy@intum123.net`
- **Kod url** - krótki kod, np. `highlight_system_emails` , bez polskich znaków i spacji. 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
- **Silnik aplikacji** - wybierz **JS** (czysty JavaScript, bez kompilacji)
- **Silnik CSS** - **none** (aplikacja tylko ustawia inline style, nie potrzebuje Tailwinda)
- **Pokaż w module** - wpisz \*\*`mail/emails/index`\*\*. To jest klucz - dzięki temu aplikacja włącza się tylko na inboxie i liście maili, nie wszędzie
- **Aktywna** - zaznacz, żeby aplikacja faktycznie się uruchamiała

Reszta pól (prompt, kod bazy danych) zostawiamy puste.

Pełną listę wartości jakie można wpisać w **Pokaż w module** znajdziesz tutaj: [Aplikacje Noe Wewnętrzne](../noe-ai/aplikacje-noe-wewnetrzne).

## Kod do wklejenia w pole Kod źródłowy

Skopiuj to 1:1 do pola **Kod źródłowy**:

```javascript
(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 aplikacja się uruchomił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 sprawdzi
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ę:

```javascript
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 **Pokaż w 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
- dodaj tę samą logikę na widoku wątku (`mail/emails/show`) i podświetl wiadomości od konkretnej osoby w środku rozmowy