From 080d2424c857d96005103765d884f43ccb5abb17 Mon Sep 17 00:00:00 2001
From: Pantry Lead Agent <pantry-bot@jeanlucmakiola.de>
Date: Tue, 24 Feb 2026 00:05:44 +0000
Subject: [PATCH] feat: integrate TagBadge and TagPicker in inventory (#28 #29)

Issue #28 - Tag assignment in AddItemForm:
- Replace custom tag selection with TagPicker component
- Simplified code (removed manual tag state management)
- Cleaner UI with reusable component

Issue #29 - Display tags in InventoryList:
- Replace UBadge with TagBadge in InventoryCard
- Automatic contrast color for readability
- Consistent tag display across app

Closes #28, #29
---
 app/components/inventory/AddItemForm.vue   | 76 +---------------------
 app/components/inventory/InventoryCard.vue | 13 ++--
 2 files changed, 8 insertions(+), 81 deletions(-)

diff --git a/app/components/inventory/AddItemForm.vue b/app/components/inventory/AddItemForm.vue
index 3fe8082..cf16d44 100644
--- a/app/components/inventory/AddItemForm.vue
+++ b/app/components/inventory/AddItemForm.vue
@@ -68,37 +68,7 @@
 
       <!-- Tags -->
       <UFormGroup label="Tags" hint="Optional">
-        <div class="space-y-2">
-          <!-- Selected Tags -->
-          <div v-if="selectedTags.length > 0" class="flex flex-wrap gap-1 mb-2">
-            <UBadge 
-              v-for="tag in selectedTags" 
-              :key="tag.id"
-              :style="{ backgroundColor: tag.color }"
-              class="text-white cursor-pointer"
-              @click="removeTag(tag.id)"
-            >
-              {{ tag.icon }} {{ tag.name }} ✕
-            </UBadge>
-          </div>
-
-          <!-- Tag Selection by Category -->
-          <div v-for="category in tagCategories" :key="category.name" class="space-y-1">
-            <p class="text-xs font-medium text-gray-500 uppercase">{{ category.name }}</p>
-            <div class="flex flex-wrap gap-1">
-              <UButton
-                v-for="tag in category.tags"
-                :key="tag.id"
-                size="xs"
-                :color="isTagSelected(tag.id) ? 'primary' : 'gray'"
-                :variant="isTagSelected(tag.id) ? 'solid' : 'outline'"
-                @click="toggleTag(tag)"
-              >
-                {{ tag.icon }} {{ tag.name }}
-              </UButton>
-            </div>
-          </div>
-        </div>
+        <TagsTagPicker v-model="selectedTags" />
       </UFormGroup>
 
       <!-- Submit -->
@@ -129,7 +99,6 @@
 <script setup lang="ts">
 const { addInventoryItem, addItemTags } = useInventory()
 const { getUnits } = useUnits()
-const { getTags } = useTags()
 
 const props = defineProps<{
   initialData?: {
@@ -158,18 +127,12 @@ const form = reactive({
 const submitting = ref(false)
 const selectedTags = ref<any[]>([])
 
-// Load units and tags
+// Load units
 const units = ref<any[]>([])
-const tags = ref<any[]>([])
 
 onMounted(async () => {
-  const [unitsResult, tagsResult] = await Promise.all([
-    getUnits(),
-    getTags()
-  ])
-
+  const unitsResult = await getUnits()
   units.value = unitsResult.data || []
-  tags.value = tagsResult.data || []
 
   // Set default unit (Piece)
   const defaultUnit = units.value.find(u => u.abbreviation === 'pc')
@@ -231,39 +194,6 @@ const unitOptions = computed(() => {
   ])
 })
 
-// Tag categories for display
-const tagCategories = computed(() => {
-  const categories: Record<string, any[]> = {}
-  
-  for (const tag of tags.value) {
-    const cat = tag.category
-    if (!categories[cat]) categories[cat] = []
-    categories[cat].push(tag)
-  }
-
-  return Object.entries(categories).map(([name, tags]) => ({
-    name,
-    tags
-  }))
-})
-
-// Tag selection helpers
-const isTagSelected = (tagId: string) => {
-  return selectedTags.value.some(t => t.id === tagId)
-}
-
-const toggleTag = (tag: any) => {
-  if (isTagSelected(tag.id)) {
-    removeTag(tag.id)
-  } else {
-    selectedTags.value.push(tag)
-  }
-}
-
-const removeTag = (tagId: string) => {
-  selectedTags.value = selectedTags.value.filter(t => t.id !== tagId)
-}
-
 // Validation
 const isValid = computed(() => {
   return form.name.trim().length > 0 && form.quantity > 0 && form.unit_id
diff --git a/app/components/inventory/InventoryCard.vue b/app/components/inventory/InventoryCard.vue
index 6e7901a..242fd0d 100644
--- a/app/components/inventory/InventoryCard.vue
+++ b/app/components/inventory/InventoryCard.vue
@@ -50,15 +50,12 @@
 
       <!-- Tags -->
       <div v-if="item.tags && item.tags.length > 0" class="flex flex-wrap gap-1">
-        <UBadge 
-          v-for="tagItem in item.tags.slice(0, 3)" 
+        <TagsTagBadge
+          v-for="tagItem in item.tags.slice(0, 3)"
           :key="tagItem.tag.id"
-          :style="{ backgroundColor: tagItem.tag.color }"
-          size="xs"
-          class="text-white"
-        >
-          {{ tagItem.tag.icon }} {{ tagItem.tag.name }}
-        </UBadge>
+          :tag="tagItem.tag"
+          size="sm"
+        />
         <UBadge v-if="item.tags.length > 3" size="xs" color="gray">
           +{{ item.tags.length - 3 }}
         </UBadge>