From 6b1c34ceffd7306539b992782fccb6ad327e904f Mon Sep 17 00:00:00 2001
From: Pantry Lead Agent <pantry-bot@jeanlucmakiola.de>
Date: Tue, 24 Feb 2026 00:05:12 +0000
Subject: [PATCH] feat: create TagBadge and TagPicker components (#26 #27)

TagBadge:
- Display tag with icon, name, color
- Automatic contrast text color (light/dark)
- Optional removable with X button
- Configurable size (sm/md/lg)

TagPicker:
- Select multiple tags by category
- Visual feedback for selected tags
- Category-based organization
- Position category prioritized
- Two-way binding with v-model

Closes #26, #27
---
 app/components/tags/TagBadge.vue  |  71 +++++++++++++++++
 app/components/tags/TagPicker.vue | 125 ++++++++++++++++++++++++++++++
 2 files changed, 196 insertions(+)
 create mode 100644 app/components/tags/TagBadge.vue
 create mode 100644 app/components/tags/TagPicker.vue

diff --git a/app/components/tags/TagBadge.vue b/app/components/tags/TagBadge.vue
new file mode 100644
index 0000000..c77e87b
--- /dev/null
+++ b/app/components/tags/TagBadge.vue
@@ -0,0 +1,71 @@
+<template>
+  <UBadge 
+    :style="badgeStyle"
+    :class="badgeClasses"
+    v-bind="$attrs"
+  >
+    <span v-if="tag.icon" class="mr-1">{{ tag.icon }}</span>
+    <span>{{ tag.name }}</span>
+    <UButton
+      v-if="removable"
+      icon="i-heroicons-x-mark"
+      size="2xs"
+      color="white"
+      variant="link"
+      class="ml-1 -mr-1"
+      @click.stop="$emit('remove', tag.id)"
+    />
+  </UBadge>
+</template>
+
+<script setup lang="ts">
+interface Tag {
+  id: string
+  name: string
+  color: string
+  icon?: string
+  category: string
+}
+
+const props = withDefaults(defineProps<{
+  tag: Tag
+  removable?: boolean
+  size?: 'sm' | 'md' | 'lg'
+}>(), {
+  removable: false,
+  size: 'md'
+})
+
+defineEmits<{
+  remove: [tagId: string]
+}>()
+
+const badgeStyle = computed(() => ({
+  backgroundColor: props.tag.color,
+  color: getContrastColor(props.tag.color)
+}))
+
+const badgeClasses = computed(() => ({
+  'cursor-pointer': props.removable,
+  'text-xs px-2 py-1': props.size === 'sm',
+  'text-sm px-2.5 py-1': props.size === 'md',
+  'text-base px-3 py-1.5': props.size === 'lg'
+}))
+
+// Calculate contrast color for text (black or white)
+function getContrastColor(hexColor: string): string {
+  // Remove # if present
+  const hex = hexColor.replace('#', '')
+  
+  // Convert to RGB
+  const r = parseInt(hex.slice(0, 2), 16)
+  const g = parseInt(hex.slice(2, 4), 16)
+  const b = parseInt(hex.slice(4, 6), 16)
+  
+  // Calculate luminance
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
+  
+  // Return white for dark colors, black for light colors
+  return luminance > 0.5 ? '#000000' : '#FFFFFF'
+}
+</script>
diff --git a/app/components/tags/TagPicker.vue b/app/components/tags/TagPicker.vue
new file mode 100644
index 0000000..c0d585a
--- /dev/null
+++ b/app/components/tags/TagPicker.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="space-y-4">
+    <!-- Selected Tags -->
+    <div v-if="selectedTags.length > 0" class="flex flex-wrap gap-2">
+      <TagsTagBadge
+        v-for="tag in selectedTags"
+        :key="tag.id"
+        :tag="tag"
+        :removable="true"
+        @remove="removeTag"
+      />
+    </div>
+
+    <!-- Empty State -->
+    <div v-else class="text-sm text-gray-500 italic">
+      No tags selected
+    </div>
+
+    <!-- Tag Selection by Category -->
+    <div v-for="category in tagsByCategory" :key="category.name" class="space-y-2">
+      <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wide">
+        {{ category.name }}
+      </h4>
+      <div class="flex flex-wrap gap-2">
+        <UButton
+          v-for="tag in category.tags"
+          :key="tag.id"
+          size="sm"
+          :color="isSelected(tag.id) ? 'primary' : 'gray'"
+          :variant="isSelected(tag.id) ? 'solid' : 'outline'"
+          @click="toggleTag(tag)"
+        >
+          <span v-if="tag.icon" class="mr-1">{{ tag.icon }}</span>
+          {{ tag.name }}
+        </UButton>
+      </div>
+    </div>
+
+    <!-- Loading State -->
+    <div v-if="loading" class="text-center py-4">
+      <div class="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-primary-500"></div>
+      <p class="text-sm text-gray-500 mt-2">Loading tags...</p>
+    </div>
+
+    <!-- Empty State (no tags available) -->
+    <div v-if="!loading && availableTags.length === 0" class="text-center py-4">
+      <p class="text-gray-500">No tags available</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Tag {
+  id: string
+  name: string
+  color: string
+  icon?: string
+  category: string
+}
+
+const props = defineProps<{
+  modelValue: Tag[]
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [tags: Tag[]]
+}>()
+
+const { getTags } = useTags()
+
+const availableTags = ref<Tag[]>([])
+const loading = ref(true)
+
+// Load tags on mount
+onMounted(async () => {
+  const { data, error } = await getTags()
+  if (data) {
+    availableTags.value = data
+  }
+  loading.value = false
+})
+
+// Computed
+const selectedTags = computed(() => props.modelValue)
+
+const tagsByCategory = computed(() => {
+  const grouped: Record<string, Tag[]> = {}
+  
+  for (const tag of availableTags.value) {
+    if (!grouped[tag.category]) {
+      grouped[tag.category] = []
+    }
+    grouped[tag.category].push(tag)
+  }
+
+  return Object.entries(grouped).map(([name, tags]) => ({
+    name: name.charAt(0).toUpperCase() + name.slice(1),
+    tags: tags.sort((a, b) => a.name.localeCompare(b.name))
+  })).sort((a, b) => {
+    // Position category first, then others alphabetically
+    if (a.name === 'Position') return -1
+    if (b.name === 'Position') return 1
+    return a.name.localeCompare(b.name)
+  })
+})
+
+// Methods
+const isSelected = (tagId: string) => {
+  return selectedTags.value.some(t => t.id === tagId)
+}
+
+const toggleTag = (tag: Tag) => {
+  const isCurrentlySelected = isSelected(tag.id)
+  
+  if (isCurrentlySelected) {
+    removeTag(tag.id)
+  } else {
+    emit('update:modelValue', [...selectedTags.value, tag])
+  }
+}
+
+const removeTag = (tagId: string) => {
+  emit('update:modelValue', selectedTags.value.filter(t => t.id !== tagId))
+}
+</script>