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

@@ -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

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>

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>