From 45397e7fb8da141f71642a7b082353b03e6ef3d2 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Thu, 5 Jun 2025 13:37:50 -0700
Subject: [PATCH] Show image link if image fails to load

---
 src/app/components/ContentLinkBlock.svelte      |  2 +-
 src/app/components/ContentLinkBlockImage.svelte | 16 +++++++++++++++-
 src/app/components/ProfileBadges.svelte         |  7 +++++--
 src/app/components/SpaceRecentActivity.svelte   |  6 +++---
 src/app/routes.ts                               | 11 ++++++++---
 src/routes/spaces/[relay]/+layout.svelte        |  4 ++--
 6 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/src/app/components/ContentLinkBlock.svelte b/src/app/components/ContentLinkBlock.svelte
index d58ad407..91ae56cd 100644
--- a/src/app/components/ContentLinkBlock.svelte
+++ b/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" />
diff --git a/src/app/components/ContentLinkBlockImage.svelte b/src/app/components/ContentLinkBlockImage.svelte
index 076fe0db..3848c081 100644
--- a/src/app/components/ContentLinkBlockImage.svelte
+++ b/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}
diff --git a/src/app/components/ProfileBadges.svelte b/src/app/components/ProfileBadges.svelte
index dd87ddba..b176a819 100644
--- a/src/app/components/ProfileBadges.svelte
+++ b/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">
diff --git a/src/app/components/SpaceRecentActivity.svelte b/src/app/components/SpaceRecentActivity.svelte
index 02f1e455..d199f6f8 100644
--- a/src/app/components/SpaceRecentActivity.svelte
+++ b/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 = []
diff --git a/src/app/routes.ts b/src/app/routes.ts
index c9da89d2..e45bb584 100644
--- a/src/app/routes.ts
+++ b/src/app/routes.ts
@@ -1,4 +1,5 @@
 import type {Page} from "@sveltejs/kit"
+import * as nip19 from "nostr-tools/nip19"
 import {goto} from "$app/navigation"
 import {nthEq, sleep} from "@welshman/lib"
 import type {TrustedEvent} from "@welshman/util"
@@ -13,7 +14,7 @@ import {
   THREAD,
   EVENT_TIME,
 } from "@welshman/util"
-import {makeChatId, decodeRelay, encodeRelay, userRoomsByUrl, ROOM} from "@app/state"
+import {makeChatId, entityLink, decodeRelay, encodeRelay, userRoomsByUrl, ROOM} from "@app/state"
 
 export const makeSpacePath = (url: string, ...extra: (string | undefined)[]) => {
   let path = `/spaces/${encodeRelay(url)}`
@@ -72,10 +73,12 @@ export const goToEvent = async (event: TrustedEvent) => {
     return await scrollToEvent(event.id)
   }
 
-  const [url] = tracker.getRelays(event.id)
+  const urls = Array.from(tracker.getRelays(event.id))
   const room = getTagValue(ROOM, event.tags)
 
-  if (url) {
+  if (urls.length > 0) {
+    const url = urls[0]
+
     if (event.kind === THREAD) {
       return goto(makeThreadPath(url, event.id))
     }
@@ -105,4 +108,6 @@ export const goToEvent = async (event: TrustedEvent) => {
       }
     }
   }
+
+  window.open(entityLink(nip19.neventEncode({id: event.id, relays: urls})))
 }
diff --git a/src/routes/spaces/[relay]/+layout.svelte b/src/routes/spaces/[relay]/+layout.svelte
index 21e97e40..a77bb30e 100644
--- a/src/routes/spaces/[relay]/+layout.svelte
+++ b/src/routes/spaces/[relay]/+layout.svelte
@@ -2,7 +2,7 @@
   import type {Snippet} from "svelte"
   import {onMount} from "svelte"
   import {page} from "$app/stores"
-  import {ago, WEEK} from "@welshman/lib"
+  import {ago, MONTH} from "@welshman/lib"
   import {GROUP_META, EVENT_TIME, THREAD, COMMENT, MESSAGE} from "@welshman/util"
   import Page from "@lib/components/Page.svelte"
   import SecondaryNav from "@lib/components/SecondaryNav.svelte"
@@ -53,7 +53,7 @@
     checkConnection()
 
     const relays = [url]
-    const since = ago(WEEK)
+    const since = ago(MONTH)
     const controller = new AbortController()
 
     // Load group meta, threads, calendar events, comments, and recent messages