add quick town selection and category selection from homescreen with localstorage!

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>