Merge branch 'refs/heads/develop' into new-home-fw-lite

.github/workflows/codeql.yml

@@ -10,6 +10,7 @@ on:
       - "**/*.csproj"
       - "**/*.ts"
       - "**/*.js"
+      - '.github/workflows/codeql.yml'
   schedule:
     - cron: '34 21 * * 2'
 
@@ -38,6 +39,8 @@ jobs:
           build-mode: none
         - language: javascript-typescript
           build-mode: none
+        - language: actions
+          build-mode: none
     steps:
     - name: Checkout repository
       uses: actions/checkout@v4

frontend/viewer/src/ProjectView.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import {AppBar, Button, ProgressCircle} from 'svelte-ux';
   import {
-    mdiArrowCollapseLeft,
     mdiArrowCollapseRight,
+    mdiArrowExpandLeft,
     mdiArrowLeft,
     mdiChatQuestion,
     mdiEyeSettingsOutline,
@@ -154,14 +154,29 @@
   let showOptionsDialog = false;
   let pickedEntry = false;
   let navigateToEntryId = getSearchParam(ViewerSearchParam.EntryId);
+
+  // Makes the back button work for going back to the list view
+  // todo use a lib for this?
+  window.addEventListener('popstate', () => {
+    const currEntryId = getSearchParam(ViewerSearchParam.EntryId);
+    if (!currEntryId) {
+      pickedEntry = false;
+      $selectedEntry = undefined;
+    } else if (currEntryId !== $selectedEntry?.id) {
+      pickedEntry = true;
+      navigateToEntryId = currEntryId;
+      refreshSelection();
+    }
+  });
+
   const selectedEntry = writable<IEntry | undefined>(undefined);
   setContext('selectedEntry', selectedEntry);
   // For some reason reactive syntax doesn't pick up every change, so we need to manually subscribe
   // and we need the extra call to updateEntryIdSearchParam in refreshSelection
   const unsubSelectedEntry = selectedEntry.subscribe(updateEntryIdSearchParam);
   $: { pickedEntry; updateEntryIdSearchParam(); }
   function updateEntryIdSearchParam() {
-    updateSearchParam(ViewerSearchParam.EntryId, navigateToEntryId ?? (pickedEntry ? $selectedEntry?.id : undefined), true);
+    updateSearchParam(ViewerSearchParam.EntryId, navigateToEntryId ?? (pickedEntry ? $selectedEntry?.id : undefined), false);
   }
 
   $: {
@@ -177,6 +192,7 @@
       const entry = $entries.find(e => e.id === navigateToEntryId);
       if (entry) {
         $selectedEntry = entry;
+        pickedEntry = true;
       }
     } else if ($selectedEntry !== undefined) {
       const entry = $entries.find(e => e.id === $selectedEntry!.id);
@@ -185,9 +201,7 @@
       }
     }
 
-    if ($selectedEntry) {
-      pickedEntry = true;
-    } else {
+    if (!$selectedEntry) {
       pickedEntry = false;
       if ($entries?.length > 0)
         $selectedEntry = $entries[0];
@@ -294,8 +308,8 @@
 </div>
 {:else}
 <div class="project-view !flex flex-col PortalTarget" style={spaceForEditorStyle}>
-  <AppBar class="bg-secondary min-h-12 shadow-md">
-    <div slot="title" class="prose">
+  <AppBar class="bg-secondary min-h-12 shadow-md" head={false}>
+    <div slot="title" class="prose whitespace-nowrap">
       <h3>{projectName}</h3>
     </div>
     <Button
@@ -304,35 +318,26 @@
       icon={mdiHome}
       on:click={() => navigate('/')}
     />
-    <div class="flex-grow-0 flex-shrink-0 lg:hidden mx-2 sm:mr-0" class:invisible={!pickedEntry}>
+    <div class="flex-grow-0 flex-shrink-0 lg-view:hidden ml-2" class:invisible={!pickedEntry}>
       <Button icon={mdiArrowLeft} size="sm" iconOnly rounded variant="outline" on:click={() => pickedEntry = false} />
     </div>
     {#if $features.write}
-      <div class="inline-flex flex-grow-0 basis-60 max-sm:hidden mx-2">
+      <div class="inline-flex flex-grow-0 basis-40 max-sm:hidden mx-2 sm-view:basis-10">
         <SaveStatus />
       </div>
     {/if}
 
-    <div class="max-sm:hidden sm:flex-grow"></div>
+    <div class="sm:flex-grow"></div>
     <div class="flex-grow-[2] mx-2">
       <SearchBar on:entrySelected={(e) => navigateToEntry(e.detail.entry, e.detail.search)}
                  createNew={newEntryDialog !== undefined}
                  on:createNew={(e) => openNewEntryDialog(e.detail)} />
     </div>
     <div class="max-sm:hidden flex-grow"></div>
-    <div slot="actions" class="flex items-center gap-2 sm:gap-4 whitespace-nowrap">
+    <div slot="actions" class="flex items-center gap-2 lg-view:gap-4 whitespace-nowrap">
       {#if !readonly}
         <NewEntryDialog bind:this={newEntryDialog} />
       {/if}
-      <Button
-        on:click={() => (showOptionsDialog = true)}
-        size="sm"
-        variant="outline"
-        icon={mdiEyeSettingsOutline}>
-        <div class="hidden md:contents">
-          Configure
-        </div>
-      </Button>
       {#if $features.history}
         <ActivityView {projectName}/>
       {/if}
@@ -351,19 +356,28 @@
           </div>
         </Button>
       {/if}
+      <Button
+        on:click={() => (showOptionsDialog = true)}
+        size="sm"
+        variant="outline"
+        icon={mdiEyeSettingsOutline}>
+        <div class="hidden lg-view:contents">
+          Configure
+        </div>
+      </Button>
     </div>
   </AppBar>
   <main bind:this={editorElem} class="p-4 flex grow">
     <div
-      class="grid flex-grow items-start justify-stretch md:justify-center"
+      class="grid flex-grow items-start justify-stretch lg-view:justify-center"
       style="grid-template-columns: minmax(0, min-content) minmax(0, min-content) minmax(0, min-content);"
     >
-      <div class="w-screen max-w-full lg:w-[500px] lg:min-w-[300px] collapsible-col side-scroller flex" class:lg:!w-[1024px]={expandList} class:lg:max-w-[25vw]={!expandList} class:max-lg:collapse-col={pickedEntry}>
+      <div class="w-screen max-w-full lg-view:w-[500px] lg-view:min-w-[300px] collapsible-col side-scroller flex" class:lg-view:!w-[1024px]={expandList} class:lg-view:max-w-[25vw]={!expandList} class:sm-view:collapse-col={pickedEntry}>
         <EntryList bind:search={$search} entries={$entries} loading={$loadingEntries} bind:expand={expandList} on:entrySelected={() => pickedEntry = true} />
       </div>
-      <div class="max-w-full w-screen lg:w-screen collapsible-col" class:lg:px-6={!expandList} class:max-lg:pr-6={pickedEntry && !readonly} class:lg:collapse-col={expandList} class:max-lg:collapse-col={!pickedEntry}>
+      <div class="max-w-full w-screen lg-view:w-screen collapsible-col overflow-x-visible" class:lg-view:px-6={!expandList} class:sm-view:pr-6={pickedEntry && !readonly} class:lg-view:collapse-col={expandList} class:sm-view:collapse-col={!pickedEntry}>
         {#if $selectedEntry}
-          <div class="mb-6">
+          <div class="sm-form:mb-4 mb-6">
             <DictionaryEntryViewer entry={$selectedEntry} />
           </div>
           <Editor entry={$selectedEntry}
@@ -382,13 +396,15 @@
           </div>
         {/if}
       </div>
-      <div class="side-scroller pl-6 border-l-2 gap-4 flex flex-col col-start-3" class:border-l-2={$selectedEntry && !expandList} class:max-lg:border-l-2={pickedEntry && !readonly} class:max-lg:hidden={!pickedEntry || readonly} class:lg:hidden={expandList}>
-        <div class="hidden" class:sm:hidden={expandList}>
-          <Button icon={collapseActionBar ? mdiArrowCollapseLeft : mdiArrowCollapseRight} class="aspect-square w-10" size="sm" iconOnly rounded variant="outline" on:click={() => collapseActionBar = !collapseActionBar} />
-        </div>
-        <div class="sm:w-[15vw] collapsible-col max-sm:self-center" class:self-center={collapseActionBar} class:lg:collapse-col={expandList} class:w-min={collapseActionBar}>
+      <div class="side-scroller pl-6 border-l-2 gap-4 flex flex-col col-start-3" class:border-l-2={$selectedEntry && !expandList} class:sm-view:border-l-2={pickedEntry && !readonly} class:sm-view:hidden={!pickedEntry || readonly} class:lg-view:hidden={expandList}>
+        {#if $selectedEntry}
+          <div class="sm-form:hidden" class:sm:hidden={expandList}>
+            <Button icon={collapseActionBar ? mdiArrowExpandLeft : mdiArrowCollapseRight} class="text-field-sibling-button" iconOnly rounded variant="outline" on:click={() => collapseActionBar = !collapseActionBar} />
+          </div>
+        {/if}
+        <div class="sm-form:w-auto w-[15vw] collapsible-col max-sm:self-center" class:self-center={collapseActionBar} class:lg-view:collapse-col={expandList} class:!w-min={collapseActionBar}>
           {#if $selectedEntry}
-            <div class="contents" class:lg:hidden={expandList}>
+            <div class="contents" class:lg-view:hidden={expandList}>
               <div class="h-full flex flex-col gap-4 justify-stretch">
                 {#if !readonly}
                   <div class="contents" bind:this={entryActionsElem}>
@@ -404,14 +420,14 @@
                       variant="fill-light"
                       color="info"
                       size="sm">
-                      <img src={flexLogo} alt="FieldWorks logo" class="h-6"/>
-                      <div class="hidden" class:sm:contents={!$entryActionsPortal.collapsed}>
+                      <img src={flexLogo} alt="FieldWorks logo" class="h-6 max-w-fit"/>
+                      <div class="sm-form:hidden" class:hidden={$entryActionsPortal.collapsed}>
                         Open in FieldWorks
                       </div>
                     </Button>
                   </div>
                 {/if}
-                <div class="contents max-sm:hidden" class:hidden={collapseActionBar}>
+                <div class="contents sm-form:hidden" class:hidden={collapseActionBar}>
                   <Toc entry={$selectedEntry} />
                 </div>
               </div>

frontend/viewer/src/app.postcss

@@ -45,9 +45,19 @@
 }
 
 @layer components {
+  .sm-form {
+    grid-template-columns: fit-content(70px) 1fr 1fr;
+  }
+
+  .xs-form {
+    grid-template-columns: fit-content(70px) 1fr;
+  }
+
   .editor-grid {
     display: grid;
     grid-template-columns: 170px fit-content(80px) 1fr;
+    @apply sm-form:sm-form;
+    @apply xs-form:xs-form;
   }
 
   .collapsible-col {
@@ -67,6 +77,7 @@
     width: 0 !important;
     max-width: 0 !important;
     opacity: 0 !important;
+    transition: 0s;
   }
 
   .text-field-sibling-button {
@@ -96,3 +107,7 @@
   max-width: 100%;
   overflow: hidden;
 }
+
+.AppBar :has(> [slot="actions"]) {
+  flex-grow: 0;
+}

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

@@ -46,7 +46,7 @@
 
 <Toggle let:on={open} let:toggleOn let:toggleOff on:toggleOn={load}>
   <Button on:click={toggleOn} icon={mdiHistory} variant="fill-outline" color="info" size="sm">
-    <div class="hidden sm:contents">
+    <div class="hidden lg-view:contents">
       Activity
     </div>
   </Button>

frontend/viewer/src/lib/entry-editor/FieldTitle.svelte

@@ -13,7 +13,7 @@
 
 </script>
 
-<div>
+<div class="field-title">
   <span class="inline-flex items-center relative">
     <span class="name" title={`${id}: ${fieldName({name, id})}`}>
       {fieldName({name, id}, $currentView.i18nKey)}

frontend/viewer/src/lib/entry-editor/field-editors/ComplexFormComponents.svelte

@@ -61,7 +61,7 @@
     <EntryOrSenseItemList bind:value {readonly} on:change={() => dispatch('change', { value })} getEntryId={(e) => e.componentEntryId} getHeadword={(e) => e.componentHeadword}>
       <svelte:fragment slot="actions">
         <Button on:click={() => openPicker = true} icon={mdiPlus} variant="fill-light" color="success" size="sm">
-          <div class="max-sm:hidden">Add Component</div>
+          Add Component
         </Button>
         <EntryOrSensePicker title="Add component to complex form" bind:open={openPicker} on:pick={(e) => addComponent(e.detail)}
           {disableEntry} {disableSense} />

frontend/viewer/src/lib/entry-editor/field-editors/ComplexForms.svelte

@@ -55,7 +55,7 @@
     <EntryOrSenseItemList bind:value {readonly} on:change={() => dispatch('change', { value })} getEntryId={(e) => e.complexFormEntryId} getHeadword={(e) => e.complexFormHeadword}>
       <svelte:fragment slot="actions">
         <Button on:click={() => openPicker = true} icon={mdiPlus} variant="fill-light" color="success" size="sm">
-          <div class="max-sm:hidden">Add Complex Form</div>
+          Add Complex Form
         </Button>
         <EntryOrSensePicker title="Add complex form" bind:open={openPicker} mode="only-entries" on:pick={(e) => addComplexForm(e.detail)}
           {disableEntry} />

frontend/viewer/src/lib/entry-editor/field.postcss

@@ -1,5 +1,5 @@
 .field {
-    @apply grid grid-cols-subgrid col-span-3 items-center mb-4;
+    @apply grid grid-cols-subgrid items-center mb-4;
 
     &.multi-field {
       @apply items-baseline;
@@ -43,4 +43,24 @@
         }
       }
     }
+
+    .field-title, .fields, .ws-field-wrapper, .ws-field, .item-list-field {
+      @apply sm-form:!col-span-full;
+
+      & :has(> .field-container) {
+        @apply sm-form:col-span-2;
+      }
+
+      &.field-title {
+        @apply sm-form:mb-2;
+      }
+
+      &.item-list-field {
+        @apply sm-form:pl-0;
+      }
+
+      &.ws-field > .label {
+        @apply xs-form:text-left;
+      }
+    }
   }

frontend/viewer/src/lib/entry-editor/inputs/CrdtField.svelte

@@ -85,7 +85,7 @@
   {#if unsavedChanges}
     <Tooltip title="Unsaved changes" delay={0} placement="top" offset={4}>
       <span
-        class="absolute -left-5 top-1/2 -translate-y-1/2 bg-blue-700 rounded-full h-2.5 w-2.5"
+        class="absolute -left-3.5 top-1/2 xs-form:bottom-2.5 xs-form:top-auto -translate-y-1/2 bg-blue-700 rounded-full h-2.5 w-2.5"
       ></span>
     </Tooltip>
   {/if}

frontend/viewer/src/lib/entry-editor/object-editors/EntryEditor.svelte

@@ -222,12 +222,12 @@
   <div class="hidden">
     <div class="contents" use:portal={{ target: $entryActionsPortal.target, enabled: !!$entryActionsPortal.target}}>
       <Button on:click={addSense} icon={mdiPlus} variant="fill-light" color="success" size="sm">
-        <div class="hidden" class:sm:contents={!$entryActionsPortal.collapsed}>
+        <div class="sm-form:hidden" class:hidden={$entryActionsPortal.collapsed}>
           Add Sense
         </div>
       </Button>
       <Button on:click={deleteEntry} icon={mdiTrashCanOutline} variant="fill-light" color="danger" size="sm">
-        <div class="hidden" class:sm:contents={!$entryActionsPortal.collapsed}>
+        <div class="sm-form:hidden" class:hidden={$entryActionsPortal.collapsed}>
           Delete Entry
         </div>
       </Button>

frontend/viewer/src/lib/history/HistoryView.svelte

@@ -30,7 +30,7 @@
 </script>
 <Toggle let:on={open} let:toggleOn let:toggleOff on:toggleOn={load}>
   <Button on:click={toggleOn} icon={mdiHistory} variant="fill-light" color="info" size="sm">
-    <div class="hidden" class:sm:contents={!small}>
+    <div class="sm-form:hidden" class:hidden={small}>
       View History
     </div>
   </Button>

frontend/viewer/src/lib/layout/EntryList.svelte

@@ -2,7 +2,7 @@
   import { Button, Icon, InfiniteScroll, ListItem, ProgressCircle, TextField } from 'svelte-ux';
   import type { IEntry } from '$lib/dotnet-types';
   import { firstDefOrGlossVal, headword } from '../utils';
-  import { mdiArrowExpandLeft, mdiArrowExpandRight, mdiBookOpenVariantOutline, mdiBookSearchOutline, mdiClose, mdiFormatListText } from '@mdi/js';
+  import { mdiArrowCollapseLeft, mdiArrowExpandRight, mdiBookOpenVariantOutline, mdiBookSearchOutline, mdiClose, mdiFormatListText } from '@mdi/js';
   import IndexCharacters from './IndexCharacters.svelte';
   import type { Writable } from 'svelte/store';
   import { createEventDispatcher, getContext } from 'svelte';
@@ -76,8 +76,8 @@
       rounded
       on:click={() => dictionaryMode = !dictionaryMode}>
     </Button>
-    <div class="hidden lg:contents">
-      <Button icon={expand ? mdiArrowExpandLeft : mdiArrowExpandRight} variant="outline" iconOnly
+    <div class="hidden lg-view:contents">
+      <Button icon={expand ? mdiArrowCollapseLeft : mdiArrowExpandRight} variant="outline" iconOnly
         class="text-field-sibling-button"
         rounded
         on:click={() => expand = !expand}>

frontend/viewer/src/lib/search-bar/SearchBar.svelte

@@ -79,12 +79,12 @@
   <Field
     classes={{ input: 'my-1 justify-center opacity-60' }}
     class="cursor-pointer">
-    <div class="hidden lg:contents">
+    <div class="hidden lg-view:contents whitespace-nowrap">
       Find entry...
       <span class="ml-2"><Icon data={mdiMagnify} /></span>
       <span class="ml-4"><span class="key">Shift</span>+<span class="key">Shift</span></span>
     </div>
-    <div class="contents lg:hidden">
+    <div class="contents lg-view:hidden">
       <Icon data={mdiBookSearchOutline} />
     </div>
   </Field>

frontend/viewer/src/lib/status/SaveStatus.svelte

@@ -96,7 +96,7 @@
         </div>
       </Popover>
       <Button class="font-normal" color="info" iconOnly rounded="full" icon={statusIcon} on:click={toggle}>
-        <span class="max-md:hidden contents">
+        <span class="sm-view:hidden contents">
           {#if showStatus}
             {#if lastStatus === 'saved-to-disk'}
               <span class="text-sm">Project saved to disk</span>