From 743c88e2115b69f8aeff986b1bc782ac957e3b5f Mon Sep 17 00:00:00 2001
From: zhouyu <zhouyu@berkeley.edu>
Date: Fri, 5 Sep 2025 10:42:47 -0700
Subject: [PATCH 1/7] Replace the checkbox and label with an option button for
 the galc form

---
 src/components/Facets.vue | 215 +++++++++++++++-----------------------
 1 file changed, 84 insertions(+), 131 deletions(-)

diff --git a/src/components/Facets.vue b/src/components/Facets.vue
index 868b164..5f4998f 100644
--- a/src/components/Facets.vue
+++ b/src/components/Facets.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
+import { computed, ref, onMounted, onUnmounted } from 'vue'
 import { useFacetStore } from '../stores/facets'
 import { useSessionStore } from '../stores/session'
 import { useSearchStore } from '../stores/search'
@@ -16,6 +16,31 @@ const { facets } = storeToRefs(useFacetStore())
 const { isAdmin } = storeToRefs(useSessionStore())
 
 const search = useSearchStore()
+const facetsOpen = ref(false)
+const isMobile = ref(window.innerWidth <= 700)
+
+function toggleFacets() {
+  facetsOpen.value = !facetsOpen.value
+}
+
+function handleWindowResize() {
+  isMobile.value = window.innerWidth <= 700
+  if (isMobile.value) {
+    facetsOpen.value = false 
+  }
+  else {
+    facetsOpen.value = true
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('resize', handleWindowResize)
+  handleWindowResize()
+})
+onUnmounted(() => {
+  window.removeEventListener('resize', handleWindowResize)
+})
+
 const liveMessage = computed(() => {
   const parts: string[] = []
   for (const facetName of search.activeFacetNames) {
@@ -33,12 +58,24 @@ const liveMessage = computed(() => {
 <template>
   <div class="galc-facets">
     <TermDeselection id-prefix="facets"/>
-    <input id="show-facets" type="checkbox">
-    <label class="show-facets-label" for="show-facets">
+
+    <button
+      v-if="isMobile"
+      class="show-facets-button"
+      type="button"
+      @click="toggleFacets"
+      :aria-expanded="facetsOpen.toString()"
+      aria-controls="facet-form"
+    >
       Options
-      <img alt="Options" :src="filter" class="show-facets-icon">
-    </label>
-    <form class="galc-facet-form">
+      <img alt="" :src="filter" class="show-facets-icon">
+    </button>
+
+    <form
+      id="facet-form"
+      class="galc-facet-form"
+      v-show="facetsOpen || !isMobile"
+    >
       <Suppressed v-if="isAdmin"/>
       <InternalFields v-if="isAdmin"/>
       <Facet
@@ -50,134 +87,50 @@ const liveMessage = computed(() => {
     </form>
 
     <!-- Accessible live region -->
-    <span class="sr-only" aria-live="polite" aria-atomic="true">{{ liveMessage }}</span>
-
+    <span class="sr-only" aria-live="polite" aria-atomic="true">
+      {{ liveMessage }}
+    </span>
   </div>
 </template>
 
 <style lang="scss">
-div.galc-facets {
-
-  input#show-facets {
-    display: none;
-  }
-
-  @media only screen and (min-width: 700px) {
-    margin-right: 1em;
-    
-    // TODO: less hacky way to place this differently on desktop and mobile
-    .galc-term-deselection {
-      display: none;
-    }
-
-    label.show-facets-label {
-      display: none;
-    }
-
-    form.galc-facet-form {
-      width: 150px;
+.show-facets-button {
+  display: none;
+}
+@media only screen and (max-width: 700px) {
+  .show-facets-button {
+    display: block;
+    font-size: 1rem;
+    line-height: 1.75rem;
+    font-weight: normal;
+    color: white;
+    background-color: #46535e;
+    padding: 2px 8px;
+    margin: 6px 16px 6px 0;
+    width: fit-content;
+    cursor: pointer;
+    border: none;
+    border-radius: 4px;
+
+    img.show-facets-icon {
+      height: 0.9rem;
+      width: 0.9rem;
+      filter: invert(100%);
+      display: inline;
+      margin-bottom: 4px;
+      margin-left: 4px;
     }
   }
-
-  @media only screen and (max-width: 700px) {
-    input#show-facets {
-      ~ form.galc-facet-form {
-        display: none;
-      }
-
-      &:checked ~ form.galc-facet-form {
-        display: grid;
-      }
-    }
-
-    label.show-facets-label {
-      display: block;
-      font-size: 1rem;
-      line-height: 1.75rem;
-      font-weight: normal;
-      color: white;
-      background-color: #46535e;
-      padding: 2px 8px;
-      margin: 6px 16px 6px 0;
-      width: fit-content;
-      cursor: pointer;
-
-      img.show-facets-icon {
-        height: 0.9rem;
-        width: 0.9rem;
-        filter: invert(100%);
-        display: inline;
-        margin-bottom: -2px;
-        margin-left: 4px;
-      }
-    }
-  }
-
-  form.galc-facet-form {
-    display: grid;
-    grid-template-columns: 1fr;
-    align-items: center;
-    justify-items: start;
-
-    // TODO: rationalize these measurements
-    column-gap: 0.5rem;
-    row-gap: 0;
-    margin-right: 2rem;
-
-    .galc-facet-title {
-      white-space: nowrap;
-      grid-column: 1 / 4;
-      margin-bottom: 0.25em;
-    }
-
-    > fieldset {
-      padding-bottom: 0;
-      width: 100%;
-
-      details {
-        summary {
-          grid-column: 1 / 4;
-        }
-
-        input {
-          grid-column: 1;
-        }
-
-        label {
-          grid-column: 2 / 4;
-        }
-
-        fieldset {
-
-          input {
-            grid-column: 1;
-          }
-
-          label {
-            grid-column: 2 / 4;
-          }
-        }
-      }
-
-      &:not(:first-of-type) {
-        summary {
-          margin-top: 0.25em;
-        }
-      }
-    }
-  }
-
-  .sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-  }
-} 
-
-</style>
+}
+.sr-only {
+position: absolute;
+width: 1px;
+height: 1px;
+padding: 0;
+margin: -1px;
+overflow: hidden;
+clip: rect(0, 0, 0, 0);
+white-space: nowrap;
+border-width: 0;
+}
+</style>
\ No newline at end of file

From 2ae019cbc195f342a683a6e56d03cf71d0ccc3cc Mon Sep 17 00:00:00 2001
From: zhouyu <zhouyu@berkeley.edu>
Date: Mon, 8 Sep 2025 14:27:29 -0700
Subject: [PATCH 2/7] Improve the appearance of the option button

---
 src/components/Facet.vue  | 3 ++-
 src/components/Facets.vue | 7 ++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/Facet.vue b/src/components/Facet.vue
index 5a4da81..17a9f7c 100644
--- a/src/components/Facet.vue
+++ b/src/components/Facet.vue
@@ -45,6 +45,7 @@ function onToggle (event: Event) {
 </template>
 
 <style lang="scss">
+fieldset { padding: 0 0.625em } 
 fieldset.galc-facet {
   display: inherit;
   border: none;
@@ -67,7 +68,7 @@ fieldset.galc-facet {
       font-size: 1.125rem;
       border-bottom: 1px solid #ddd5c7;
       width: 100%;
-      margin-bottom: 0.5em;
+      margin-bottom: 0.0em;
       cursor: pointer;
 
       &::-webkit-details-marker {
diff --git a/src/components/Facets.vue b/src/components/Facets.vue
index 5f4998f..3236e52 100644
--- a/src/components/Facets.vue
+++ b/src/components/Facets.vue
@@ -94,9 +94,11 @@ const liveMessage = computed(() => {
 </template>
 
 <style lang="scss">
+
 .show-facets-button {
   display: none;
 }
+
 @media only screen and (max-width: 700px) {
   .show-facets-button {
     display: block;
@@ -111,13 +113,14 @@ const liveMessage = computed(() => {
     cursor: pointer;
     border: none;
     border-radius: 4px;
+    height: 33px;
 
     img.show-facets-icon {
       height: 0.9rem;
       width: 0.9rem;
       filter: invert(100%);
       display: inline;
-      margin-bottom: 4px;
+      margin-bottom: -2px;
       margin-left: 4px;
     }
   }
@@ -133,4 +136,6 @@ clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border-width: 0;
 }
+
+
 </style>
\ No newline at end of file

From c7b48951f27679756f85b7cd73e992e1ea6b0e7a Mon Sep 17 00:00:00 2001
From: zhouyu <zhouyu@berkeley.edu>
Date: Tue, 9 Sep 2025 14:10:06 -0700
Subject: [PATCH 3/7] Make deselection and facet sections flexible

---
 src/components/Facet.vue  |   6 +-
 src/components/Facets.vue | 145 ++++++++++++++++++++++++++++----------
 2 files changed, 110 insertions(+), 41 deletions(-)

diff --git a/src/components/Facet.vue b/src/components/Facet.vue
index 17a9f7c..86fff1a 100644
--- a/src/components/Facet.vue
+++ b/src/components/Facet.vue
@@ -45,10 +45,10 @@ function onToggle (event: Event) {
 </template>
 
 <style lang="scss">
-fieldset { padding: 0 0.625em } 
-fieldset.galc-facet {
-  display: inherit;
+.galc-facet {
+  padding: 0 0.625em;
   border: none;
+  display: inherit;
 
   legend {
     position: absolute;
diff --git a/src/components/Facets.vue b/src/components/Facets.vue
index 3236e52..a79518d 100644
--- a/src/components/Facets.vue
+++ b/src/components/Facets.vue
@@ -94,48 +94,117 @@ const liveMessage = computed(() => {
 </template>
 
 <style lang="scss">
+div.galc-facets {
+  .show-facets-button {
+    display: none;
+  }
+ 
+   @media only screen and (min-width: 700px) {
+    margin-right: 1em;
+    // TODO: less hacky way to place this differently on desktop and mobile
+    .galc-term-deselection {
+      display: none;
+    }
+    .show-facets-button {
+      display: none;
+    }
+    form.galc-facet-form {
+      width: 150px;
+    }
+  }
 
-.show-facets-button {
-  display: none;
-}
+  @media only screen and (max-width: 700px) {
+    .show-facets-button {
+      display: block;
+      font-size: 1rem;
+      line-height: 1.75rem;
+      font-weight: normal;
+      color: white;
+      background-color: #46535e;
+      padding: 2px 8px;
+      margin: 6px 16px 6px 0;
+      width: fit-content;
+      cursor: pointer;
+      border: none;
+      border-radius: 4px;
+      height: 33px;
+
+      img.show-facets-icon {
+        height: 0.9rem;
+        width: 0.9rem;
+        filter: invert(100%);
+        display: inline;
+        margin-bottom: -2px;
+        margin-left: 4px;
+      }
+    }
+  }
 
-@media only screen and (max-width: 700px) {
-  .show-facets-button {
-    display: block;
-    font-size: 1rem;
-    line-height: 1.75rem;
-    font-weight: normal;
-    color: white;
-    background-color: #46535e;
-    padding: 2px 8px;
-    margin: 6px 16px 6px 0;
-    width: fit-content;
-    cursor: pointer;
-    border: none;
-    border-radius: 4px;
-    height: 33px;
-
-    img.show-facets-icon {
-      height: 0.9rem;
-      width: 0.9rem;
-      filter: invert(100%);
-      display: inline;
-      margin-bottom: -2px;
-      margin-left: 4px;
+  form.galc-facet-form {
+    display: grid;
+    grid-template-columns: 1fr;
+    align-items: center;
+    justify-items: start;
+
+    // TODO: rationalize these measurements
+    column-gap: 0.5rem;
+    row-gap: 0;
+    margin-right: 2rem;
+
+    .galc-facet-title {
+      white-space: nowrap;
+      grid-column: 1 / 4;
+      margin-bottom: 0.25em;
+    }
+
+    > fieldset {
+      padding-bottom: 0;
+      width: 100%;
+
+      details {
+        summary {
+          grid-column: 1 / 4;
+        }
+
+        input {
+          grid-column: 1;
+        }
+
+        label {
+          grid-column: 2 / 4;
+        }
+
+        fieldset {
+
+          input {
+            grid-column: 1;
+          }
+
+          label {
+            grid-column: 2 / 4;
+          }
+        }
+      }
+
+      &:not(:first-of-type) {
+        summary {
+          margin-top: 0.25em;
+        }
+      }
     }
   }
-}
-.sr-only {
-position: absolute;
-width: 1px;
-height: 1px;
-padding: 0;
-margin: -1px;
-overflow: hidden;
-clip: rect(0, 0, 0, 0);
-white-space: nowrap;
-border-width: 0;
-}
 
+  .sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+  }
 
+}
 </style>
\ No newline at end of file

From d63996594595c651e81f7ae0a6cca18dc6d227c2 Mon Sep 17 00:00:00 2001
From: zhouyu <zhouyu@berkeley.edu>
Date: Thu, 11 Sep 2025 19:20:39 -0700
Subject: [PATCH 4/7] Preserve facetsopen status

---
 src/components/Facets.vue | 36 ++++++++++++++++++++++++++++--------
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/components/Facets.vue b/src/components/Facets.vue
index a79518d..fa75a75 100644
--- a/src/components/Facets.vue
+++ b/src/components/Facets.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import { computed, ref, onMounted, onUnmounted } from 'vue'
+import { computed, ref, onMounted, onUnmounted, watch } from 'vue'
 import { useFacetStore } from '../stores/facets'
 import { useSessionStore } from '../stores/session'
 import { useSearchStore } from '../stores/search'
@@ -16,8 +16,34 @@ const { facets } = storeToRefs(useFacetStore())
 const { isAdmin } = storeToRefs(useSessionStore())
 
 const search = useSearchStore()
-const facetsOpen = ref(false)
+
 const isMobile = ref(window.innerWidth <= 700)
+const savedStatus = loadFacetsOpen()
+const facetsOpen = ref(
+  savedStatus !== null ? savedStatus : !isMobile.value // first time or localStorage not availabe: mobile close, desktop open
+)
+
+watch(facetsOpen, (val) => {
+  saveFacetsOpen(val)
+})
+
+function saveFacetsOpen(value: boolean) {
+  try {
+    localStorage.setItem('facetsOpen', String(value))
+  } catch (e) {
+    console.warn('Could not save facetsOpen to localStorage.', e)
+  }
+}
+
+function loadFacetsOpen(): boolean | null {
+  try {
+    const status = localStorage.getItem('facetsOpen')
+    return status !== null ? status === 'true' : null
+  } catch (e) {
+    console.warn('Could not read facetsOpen from localStorage', e)
+    return null
+  }
+}
 
 function toggleFacets() {
   facetsOpen.value = !facetsOpen.value
@@ -25,12 +51,6 @@ function toggleFacets() {
 
 function handleWindowResize() {
   isMobile.value = window.innerWidth <= 700
-  if (isMobile.value) {
-    facetsOpen.value = false 
-  }
-  else {
-    facetsOpen.value = true
-  }
 }
 
 onMounted(() => {

From 284a4c6f3e8795f8a05cfa1834f6916dd424d448 Mon Sep 17 00:00:00 2001
From: zhouyu <zhouyu@berkeley.edu>
Date: Fri, 12 Sep 2025 13:32:16 -0700
Subject: [PATCH 5/7] Use store for preserv facetsOpen status

---
 src/components/Facets.vue | 39 +++++----------------------------------
 src/stores/facets.ts      | 18 ++++++++++++------
 2 files changed, 17 insertions(+), 40 deletions(-)

diff --git a/src/components/Facets.vue b/src/components/Facets.vue
index fa75a75..8fddcb5 100644
--- a/src/components/Facets.vue
+++ b/src/components/Facets.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import { computed, ref, onMounted, onUnmounted, watch } from 'vue'
+import { computed, ref, onMounted, onUnmounted} from 'vue'
 import { useFacetStore } from '../stores/facets'
 import { useSessionStore } from '../stores/session'
 import { useSearchStore } from '../stores/search'
@@ -16,41 +16,12 @@ const { facets } = storeToRefs(useFacetStore())
 const { isAdmin } = storeToRefs(useSessionStore())
 
 const search = useSearchStore()
-
-const isMobile = ref(window.innerWidth <= 700)
-const savedStatus = loadFacetsOpen()
-const facetsOpen = ref(
-  savedStatus !== null ? savedStatus : !isMobile.value // first time or localStorage not availabe: mobile close, desktop open
-)
-
-watch(facetsOpen, (val) => {
-  saveFacetsOpen(val)
-})
-
-function saveFacetsOpen(value: boolean) {
-  try {
-    localStorage.setItem('facetsOpen', String(value))
-  } catch (e) {
-    console.warn('Could not save facetsOpen to localStorage.', e)
-  }
-}
-
-function loadFacetsOpen(): boolean | null {
-  try {
-    const status = localStorage.getItem('facetsOpen')
-    return status !== null ? status === 'true' : null
-  } catch (e) {
-    console.warn('Could not read facetsOpen from localStorage', e)
-    return null
-  }
-}
-
-function toggleFacets() {
-  facetsOpen.value = !facetsOpen.value
-}
+const { facetsOpen } = storeToRefs(useFacetStore())
+const { toggleFacets } = useFacetStore()
+const isMobile = ref(typeof window !== 'undefined' && window.innerWidth <= 700)
 
 function handleWindowResize() {
-  isMobile.value = window.innerWidth <= 700
+  isMobile.value = typeof window !== 'undefined' && window.innerWidth <= 700
 }
 
 onMounted(() => {
diff --git a/src/stores/facets.ts b/src/stores/facets.ts
index 64fa69f..40673e6 100644
--- a/src/stores/facets.ts
+++ b/src/stores/facets.ts
@@ -11,14 +11,20 @@ export const useFacetStore = defineStore('facets', () => {
 
   const facets: Ref<Facet[]> = ref([])
   const facetExpanded: Ref<{ [key: string]: boolean | undefined }> = ref({})
-  const computedExpansionState: {[key: string]: WritableComputedRef<boolean> } = {}
+  const computedExpansionState: { [key: string]: WritableComputedRef<boolean> } = {}
+  const isMobile = typeof window !== 'undefined' && window.innerWidth <= 700
+  const facetsOpen = ref(!isMobile)
 
   // ------------------------------
   // Computed properties
 
   const facetNames = computed(() => { return facets.value.map(f => f.name) })
 
-  function expanded (facetName: string) {
+  function toggleFacets() {
+    facetsOpen.value = !facetsOpen.value
+  }
+
+  function expanded(facetName: string) {
     let expansionState = computedExpansionState[facetName]
     if (!expansionState) {
       expansionState = computed({
@@ -37,7 +43,7 @@ export const useFacetStore = defineStore('facets', () => {
   // ------------------------------
   // Actions
 
-  function expandAll (expandedNames = facetNames.value) {
+  function expandAll(expandedNames = facetNames.value) {
     const expanded = { ...facetExpanded.value }
     for (const facetName of expandedNames) {
       expanded[facetName] = true
@@ -45,16 +51,16 @@ export const useFacetStore = defineStore('facets', () => {
     facetExpanded.value = expanded
   }
 
-  function collapseAll () {
+  function collapseAll() {
     facetExpanded.value = {}
   }
 
-  function facetForName (name: string): Facet | undefined {
+  function facetForName(name: string): Facet | undefined {
     return facets.value.find((f) => f.name === name)
   }
 
   // ------------------------------
   // Store
 
-  return { facets, expanded, facetNames, facetForName, expandAll, collapseAll }
+  return { facets, expanded, facetNames, facetForName, expandAll, collapseAll, facetsOpen, toggleFacets }
 })

From 014b3ebddd9d172f20fecd21b7c32a5d696a9d1b Mon Sep 17 00:00:00 2001
From: zhouyu <zhouyu@berkeley.edu>
Date: Fri, 12 Sep 2025 15:35:39 -0700
Subject: [PATCH 6/7] Add ts test

---
 test/stores/facets.test.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/test/stores/facets.test.ts b/test/stores/facets.test.ts
index 8d00446..eab7a29 100644
--- a/test/stores/facets.test.ts
+++ b/test/stores/facets.test.ts
@@ -11,6 +11,18 @@ describe('facets', () => {
     setActivePinia(createPinia())
   })
 
+  describe('test toggle funtion', () => {
+    it('should toggle facetsOpen', () => {
+      const store = useFacetStore()
+      const initial = store.facetsOpen
+      store.toggleFacets()
+      expect(store.facetsOpen).toBe(!initial)
+
+      store.toggleFacets()
+      expect(store.facetsOpen).toBe(initial)
+    })
+  })
+
   describe('without data', () => {
     describe('facets', () => {
       it('is initially empty', () => {

From bbc628b1623daf8d1b79ee559686872ab909861a Mon Sep 17 00:00:00 2001
From: zhouyu <zhouyu@berkeley.edu>
Date: Mon, 15 Sep 2025 10:36:28 -0700
Subject: [PATCH 7/7] Consolidate store ref

---
 src/components/Facets.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Facets.vue b/src/components/Facets.vue
index 8fddcb5..1255016 100644
--- a/src/components/Facets.vue
+++ b/src/components/Facets.vue
@@ -12,13 +12,13 @@ import InternalFields from './InternalFields.vue'
 import Facet from './Facet.vue'
 import TermDeselection from './TermDeselection.vue'
 
-const { facets } = storeToRefs(useFacetStore())
 const { isAdmin } = storeToRefs(useSessionStore())
-
-const search = useSearchStore()
-const { facetsOpen } = storeToRefs(useFacetStore())
-const { toggleFacets } = useFacetStore()
 const isMobile = ref(typeof window !== 'undefined' && window.innerWidth <= 700)
+const search = useSearchStore()
+
+const facetStore = useFacetStore()
+const { facets, facetsOpen } = storeToRefs(facetStore)
+const { toggleFacets } = facetStore
 
 function handleWindowResize() {
   isMobile.value = typeof window !== 'undefined' && window.innerWidth <= 700