bring back a button to create new words from an empty search (#2348)

* bring back a button to create new words from an empty search

* Redesign Add searched word and make vlist more stable

---------

Co-authored-by: Tim Haasdyk <tim_haasdyk@sil.org>

Author: hahn-kev

frontend/viewer/src/locales/en.po

@@ -168,6 +168,12 @@ msgstr "Add part of"
 msgid "Add Sense"
 msgstr "Add Sense"
 
+#. Subtitle of a placeholder row shown at the end of the entry list while searching (also in the no-results state)
+#. The search text is displayed above it as a headword; clicking opens the new-entry dialog pre-filled with that text
+#: src/project/browse/EntriesList.svelte
+msgid "Add to dictionary"
+msgstr "Add to dictionary"
+
 #. Dialog title
 #: src/lib/entry-editor/NewEntryDialog.svelte
 msgid "Add Word"
@@ -1322,6 +1328,7 @@ msgstr "No subject, unable to create a new {0}"
 #. Relevant view: Lite
 #. Classic view equivalent: "No entries found"
 #: src/lib/entry-editor/EntryOrSensePicker.svelte
+#: src/project/browse/EntriesList.svelte
 msgid "No words found"
 msgstr "No words found"
 

frontend/viewer/src/locales/es.po

@@ -173,6 +173,12 @@ msgstr "Añadir parte de"
 msgid "Add Sense"
 msgstr "Añadir acepción"
 
+#. Subtitle of a placeholder row shown at the end of the entry list while searching (also in the no-results state)
+#. The search text is displayed above it as a headword; clicking opens the new-entry dialog pre-filled with that text
+#: src/project/browse/EntriesList.svelte
+msgid "Add to dictionary"
+msgstr ""
+
 #. Dialog title
 #: src/lib/entry-editor/NewEntryDialog.svelte
 msgid "Add Word"
@@ -1327,6 +1333,7 @@ msgstr "No hay tema, no se puede crear un nuevo {0}"
 #. Relevant view: Lite
 #. Classic view equivalent: "No entries found"
 #: src/lib/entry-editor/EntryOrSensePicker.svelte
+#: src/project/browse/EntriesList.svelte
 msgid "No words found"
 msgstr "No se han encontrado palabras"
 

frontend/viewer/src/locales/fr.po

@@ -173,6 +173,12 @@ msgstr "Ajouter une partie de"
 msgid "Add Sense"
 msgstr "Ajouter du sens"
 
+#. Subtitle of a placeholder row shown at the end of the entry list while searching (also in the no-results state)
+#. The search text is displayed above it as a headword; clicking opens the new-entry dialog pre-filled with that text
+#: src/project/browse/EntriesList.svelte
+msgid "Add to dictionary"
+msgstr ""
+
 #. Dialog title
 #: src/lib/entry-editor/NewEntryDialog.svelte
 msgid "Add Word"
@@ -1327,6 +1333,7 @@ msgstr "Aucun sujet, impossible de créer un nouveau {0}"
 #. Relevant view: Lite
 #. Classic view equivalent: "No entries found"
 #: src/lib/entry-editor/EntryOrSensePicker.svelte
+#: src/project/browse/EntriesList.svelte
 msgid "No words found"
 msgstr "Aucun mot trouvé"
 

frontend/viewer/src/locales/id.po

@@ -173,6 +173,12 @@ msgstr "Tambahkan bagian dari"
 msgid "Add Sense"
 msgstr "Tambahkan Pengertian"
 
+#. Subtitle of a placeholder row shown at the end of the entry list while searching (also in the no-results state)
+#. The search text is displayed above it as a headword; clicking opens the new-entry dialog pre-filled with that text
+#: src/project/browse/EntriesList.svelte
+msgid "Add to dictionary"
+msgstr ""
+
 #. Dialog title
 #: src/lib/entry-editor/NewEntryDialog.svelte
 msgid "Add Word"
@@ -1327,6 +1333,7 @@ msgstr "Tidak ada subjek, tidak dapat membuat {0}baru"
 #. Relevant view: Lite
 #. Classic view equivalent: "No entries found"
 #: src/lib/entry-editor/EntryOrSensePicker.svelte
+#: src/project/browse/EntriesList.svelte
 msgid "No words found"
 msgstr "Tidak ada kata yang ditemukan"
 

frontend/viewer/src/locales/ko.po

@@ -173,6 +173,12 @@ msgstr "의 일부를 추가합니다."
 msgid "Add Sense"
 msgstr "센스 추가"
 
+#. Subtitle of a placeholder row shown at the end of the entry list while searching (also in the no-results state)
+#. The search text is displayed above it as a headword; clicking opens the new-entry dialog pre-filled with that text
+#: src/project/browse/EntriesList.svelte
+msgid "Add to dictionary"
+msgstr ""
+
 #. Dialog title
 #: src/lib/entry-editor/NewEntryDialog.svelte
 msgid "Add Word"
@@ -1327,6 +1333,7 @@ msgstr "제목이 없습니다, 새로 만들 수 없습니다 {0}"
 #. Relevant view: Lite
 #. Classic view equivalent: "No entries found"
 #: src/lib/entry-editor/EntryOrSensePicker.svelte
+#: src/project/browse/EntriesList.svelte
 msgid "No words found"
 msgstr "단어를 찾을 수 없습니다."
 

frontend/viewer/src/locales/ms.po

@@ -173,6 +173,12 @@ msgstr "Tambah sebahagian daripada"
 msgid "Add Sense"
 msgstr "Tambah Makna"
 
+#. Subtitle of a placeholder row shown at the end of the entry list while searching (also in the no-results state)
+#. The search text is displayed above it as a headword; clicking opens the new-entry dialog pre-filled with that text
+#: src/project/browse/EntriesList.svelte
+msgid "Add to dictionary"
+msgstr ""
+
 #. Dialog title
 #: src/lib/entry-editor/NewEntryDialog.svelte
 msgid "Add Word"
@@ -1327,6 +1333,7 @@ msgstr "Tiada subjek, tidak dapat membuat {0} baru"
 #. Relevant view: Lite
 #. Classic view equivalent: "No entries found"
 #: src/lib/entry-editor/EntryOrSensePicker.svelte
+#: src/project/browse/EntriesList.svelte
 msgid "No words found"
 msgstr "Tiada perkataan ditemui"
 

frontend/viewer/src/locales/sw.po

@@ -173,6 +173,12 @@ msgstr "Ongeza sehemu ya"
 msgid "Add Sense"
 msgstr "Ongeza Maana"
 
+#. Subtitle of a placeholder row shown at the end of the entry list while searching (also in the no-results state)
+#. The search text is displayed above it as a headword; clicking opens the new-entry dialog pre-filled with that text
+#: src/project/browse/EntriesList.svelte
+msgid "Add to dictionary"
+msgstr ""
+
 #. Dialog title
 #: src/lib/entry-editor/NewEntryDialog.svelte
 msgid "Add Word"
@@ -1327,6 +1333,7 @@ msgstr "Hakuna kigezo, haiwezi kutengeneza {0} mpya"
 #. Relevant view: Lite
 #. Classic view equivalent: "No entries found"
 #: src/lib/entry-editor/EntryOrSensePicker.svelte
+#: src/project/browse/EntriesList.svelte
 msgid "No words found"
 msgstr "Hakuna neno liliyopatikana"
 

frontend/viewer/src/locales/vi.po

@@ -173,6 +173,12 @@ msgstr "Thêm phần của"
 msgid "Add Sense"
 msgstr "Thêm Ý nghĩa (sense)"
 
+#. Subtitle of a placeholder row shown at the end of the entry list while searching (also in the no-results state)
+#. The search text is displayed above it as a headword; clicking opens the new-entry dialog pre-filled with that text
+#: src/project/browse/EntriesList.svelte
+msgid "Add to dictionary"
+msgstr ""
+
 #. Dialog title
 #: src/lib/entry-editor/NewEntryDialog.svelte
 msgid "Add Word"
@@ -1327,6 +1333,7 @@ msgstr "Không có chủ đề, không thể tạo mới {0}"
 #. Relevant view: Lite
 #. Classic view equivalent: "No entries found"
 #: src/lib/entry-editor/EntryOrSensePicker.svelte
+#: src/project/browse/EntriesList.svelte
 msgid "No words found"
 msgstr "Không tìm thấy từ nào"
 

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

@@ -3,6 +3,7 @@
   import {Debounced, watch} from 'runed';
   import EntryRow from './EntryRow.svelte';
   import Button from '$lib/components/ui/button/button.svelte';
+  import ListItem from '$lib/components/ListItem.svelte';
   import {cn} from '$lib/utils';
   import {t} from 'svelte-i18n-lingui';
   import DevContent from '$lib/layout/DevContent.svelte';
@@ -19,6 +20,8 @@
   import Delayed from '$lib/components/Delayed.svelte';
   import {EntryLoaderService} from '$lib/services/entry-loader-service.svelte';
   import {onDestroy, untrack} from 'svelte';
+  import {useViewService} from '$lib/views/view-service.svelte';
+  import {pt} from '$lib/views/view-text';
 
   let {
     search = '',
@@ -49,6 +52,7 @@
   const miniLcmApi = $derived(projectContext.maybeApi);
   const dialogsService = useDialogsService();
   const projectEventBus = useProjectEventBus();
+  const viewService = useViewService();
 
   // The closures maybe need to be created OUTSIDE untrack so they maintain reactivity
   const deps = {
@@ -58,6 +62,7 @@
   };
 
   let entryLoader = $derived(!miniLcmApi ? undefined : untrack(() => new EntryLoaderService(miniLcmApi, deps)));
+  const displayedEntryCount = $derived(entryLoader?.totalCount ?? 0);
 
   // Destroy the previous entryLoader when a new one is created
   watch(
@@ -99,17 +104,24 @@
   // Generate a random number of skeleton rows
   const skeletonRowCount = Math.ceil(Math.random() * 3) + 3;
 
-  // Generate index array for virtual list.
-  // We use a small number of skeletons if the total count is not yet known
-  // to avoid a "white phase" between initial load and list initialization.
-  const indexArray = $derived(
-    entryLoader?.totalCount !== undefined
-      ? Array.from({ length: entryLoader.totalCount }, (_, i) => i)
-      : Array.from({ length: skeletonRowCount }, (_, i) => i)
-  );
+  const canCreateFromSearch = $derived(search?.trim() && !disableNewEntry);
+  const showTerminalCreateRow = $derived(canCreateFromSearch && displayedEntryCount > 0);
 
-  async function handleNewEntry() {
-    const entry = await dialogsService.createNewEntry(undefined, {
+  type ListRow = {key: string, index: number, create?: boolean};
+  const rows: ListRow[] = $derived.by(() => {
+    if (entryLoader?.totalCount === undefined) {
+      return Array.from({length: skeletonRowCount}, (_, i) => ({key: `skeleton-${i}`, index: i}));
+    }
+    const generation = entryLoader.generation;
+    const entryRows: ListRow[] = Array.from({length: displayedEntryCount}, (_, i) => ({key: `${generation}-${i}`, index: i}));
+    if (showTerminalCreateRow) {
+      entryRows.push({key: `${generation}-create`, index: displayedEntryCount, create: true});
+    }
+    return entryRows;
+  });
+
+  async function handleNewEntry(headword: string | undefined = undefined) {
+    const entry = await dialogsService.createNewEntry(headword, {
       publishIn: publication ? [publication] : [],
     }, {
       semanticDomains: semanticDomain ? [semanticDomain] : [],
@@ -173,6 +185,18 @@
 
 </script>
 
+{#snippet newEntryFromSearchRow(className: string = '')}
+  <ListItem
+    class={cn('bg-transparent shadow-none hover:shadow-none border-2 border-dashed border-muted-foreground/40', className)}
+    onclick={() => handleNewEntry(search)}>
+    {#snippet icon()}
+      <Icon icon="i-mdi-plus-thick" class="size-6 text-primary/60" />
+    {/snippet}
+    <span class="font-medium text-2xl">{search}</span>
+    <span class="text-sm text-muted-foreground">{$t`Add to dictionary`}</span>
+  </ListItem>
+{/snippet}
+
 <FabContainer>
   <DevContent>
     <Button
@@ -184,7 +208,7 @@
     />
   </DevContent>
   {#if !disableNewEntry}
-    <PrimaryNewEntryButton onclick={handleNewEntry} shortForm />
+    <PrimaryNewEntryButton onclick={() => handleNewEntry()} shortForm />
   {/if}
 </FabContainer>
 
@@ -197,28 +221,32 @@
   {:else}
     <div class="h-full">
       {#if entryLoader?.totalCount === 0}
-        <div class="flex items-center justify-center h-full text-muted-foreground">
-          <p>{$t`No entries found`}</p>
+        <div class="flex flex-col items-center justify-center h-full gap-4 px-4">
+          <p class="text-muted-foreground">{pt($t`No entries found`, $t`No words found`, viewService.currentView)}</p>
+
+          {#if canCreateFromSearch}
+            {@render newEntryFromSearchRow('max-w-md')}
+          {/if}
         </div>
       {/if}
 
       <VList bind:this={vList}
-            data={indexArray}
+            data={rows}
             class="h-full p-0.5 md:pr-3 after:h-12 after:block"
-            getKey={(index: number) => `${entryLoader?.generation ?? EntryLoaderService.DEFAULT_GENERATION}-${index}`}
+            getKey={(row: ListRow) => row.key}
             bufferSize={450}>
-        {#snippet children(index: number)}
-          {#key entryLoader?.generation ?? EntryLoaderService.DEFAULT_GENERATION}
+        {#snippet children(row: ListRow)}
+          {#if row.create}
+            {@render newEntryFromSearchRow()}
+          {:else}
             <Delayed
-              getCached={() => entryLoader?.getCachedEntryByIndex(index)}
-              load={() => entryLoader?.getOrLoadEntryByIndex(index)}
+              getCached={() => entryLoader?.getCachedEntryByIndex(row.index)}
+              load={() => entryLoader?.getOrLoadEntryByIndex(row.index)}
               delay={250}
             >
               {#snippet children(state)}
                 {#if state.loading || !state.current}
-                  <!-- we want the initial loading state and the first loading entries
-                  to share the same skeletons, so there's no flicker -->
-                  <EntryRow class="mb-2" skeleton={true} />
+                  <EntryRow class="mb-2" skeleton={true}/>
                 {:else}
                   {@const entry = state.current}
                   <EntryMenu {entry} contextMenu>
@@ -231,7 +259,7 @@
                 {/if}
               {/snippet}
             </Delayed>
-          {/key}
+          {/if}
         {/snippet}
       </VList>
     </div>

frontend/viewer/tests/entries-list-component.ts

@@ -25,6 +25,8 @@ export class EntriesListComponent {
   async goto(waitForTestUtils = false): Promise<void> {
     await this.page.goto('/testing/project-view');
     await waitForProjectViewReady(this.page, waitForTestUtils);
+    const renderedRowCount = await this.entryRows.count();
+    expect(renderedRowCount).toBeGreaterThan(0);
   }
 
   async waitForSkeletonsToResolve(): Promise<void> {