remove unused imports

src/components/directory/DirectoryCard.vue

@@ -13,7 +13,6 @@ import {
   UtensilsCrossed,
   Bed,
   ShoppingBag,
-  Wrench,
   Car,
   Ship,
   HelpCircle,

src/components/directory/DirectoryFilter.vue

@@ -4,6 +4,15 @@ import { useI18n } from 'vue-i18n'
 import { Search } from 'lucide-vue-next'
 import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
+import {
+  UtensilsCrossed,
+  Bed,
+  ShoppingBag,
+  Sparkles,
+  Car,
+  Ship,
+  HelpCircle,
+} from 'lucide-vue-next'
 
 const { t } = useI18n()
 
@@ -19,25 +28,45 @@ const emit = defineEmits<{
   'update:town': [value: string]
 }>()
 
+const categoryIcons = {
+  restaurant: UtensilsCrossed,
+  lodging: Bed,
+  goods: ShoppingBag,
+  services: Sparkles,
+  taxi: Car,
+  lancha: Ship,
+  other: HelpCircle,
+} as const
+
+const categoryColors = {
+  restaurant: 'text-orange-500',
+  lodging: 'text-purple-500',
+  goods: 'text-green-500',
+  services: 'text-pink-500',
+  taxi: 'text-yellow-500',
+  lancha: 'text-blue-500',
+  other: 'text-gray-500',
+} as const
+
 const categories = computed(() => [
   { id: 'all', label: t('directory.categories.all') },
-  { id: 'restaurant', label: t('directory.categories.restaurant') },
-  { id: 'lodging', label: t('directory.categories.lodging') },
-  { id: 'goods', label: t('directory.categories.goods') },
-  { id: 'services', label: t('directory.categories.services') },
-  { id: 'taxi', label: t('directory.categories.taxi') },
-  { id: 'lancha', label: t('directory.categories.lancha') },
-  { id: 'other', label: t('directory.categories.other') }
+  { id: 'restaurant', label: t('directory.categories.restaurant'), icon: categoryIcons.restaurant },
+  { 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: 'other', label: t('directory.categories.other'), icon: categoryIcons.other },
 ])
 
 const towns = computed(() => [
   { id: 'all', label: t('directory.towns.all') },
   { id: 'San Marcos', label: 'San Marcos' },
-  { id: 'Tzununa', label: 'Tzununa' },
-  { id: 'San Pablo', label: 'San Pablo' },
   { id: 'San Pedro', label: 'San Pedro' },
+  { id: 'Tzununa', label: 'Tzununa' },
+  { id: 'Jaibalito', label: 'Jaibalito' },
+  { id: 'San Pablo', label: 'San Pablo' },
   { id: 'Panajachel', label: 'Panajachel' },
-  { id: 'Jaibalito', label: 'Jaibalito' }
 ])
 </script>
 
@@ -56,15 +85,33 @@ const towns = computed(() => [
       <!-- Category Filter -->
       <div class="flex gap-2 overflow-x-auto pb-2 md:pb-0">
         <Button v-for="cat in categories" :key="cat.id" @click="emit('update:category', cat.id)"
-          :variant="category === cat.id ? 'default' : 'secondary'" size="sm" class="rounded-full">
+          :variant="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="[
+                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="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 -->
+          <template v-else>
             {{ cat.label }}
+          </template>
         </Button>
       </div>
 
       <!-- Town Filter -->
       <div class="flex gap-2 overflow-x-auto pb-2 md:pb-0">
         <Button v-for="to in towns" :key="to.id" @click="emit('update:town', to.id)"
-          :variant="town === to.id ? 'default' : 'secondary'" size="sm" class="rounded-full">
+          :variant="town === to.id ? 'default' : 'secondary'" size="sm" class="rounded-full whitespace-nowrap">
           {{ to.label }}
         </Button>
       </div>

src/components/directory/DirectoryItemDetail.vue

@@ -14,7 +14,6 @@ import {
   UtensilsCrossed,
   Bed,
   ShoppingBag,
-  Wrench,
   Car,
   Ship,
   HelpCircle,
@@ -85,12 +84,8 @@ const socialColors = {
     <CardHeader>
       <div class="space-y-2">
         <div class="flex items-center gap-4">
-          <component 
-            :is="categoryIcons[item.category]" 
-            class="h-8 w-8"
-            :class="categoryColors[item.category]"
-            :title="t(`directory.categories.${item.category}`)"
-          />
+          <component :is="categoryIcons[item.category]" class="h-8 w-8" :class="categoryColors[item.category]"
+            :title="t(`directory.categories.${item.category}`)" />
           <CardTitle class="text-3xl">{{ item.name }}</CardTitle>
         </div>
       </div>
@@ -122,14 +117,14 @@ const socialColors = {
             <div class="space-y-2">
               <div>{{ item.contact }}</div>
               <div v-if="item.contactType" class="flex gap-2">
-                <a v-if="item.contactType.includes('whatsapp')" :href="`https://wa.me/${item.contact.replace(/\D/g, '')}`"
-                  target="_blank" rel="noopener noreferrer"
+                <a v-if="item.contactType.includes('whatsapp')"
+                  :href="`https://wa.me/${item.contact.replace(/\D/g, '')}`" target="_blank" rel="noopener noreferrer"
                   class="inline-flex items-center gap-1.5 rounded-full bg-green-100 px-3 py-1 text-sm font-medium text-green-800 hover:bg-green-200 transition-colors">
                   <MessageCircle class="h-4 w-4" />
                   WhatsApp
                 </a>
-                <a v-if="item.contactType.includes('telegram')" :href="`https://t.me/${item.contact.replace(/\D/g, '')}`"
-                  target="_blank" rel="noopener noreferrer"
+                <a v-if="item.contactType.includes('telegram')"
+                  :href="`https://t.me/${item.contact.replace(/\D/g, '')}`" target="_blank" rel="noopener noreferrer"
                   class="inline-flex items-center gap-1.5 rounded-full bg-blue-100 px-3 py-1 text-sm font-medium text-blue-800 hover:bg-blue-200 transition-colors">
                   <MessageCircle class="h-4 w-4" />
                   Telegram

src/pages/Directory.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import DirectoryGrid from '@/components/directory/DirectoryGrid.vue'
-import { type DirectoryItem } from '@/types/directory'
 import { mockDirectoryItems } from '@/data/directory'
 
 const { t } = useI18n()

src/pages/DirectoryItem.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue'
-import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { Share2, Copy, Check } from 'lucide-vue-next'
 import { Button } from '@/components/ui/button'
@@ -9,7 +8,6 @@ import { type DirectoryItem } from '@/types/directory'
 import { mockDirectoryItems } from '@/data/directory'
 
 const { t } = useI18n()
-const router = useRouter()
 
 const props = defineProps<{
   id: string