Add part of speech filter (#2079)

Copilot · web-flow · commit 6cf4b2afbe30 · 2025-11-06T14:13:27.000+01:00
diff --git a/frontend/viewer/src/lib/components/field-editors/multi-select.svelte b/frontend/viewer/src/lib/components/field-editors/multi-select.svelte
@@ -163,13 +163,13 @@
 </script>
 
 {#snippet displayBadges()}
-  <div class="flex flex-wrap justify-start gap-2">
+  <div class="flex flex-wrap justify-start gap-2 overflow-hidden">
     {#each displayValues as value (getId(value))}
       <Badge>
-        {getLabel(value)}
+        {getLabel(value) || $t`Untitled`}
       </Badge>
     {:else}
-      <span class="text-muted-foreground">
+      <span class="text-muted-foreground x-ellipsis">
         {placeholder ?? $t`None`}
         <!-- ensures that:
           1) baseline alignment works for consumers of this component
@@ -213,7 +213,7 @@
         {/if}
       </div>
     </CommandInput>
-    <CommandList class="max-md:h-[300px] md:max-h-[50vh]">
+    <CommandList class="max-md:h-[300px] md:max-h-[40vh]">
       <CommandEmpty>{emptyResultsPlaceholder ?? $t`No items found`}</CommandEmpty>
       <CommandGroup>
         {#each renderedOptions as value, i (getId(value))}
@@ -222,9 +222,9 @@
           {@const selected = pendingValues.some(v => v.id === id)}
           <CommandItem
             keywords={[label.toLocaleLowerCase()]}
-            value={label.toLocaleLowerCase()}
+            value={label.toLocaleLowerCase() + String(id)}
             onSelect={() => toggleSelected(value, !dirty && !IsMobile.value)}
-            class="group max-md:h-12"
+            class={cn('group max-md:h-12', label || 'text-muted-foreground')}
             data-value-index={i}
             aria-label={label}
           >
@@ -245,7 +245,7 @@
               }}
               onCheckedChange={() => toggleSelected(value, false)}
             />
-            {label}
+            {label || $t`Untitled`}
           </CommandItem>
         {/each}
         {#if renderedOptions.length < filteredOptions.length}
diff --git a/frontend/viewer/src/lib/components/field-editors/select.svelte b/frontend/viewer/src/lib/components/field-editors/select.svelte
@@ -94,11 +94,11 @@
     <Button disabled={readonly} bind:ref={triggerRef} variant="outline" {...props} role="combobox" aria-expanded={open}
     class={cn('w-full h-auto min-h-10 px-2 justify-between disabled:opacity-100 disabled:border-transparent', className)}>
     {#if value}
-      <span>
-        {getLabel(value)}
+      <span class="x-ellipsis mr-4">
+        {getLabel(value) || $t`Untitled`}
       </span>
     {:else}
-      <span class="text-muted-foreground">
+      <span class="text-muted-foreground x-ellipsis mr-4">
         {placeholder ?? $t`None`}
         <!-- ensures that baseline alignment works for consumers of this component -->
         &nbsp;
@@ -129,7 +129,7 @@
         {/if}
       </div>
     </CommandInput>
-    <CommandList class="max-md:h-[300px] md:max-h-[50vh]">
+    <CommandList class="max-md:h-[300px] md:max-h-[40vh]">
       <CommandEmpty>{emptyResultsPlaceholder ?? $t`No items found`}</CommandEmpty>
       <CommandGroup>
         {#each renderedOptions as option, i (getId(option))}
@@ -138,14 +138,14 @@
           {@const selected = value && getId(value) === id}
           <CommandItem
             keywords={[label.toLocaleLowerCase()]}
-            value={label.toLocaleLowerCase()}
+            value={label.toLocaleLowerCase() + String(id)}
             onSelect={() => selectValue(option)}
-            class="group max-md:h-12"
+            class={cn('group max-md:h-12', label || 'text-muted-foreground')}
             data-value-index={i}
             aria-label={label}
           >
             <Icon icon="i-mdi-check" class={cn('md:hidden', selected || 'invisible')} />
-            {label}
+            {label || $t`Untitled`}
           </CommandItem>
         {/each}
         {#if renderedOptions.length < filteredOptions.length}
diff --git a/frontend/viewer/src/lib/components/ui/button/x-button.svelte b/frontend/viewer/src/lib/components/ui/button/x-button.svelte
@@ -12,5 +12,5 @@
 </script>
 
 <Button icon="i-mdi-close" variant="ghost" size="xs-icon" aria-label={$t`Close`}
-  class={cn('opacity-70 transition-opacity hover:opacity-100 ring-offset-background focus:ring-ring focus:outline-none focus:ring-2 disabled:pointer-events-none',
+  class={cn('bg-background opacity-70 transition-opacity hover:opacity-100 ring-offset-background focus:ring-ring focus:outline-none focus:ring-2 disabled:pointer-events-none',
   className)} {...restProps} />
diff --git a/frontend/viewer/src/locales/en.po b/frontend/viewer/src/locales/en.po
@@ -130,6 +130,14 @@ msgstr "Add Word"
 msgid "an entry"
 msgstr "an entry"
 
+#: src/project/browse/filter/PartOfSpeechSelect.svelte
+msgid "Any grammatical info."
+msgstr "Any grammatical info."
+
+#: src/project/browse/filter/PartOfSpeechSelect.svelte
+msgid "Any part of speech"
+msgstr "Any part of speech"
+
 #: src/project/browse/filter/SemanticDomainSelect.svelte
 msgid "Any semantic domain"
 msgstr "Any semantic domain"
@@ -576,6 +584,7 @@ msgstr "Gloss"
 msgid "Go to {0}"
 msgstr "Go to {0}"
 
+#: src/project/browse/SearchFilter.svelte
 #: src/lib/entry-editor/object-editors/SenseEditorPrimitive.svelte
 msgid "Grammatical info."
 msgstr "Grammatical info."
@@ -893,6 +902,7 @@ msgstr "Part"
 msgid "Part of"
 msgstr "Part of"
 
+#: src/project/browse/SearchFilter.svelte
 #: src/lib/entry-editor/object-editors/SenseEditorPrimitive.svelte
 msgid "Part of speech"
 msgstr "Part of speech"
@@ -1243,6 +1253,10 @@ msgstr "Unknown server"
 #: src/project/browse/EntryView.svelte
 #: src/project/browse/EntryRow.svelte
 #: src/project/browse/EntryMenu.svelte
+#: src/lib/components/field-editors/select.svelte
+#: src/lib/components/field-editors/select.svelte
+#: src/lib/components/field-editors/multi-select.svelte
+#: src/lib/components/field-editors/multi-select.svelte
 msgid "Untitled"
 msgstr "Untitled"
 
diff --git a/frontend/viewer/src/locales/es.po b/frontend/viewer/src/locales/es.po
@@ -135,6 +135,14 @@ msgstr ""
 msgid "an entry"
 msgstr "una entrada"
 
+#: src/project/browse/filter/PartOfSpeechSelect.svelte
+msgid "Any grammatical info."
+msgstr ""
+
+#: src/project/browse/filter/PartOfSpeechSelect.svelte
+msgid "Any part of speech"
+msgstr ""
+
 #: src/project/browse/filter/SemanticDomainSelect.svelte
 msgid "Any semantic domain"
 msgstr ""
@@ -581,6 +589,7 @@ msgstr "Glosa"
 msgid "Go to {0}"
 msgstr "Visite {0}"
 
+#: src/project/browse/SearchFilter.svelte
 #: src/lib/entry-editor/object-editors/SenseEditorPrimitive.svelte
 msgid "Grammatical info."
 msgstr "Información gramatical."
@@ -898,6 +907,7 @@ msgstr "Pieza"
 msgid "Part of"
 msgstr "Parte de"
 
+#: src/project/browse/SearchFilter.svelte
 #: src/lib/entry-editor/object-editors/SenseEditorPrimitive.svelte
 msgid "Part of speech"
 msgstr "Parte de la oración"
@@ -1248,6 +1258,10 @@ msgstr ""
 #: src/project/browse/EntryView.svelte
 #: src/project/browse/EntryRow.svelte
 #: src/project/browse/EntryMenu.svelte
+#: src/lib/components/field-editors/select.svelte
+#: src/lib/components/field-editors/select.svelte
+#: src/lib/components/field-editors/multi-select.svelte
+#: src/lib/components/field-editors/multi-select.svelte
 msgid "Untitled"
 msgstr "Sin título"
 
diff --git a/frontend/viewer/src/locales/fr.po b/frontend/viewer/src/locales/fr.po
@@ -135,6 +135,14 @@ msgstr ""
 msgid "an entry"
 msgstr "une entrée"
 
+#: src/project/browse/filter/PartOfSpeechSelect.svelte
+msgid "Any grammatical info."
+msgstr ""
+
+#: src/project/browse/filter/PartOfSpeechSelect.svelte
+msgid "Any part of speech"
+msgstr ""
+
 #: src/project/browse/filter/SemanticDomainSelect.svelte
 msgid "Any semantic domain"
 msgstr ""
@@ -581,6 +589,7 @@ msgstr "Glose"
 msgid "Go to {0}"
 msgstr "Aller sur {0}"
 
+#: src/project/browse/SearchFilter.svelte
 #: src/lib/entry-editor/object-editors/SenseEditorPrimitive.svelte
 msgid "Grammatical info."
 msgstr "Informations grammaticales."
@@ -898,6 +907,7 @@ msgstr "Partie"
 msgid "Part of"
 msgstr "Une partie de"
 
+#: src/project/browse/SearchFilter.svelte
 #: src/lib/entry-editor/object-editors/SenseEditorPrimitive.svelte
 msgid "Part of speech"
 msgstr "Partie du discours"
@@ -1248,6 +1258,10 @@ msgstr ""
 #: src/project/browse/EntryView.svelte
 #: src/project/browse/EntryRow.svelte
 #: src/project/browse/EntryMenu.svelte
+#: src/lib/components/field-editors/select.svelte
+#: src/lib/components/field-editors/select.svelte
+#: src/lib/components/field-editors/multi-select.svelte
+#: src/lib/components/field-editors/multi-select.svelte
 msgid "Untitled"
 msgstr "Sans titre"
 
diff --git a/frontend/viewer/src/locales/id.po b/frontend/viewer/src/locales/id.po
@@ -135,6 +135,14 @@ msgstr ""
 msgid "an entry"
 msgstr "sebuah entri"
 
+#: src/project/browse/filter/PartOfSpeechSelect.svelte
+msgid "Any grammatical info."
+msgstr ""
+
+#: src/project/browse/filter/PartOfSpeechSelect.svelte
+msgid "Any part of speech"
+msgstr ""
+
 #: src/project/browse/filter/SemanticDomainSelect.svelte
 msgid "Any semantic domain"
 msgstr ""
@@ -581,6 +589,7 @@ msgstr "Arti Singkat"
 msgid "Go to {0}"
 msgstr "Buka {0}"
 
+#: src/project/browse/SearchFilter.svelte
 #: src/lib/entry-editor/object-editors/SenseEditorPrimitive.svelte
 msgid "Grammatical info."
 msgstr "Info tata bahasa."
@@ -898,6 +907,7 @@ msgstr "Bagian"
 msgid "Part of"
 msgstr "Bagian dari"
 
+#: src/project/browse/SearchFilter.svelte
 #: src/lib/entry-editor/object-editors/SenseEditorPrimitive.svelte
 msgid "Part of speech"
 msgstr "Bagian dari pidato"
@@ -1248,6 +1258,10 @@ msgstr ""
 #: src/project/browse/EntryView.svelte
 #: src/project/browse/EntryRow.svelte
 #: src/project/browse/EntryMenu.svelte
+#: src/lib/components/field-editors/select.svelte
+#: src/lib/components/field-editors/select.svelte
+#: src/lib/components/field-editors/multi-select.svelte
+#: src/lib/components/field-editors/multi-select.svelte
 msgid "Untitled"
 msgstr "Tanpa judul"
 
diff --git a/frontend/viewer/src/locales/ko.po b/frontend/viewer/src/locales/ko.po
@@ -135,6 +135,14 @@ msgstr ""
 msgid "an entry"
 msgstr "항목"
 
+#: src/project/browse/filter/PartOfSpeechSelect.svelte
+msgid "Any grammatical info."
+msgstr ""
+
+#: src/project/browse/filter/PartOfSpeechSelect.svelte
+msgid "Any part of speech"
+msgstr ""
+
 #: src/project/browse/filter/SemanticDomainSelect.svelte
 msgid "Any semantic domain"
 msgstr ""
@@ -581,6 +589,7 @@ msgstr "광택"
 msgid "Go to {0}"
 msgstr "{0}으로 이동"
 
+#: src/project/browse/SearchFilter.svelte
 #: src/lib/entry-editor/object-editors/SenseEditorPrimitive.svelte
 msgid "Grammatical info."
 msgstr "문법 정보."
@@ -898,6 +907,7 @@ msgstr "Part"
 msgid "Part of"
 msgstr "의 일부"
 
+#: src/project/browse/SearchFilter.svelte
 #: src/lib/entry-editor/object-editors/SenseEditorPrimitive.svelte
 msgid "Part of speech"
 msgstr "품사"
@@ -1248,6 +1258,10 @@ msgstr ""
 #: src/project/browse/EntryView.svelte
 #: src/project/browse/EntryRow.svelte
 #: src/project/browse/EntryMenu.svelte
+#: src/lib/components/field-editors/select.svelte
+#: src/lib/components/field-editors/select.svelte
+#: src/lib/components/field-editors/multi-select.svelte
+#: src/lib/components/field-editors/multi-select.svelte
 msgid "Untitled"
 msgstr "제목 없음"
 
diff --git a/frontend/viewer/src/locales/ms.po b/frontend/viewer/src/locales/ms.po
@@ -135,6 +135,14 @@ msgstr ""
 msgid "an entry"
 msgstr "satu entri"
 
+#: src/project/browse/filter/PartOfSpeechSelect.svelte
+msgid "Any grammatical info."
+msgstr ""
+
+#: src/project/browse/filter/PartOfSpeechSelect.svelte
+msgid "Any part of speech"
+msgstr ""
+
 #: src/project/browse/filter/SemanticDomainSelect.svelte
 msgid "Any semantic domain"
 msgstr ""
@@ -581,6 +589,7 @@ msgstr "Glos"
 msgid "Go to {0}"
 msgstr "Pergi ke {0}"
 
+#: src/project/browse/SearchFilter.svelte
 #: src/lib/entry-editor/object-editors/SenseEditorPrimitive.svelte
 msgid "Grammatical info."
 msgstr "Maklumat tatabahasa."
@@ -898,6 +907,7 @@ msgstr "Bahagian"
 msgid "Part of"
 msgstr "Sebahagian daripada"
 
+#: src/project/browse/SearchFilter.svelte
 #: src/lib/entry-editor/object-editors/SenseEditorPrimitive.svelte
 msgid "Part of speech"
 msgstr "Jenis Perkataan"
@@ -1248,6 +1258,10 @@ msgstr ""
 #: src/project/browse/EntryView.svelte
 #: src/project/browse/EntryRow.svelte
 #: src/project/browse/EntryMenu.svelte
+#: src/lib/components/field-editors/select.svelte
+#: src/lib/components/field-editors/select.svelte
+#: src/lib/components/field-editors/multi-select.svelte
+#: src/lib/components/field-editors/multi-select.svelte
 msgid "Untitled"
 msgstr "Tanpa Tajuk"
 
diff --git a/frontend/viewer/src/locales/sw.po b/frontend/viewer/src/locales/sw.po
@@ -135,6 +135,14 @@ msgstr ""
 msgid "an entry"
 msgstr ""
 
+#: src/project/browse/filter/PartOfSpeechSelect.svelte
+msgid "Any grammatical info."
+msgstr ""
+
+#: src/project/browse/filter/PartOfSpeechSelect.svelte
+msgid "Any part of speech"
+msgstr ""
+
 #: src/project/browse/filter/SemanticDomainSelect.svelte
 msgid "Any semantic domain"
 msgstr ""
@@ -581,6 +589,7 @@ msgstr "Glosi"
 msgid "Go to {0}"
 msgstr ""
 
+#: src/project/browse/SearchFilter.svelte
 #: src/lib/entry-editor/object-editors/SenseEditorPrimitive.svelte
 msgid "Grammatical info."
 msgstr ""
@@ -898,6 +907,7 @@ msgstr "Sehemu"
 msgid "Part of"
 msgstr ""
 
+#: src/project/browse/SearchFilter.svelte
 #: src/lib/entry-editor/object-editors/SenseEditorPrimitive.svelte
 msgid "Part of speech"
 msgstr "Sehemu za mazungumzo"
@@ -1248,6 +1258,10 @@ msgstr ""
 #: src/project/browse/EntryView.svelte
 #: src/project/browse/EntryRow.svelte
 #: src/project/browse/EntryMenu.svelte
+#: src/lib/components/field-editors/select.svelte
+#: src/lib/components/field-editors/select.svelte
+#: src/lib/components/field-editors/multi-select.svelte
+#: src/lib/components/field-editors/multi-select.svelte
 msgid "Untitled"
 msgstr ""
 
diff --git a/frontend/viewer/src/project/browse/SearchFilter.svelte b/frontend/viewer/src/project/browse/SearchFilter.svelte
diff --git a/frontend/viewer/src/project/browse/filter/PartOfSpeechSelect.svelte b/frontend/viewer/src/project/browse/filter/PartOfSpeechSelect.svelte
