045890d Simplify Avatar component and get rid of extra requests — radicle-explorer

modified 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

modified 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)}

added src/components/Avatar.svelte

@@ -0,0 +1,44 @@

 <script lang="ts">
   import { createIcon } from "@app/lib/blockies";
   export let nodeId: string;
   export let inline = false;
   function createContainer(source: string) {
     source = source.replace("did:key:", "");
     const seed = source.toLowerCase();
     const avatar = createIcon({
       seed,
       size: 8,
       scale: 16,
     });
     return avatar.toDataURL();
   }
 </script>
 <style>
   .avatar {
     display: block;
     border-radius: var(--border-radius-round);
     min-width: 1rem;
     min-height: 1rem;
     height: 100%;
     width: inherit;
     object-fit: cover;
     background-size: cover;
     background-repeat: no-repeat;
   }
   .inline {
     display: inline-block !important;
     width: 1rem;
     height: 1rem;
     margin-right: 0.5rem;
   }
 </style>
 <img
   title={nodeId}
   src={createContainer(nodeId)}
   class="avatar"
   alt="avatar"
   class:inline />

deleted src/components/Comment/Avatar.svelte

@@ -1,56 +0,0 @@

 <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 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();
     const avatar = createIcon({
       seed,
       size: 8,
       scale: 16,
     });
     return avatar.toDataURL();
   }
   if (isNodeId(source)) {
     source = createContainer(source);
   }
 </script>
 <style>
   .avatar {
     display: block;
     border-radius: var(--border-radius-round);
     min-width: 1rem;
     min-height: 1rem;
     height: 100%;
     width: inherit;
     object-fit: cover;
     background-size: cover;
     background-repeat: no-repeat;
   }
   .inline {
     display: inline-block !important;
     width: 1rem;
     height: 1rem;
     margin-right: 0.5rem;
   }
 </style>
 <img
   {title}
   src={source}
   class="avatar"
   alt="avatar"
   on:error={handleMissingFile}
   class:inline />

modified 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>

modified 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>