helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-14 17:36:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: persistent memories (#15953)

Browse source 
feat: memories

refactor

chore: use heart as favorite icon

fix: linting
This commit is contained in:
Jason Rasmussen 2025-02-21 13:31:37 -05:00 • committed by GitHub
parent 502f6e020d
commit d350022dec
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
29 changed files with 585 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

12
web/src/lib/components/photos-page/memory-lane.svelte
View file

@ -2,20 +2,18 @@
import { resizeObserver } from '$lib/actions/resize-observer';
import Icon from '$lib/components/elements/icon.svelte';
import { AppRoute, QueryParameter } from '$lib/constants';
import { memoryStore } from '$lib/stores/memory.store';
import { loadMemories, memoryStore } from '$lib/stores/memory.store';
import { getAssetThumbnailUrl, memoryLaneTitle } from '$lib/utils';
import { getAltText } from '$lib/utils/thumbnail-util';
import { getMemoryLane } from '@immich/sdk';
import { mdiChevronLeft, mdiChevronRight } from '@mdi/js';
import { onMount } from 'svelte';
import { fade } from 'svelte/transition';
import { t } from 'svelte-i18n';
import { fade } from 'svelte/transition';
let shouldRender = $derived($memoryStore?.length > 0);
onMount(async () => {
const localTime = new Date();
$memoryStore = await getMemoryLane({ month: localTime.getMonth() + 1, day: localTime.getDate() });
await loadMemories();
});
let memoryLaneElement: HTMLElement | undefined = $state();
@ -71,7 +69,7 @@
</div>
{/if}
<div class="inline-block" use:resizeObserver={({ width }) => (innerWidth = width)}>
{#each $memoryStore as memory (memory.yearsAgo)}
{#each $memoryStore as memory}
{#if memory.assets.length > 0}
<a
class="memory-card relative mr-8 inline-block aspect-[3/4] md:aspect-video h-[215px] rounded-xl"
@ -84,7 +82,7 @@
draggable="false"
/>
<p class="absolute bottom-2 left-4 z-10 text-lg text-white">
{$memoryLaneTitle(memory.yearsAgo)}
{$memoryLaneTitle(memory)}
</p>
<div
class="absolute left-0 top-0 z-0 h-full w-full rounded-xl bg-gradient-to-t from-black/40 via-transparent to-transparent transition-all hover:bg-black/20"