improve memories ui

pull/28675/head
Ben Beckford 2026-05-31 18:24:18 -07:00
parent 3f1b8e1d9b
commit bb8bfcdf1e
2 changed files with 8 additions and 8 deletions

View File

@ -190,7 +190,7 @@ class MemoryManager {
private async load(page: number) {
if (this.#filters !== undefined) {
const { items, hasNextPage, total } = await searchMemories({ ...this.#filters, page, size: PAGE_SIZE });
const { items, hasNextPage, total } = await searchMemories({ size: PAGE_SIZE, ...this.#filters, page });
this.memories.push(...items);
this.#hasNextPage = hasNextPage;
this.#total = total;
@ -209,13 +209,13 @@ class MemoryManager {
setTimeout(() => {
this.clearCache();
this.#loading = this.load(0);
this.loadNextPage();
// Schedule subsequent events hourly
setInterval(
() => {
this.clearCache();
this.#loading = this.load(0);
this.loadNextPage();
},
60 * 60 * 1000,
);

View File

@ -66,11 +66,11 @@
</div>
{/snippet}
{#if memoryManager.memories.length > 0}
<div class="grid w-full grid-cols-2 gap-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 2xl:grid-cols-7">
<div class="grid w-full grid-cols-2 gap-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 2xl:grid-cols-7">
{#each memoryManager.memories as memory, index (memory.id)}
<a
href={Route.memories({ id: memory.assets[0].id })}
class="item-card relative inline-block aspect-video"
class="item-card relative inline-block aspect-video rounded-xl shadow-md"
bind:this={
() => (index === memoryManager.memories.length - 1 ? lastElement : null),
(e) => {
@ -88,17 +88,17 @@
<img
src={getAssetMediaUrl({ id: memory.assets[0].id })}
alt={$getAltText(toTimelineAsset(memory.assets[0]))}
class="size-full object-cover brightness-75"
class="size-full rounded-xl object-cover brightness-75"
loading="lazy"
/>
<span
class="absolute bottom-2 w-full px-1 text-center text-sm font-medium text-ellipsis text-white capitalize backdrop-blur-[1px] hover:cursor-pointer"
class="absolute bottom-2 w-full px-1 text-center text-sm font-medium text-ellipsis text-white capitalize hover:cursor-pointer"
>
{$memoryLaneTitle(memory)}
</span>
</a>
{/each}
</div>
{:else}{/if}
{/if}
</UserPageLayout>
{/if}