Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-06-02 05:04:23 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): show full date when hovering over photos date groups (#16561)

Browse Source 
* fix(web): Update asset grid date group titles to show full date

* Fix formatting
This commit is contained in:
Snowknight26 2025-03-11 06:18:29 -05:00 committed by GitHub
parent e0a09f2ea0
commit decc878267
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/src/lib/components/photos-page/asset-date-group.svelte
View File

@ -4,7 +4,12 @@
import Skeleton from '$lib/components/photos-page/skeleton.svelte'; import Skeleton from '$lib/components/photos-page/skeleton.svelte';
import { AssetBucket, type AssetStore, type Viewport } from '$lib/stores/assets-store.svelte'; import { AssetBucket, type AssetStore, type Viewport } from '$lib/stores/assets-store.svelte';
import { navigate } from '$lib/utils/navigation'; import { navigate } from '$lib/utils/navigation';
import { findTotalOffset, type DateGroup, type ScrollTargetListener } from '$lib/utils/timeline-util'; import {
findTotalOffset,
type DateGroup,
type ScrollTargetListener,
getDateLocaleString,
} from '$lib/utils/timeline-util';
import type { AssetResponseDto } from '@immich/sdk'; import type { AssetResponseDto } from '@immich/sdk';
import { mdiCheckCircle, mdiCircleOutline } from '@mdi/js'; import { mdiCheckCircle, mdiCircleOutline } from '@mdi/js';
import { onDestroy } from 'svelte'; import { onDestroy } from 'svelte';
@ -167,7 +172,7 @@
</div> </div>
{/if} {/if}
<span class="w-full truncate first-letter:capitalize" title={dateGroup.groupTitle}> <span class="w-full truncate first-letter:capitalize" title={getDateLocaleString(dateGroup.date)}>
{dateGroup.groupTitle} {dateGroup.groupTitle}
</span> </span>
</div> </div>

16
web/src/lib/utils/timeline-util.ts
View File

@ -4,7 +4,7 @@ import { emptyGeometry, type CommonJustifiedLayout } from '$lib/utils/layout-uti
import type { AssetResponseDto } from '@immich/sdk'; import type { AssetResponseDto } from '@immich/sdk';
import { groupBy, memoize, sortBy } from 'lodash-es'; import { groupBy, memoize, sortBy } from 'lodash-es';
import { DateTime } from 'luxon'; import { DateTime, type LocaleOptions } from 'luxon';
import { get } from 'svelte/store'; import { get } from 'svelte/store';
export type DateGroup = { export type DateGroup = {
@ -40,13 +40,6 @@ export const fromLocalDateTime = (localDateTime: string) =>
export const fromDateTimeOriginal = (dateTimeOriginal: string, timeZone: string) => export const fromDateTimeOriginal = (dateTimeOriginal: string, timeZone: string) =>
DateTime.fromISO(dateTimeOriginal, { zone: timeZone }); DateTime.fromISO(dateTimeOriginal, { zone: timeZone });
export const groupDateFormat: Intl.DateTimeFormatOptions = {
weekday: 'short',
month: 'short',
day: 'numeric',
year: 'numeric',
};
export function formatGroupTitle(_date: DateTime): string { export function formatGroupTitle(_date: DateTime): string {
if (!_date.isValid) { if (!_date.isValid) {
return _date.toString(); return _date.toString();
@ -78,14 +71,17 @@ export function formatGroupTitle(_date: DateTime): string {
}); });
} }
return date.toLocaleString(groupDateFormat); return getDateLocaleString(date);
} }
export const getDateLocaleString = (date: DateTime, opts?: LocaleOptions): string =>
date.toLocaleString(DateTime.DATE_MED_WITH_WEEKDAY, opts);
const formatDateGroupTitle = memoize(formatGroupTitle); const formatDateGroupTitle = memoize(formatGroupTitle);
export function splitBucketIntoDateGroups(bucket: AssetBucket, locale: string | undefined): DateGroup[] { export function splitBucketIntoDateGroups(bucket: AssetBucket, locale: string | undefined): DateGroup[] {
const grouped = groupBy(bucket.assets, (asset) => const grouped = groupBy(bucket.assets, (asset) =>
fromLocalDateTime(asset.localDateTime).toLocaleString(groupDateFormat, { locale }), getDateLocaleString(fromLocalDateTime(asset.localDateTime), { locale }),
); );
const sorted = sortBy(grouped, (group) => bucket.assets.indexOf(group[0])); const sorted = sortBy(grouped, (group) => bucket.assets.indexOf(group[0]));
return sorted.map((group) => { return sorted.map((group) => {