pr feedback

web/src/lib/components/faces-page/merge-suggestion-modal.svelte

@@ -1,20 +1,14 @@
 <script lang="ts">
   import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
   import { api, type PersonResponseDto } from '@api';
-  import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+  import { createEventDispatcher } from 'svelte';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
   import Button from '../elements/buttons/button.svelte';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import { mdiArrowLeft, mdiClose, mdiMerge } from '@mdi/js';
   import Icon from '$lib/components/elements/icon.svelte';
-  import { browser } from '$app/environment';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
 
-  const dispatch = createEventDispatcher<{
-    reject: void;
-    confirm: [PersonResponseDto, PersonResponseDto];
-    close: void;
-  }>();
+  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
 
   export let personMerge1: PersonResponseDto;
   export let personMerge2: PersonResponseDto;
@@ -25,19 +19,14 @@
   let changeFocus = false;
   let buttonNo: HTMLButtonElement;
   let buttonYes: HTMLButtonElement;
+
   const title = personMerge2.name;
 
-  const onKeyboardPress = (event: KeyboardEvent) => handleKeyboardPress(event);
-
-  onMount(() => {
-    document.addEventListener('keydown', onKeyboardPress);
-  });
-
-  onDestroy(() => {
-    if (browser) {
-      document.removeEventListener('keydown', onKeyboardPress);
-    }
-  });
+  const dispatch = createEventDispatcher<{
+    reject: void;
+    confirm: [PersonResponseDto, PersonResponseDto];
+    close: void;
+  }>();
 
   const handleKeyboardPress = (event: KeyboardEvent) => {
     if (!$showAssetViewer) {
@@ -68,6 +57,8 @@
   };
 </script>
 
+<svelte:document on:keypress={handleKeyboardPress} />
+
 <FullScreenModal on:clickOutside={() => dispatch('close')}>
   <div class="flex h-full w-full place-content-center place-items-center overflow-hidden">
     <div

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

@@ -30,7 +30,7 @@
   import { websocketStore } from '$lib/stores/websocket';
   import { handleError } from '$lib/utils/handle-error';
   import { AssetResponseDto, PersonResponseDto, api } from '@api';
-  import { onDestroy, onMount } from 'svelte';
+  import { onMount } from 'svelte';
   import type { PageData } from './$types';
   import { clickOutside } from '$lib/utils/click-outside';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
@@ -38,7 +38,6 @@
   import { mdiPlus, mdiDotsVertical, mdiArrowLeft } from '@mdi/js';
   import { isExternalUrl } from '$lib/utils/navigation';
   import { searchNameLocal } from '$lib/utils/person';
-  import { browser } from '$app/environment';
 
   export let data: PageData;
 
@@ -104,10 +103,7 @@
     }
   }
 
-  const onKeyboardPress = (event: KeyboardEvent) => handleKeyboardPress(event);
-
   onMount(() => {
-    document.addEventListener('keydown', onKeyboardPress);
     const action = $page.url.searchParams.get('action');
     const getPreviousRoute = $page.url.searchParams.get('previousRoute');
     if (getPreviousRoute && !isExternalUrl(getPreviousRoute)) {
@@ -118,12 +114,6 @@
     }
   });
 
-  onDestroy(() => {
-    if (browser) {
-      document.removeEventListener('keydown', onKeyboardPress);
-    }
-  });
-
   const handleKeyboardPress = (event: KeyboardEvent) => {
     if (suggestedPeople.length === 0) {
       return;
@@ -390,6 +380,8 @@
   };
 </script>
 
+<svelte:document on:keydown={handleKeyboardPress} />
+
 {#if viewMode === ViewMode.SUGGEST_MERGE}
   <MergeSuggestionModal
     {personMerge1}