Add CategoryInput component for category management in CreateProductDialog

- Introduced a new CategoryInput component to facilitate category selection with suggestions and popular categories.
- Updated CreateProductDialog to integrate the CategoryInput, enhancing the user experience for adding product categories.
- Improved accessibility and usability by allowing users to add categories via keyboard shortcuts and providing visual feedback for selected categories.

These changes enhance the product creation process by streamlining category management.

src/modules/market/components/CreateProductDialog.vue

@@ -104,14 +104,19 @@
         </div>
 
         <!-- Categories -->
-        <FormField name="categories">
+        <FormField v-slot="{ componentField }" name="categories">
           <FormItem>
             <FormLabel>Categories</FormLabel>
             <FormDescription>Add categories to help customers find your product</FormDescription>
-            <div class="text-center py-8 border-2 border-dashed rounded-lg">
-              <Package class="w-8 h-8 mx-auto mb-2 text-muted-foreground" />
-              <p class="text-sm text-muted-foreground">Category management coming soon</p>
-            </div>
+            <FormControl>
+              <CategoryInput
+                v-bind="componentField"
+                :disabled="isCreating"
+                placeholder="Enter category (e.g., electronics, clothing, books...)"
+                :max-categories="10"
+                :show-popular-categories="true"
+              />
+            </FormControl>
             <FormMessage />
           </FormItem>
         </FormField>
@@ -202,6 +207,7 @@ import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Textarea } from '@/components/ui/textarea'
 import { Checkbox } from '@/components/ui/checkbox'
+import CategoryInput from './CategoryInput.vue'
 import {
   FormControl,
   FormDescription,