refactor(web): list navigation with keyboard (#7987)

web/src/routes/(user)/people/[personId]/+page.svelte

@@ -47,6 +47,7 @@
   import { mdiArrowLeft, mdiDotsVertical, mdiPlus } from '@mdi/js';
   import { onMount } from 'svelte';
   import type { PageData } from './$types';
+  import { listNavigation } from '$lib/utils/list-navigation';
 
   export let data: PageData;
 
@@ -95,8 +96,7 @@
    **/
   let searchWord: string;
   let isSearchingPeople = false;
-  let focusedElements: (HTMLButtonElement | null)[] = Array.from({ length: maximumLengthSearchPeople }, () => null);
-  let indexFocus: number | null = null;
+  let suggestionContainer: HTMLDivElement;
 
   const searchPeople = async () => {
     if ((people.length < maximumLengthSearchPeople && name.startsWith(searchWord)) || name === '') {
@@ -122,7 +122,6 @@
   $: {
     if (people) {
       suggestedPeople = name ? searchNameLocal(name, people, 5, data.person.id) : [];
-      indexFocus = null;
     }
   }
 
@@ -143,48 +142,6 @@
     });
   });
 
-  const handleKeyboardPress = (event: KeyboardEvent) => {
-    if (suggestedPeople.length === 0) {
-      return;
-    }
-    if (!$showAssetViewer) {
-      event.stopPropagation();
-      switch (event.key) {
-        case 'ArrowDown': {
-          event.preventDefault();
-          if (indexFocus === null) {
-            indexFocus = 0;
-          } else if (indexFocus === suggestedPeople.length - 1) {
-            indexFocus = 0;
-          } else {
-            indexFocus++;
-          }
-          focusedElements[indexFocus]?.focus();
-          return;
-        }
-        case 'ArrowUp': {
-          if (indexFocus === null) {
-            indexFocus = 0;
-            return;
-          }
-          if (indexFocus === 0) {
-            indexFocus = suggestedPeople.length - 1;
-          } else {
-            indexFocus--;
-          }
-          focusedElements[indexFocus]?.focus();
-
-          return;
-        }
-        case 'Enter': {
-          if (indexFocus !== null) {
-            handleSuggestPeople(suggestedPeople[indexFocus]);
-          }
-        }
-      }
-    }
-  };
-
   const handleEscape = async () => {
     if ($showAssetViewer || viewMode === ViewMode.SUGGEST_MERGE) {
       return;
@@ -401,7 +358,6 @@
   };
 </script>
 
-<svelte:document on:keydown={handleKeyboardPress} />
 {#if viewMode === ViewMode.UNASSIGN_ASSETS}
   <UnMergeFaceSelector
     assetIds={[...$selectedAssets].map((a) => a.id)}
@@ -491,11 +447,12 @@
       {#if viewMode === ViewMode.VIEW_ASSETS || viewMode === ViewMode.SUGGEST_MERGE || viewMode === ViewMode.BIRTH_DATE}
         <!-- Person information block -->
         <div
-          role="button"
           class="relative w-fit p-4 sm:px-6"
-          use:clickOutside
-          on:outclick={handleCancelEditName}
-          on:escape={handleCancelEditName}
+          use:clickOutside={{
+            onOutclick: handleCancelEditName,
+            onEscape: handleCancelEditName,
+          }}
+          use:listNavigation={suggestionContainer}
         >
           <section class="flex w-64 sm:w-96 place-items-center border-black">
             {#if isEditingName}
@@ -550,26 +507,27 @@
                   </div>
                 </div>
               {:else}
-                {#each suggestedPeople as person, index (person.id)}
-                  <button
-                    bind:this={focusedElements[index]}
-                    class="flex w-full border-t border-gray-400 dark:border-immich-dark-gray h-14 place-items-center bg-gray-200 p-2 dark:bg-gray-700 hover:bg-gray-300 hover:dark:bg-[#232932] focus:bg-gray-300 focus:dark:bg-[#232932] {index ===
-                    suggestedPeople.length - 1
-                      ? 'rounded-b-lg border-b'
-                      : ''}"
-                    on:click={() => handleSuggestPeople(person)}
-                  >
-                    <ImageThumbnail
-                      circle
-                      shadow
-                      url={getPeopleThumbnailUrl(person.id)}
-                      altText={person.name}
-                      widthStyle="2rem"
-                      heightStyle="2rem"
-                    />
-                    <p class="ml-4 text-gray-700 dark:text-gray-100">{person.name}</p>
-                  </button>
-                {/each}
+                <div bind:this={suggestionContainer}>
+                  {#each suggestedPeople as person, index (person.id)}
+                    <button
+                      class="flex w-full border-t border-gray-400 dark:border-immich-dark-gray h-14 place-items-center bg-gray-200 p-2 dark:bg-gray-700 hover:bg-gray-300 hover:dark:bg-[#232932] focus:bg-gray-300 focus:dark:bg-[#232932] {index ===
+                      suggestedPeople.length - 1
+                        ? 'rounded-b-lg border-b'
+                        : ''}"
+                      on:click={() => handleSuggestPeople(person)}
+                    >
+                      <ImageThumbnail
+                        circle
+                        shadow
+                        url={getPeopleThumbnailUrl(person.id)}
+                        altText={person.name}
+                        widthStyle="2rem"
+                        heightStyle="2rem"
+                      />
+                      <p class="ml-4 text-gray-700 dark:text-gray-100">{person.name}</p>
+                    </button>
+                  {/each}
+                </div>
               {/if}
             </div>
           {/if}