Fix relay updating and relay icons

src/app/components/RelaySummary.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-  import {deriveRelay} from "@welshman/app"
-  import Ghost from "@assets/icons/ghost-smile.svg?dataurl"
   import CheckCircle from "@assets/icons/check-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import RelayName from "@app/components/RelayName.svelte"
+  import RelayIcon from "@app/components/RelayIcon.svelte"
   import RelayDescription from "@app/components/RelayDescription.svelte"
   import ProfileCircles from "@app/components/ProfileCircles.svelte"
   import {deriveSpaceMembers, deriveUserRooms} from "@app/core/state"
@@ -13,7 +12,6 @@
   }
 
   const {url}: Props = $props()
-  const relay = deriveRelay(url)
   const rooms = deriveUserRooms(url)
   const members = deriveSpaceMembers(url)
 </script>
@@ -25,11 +23,7 @@
         <div class="avatar relative">
           <div
             class="center !flex h-12 w-12 min-w-12 rounded-full border-2 border-solid border-base-300 bg-base-300">
-            {#if $relay?.icon}
-              <img alt="" src={$relay.icon} />
-            {:else}
-              <Icon icon={Ghost} size={5} />
-            {/if}
+            <RelayIcon {url} />
           </div>
         </div>
         {#if $rooms.includes(url)}

src/app/components/SpaceDetail.svelte

@@ -6,12 +6,12 @@
   import Pen from "@assets/icons/pen.svg?dataurl"
   import ShieldUser from "@assets/icons/shield-user.svg?dataurl"
   import BillList from "@assets/icons/bill-list.svg?dataurl"
-  import Ghost from "@assets/icons/ghost-smile.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import Button from "@lib/components/Button.svelte"
   import RelayName from "@app/components/RelayName.svelte"
+  import RelayIcon from "@app/components/RelayIcon.svelte"
   import SpaceEdit from "@app/components/SpaceEdit.svelte"
   import SpaceRelayStatus from "@app/components/SpaceRelayStatus.svelte"
   import RelayDescription from "@app/components/RelayDescription.svelte"
@@ -39,11 +39,7 @@
       <div class="avatar relative">
         <div
           class="center !flex h-16 w-16 min-w-16 rounded-full border-2 border-solid border-base-300 bg-base-300">
-          {#if $relay?.icon}
-            <img alt="" src={$relay.icon} />
-          {:else}
-            <Icon icon={Ghost} size={6} />
-          {/if}
+          <RelayIcon {url} size={10} />
         </div>
       </div>
     </div>

src/app/components/SpaceEdit.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {uniqBy, prop, append, ifLet} from "@welshman/lib"
+  import {uniqBy, prop, ifLet} from "@welshman/lib"
   import type {RelayProfile} from "@welshman/util"
   import {displayRelayUrl, ManagementMethod} from "@welshman/util"
   import {manageRelay, relays, fetchRelayProfileDirectly} from "@welshman/app"
@@ -72,8 +72,8 @@
     }
 
     // Force-reload the relay
-    ifLet(await fetchRelayProfileDirectly(url), relay => {
-      relays.update($relays => uniqBy(prop("url"), append(relay, $relays)))
+    ifLet(await fetchRelayProfileDirectly(url), profile => {
+      relays.update($relays => uniqBy(prop("url"), [{...profile, url}, ...$relays]))
     })
 
     pushToast({message: "Your changes have been saved!"})