Re-work invite links

src/app/components/RelaySummary.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import {gt} from "@welshman/lib"
+  import {deriveRelay} from "@welshman/app"
+  import Icon from "@lib/components/Icon.svelte"
+  import RelayName from "@app/components/RelayName.svelte"
+  import RelayDescription from "@app/components/RelayDescription.svelte"
+  import ProfileCircles from "@app/components/ProfileCircles.svelte"
+  import {membersByUrl, userRoomsByUrl} from "@app/core/state"
+
+  type Props = {
+    url: string
+  }
+
+  const {url}: Props = $props()
+  const relay = deriveRelay(url)
+</script>
+
+<div class="col-4 text-left">
+  <div class="col-2">
+    <div class="relative flex gap-4">
+      <div class="relative">
+        <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?.profile?.icon}
+              <img alt="" src={$relay.profile.icon} />
+            {:else}
+              <Icon icon="ghost" size={5} />
+            {/if}
+          </div>
+        </div>
+        {#if $userRoomsByUrl.has(url)}
+          <div
+            class="tooltip absolute -right-1 -top-1 h-5 w-5 rounded-full bg-primary"
+            data-tip="You are already a member of this space.">
+            <Icon icon="check-circle" class="scale-110" />
+          </div>
+        {/if}
+      </div>
+      <div>
+        <h2 class="ellipsize whitespace-nowrap text-xl">
+          <RelayName {url} />
+        </h2>
+        <p class="text-sm opacity-75">{url}</p>
+      </div>
+    </div>
+    <RelayDescription {url} />
+  </div>
+  {#if gt($membersByUrl.get(url)?.size, 0)}
+    <div class="row-2 card2 card2-sm bg-alt">
+      Members:
+      <ProfileCircles pubkeys={Array.from($membersByUrl.get(url) || [])} />
+    </div>
+  {/if}
+</div>