From 5f35b3ae7b3931c8ac5f765ffad4f3bf9ca8bb26 Mon Sep 17 00:00:00 2001
From: dvorac20 <dvorac@shefing.com>
Date: Tue, 31 Oct 2023 10:33:17 +0200
Subject: [PATCH 1/7] start

---
 .../routes/(user)/people/[personId]/+page.server.ts    |  3 +++
 web/src/routes/(user)/people/[personId]/+page.svelte   | 10 ++++++++++
 2 files changed, 13 insertions(+)

diff --git a/web/src/routes/(user)/people/[personId]/+page.server.ts b/web/src/routes/(user)/people/[personId]/+page.server.ts
index d81f893abfda7..011b98774dda2 100644
--- a/web/src/routes/(user)/people/[personId]/+page.server.ts
+++ b/web/src/routes/(user)/people/[personId]/+page.server.ts
@@ -10,11 +10,14 @@ export const load = (async ({ locals, parent, params }) => {
 
   const { data: person } = await locals.api.personApi.getPerson({ id: params.personId });
   const { data: statistics } = await locals.api.personApi.getPersonStatistics({ id: params.personId });
+  // const { data: albums } = await locals.api.personApi.getPersonAlbums({ id: params.personId });
+  const { data: albums } = await locals.api.albumApi.getAllAlbums();
 
   return {
     user,
     person,
     statistics,
+    albums,
     meta: {
       title: person.name || 'Person',
     },
diff --git a/web/src/routes/(user)/people/[personId]/+page.svelte b/web/src/routes/(user)/people/[personId]/+page.svelte
index 7c8f2b9f22cde..3501423d6aeb4 100644
--- a/web/src/routes/(user)/people/[personId]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/+page.svelte
@@ -72,6 +72,8 @@
 
   let name: string = data.person.name;
   let suggestedPeople: PersonResponseDto[] = [];
+  $: albums = data.albums;
+  $: console.log('albums', albums);
 
   /**
    * Save the word used to search people name: for example,
@@ -411,6 +413,7 @@
     >
       {#if viewMode === ViewMode.VIEW_ASSETS || viewMode === ViewMode.SUGGEST_MERGE || viewMode === ViewMode.BIRTH_DATE}
         <!-- Face information block -->
+
         <div
           role="button"
           class="relative w-fit p-4 sm:px-6"
@@ -418,6 +421,13 @@
           on:outclick={handleCancelEditName}
           on:escape={handleCancelEditName}
         >
+          <div style="background: aliceblue;">
+            {#if albums.length}
+              {#each albums as album}
+                <div>{album.albumName}</div>
+              {/each}
+            {/if}
+          </div>
           <section class="flex w-64 sm:w-96 place-items-center border-black">
             {#if isEditingName}
               <EditNameInput

From 8957e1fe22641c617c3848c516a55b9ffc3f8f78 Mon Sep 17 00:00:00 2001
From: sarasla <sarahs@shefing.com>
Date: Sun, 5 Nov 2023 13:56:30 +0200
Subject: [PATCH 2/7] people albums

---
 .../(user)/people/[personId]/+page.server.ts  |  3 +-
 .../(user)/people/[personId]/+page.svelte     | 52 ++++++++++++++-----
 2 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/web/src/routes/(user)/people/[personId]/+page.server.ts b/web/src/routes/(user)/people/[personId]/+page.server.ts
index 011b98774dda2..5619d08c8bf14 100644
--- a/web/src/routes/(user)/people/[personId]/+page.server.ts
+++ b/web/src/routes/(user)/people/[personId]/+page.server.ts
@@ -10,8 +10,7 @@ export const load = (async ({ locals, parent, params }) => {
 
   const { data: person } = await locals.api.personApi.getPerson({ id: params.personId });
   const { data: statistics } = await locals.api.personApi.getPersonStatistics({ id: params.personId });
-  // const { data: albums } = await locals.api.personApi.getPersonAlbums({ id: params.personId });
-  const { data: albums } = await locals.api.albumApi.getAllAlbums();
+  const { data: albums } = await locals.api.personApi.getPersonAlbums({ id: params.personId });
 
   return {
     user,
diff --git a/web/src/routes/(user)/people/[personId]/+page.svelte b/web/src/routes/(user)/people/[personId]/+page.svelte
index 3501423d6aeb4..03aa44571af40 100644
--- a/web/src/routes/(user)/people/[personId]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/+page.svelte
@@ -27,7 +27,7 @@
   import { AssetStore } from '$lib/stores/assets.store';
   import { websocketStore } from '$lib/stores/websocket';
   import { handleError } from '$lib/utils/handle-error';
-  import { AssetResponseDto, PersonResponseDto, api } from '@api';
+  import { AssetResponseDto, PersonResponseDto, ThumbnailFormat, api } from '@api';
   import { onMount } from 'svelte';
   import type { PageData } from './$types';
   import { clickOutside } from '$lib/utils/click-outside';
@@ -413,22 +413,17 @@
     >
       {#if viewMode === ViewMode.VIEW_ASSETS || viewMode === ViewMode.SUGGEST_MERGE || viewMode === ViewMode.BIRTH_DATE}
         <!-- Face information block -->
-
+        <!-- pointer-events-none -->
         <div
-          role="button"
-          class="relative w-fit p-4 sm:px-6"
+          style="display: flex;"
+          class="relative w-fit p-4 sm:px-6;"
           use:clickOutside
           on:outclick={handleCancelEditName}
           on:escape={handleCancelEditName}
         >
-          <div style="background: aliceblue;">
-            {#if albums.length}
-              {#each albums as album}
-                <div>{album.albumName}</div>
-              {/each}
-            {/if}
-          </div>
-          <section class="flex w-64 sm:w-96 place-items-center border-black">
+          <section
+            class="flex sm:w-96 place-items-center border-black;"
+          >
             {#if isEditingName}
               <EditNameInput
                 person={data.person}
@@ -438,7 +433,7 @@
                 on:input={searchPeople}
               />
             {:else}
-              <div class="relative">
+              <div class="relative" role='button'>
                 <button
                   class="flex items-center justify-center"
                   title="Edit name"
@@ -469,6 +464,25 @@
               </div>
             {/if}
           </section>
+          <div style="display: flex; ">
+            {#if albums.length}
+              <div class="appersIn">Appears in:</div>
+              {#each albums as album}
+                <div class="marginRight">
+                  <div>
+                    <img
+                      class="h-[70px] w-[70px] rounded object-cover"
+                      src={album.albumThumbnailAssetId &&
+                        api.getAssetThumbnailUrl(album.albumThumbnailAssetId, ThumbnailFormat.Jpeg)}
+                      draggable="false"
+                      alt={album.albumName}
+                      title={`${album.albumName} \n${album.assetCount} occurrence${album.assetCount > 1 ? 's' : ''}`}
+                    />
+                  </div>
+                </div>
+              {/each}
+            {/if}
+          </div>
           {#if isEditingName}
             <div class="absolute z-[999] w-64 sm:w-96">
               {#if isSearchingPeople}
@@ -506,3 +520,15 @@
     </AssetGrid>
   {/key}
 </main>
+
+<style>
+  .marginRight {
+    margin-right: 1.5rem;
+  }
+  .appersIn {
+    margin-right: 1.5rem;
+    margin-left: 1rem;
+    align-items: center;
+    display: flex;
+  }
+</style>

From bea7567d822abbb719fea3b4f83829caf46d991d Mon Sep 17 00:00:00 2001
From: sarasla <sarahs@shefing.com>
Date: Sun, 5 Nov 2023 14:09:53 +0200
Subject: [PATCH 3/7] finish

---
 web/src/lib/components/faces-page/edit-name-input.svelte | 2 +-
 web/src/routes/(user)/people/[personId]/+page.svelte     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/lib/components/faces-page/edit-name-input.svelte b/web/src/lib/components/faces-page/edit-name-input.svelte
index 10a78f2ae5e73..06147494cb571 100644
--- a/web/src/lib/components/faces-page/edit-name-input.svelte
+++ b/web/src/lib/components/faces-page/edit-name-input.svelte
@@ -29,7 +29,7 @@
     heightStyle="2rem"
   />
   <form
-    class="ml-4 flex w-full justify-between gap-16"
+    class="ml-4 flex w-full justify-between gap-8"
     autocomplete="off"
     on:submit|preventDefault={() => dispatch('change', name)}
   >
diff --git a/web/src/routes/(user)/people/[personId]/+page.svelte b/web/src/routes/(user)/people/[personId]/+page.svelte
index 03aa44571af40..feddd95eb5a8f 100644
--- a/web/src/routes/(user)/people/[personId]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/+page.svelte
@@ -422,7 +422,7 @@
           on:escape={handleCancelEditName}
         >
           <section
-            class="flex sm:w-96 place-items-center border-black;"
+            class="flex sm:w-76 place-items-center border-black;"
           >
             {#if isEditingName}
               <EditNameInput
@@ -451,7 +451,7 @@
                     class="flex flex-col justify-center text-left px-4 h-14 text-immich-primary dark:text-immich-dark-primary"
                   >
                     {#if data.person.name}
-                      <p class="w-40 sm:w-72 font-medium truncate">{data.person.name}</p>
+                      <p class="w-40 sm:w-52 font-medium truncate">{data.person.name}</p>
                       <p class="absolute w-fit text-sm text-gray-500 dark:text-immich-gray bottom-0">
                         {`${numberOfAssets} asset${numberOfAssets > 1 ? 's' : ''}`}
                       </p>

From 5bb21b2beffd497250da11da7fc20c47f391ebed Mon Sep 17 00:00:00 2001
From: sarasla <sarahs@shefing.com>
Date: Sun, 5 Nov 2023 14:27:42 +0200
Subject: [PATCH 4/7] remove log

---
 web/src/routes/(user)/people/[personId]/+page.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web/src/routes/(user)/people/[personId]/+page.svelte b/web/src/routes/(user)/people/[personId]/+page.svelte
index feddd95eb5a8f..6df21c52d2cad 100644
--- a/web/src/routes/(user)/people/[personId]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/+page.svelte
@@ -73,7 +73,6 @@
   let name: string = data.person.name;
   let suggestedPeople: PersonResponseDto[] = [];
   $: albums = data.albums;
-  $: console.log('albums', albums);
 
   /**
    * Save the word used to search people name: for example,

From 95c4a27b30f9736e4beb7a24ff64f1d2c47c8eec Mon Sep 17 00:00:00 2001
From: sarasla <sarahs@shefing.com>
Date: Mon, 6 Nov 2023 09:02:09 +0200
Subject: [PATCH 5/7] fix

---
 web/src/lib/components/faces-page/edit-name-input.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/lib/components/faces-page/edit-name-input.svelte b/web/src/lib/components/faces-page/edit-name-input.svelte
index 06147494cb571..8e1314ca1bb24 100644
--- a/web/src/lib/components/faces-page/edit-name-input.svelte
+++ b/web/src/lib/components/faces-page/edit-name-input.svelte
@@ -29,14 +29,14 @@
     heightStyle="2rem"
   />
   <form
-    class="ml-4 flex w-full justify-between gap-8"
+    class="ml-4 flex w-full justify-between"
     autocomplete="off"
     on:submit|preventDefault={() => dispatch('change', name)}
   >
     <!-- svelte-ignore a11y-autofocus -->
     <input
       autofocus
-      class="w-full gap-2 bg-gray-100 dark:bg-gray-700 dark:text-white"
+      class="w-full bg-gray-100 dark:bg-gray-700 dark:text-white"
       type="text"
       placeholder="New name or nickname"
       bind:value={name}

From c8033054d84535761b06052ed797259a9b7f381f Mon Sep 17 00:00:00 2001
From: sarasla <sarahs@shefing.com>
Date: Mon, 6 Nov 2023 09:17:12 +0200
Subject: [PATCH 6/7] fix

---
 .../(user)/people/[personId]/+page.svelte     | 25 ++++++++-----------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/web/src/routes/(user)/people/[personId]/+page.svelte b/web/src/routes/(user)/people/[personId]/+page.svelte
index 6df21c52d2cad..74ff1c152ab5c 100644
--- a/web/src/routes/(user)/people/[personId]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/+page.svelte
@@ -412,7 +412,6 @@
     >
       {#if viewMode === ViewMode.VIEW_ASSETS || viewMode === ViewMode.SUGGEST_MERGE || viewMode === ViewMode.BIRTH_DATE}
         <!-- Face information block -->
-        <!-- pointer-events-none -->
         <div
           style="display: flex;"
           class="relative w-fit p-4 sm:px-6;"
@@ -420,9 +419,7 @@
           on:outclick={handleCancelEditName}
           on:escape={handleCancelEditName}
         >
-          <section
-            class="flex sm:w-76 place-items-center border-black;"
-          >
+          <section class="flex sm:w-76 place-items-center border-black;">
             {#if isEditingName}
               <EditNameInput
                 person={data.person}
@@ -432,7 +429,7 @@
                 on:input={searchPeople}
               />
             {:else}
-              <div class="relative" role='button'>
+              <div class="relative" role="button">
                 <button
                   class="flex items-center justify-center"
                   title="Edit name"
@@ -468,16 +465,14 @@
               <div class="appersIn">Appears in:</div>
               {#each albums as album}
                 <div class="marginRight">
-                  <div>
-                    <img
-                      class="h-[70px] w-[70px] rounded object-cover"
-                      src={album.albumThumbnailAssetId &&
-                        api.getAssetThumbnailUrl(album.albumThumbnailAssetId, ThumbnailFormat.Jpeg)}
-                      draggable="false"
-                      alt={album.albumName}
-                      title={`${album.albumName} \n${album.assetCount} occurrence${album.assetCount > 1 ? 's' : ''}`}
-                    />
-                  </div>
+                  <img
+                    class="h-[70px] w-[70px] rounded object-cover"
+                    src={album.albumThumbnailAssetId &&
+                      api.getAssetThumbnailUrl(album.albumThumbnailAssetId, ThumbnailFormat.Jpeg)}
+                    draggable="false"
+                    alt={album.albumName}
+                    title={`${album.albumName} \n${album.assetCount} occurrence${album.assetCount > 1 ? 's' : ''}`}
+                  />
                 </div>
               {/each}
             {/if}

From 7a8afa1219490ed8be10091eb763e4528a1a8b7f Mon Sep 17 00:00:00 2001
From: sarasla <sarahs@shefing.com>
Date: Mon, 6 Nov 2023 10:01:51 +0200
Subject: [PATCH 7/7] fix

---
 web/src/lib/components/faces-page/edit-name-input.svelte | 1 +
 web/src/routes/(user)/people/[personId]/+page.svelte     | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/web/src/lib/components/faces-page/edit-name-input.svelte b/web/src/lib/components/faces-page/edit-name-input.svelte
index 8e1314ca1bb24..810dcea444d48 100644
--- a/web/src/lib/components/faces-page/edit-name-input.svelte
+++ b/web/src/lib/components/faces-page/edit-name-input.svelte
@@ -36,6 +36,7 @@
     <!-- svelte-ignore a11y-autofocus -->
     <input
       autofocus
+      style=" width: 12rem; margin-right: 0.5rem;"
       class="w-full bg-gray-100 dark:bg-gray-700 dark:text-white"
       type="text"
       placeholder="New name or nickname"
diff --git a/web/src/routes/(user)/people/[personId]/+page.svelte b/web/src/routes/(user)/people/[personId]/+page.svelte
index 74ff1c152ab5c..ccbf95c91dda2 100644
--- a/web/src/routes/(user)/people/[personId]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/+page.svelte
@@ -419,7 +419,7 @@
           on:outclick={handleCancelEditName}
           on:escape={handleCancelEditName}
         >
-          <section class="flex sm:w-76 place-items-center border-black;">
+          <section class="flex w-64 sm:w-96 place-items-center border-black;">
             {#if isEditingName}
               <EditNameInput
                 person={data.person}