show faces

web/src/lib/components/album-page/rule-selection-form/face-selection.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { createEventDispatcher, onMount } from 'svelte';
+  import { PeopleResponseDto, PersonResponseDto, api } from '@api';
+  import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
+  import PeopleCard from '$lib/components/faces-page/people-card.svelte';
+
+  let people: PersonResponseDto[] = [];
+
+  const dispatch = createEventDispatcher<{ close: void }>();
+  onMount(async () => {
+    const { data } = await api.personApi.getAllPeople({ withHidden: false });
+
+    people = data.people;
+  });
+</script>
+
+<div class="">
+  <p>Select faces</p>
+  <div>
+    <button on:click={() => dispatch('close')}>CLOSE</button>
+  </div>
+  <div class="flex flex-wrap">
+    {#each people as person}
+      <PeopleCard {person} selectionMode disableContextMenu />
+    {/each}
+  </div>
+</div>

web/src/lib/components/album-page/rule-selection-form/rule-selection-form.svelte

@@ -3,13 +3,15 @@
   import { createEventDispatcher } from 'svelte';
   import type { AlbumResponseDto } from '@api';
   import Plus from 'svelte-material-icons/Plus.svelte';
-  import Button from '../elements/buttons/button.svelte';
-  import Portal from '../shared-components/portal/portal.svelte';
-  import FullScreenModal from '../shared-components/full-screen-modal.svelte';
+  import Button from '../../elements/buttons/button.svelte';
+  import Portal from '../../shared-components/portal/portal.svelte';
+  import FaceSelection from './face-selection.svelte';
+  import { fly } from 'svelte/transition';
 
   export let album: AlbumResponseDto;
 
   let peopleSelection = false;
+  let locationSelection = false;
 
   const dispatch = createEventDispatcher<{ close: void }>();
 </script>
@@ -46,7 +48,7 @@
       <div class="mt-4">
         <button
           class="immich-text-primary border-1 flex w-full place-content-center place-items-center rounded-3xl border border-gray-300 py-2 hover:bg-gray-500/20 dark:border-gray-500"
-          on:click={() => dispatch('select-location')}
+          on:click={() => (locationSelection = true)}
         >
           <Plus size="24" />
         </button>
@@ -80,11 +82,11 @@
 
 <Portal target="body">
   {#if peopleSelection}
-    <section>
-      <div class="absolute left-0 top-0 z-[10000] h-screen w-screen bg-white/90">
-        Try and trye
-        <button on:click={() => (peopleSelection = false)}>Close</button>
-      </div>
+    <section
+      transition:fly={{ y: 500 }}
+      class="absolute left-0 top-0 z-[10000] h-full min-h-max w-full overflow-scroll bg-white/90"
+    >
+      <FaceSelection on:close={() => (peopleSelection = false)} />
     </section>
   {/if}
 </Portal>

web/src/lib/components/faces-page/people-card.svelte

@@ -9,8 +9,11 @@
   import { createEventDispatcher } from 'svelte';
 
   export let person: PersonResponseDto;
+  export let selectionMode = false;
+  export let disableContextMenu = false;
 
   let showContextMenu = false;
+
   let dispatch = createEventDispatcher();
 
   const onChangeNameClicked = () => {
@@ -27,7 +30,7 @@
 </script>
 
 <div id="people-card" class="relative">
-  <a href="/people/{person.id}" draggable="false">
+  <a href={!selectionMode ? '/people/{person.id}' : ''} draggable="false">
     <div class="h-48 w-48 rounded-xl brightness-95 filter">
       <ImageThumbnail shadow url={api.getPeopleThumbnailUrl(person.id)} altText={person.name} widthStyle="100%" />
     </div>
@@ -38,26 +41,28 @@
     {/if}
   </a>
 
-  <button
-    class="absolute right-2 top-2 z-20"
-    on:click|stopPropagation|preventDefault={() => {
-      showContextMenu = !showContextMenu;
-    }}
-    data-testid="context-button-parent"
-    id={`icon-${person.id}`}
-  >
-    <IconButton color="transparent-primary">
-      <DotsVertical size="20" />
-    </IconButton>
+  {#if !disableContextMenu}
+    <button
+      class="absolute right-2 top-2 z-20"
+      on:click|stopPropagation|preventDefault={() => {
+        showContextMenu = !showContextMenu;
+      }}
+      data-testid="context-button-parent"
+      id={`icon-${person.id}`}
+    >
+      <IconButton color="transparent-primary">
+        <DotsVertical size="20" />
+      </IconButton>
 
-    {#if showContextMenu}
-      <ContextMenu on:outclick={() => (showContextMenu = false)}>
-        <MenuOption on:click={() => onHideFaceClicked()} text="Hide face" />
-        <MenuOption on:click={() => onChangeNameClicked()} text="Change name" />
-        <MenuOption on:click={() => onMergeFacesClicked()} text="Merge faces" />
-      </ContextMenu>
-    {/if}
-  </button>
+      {#if showContextMenu}
+        <ContextMenu on:outclick={() => (showContextMenu = false)}>
+          <MenuOption on:click={() => onHideFaceClicked()} text="Hide face" />
+          <MenuOption on:click={() => onChangeNameClicked()} text="Change name" />
+          <MenuOption on:click={() => onMergeFacesClicked()} text="Merge faces" />
+        </ContextMenu>
+      {/if}
+    </button>
+  {/if}
 </div>
 
 {#if showContextMenu}

web/src/routes/(user)/albums/[albumId]/+page.svelte

@@ -23,7 +23,7 @@
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
-  import RuleSelection from '$lib/components/album-page/rule-selection.svelte';
+  import RuleSelection from '$lib/components/album-page/rule-selection-form/rule-selection-form.svelte';
   import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
   import { AppRoute, dateFormats } from '$lib/constants';
   import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';