feat(web): show birthdate on person page (#16772)

* feat(web): show birthdate on person page

* shorten null check

Co-authored-by: Jason Rasmussen <jason@rasm.me>

* directly use birthDate

---------

Co-authored-by: Jason Rasmussen <jason@rasm.me>
Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
Yaros 2025-03-10 15:47:44 +01:00 committed by GitHub
parent 57272904d6
commit f794c3e0df
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 21 additions and 2 deletions

View File

@ -987,6 +987,7 @@
"permanently_deleted_asset": "Permanently deleted asset", "permanently_deleted_asset": "Permanently deleted asset",
"permanently_deleted_assets_count": "Permanently deleted {count, plural, one {# asset} other {# assets}}", "permanently_deleted_assets_count": "Permanently deleted {count, plural, one {# asset} other {# assets}}",
"person": "Person", "person": "Person",
"person_birthdate": "Born on {date}",
"person_hidden": "{name}{hidden, select, true { (hidden)} other {}}", "person_hidden": "{name}{hidden, select, true { (hidden)} other {}}",
"photo_shared_all_users": "Looks like you shared your photos with all users or you don't have any user to share with.", "photo_shared_all_users": "Looks like you shared your photos with all users or you don't have any user to share with.",
"photos": "Photos", "photos": "Photos",

View File

@ -62,6 +62,8 @@
import { onDestroy, onMount } from 'svelte'; import { onDestroy, onMount } from 'svelte';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
import type { PageData } from './$types'; import type { PageData } from './$types';
import { locale } from '$lib/stores/preferences.store';
import { DateTime } from 'luxon';
interface Props { interface Props {
data: PageData; data: PageData;
@ -539,12 +541,28 @@
heightStyle="3.375rem" heightStyle="3.375rem"
/> />
<div <div
class="flex flex-col justify-center text-left px-4 h-14 text-immich-primary dark:text-immich-dark-primary" class="flex flex-col justify-center text-left px-4 text-immich-primary dark:text-immich-dark-primary"
> >
<p class="w-40 sm:w-72 font-medium truncate">{person.name || $t('add_a_name')}</p> <p class="w-40 sm:w-72 font-medium truncate">{person.name || $t('add_a_name')}</p>
<p class="absolute w-fit text-sm text-gray-500 dark:text-immich-gray bottom-0"> <p class="text-sm text-gray-500 dark:text-immich-gray">
{$t('assets_count', { values: { count: numberOfAssets } })} {$t('assets_count', { values: { count: numberOfAssets } })}
</p> </p>
{#if person.birthDate}
<p class="text-sm text-gray-500 dark:text-immich-gray">
{$t('person_birthdate', {
values: {
date: DateTime.fromISO(person.birthDate).toLocaleString(
{
month: 'numeric',
day: 'numeric',
year: 'numeric',
},
{ locale: $locale },
),
},
})}
</p>
{/if}
</div> </div>
</button> </button>
</div> </div>