From d4d3d9390c45a59bdca98f2d6795559db9dd3fa0 Mon Sep 17 00:00:00 2001
From: Pantry Lead Agent <pantry-bot@jeanlucmakiola.de>
Date: Tue, 24 Feb 2026 00:07:27 +0000
Subject: [PATCH] feat: add TagManager and tag filtering (#30 #31)

Issue #30 - TagManager component:
- Create/delete tags with name, category, icon, color
- Color picker with hex input
- Organized display by category
- Integrated in settings page with tabs

Issue #31 - Tag filter for inventory:
- TagFilter component with multi-select
- Filter button in inventory header
- Active filter display with removable badges
- Filters items by selected tags (OR logic)
- Clean "Clear" button

Updates:
- Extended useTags composable with createTag, deleteTag
- Enhanced settings page with tab navigation
- Improved inventory filtering UX

Closes #30, #31
---
 app/components/inventory/InventoryList.vue |  18 +-
 app/components/tags/TagFilter.vue          | 127 ++++++++++++
 app/components/tags/TagManager.vue         | 212 +++++++++++++++++++++
 app/composables/useTags.ts                 |  44 ++++-
 app/pages/index.vue                        |  17 ++
 app/pages/settings.vue                     | 110 +++++------
 6 files changed, 467 insertions(+), 61 deletions(-)
 create mode 100644 app/components/tags/TagFilter.vue
 create mode 100644 app/components/tags/TagManager.vue

diff --git a/app/components/inventory/InventoryList.vue b/app/components/inventory/InventoryList.vue
index 50bdf50..dc451b5 100644
--- a/app/components/inventory/InventoryList.vue
+++ b/app/components/inventory/InventoryList.vue
@@ -43,7 +43,7 @@
     <!-- Inventory Grid -->
     <div v-else class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
       <InventoryCard
-        v-for="item in items"
+        v-for="item in filteredItems"
         :key="item.id"
         :item="item"
         @edit="$emit('edit-item', item)"
@@ -59,6 +59,7 @@ const { getInventory, deleteInventoryItem, updateQuantity } = useInventory()
 
 const props = defineProps<{
   refresh?: boolean
+  tagFilters?: string[]
 }>()
 
 const emit = defineEmits<{
@@ -86,6 +87,21 @@ const loadInventory = async () => {
   loading.value = false
 }
 
+// Computed filtered items
+const filteredItems = computed(() => {
+  if (!props.tagFilters || props.tagFilters.length === 0) {
+    return items.value
+  }
+
+  // Filter items that have at least one of the selected tags
+  return items.value.filter(item => {
+    if (!item.tags || item.tags.length === 0) return false
+    
+    const itemTagIds = item.tags.map((t: any) => t.tag.id)
+    return props.tagFilters!.some(filterId => itemTagIds.includes(filterId))
+  })
+})
+
 const handleDelete = async (id: string) => {
   if (!confirm('Are you sure you want to delete this item?')) {
     return
diff --git a/app/components/tags/TagFilter.vue b/app/components/tags/TagFilter.vue
new file mode 100644
index 0000000..200728d
--- /dev/null
+++ b/app/components/tags/TagFilter.vue
@@ -0,0 +1,127 @@
+<template>
+  <div class="space-y-3">
+    <div class="flex items-center justify-between">
+      <h4 class="text-sm font-semibold text-gray-700">Filter by Tags</h4>
+      <UButton
+        v-if="selectedTagIds.length > 0"
+        size="xs"
+        color="gray"
+        variant="ghost"
+        @click="clearFilters"
+      >
+        Clear
+      </UButton>
+    </div>
+
+    <!-- Selected Tags (active filters) -->
+    <div v-if="selectedTagIds.length > 0" class="flex flex-wrap gap-1">
+      <TagsTagBadge
+        v-for="tagId in selectedTagIds"
+        :key="tagId"
+        :tag="findTag(tagId)!"
+        size="sm"
+        removable
+        @remove="toggleTag"
+      />
+    </div>
+
+    <!-- Available Tags by Category -->
+    <div v-for="category in tagsByCategory" :key="category.name" class="space-y-2">
+      <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="isSelected(tag.id) ? 'primary' : 'gray'"
+          :variant="isSelected(tag.id) ? 'solid' : 'soft'"
+          @click="toggleTag(tag.id)"
+        >
+          <span v-if="tag.icon">{{ tag.icon }}</span>
+          <span class="ml-1">{{ tag.name }}</span>
+        </UButton>
+      </div>
+    </div>
+
+    <!-- Loading State -->
+    <div v-if="loading" class="text-center py-4">
+      <div class="inline-block animate-spin rounded-full h-4 w-4 border-b-2 border-primary-500"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Tag {
+  id: string
+  name: string
+  color: string
+  icon?: string
+  category: string
+}
+
+const props = defineProps<{
+  modelValue: string[]
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [tagIds: string[]]
+}>()
+
+const { getTags } = useTags()
+
+const availableTags = ref<Tag[]>([])
+const loading = ref(true)
+
+// Load tags on mount
+onMounted(async () => {
+  const { data } = await getTags()
+  if (data) {
+    availableTags.value = data
+  }
+  loading.value = false
+})
+
+// Computed
+const selectedTagIds = 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) => {
+    if (a.name === 'Position') return -1
+    if (b.name === 'Position') return 1
+    return a.name.localeCompare(b.name)
+  })
+})
+
+// Methods
+const isSelected = (tagId: string) => {
+  return selectedTagIds.value.includes(tagId)
+}
+
+const toggleTag = (tagId: string) => {
+  if (isSelected(tagId)) {
+    emit('update:modelValue', selectedTagIds.value.filter(id => id !== tagId))
+  } else {
+    emit('update:modelValue', [...selectedTagIds.value, tagId])
+  }
+}
+
+const clearFilters = () => {
+  emit('update:modelValue', [])
+}
+
+const findTag = (tagId: string) => {
+  return availableTags.value.find(t => t.id === tagId)
+}
+</script>
diff --git a/app/components/tags/TagManager.vue b/app/components/tags/TagManager.vue
new file mode 100644
index 0000000..63b3f06
--- /dev/null
+++ b/app/components/tags/TagManager.vue
@@ -0,0 +1,212 @@
+<template>
+  <div class="space-y-6">
+    <!-- Add New Tag Form -->
+    <UCard>
+      <template #header>
+        <h3 class="text-lg font-semibold">Create New Tag</h3>
+      </template>
+
+      <form @submit.prevent="handleCreate" class="space-y-4">
+        <div class="grid grid-cols-2 gap-3">
+          <UFormGroup label="Name" required>
+            <UInput 
+              v-model="newTag.name"
+              placeholder="e.g. Freezer, Vegan"
+              size="md"
+            />
+          </UFormGroup>
+
+          <UFormGroup label="Category" required>
+            <USelect
+              v-model="newTag.category"
+              :options="categoryOptions"
+              placeholder="Select category"
+              size="md"
+            />
+          </UFormGroup>
+        </div>
+
+        <div class="grid grid-cols-2 gap-3">
+          <UFormGroup label="Icon" hint="Single emoji">
+            <UInput 
+              v-model="newTag.icon"
+              placeholder="❄️"
+              maxlength="2"
+              size="md"
+            />
+          </UFormGroup>
+
+          <UFormGroup label="Color" required>
+            <div class="flex gap-2">
+              <UInput 
+                v-model="newTag.color"
+                type="color"
+                class="w-16"
+              />
+              <UInput 
+                v-model="newTag.color"
+                placeholder="#3B82F6"
+                class="flex-1"
+                size="md"
+              />
+            </div>
+          </UFormGroup>
+        </div>
+
+        <UButton 
+          type="submit"
+          color="primary"
+          :loading="creating"
+          :disabled="!isFormValid"
+        >
+          Create Tag
+        </UButton>
+      </form>
+    </UCard>
+
+    <!-- Existing Tags -->
+    <UCard>
+      <template #header>
+        <h3 class="text-lg font-semibold">Existing Tags</h3>
+      </template>
+
+      <div v-if="loading" class="text-center py-8">
+        <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary-500"></div>
+        <p class="text-gray-600 mt-2">Loading tags...</p>
+      </div>
+
+      <div v-else-if="tagsByCategory.length === 0" class="text-center py-8">
+        <p class="text-gray-500">No tags yet. Create your first tag above!</p>
+      </div>
+
+      <div v-else class="space-y-4">
+        <div v-for="category in tagsByCategory" :key="category.name">
+          <h4 class="text-sm font-semibold text-gray-600 uppercase mb-2">
+            {{ category.name }}
+          </h4>
+          <div class="space-y-2">
+            <div
+              v-for="tag in category.tags"
+              :key="tag.id"
+              class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100"
+            >
+              <div class="flex items-center gap-3">
+                <TagsTagBadge :tag="tag" size="md" />
+                <span class="text-sm text-gray-500">{{ tag.color }}</span>
+              </div>
+              
+              <UButton
+                icon="i-heroicons-trash"
+                color="red"
+                variant="ghost"
+                size="sm"
+                @click="handleDelete(tag.id, tag.name)"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </UCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { getTags, createTag, deleteTag } = useTags()
+
+const tags = ref<any[]>([])
+const loading = ref(true)
+const creating = ref(false)
+
+const newTag = reactive({
+  name: '',
+  category: '',
+  icon: '',
+  color: '#3B82F6'
+})
+
+const categoryOptions = [
+  { label: 'Position', value: 'position' },
+  { label: 'Type', value: 'type' },
+  { label: 'Custom', value: 'custom' }
+]
+
+// Load tags on mount
+const loadTags = async () => {
+  loading.value = true
+  const { data } = await getTags()
+  if (data) {
+    tags.value = data
+  }
+  loading.value = false
+}
+
+onMounted(loadTags)
+
+// Computed
+const tagsByCategory = computed(() => {
+  const grouped: Record<string, any[]> = {}
+  
+  for (const tag of tags.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) => {
+    if (a.name === 'Position') return -1
+    if (b.name === 'Position') return 1
+    return a.name.localeCompare(b.name)
+  })
+})
+
+const isFormValid = computed(() => {
+  return newTag.name.trim() && newTag.category && newTag.color
+})
+
+// Methods
+const handleCreate = async () => {
+  if (!isFormValid.value) return
+
+  creating.value = true
+
+  const { data, error } = await createTag({
+    name: newTag.name.trim(),
+    category: newTag.category,
+    icon: newTag.icon.trim() || null,
+    color: newTag.color
+  })
+
+  if (error) {
+    alert('Failed to create tag: ' + error.message)
+  } else {
+    // Reset form
+    newTag.name = ''
+    newTag.category = ''
+    newTag.icon = ''
+    newTag.color = '#3B82F6'
+
+    // Reload tags
+    await loadTags()
+  }
+
+  creating.value = false
+}
+
+const handleDelete = async (tagId: string, tagName: string) => {
+  if (!confirm(`Delete tag "${tagName}"? This will remove it from all items.`)) {
+    return
+  }
+
+  const { error } = await deleteTag(tagId)
+
+  if (error) {
+    alert('Failed to delete tag: ' + error.message)
+  } else {
+    await loadTags()
+  }
+}
+</script>
diff --git a/app/composables/useTags.ts b/app/composables/useTags.ts
index ed7bfa5..6de8b88 100644
--- a/app/composables/useTags.ts
+++ b/app/composables/useTags.ts
@@ -37,8 +37,50 @@ export const useTags = () => {
     return { data, error: null }
   }
 
+  /**
+   * Create a new tag
+   */
+  const createTag = async (tag: {
+    name: string
+    category: string
+    icon?: string | null
+    color: string
+  }) => {
+    const { data, error } = await supabase
+      .from('tags')
+      .insert(tag)
+      .select()
+      .single()
+
+    if (error) {
+      console.error('Error creating tag:', error)
+      return { data: null, error }
+    }
+
+    return { data, error: null }
+  }
+
+  /**
+   * Delete a tag
+   */
+  const deleteTag = async (tagId: string) => {
+    const { error } = await supabase
+      .from('tags')
+      .delete()
+      .eq('id', tagId)
+
+    if (error) {
+      console.error('Error deleting tag:', error)
+      return { error }
+    }
+
+    return { error: null }
+  }
+
   return {
     getTags,
-    getTagsByCategory
+    getTagsByCategory,
+    createTag,
+    deleteTag
   }
 }
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 0ed0dc3..e7ffe58 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -21,9 +21,23 @@
         >
           Add Manually
         </UButton>
+
+        <UButton
+          color="gray"
+          size="lg"
+          icon="i-heroicons-funnel"
+          @click="showFilters = !showFilters"
+        >
+          Filter
+        </UButton>
       </div>
     </div>
 
+    <!-- Tag Filters -->
+    <UCard v-if="showFilters" class="mb-6">
+      <TagsTagFilter v-model="selectedTagFilters" />
+    </UCard>
+
     <!-- Add Item Form (Overlay) -->
     <div v-if="showAddForm" class="fixed inset-0 z-50 flex items-start justify-center pt-20 px-4 bg-black/50">
       <div class="w-full max-w-lg">
@@ -46,6 +60,7 @@
     <InventoryList
       ref="inventoryListRef"
       :refresh="refreshKey"
+      :tag-filters="selectedTagFilters"
       @add-item="showAddForm = true"
       @edit-item="editingItem = $event"
     />
@@ -61,10 +76,12 @@ const route = useRoute()
 const router = useRouter()
 
 const showAddForm = ref(false)
+const showFilters = ref(false)
 const editingItem = ref<any>(null)
 const refreshKey = ref(0)
 const inventoryListRef = ref()
 const prefilledData = ref<any>(null)
+const selectedTagFilters = ref<string[]>([])
 
 // Handle scan-to-add flow (Issue #25)
 onMounted(() => {
diff --git a/app/pages/settings.vue b/app/pages/settings.vue
index a9f411a..054f95e 100644
--- a/app/pages/settings.vue
+++ b/app/pages/settings.vue
@@ -2,73 +2,65 @@
   <div>
     <h1 class="text-3xl font-bold text-gray-900 mb-6">Settings</h1>
     
-    <div class="grid gap-6 md:grid-cols-2">
-      <UCard>
-        <template #header>
-          <h3 class="text-lg font-semibold">Account</h3>
-        </template>
-        
-        <div class="space-y-4">
-          <div v-if="user">
-            <label class="text-sm font-medium text-gray-700">Email</label>
-            <p class="text-gray-900">{{ user.email }}</p>
+    <UTabs :items="tabs" v-model="activeTab">
+      <template #account>
+        <UCard class="mt-4">
+          <div class="space-y-4">
+            <h3 class="text-lg font-semibold">Account Settings</h3>
+            <p class="text-gray-600">Account management will be implemented in future updates.</p>
           </div>
-          
-          <UButton 
-            v-if="!user"
-            to="/auth/login"
-            color="primary"
-          >
-            Sign In
-          </UButton>
+        </UCard>
+      </template>
+
+      <template #tags>
+        <div class="mt-4">
+          <TagsTagManager />
         </div>
-      </UCard>
+      </template>
 
-      <UCard>
-        <template #header>
-          <h3 class="text-lg font-semibold">Tags</h3>
-        </template>
-        
-        <p class="text-gray-600">
-          Manage your custom tags here (coming in Week 2).
-        </p>
-      </UCard>
-
-      <UCard>
-        <template #header>
-          <h3 class="text-lg font-semibold">Units</h3>
-        </template>
-        
-        <p class="text-gray-600">
-          Manage your custom units here (coming in Week 2).
-        </p>
-      </UCard>
-
-      <UCard>
-        <template #header>
-          <h3 class="text-lg font-semibold">About</h3>
-        </template>
-        
-        <div class="space-y-2 text-sm text-gray-600">
-          <p><strong>Pantry</strong> v0.1.0-alpha</p>
-          <p>Self-hosted inventory management</p>
-          <a 
-            href="https://github.com/pantry-app/pantry" 
-            target="_blank"
-            class="text-primary hover:underline"
-          >
-            View on GitHub →
-          </a>
-        </div>
-      </UCard>
-    </div>
+      <template #about>
+        <UCard class="mt-4">
+          <div class="space-y-4">
+            <h3 class="text-lg font-semibold">About Pantry</h3>
+            <p class="text-gray-600">Version 0.1.0 (MVP)</p>
+            <p class="text-gray-600">Self-hosted pantry management app with barcode scanning.</p>
+            <UButton 
+              to="https://github.com/pantry-app/pantry"
+              target="_blank"
+              color="gray"
+              variant="soft"
+            >
+              View on GitHub
+            </UButton>
+          </div>
+        </UCard>
+      </template>
+    </UTabs>
   </div>
 </template>
 
 <script setup lang="ts">
-const { user } = useSupabaseAuth()
-
 definePageMeta({
   layout: 'default'
 })
+
+const activeTab = ref('tags')
+
+const tabs = [
+  {
+    key: 'tags',
+    label: 'Tags',
+    icon: 'i-heroicons-tag'
+  },
+  {
+    key: 'account',
+    label: 'Account',
+    icon: 'i-heroicons-user'
+  },
+  {
+    key: 'about',
+    label: 'About',
+    icon: 'i-heroicons-information-circle'
+  }
+]
 </script>