PFP caching

src/interface/components/CloudPanel.svelte

@@ -3,6 +3,7 @@
   import { animate } from "motion";
   import { delay } from "@/seqta/utils/delay.ts";
   import { cloudAuth } from "@/seqta/utils/CloudAuth";
+  import CloudPfpAvatar from "@/interface/components/CloudPfpAvatar.svelte";
 
   const { hidePanel } = $props<{
     hidePanel: () => void;
@@ -105,12 +106,12 @@
         <div class="flex flex-col gap-4">
           <div class="flex items-center gap-3">
             {#if cloudState.user?.pfpUrl}
-              <img
-                src={cloudState.user.pfpUrl}
-                alt=""
+              <CloudPfpAvatar
+                user={cloudState.user}
                 class="w-12 h-12 rounded-full object-cover ring-2 ring-zinc-200 dark:ring-zinc-600"
               />
-            {:else}
+            {/if}
+            {#if !cloudState.user?.pfpUrl}
               <div class="flex items-center justify-center w-12 h-12 rounded-full bg-zinc-300 dark:bg-zinc-600 text-zinc-700 dark:text-zinc-200 font-semibold text-base">
                 {getInitials()}
               </div>

src/interface/components/CloudPfpAvatar.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { resolveCloudPfp } from "@/seqta/utils/cloudPfpCache";
+  import type { CloudUser } from "@/seqta/utils/CloudAuth";
+
+  const { user, class: className = "" } = $props<{
+    user: CloudUser | null | undefined;
+    class?: string;
+  }>();
+
+  let avatarSrc = $state<string | undefined>(undefined);
+  let revokeUrl: string | undefined;
+
+  $effect(() => {
+    const u = user;
+    if (revokeUrl) {
+      URL.revokeObjectURL(revokeUrl);
+      revokeUrl = undefined;
+    }
+    avatarSrc = undefined;
+
+    if (!u?.pfpUrl || !u.id) return;
+
+    let cancelled = false;
+    void resolveCloudPfp(u.id, u.pfpUrl).then((resolved) => {
+      if (cancelled || !resolved) return;
+      if (resolved.fromCache) {
+        revokeUrl = resolved.src;
+      }
+      avatarSrc = resolved.src;
+    });
+
+    return () => {
+      cancelled = true;
+      if (revokeUrl) {
+        URL.revokeObjectURL(revokeUrl);
+        revokeUrl = undefined;
+      }
+    };
+  });
+</script>
+
+{#if avatarSrc}
+  <img src={avatarSrc} alt="" class={className} />
+{/if}

src/interface/components/store/CloudHeader.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { cloudAuth } from "@/seqta/utils/CloudAuth";
+  import CloudPfpAvatar from "@/interface/components/CloudPfpAvatar.svelte";
 
   let { alwaysShowUserName = false, onClick = undefined } = $props<{
     alwaysShowUserName?: boolean;
@@ -72,12 +73,12 @@
   >
     {#if cloudState.isLoggedIn}
       {#if cloudState.user?.pfpUrl}
-        <img
-          src={cloudState.user.pfpUrl}
-          alt=""
+        <CloudPfpAvatar
+          user={cloudState.user}
           class="w-5 h-5 rounded-full object-cover ring-1 ring-zinc-200 dark:ring-zinc-600"
         />
-      {:else}
+      {/if}
+      {#if !cloudState.user?.pfpUrl}
         <div class="flex items-center justify-center w-5 h-5 rounded-full bg-zinc-300 dark:bg-zinc-600 text-zinc-700 dark:text-zinc-200 font-semibold text-[0.6rem]">
           {getInitials()}
         </div>
@@ -111,12 +112,12 @@
           <div class="flex flex-col gap-3">
             <div class="flex items-center gap-3">
               {#if cloudState.user?.pfpUrl}
-                <img
-                  src={cloudState.user.pfpUrl}
-                  alt=""
+                <CloudPfpAvatar
+                  user={cloudState.user}
                   class="w-12 h-12 rounded-full object-cover ring-2 ring-zinc-200 dark:ring-zinc-600"
                 />
-              {:else}
+              {/if}
+              {#if !cloudState.user?.pfpUrl}
                 <div class="flex items-center justify-center w-12 h-12 rounded-full bg-zinc-300 dark:bg-zinc-600 text-zinc-700 dark:text-zinc-200 font-semibold text-base">
                   {getInitials()}
                 </div>