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

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>

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" />

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
   }
 }
 

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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'