frontend: add item tooltip, refactor with itemicon component

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>