From aac029d92b788e0bbaee2926258e299263d3e873 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Ventura?= <andrefv@gmail.com>
Date: Mon, 3 Feb 2025 20:01:05 +0000
Subject: [PATCH] feat(web): merge suggestion modal: focus on Yes button by
 default. (#15827)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(web): merge suggestion modal: focus on Yes button by default.

* refactor(web): merge suggestion modal: use Button from @immich/ui.

---------

Co-authored-by: André Ventura <afv@users.noreply.github.com>
---
 .../faces-page/merge-suggestion-modal.svelte       | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/web/src/lib/components/faces-page/merge-suggestion-modal.svelte b/web/src/lib/components/faces-page/merge-suggestion-modal.svelte
index a4ac76f198..eaf9ab64e9 100644
--- a/web/src/lib/components/faces-page/merge-suggestion-modal.svelte
+++ b/web/src/lib/components/faces-page/merge-suggestion-modal.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
+  import { onMount, tick } from 'svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
   import { getPeopleThumbnailUrl } from '$lib/utils';
   import { type PersonResponseDto } from '@immich/sdk';
+  import { Button } from '@immich/ui';
   import { mdiArrowLeft, mdiMerge } from '@mdi/js';
   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 { t } from 'svelte-i18n';
 
@@ -36,6 +37,11 @@
     [potentialMergePeople[index], personMerge2] = [personMerge2, potentialMergePeople[index]];
     choosePersonToMerge = false;
   };
+
+  onMount(async () => {
+    await tick();
+    document.querySelector<HTMLElement>('#merge-confirm-button')?.focus();
+  });
 </script>
 
 <FullScreenModal title="{$t('merge_people')} - {title}" {onClose}>
@@ -113,7 +119,9 @@
   </div>
 
   {#snippet stickyBottom()}
-    <Button fullwidth color="gray" onclick={onReject}>{$t('no')}</Button>
-    <Button fullwidth onclick={() => onConfirm([personMerge1, personMerge2])}>{$t('yes')}</Button>
+    <Button fullWidth shape="round" color="secondary" onclick={onReject}>{$t('no')}</Button>
+    <Button id="merge-confirm-button" fullWidth shape="round" onclick={() => onConfirm([personMerge1, personMerge2])}>
+      {$t('yes')}
+    </Button>
   {/snippet}
 </FullScreenModal>