From 9dd739e36e0b2e46eb9c847f7921ed079733b5bc Mon Sep 17 00:00:00 2001
From: Zach Leahan <54847203+ZacharyLeahan@users.noreply.github.com>
Date: Wed, 28 May 2025 09:15:52 -0400
Subject: [PATCH] Add mobile filter modal with typeahead

---
 src/components/ChipList.vue    |  60 ++++++++++++++++
 src/components/Explorer.vue    |  14 +++-
 src/components/FilterModal.vue | 124 +++++++++++++++++++++++++++++++++
 src/components/SearchInput.vue |  86 +++++++++++++++++++++++
 src/suggestionRules.js         |   8 +++
 5 files changed, 291 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ChipList.vue
 create mode 100644 src/components/FilterModal.vue
 create mode 100644 src/components/SearchInput.vue
 create mode 100644 src/suggestionRules.js

diff --git a/src/components/ChipList.vue b/src/components/ChipList.vue
new file mode 100644
index 0000000..95b377a
--- /dev/null
+++ b/src/components/ChipList.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="chip-list">
+    <transition-group name="chip" tag="div" class="chips">
+      <span
+        v-for="chip in chips"
+        :key="chip"
+        class="chip"
+      >
+        {{ chip }}
+        <button class="remove" @click="$emit('remove', chip)">✕</button>
+      </span>
+    </transition-group>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    chips: Array
+  },
+  emits: ['remove']
+};
+</script>
+
+<style scoped>
+.chip-list {
+  padding: 8px 16px;
+  overflow-x: auto;
+}
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.chip {
+  display: inline-flex;
+  align-items: center;
+  background: #b74d15;
+  color: white;
+  border-radius: 16px;
+  padding: 4px 8px;
+  font-size: 14px;
+}
+.chip .remove {
+  background: none;
+  border: none;
+  color: inherit;
+  margin-left: 4px;
+  font-size: 16px;
+}
+.chip-enter-active,
+.chip-leave-active {
+  transition: all 0.2s ease;
+}
+.chip-enter-from,
+.chip-leave-to {
+  opacity: 0;
+  transform: scale(0.9);
+}
+</style>
diff --git a/src/components/Explorer.vue b/src/components/Explorer.vue
index da6e025..6639771 100644
--- a/src/components/Explorer.vue
+++ b/src/components/Explorer.vue
@@ -484,6 +484,11 @@
     </main>
     <!-- Useful if we go back to using an observer for infinite scroll -->
     <div ref="next"></div>
+    <FilterModal
+      :open="filterModalOpen"
+      @close="filterModalOpen = false"
+      @update:query="applyModalQuery"
+    />
   </div>
 </template>
 
@@ -493,6 +498,7 @@ import Range from "./Range.vue";
 import Checkbox from "./Checkbox.vue";
 import Header from "./Header.vue";
 import Menu from "./Menu.vue";
+import FilterModal from "./FilterModal.vue";
 
 const twoUpImageCredits = [
   // Order is synced with the public/assets/images/two-up folder filenames,
@@ -534,6 +540,7 @@ export default {
     Checkbox,
     Header,
     Menu,
+    FilterModal,
   },
   props: {
     favorites: {
@@ -886,6 +893,7 @@ export default {
       questionDetails,
       twoUpIndex,
       isCopied: false,
+      filterModalOpen: false,
     };
   },
   computed: {
@@ -1318,7 +1326,11 @@ export default {
       }
     },
     openFilters() {
-      this.filtersOpen = true;
+      this.filterModalOpen = true;
+    },
+    applyModalQuery(q) {
+      Object.assign(this.filterValues, q);
+      this.submit();
     },
     submit() {
       if (this.loading) {
diff --git a/src/components/FilterModal.vue b/src/components/FilterModal.vue
new file mode 100644
index 0000000..510aabb
--- /dev/null
+++ b/src/components/FilterModal.vue
@@ -0,0 +1,124 @@
+<template>
+  <transition name="modal-fade">
+    <div v-if="open" class="filter-modal" @keydown.esc="$emit('close')">
+      <div class="modal-bar">
+        <span class="title">Filter</span>
+        <button class="close" @click="$emit('close')">✕</button>
+      </div>
+      <SearchInput
+        :suggestions="suggestions"
+        @select="addChip"
+      />
+      <ChipList :chips="chips" @remove="removeChip" />
+    </div>
+  </transition>
+</template>
+
+<script>
+import SearchInput from './SearchInput.vue';
+import ChipList from './ChipList.vue';
+import suggestionRules from '../suggestionRules';
+
+export default {
+  components: { SearchInput, ChipList },
+  props: {
+    open: Boolean
+  },
+  emits: ['close', 'update:query'],
+  data() {
+    return {
+      chips: []
+    };
+  },
+  computed: {
+    suggestions() {
+      return Object.keys(suggestionRules);
+    },
+    query() {
+      const q = {};
+      for (const chip of this.chips) {
+        const { field, value } = suggestionRules[chip];
+        if (Array.isArray(q[field])) {
+          q[field].push(value);
+        } else if (q[field]) {
+          q[field] = [q[field], value];
+        } else {
+          q[field] = Array.isArray(value) ? [...value] : value;
+        }
+      }
+      return q;
+    }
+  },
+  watch: {
+    query: {
+      handler(newVal) {
+        this.$emit('update:query', newVal);
+      },
+      deep: true
+    },
+    open(val) {
+      if (val) {
+        document.body.style.overflow = 'hidden';
+      } else {
+        document.body.style.overflow = '';
+      }
+    }
+  },
+  methods: {
+    addChip(label) {
+      if (!this.chips.includes(label)) {
+        this.chips.push(label);
+      }
+    },
+    removeChip(label) {
+      const idx = this.chips.indexOf(label);
+      if (idx !== -1) {
+        this.chips.splice(idx, 1);
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.filter-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: #fcf9f4;
+  z-index: 1200;
+  display: flex;
+  flex-direction: column;
+}
+.modal-bar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  height: 56px;
+  border-bottom: 1px solid #1d2e26;
+}
+.modal-bar .title {
+  font-family: Arvo;
+  font-size: 20px;
+}
+.modal-bar .close {
+  position: absolute;
+  right: 16px;
+  top: 16px;
+  background: none;
+  border: none;
+  font-size: 24px;
+}
+.modal-fade-enter-active,
+.modal-fade-leave-active {
+  transition: all 0.3s ease;
+}
+.modal-fade-enter,
+.modal-fade-leave-to {
+  opacity: 0;
+  transform: translateY(20px);
+}
+</style>
diff --git a/src/components/SearchInput.vue b/src/components/SearchInput.vue
new file mode 100644
index 0000000..c42e21c
--- /dev/null
+++ b/src/components/SearchInput.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="search-input">
+    <input
+      ref="input"
+      v-model="text"
+      type="text"
+      placeholder="Type to filter"
+      @input="onInput"
+    />
+    <div v-if="showSuggestions" class="suggestions">
+      <div
+        v-for="suggestion in filtered"
+        :key="suggestion"
+        class="suggestion"
+        @click="select(suggestion)"
+      >
+        {{ suggestion }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    suggestions: Array
+  },
+  emits: ['select'],
+  data() {
+    return {
+      text: '',
+      show: false
+    };
+  },
+  computed: {
+    filtered() {
+      if (this.text.length < 2) return [];
+      const t = this.text.toLowerCase();
+      return this.suggestions.filter(s => s.toLowerCase().includes(t));
+    },
+    showSuggestions() {
+      return this.filtered.length > 0 && this.show;
+    }
+  },
+  mounted() {
+    this.$refs.input.focus();
+  },
+  methods: {
+    onInput() {
+      this.show = true;
+    },
+    select(val) {
+      this.$emit('select', val);
+      this.text = '';
+      this.show = false;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.search-input {
+  padding: 16px;
+}
+.search-input input {
+  width: 100%;
+  font-size: 16px;
+  padding: 8px;
+  border: 1px solid #1d2e26;
+  border-radius: 8px;
+}
+.suggestions {
+  margin-top: 8px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  max-height: 200px;
+  overflow: auto;
+}
+.suggestion {
+  padding: 12px 16px;
+  cursor: pointer;
+}
+.suggestion:hover {
+  background: #ffebcc;
+}
+</style>
diff --git a/src/suggestionRules.js b/src/suggestionRules.js
new file mode 100644
index 0000000..a451cbb
--- /dev/null
+++ b/src/suggestionRules.js
@@ -0,0 +1,8 @@
+export default {
+  'Red berries': { field: 'tags', value: 'red berries' },
+  'Full sun': { field: 'sun_exposure', value: 'full' },
+  'Deer tolerant': { field: 'deer_tolerant', value: true },
+  Wet: { field: 'soil_moisture', value: 'wet' },
+  Dry: { field: 'soil_moisture', value: 'dry' },
+  Shade: { field: 'sun_exposure', value: 'shade' }
+};