Bigger mobile stuff, responsive filter options, moved burger btn

.github/workflows/fw-lite.yaml

@@ -147,7 +147,7 @@ jobs:
         run: pnpm exec playwright install --with-deps
       - name: vitest
         working-directory: frontend/viewer
-        run: pnpm run test --reporter=default --reporter=junit --outputFile.junit=test-results/vitest-results.xml
+        run: pnpm run test --retry=2 --reporter=default --reporter=junit --outputFile.junit=test-results/vitest-results.xml
       - name: Publish unit test results
         uses: EnricoMi/publish-unit-test-result-action@8885e273a4343cd7b48eaa72428dea0c3067ea98 # v2.14.0
         if: always()

frontend/viewer/.storybook/preview.ts

@@ -1,5 +1,3 @@
-import '../src/app.postcss';
-
 import FWLiteDecorator, {initSvelteStoryContext} from './decorators/FWLiteDecorator.svelte';
 
 import type {Preview} from '@storybook/svelte-vite';

frontend/viewer/.storybook/vitest.setup.ts

@@ -1,3 +1,4 @@
+import '../src/app.postcss';
 import * as previewAnnotations from './preview';
 
 import {afterAll, afterEach, beforeAll} from 'vitest';

frontend/viewer/src/lib/about/FeedbackDialog.svelte

@@ -32,7 +32,7 @@
           </div>
         </div>
       </Button>
-      <Button variant="ghost" href={config.feedbackUrl} target="_blank" class="gap-4 p-4 h-auto text-base justify-start whitespace-normal">
+      <Button variant="ghost" href={config.feedbackUrl} target="_blank" class="gap-4 p-4 h-auto text-base justify-start whitespace-normal text-start">
         <Icon icon="i-mdi-bug-outline" class="size-10"/>
         <div>
           <div class="font-semibold underline">

frontend/viewer/src/lib/activity/ActivityView.svelte

@@ -57,7 +57,7 @@
   <div class="h-full m-4 grid gap-x-6 gap-y-1 overflow-hidden"
        style="grid-template-rows: auto minmax(0,100%); minmax(min-content, 1fr) minmax(min-content, 2fr); grid-template-columns: 1fr 2fr">
 
-    <SidebarTrigger icon="i-mdi-menu" iconProps={{ class: 'size-5' }} class="aspect-square p-0" size="xs"/>
+    <SidebarTrigger icon="i-mdi-menu" class="aspect-square p-0" />
     <div class="gap-4 overflow-hidden row-start-2">
 
             <VList bind:this={vlist} data={activity.current ?? []}

frontend/viewer/src/lib/components/responsive-popup/responsive-popup.svelte

@@ -1,20 +1,34 @@
 <script lang="ts">
-  import { IsMobile } from '$lib/hooks/is-mobile.svelte';
+  import {IsMobile} from '$lib/hooks/is-mobile.svelte';
   import * as Popover from '$lib/components/ui/popover';
   import * as Drawer from '$lib/components/ui/drawer';
-  import { buttonVariants } from '$lib/components/ui/button';
-  import type {PopoverTriggerProps, WithChildren} from 'bits-ui';
+  import {buttonVariants} from '$lib/components/ui/button';
+  import type {PopoverTriggerProps, WithChildren, WithoutChildren} from 'bits-ui';
   import {Icon} from '../ui/icon';
+  import type {ComponentProps} from 'svelte';
+  import {cn} from '$lib/utils';
 
   type TriggerSnippet = PopoverTriggerProps['child'];
+  type ContentProps = WithoutChildren<ComponentProps<typeof Popover.Content>>;
 
-  let { open = $bindable(false), children, title, trigger }: WithChildren<{ open?: boolean, title?: string, trigger: TriggerSnippet }> = $props();
+  let {
+    open = $bindable(false),
+    children,
+    title,
+    trigger,
+    contentProps,
+  }: WithChildren<{
+    open?: boolean,
+    title?: string,
+    trigger: TriggerSnippet,
+    contentProps?: ContentProps,
+  }> = $props();
 </script>
 
 {#if !IsMobile.value}
   <Popover.Root bind:open>
     <Popover.Trigger child={trigger} />
-    <Popover.Content class="w-64 sm:mr-4">
+    <Popover.Content {...contentProps} class={cn('w-64 mr-4 max-h-[calc(90vh)] overflow-y-auto', contentProps?.class)}>
       <div class="space-y-3">
         {#if title}
           <h3 class="font-medium">{title}</h3>
@@ -29,14 +43,14 @@
 {:else}
   <Drawer.Root bind:open>
     <Drawer.Trigger child={trigger} />
-    <Drawer.Content>
+    <Drawer.Content {...contentProps}>
       <Drawer.Close class={buttonVariants({ variant: 'ghost', size: 'icon', class: 'absolute top-4 right-4 z-10' })}>
         <Icon icon="i-mdi-close" />
       </Drawer.Close>
-      <div class="mx-auto w-full max-w-sm p-4">
+      <div class="mx-auto w-full max-w-sm p-4 overflow-auto overscroll-contain">
         {#if title}
           <Drawer.Header>
-            <Drawer.Title>{title}</Drawer.Title>
+            <Drawer.Title class="text-center">{title}</Drawer.Title>
           </Drawer.Header>
         {/if}
         {#if children}

frontend/viewer/src/lib/components/ui/sidebar/sidebar-menu-button.svelte

@@ -10,9 +10,9 @@
           'bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
       },
       size: {
-        default: 'h-8 text-sm',
-        sm: 'h-7 text-xs',
-        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',
+        default: 'h-12 md:h-8 text-sm',
+        sm: 'h-9 md:h-7 text-xs',
+        lg: 'h-14 md:h-12 text-sm group-data-[collapsible=icon]:!p-0',
       },
     },
     defaultVariants: {

frontend/viewer/src/lib/components/ui/sidebar/sidebar-trigger.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import {Button} from '$lib/components/ui/button/index.js';
-  import {cn} from '$lib/utils.js';
   import type {ComponentProps} from 'svelte';
   import {Icon} from '../icon';
   import {useSidebar} from './context.svelte.js';
@@ -32,7 +31,7 @@
   data-sidebar="trigger"
   variant="ghost"
   size="icon"
-  class={cn(!restProps.size ? 'h-7 w-7' : '', className)}
+  class={className}
   {...restProps}
 >
   <Icon {icon} {...iconProps} />

frontend/viewer/src/locales/en.po

@@ -817,6 +817,11 @@ msgstr "Filter words"
 msgid "Filter..."
 msgstr "Filter..."
 
+#. Header in entry filter panel
+#: src/project/browse/SearchFilter.svelte
+msgid "Filters"
+msgstr "Filters"
+
 #. Relevant view: Classic
 #. Lite view equivalent: "Find word..."
 #. Search field placeholder in picker

frontend/viewer/src/locales/es.po

@@ -822,6 +822,11 @@ msgstr "Filtrar palabras"
 msgid "Filter..."
 msgstr "Filtrar..."
 
+#. Header in entry filter panel
+#: src/project/browse/SearchFilter.svelte
+msgid "Filters"
+msgstr ""
+
 #. Relevant view: Classic
 #. Lite view equivalent: "Find word..."
 #. Search field placeholder in picker

frontend/viewer/src/locales/fr.po

@@ -822,6 +822,11 @@ msgstr "Filtrer mots"
 msgid "Filter..."
 msgstr "Filtrer..."
 
+#. Header in entry filter panel
+#: src/project/browse/SearchFilter.svelte
+msgid "Filters"
+msgstr ""
+
 #. Relevant view: Classic
 #. Lite view equivalent: "Find word..."
 #. Search field placeholder in picker

frontend/viewer/src/locales/id.po

@@ -822,6 +822,11 @@ msgstr "Menyaring kata"
 msgid "Filter..."
 msgstr "Menyaring..."
 
+#. Header in entry filter panel
+#: src/project/browse/SearchFilter.svelte
+msgid "Filters"
+msgstr ""
+
 #. Relevant view: Classic
 #. Lite view equivalent: "Find word..."
 #. Search field placeholder in picker

frontend/viewer/src/locales/ko.po

@@ -822,6 +822,11 @@ msgstr "단어 필터링"
 msgid "Filter..."
 msgstr "필터..."
 
+#. Header in entry filter panel
+#: src/project/browse/SearchFilter.svelte
+msgid "Filters"
+msgstr ""
+
 #. Relevant view: Classic
 #. Lite view equivalent: "Find word..."
 #. Search field placeholder in picker

frontend/viewer/src/locales/ms.po

@@ -822,6 +822,11 @@ msgstr "Tapis perkataan"
 msgid "Filter..."
 msgstr "Tapis..."
 
+#. Header in entry filter panel
+#: src/project/browse/SearchFilter.svelte
+msgid "Filters"
+msgstr ""
+
 #. Relevant view: Classic
 #. Lite view equivalent: "Find word..."
 #. Search field placeholder in picker

frontend/viewer/src/locales/sw.po

@@ -822,6 +822,11 @@ msgstr "Kichuja neno"
 msgid "Filter..."
 msgstr "Kichuja..."
 
+#. Header in entry filter panel
+#: src/project/browse/SearchFilter.svelte
+msgid "Filters"
+msgstr ""
+
 #. Relevant view: Classic
 #. Lite view equivalent: "Find word..."
 #. Search field placeholder in picker

frontend/viewer/src/locales/vi.po

@@ -822,6 +822,11 @@ msgstr "Lọc từ"
 msgid "Filter..."
 msgstr "Lọc..."
 
+#. Header in entry filter panel
+#: src/project/browse/SearchFilter.svelte
+msgid "Filters"
+msgstr ""
+
 #. Relevant view: Classic
 #. Lite view equivalent: "Find word..."
 #. Search field placeholder in picker

frontend/viewer/src/project/ProjectDropdown.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import * as Command from '$lib/components/ui/command';
   import * as Popover from '$lib/components/ui/popover';
-  import { Button } from '$lib/components/ui/button';
-  import { Icon } from '$lib/components/ui/icon';
-  import { cn } from '$lib/utils';
+  import {Button} from '$lib/components/ui/button';
+  import {Icon} from '$lib/components/ui/icon';
+  import {cn} from '$lib/utils';
   import {t} from 'svelte-i18n-lingui';
   import {tick} from 'svelte';
   import flexLogo from '$lib/assets/flex-logo.png';
@@ -77,7 +77,7 @@
         variant="ghost"
         role="combobox"
         aria-expanded={open}
-        class="w-full justify-between overflow-hidden gap-0 paratext:!opacity-100"
+        class="w-full justify-between overflow-hidden gap-0 paratext:!opacity-100 h-12 md:h-10"
         disabled={projectContext.inParatext}
         {...props}
       >

frontend/viewer/src/project/browse/SearchFilter.svelte

@@ -1,12 +1,7 @@
 <script lang="ts">
-  import * as Collapsible from '$lib/components/ui/collapsible';
   import * as Sidebar from '$lib/components/ui/sidebar';
-  import {Icon} from '$lib/components/ui/icon';
   import {ComposableInput} from '$lib/components/ui/input';
   import {t} from 'svelte-i18n-lingui';
-  import {Toggle} from '$lib/components/ui/toggle';
-  import {cn} from '$lib/utils';
-  import {mergeProps} from 'bits-ui';
   import {useProjectStats, useWritingSystemService} from '$project/data';
   import {pt} from '$lib/views/view-text';
   import {useCurrentView} from '$lib/views/view-service';
@@ -22,6 +17,9 @@
   import Label from '$lib/components/ui/label/label.svelte';
   import type {ISemanticDomain, IPartOfSpeech} from '$lib/dotnet-types';
   import {Switch} from '$lib/components/ui/switch';
+  import ResponsivePopup from '$lib/components/responsive-popup/responsive-popup.svelte';
+  import {IsMobile} from '$lib/hooks/is-mobile.svelte';
+  import {Button} from '$lib/components/ui/button';
 
   const stats = useProjectStats();
   const currentView = useCurrentView();
@@ -105,56 +103,64 @@
   {/if}
 {/snippet}
 
-<Collapsible.Root bind:open={filtersExpanded} class={cn(filtersExpanded && 'bg-muted/50 rounded-b')}>
-  <div class="relative">
-    <ComposableInput bind:value={search} {placeholder} autofocus class="px-1">
-      {#snippet before()}
-        <Sidebar.Trigger icon="i-mdi-menu" iconProps={{ class: 'size-5' }} class="aspect-square p-0" size="xs" />
-      {/snippet}
-      {#snippet after()}
-        <Collapsible.Trigger>
-          {#snippet child({props})}
-            <Toggle {...mergeProps(props, { class: 'aspect-square' })} aria-label={$t`Toggle filters`} size="xs">
-              <Icon icon={gridifyFilter ? 'i-mdi-filter' : 'i-mdi-filter-outline'} class="size-5" />
-            </Toggle>
-          {/snippet}
-        </Collapsible.Trigger>
-      {/snippet}
-    </ComposableInput>
-  </div>
-  <Collapsible.Content class="p-2 mb-2 space-y-2 max-h-[calc(65vh-3rem)] overflow-y-auto">
-    <div class="flex flex-col">
-      <Label class="p-2">{$t`Specific field`}</Label>
-      <div class="flex flex-col @md/list:flex-row gap-2 items-stretch">
-        <div class="flex flex-row gap-2 flex-1">
-          <!-- Field Picker -->
-          <FieldSelect bind:value={selectedField} />
-          <!-- Writing System Picker -->
-          <WsSelect bind:value={selectedWs} wsType={selectedField?.ws} />
+<div class="flex items-center gap-0.5">
+  <Sidebar.Trigger icon="i-mdi-menu" class="aspect-square p-0" />
+  <ComposableInput bind:value={search} {placeholder} autofocus class="px-1 items-center overflow-x-hidden h-12 md:h-10">
+    {#snippet after()}
+      <ResponsivePopup
+        bind:open={filtersExpanded}
+        title={$t`Filters`}
+        contentProps={{
+          side: 'right', align: 'start', sideOffset: 10, alignOffset: -4,
+          class: 'md:w-96'
+        }}
+      >
+        {#snippet trigger({ props })}
+          <Button {...props} variant="ghost"
+            size={IsMobile.value ? 'sm-icon' : 'xs-icon'}
+            icon={gridifyFilter ? 'i-mdi-filter' : 'i-mdi-filter-outline'}
+            aria-label={$t`Toggle filters`} />
+        {/snippet}
+        <div class="space-y-4">
+          <div class="flex flex-col">
+            <Label class="p-2">{$t`Specific field`}</Label>
+            <div class="flex flex-col gap-2 items-stretch">
+              <div class="flex flex-row gap-2 flex-1">
+                <!-- Field Picker -->
+                <FieldSelect bind:value={selectedField} />
+                <!-- Writing System Picker -->
+                <WsSelect bind:value={selectedWs} wsType={selectedField?.ws} />
+              </div>
+              <div class="flex flex-row gap-2 flex-1">
+                <OpFilter bind:value={filterOp} />
+                <Input
+                  bind:value={fieldFilterValue}
+                  placeholder={$t`Filter for...`}
+                  class="flex-1"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="flex flex-col">
+            <Label class="p-2">{$t`Semantic domain`}</Label>
+            <SemanticDomainSelect bind:value={semanticDomain} />
+            <Switch
+              class="mt-1.5"
+              disabled={!semanticDomain}
+              bind:checked={includeSubDomains}
+              label={$t`Include subdomains`}
+            />
+          </div>
+          <div class="flex flex-col">
+            <Label class="p-2">{pt($t`Grammatical info.`, $t`Part of speech`, $currentView)}</Label>
+            <PartOfSpeechSelect bind:value={partOfSpeech} />
+          </div>
+          <div class="flex flex-col">
+            <Label class="p-2">{$t`Incomplete entries`}</Label>
+            <MissingSelect bind:value={missingField} />
+          </div>
         </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`Filter for...`}
-            class="flex-1"
-          />
-        </div>
-      </div>
-    </div>
-    <div class="flex flex-col">
-      <Label class="p-2">{$t`Semantic domain`}</Label>
-      <SemanticDomainSelect bind:value={semanticDomain} />
-      <Switch class="mt-1.5" disabled={!semanticDomain} bind:checked={includeSubDomains} label={$t`Include subdomains`} />
-    </div>
-    <div class="flex flex-col">
-      <Label class="p-2">{pt($t`Grammatical info.`, $t`Part of speech`, $currentView)}</Label>
-      <PartOfSpeechSelect bind:value={partOfSpeech} />
-    </div>
-    <div class="flex flex-col">
-      <Label class="p-2">{$t`Incomplete entries`}</Label>
-      <MissingSelect bind:value={missingField} />
-    </div>
-  </Collapsible.Content>
-</Collapsible.Root>
+      </ResponsivePopup>
+    {/snippet}
+  </ComposableInput>
+</div>

frontend/viewer/src/project/tasks/TasksView.svelte

@@ -27,7 +27,7 @@ const selectedTaskStorageKey = 'selectedTaskId';
 
 <div class="flex flex-col h-full p-4 gap-4">
   <div class="flex flex-row items-center">
-    <SidebarTrigger icon="i-mdi-menu" iconProps={{ class: 'size-5' }} class="aspect-square p-0 mr-2" size="xs"/>
+    <SidebarTrigger icon="i-mdi-menu" class="aspect-square p-0 mr-2" />
 
     <Select.Root bind:open type="single" bind:value={selectedTaskId.current}>
       <Select.Trigger>{$t`Task ${selectedTask?.subject ?? ''}`}</Select.Trigger>