Fix #133 make anon profiles better, include avatar in the link

src/lib/components/util/InlineProfile.svelte

@@ -1,12 +1,13 @@
 <script lang='ts'>
   import { Avatar } from 'flowbite-svelte';
-  import { type NDKUserProfile } from '@nostr-dev-kit/ndk';
+  import { type NDKUserProfile } from "@nostr-dev-kit/ndk";
   import { ndkInstance } from '$lib/ndk';
 
   let { pubkey, title = null } = $props();
 
   const externalProfileDestination = 'https://njump.me/'
   let loading = $state(true);
+  let anon = $state(false);
   let npub = $state('');
 
   let profile = $state<NDKUserProfile | null>(null);
@@ -14,14 +15,16 @@
   let username = $derived(profile?.name);
 
   async function fetchUserData(pubkey: string) {
-    const user = $ndkInstance
-      .getUser({ pubkey: pubkey ?? undefined });
+    let user;
+      user = $ndkInstance
+        .getUser({ pubkey: pubkey ?? undefined });
 
     npub = user.npub;
 
     user.fetchProfile()
       .then(userProfile => {
         profile = userProfile;
+        if (!profile?.name) anon = true;
         loading = false;
       });
   }
@@ -33,17 +36,24 @@
     }
   });
 
-
+  function shortenNpub(long: string|undefined) {
+    if (!long) return '';
+    return long.slice(0, 8) + '…' + long.slice(-4);
+  }
 </script>
 
 {#if loading}
-  <span>…</span>
-{:else if pubkey}
-  <Avatar rounded
+  {title ?? '…'}
+{:else if anon }
+  <a class='underline' href='{externalProfileDestination}{npub}' title={title ?? npub} target='_blank'>{shortenNpub(npub)}</a>
+{:else if npub }
+  <a href='{externalProfileDestination}{npub}' title={title ?? username} target='_blank'>
+    <Avatar rounded
           class='h-6 w-6 mx-1 cursor-pointer inline'
           src={pfp}
           alt={username} />
-  <a class='underline' href='{externalProfileDestination}{npub}' title={title ?? username} target='_blank'>{username}</a>
+    <span class='underline'>{username ?? shortenNpub(npub)}</span>
+  </a>
 {:else}
-  <span>Not found</span>
+  {title ?? pubkey}
 {/if}