Simplify Avatar component and get rid of extra requests

Signed-off-by: Rūdolfs Ošiņš <rudolfs@osins.org>

src/App/Header/Connect.svelte

@@ -5,7 +5,7 @@
   import { sessionStore, disconnect } from "@app/lib/session";
   import { toClipboard, formatNodeId } from "@app/lib/utils";
 
-  import Avatar from "@app/components/Comment/Avatar.svelte";
+  import Avatar from "@app/components/Avatar.svelte";
   import Button from "@app/components/Button.svelte";
   import Floating from "@app/components/Floating.svelte";
   import Icon from "@app/components/Icon.svelte";
@@ -161,9 +161,7 @@
       {#if $sessionStore}
         <div class="toggle-avatar">
           <div style:height="1.5rem">
-            <Avatar
-              source={$sessionStore.publicKey}
-              title={$sessionStore.publicKey} />
+            <Avatar nodeId={$sessionStore.publicKey} />
           </div>
           <div class="user-id txt-small">
             {formatNodeId($sessionStore.publicKey)}
@@ -196,9 +194,7 @@
       <div class="dropdown">
         <div class="avatar-id-container">
           <div class="dropdown-avatar">
-            <Avatar
-              source={$sessionStore.publicKey}
-              title={$sessionStore.publicKey} />
+            <Avatar nodeId={$sessionStore.publicKey} />
           </div>
           <!-- svelte-ignore a11y-click-events-have-key-events -->
           <div

src/components/Authorship.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Author } from "@app/lib/cobs";
 
-  import Avatar from "@app/components/Comment/Avatar.svelte";
+  import Avatar from "@app/components/Avatar.svelte";
   import { formatNodeId, formatTimestamp } from "@app/lib/utils";
 
   export let author: Author;
@@ -42,7 +42,7 @@
 
 <span class="authorship txt-tiny" title={relativeTimestamp(timestamp)}>
   {#if !noAvatar}
-    <Avatar inline source={author.id} title={author.id} />
+    <Avatar inline nodeId={author.id} />
   {/if}
   <span class:highlight class="id highlight layout-desktop">
     {formatNodeId(author.id)}

src/components/Avatar.svelte

@@ -1,16 +1,9 @@
 <script lang="ts">
   import { createIcon } from "@app/lib/blockies";
-  import { isNodeId } from "@app/lib/utils";
 
-  export let title: string;
-  export let source: string;
+  export let nodeId: string;
   export let inline = false;
 
-  function handleMissingFile() {
-    console.warn("Not able to locate", source);
-    source = createContainer(title);
-  }
-
   function createContainer(source: string) {
     source = source.replace("did:key:", "");
     const seed = source.toLowerCase();
@@ -21,10 +14,6 @@
     });
     return avatar.toDataURL();
   }
-
-  if (isNodeId(source)) {
-    source = createContainer(source);
-  }
 </script>
 
 <style>
@@ -48,9 +37,8 @@
 </style>
 
 <img
-  {title}
-  src={source}
+  title={nodeId}
+  src={createContainer(nodeId)}
   class="avatar"
   alt="avatar"
-  on:error={handleMissingFile}
   class:inline />

src/views/projects/Issue.svelte

@@ -5,7 +5,7 @@
   import type { Item } from "@app/components/Dropdown.svelte";
 
   import Authorship from "@app/components/Authorship.svelte";
-  import Avatar from "@app/components/Comment/Avatar.svelte";
+  import Avatar from "@app/components/Avatar.svelte";
   import Badge from "@app/components/Badge.svelte";
   import Button from "@app/components/Button.svelte";
   import CobHeader from "@app/views/projects/Cob/CobHeader.svelte";
@@ -259,7 +259,7 @@
       validate={item => Boolean(parseNodeId(item))}
       validateAdd={(item, items) => validateAssignee(item, items)}>
       <svelte:fragment let:item>
-        <Avatar inline source={item} title={item} />
+        <Avatar inline nodeId={item} />
         <span>{formatNodeId(item)}</span>
       </svelte:fragment>
     </CobSideInput>

src/views/projects/Issue/New.svelte

@@ -5,7 +5,7 @@
   import * as modal from "@app/lib/modal";
   import AuthenticationErrorModal from "@app/views/session/AuthenticationErrorModal.svelte";
   import Authorship from "@app/components/Authorship.svelte";
-  import Avatar from "@app/components/Comment/Avatar.svelte";
+  import Avatar from "@app/components/Avatar.svelte";
   import Badge from "@app/components/Badge.svelte";
   import Button from "@app/components/Button.svelte";
   import CobHeader from "@app/views/projects/Cob/CobHeader.svelte";
@@ -145,7 +145,7 @@
         validate={item => Boolean(parseNodeId(item))}
         validateAdd={(item, items) => validateTag(item, items)}>
         <svelte:fragment let:item>
-          <Avatar inline source={item} title={item} />
+          <Avatar inline nodeId={item} />
           <span>{formatNodeId(item)}</span>
         </svelte:fragment>
       </CobSideInput>