From 930cbf5a18f5e44199bc10c18bc804c859a43a82 Mon Sep 17 00:00:00 2001
From: Valentin Haudiquet <valentin.haudiquet@canonical.com>
Date: Sun, 1 Mar 2026 13:42:01 +0100
Subject: [PATCH] frontend: add item tooltip, refactor with itemicon component

---
 frontend/assets/css/main.css             |   1 +
 frontend/components/build/ItemRow.vue    |  49 +---
 frontend/components/item/Box.vue         |  49 ----
 frontend/components/item/ItemIcon.vue    | 137 +++++++++
 frontend/components/item/ItemTooltip.vue | 349 +++++++++++++++++++++++
 frontend/components/item/Tree.vue        |  87 +++---
 frontend/types/cdragon.ts                |   6 +
 7 files changed, 536 insertions(+), 142 deletions(-)
 delete mode 100644 frontend/components/item/Box.vue
 create mode 100644 frontend/components/item/ItemIcon.vue
 create mode 100644 frontend/components/item/ItemTooltip.vue

diff --git a/frontend/assets/css/main.css b/frontend/assets/css/main.css
index 6f37358..8049550 100644
--- a/frontend/assets/css/main.css
+++ b/frontend/assets/css/main.css
@@ -4,6 +4,7 @@
   --color-surface: #312e2c;
   --color-on-surface: #b7b8e1;
   --color-surface-darker: #1f1d1c;
+  --color-gold: #ffd700;
 }
 
 /* Font setting */
diff --git a/frontend/components/build/ItemRow.vue b/frontend/components/build/ItemRow.vue
index 2518a57..ba452cf 100644
--- a/frontend/components/build/ItemRow.vue
+++ b/frontend/components/build/ItemRow.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { CDRAGON_BASE, mapPath } from '~/utils/cdragon'
-
 interface ItemData {
   data: number
   count: number
@@ -21,15 +19,17 @@ const maxItems = computed(() => props.maxItems ?? props.items.length)
   <div class="item-row">
     <span class="item-row-label">{{ label }}</span>
     <div class="item-row-content">
-      <div v-for="item in items.slice(0, maxItems)" :key="item.data" class="item-cell">
-        <NuxtImg
+      <template v-for="item in items.slice(0, maxItems)" :key="item.data">
+        <ItemIcon
           v-if="itemMap.get(item.data)"
-          class="item-img"
-          :src="CDRAGON_BASE + mapPath(itemMap.get(item.data)!.iconPath)"
+          :item="itemMap.get(item.data)!"
+          :show-pickrate="true"
+          :pickrate="item.count / totalCount"
+          :size="48"
+          class="item-cell"
         />
         <div v-else class="item-placeholder" />
-        <span class="item-pickrate">{{ ((item.count / totalCount) * 100).toFixed(0) }}%</span>
-      </div>
+      </template>
     </div>
   </div>
 </template>
@@ -56,19 +56,6 @@ const maxItems = computed(() => props.maxItems ?? props.items.length)
   gap: 8px;
 }
 
-.item-cell {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.item-img {
-  width: 48px;
-  height: 48px;
-  border-radius: 4px;
-  border: 1px solid var(--color-on-surface);
-}
-
 .item-placeholder {
   width: 48px;
   height: 48px;
@@ -76,24 +63,4 @@ const maxItems = computed(() => props.maxItems ?? props.items.length)
   border-radius: 4px;
   border: 1px solid var(--color-on-surface);
 }
-
-.item-pickrate {
-  font-size: 0.65rem;
-  color: var(--color-on-surface);
-  opacity: 0.6;
-  margin-top: 1px;
-}
-
-/* Responsive: Mobile */
-@media only screen and (max-width: 900px) {
-  .item-img {
-    width: 40px;
-    height: 40px;
-  }
-
-  .item-placeholder {
-    width: 40px;
-    height: 40px;
-  }
-}
 </style>
diff --git a/frontend/components/item/Box.vue b/frontend/components/item/Box.vue
deleted file mode 100644
index acddfcb..0000000
--- a/frontend/components/item/Box.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<script lang="ts" setup>
-defineProps<{
-  title: string
-  bootsFirst?: number
-  sizePerc?: number
-}>()
-</script>
-
-<template>
-  <div
-    :style="
-      sizePerc != undefined && sizePerc != null ? 'max-height: ' + sizePerc * 600 + 'px;' : ''
-    "
-    class="item-box"
-  >
-    <div
-      style="display: flex; flex-direction: column; justify-content: center; align-items: center"
-    >
-      <h2 class="item-box-title">{{ title }}</h2>
-      <h5 v-if="bootsFirst != undefined && bootsFirst != null" style="margin: auto">
-        ({{ (bootsFirst * 100).toFixed(2) }}%)
-      </h5>
-    </div>
-    <slot />
-  </div>
-</template>
-
-<style scoped>
-.item-box {
-  border: 1px solid var(--color-on-surface);
-  border-radius: 8px;
-
-  margin: 10px;
-
-  width: fit-content;
-  height: 600px;
-}
-.item-box-title {
-  font-variant: small-caps;
-  text-align: center;
-  margin: 10px;
-}
-@media only screen and (max-width: 1000px) {
-  .item-box {
-    width: 95%;
-    height: fit-content;
-  }
-}
-</style>
diff --git a/frontend/components/item/ItemIcon.vue b/frontend/components/item/ItemIcon.vue
new file mode 100644
index 0000000..80af69d
--- /dev/null
+++ b/frontend/components/item/ItemIcon.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { CDRAGON_BASE, mapPath } from '~/utils/cdragon'
+
+interface Props {
+  item: Item
+  size?: number
+  showPickrate?: boolean
+  pickrate?: number
+  class?: string
+}
+
+// Expose the icon element for external use (e.g., arrow drawing)
+const iconElement = ref<HTMLElement | null>(null)
+
+defineExpose({
+  iconElement
+})
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 48,
+  showPickrate: false,
+  pickrate: 0,
+  class: ''
+})
+
+// Tooltip state - encapsulated in this component
+const tooltipState = reactive({
+  show: false,
+  item: null as Item | null,
+  x: 0,
+  y: 0
+})
+
+const handleMouseEnter = (event: MouseEvent) => {
+  tooltipState.item = props.item
+
+  // Calculate optimal position to keep tooltip within viewport
+  // Don't estimate height - position based on cursor location
+  const tooltipWidth = 300 // Maximum width from CSS
+  const padding = 10 // Minimum padding from edges
+  const offset = 15 // Distance from cursor
+
+  // Get viewport dimensions
+  const viewportWidth = window.innerWidth
+  const viewportHeight = window.innerHeight
+
+  // Right edge detection: if we're in the right half, position to the left
+  let x = event.clientX + offset
+  if (event.clientX + tooltipWidth + offset > viewportWidth - padding) {
+    x = event.clientX - tooltipWidth - offset
+    // Clamp if still off-screen
+    if (x < padding) {
+      x = padding
+    }
+  }
+
+  // Bottom edge detection: if we're in the bottom half, position above
+  // Use a smaller offset for vertical to keep it close
+  let y = event.clientY + offset
+  if (event.clientY > viewportHeight * 0.7) {
+    y = event.clientY - offset - 200 // Position ~200px above
+    // Clamp if too high
+    if (y < padding) {
+      y = padding
+    }
+  }
+
+  // Ensure Y is within reasonable bounds
+  y = Math.min(y, viewportHeight - padding)
+
+  tooltipState.x = x
+  tooltipState.y = y
+  tooltipState.show = true
+}
+
+const handleMouseLeave = () => {
+  tooltipState.show = false
+  tooltipState.item = null
+}
+
+const itemIconPath = computed(() => CDRAGON_BASE + mapPath(props.item.iconPath))
+</script>
+
+<template>
+  <div class="item-icon-wrapper" @mouseleave="handleMouseLeave">
+    <div
+      ref="iconElement"
+      class="item-icon"
+      :class="props.class"
+      :style="{ width: size + 'px', height: size + 'px' }"
+      @mouseenter="handleMouseEnter"
+    >
+      <NuxtImg :src="itemIconPath" :alt="item.name || 'Item'" class="item-img" />
+    </div>
+
+    <span v-if="showPickrate" class="item-pickrate"> {{ (pickrate * 100).toFixed(0) }}% </span>
+
+    <ItemTooltip
+      :show="tooltipState.show"
+      :item="tooltipState.item"
+      :x="tooltipState.x"
+      :y="tooltipState.y"
+    />
+  </div>
+</template>
+
+<style scoped>
+.item-icon-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  border: 1px solid var(--color-on-surface);
+  overflow: hidden;
+  cursor: help;
+  position: relative;
+}
+
+.item-img {
+  width: 100%;
+  height: 100%;
+}
+
+.item-pickrate {
+  font-size: 0.65rem;
+  color: var(--color-on-surface);
+  opacity: 0.6;
+  margin-top: 2px;
+  white-space: nowrap;
+}
+</style>
diff --git a/frontend/components/item/ItemTooltip.vue b/frontend/components/item/ItemTooltip.vue
new file mode 100644
index 0000000..2183d51
--- /dev/null
+++ b/frontend/components/item/ItemTooltip.vue
@@ -0,0 +1,349 @@
+<script setup lang="ts">
+import { CDRAGON_BASE, mapPath } from '~/utils/cdragon'
+
+interface Props {
+  item: Item | null
+  show: boolean
+  x: number
+  y: number
+}
+
+const props = defineProps<Props>()
+
+// Parse description and convert to styled HTML
+const formatDescription = (description?: string) => {
+  if (!description) return ''
+
+  // 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()
+
+  return html
+}
+
+const formattedDescription = computed(() =>
+  props.item ? formatDescription(props.item.description) : ''
+)
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="fade">
+      <div
+        v-if="show && item"
+        class="item-tooltip"
+        :style="{
+          left: x + 'px',
+          top: y + 'px'
+        }"
+        @mouseenter.stop
+      >
+        <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>
+          </div>
+        </div>
+
+        <div v-if="item.plaintext" class="tooltip-plaintext">
+          {{ item.plaintext }}
+        </div>
+
+        <!-- eslint-disable vue/no-v-html -->
+        <div
+          v-if="formattedDescription"
+          class="tooltip-description"
+          v-html="formattedDescription"
+        ></div>
+        <!-- eslint-enable vue/no-v-html -->
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.item-tooltip {
+  position: fixed;
+  z-index: 1000;
+  background: var(--color-surface);
+  border: 1px solid var(--color-on-surface);
+  border-radius: 8px;
+  padding: 12px;
+  max-width: 300px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  pointer-events: none;
+}
+
+.tooltip-header {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 10px;
+}
+
+.tooltip-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 4px;
+  border: 1px solid var(--color-on-surface);
+  flex-shrink: 0;
+}
+
+.tooltip-title {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.tooltip-title h3 {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--color-on-surface);
+  line-height: 1.2;
+}
+
+.tooltip-gold {
+  font-size: 0.85rem;
+  color: var(--color-gold);
+  margin-top: 4px;
+}
+
+.tooltip-plaintext {
+  font-size: 0.85rem;
+  color: var(--color-on-surface);
+  opacity: 0.8;
+  margin-bottom: 8px;
+  font-style: italic;
+}
+
+.tooltip-description {
+  font-size: 0.85rem;
+  color: var(--color-on-surface);
+  line-height: 1.5;
+  white-space: pre-wrap;
+}
+
+/* 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);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/frontend/components/item/Tree.vue b/frontend/components/item/Tree.vue
index 237e05e..8a471b2 100644
--- a/frontend/components/item/Tree.vue
+++ b/frontend/components/item/Tree.vue
@@ -12,20 +12,16 @@ const emit = defineEmits<{
   parentReady: []
 }>()
 
-const { data: items, pending: itemsLoading } = useFetch<Array<{ id: number; iconPath: string }>>(
-  '/api/cdragon/items',
-  {
-    lazy: true, // Don't block rendering
-    server: false // Client-side only
-  }
-)
+const { data: items, pending: itemsLoading } = useFetch<Array<Item>>('/api/cdragon/items', {
+  lazy: true, // Don't block rendering
+  server: false // Client-side only
+})
 
 // Track image loading state
 const imagesLoaded = ref(false)
-const imageElement: Ref<HTMLImageElement | null> = ref(null)
 
 // Create item map reactively
-const itemMap = reactive(new Map<number, { id: number; iconPath: string }>())
+const itemMap = reactive(new Map<number, Item>())
 watch(
   items,
   newItems => {
@@ -39,15 +35,13 @@ watch(
   { immediate: true }
 )
 
-function getItemIconPath(itemId: number): string {
-  const item = itemMap.get(itemId)
-  return item ? CDRAGON_BASE + mapPath(item.iconPath) : ''
-}
-
-const start: Ref<Element | null> = useTemplateRef('start')
+const startTreeItem = useTemplateRef('start')
 const arrows: Array<svgdomarrowsLinePath> = []
 const pendingChildMounts: Array<Element> = []
 
+// Get the actual icon element for arrow drawing
+const startElement = computed(() => startTreeItem.value?.iconElement ?? null)
+
 // Function to wait for an image to load
 function waitForImageLoad(imgElement: HTMLImageElement): Promise<void> {
   return new Promise(resolve => {
@@ -91,12 +85,12 @@ onMounted(async () => {
     }
   })
 
-  if (start.value) {
-    const imgElement = start.value as HTMLImageElement
-    imageElement.value = imgElement
-
-    // Wait for own image to load
-    await waitForImageLoad(imgElement)
+  if (startElement.value) {
+    // Wait for the ItemIcon to load its image
+    const imgElement = startElement.value.querySelector('img')
+    if (imgElement) {
+      await waitForImageLoad(imgElement as HTMLImageElement)
+    }
 
     // Now that image is loaded and DOM is ready, draw arrows
     imagesLoaded.value = true
@@ -108,7 +102,7 @@ onMounted(async () => {
     if (pendingChildMounts.length > 0) {
       await nextTick()
       for (const childEnd of pendingChildMounts) {
-        drawArrow(start.value!, childEnd)
+        drawArrow(startElement.value!, childEnd)
       }
       pendingChildMounts.length = 0
     }
@@ -117,7 +111,7 @@ onMounted(async () => {
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
         refreshArrows()
-        emit('mount', start.value!)
+        emit('mount', startElement.value!)
       })
     })
   }
@@ -133,12 +127,12 @@ onBeforeUpdate(() => {
 onUpdated(async () => {
   await nextTick()
 
-  if (start.value && imagesLoaded.value) {
+  if (startElement.value && imagesLoaded.value) {
     // Redraw arrows after DOM update
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
         refreshArrows()
-        emit('mount', start.value!)
+        emit('mount', startElement.value!)
       })
     })
   }
@@ -168,7 +162,7 @@ function drawArrow(start: Element, end: Element) {
         left: 0
       }
     },
-    style: 'stroke:var(--color-on-surface);stroke-width:2;fill:transparent;',
+    style: 'stroke:var(--color-on-surface);stroke-width:2;fill:transparent;pointer-events:none;',
     appendTo: document.body
   })
   arrows.push(arrow)
@@ -194,12 +188,12 @@ addEventListener('scroll', _ => {
 })
 
 function handleSubtreeMount(end: Element) {
-  if (start.value) {
+  if (startElement.value) {
     if (imagesLoaded.value) {
       // Parent is ready, draw arrow immediately
       requestAnimationFrame(() => {
         requestAnimationFrame(() => {
-          drawArrow(start.value!, end)
+          drawArrow(startElement.value!, end)
           refreshArrows()
         })
       })
@@ -213,7 +207,7 @@ function handleSubtreeMount(end: Element) {
 
 function handleParentReady() {
   // Parent became ready, redraw all our arrows
-  if (start.value && imagesLoaded.value) {
+  if (startElement.value && imagesLoaded.value) {
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
         refreshArrows()
@@ -233,13 +227,15 @@ function handleRefresh() {
 <template>
   <div class="item-tree-container">
     <div v-if="tree.data != undefined && tree.data != null" class="item-tree-node">
-      <img
+      <ItemIcon
+        v-if="itemMap.get(tree.data)"
         ref="start"
+        :item="itemMap.get(tree.data)!"
+        :show-pickrate="true"
+        :pickrate="parentCount ? tree.count / parentCount : 0"
+        :size="48"
         class="item-tree-img"
-        :alt="tree.data.toString()"
-        :src="getItemIconPath(tree.data)"
       />
-      <span class="item-tree-pickrate">{{ ((tree.count / parentCount!!) * 100).toFixed(0) }}%</span>
     </div>
 
     <div class="item-tree-children">
@@ -268,36 +264,23 @@ function handleRefresh() {
   flex-direction: column;
   align-items: center;
   width: fit-content;
-}
-
-.item-tree-img {
-  width: 48px;
-  height: 48px;
-  border-radius: 4px;
-  border: 1px solid var(--color-on-surface);
-}
-
-.item-tree-pickrate {
-  font-size: 0.65rem;
-  color: var(--color-on-surface);
-  opacity: 0.6;
-  margin-top: 2px;
+  position: relative;
+  z-index: 10;
 }
 
 .item-tree-children {
   margin-left: 32px;
+  position: relative;
+  z-index: 1;
 }
 
 .item-tree-child {
   width: fit-content;
+  position: relative;
 }
 
+/* Mobile responsive */
 @media only screen and (max-width: 900px) {
-  .item-tree-img {
-    width: 40px;
-    height: 40px;
-  }
-
   .item-tree-children {
     margin-left: 20px;
   }
diff --git a/frontend/types/cdragon.ts b/frontend/types/cdragon.ts
index daec48e..d733c26 100644
--- a/frontend/types/cdragon.ts
+++ b/frontend/types/cdragon.ts
@@ -23,6 +23,12 @@ declare global {
     id: number
     iconPath: string
     name?: string
+    description?: string
+    plaintext?: string
+    into?: number[]
+    from?: number[]
+    price?: number
+    priceTotal?: number
   }
   type SummonerSpell = {
     id: number