Handle deleted threads

src/routes/spaces/[relay]/threads/[id]/+page.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
-  import {sortBy} from "@welshman/lib"
+  import {onMount} from 'svelte'
+  import {sortBy, sleep} from "@welshman/lib"
   import {page} from "$app/stores"
-  import {repository} from "@welshman/app"
+  import {repository, subscribe} from "@welshman/app"
   import type {Thunk} from "@welshman/app"
   import {deriveEvents} from "@welshman/store"
   import Icon from "@lib/components/Icon.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
   import Content from "@app/components/Content.svelte"
   import NoteCard from "@app/components/NoteCard.svelte"
@@ -15,7 +17,8 @@
   const {relay, id} = $page.params
   const url = decodeRelay(relay)
   const event = deriveEvent(id)
-  const replies = deriveEvents(repository, {filters: [{kinds: [REPLY], "#E": [id]}]})
+  const filters = [{kinds: [REPLY], "#E": [id]}]
+  const replies = deriveEvents(repository, {filters})
 
   const back = () => history.back()
 
@@ -30,32 +33,46 @@
   const onReplySubmit = (thunk: Thunk) => {}
 
   let showReply = false
+
+  onMount(() => {
+    const sub = subscribe({filters, relays: [url]})
+
+    return () => sub.close()
+  })
 </script>
 
 <div class="relative flex flex-col-reverse gap-3 p-2">
   <div class="absolute left-[51px] top-20 h-[calc(100%-200px)] w-[2px] bg-neutral" />
-  {#if !showReply}
-    <div class="flex justify-end p-2">
-      <Button class="btn btn-primary" on:click={openReply}>
-        <Icon icon="reply" />
-        Reply to thread
-      </Button>
-    </div>
-  {/if}
-  {#each sortBy(e => -e.created_at, $replies) as reply (reply.id)}
-    <NoteCard event={reply} class="card2 bg-alt z-feature w-full">
-      <div class="ml-12">
-        <Content event={reply} />
+  {#if $event}
+    {#if !showReply}
+      <div class="flex justify-end p-2">
+        <Button class="btn btn-primary" on:click={openReply}>
+          <Icon icon="reply" />
+          Reply to thread
+        </Button>
       </div>
-      <ThreadActions event={reply} {url} />
+    {/if}
+    {#each sortBy(e => -e.created_at, $replies) as reply (reply.id)}
+      <NoteCard event={reply} class="card2 bg-alt z-feature w-full">
+        <div class="ml-12">
+          <Content event={reply} />
+        </div>
+        <ThreadActions event={reply} {url} />
+      </NoteCard>
+    {/each}
+    <NoteCard event={$event} class="card2 bg-alt z-feature w-full">
+      <div class="ml-12">
+        <Content event={$event} />
+      </div>
+      <ThreadActions event={$event} {url} />
     </NoteCard>
-  {/each}
-  <NoteCard event={$event} class="card2 bg-alt z-feature w-full">
-    <div class="ml-12">
-      <Content event={$event} />
-    </div>
-    <ThreadActions event={$event} {url} />
-  </NoteCard>
+  {:else}
+    {#await sleep(5000)}
+      <Spinner loading>Loading thread...</Spinner>
+    {:then}
+      <p>Failed to load thread.</p>
+    {/await}
+  {/if}
   <Button class="mb-2 mt-5 flex items-center gap-2" on:click={back}>
     <Icon icon="alt-arrow-left" />
     Go back