feat(web): face tooltips (#3924)

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -122,18 +122,28 @@
               shadow
               url={api.getPeopleThumbnailUrl(person.id)}
               altText={person.name}
+              title={person.name}
               widthStyle="90px"
               heightStyle="90px"
               thumbhash={null}
             />
-            <p class="mt-1 truncate font-medium">{person.name}</p>
-            <p class="font-light">
-              {#if person.birthDate}
-                Age {Math.floor(
-                  DateTime.fromISO(asset.fileCreatedAt).diff(DateTime.fromISO(person.birthDate), 'years').years,
+            <p class="mt-1 truncate font-medium" title={person.name}>{person.name}</p>
+            {#if person.birthDate}
+              {@const personBirthDate = DateTime.fromISO(person.birthDate)}
+              <p
+                class="font-light"
+                title={personBirthDate.toLocaleString(
+                  {
+                    month: 'long',
+                    day: 'numeric',
+                    year: 'numeric',
+                  },
+                  { locale: $locale },
                 )}
-              {/if}
-            </p>
+              >
+                Age {Math.floor(DateTime.fromISO(asset.fileCreatedAt).diff(personBirthDate, 'years').years)}
+              </p>
+            {/if}
           </a>
         {/each}
       </div>

web/src/lib/components/assets/thumbnail/image-thumbnail.svelte

@@ -7,6 +7,7 @@
 
   export let url: string;
   export let altText: string;
+  export let title: string | null = null;
   export let heightStyle: string | undefined = undefined;
   export let widthStyle: string;
   export let thumbhash: string | null = null;
@@ -27,6 +28,7 @@
   style:opacity={hidden ? '0.5' : '1'}
   src={url}
   alt={altText}
+  {title}
   class="object-cover transition duration-300 {border
     ? 'border-[3px] border-immich-dark-primary/80 hover:border-immich-primary'
     : ''}"
@@ -51,6 +53,7 @@
     style:height={heightStyle}
     src={thumbHashToDataURL(Buffer.from(thumbhash, 'base64'))}
     alt={altText}
+    {title}
     class="absolute top-0 object-cover"
     class:rounded-xl={curve}
     class:shadow-lg={shadow}

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

@@ -43,11 +43,18 @@
 >
   <a href="/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%" />
+      <ImageThumbnail
+        shadow
+        url={api.getPeopleThumbnailUrl(person.id)}
+        altText={person.name}
+        title={person.name}
+        widthStyle="100%"
+      />
     </div>
     {#if person.name}
       <span
         class="text-white-shadow absolute bottom-2 left-0 w-full select-text px-1 text-center font-medium text-white"
+        title={person.name}
       >
         {person.name}
       </span>