From bb8bfcdf1eef1790fcdd033f5e10e1a96240f0a1 Mon Sep 17 00:00:00 2001
From: Ben Beckford <ben@benjaminbeckford.com>
Date: Sun, 31 May 2026 18:24:18 -0700
Subject: [PATCH] improve memories ui

---
 web/src/lib/managers/memory-manager.svelte.ts          |  6 +++---
 .../[[photos=photos]]/[[assetId=id]]/+page.svelte      | 10 +++++-----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/web/src/lib/managers/memory-manager.svelte.ts b/web/src/lib/managers/memory-manager.svelte.ts
index b1e14ca5a2..65f2e778f9 100644
--- a/web/src/lib/managers/memory-manager.svelte.ts
+++ b/web/src/lib/managers/memory-manager.svelte.ts
@@ -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,
       );
diff --git a/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 526981426c..a6ea1374e5 100644
--- a/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -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}