From d7be35392482833ab7e9e78d5146de492d4d0deb Mon Sep 17 00:00:00 2001
From: Kevin Hahn <kevin_hahn@sil.org>
Date: Thu, 24 Jul 2025 07:45:56 +0700
Subject: [PATCH 1/8] initial filters

---
 .../components/field-editors/select.svelte    |  4 +-
 .../src/lib/writing-system-service.svelte.ts  |  6 ++
 .../src/project/browse/BrowseView.svelte      |  2 +-
 .../src/project/browse/SearchFilter.svelte    | 61 +++++++++++++++++++
 4 files changed, 71 insertions(+), 2 deletions(-)

diff --git a/frontend/viewer/src/lib/components/field-editors/select.svelte b/frontend/viewer/src/lib/components/field-editors/select.svelte
index 7084abab89..408dac8ab1 100644
--- a/frontend/viewer/src/lib/components/field-editors/select.svelte
+++ b/frontend/viewer/src/lib/components/field-editors/select.svelte
@@ -29,6 +29,7 @@
     emptyResultsPlaceholder?: string;
     drawerTitle?: string;
     onchange?: (value: Value) => void;
+    class?: string;
   } = $props();
 
   const {
@@ -41,6 +42,7 @@
     emptyResultsPlaceholder,
     drawerTitle,
     onchange,
+    class: className
   } = $derived(constProps);
 
   function getId(value: Value): Primitive {
@@ -89,7 +91,7 @@
 
 {#snippet trigger({ props }: { props: Record<string, unknown> })}
   <Button disabled={readonly} bind:ref={triggerRef} variant="outline" {...props} role="combobox" aria-expanded={open}
-    class="w-full h-auto px-2 justify-between disabled:opacity-100 disabled:border-transparent">
+    class={cn('w-full h-auto px-2 justify-between disabled:opacity-100 disabled:border-transparent', className)}>
     {#if value}
       <span>
         {getLabel(value)}
diff --git a/frontend/viewer/src/lib/writing-system-service.svelte.ts b/frontend/viewer/src/lib/writing-system-service.svelte.ts
index 69e742e7c5..032c70a97c 100644
--- a/frontend/viewer/src/lib/writing-system-service.svelte.ts
+++ b/frontend/viewer/src/lib/writing-system-service.svelte.ts
@@ -15,6 +15,8 @@ import {type ResourceReturn} from 'runed';
 export type WritingSystemSelection =
   | 'vernacular'
   | 'analysis'
+  | 'vernacular-no-audio'
+  | 'analysis-no-audio'
   | 'first-vernacular'
   | 'first-analysis'
   | 'vernacular-analysis'
@@ -88,6 +90,10 @@ export class WritingSystemService {
         return this.writingSystems.vernacular;
       case 'analysis':
         return this.writingSystems.analysis;
+      case 'vernacular-no-audio':
+        return this.vernacularNoAudio;
+      case 'analysis-no-audio':
+        return this.analysisNoAudio;
     }
     console.error(`Unknown writing system selection: ${ws as string}`);
     return [];
diff --git a/frontend/viewer/src/project/browse/BrowseView.svelte b/frontend/viewer/src/project/browse/BrowseView.svelte
index 7a5a9bdace..eda060de17 100644
--- a/frontend/viewer/src/project/browse/BrowseView.svelte
+++ b/frontend/viewer/src/project/browse/BrowseView.svelte
@@ -52,7 +52,7 @@
         collapsible
         collapsedSize={0}
         minSize={15}
-        class="min-h-0 flex flex-col relative"
+        class="min-h-0 flex flex-col relative @container/list"
       >
         <div class="flex flex-col h-full p-2 md:p-4 md:pr-0">
           <div class="md:mr-3">
diff --git a/frontend/viewer/src/project/browse/SearchFilter.svelte b/frontend/viewer/src/project/browse/SearchFilter.svelte
index 819d2b914e..0f8997e319 100644
--- a/frontend/viewer/src/project/browse/SearchFilter.svelte
+++ b/frontend/viewer/src/project/browse/SearchFilter.svelte
@@ -13,9 +13,15 @@
   import {useCurrentView} from '$lib/views/view-service';
   import {formatNumber} from '$lib/components/ui/format';
   import ViewT from '$lib/views/ViewT.svelte';
+  import {useWritingSystemService} from '$lib/writing-system-service.svelte';
+  import Select from '$lib/components/field-editors/select.svelte';
+  import { Input } from '$lib/components/ui/input';
+  import {WritingSystemType} from '$lib/dotnet-types';
+  import {watch} from 'runed';
 
   const stats = useProjectStats();
   const currentView = useCurrentView();
+  const wsService = useWritingSystemService();
 
   let {
     search = $bindable(),
@@ -28,6 +34,27 @@
   let missingSenses = $state(false);
   let missingPartOfSpeech = $state(false);
   let missingSemanticDomains = $state(false);
+
+  let fields: Array<{id: string, label: string, ws: 'vernacular-no-audio' | 'analysis-no-audio'}> = $derived([
+    { id: 'lexemeForm', label: pt($t`Lexeme Form`, $t`Word`, $currentView), ws: 'vernacular-no-audio' },
+    { id: 'citationForm', label: pt($t`Citation Form`, $t`Display as`, $currentView), ws: 'vernacular-no-audio' },
+    { id: 'senses.gloss', label: $t`Gloss`, ws: 'analysis-no-audio' },
+  ]);
+  // svelte-ignore state_referenced_locally
+  let selectedField = $state(fields[0]);
+  let selectedWs = $state(wsService.defaultVernacular);
+  $effect(() => {
+    let wsType = selectedWs?.type === WritingSystemType.Vernacular ? 'vernacular-no-audio' : 'analysis-no-audio'
+    if (selectedField.ws !== wsType) {
+      selectedWs = wsService.pickWritingSystems(selectedField.ws)[0];
+    }
+  });
+  watch(() => fields, fields => {
+    //updates selected field when selected view changes
+    selectedField = fields.find(f => f.id === selectedField.id) ?? fields[0];
+  });
+  let fieldFilterValue = $state('');
+
   $effect(() => {
     let newFilter: string[] = [];
     if (missingExamples) {
@@ -42,6 +69,9 @@
     if (missingSemanticDomains) {
       newFilter.push('Senses.SemanticDomains=null')
     }
+    if (fieldFilterValue) {
+      newFilter.push(`${selectedField.id}[${selectedWs?.wsId}]=*${fieldFilterValue}`)
+    }
     gridifyFilter = newFilter.join(', ');
   });
 
@@ -78,6 +108,37 @@
     </ComposableInput>
   </div>
   <Collapsible.Content class="p-2 mb-2 space-y-2">
+    <!-- insert new filter here -->
+    <div class="flex flex-col @md/list:flex-row gap-2 items-stretch">
+      <div class="flex flex-row gap-2 flex-1">
+        <!-- Field Picker -->
+        <Select
+          bind:value={selectedField}
+          options={fields}
+          idSelector="id"
+          labelSelector="label"
+          placeholder={$t`Field`}
+          class="flex-1"
+        />
+        <!-- Writing System Picker -->
+        <Select
+          bind:value={selectedWs}
+          options={wsService.pickWritingSystems(selectedField.ws)}
+          idSelector="wsId"
+          labelSelector={ws => `${ws.abbreviation} (${ws.wsId})`}
+          placeholder={$t`Writing System`}
+          class="flex-1"
+        />
+      </div>
+      <!-- Text Box: on mobile, wraps to new line -->
+      <div class="flex-1">
+        <Input
+          bind:value={fieldFilterValue}
+          placeholder={$t`Enter value`}
+          class="w-full"
+        />
+      </div>
+    </div>
     <Switch bind:checked={missingExamples} label={$t`Missing Examples`} />
     <Switch bind:checked={missingSenses} label={$t`Missing Senses`} />
     <Switch bind:checked={missingPartOfSpeech} label={$t`Missing Part of Speech`} />

From 6591f1624ef52febd6be7d372069e0c44f6cc496 Mon Sep 17 00:00:00 2001
From: Kevin Hahn <kevin_hahn@sil.org>
Date: Thu, 24 Jul 2025 09:38:28 +0700
Subject: [PATCH 2/8] show operation picker

---
 .../ui/select/select-trigger.svelte           | 10 ++++--
 .../viewer/src/project/browse/OpFilter.svelte | 35 +++++++++++++++++++
 .../src/project/browse/SearchFilter.svelte    | 20 ++++++++---
 3 files changed, 58 insertions(+), 7 deletions(-)
 create mode 100644 frontend/viewer/src/project/browse/OpFilter.svelte

diff --git a/frontend/viewer/src/lib/components/ui/select/select-trigger.svelte b/frontend/viewer/src/lib/components/ui/select/select-trigger.svelte
index 92221880fe..1c570b69f0 100644
--- a/frontend/viewer/src/lib/components/ui/select/select-trigger.svelte
+++ b/frontend/viewer/src/lib/components/ui/select/select-trigger.svelte
@@ -2,13 +2,17 @@
   import {cn} from '$lib/utils.js';
   import {Select as SelectPrimitive, type WithoutChild} from 'bits-ui';
   import {Icon} from '../icon';
+  import type {IconClass} from '$lib/icon-class';
 
   let {
     ref = $bindable(null),
     class: className,
+    downIcon = 'i-mdi-chevron-down',
     children,
     ...restProps
-  }: WithoutChild<SelectPrimitive.TriggerProps> = $props();
+  }: WithoutChild<SelectPrimitive.TriggerProps> & {
+    downIcon: IconClass | null;
+  } = $props();
 </script>
 
 <SelectPrimitive.Trigger
@@ -20,5 +24,7 @@
   {...restProps}
 >
   {@render children?.()}
-  <Icon icon="i-mdi-chevron-down" class="size-4 opacity-50" />
+  {#if downIcon}
+    <Icon icon={downIcon} class="size-4 opacity-50" />
+  {/if}
 </SelectPrimitive.Trigger>
diff --git a/frontend/viewer/src/project/browse/OpFilter.svelte b/frontend/viewer/src/project/browse/OpFilter.svelte
new file mode 100644
index 0000000000..d2db3a3008
--- /dev/null
+++ b/frontend/viewer/src/project/browse/OpFilter.svelte
@@ -0,0 +1,35 @@
+<script lang="ts" module>
+  export type Op = 'starts-with' | 'contains' | 'ends-with' | 'equals' | 'not-equals';
+</script>
+
+<script lang="ts">
+  import * as Select from '$lib/components/ui/select';
+  import {Icon} from '$lib/components/ui/icon';
+  import {t} from 'svelte-i18n-lingui';
+  import type {IconClass} from '$lib/icon-class';
+  let {value = $bindable()}: {value: string} = $props();
+  const ops: {label: string, value: Op, icon: IconClass}[] = [
+    {label: $t`Starts with`, value: 'starts-with', icon: 'i-mdi-contain-start'},
+    {label: $t`Contains`, value: 'contains', icon: 'i-mdi-contain'},
+    {label: $t`Ends with`, value: 'ends-with', icon: 'i-mdi-contain-end'},
+    {label: $t`Equals`, value: 'equals', icon: 'i-mdi-equal'},
+    {label: $t`Not equal`, value: 'not-equals', icon: 'i-mdi-not-equal-variant'},
+  ] ;
+</script>
+
+<Select.Root type="single" bind:value>
+  <Select.Trigger class="w-13" downIcon={null}>
+    <Icon icon={ops.find(o => o.value === value)?.icon ?? 'i-mdi-close'}/>
+  </Select.Trigger>
+  <Select.Content>
+    <Select.Group>
+      <Select.GroupHeading>Filter By</Select.GroupHeading>
+      {#each ops as op}
+        <Select.Item value={op.value}>
+          <Icon icon={op.icon} class="mr-2"/>
+          {op.label}
+        </Select.Item>
+      {/each}
+    </Select.Group>
+  </Select.Content>
+</Select.Root>
diff --git a/frontend/viewer/src/project/browse/SearchFilter.svelte b/frontend/viewer/src/project/browse/SearchFilter.svelte
index 0f8997e319..b62b5d922c 100644
--- a/frontend/viewer/src/project/browse/SearchFilter.svelte
+++ b/frontend/viewer/src/project/browse/SearchFilter.svelte
@@ -18,6 +18,7 @@
   import { Input } from '$lib/components/ui/input';
   import {WritingSystemType} from '$lib/dotnet-types';
   import {watch} from 'runed';
+  import OpFilter, {type Op} from './OpFilter.svelte';
 
   const stats = useProjectStats();
   const currentView = useCurrentView();
@@ -54,6 +55,7 @@
     selectedField = fields.find(f => f.id === selectedField.id) ?? fields[0];
   });
   let fieldFilterValue = $state('');
+  let filterOp = $state<Op>('contains')
 
   $effect(() => {
     let newFilter: string[] = [];
@@ -70,12 +72,20 @@
       newFilter.push('Senses.SemanticDomains=null')
     }
     if (fieldFilterValue) {
-      newFilter.push(`${selectedField.id}[${selectedWs?.wsId}]=*${fieldFilterValue}`)
+      let op: string;
+      switch (filterOp) {
+        case 'starts-with': op = '^'; break;
+        case 'contains': op = '=*'; break;
+        case 'ends-with': op = '$'; break;
+        case 'equals': op = '='; break;
+        case 'not-equals': op = '!='; break;
+      }
+      newFilter.push(`${selectedField.id}[${selectedWs?.wsId}]${op}${fieldFilterValue}`)
     }
     gridifyFilter = newFilter.join(', ');
   });
 
-  let filtersExpanded = $state(false);
+  let filtersExpanded = $state(true);
 </script>
 
 {#snippet placeholder()}
@@ -108,7 +118,6 @@
     </ComposableInput>
   </div>
   <Collapsible.Content class="p-2 mb-2 space-y-2">
-    <!-- insert new filter here -->
     <div class="flex flex-col @md/list:flex-row gap-2 items-stretch">
       <div class="flex flex-row gap-2 flex-1">
         <!-- Field Picker -->
@@ -131,11 +140,12 @@
         />
       </div>
       <!-- Text Box: on mobile, wraps to new line -->
-      <div class="flex-1">
+      <div class="flex flex-row gap-2 flex-1">
+        <OpFilter bind:value={filterOp}/>
         <Input
           bind:value={fieldFilterValue}
           placeholder={$t`Enter value`}
-          class="w-full"
+          class="flex-1"
         />
       </div>
     </div>

From b6757787d4d465d38c57b3f54c01b9d4eddffbc2 Mon Sep 17 00:00:00 2001
From: Kevin Hahn <kevin_hahn@sil.org>
Date: Thu, 24 Jul 2025 10:15:43 +0700
Subject: [PATCH 3/8] allow filtering for one or many writing systems

---
 .../src/project/browse/SearchFilter.svelte    | 36 ++++++++-----------
 .../browse/{ => filter}/OpFilter.svelte       |  0
 .../src/project/browse/filter/WsSelect.svelte | 33 +++++++++++++++++
 3 files changed, 47 insertions(+), 22 deletions(-)
 rename frontend/viewer/src/project/browse/{ => filter}/OpFilter.svelte (100%)
 create mode 100644 frontend/viewer/src/project/browse/filter/WsSelect.svelte

diff --git a/frontend/viewer/src/project/browse/SearchFilter.svelte b/frontend/viewer/src/project/browse/SearchFilter.svelte
index b62b5d922c..81ab1acd07 100644
--- a/frontend/viewer/src/project/browse/SearchFilter.svelte
+++ b/frontend/viewer/src/project/browse/SearchFilter.svelte
@@ -13,12 +13,12 @@
   import {useCurrentView} from '$lib/views/view-service';
   import {formatNumber} from '$lib/components/ui/format';
   import ViewT from '$lib/views/ViewT.svelte';
-  import {useWritingSystemService} from '$lib/writing-system-service.svelte';
   import Select from '$lib/components/field-editors/select.svelte';
   import { Input } from '$lib/components/ui/input';
-  import {WritingSystemType} from '$lib/dotnet-types';
   import {watch} from 'runed';
-  import OpFilter, {type Op} from './OpFilter.svelte';
+  import OpFilter, {type Op} from './filter/OpFilter.svelte';
+  import WsSelect from './filter/WsSelect.svelte';
+  import {useWritingSystemService} from '$lib/writing-system-service.svelte';
 
   const stats = useProjectStats();
   const currentView = useCurrentView();
@@ -43,13 +43,7 @@
   ]);
   // svelte-ignore state_referenced_locally
   let selectedField = $state(fields[0]);
-  let selectedWs = $state(wsService.defaultVernacular);
-  $effect(() => {
-    let wsType = selectedWs?.type === WritingSystemType.Vernacular ? 'vernacular-no-audio' : 'analysis-no-audio'
-    if (selectedField.ws !== wsType) {
-      selectedWs = wsService.pickWritingSystems(selectedField.ws)[0];
-    }
-  });
+  let selectedWs = $state<string[]>(wsService.vernacularNoAudio.map(ws => ws.wsI));
   watch(() => fields, fields => {
     //updates selected field when selected view changes
     selectedField = fields.find(f => f.id === selectedField.id) ?? fields[0];
@@ -71,7 +65,7 @@
     if (missingSemanticDomains) {
       newFilter.push('Senses.SemanticDomains=null')
     }
-    if (fieldFilterValue) {
+    if (fieldFilterValue && selectedWs?.length > 0) {
       let op: string;
       switch (filterOp) {
         case 'starts-with': op = '^'; break;
@@ -80,12 +74,17 @@
         case 'equals': op = '='; break;
         case 'not-equals': op = '!='; break;
       }
-      newFilter.push(`${selectedField.id}[${selectedWs?.wsId}]${op}${fieldFilterValue}`)
+      let fieldFilter = [];
+      for (let ws of selectedWs) {
+        fieldFilter.push(`${selectedField.id}[${ws}]${op}${fieldFilterValue}`);
+      }
+      //construct a filter like LexemeForm[en]=value|LexemeForm[fr]=value
+      newFilter.push('(' + fieldFilter.join('|') + ')')
     }
     gridifyFilter = newFilter.join(', ');
   });
 
-  let filtersExpanded = $state(true);
+  let filtersExpanded = $state(false);
 </script>
 
 {#snippet placeholder()}
@@ -130,21 +129,14 @@
           class="flex-1"
         />
         <!-- Writing System Picker -->
-        <Select
-          bind:value={selectedWs}
-          options={wsService.pickWritingSystems(selectedField.ws)}
-          idSelector="wsId"
-          labelSelector={ws => `${ws.abbreviation} (${ws.wsId})`}
-          placeholder={$t`Writing System`}
-          class="flex-1"
-        />
+        <WsSelect bind:value={selectedWs} wsType={selectedField.ws} />
       </div>
       <!-- Text Box: on mobile, wraps to new line -->
       <div class="flex flex-row gap-2 flex-1">
         <OpFilter bind:value={filterOp}/>
         <Input
           bind:value={fieldFilterValue}
-          placeholder={$t`Enter value`}
+          placeholder={$t`Filter for`}
           class="flex-1"
         />
       </div>
diff --git a/frontend/viewer/src/project/browse/OpFilter.svelte b/frontend/viewer/src/project/browse/filter/OpFilter.svelte
similarity index 100%
rename from frontend/viewer/src/project/browse/OpFilter.svelte
rename to frontend/viewer/src/project/browse/filter/OpFilter.svelte
diff --git a/frontend/viewer/src/project/browse/filter/WsSelect.svelte b/frontend/viewer/src/project/browse/filter/WsSelect.svelte
new file mode 100644
index 0000000000..a576a21244
--- /dev/null
+++ b/frontend/viewer/src/project/browse/filter/WsSelect.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+  import * as Select from '$lib/components/ui/select';
+  import {useWritingSystemService, type WritingSystemSelection} from '$lib/writing-system-service.svelte';
+  import {t} from 'svelte-i18n-lingui';
+
+  const wsService = useWritingSystemService();
+
+  let {value = $bindable(), wsType}: { value: string[] | undefined, wsType: WritingSystemSelection } = $props();
+  let writingSystems = $derived(wsService.pickWritingSystems(wsType));
+</script>
+<Select.Root type="multiple" bind:value>
+  <Select.Trigger class="flex-1">
+    {#if value.length === 0}
+      <span class="text-muted-foreground">{$t`Writing System`}</span>
+    {:else if value.length === writingSystems.length}
+      <span class="text-muted-foreground">
+        {$t`Any Ws`}
+      </span>
+    {:else}
+      {writingSystems.filter(w => value.includes(w.wsId)).map(w => w.abbreviation).join(', ')}
+    {/if}
+  </Select.Trigger>
+  <Select.Content>
+    <Select.Group>
+      <Select.GroupHeading>{$t`Writing Systems`}</Select.GroupHeading>
+      {#each writingSystems as ws}
+        <Select.Item value={ws.wsId}>
+          {ws.abbreviation} ({ws.wsId})
+        </Select.Item>
+      {/each}
+    </Select.Group>
+  </Select.Content>
+</Select.Root>

From fda93c9bd3b60f3ada0a40506a89701c0fffe904 Mon Sep 17 00:00:00 2001
From: Kevin Hahn <kevin_hahn@sil.org>
Date: Thu, 24 Jul 2025 10:18:43 +0700
Subject: [PATCH 4/8] expose gridify filter over miniLcm api

---
 backend/FwLite/FwLiteWeb/Routes/MiniLcmRoutes.cs | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/backend/FwLite/FwLiteWeb/Routes/MiniLcmRoutes.cs b/backend/FwLite/FwLiteWeb/Routes/MiniLcmRoutes.cs
index da3da3b6ac..0b2ec50377 100644
--- a/backend/FwLite/FwLiteWeb/Routes/MiniLcmRoutes.cs
+++ b/backend/FwLite/FwLiteWeb/Routes/MiniLcmRoutes.cs
@@ -5,6 +5,7 @@
 using Microsoft.OpenApi.Any;
 using Microsoft.OpenApi.Models;
 using MiniLcm;
+using MiniLcm.Filtering;
 using MiniLcm.Models;
 using MiniLcm.Project;
 using MiniLcm.Validators;
@@ -168,7 +169,8 @@ public QueryOptions ToQueryOptions()
                     Ascending ?? SortOptions.Default.Ascending),
                 exemplarOptions,
                 Count ?? QueryOptions.Default.Count,
-                Offset ?? QueryOptions.Default.Offset);
+                Offset ?? QueryOptions.Default.Offset,
+                string.IsNullOrEmpty(GridifyFilter) ? null : new EntryFilter {GridifyFilter = GridifyFilter});
         }
 
         public SortField? SortField { get; set; } = SortOptions.Default.Field;
@@ -191,5 +193,7 @@ public QueryOptions ToQueryOptions()
 
         [FromQuery]
         public int? Offset { get; set; }
+        [FromQuery]
+        public string? GridifyFilter { get; set; }
     }
 }

From ed9781f3cc8f0f3983d466720e330fad124f5e97 Mon Sep 17 00:00:00 2001
From: Kevin Hahn <kevin_hahn@sil.org>
Date: Thu, 24 Jul 2025 10:37:45 +0700
Subject: [PATCH 5/8] escape filter value

---
 frontend/viewer/src/project/browse/SearchFilter.svelte | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/viewer/src/project/browse/SearchFilter.svelte b/frontend/viewer/src/project/browse/SearchFilter.svelte
index 81ab1acd07..65dcbcf1cd 100644
--- a/frontend/viewer/src/project/browse/SearchFilter.svelte
+++ b/frontend/viewer/src/project/browse/SearchFilter.svelte
@@ -76,7 +76,8 @@
       }
       let fieldFilter = [];
       for (let ws of selectedWs) {
-        fieldFilter.push(`${selectedField.id}[${ws}]${op}${fieldFilterValue}`);
+        let escapedValue = escapeGridifyValue(fieldFilterValue);
+        fieldFilter.push(`${selectedField.id}[${ws}]${op}${escapedValue}`);
       }
       //construct a filter like LexemeForm[en]=value|LexemeForm[fr]=value
       newFilter.push('(' + fieldFilter.join('|') + ')')
@@ -84,6 +85,12 @@
     gridifyFilter = newFilter.join(', ');
   });
 
+
+  function escapeGridifyValue(v: string) {
+    //from https://alirezanet.github.io/Gridify/guide/filtering#escaping
+    return v.replace(/([(),|\\]|\/i)/g, '\\$1');
+  }
+
   let filtersExpanded = $state(false);
 </script>
 

From f228c04ab1f868c2ecfbb8cb98a89b46a2a52236 Mon Sep 17 00:00:00 2001
From: Kevin Hahn <kevin_hahn@sil.org>
Date: Thu, 24 Jul 2025 10:45:46 +0700
Subject: [PATCH 6/8] resolve issues from feedback

---
 frontend/viewer/src/project/browse/SearchFilter.svelte    | 2 +-
 frontend/viewer/src/project/browse/filter/OpFilter.svelte | 4 ++--
 frontend/viewer/src/project/browse/filter/WsSelect.svelte | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/viewer/src/project/browse/SearchFilter.svelte b/frontend/viewer/src/project/browse/SearchFilter.svelte
index 65dcbcf1cd..ce11542601 100644
--- a/frontend/viewer/src/project/browse/SearchFilter.svelte
+++ b/frontend/viewer/src/project/browse/SearchFilter.svelte
@@ -75,8 +75,8 @@
         case 'not-equals': op = '!='; break;
       }
       let fieldFilter = [];
+      let escapedValue = escapeGridifyValue(fieldFilterValue);
       for (let ws of selectedWs) {
-        let escapedValue = escapeGridifyValue(fieldFilterValue);
         fieldFilter.push(`${selectedField.id}[${ws}]${op}${escapedValue}`);
       }
       //construct a filter like LexemeForm[en]=value|LexemeForm[fr]=value
diff --git a/frontend/viewer/src/project/browse/filter/OpFilter.svelte b/frontend/viewer/src/project/browse/filter/OpFilter.svelte
index d2db3a3008..307e03a8f8 100644
--- a/frontend/viewer/src/project/browse/filter/OpFilter.svelte
+++ b/frontend/viewer/src/project/browse/filter/OpFilter.svelte
@@ -8,13 +8,13 @@
   import {t} from 'svelte-i18n-lingui';
   import type {IconClass} from '$lib/icon-class';
   let {value = $bindable()}: {value: string} = $props();
-  const ops: {label: string, value: Op, icon: IconClass}[] = [
+  const ops: {label: string, value: Op, icon: IconClass}[] = $derived([
     {label: $t`Starts with`, value: 'starts-with', icon: 'i-mdi-contain-start'},
     {label: $t`Contains`, value: 'contains', icon: 'i-mdi-contain'},
     {label: $t`Ends with`, value: 'ends-with', icon: 'i-mdi-contain-end'},
     {label: $t`Equals`, value: 'equals', icon: 'i-mdi-equal'},
     {label: $t`Not equal`, value: 'not-equals', icon: 'i-mdi-not-equal-variant'},
-  ] ;
+  ]);
 </script>
 
 <Select.Root type="single" bind:value>
diff --git a/frontend/viewer/src/project/browse/filter/WsSelect.svelte b/frontend/viewer/src/project/browse/filter/WsSelect.svelte
index a576a21244..7f7c93d248 100644
--- a/frontend/viewer/src/project/browse/filter/WsSelect.svelte
+++ b/frontend/viewer/src/project/browse/filter/WsSelect.svelte
@@ -5,7 +5,7 @@
 
   const wsService = useWritingSystemService();
 
-  let {value = $bindable(), wsType}: { value: string[] | undefined, wsType: WritingSystemSelection } = $props();
+  let {value = $bindable(), wsType}: { value: string[], wsType: WritingSystemSelection } = $props();
   let writingSystems = $derived(wsService.pickWritingSystems(wsType));
 </script>
 <Select.Root type="multiple" bind:value>

From a82287f3247838fcd767c318eef6875c0afd2a47 Mon Sep 17 00:00:00 2001
From: Kevin Hahn <kevin_hahn@sil.org>
Date: Thu, 24 Jul 2025 11:00:11 +0700
Subject: [PATCH 7/8] fix lint and review issues

---
 .../viewer/src/lib/components/ui/select/select-trigger.svelte  | 2 +-
 frontend/viewer/src/project/browse/SearchFilter.svelte         | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/viewer/src/lib/components/ui/select/select-trigger.svelte b/frontend/viewer/src/lib/components/ui/select/select-trigger.svelte
index 1c570b69f0..c9b2189e53 100644
--- a/frontend/viewer/src/lib/components/ui/select/select-trigger.svelte
+++ b/frontend/viewer/src/lib/components/ui/select/select-trigger.svelte
@@ -11,7 +11,7 @@
     children,
     ...restProps
   }: WithoutChild<SelectPrimitive.TriggerProps> & {
-    downIcon: IconClass | null;
+    downIcon?: IconClass | null;
   } = $props();
 </script>
 
diff --git a/frontend/viewer/src/project/browse/SearchFilter.svelte b/frontend/viewer/src/project/browse/SearchFilter.svelte
index ce11542601..52c5a2ef81 100644
--- a/frontend/viewer/src/project/browse/SearchFilter.svelte
+++ b/frontend/viewer/src/project/browse/SearchFilter.svelte
@@ -41,9 +41,10 @@
     { id: 'citationForm', label: pt($t`Citation Form`, $t`Display as`, $currentView), ws: 'vernacular-no-audio' },
     { id: 'senses.gloss', label: $t`Gloss`, ws: 'analysis-no-audio' },
   ]);
+
   // svelte-ignore state_referenced_locally
   let selectedField = $state(fields[0]);
-  let selectedWs = $state<string[]>(wsService.vernacularNoAudio.map(ws => ws.wsI));
+  let selectedWs = $state<string[]>(wsService.vernacularNoAudio.map(ws => ws.wsId));
   watch(() => fields, fields => {
     //updates selected field when selected view changes
     selectedField = fields.find(f => f.id === selectedField.id) ?? fields[0];

From a2f549e79b0138152abae5a4a559c6687e8d2ca8 Mon Sep 17 00:00:00 2001
From: Kevin Hahn <kevin_hahn@sil.org>
Date: Thu, 24 Jul 2025 13:36:51 +0700
Subject: [PATCH 8/8] set WsSelect value on writing systems change

---
 frontend/viewer/src/project/browse/filter/WsSelect.svelte | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/viewer/src/project/browse/filter/WsSelect.svelte b/frontend/viewer/src/project/browse/filter/WsSelect.svelte
index 7f7c93d248..b45931b143 100644
--- a/frontend/viewer/src/project/browse/filter/WsSelect.svelte
+++ b/frontend/viewer/src/project/browse/filter/WsSelect.svelte
@@ -2,11 +2,15 @@
   import * as Select from '$lib/components/ui/select';
   import {useWritingSystemService, type WritingSystemSelection} from '$lib/writing-system-service.svelte';
   import {t} from 'svelte-i18n-lingui';
+  import {watch} from 'runed';
 
   const wsService = useWritingSystemService();
 
   let {value = $bindable(), wsType}: { value: string[], wsType: WritingSystemSelection } = $props();
   let writingSystems = $derived(wsService.pickWritingSystems(wsType));
+  watch(() => writingSystems, () => {
+    value = writingSystems.map(ws => ws.wsId);
+  });
 </script>
 <Select.Root type="multiple" bind:value>
   <Select.Trigger class="flex-1">