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