Handle deleted threads

.gitignore

@@ -18,10 +18,9 @@ vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 
 # Generated assets
-static/favicons
-static/apple-touch-icon-180x180.png
 static/favicon.ico
-static/maskable-icon-512x512.png
 static/pwa-64x64.png
 static/pwa-192x192.png
 static/pwa-512x512.png
+static/apple-touch-icon-180x180.png
+static/maskable-icon-512x512.png

src/app.html

@@ -15,12 +15,12 @@
     <meta name="twitter:description" content="{DESCRIPTION}" />
     <meta name="twitter:image" content="/maskable-icon-512x512.png" />
     <link rel="icon" href="/favicon.ico" sizes="48x48" />
-    <link rel="icon" href="/pwa-64x64.ico" sizes="any" type="image/png" />
-    <link rel="icon" href="/pwa-192x192.ico" sizes="any" type="image/png" />
-    <link rel="icon" href="/pwa-512x512.ico" sizes="any" type="image/png" />
-    <link rel="icon" href="/pwa-64x64.ico" sizes="64x64" type="image/png" />
-    <link rel="icon" href="/pwa-192x192.ico" sizes="192x192" type="image/png" />
-    <link rel="icon" href="/pwa-512x512.ico" sizes="512x512" type="image/png" />
+    <link rel="icon" href="/pwa-64x64.png" sizes="any" type="image/png" />
+    <link rel="icon" href="/pwa-192x192.png" sizes="any" type="image/png" />
+    <link rel="icon" href="/pwa-512x512.png" sizes="any" type="image/png" />
+    <link rel="icon" href="/pwa-64x64.png" sizes="64x64" type="image/png" />
+    <link rel="icon" href="/pwa-192x192.png" sizes="192x192" type="image/png" />
+    <link rel="icon" href="/pwa-512x512.png" sizes="512x512" type="image/png" />
     <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon-180x180.png" />
     %sveltekit.head%
   </head>

src/app/components/Chat.svelte

@@ -100,7 +100,7 @@
 
   setTimeout(() => {
     loading = false
-  }, 3000)
+  }, 5000)
 </script>
 
 <div class="relative flex h-full w-full flex-col">

src/app/components/MenuSettings.svelte

@@ -11,28 +11,28 @@
 </script>
 
 <div class="column menu gap-2">
-  <Link href="/settings/profile">
+  <Link replaceState href="/settings/profile">
     <CardButton>
       <div slot="icon"><Icon icon="user-rounded" size={7} /></div>
       <div slot="title">Profile</div>
       <div slot="info">Customize your user profile</div>
     </CardButton>
   </Link>
-  <Link href="/settings/relays">
+  <Link replaceState href="/settings/relays">
     <CardButton>
       <div slot="icon"><Icon icon="server" size={7} /></div>
       <div slot="title">Relays</div>
       <div slot="info">Control how {PLATFORM_NAME} talks to the network</div>
     </CardButton>
   </Link>
-  <Link href="/settings">
+  <Link replaceState href="/settings">
     <CardButton>
       <div slot="icon"><Icon icon="settings" size={7} /></div>
       <div slot="title">Settings</div>
       <div slot="info">Get into the details about how {PLATFORM_NAME} works</div>
     </CardButton>
   </Link>
-  <Link href="/settings/about">
+  <Link replaceState href="/settings/about">
     <CardButton>
       <div slot="icon"><Icon icon="code-2" size={7} /></div>
       <div slot="title">About</div>

src/app/components/MenuSpaces.svelte

@@ -17,7 +17,7 @@
 
 <div class="column menu gap-2">
   {#if PLATFORM_RELAY}
-    <Link href={makeSpacePath(PLATFORM_RELAY)}>
+    <Link replaceState href={makeSpacePath(PLATFORM_RELAY)}>
       <CardButton>
         <div slot="icon"><SpaceAvatar url={PLATFORM_RELAY} /></div>
         <div slot="title"><RelayName url={PLATFORM_RELAY} /></div>
@@ -27,7 +27,7 @@
     <Divider />
   {:else if getMembershipUrls($userMembership).length > 0}
     {#each getMembershipUrls($userMembership) as url (url)}
-      <Link href={makeSpacePath(url)}>
+      <Link replaceState href={makeSpacePath(url)}>
         <CardButton>
           <div slot="icon"><SpaceAvatar {url} /></div>
           <div slot="title"><RelayName {url} /></div>

src/app/components/ThreadActions.svelte

@@ -2,7 +2,7 @@
   import {type Instance} from "tippy.js"
   import type {NativeEmoji} from "emoji-picker-element/shared"
   import {max} from "@welshman/lib"
-  import {deriveEvents} from "@welshman/store"
+  import {deriveEvents, deriveIsDeleted} from "@welshman/store"
   import type {TrustedEvent} from "@welshman/util"
   import {pubkey, repository, formatTimestampRelative} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
@@ -18,6 +18,8 @@
   export let event
   export let showActivity = false
 
+  const deleted = deriveIsDeleted(repository, event)
+
   const replies = deriveEvents(repository, {filters: [{kinds: [REPLY], "#E": [event.id]}]})
 
   const showPopover = () => popover.show()
@@ -47,6 +49,11 @@
     <ReactionSummary {event} {onReactionClick} />
   </Button>
   <div class="flex flex-grow justify-end gap-2">
+    {#if $deleted}
+      <div class="btn btn-error btn-xs rounded-full">
+        Deleted
+      </div>
+    {/if}
     {#if showActivity}
       <div class="flex-inline btn btn-neutral btn-xs gap-1 rounded-full">
         <Icon icon="reply" />

src/lib/components/EmojiButton.svelte

@@ -18,10 +18,12 @@
   }
 
   const onMouseMove = throttle(300, ({clientX, clientY}: any) => {
-    const {x, y, width, height} = popover.popper.getBoundingClientRect()
+    if (popover) {
+      const {x, y, width, height} = popover.popper.getBoundingClientRect()
 
-    if (!between([x, x + width], clientX) || !between([y - 30, y + height + 30], clientY)) {
-      popover.hide()
+      if (!between([x, x + width], clientX) || !between([y - 30, y + height + 30], clientY)) {
+        popover.hide()
+      }
     }
   })
 

src/lib/components/Link.svelte

@@ -3,12 +3,13 @@
 
   export let href
   export let external = false
+  export let replaceState = false
 
   const go = (e: Event) => {
     if (!external) {
       e.preventDefault()
 
-      goto(href)
+      goto(href, {replaceState})
     }
   }
 </script>

src/routes/spaces/[relay]/+layout.svelte

@@ -1,20 +1,26 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {page} from "$app/stores"
-  import {load} from "@welshman/app"
+  import {subscribe} from "@welshman/app"
+  import {DELETE, NOTE} from "@welshman/util"
   import Page from "@lib/components/Page.svelte"
   import Delay from "@lib/components/Delay.svelte"
   import SecondaryNav from "@lib/components/SecondaryNav.svelte"
   import MenuSpace from "@app/components/MenuSpace.svelte"
-  import {decodeRelay, MEMBERSHIPS} from "@app/state"
+  import {decodeRelay, MEMBERSHIPS, MESSAGE, REPLY} from "@app/state"
 
   $: url = decodeRelay($page.params.relay)
 
   onMount(() => {
-    load({
-      filters: [{kinds: [MEMBERSHIPS], "#r": [url]}],
+    const sub = subscribe({
+      filters: [
+        {kinds: [DELETE], "#k": [NOTE, REPLY, MESSAGE].map(String)},
+        {kinds: [MEMBERSHIPS], "#r": [url]},
+      ],
       relays: [url],
     })
+
+    return () => sub.close()
   })
 </script>
 

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

@@ -13,15 +13,18 @@
   import MenuSpace from "@app/components/MenuSpace.svelte"
   import ThreadItem from "@app/components/ThreadItem.svelte"
   import ThreadCreate from "@app/components/ThreadCreate.svelte"
-  import {deriveEventsForUrl, decodeRelay} from "@app/state"
+  import {REPLY, deriveEventsForUrl, decodeRelay} from "@app/state"
   import {pushModal, pushDrawer} from "@app/modal"
 
   const url = decodeRelay($page.params.relay)
-  const kinds = [NOTE]
-  const feed = makeIntersectionFeed(makeRelayFeed(url), feedFromFilter({kinds}))
-  const events = deriveEventsForUrl(url, kinds)
-  const loader = feedLoader.getLoader(feed, {})
+  const events = deriveEventsForUrl(url, [NOTE])
   const mutedPubkeys = getPubkeyTagValues(getListTags($userMutes))
+  const feed = makeIntersectionFeed(makeRelayFeed(url), feedFromFilter({kinds: [NOTE, REPLY]}))
+  const loader = feedLoader.getLoader(feed, {
+    onExhausted: () => {
+      loading = false
+    },
+  })
 
   const openMenu = () => pushDrawer(MenuSpace, {url})
 
@@ -32,22 +35,21 @@
   let element: Element
 
   onMount(() => {
-    const scroller = createScroller({
-      element,
-      onScroll: async () => {
-        const $loader = await loader
+    // Why is element not defined sometimes? SVELTEKIT
+    if (element) {
+      const scroller = createScroller({
+        element,
+        onScroll: async () => {
+          const $loader = await loader
 
-        await $loader(5)
-        limit += 5
-      },
-    })
+          await $loader(5)
+          limit += 5
+        },
+      })
 
-    return () => scroller.stop()
+      return () => scroller.stop()
+    }
   })
-
-  setTimeout(() => {
-    loading = false
-  }, 3000)
 </script>
 
 <div class="relative flex h-screen flex-col">

src/routes/spaces/[relay]/[room]/+page.svelte

@@ -97,7 +97,7 @@
 
   setTimeout(() => {
     loading = false
-  }, 3000)
+  }, 5000)
 </script>
 
 <div class="relative flex h-full flex-col">

src/routes/spaces/[relay]/calendar/+page.svelte

@@ -63,7 +63,7 @@
 
   setTimeout(() => {
     loading = false
-  }, 3000)
+  }, 5000)
 </script>
 
 <div class="relative flex h-screen flex-col">

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