Show image link if image fails to load

src/app/components/ContentLinkBlock.svelte

@@ -31,7 +31,7 @@
 </script>
 
 <Link external href={url} class="my-2 block">
-  <div class="overflow-hidden rounded-box leading-[0]">
+  <div class="overflow-hidden rounded-box">
     {#if url.match(/\.(mov|webm|mp4)$/)}
       <video controls src={url} class="max-h-96 object-contain object-center">
         <track kind="captions" />

src/app/components/ContentLinkBlockImage.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
   import {onMount, onDestroy} from "svelte"
+  import {displayUrl} from "@welshman/lib"
   import {getTags, getTagValue, tagsFromIMeta} from "@welshman/util"
   import {decryptFile} from "@welshman/editor"
+  import Icon from "@lib/components/Icon.svelte"
   import {imgproxy} from "@app/state"
 
   const {value, event, ...props} = $props()
@@ -16,6 +18,11 @@
   const nonce = getTagValue("decryption-nonce", meta)
   const encryptionAlgorithm = getTagValue("encryption-algorithm", meta)
 
+  const onError = () => {
+    hasError = true
+  }
+
+  let hasError = $state(false)
   let src = $state(imgproxy(url))
 
   onMount(async () => {
@@ -36,4 +43,11 @@
   })
 </script>
 
-<img alt="" {src} {...props} />
+{#if hasError}
+  <a href={url} class="link-content whitespace-nowrap">
+    <Icon icon="link-round" size={3} class="inline-block" />
+    {displayUrl(url)}
+  </a>
+{:else}
+  <img alt="" {src} onerror={onError} {...props} />
+{/if}

src/app/components/ProfileBadges.svelte

@@ -10,6 +10,7 @@
   import Button from "@lib/components/Button.svelte"
   import ProfileSpaces from "@app/components/ProfileSpaces.svelte"
   import {membershipsByPubkey} from "@app/state"
+  import {goToEvent} from "@app/routes"
   import {pushModal} from "@app/modal"
 
   type Props = {
@@ -23,6 +24,8 @@
   const membership = $derived($membershipsByPubkey.get(pubkey))
   const relays = $derived(getRelayTags(getListTags(membership)))
 
+  const viewEvent = () => goToEvent($events[0]!)
+
   const openSpaces = () => pushModal(ProfileSpaces, {pubkey, url})
 
   onMount(async () => {
@@ -42,9 +45,9 @@
 
 <div class="flex flex-wrap gap-2">
   {#if $events.length > 0}
-    <div class="badge badge-neutral">
+    <Button onclick={viewEvent} class="badge badge-neutral">
       Last active {formatTimestampRelative($events[0].created_at)}
-    </div>
+    </Button>
   {/if}
   {#if relays.length > 0}
     <Button onclick={openSpaces} class="badge badge-neutral">

src/app/components/SpaceRecentActivity.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import {derived} from "svelte/store"
-  import {groupBy, first, last, uniq, avg, overlappingPairs} from "@welshman/lib"
+  import {groupBy, ago, MONTH, first, last, uniq, avg, overlappingPairs} from "@welshman/lib"
   import {formatTimestamp} from "@welshman/lib"
   import {MESSAGE, getTagValue} from "@welshman/util"
   import type {TrustedEvent} from "@welshman/util"
@@ -17,8 +17,8 @@
   }
 
   const {url}: Props = $props()
-
-  const messages = deriveEventsForUrl(url, [{kinds: [MESSAGE]}])
+  const since = ago(MONTH)
+  const messages = deriveEventsForUrl(url, [{kinds: [MESSAGE], since}])
 
   const conversations = derived(messages, $messages => {
     const convs = []