feat: tag items depending on region and gold state when bought

frontend/components/item/ItemTooltip.vue

@@ -6,9 +6,41 @@ interface Props {
   show: boolean
   x: number
   y: number
+  tags?: ItemTag[]
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  tags: () => []
+})
+
+// Tag display helpers
+function getTagLabel(tag: ItemTag): string {
+  const labels: Record<ItemTag, string> = {
+    ahead: 'Ahead',
+    behind: 'Behind',
+    region_euw: 'EUW',
+    region_eun: 'EUN',
+    region_na: 'NA',
+    region_kr: 'KR'
+  }
+  return labels[tag] || tag
+}
+
+function getTagTooltip(tag: ItemTag): string {
+  const tooltips: Record<ItemTag, string> = {
+    ahead: 'This item is typically bought when ahead in gold',
+    behind: 'This item is typically bought when behind in gold',
+    region_euw: 'Popular in EU West region',
+    region_eun: 'Popular in EU Nordic & East region',
+    region_na: 'Popular in North America region',
+    region_kr: 'Popular in Korea region'
+  }
+  return tooltips[tag] || tag
+}
+
+function getTagClass(tag: ItemTag): string {
+  return `tag-${tag}`
+}
 
 // Parse description and convert to styled HTML
 const formatDescription = (description?: string) => {
@@ -108,6 +140,18 @@ const formattedDescription = computed(() =>
           {{ 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>
+
         <!-- eslint-disable vue/no-v-html -->
         <div
           v-if="formattedDescription"
@@ -337,6 +381,58 @@ const formattedDescription = computed(() =>
   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;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  white-space: nowrap;
+}
+
+/* Gold situation tags */
+.tooltip-tags .tag-ahead {
+  background-color: #22c55e;
+  color: white;
+}
+
+.tooltip-tags .tag-behind {
+  background-color: #ef4444;
+  color: white;
+}
+
+/* Region tags */
+.tooltip-tags .tag-region_euw {
+  background-color: #3b82f6;
+  color: white;
+}
+
+.tooltip-tags .tag-region_eun {
+  background-color: #8b5cf6;
+  color: white;
+}
+
+.tooltip-tags .tag-region_na {
+  background-color: #f59e0b;
+  color: white;
+}
+
+.tooltip-tags .tag-region_kr {
+  background-color: #ec4899;
+  color: white;
+}
+
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity 0.15s ease;