JASNE UPUTE ZA AI AGENTA: Dodavanje obojenih pozadina za vrste riječi

   KONTEKST
   Na originalnoj aplikaciji (slika: original/1 dodaj rijeci.png), svaka riječ u rječniku prikazuje se kao gumb s obojenom pozadinom koja ovisi o vrsti riječi (wordType). Trenutno aplikacija prikazuje vrstu riječi samo kao sivi tekst bez pozadinske
    boje.

   PRIMJERI SA SLIKE
     • "adresa" (Imenica/NOUN) → zelena pozadina
     • "Analizirati" (Glagol/VERB) → crvena pozadina

   ZADATAK
   Promijeni kod tako da tekst riječi (wordText) u WordCard komponenti ima obojenu pozadinu koja odgovara vrsti riječi, baš kao na originalnoj slici.


   ────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────

   KORACI ZA IMPLEMENTACIJU

   1. Kreiraj mapiranje boja za vrste riječi

   U datoteci packages/frontend/src/components/dictionary/WordCard.tsx, dodaj novo mapiranje boja za vrste riječi (wordType), slično kao što već postoji cefrColors za CEFR razine:

   const wordTypeColors: Record<string, string> = {
     NOUN: 'bg-green-600',           // Imenica - zelena
     VERB: 'bg-red-600',             // Glagol - crvena
     ADJECTIVE: 'bg-blue-600',       // Pridjev - plava
     ADVERB: 'bg-purple-600',        // Prilog - ljubičasta
     PRONOUN: 'bg-yellow-600',       // Zamjenica - žuta
     PREPOSITION: 'bg-orange-600',   // Prijedlog - narančasta
     CONJUNCTION: 'bg-pink-600',     // Veznik - roza
     INTERJECTION: 'bg-teal-600',    // Uzvik - tirkizna
     PHRASE: 'bg-indigo-600',        // Fraza - indigo
     OTHER: 'bg-gray-600',           // Ostalo - siva
   };

   NAPOMENA: Prilagodi boje prema točnim bojama sa slike ako imaš pristup slici. Ovo su prijedlozi.


   ──────────────────────────────────────────────────────────────────────────────────────────────────────

   2. Promijeni prikaz teksta riječi (wordText)

   U istoj datoteci (WordCard.tsx), pronađi dio gdje se prikazuje term.wordText (trenutno oko linije 69):

   TRENUTNI KOD:
   {/* Word Text */}
   <h3 className="text-lg font-semibold text-center mb-3 text-gray-900">
     {term.wordText}
   </h3>

   NOVI KOD:
   {/* Word Text with colored background based on word type */}
   <div className="flex justify-center mb-3">
     <span className={`${wordTypeColors[term.wordType] || 'bg-gray-600'} text-white text-lg font-semibold px-4 py-2 rounded`}>
       {term.wordText}
     </span>
   </div>

   ŠTO SE MIJENJA:
     • Tekst riječi sada ima obojenu pozadinu (bg-* klasa) ovisno o term.wordType
     • Tekst je bijele boje (text-white) za kontrast
     • Dodani su padding (px-4 py-2) i zaobljeni rubovi (rounded) da izgleda kao gumb


   ──────────────────────────────────────────────────────────────────────────────────

   3. (OPCIONALNO) Ukloni ili prilagodi prikaz vrste riječi

   Trenutno se vrsta riječi prikazuje kao sivi tekst u gornjem desnom kutu kartice (linija 44-46):

   <span className="text-xs text-gray-500">
     {wordTypeLabels[term.wordType] || term.wordType}
   </span>

   OPCIJE:
     • Opcija A: Ukloni ovaj dio jer je sada vrsta riječi vidljiva kroz boju pozadine
     • Opcija B: Zadrži ga za dodatnu jasnoću


   ────────────────────────────────────────────────

   4. Primijeni iste promjene u drugim komponentama

   Ako se riječi prikazuju i u drugim komponentama (npr. WordDetailModal, SentenceBuilder, itd.), primijeni iste promjene tamo:

   U `WordDetailModal.tsx`:
   Dodaj isto mapiranje wordTypeColors i promijeni prikaz term.wordText na isti način.

   U budućoj `SentenceBuilder` komponenti:
   Kada se budu prikazivale riječi u rečenici (Znakopis), svaka riječ treba imati obojenu pozadinu prema vrsti riječi.


   ──────────────────────────────────────────

   5. Testiraj promjene

     1. Pokreni aplikaciju
     2. Otvori stranicu Rječnik (/dictionary)
     3. Provjeri da svaka riječ ima obojenu pozadinu koja odgovara njenoj vrsti
     4. Usporedi s originalnom slikom original/1 dodaj rijeci.png


   ────────────────────────────────────────────────────────────────────────────

   DODATNE NAPOMENE

   Ako trebaš točne boje sa slike:
   Ako imaš pristup slici, koristi alat za odabir boja (color picker) da dobiješ točne hex vrijednosti boja i pretvori ih u Tailwind klase ili custom CSS.

   Ako Tailwind nema točnu boju:
   Možeš dodati custom boje u tailwind.config.js:

   module.exports = {
     theme: {
       extend: {
         colors: {
           'word-noun': '#16a34a',      // zelena za imenice
           'word-verb': '#dc2626',      // crvena za glagole
           // ... ostale boje
         }
       }
     }
   }

   Zatim koristi: bg-word-noun, bg-word-verb, itd.


   ───────────────────────────────────────────────

   SAŽETAK PROMJENA

   | Datoteka | Što dodati/promijeniti |
   |----------|------------------------|
   | packages/frontend/src/components/dictionary/WordCard.tsx | 1. Dodaj wordTypeColors mapiranje<br>2. Promijeni prikaz term.wordText da ima obojenu pozadinu |
   | packages/frontend/src/components/dictionary/WordDetailModal.tsx | Iste promjene kao u WordCard.tsx |
   | Buduće komponente (SentenceBuilder, itd.) | Primijeni isti stil za prikaz riječi |


   ────────────────────────────────────────────────────────────────────────────────────

   PRIMJER KONAČNOG IZGLEDA

   Nakon promjena, svaka kartica riječi u rječniku će imati:
     • Gornji lijevi kut: CEFR razina (A1, A2, itd.) s bojom
     • Centar: Slika/ikona riječi
     • Ispod slike: Tekst riječi s obojenom pozadinom (npr. "adresa" na zelenoj pozadini)
     • Ispod teksta: Kratak opis (ako postoji)
     • Dno: Gumbi "Dodaj" i "Info"


   ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────

   Ovo su jasne, korak-po-korak upute koje možeš dati AI agentu da implementira promjene. Agent će točno znati koje datoteke treba promijeniti i što dodati.