feat: better item tooltips

frontend/assets/css/main.css

@@ -5,6 +5,40 @@
   --color-on-surface: #b7b8e1;
   --color-surface-darker: #1f1d1c;
   --color-gold: #ffd700;
+
+  /* Tooltip colors */
+  --tooltip-bg: #312e2c;
+  --tooltip-border: #4a4543;
+  --tooltip-header-border: rgba(183, 184, 225, 0.2);
+  --tooltip-text: #b7b8e1;
+  --tooltip-text-dim: #8a8b9e;
+  --tooltip-stat-value: #ffd700;
+  --tooltip-stat-label: #b7b8e1;
+
+  /* Effect type colors */
+  --tooltip-effect-passive: #4a9eff;
+  --tooltip-effect-active: #ff6b6b;
+  --tooltip-effect-unique: #f39c12;
+  --tooltip-effect-mythic: #ff5252;
+  --tooltip-effect-legendary: #ff9800;
+  --tooltip-effect-epic: #ffd54f;
+
+  /* Text segment colors */
+  --tooltip-highlight: #ffd700;
+  --tooltip-keyword: #ffd700;
+  --tooltip-keyword-major: #ff8c00;
+  --tooltip-keyword-stealth: #9b59b6;
+  --tooltip-status: #e74c3c;
+  --tooltip-speed: #5dade2;
+  --tooltip-scaling: #5dade2;
+  --tooltip-magic-damage: #9b59b6;
+  --tooltip-physical-damage: #e67e22;
+  --tooltip-true-damage: #ffffff;
+  --tooltip-healing: #2ecc71;
+  --tooltip-shield: #3498db;
+  --tooltip-onhit: #5dade2;
+  --tooltip-spellname: #1abc9c;
+  --tooltip-flavor: #6a9fff;
 }
 
 /* Font setting */

frontend/components/item/ItemTooltip.vue

@@ -1,5 +1,11 @@
 <script setup lang="ts">
 import { CDRAGON_BASE, mapPath } from '~/utils/cdragon'
+import {
+  parseItemDescription,
+  type TextSegment,
+  type ItemEffect,
+  type ParsedDescription
+} from 'dragon-item-parser'
 
 interface Props {
   item: Item | null
@@ -42,78 +48,184 @@ function getTagClass(tag: ItemTag): string {
   return `tag-${tag}`
 }
 
-// Parse description and convert to styled HTML
-const formatDescription = (description?: string) => {
-  if (!description) return ''
+// Parse the item description once
+const parsedDescription = computed<ParsedDescription | null>(() => {
+  if (!props.item?.description) return null
+  return parseItemDescription(props.item.description)
+})
 
-  // Replace <br> and other structural tags
-  const html = description
-    .replace(/<br\s*\/?>/gi, '<br>')
-    .replace(/<br><br><br>/gi, '') // Remove triple breaks
-    .replace(/<br><br>/gi, '') // Remove double breaks
-    .replace(/<mainText>/gi, '')
-    .replace(/<\/mainText>/gi, '')
-    .replace(/<stats>/gi, '<div class="tooltip-stats">')
-    .replace(/<\/stats>/gi, '</div>')
-    .replace(/<passive>/gi, '<span class="tag-passive">')
-    .replace(/<\/passive>/gi, '</span>:')
-    .replace(/<active>/gi, '<span class="tag-active">')
-    .replace(/<\/active>/gi, '</span>')
-    .replace(/<keyword>/gi, '<span class="tag-keyword">')
-    .replace(/<\/keyword>/gi, '</span>')
-    .replace(/<attention>/gi, '<span class="stat-highlight">')
-    .replace(/<\/attention>/gi, '</span>')
-    .replace(/<keywordMajor>/gi, '<span class="tag-keyword-major">')
-    .replace(/<\/keywordMajor>/gi, '</span>')
-    .replace(/<keywordStealth>/gi, '<span class="tag-keyword-stealth">')
-    .replace(/<\/keywordStealth>/gi, '</span>')
-    .replace(/<status>/gi, '<span class="tag-status">')
-    .replace(/<\/status>/gi, '</span>')
-    .replace(/<speed>/gi, '<span class="tag-speed">')
-    .replace(/<\/speed>/gi, '</span>')
-    .replace(/<scaleMana>/gi, '<span class="tag-scale-mana">')
-    .replace(/<\/scaleMana>/gi, '</span>')
-    .replace(/<scaleHealth>/gi, '<span class="tag-scale-health">')
-    .replace(/<\/scaleHealth>/gi, '</span>')
-    .replace(/<scaleAP>/gi, '<span class="tag-scale-ap">')
-    .replace(/<\/scaleAP>/gi, '</span>')
-    .replace(/<scaleAD>/gi, '<span class="tag-scale-ad">')
-    .replace(/<\/scaleAD>/gi, '</span>')
-    .replace(/<scaleArmor>/gi, '<span class="tag-scale-armor">')
-    .replace(/<\/scaleArmor>/gi, '</span>')
-    .replace(/<scaleMR>/gi, '<span class="tag-scale-mr">')
-    .replace(/<\/scaleMR>/gi, '</span>')
-    .replace(/<scaleLevel>/gi, '<span class="tag-scale-level">')
-    .replace(/<\/scaleLevel>/gi, '</span>')
-    .replace(/<spellName>/gi, '<span class="tag-spellname">')
-    .replace(/<\/spellName>/gi, '</span>')
-    .replace(/<unique>/gi, '<span class="tag-unique">UNIQUE</span>')
-    .replace(/<\/unique>/gi, '')
-    .replace(/<rarityMythic>/gi, '<span class="tag-rarity-mythic">Mythic</span>')
-    .replace(/<\/rarityMythic>/gi, '')
-    .replace(/<rarityLegendary>/gi, '<span class="tag-rarity-legendary">Legendary</span>')
-    .replace(/<\/rarityLegendary>/gi, '')
-    .replace(/<rarityGeneric>/gi, '<span class="tag-rarity-generic">Epic</span>')
-    .replace(/<\/rarityGeneric>/gi, '')
-    .replace(/<rules>/gi, '<div class="tag-rules">')
-    .replace(/<\/rules>/gi, '</div>')
-    .replace(/<flavorText>/gi, '<div class="tag-flavor">')
-    .replace(/<\/flavorText>/gi, '</div>')
-    .replace(/<li>/gi, '<div class="tag-list">')
-    .replace(/<\/li>/gi, '</div>')
-    .replace(/<font color='([^']+)'>/gi, '<span style="color: $1">')
-    .replace(/<\/font>/gi, '</span>')
-    .replace(/<b>/gi, '<strong>')
-    .replace(/<\/b>/gi, '</strong>')
-    .replace(/\[@@[^@]*@@\]/g, ' ') // Remove stat placeholders
-    .trim()
+// Format stats for display
+const formattedStats = computed(() => {
+  const stats = parsedDescription.value?.stats
+  if (!stats) return []
 
-  return html
+  const statLabels: Record<string, string> = {
+    attackDamage: 'Attack Damage',
+    abilityPower: 'Ability Power',
+    attackSpeed: 'Attack Speed',
+    criticalStrikeChance: 'Critical Strike Chance',
+    criticalStrikeDamage: 'Critical Strike Damage',
+    lifeSteal: 'Life Steal',
+    omnivamp: 'Omnivamp',
+    physicalVamp: 'Physical Vamp',
+    spellVamp: 'Spell Vamp',
+    health: 'Health',
+    armor: 'Armor',
+    magicResist: 'Magic Resist',
+    mana: 'Mana',
+    baseManaRegen: 'Base Mana Regen',
+    baseHealthRegen: 'Base Health Regen',
+    moveSpeed: 'Move Speed',
+    abilityHaste: 'Ability Haste',
+    armorPenetration: 'Armor Penetration',
+    magicPenetration: 'Magic Penetration',
+    lethality: 'Lethality',
+    healAndShieldPower: 'Heal and Shield Power',
+    tenacity: 'Tenacity',
+    slowResist: 'Slow Resist'
+  }
+
+  const percentageStats = [
+    'attackSpeed',
+    'criticalStrikeChance',
+    'criticalStrikeDamage',
+    'lifeSteal',
+    'omnivamp',
+    'physicalVamp',
+    'spellVamp',
+    'baseManaRegen',
+    'baseHealthRegen',
+    'armorPenetration',
+    'magicPenetration',
+    'healAndShieldPower',
+    'tenacity',
+    'slowResist'
+  ]
+
+  return Object.entries(stats)
+    .filter(([_, value]) => value !== undefined)
+    .map(([key, value]) => ({
+      key,
+      label: statLabels[key] || key,
+      value: percentageStats.includes(key) ? `${value}%` : value
+    }))
+})
+
+// Get CSS class for text segment type
+function getSegmentClass(segment: TextSegment): string {
+  const classMap: Record<TextSegment['type'], string> = {
+    text: '',
+    highlight: 'stat-highlight',
+    passive: 'tag-passive',
+    active: 'tag-active',
+    keyword: 'tag-keyword',
+    keywordMajor: 'tag-keyword-major',
+    keywordStealth: 'tag-keyword-stealth',
+    status: 'tag-status',
+    speed: 'tag-speed',
+    scaleMana: 'tag-scaling',
+    scaleHealth: 'tag-scaling',
+    scaleAP: 'tag-scaling',
+    scaleAD: 'tag-scaling',
+    scaleArmor: 'tag-scaling',
+    scaleMR: 'tag-scaling',
+    scaleLevel: 'tag-scaling',
+    scaleBonusHealth: 'tag-scaling',
+    scaleBonusMana: 'tag-scaling',
+    scaleMaxHealth: 'tag-scaling',
+    spellName: 'tag-spellname',
+    unique: 'tag-unique',
+    rarityMythic: 'tag-rarity-mythic',
+    rarityLegendary: 'tag-rarity-legendary',
+    rarityGeneric: 'tag-rarity-generic',
+    magicDamage: 'tag-magic-damage',
+    physicalDamage: 'tag-physical-damage',
+    trueDamage: 'tag-true-damage',
+    healing: 'tag-healing',
+    shield: 'tag-shield',
+    attention: 'stat-highlight',
+    onHit: 'tag-onhit',
+    color: ''
+  }
+  return classMap[segment.type] || ''
 }
 
-const formattedDescription = computed(() =>
-  props.item ? formatDescription(props.item.description) : ''
-)
+// Get effect type label
+function getEffectTypeLabel(type: ItemEffect['type']): string {
+  const labels: Record<ItemEffect['type'], string> = {
+    passive: 'Passive',
+    active: 'Active',
+    unique: 'Unique',
+    mythic: 'Mythic',
+    legendary: 'Legendary',
+    epic: 'Epic'
+  }
+  return labels[type] || ''
+}
+
+// Get effect type class
+function getEffectTypeClass(type: ItemEffect['type']): string {
+  const classMap: Record<ItemEffect['type'], string> = {
+    passive: 'effect-passive',
+    active: 'effect-active',
+    unique: 'effect-unique',
+    mythic: 'effect-mythic',
+    legendary: 'effect-legendary',
+    epic: 'effect-epic'
+  }
+  return classMap[type] || ''
+}
+
+// Render text segments to HTML
+function renderSegments(segments: TextSegment[]): string {
+  return segments
+    .map(segment => {
+      const cssClass = getSegmentClass(segment)
+
+      if (segment.type === 'color' && segment.color) {
+        return `<span style="color: ${segment.color}">${segment.content}</span>`
+      }
+
+      if (cssClass) {
+        return `<span class="${cssClass}">${segment.content}</span>`
+      }
+
+      return segment.content
+    })
+    .join('')
+}
+
+// Render effect description
+function renderEffect(effect: ItemEffect): string {
+  return renderSegments(effect.description)
+}
+
+// Render rules
+function renderRules(segments: TextSegment[] | undefined): string {
+  if (!segments) return ''
+  return renderSegments(segments)
+}
+
+// Render flavor text
+function renderFlavorText(segments: TextSegment[] | undefined): string {
+  if (!segments) return ''
+  return renderSegments(segments)
+}
+
+// Check if we should show the effects section
+const hasEffects = computed(() => {
+  return parsedDescription.value?.effects?.length
+})
+
+// Check if we should show rules
+const hasRules = computed(() => {
+  return parsedDescription.value?.rules?.length
+})
+
+// Check if we should show flavor text
+const hasFlavorText = computed(() => {
+  return parsedDescription.value?.flavorText?.length
+})
 </script>
 
 <template>
@@ -128,37 +240,72 @@ const formattedDescription = computed(() =>
         }"
         @mouseenter.stop
       >
+        <!-- Header -->
         <div class="tooltip-header">
           <NuxtImg class="tooltip-icon" :src="CDRAGON_BASE + mapPath(item.iconPath)" />
           <div class="tooltip-title">
             <h3>{{ item.name || 'Unknown Item' }}</h3>
-            <span v-if="item.priceTotal" class="tooltip-gold"> {{ item.priceTotal }} Gold </span>
+            <span v-if="item.priceTotal" class="tooltip-gold">{{ item.priceTotal }} Gold</span>
           </div>
         </div>
 
+        <!-- Plaintext (brief description) -->
         <div v-if="item.plaintext" class="tooltip-plaintext">
           {{ item.plaintext }}
         </div>
 
         <!-- Item Tags -->
-        <div v-if="tags && tags.length > 0" class="tooltip-tags">
-          <span
-            v-for="tag in tags"
-            :key="tag"
-            :class="['item-tag', getTagClass(tag)]"
-            :title="getTagTooltip(tag)"
-          >
-            {{ getTagLabel(tag) }}
-          </span>
+        <div v-if="tags && tags.length > 0" class="tooltip-tags-section">
+          <div class="tooltip-tags">
+            <span
+              v-for="tag in tags"
+              :key="tag"
+              :class="['item-tag', getTagClass(tag)]"
+              :title="getTagTooltip(tag)"
+            >
+              {{ getTagLabel(tag) }}
+            </span>
+          </div>
         </div>
 
-        <!-- eslint-disable vue/no-v-html -->
-        <div
-          v-if="formattedDescription"
-          class="tooltip-description"
-          v-html="formattedDescription"
-        ></div>
-        <!-- eslint-enable vue/no-v-html -->
+        <!-- Stats Section -->
+        <div v-if="formattedStats.length > 0" class="tooltip-stats">
+          <div v-for="stat in formattedStats" :key="stat.key" class="stat-row">
+            <span class="stat-value">{{ stat.value }}</span>
+            <span class="stat-label">{{ stat.label }}</span>
+          </div>
+        </div>
+
+        <!-- Effects Section -->
+        <div v-if="hasEffects" class="tooltip-effects">
+          <div
+            v-for="(effect, index) in parsedDescription?.effects"
+            :key="index"
+            :class="['effect-item', getEffectTypeClass(effect.type)]"
+          >
+            <div class="effect-header">
+              <span class="effect-type">{{ getEffectTypeLabel(effect.type) }}</span>
+              <span v-if="effect.name" class="effect-name">{{ effect.name }}</span>
+            </div>
+            <!-- eslint-disable vue/no-v-html -->
+            <div class="effect-description" v-html="renderEffect(effect)"></div>
+            <!-- eslint-enable vue/no-v-html -->
+          </div>
+        </div>
+
+        <!-- Rules Section -->
+        <div v-if="hasRules" class="tooltip-rules">
+          <!-- eslint-disable vue/no-v-html -->
+          <div v-html="renderRules(parsedDescription?.rules)"></div>
+          <!-- eslint-enable vue/no-v-html -->
+        </div>
+
+        <!-- Flavor Text -->
+        <div v-if="hasFlavorText" class="tooltip-flavor">
+          <!-- eslint-disable vue/no-v-html -->
+          <div v-html="renderFlavorText(parsedDescription?.flavorText)"></div>
+          <!-- eslint-enable vue/no-v-html -->
+        </div>
       </div>
     </Transition>
   </Teleport>
@@ -168,18 +315,23 @@ const formattedDescription = computed(() =>
 .item-tooltip {
   position: fixed;
   z-index: 1000;
-  background: var(--color-surface);
-  border: 1px solid var(--color-on-surface);
+  background: var(--tooltip-bg);
+  border: 1px solid var(--tooltip-border);
   border-radius: 8px;
   padding: 12px;
-  max-width: 300px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  max-width: 320px;
+  min-width: 250px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
   pointer-events: none;
+  font-family: 'Inter', sans-serif;
 }
 
+/* Header */
 .tooltip-header {
   display: flex;
   gap: 12px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--tooltip-header-border);
   margin-bottom: 10px;
 }
 
@@ -187,212 +339,56 @@ const formattedDescription = computed(() =>
   width: 48px;
   height: 48px;
   border-radius: 4px;
-  border: 1px solid var(--color-on-surface);
+  border: 2px solid var(--tooltip-border);
   flex-shrink: 0;
+  background: rgba(0, 0, 0, 0.3);
 }
 
 .tooltip-title {
   display: flex;
   flex-direction: column;
   justify-content: center;
+  gap: 4px;
 }
 
 .tooltip-title h3 {
   margin: 0;
   font-size: 1rem;
   font-weight: 600;
-  color: var(--color-on-surface);
+  color: var(--tooltip-text);
   line-height: 1.2;
 }
 
 .tooltip-gold {
   font-size: 0.85rem;
   color: var(--color-gold);
-  margin-top: 4px;
+  font-weight: 500;
 }
 
+/* Plaintext */
 .tooltip-plaintext {
-  font-size: 0.85rem;
-  color: var(--color-on-surface);
-  opacity: 0.8;
+  font-size: 0.8rem;
+  color: var(--tooltip-text-dim);
   margin-bottom: 8px;
   font-style: italic;
+  line-height: 1.4;
 }
 
-.tooltip-description {
-  font-size: 0.85rem;
-  color: var(--color-on-surface);
-  line-height: 1.5;
-  white-space: pre-wrap;
+/* Item Tags Section */
+.tooltip-tags-section {
+  margin-bottom: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--tooltip-header-border);
 }
 
-/* Stats section */
-.tooltip-stats {
-  margin-bottom: 8px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid var(--color-on-surface-dim);
-}
-
-.tooltip-stats :deep(.stat-highlight) {
-  color: #ffcc00;
-  font-weight: 600;
-}
-
-/* Tag styles */
-.tooltip-description :deep(.tag-passive) {
-  color: #4a9eff;
-  font-weight: 600;
-}
-
-.tooltip-description :deep(.tag-active) {
-  color: #ff6b6b;
-  font-weight: 600;
-}
-
-.tooltip-description :deep(.tag-keyword) {
-  color: #ffd700;
-  font-weight: 600;
-}
-
-.tooltip-description :deep(.tag-keyword-major) {
-  color: #ff8c00;
-  font-weight: 700;
-  font-style: italic;
-}
-
-.tooltip-description :deep(.tag-keyword-stealth) {
-  color: #9b59b6;
-  font-weight: 600;
-}
-
-.tooltip-description :deep(.tag-status) {
-  color: #e74c3c;
-  font-weight: 500;
-  font-style: italic;
-}
-
-.tooltip-description :deep(.tag-speed),
-.tooltip-description :deep(.tag-scale-mana),
-.tooltip-description :deep(.tag-scale-health),
-.tooltip-description :deep(.tag-scale-ap),
-.tooltip-description :deep(.tag-scale-ad),
-.tooltip-description :deep(.tag-scale-armor),
-.tooltip-description :deep(.tag-scale-mr),
-.tooltip-description :deep(.tag-scale-level) {
-  color: #3498db;
-  font-style: italic;
-  font-weight: 500;
-}
-
-.tooltip-description :deep(.tag-healing),
-.tooltip-description :deep(.tag-health) {
-  color: #2ecc71;
-  font-weight: 500;
-}
-
-.tooltip-description :deep(.tag-shield) {
-  color: #3498db;
-  font-weight: 500;
-}
-
-.tooltip-description :deep(.tag-magic-damage) {
-  color: #9b59b6;
-  font-weight: 500;
-}
-
-.tooltip-description :deep(.tag-physical-damage) {
-  color: #e67e22;
-  font-weight: 500;
-}
-
-.tooltip-description :deep(.tag-true-damage) {
-  color: #c0392b;
-  font-weight: 600;
-}
-
-.tooltip-description :deep(.tag-onhit) {
-  background: rgba(52, 152, 219, 0.1);
-  color: #3498db;
-  padding: 1px 4px;
-  border-radius: 3px;
-  font-size: 0.8rem;
-  font-weight: 500;
-}
-
-.tooltip-description :deep(.tag-spellname) {
-  color: #1abc9c;
-  font-weight: 600;
-  font-style: italic;
-}
-
-.tooltip-description :deep(.tag-unique) {
-  color: #f39c12;
-  font-weight: 700;
-  font-size: 0.75rem;
-  letter-spacing: 0.5px;
-}
-
-.tooltip-description :deep(.tag-rarity-mythic) {
-  color: #ff5252;
-  font-weight: 700;
-  font-size: 0.85rem;
-}
-
-.tooltip-description :deep(.tag-rarity-legendary) {
-  color: #ff9800;
-  font-weight: 600;
-  font-size: 0.85rem;
-}
-
-.tooltip-description :deep(.tag-rarity-generic) {
-  color: #ffd54f;
-  font-weight: 500;
-  font-size: 0.85rem;
-}
-
-.tooltip-description :deep(.tag-rules) {
-  margin-top: 8px;
-  padding: 6px;
-  background: rgba(0, 0, 0, 0.1);
-  border-left: 2px solid var(--color-on-surface-dim);
-  font-size: 0.8rem;
-  font-style: italic;
-  opacity: 0.8;
-}
-
-.tooltip-description :deep(.tag-flavor) {
-  margin-top: 10px;
-  padding: 6px;
-  background: rgba(74, 222, 255, 0.1);
-  border-left: 2px solid #4a9eff;
-  font-size: 0.8rem;
-  font-style: italic;
-  color: rgba(255, 255, 255, 0.7);
-}
-
-.tooltip-description :deep(.tag-list) {
-  margin: 4px 0;
-  padding-left: 12px;
-  position: relative;
-}
-
-.tooltip-description strong {
-  font-weight: 600;
-  color: var(--color-on-surface);
-}
-
-/* Item tags in tooltip */
 .tooltip-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
-  margin-bottom: 8px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid var(--color-on-surface-dim);
 }
 
 .tooltip-tags .item-tag {
-  font-size: 0.7rem;
+  font-size: 0.65rem;
   padding: 2px 6px;
   border-radius: 3px;
   font-weight: 600;
@@ -401,7 +397,6 @@ const formattedDescription = computed(() =>
   white-space: nowrap;
 }
 
-/* Gold situation tags */
 .tooltip-tags .tag-ahead {
   background-color: #22c55e;
   color: white;
@@ -412,7 +407,6 @@ const formattedDescription = computed(() =>
   color: white;
 }
 
-/* Region tags */
 .tooltip-tags .tag-region_euw {
   background-color: #3b82f6;
   color: white;
@@ -433,6 +427,257 @@ const formattedDescription = computed(() =>
   color: white;
 }
 
+/* Stats Section */
+.tooltip-stats {
+  margin-bottom: 10px;
+}
+
+.stat-row {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin-bottom: 3px;
+}
+
+.stat-value {
+  color: var(--tooltip-stat-value);
+  font-weight: 600;
+  font-size: 0.85rem;
+  min-width: 45px;
+  text-align: right;
+}
+
+.stat-label {
+  color: var(--tooltip-stat-label);
+  font-size: 0.85rem;
+}
+
+/* Effects Section */
+.tooltip-effects {
+  padding-top: 8px;
+  border-top: 1px solid var(--tooltip-header-border);
+}
+
+.effect-item {
+  margin-bottom: 8px;
+  padding-left: 10px;
+  border-left: 3px solid var(--tooltip-border);
+}
+
+.effect-item:last-child {
+  margin-bottom: 0;
+}
+
+.effect-item.effect-passive {
+  border-left-color: var(--tooltip-effect-passive);
+}
+
+.effect-item.effect-active {
+  border-left-color: var(--tooltip-effect-active);
+}
+
+.effect-item.effect-unique {
+  border-left-color: var(--tooltip-effect-unique);
+}
+
+.effect-item.effect-mythic {
+  border-left-color: var(--tooltip-effect-mythic);
+}
+
+.effect-item.effect-legendary {
+  border-left-color: var(--tooltip-effect-legendary);
+}
+
+.effect-item.effect-epic {
+  border-left-color: var(--tooltip-effect-epic);
+}
+
+.effect-header {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  margin-bottom: 3px;
+}
+
+.effect-type {
+  font-size: 0.65rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 1px 5px;
+  border-radius: 2px;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.effect-passive .effect-type {
+  color: var(--tooltip-effect-passive);
+}
+
+.effect-active .effect-type {
+  color: var(--tooltip-effect-active);
+}
+
+.effect-unique .effect-type {
+  color: var(--tooltip-effect-unique);
+}
+
+.effect-mythic .effect-type {
+  color: var(--tooltip-effect-mythic);
+}
+
+.effect-legendary .effect-type {
+  color: var(--tooltip-effect-legendary);
+}
+
+.effect-epic .effect-type {
+  color: var(--tooltip-effect-epic);
+}
+
+.effect-name {
+  font-weight: 600;
+  color: var(--tooltip-text);
+  font-size: 0.85rem;
+}
+
+.effect-description {
+  font-size: 0.8rem;
+  color: var(--tooltip-text-dim);
+  line-height: 1.5;
+}
+
+/* Rules Section */
+.tooltip-rules {
+  margin-top: 8px;
+  padding: 6px 8px;
+  background: rgba(0, 0, 0, 0.2);
+  border-left: 2px solid var(--tooltip-border);
+  font-size: 0.75rem;
+  font-style: italic;
+  color: var(--tooltip-text-dim);
+}
+
+/* Flavor Text */
+.tooltip-flavor {
+  margin-top: 8px;
+  padding: 6px 8px;
+  background: rgba(74, 222, 255, 0.05);
+  border-left: 2px solid var(--tooltip-flavor);
+  font-size: 0.75rem;
+  font-style: italic;
+  color: var(--tooltip-flavor);
+}
+
+/* Text segment styles inside effects */
+.effect-description :deep(.stat-highlight) {
+  color: var(--tooltip-highlight);
+  font-weight: 600;
+}
+
+.effect-description :deep(.tag-passive) {
+  color: var(--tooltip-effect-passive);
+  font-weight: 600;
+}
+
+.effect-description :deep(.tag-active) {
+  color: var(--tooltip-effect-active);
+  font-weight: 600;
+}
+
+.effect-description :deep(.tag-keyword) {
+  color: var(--tooltip-keyword);
+  font-weight: 600;
+}
+
+.effect-description :deep(.tag-keyword-major) {
+  color: var(--tooltip-keyword-major);
+  font-weight: 700;
+  font-style: italic;
+}
+
+.effect-description :deep(.tag-keyword-stealth) {
+  color: var(--tooltip-keyword-stealth);
+  font-weight: 600;
+}
+
+.effect-description :deep(.tag-status) {
+  color: var(--tooltip-status);
+  font-weight: 500;
+  font-style: italic;
+}
+
+.effect-description :deep(.tag-speed),
+.effect-description :deep(.tag-scaling) {
+  color: var(--tooltip-scaling);
+  font-style: italic;
+  font-weight: 500;
+}
+
+.effect-description :deep(.tag-healing) {
+  color: var(--tooltip-healing);
+  font-weight: 500;
+}
+
+.effect-description :deep(.tag-shield) {
+  color: var(--tooltip-shield);
+  font-weight: 500;
+}
+
+.effect-description :deep(.tag-magic-damage) {
+  color: var(--tooltip-magic-damage);
+  font-weight: 500;
+}
+
+.effect-description :deep(.tag-physical-damage) {
+  color: var(--tooltip-physical-damage);
+  font-weight: 500;
+}
+
+.effect-description :deep(.tag-true-damage) {
+  color: var(--tooltip-true-damage);
+  font-weight: 600;
+}
+
+.effect-description :deep(.tag-onhit) {
+  background: rgba(52, 152, 219, 0.2);
+  color: var(--tooltip-onhit);
+  padding: 1px 4px;
+  border-radius: 3px;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.effect-description :deep(.tag-spellname) {
+  color: var(--tooltip-spellname);
+  font-weight: 600;
+  font-style: italic;
+}
+
+.effect-description :deep(.tag-unique) {
+  color: var(--tooltip-effect-unique);
+  font-weight: 700;
+  font-size: 0.75rem;
+  letter-spacing: 0.5px;
+}
+
+.effect-description :deep(.tag-rarity-mythic) {
+  color: var(--tooltip-effect-mythic);
+  font-weight: 700;
+  font-size: 0.85rem;
+}
+
+.effect-description :deep(.tag-rarity-legendary) {
+  color: var(--tooltip-effect-legendary);
+  font-weight: 600;
+  font-size: 0.85rem;
+}
+
+.effect-description :deep(.tag-rarity-generic) {
+  color: var(--tooltip-effect-epic);
+  font-weight: 500;
+  font-size: 0.85rem;
+}
+
+/* Transition */
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity 0.15s ease;

frontend/utils/buildHelpers.ts

@@ -54,7 +54,8 @@ function trimTreeDepth(tree: ItemTree, maxDepth: number, currentDepth: number =
   const trimmedTree: ItemTree = {
     count: tree.count,
     data: tree.data,
-    children: []
+    children: [],
+    tags: tree.tags
   }
 
   // If we haven't reached maxDepth, include children