[Intum](https://intum.pl/pomoc.md) / [Poradnik](https://intum.pl/pomoc/poradnik.md)

# [Jak dodać własną apkę Noe podświetlającą maile od konkretnego nadawcy](https://intum.pl/pomoc/poradnik/jak-dodac-wlasna-apke-noe-podswietlajaca-maile-od-konkretnego-nadawcy.md) | [API](#api)

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](../noe-ai/aplikacje-noe-wewnetrzne).

## Kod do wklejenia w pole Source code

Skopiuj to 1:1 do pola **Source code**:

```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 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ę:

```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 **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

---

## API

### Ogólne API

# Intum API

Dokumentacja API platformy [Intum](https://intum.pl) - system operacyjny firmy.

## Host

Host jest zawsze taki sam jak adres konta: `xxxx.intum.com` lub `xxx.intum.pl` (w zależności od ustawień konta)

## Autoryzacja

Wszystkie requesty API wymagają `api_token`:
- header: `Authorization: Bearer TOKEN`

Token możesz wygenerować w **Ustawienia Konta** → **Tokeny API**



---

## Powiązane

- [Aplikacje Noe Wewnętrzne](https://intum.pl/pomoc/noe-ai/aplikacje-noe-wewnetrzne.md)
- [Aplikacje Noe](https://intum.pl/pomoc/noe-ai/aplikacje-noe.md)