Fix reactive values in UserHeader

src/lib/components/users/UserHeader.svelte

@@ -1,21 +1,13 @@
-<script lang="ts" context="module">
-    export const defaults: User = {
-        hexpubkey: "",
-        npub: "",
-        loading: true,
-    };
-</script>
-
 <script lang="ts">
     import { getName, type User } from "./type";
 
-    export let user: User = defaults;
+    export let user: User = {
-    let { profile, hexpubkey, loading } = user;
+        hexpubkey: "",
-    let display_name = "";
+        npub: "",
-    $: {
+        loading: true,
-        let { profile, hexpubkey, loading } = user;
+        };
-        display_name = getName(user);
+    $: ({ profile, loading } = user);
-    }
+    $: display_name = getName(user);
 </script>
 
 <div class="flex my-2">
@@ -25,8 +17,8 @@
             class:skeleton={!profile && loading}
             class:bg-neutral={!loading && (!profile || !profile.image)}
         >
-            {#if profile && profile.image}
+            {#if !!profile?.image}
-                <img class="my-0" src={profile.image} alt={display_name} />
+                <img class="my-0" src={profile?.image} alt={display_name} />
             {/if}
         </div>
     </div>