From 02e699aad51aecf0ff13497188a0fe2bd16d7f67 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Tue, 11 Feb 2025 01:41:12 +0100
Subject: [PATCH] add quick town selection and category selection from
 homescreen with localstorage!

---
 dev-dist/sw.js                                |   2 +-
 src/assets/index.css                          |  16 ++
 src/components/directory/DirectoryFilter.vue  |  27 ++-
 src/components/directory/DirectoryGrid.vue    |   6 -
 src/components/theme-provider/index.ts        |  10 +-
 src/components/ui/select/Select.vue           |  15 ++
 src/components/ui/select/SelectContent.vue    |  56 +++++
 src/components/ui/select/SelectGroup.vue      |  19 ++
 src/components/ui/select/SelectItem.vue       |  46 ++++
 src/components/ui/select/SelectItemText.vue   |  11 +
 src/components/ui/select/SelectLabel.vue      |  13 ++
 .../ui/select/SelectScrollDownButton.vue      |  24 ++
 .../ui/select/SelectScrollUpButton.vue        |  24 ++
 src/components/ui/select/SelectSeparator.vue  |  17 ++
 src/components/ui/select/SelectTrigger.vue    |  31 +++
 src/components/ui/select/SelectValue.vue      |  11 +
 src/components/ui/select/index.ts             |  11 +
 src/data/directory.ts                         | 206 +++++++++---------
 src/i18n/locales/en.ts                        |   7 +-
 src/i18n/locales/es.ts                        |  19 +-
 src/locales/en.json                           |   8 +
 src/locales/es.json                           |   8 +
 src/pages/Directory.vue                       |  61 +++++-
 src/pages/Home.vue                            | 108 ++++++++-
 24 files changed, 619 insertions(+), 137 deletions(-)
 create mode 100644 src/components/ui/select/Select.vue
 create mode 100644 src/components/ui/select/SelectContent.vue
 create mode 100644 src/components/ui/select/SelectGroup.vue
 create mode 100644 src/components/ui/select/SelectItem.vue
 create mode 100644 src/components/ui/select/SelectItemText.vue
 create mode 100644 src/components/ui/select/SelectLabel.vue
 create mode 100644 src/components/ui/select/SelectScrollDownButton.vue
 create mode 100644 src/components/ui/select/SelectScrollUpButton.vue
 create mode 100644 src/components/ui/select/SelectSeparator.vue
 create mode 100644 src/components/ui/select/SelectTrigger.vue
 create mode 100644 src/components/ui/select/SelectValue.vue
 create mode 100644 src/components/ui/select/index.ts

diff --git a/dev-dist/sw.js b/dev-dist/sw.js
index 2841431..7961c04 100644
--- a/dev-dist/sw.js
+++ b/dev-dist/sw.js
@@ -79,7 +79,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
    */
   workbox.precacheAndRoute([{
     "url": "index.html",
-    "revision": "0.st6kb6leuvo"
+    "revision": "0.6qk4tc3oa08"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
diff --git a/src/assets/index.css b/src/assets/index.css
index b40cff0..5abffd2 100644
--- a/src/assets/index.css
+++ b/src/assets/index.css
@@ -24,6 +24,11 @@
     --color-input: #bcc0cc;
     --color-ring: #1e66f5;
     --radius: 0.5rem;
+    --popover: 220 23% 95%;
+    --popover-foreground: 234 16% 35%;
+    /* Fallback colors for older browsers */
+    --fallback-background: #ffffff;
+    --fallback-popover: #f5f5f5;
   }
 
   .dark {
@@ -47,6 +52,11 @@
     --color-border: #363a4f;
     --color-input: #363a4f;
     --color-ring: #8aadf4;
+    --popover: 240 21% 15%;
+    --popover-foreground: 226 64% 88%;
+    /* Fallback colors for older browsers */
+    --fallback-background: #1e1e2e;
+    --fallback-popover: #313244;
   }
 
   * {
@@ -147,3 +157,9 @@
   /*   --color-input: hsl(24 10% 51%); /* fg4 */ */
   /*   --color-ring: hsl(6 93% 59%); /* red */ */
   /* } */
+
+@supports not (backdrop-filter: blur(1px)) {
+  .select-content {
+    background-color: var(--fallback-background) !important;
+  }
+}
diff --git a/src/components/directory/DirectoryFilter.vue b/src/components/directory/DirectoryFilter.vue
index d05176c..8b05803 100644
--- a/src/components/directory/DirectoryFilter.vue
+++ b/src/components/directory/DirectoryFilter.vue
@@ -87,9 +87,9 @@ const towns = computed(() => [
 </script>
 
 <template>
-  <div class="w-full flex flex-col md:flex-row gap-2 sm:gap-4">
+  <div class="w-full space-y-4">
     <!-- Search Input -->
-    <div class="relative flex-1">
+    <div class="relative w-full max-w-2xl mx-auto">
       <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>
@@ -97,9 +97,20 @@ const towns = computed(() => [
         inputmode="text" enterkeyhint="search" />
     </div>
 
-    <div class="flex flex-col md:flex-row gap-1 sm:gap-2">
+    <div class="flex flex-col gap-4">
+      <!-- Town Filter -->
+      <div class="flex justify-start md:justify-center gap-2 overflow-x-auto pb-2 px-2 md:px-0
+        [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
+        <Button v-for="to in towns" :key="to.id" @click="emit('update:town', to.id)"
+          :variant="props.town === to.id ? 'default' : 'secondary'" size="sm" 
+          class="rounded-full whitespace-nowrap">
+          {{ to.label }}
+        </Button>
+      </div>
+
       <!-- Category Filter -->
-      <div class="flex gap-1 sm:gap-2 overflow-x-auto pb-1 sm:pb-2 md:pb-0">
+      <div class="flex justify-start md:justify-center gap-2 overflow-x-auto pb-2 px-2 md:px-0
+        [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
         <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">
@@ -119,14 +130,6 @@ const towns = computed(() => [
           </template>
         </Button>
       </div>
-
-      <!-- Town Filter -->
-      <div class="flex gap-1 sm:gap-2 overflow-x-auto pb-1 sm:pb-2 md:pb-0">
-        <Button v-for="to in towns" :key="to.id" @click="emit('update:town', to.id)"
-          :variant="props.town === to.id ? 'default' : 'secondary'" size="sm" class="rounded-full whitespace-nowrap">
-          {{ to.label }}
-        </Button>
-      </div>
     </div>
   </div>
 </template>
diff --git a/src/components/directory/DirectoryGrid.vue b/src/components/directory/DirectoryGrid.vue
index 31d37ae..c7ec44d 100644
--- a/src/components/directory/DirectoryGrid.vue
+++ b/src/components/directory/DirectoryGrid.vue
@@ -3,7 +3,6 @@ import { ref, computed } from 'vue'
 import Fuse from 'fuse.js'
 import DirectoryCard from './DirectoryCard.vue'
 import { type DirectoryItem } from '@/types/directory'
-import DirectoryFilter from './DirectoryFilter.vue'
 
 const selectedCategory = ref<string>('all')
 const selectedTown = ref<string>('all')
@@ -54,11 +53,6 @@ const filteredItems = computed(() => {
 
 <template>
   <div>
-    <!-- Filters -->
-    <div class="space-y-2 md:space-y-0 md:flex md:items-center md:justify-between">
-      <DirectoryFilter v-model:category="selectedCategory" v-model:search="searchQuery" v-model:town="selectedTown" />
-    </div>
-
     <!-- Grid -->
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
       <DirectoryCard v-for="item in filteredItems" :key="item.id" :item="item" />
diff --git a/src/components/theme-provider/index.ts b/src/components/theme-provider/index.ts
index d1d53ea..b557ace 100644
--- a/src/components/theme-provider/index.ts
+++ b/src/components/theme-provider/index.ts
@@ -5,6 +5,7 @@ type Theme = 'dark' | 'light' | 'system'
 const useTheme = () => {
   const theme = ref<Theme>('dark')
   const systemTheme = ref<'dark' | 'light'>('light')
+  const currentTown = ref(localStorage.getItem('current-town') || 'all')
 
   const updateSystemTheme = () => {
     systemTheme.value = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
@@ -42,11 +43,18 @@ const useTheme = () => {
     localStorage.setItem('ui-theme', newTheme)
   }
 
+  const setCurrentTown = (town: string) => {
+    currentTown.value = town
+    localStorage.setItem('current-town', town)
+  }
+
   return {
     theme,
     setTheme,
     systemTheme,
-    currentTheme
+    currentTheme,
+    currentTown,
+    setCurrentTown
   }
 }
 
diff --git a/src/components/ui/select/Select.vue b/src/components/ui/select/Select.vue
new file mode 100644
index 0000000..adc42fd
--- /dev/null
+++ b/src/components/ui/select/Select.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { SelectRootEmits, SelectRootProps } from 'radix-vue'
+import { SelectRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<SelectRootProps>()
+const emits = defineEmits<SelectRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <SelectRoot v-bind="forwarded">
+    <slot />
+  </SelectRoot>
+</template>
diff --git a/src/components/ui/select/SelectContent.vue b/src/components/ui/select/SelectContent.vue
new file mode 100644
index 0000000..f355265
--- /dev/null
+++ b/src/components/ui/select/SelectContent.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+  SelectContent,
+  type SelectContentEmits,
+  type SelectContentProps,
+  SelectPortal,
+  SelectViewport,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { SelectScrollDownButton, SelectScrollUpButton } from '.'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    position: 'popper',
+  },
+)
+const emits = defineEmits<SelectContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SelectPortal>
+    <SelectContent
+      v-bind="{ ...forwarded, ...$attrs }" :class="cn(
+        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'bg-background dark:bg-background',
+        'backdrop-blur-sm backdrop-saturate-150 bg-opacity-90 dark:bg-opacity-90',
+        '[&>div]:bg-background [&>div]:dark:bg-background',
+        position === 'popper'
+          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        props.class,
+      )
+      "
+    >
+      <SelectScrollUpButton />
+      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')">
+        <slot />
+      </SelectViewport>
+      <SelectScrollDownButton />
+    </SelectContent>
+  </SelectPortal>
+</template>
diff --git a/src/components/ui/select/SelectGroup.vue b/src/components/ui/select/SelectGroup.vue
new file mode 100644
index 0000000..b0803e1
--- /dev/null
+++ b/src/components/ui/select/SelectGroup.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { SelectGroup, type SelectGroupProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <SelectGroup :class="cn('p-1 w-full', props.class)" v-bind="delegatedProps">
+    <slot />
+  </SelectGroup>
+</template>
diff --git a/src/components/ui/select/SelectItem.vue b/src/components/ui/select/SelectItem.vue
new file mode 100644
index 0000000..80eb302
--- /dev/null
+++ b/src/components/ui/select/SelectItem.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { Check } from 'lucide-vue-next'
+import {
+  SelectItem,
+  SelectItemIndicator,
+  type SelectItemProps,
+  SelectItemText,
+  useForwardProps,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectItem
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'hover:bg-accent/50',
+        'active:bg-accent/70',
+        props.class,
+      )
+    "
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectItemIndicator>
+        <Check class="h-4 w-4" />
+      </SelectItemIndicator>
+    </span>
+
+    <SelectItemText>
+      <slot />
+    </SelectItemText>
+  </SelectItem>
+</template>
diff --git a/src/components/ui/select/SelectItemText.vue b/src/components/ui/select/SelectItemText.vue
new file mode 100644
index 0000000..a0bb5c2
--- /dev/null
+++ b/src/components/ui/select/SelectItemText.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { SelectItemText, type SelectItemTextProps } from 'radix-vue'
+
+const props = defineProps<SelectItemTextProps>()
+</script>
+
+<template>
+  <SelectItemText v-bind="props">
+    <slot />
+  </SelectItemText>
+</template>
diff --git a/src/components/ui/select/SelectLabel.vue b/src/components/ui/select/SelectLabel.vue
new file mode 100644
index 0000000..503e890
--- /dev/null
+++ b/src/components/ui/select/SelectLabel.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { SelectLabel, type SelectLabelProps } from 'radix-vue'
+
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <SelectLabel :class="cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)">
+    <slot />
+  </SelectLabel>
+</template>
diff --git a/src/components/ui/select/SelectScrollDownButton.vue b/src/components/ui/select/SelectScrollDownButton.vue
new file mode 100644
index 0000000..8854334
--- /dev/null
+++ b/src/components/ui/select/SelectScrollDownButton.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { ChevronDown } from 'lucide-vue-next'
+import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollDownButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <ChevronDown class="h-4 w-4" />
+    </slot>
+  </SelectScrollDownButton>
+</template>
diff --git a/src/components/ui/select/SelectScrollUpButton.vue b/src/components/ui/select/SelectScrollUpButton.vue
new file mode 100644
index 0000000..6c3711f
--- /dev/null
+++ b/src/components/ui/select/SelectScrollUpButton.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { ChevronUp } from 'lucide-vue-next'
+import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollUpButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <ChevronUp class="h-4 w-4" />
+    </slot>
+  </SelectScrollUpButton>
+</template>
diff --git a/src/components/ui/select/SelectSeparator.vue b/src/components/ui/select/SelectSeparator.vue
new file mode 100644
index 0000000..cb06b8d
--- /dev/null
+++ b/src/components/ui/select/SelectSeparator.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <SelectSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+</template>
diff --git a/src/components/ui/select/SelectTrigger.vue b/src/components/ui/select/SelectTrigger.vue
new file mode 100644
index 0000000..6b35be4
--- /dev/null
+++ b/src/components/ui/select/SelectTrigger.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { ChevronDown } from 'lucide-vue-next'
+import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',
+      props.class,
+    )"
+  >
+    <slot />
+    <SelectIcon as-child>
+      <ChevronDown class="w-4 h-4 opacity-50 shrink-0" />
+    </SelectIcon>
+  </SelectTrigger>
+</template>
diff --git a/src/components/ui/select/SelectValue.vue b/src/components/ui/select/SelectValue.vue
new file mode 100644
index 0000000..4bc37dd
--- /dev/null
+++ b/src/components/ui/select/SelectValue.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { SelectValue, type SelectValueProps } from 'radix-vue'
+
+const props = defineProps<SelectValueProps>()
+</script>
+
+<template>
+  <SelectValue v-bind="props">
+    <slot />
+  </SelectValue>
+</template>
diff --git a/src/components/ui/select/index.ts b/src/components/ui/select/index.ts
new file mode 100644
index 0000000..31b9294
--- /dev/null
+++ b/src/components/ui/select/index.ts
@@ -0,0 +1,11 @@
+export { default as Select } from './Select.vue'
+export { default as SelectContent } from './SelectContent.vue'
+export { default as SelectGroup } from './SelectGroup.vue'
+export { default as SelectItem } from './SelectItem.vue'
+export { default as SelectItemText } from './SelectItemText.vue'
+export { default as SelectLabel } from './SelectLabel.vue'
+export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
+export { default as SelectSeparator } from './SelectSeparator.vue'
+export { default as SelectTrigger } from './SelectTrigger.vue'
+export { default as SelectValue } from './SelectValue.vue'
diff --git a/src/data/directory.ts b/src/data/directory.ts
index 9f08db1..89e220e 100644
--- a/src/data/directory.ts
+++ b/src/data/directory.ts
@@ -24,78 +24,92 @@ export const mockDirectoryItems: DirectoryItem[] = [
   },
   {
     id: '3',
-    name: 'Bitcoin Lake Lancha (fake)',
-    category: 'lancha',
-    address: 'Pier 21, Harbor Front',
-    contact: '+1 234-567-8902'
-  },
-  {
-    id: '4',
-    name: 'Tor\'s Drums',
-    category: 'goods',
-    town: 'San Marcos',
-    contact: '+502 4900 1279',
-    contactType: ['whatsapp'],
+    name: 'Atitlan Muay Thai',
+    category: 'services',
+    town: 'San Pedro',
     social: {
-      facebook: 'https://www.facebook.com/share/1DcBdJhuFH/'
-    },
-    lightning: 'tor@atitlan.io'
-  },
-  {
-    id: '5',
-    name: 'Jade Maya',
-    category: 'goods',
-    local: true,
-    town: 'San Marcos',
-    mapsUrl: 'https://maps.app.goo.gl/kZiKdM2FFAw1TQMN8',
-    lightning: 'osman@atitlan.io',
-  },
-  {
-    id: '6',
-    name: 'La Sala del Lago',
-    category: 'restaurant',
-    town: 'San Marcos',
-    social: {
-      facebook: 'https://www.facebook.com/La-Sala-Del-Lago-100220539146301'
+      facebook: 'https://www.facebook.com/muaythaiatitlan'
     }
   },
   {
-    id: '7',
-    name: 'Nectar',
-    category: 'restaurant',
-    town: 'San Marcos',
+    id: '4',
+    name: 'Zoe Nails & Spa',
+    category: 'services',
+    town: 'Panajachel',
     social: {
-      facebook: 'https://www.facebook.com/lovenectar'
+      facebook: 'https://www.facebook.com/zoenailsyspapanajachel'
+    },
+    local: true
+  },
+  {
+    id: '5',
+    name: 'Full Print',
+    category: 'services',
+    town: 'San Pedro',
+    social: {
+      facebook: 'https://www.facebook.com/profile.php?id=100057645572968'
+    },
+    local: true
+  },
+  {
+    id: '6',
+    name: 'Multiservicios Yaxon',
+    category: 'services',
+    town: 'Tzununa',
+    social: {
+      facebook: 'https://www.facebook.com/Multiservicios-Yaxón-299907600397260'
+    },
+    local: true
+  },
+  {
+    id: '7',
+    name: 'Utz Kab',
+    category: 'goods',
+    town: 'San Pablo',
+    social: {
+      facebook: 'https://www.facebook.com/UTZ-KAB-534232490075686'
     },
     local: true
   },
   {
     id: '8',
-    name: 'Arati Cafe',
-    category: 'restaurant',
-    town: 'San Marcos',
+    name: 'Utz Color Fashion',
+    category: 'goods',
+    town: 'San Pedro',
     social: {
-      facebook: 'https://www.facebook.com/Arati-Cafe-105767784719695'
+      facebook: 'https://www.facebook.com/UtzColorFashion'
     },
     local: true
   },
   {
     id: '9',
-    name: 'Fe Restaurant',
-    category: 'restaurant',
-    town: 'San Marcos',
+    name: 'Do Bau',
+    category: 'goods',
+    town: 'San Pedro',
     social: {
-      facebook: 'https://www.facebook.com/fesanmarcos'
-    }
+      facebook: 'https://www.facebook.com/Adrianamatrioshka'
+    },
+    local: true
   },
   {
     id: '10',
-    name: 'Hostal del Lago',
-    category: 'lodging',
-    town: 'San Marcos',
+    name: 'Caffé Kitsch',
+    category: 'restaurant',
+    town: 'Panajachel',
     social: {
-      facebook: 'https://www.facebook.com/Hostel-Del-Lago-605530306467708'
-    }
+      facebook: 'https://www.facebook.com/Kitschers'
+    },
+    local: true
+  },
+  {
+    id: '11',
+    name: 'Hotel Corazon del Mundo Fresh',
+    category: 'lodging',
+    town: 'Jaibalito',
+    social: {
+      facebook: 'https://www.facebook.com/corazondelmundofresh'
+    },
+    local: true
   },
   {
     id: '12',
@@ -207,91 +221,77 @@ export const mockDirectoryItems: DirectoryItem[] = [
   },
   {
     id: '25',
-    name: 'Multiservicios Yaxon',
-    category: 'services',
-    town: 'Tzununa',
-    social: {
-      facebook: 'https://www.facebook.com/Multiservicios-Yaxón-299907600397260'
-    },
-    local: true
+    name: 'Bitcoin Lake Lancha (fake)',
+    category: 'lancha',
+    address: 'Pier 21, Harbor Front',
+    contact: '+1 234-567-8902'
   },
   {
     id: '26',
-    name: 'Utz Kab',
+    name: 'Tor\'s Drums',
     category: 'goods',
-    town: 'San Pablo',
+    town: 'San Marcos',
+    contact: '+502 4900 1279',
+    contactType: ['whatsapp'],
     social: {
-      facebook: 'https://www.facebook.com/UTZ-KAB-534232490075686'
+      facebook: 'https://www.facebook.com/share/1DcBdJhuFH/'
     },
-    local: true
+    lightning: 'tor@atitlan.io'
   },
   {
     id: '27',
-    name: 'Utz Color Fashion',
+    name: 'Jade Maya',
     category: 'goods',
-    town: 'San Pedro',
-    social: {
-      facebook: 'https://www.facebook.com/UtzColorFashion'
-    },
-    local: true
+    local: true,
+    town: 'San Marcos',
+    mapsUrl: 'https://maps.app.goo.gl/kZiKdM2FFAw1TQMN8',
+    lightning: 'osman@atitlan.io',
   },
   {
     id: '28',
-    name: 'Do Bau',
-    category: 'goods',
-    town: 'San Pedro',
+    name: 'La Sala del Lago',
+    category: 'restaurant',
+    town: 'San Marcos',
     social: {
-      facebook: 'https://www.facebook.com/Adrianamatrioshka'
-    },
-    local: true
+      facebook: 'https://www.facebook.com/La-Sala-Del-Lago-100220539146301'
+    }
   },
   {
     id: '29',
-    name: 'Full Print',
-    category: 'services',
-    town: 'San Pedro',
+    name: 'Nectar',
+    category: 'restaurant',
+    town: 'San Marcos',
     social: {
-      facebook: 'https://www.facebook.com/profile.php?id=100057645572968'
+      facebook: 'https://www.facebook.com/lovenectar'
     },
     local: true
   },
   {
     id: '30',
-    name: 'Atitlan Muay Thai',
-    category: 'services',
-    town: 'San Pedro',
+    name: 'Arati Cafe',
+    category: 'restaurant',
+    town: 'San Marcos',
     social: {
-      facebook: 'https://www.facebook.com/muaythaiatitlan'
-    }
+      facebook: 'https://www.facebook.com/Arati-Cafe-105767784719695'
+    },
+    local: true
   },
   {
     id: '31',
-    name: 'Caffé Kitsch',
+    name: 'Fe Restaurant',
     category: 'restaurant',
-    town: 'Panajachel',
+    town: 'San Marcos',
     social: {
-      facebook: 'https://www.facebook.com/Kitschers'
-    },
-    local: true
+      facebook: 'https://www.facebook.com/fesanmarcos'
+    }
   },
   {
     id: '32',
-    name: 'Zoe Nails & Spa',
-    category: 'services',
-    town: 'Panajachel',
-    social: {
-      facebook: 'https://www.facebook.com/zoenailsyspapanajachel'
-    },
-    local: true
-  },
-  {
-    id: '33',
-    name: 'Hotel Corazon del Mundo Fresh',
+    name: 'Hostal del Lago',
     category: 'lodging',
-    town: 'Jaibalito',
+    town: 'San Marcos',
     social: {
-      facebook: 'https://www.facebook.com/corazondelmundofresh'
-    },
-    local: true
+      facebook: 'https://www.facebook.com/Hostel-Del-Lago-605530306467708'
+    }
   }
 ]
diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
index 30cfc68..a1b2f45 100644
--- a/src/i18n/locales/en.ts
+++ b/src/i18n/locales/en.ts
@@ -9,7 +9,9 @@ export default {
     title: 'Find Bitcoin Lightning Acceptors',
     subtitle: 'Discover local businesses, services, and venues that accept Bitcoin Lightning payments.',
     browse: 'Browse Directory',
-    learnMore: 'Learn More'
+    learnMore: 'Learn More',
+    selectTown: 'Location',
+    selectTownPlaceholder: 'Select your location...'
   },
   directory: {
     title: 'Lightning Payment Directory',
@@ -23,7 +25,8 @@ export default {
       services: 'Services',
       taxi: 'Taxis',
       lancha: 'Lanchas',
-      other: 'Other'
+      other: 'Other',
+      tuktuk: 'Tuk-tuk'
     },
     towns: {
       all: 'All',
diff --git a/src/i18n/locales/es.ts b/src/i18n/locales/es.ts
index c5f5772..a352c81 100644
--- a/src/i18n/locales/es.ts
+++ b/src/i18n/locales/es.ts
@@ -9,21 +9,24 @@ export default {
     title: 'Encuentra Aceptadores de Bitcoin Lightning',
     subtitle: 'Descubre negocios locales, servicios y lugares que aceptan pagos Bitcoin Lightning.',
     browse: 'Explorar Directorio',
-    learnMore: 'Aprende Más'
+    learnMore: 'Más Información',
+    selectTown: 'Ubicación',
+    selectTownPlaceholder: 'Selecciona tu ubicación...'
   },
   directory: {
-    title: 'Directorio de Pagos Lightning',
-    subtitle: 'Encuentra negocios y servicios locales que aceptan pagos Bitcoin Lightning',
+    title: 'Directorio',
+    subtitle: 'Encuentra lugares que aceptan pagos Bitcoin Lightning',
     search: 'Buscar...',
     categories: {
-      all: 'Todos',
-      restaurant: 'Restaurantes',
+      all: 'Todo',
+      restaurant: 'Restaurante',
       lodging: 'Hospedaje',
       goods: 'Productos',
       services: 'Servicios',
-      taxi: 'Taxis',
-      lancha: 'Lanchas',
-      other: 'Otros'
+      taxi: 'Taxi',
+      tuktuk: 'Tuk-tuk',
+      lancha: 'Lancha',
+      other: 'Otro'
     },
     towns: {
       all: 'Todos',
diff --git a/src/locales/en.json b/src/locales/en.json
index d0c0ddd..14aa023 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -11,3 +11,11 @@
     "other": "Other"
   }
 }
+
+"home": {
+  "title": "Find Bitcoin Lightning Acceptors",
+  "subtitle": "Discover local businesses, services, and venues that accept Bitcoin Lightning payments.",
+  "selectTown": "Select your location",
+  "browse": "Browse Directory",
+  "learnMore": "Learn More"
+}
diff --git a/src/locales/es.json b/src/locales/es.json
index 39dc410..c95e899 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -11,3 +11,11 @@
     "other": "Otro"
   }
 }
+
+"home": {
+  "title": "Encuentra Aceptadores de Bitcoin Lightning",
+  "subtitle": "Descubre negocios locales, servicios y lugares que aceptan pagos Bitcoin Lightning.",
+  "selectTown": "Selecciona tu ubicación",
+  "browse": "Explorar Directorio",
+  "learnMore": "Más Información"
+}
diff --git a/src/pages/Directory.vue b/src/pages/Directory.vue
index cc2eb0d..71c91fc 100644
--- a/src/pages/Directory.vue
+++ b/src/pages/Directory.vue
@@ -1,18 +1,68 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import DirectoryGrid from '@/components/directory/DirectoryGrid.vue'
+import DirectoryFilter from '@/components/directory/DirectoryFilter.vue'
 import { mockDirectoryItems } from '@/data/directory'
+import { ref, computed, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useTheme } from '@/components/theme-provider'
 
 const { t } = useI18n()
 
+const route = useRoute()
+const router = useRouter()
+const { currentTown } = useTheme()
+
 // Use the imported mock data
 const items = mockDirectoryItems
+
+const category = ref('all')
+const search = ref('')
+const town = ref(currentTown.value)
+
+// Watch for route changes to update filters
+watch(() => route.query, (newQuery) => {
+  category.value = newQuery.category?.toString() || 'all'
+  search.value = newQuery.search?.toString() || ''
+  town.value = newQuery.town === undefined ? currentTown.value : (newQuery.town?.toString() || 'all')
+}, { immediate: true })
+
+// Watch for filter changes and update URL
+watch([category, search, town], ([newCategory, newSearch, newTown]) => {
+  // Don't update URL if it matches current query params
+  if (
+    newCategory === route.query.category &&
+    newSearch === route.query.search &&
+    newTown === route.query.town
+  ) {
+    return
+  }
+
+  const query = {
+    ...(newCategory !== 'all' && { category: newCategory }),
+    ...(newSearch && { search: newSearch }),
+    ...(newTown !== currentTown.value && { town: newTown })
+  }
+  router.replace({ query })
+})
+
+// Filter items based on category, search, and town
+const filteredItems = computed(() => {
+  return items.filter(item => {
+    const matchesCategory = category.value === 'all' || item.category === category.value
+    const matchesSearch = !search.value ||
+      item.name.toLowerCase().includes(search.value.toLowerCase()) ||
+      item.description?.toLowerCase().includes(search.value.toLowerCase())
+    const matchesTown = town.value === 'all' || item.town === town.value
+    return matchesCategory && matchesSearch && matchesTown
+  })
+})
 </script>
 
 <template>
   <div class="container mx-auto px-4 py-2 md:py-8">
     <div class="space-y-4 sm:space-y-8">
-      <!-- Directory Header - Hidden on mobile -->
+      <!-- Directory Header -->
       <div class="hidden sm:block text-center space-y-4">
         <h1 class="text-3xl font-bold tracking-tight sm:text-4xl">
           {{ t('directory.title') }}
@@ -22,8 +72,15 @@ const items = mockDirectoryItems
         </p>
       </div>
 
+      <!-- Directory Filter -->
+      <DirectoryFilter
+        v-model:category="category"
+        v-model:search="search"
+        v-model:town="town"
+      />
+
       <!-- Directory Grid -->
-      <DirectoryGrid :items="items" />
+      <DirectoryGrid :items="filteredItems" />
     </div>
   </div>
 </template>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index e83f613..437147f 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -1,17 +1,74 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
+import { useTheme } from '@/components/theme-provider'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { computed } from 'vue'
+import {
+  UtensilsCrossed,
+  Bed,
+  ShoppingBag,
+  Sparkles,
+  Car,
+  Ship,
+  HelpCircle,
+} from 'lucide-vue-next'
+import TukTuk from '@/components/icons/TukTuk.vue'
+import { type DirectoryItem } from '@/types/directory'
 
 const { t } = useI18n()
+const { currentTown, setCurrentTown } = useTheme()
+
+type CategoryType = DirectoryItem['category']
+
+const categories: CategoryType[] = ['tuktuk', 'restaurant', 'services', 'goods', 'lodging', 'taxi', 'lancha']
+
+const categoryIcons = {
+  restaurant: UtensilsCrossed,
+  lodging: Bed,
+  goods: ShoppingBag,
+  services: Sparkles,
+  tuktuk: TukTuk,
+  taxi: Car,
+  lancha: Ship,
+  other: HelpCircle,
+} 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',
+  other: 'text-gray-500',
+} as const
+
+const towns = computed(() => [
+  { id: 'all', label: t('directory.towns.all') },
+  { id: 'San Marcos', label: 'San Marcos' },
+  { id: 'San Pedro', label: 'San Pedro' },
+  { id: 'Tzununa', label: 'Tzununa' },
+  { id: 'Jaibalito', label: 'Jaibalito' },
+  { id: 'San Pablo', label: 'San Pablo' },
+  { id: 'Panajachel', label: 'Panajachel' },
+])
 </script>
 
 <template>
   <div class="container mx-auto px-4 py-8">
     <div class="max-w-4xl mx-auto text-center space-y-8">
-      <h1 class="text-4xl font-bold tracking-tight sm:text-6xl">
+      <h1 class="text-3xl font-bold tracking-tight sm:text-6xl">
         {{ t('home.title') }}
       </h1>
 
-      <p class="text-xl text-muted-foreground">
+      <p class="text-lg sm:text-xl text-muted-foreground">
         {{ t('home.subtitle') }}
       </p>
 
@@ -26,6 +83,53 @@ const { t } = useI18n()
           {{ t('home.learnMore') }}
         </router-link>
       </div>
+
+      <!-- Town Selector -->
+      <div class="flex flex-col items-center gap-2 sm:gap-4">
+        <h2 class="text-lg sm:text-xl font-semibold">{{ t('home.selectTown') }}</h2>
+        <Select :model-value="currentTown" @update:model-value="setCurrentTown">
+          <SelectTrigger class="w-[200px]">
+            <SelectValue :placeholder="t('home.selectTownPlaceholder')" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem v-for="town in towns" :key="town.id" :value="town.id">
+              {{ town.label }}
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <!-- Category Buttons -->
+      <div class="relative mt-4 sm:mt-8">
+        <!-- Gradient Fade Edges -->
+        <div class="absolute left-0 top-0 bottom-0 w-4 bg-gradient-to-r from-background to-transparent z-10"></div>
+        <div class="absolute right-0 top-0 bottom-0 w-4 bg-gradient-to-l from-background to-transparent z-10"></div>
+        
+        <!-- Scrollable Container -->
+        <div class="flex overflow-x-auto gap-1 px-4 pb-4 
+          [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]
+          sm:justify-center">
+          <router-link
+            v-for="category in categories"
+            :key="category"
+            :to="`/directory?category=${category}&town=${currentTown}`"
+            class="group flex-shrink-0 w-[100px] sm:w-[120px]"
+          >
+            <Button
+              variant="outline"
+              size="default"
+              class="w-full h-20 sm:h-24 flex flex-col items-center justify-center gap-1 sm:gap-2 group-hover:border-primary/50 transition-colors"
+            >
+              <component
+                :is="categoryIcons[category]"
+                class="h-6 w-6 sm:h-7 sm:w-7"
+                :class="categoryColors[category]"
+              />
+              <span class="text-xs sm:text-sm">{{ t(`directory.categories.${category}`) }}</span>
+            </Button>
+          </router-link>
+        </div>
+      </div>
     </div>
   </div>
 </template>