add tuktuk category (taxis will be for driving to the airport, etc)

src/components/directory/DirectoryCard.vue

@@ -18,6 +18,7 @@ import {
   HelpCircle,
   Sparkles,
 } from 'lucide-vue-next'
+import TukTuk from '@/components/icons/TukTuk.vue'
 import {
   Card,
   CardContent,
@@ -36,6 +37,7 @@ const categoryIcons = {
   goods: ShoppingBag,
   services: Sparkles,
   taxi: Car,
+  tuktuk: TukTuk,
   lancha: Ship,
   other: HelpCircle,
 } as const
@@ -46,6 +48,7 @@ const categoryColors = {
   goods: 'text-green-500',
   services: 'text-pink-500',
   taxi: 'text-yellow-500',
+  tuktuk: 'text-amber-500',
   lancha: 'text-blue-500',
   other: 'text-gray-500',
 } as const

src/components/directory/DirectoryFilter.vue

@@ -13,6 +13,7 @@ import {
   Ship,
   HelpCircle,
 } from 'lucide-vue-next'
+import TukTuk from '@/components/icons/TukTuk.vue'
 
 const { t } = useI18n()
 
@@ -41,6 +42,7 @@ watch(() => props.search, (newValue) => {
 }, { immediate: true })
 
 const categoryIcons = {
+  tuktuk: TukTuk,
   restaurant: UtensilsCrossed,
   lodging: Bed,
   goods: ShoppingBag,
@@ -51,23 +53,25 @@ const categoryIcons = {
 } as const
 
 const categoryColors = {
+  tuktuk: 'text-amber-500',
   restaurant: 'text-orange-500',
   lodging: 'text-purple-500',
   goods: 'text-green-500',
   services: 'text-pink-500',
-  taxi: 'text-yellow-500',
   lancha: 'text-blue-500',
+  taxi: 'text-yellow-500',
   other: 'text-gray-500',
 } as const
 
 const categories = computed(() => [
   { id: 'all', label: t('directory.categories.all') },
   { id: 'restaurant', label: t('directory.categories.restaurant'), icon: categoryIcons.restaurant },
+  { id: 'tuktuk', label: t('directory.categories.tuktuk'), icon: categoryIcons.tuktuk },
   { id: 'lodging', label: t('directory.categories.lodging'), icon: categoryIcons.lodging },
   { id: 'goods', label: t('directory.categories.goods'), icon: categoryIcons.goods },
   { id: 'services', label: t('directory.categories.services'), icon: categoryIcons.services },
-  { id: 'taxi', label: t('directory.categories.taxi'), icon: categoryIcons.taxi },
   { id: 'lancha', label: t('directory.categories.lancha'), icon: categoryIcons.lancha },
+  { id: 'taxi', label: t('directory.categories.taxi'), icon: categoryIcons.taxi },
   { id: 'other', label: t('directory.categories.other'), icon: categoryIcons.other },
 ])
 
@@ -89,34 +93,24 @@ const towns = computed(() => [
       <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
         <Search class="h-5 w-5 text-muted-foreground" />
       </div>
-      <Input 
-        v-model="searchValue"
-        type="text"
-        class="pl-10 w-full"
-        :placeholder="t('directory.search')"
-        inputmode="text"
-        enterkeyhint="search"
-      />
+      <Input v-model="searchValue" type="text" class="pl-10 w-full" :placeholder="t('directory.search')"
+        inputmode="text" enterkeyhint="search" />
     </div>
 
     <div class="flex flex-col md:flex-row gap-1 sm:gap-2">
       <!-- Category Filter -->
       <div class="flex gap-1 sm:gap-2 overflow-x-auto pb-1 sm:pb-2 md:pb-0">
         <Button v-for="cat in categories" :key="cat.id" @click="emit('update:category', cat.id)"
-          :variant="props.category === cat.id ? 'default' : 'secondary'" size="sm" class="rounded-full whitespace-nowrap">
+          :variant="props.category === cat.id ? 'default' : 'secondary'" size="sm"
+          class="rounded-full whitespace-nowrap">
           <!-- Show only icon on mobile for non-'all' categories -->
           <template v-if="cat.id !== 'all'">
-            <component :is="cat.icon" 
-              class="h-4 w-4 md:mr-2"
-              :class="[
-                props.category === cat.id ? '' : categoryColors[cat.id as keyof typeof categoryColors],
-                'md:hidden'
-              ]"
-            />
-            <component :is="cat.icon" 
-              class="h-4 w-4 mr-2 hidden md:inline-block"
-              :class="props.category === cat.id ? '' : categoryColors[cat.id as keyof typeof categoryColors]"
-            />
+            <component :is="cat.icon" class="h-4 w-4 md:mr-2" :class="[
+              props.category === cat.id ? '' : categoryColors[cat.id as keyof typeof categoryColors],
+              'md:hidden'
+            ]" />
+            <component :is="cat.icon" class="h-4 w-4 mr-2 hidden md:inline-block"
+              :class="props.category === cat.id ? '' : categoryColors[cat.id as keyof typeof categoryColors]" />
             <span class="hidden md:inline">{{ cat.label }}</span>
           </template>
           <!-- Always show text for 'all' category -->

src/components/directory/DirectoryItemDetail.vue

@@ -19,6 +19,7 @@ import {
   HelpCircle,
   Sparkles,
 } from 'lucide-vue-next'
+import TukTuk from '@/components/icons/TukTuk.vue'
 import {
   Card,
   CardContent,
@@ -46,6 +47,7 @@ const categoryIcons = {
   goods: ShoppingBag,
   services: Sparkles,
   taxi: Car,
+  tuktuk: TukTuk,
   lancha: Ship,
   other: HelpCircle,
 } as const
@@ -56,6 +58,7 @@ const categoryColors = {
   goods: 'text-green-500',
   services: 'text-pink-500',
   taxi: 'text-yellow-500',
+  tuktuk: 'text-amber-500',
   lancha: 'text-blue-500',
   other: 'text-gray-500',
 } as const