Fix calendar event deletion

src/app/shared/Calendar.svelte

@@ -78,19 +78,21 @@
   </div>
 {/if}
 
-<Calendar
-  plugins={[Interaction, DayGrid]}
-  options={{
-    view: "dayGridMonth",
-    events: $calendarEvents,
-    dateClick: onDateClick,
-    eventClick: onEventClick,
-    eventContent: getEventContent,
-    eventStartEditable: false,
-    eventDragMinDistance: 10000,
-    eventTextColor: $themeColors["neutral-900"],
-    longPressDelay: 10000,
-    buttonText: {
-      today: "Today",
-    },
-  }} />
+{#key $calendarEvents.length}
+  <Calendar
+    plugins={[Interaction, DayGrid]}
+    options={{
+      view: "dayGridMonth",
+      events: $calendarEvents,
+      dateClick: onDateClick,
+      eventClick: onEventClick,
+      eventContent: getEventContent,
+      eventStartEditable: false,
+      eventDragMinDistance: 10000,
+      eventTextColor: $themeColors["neutral-900"],
+      longPressDelay: 10000,
+      buttonText: {
+        today: "Today",
+      },
+    }} />
+{/key}

src/app/shared/EventInfo.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import cx from "classnames"
   import {fromPairs} from "ramda"
-  import {derived} from "svelte/store"
   import {Tags, getAddress} from "@welshman/util"
   import {secondsToDate, formatTimestamp, formatTimestampAsDate, getLocale} from "src/util/misc"
   import Anchor from "src/partials/Anchor.svelte"
@@ -11,7 +10,7 @@
   import EventActions from "src/app/shared/EventActions.svelte"
   import NoteContentKind1 from "src/app/shared/NoteContentKind1.svelte"
   import {router} from "src/app/util/router"
-  import {deriveEvent, repository, getSetting, pubkey} from "src/engine"
+  import {deriveIsDeleted, getSetting, pubkey} from "src/engine"
 
   export let event
   export let showDate = false
@@ -33,7 +32,7 @@
   const detailPath = router.at("events").of(address).toString()
   const editLink = router.at("events").of(address).at("edit").toString()
   const deleteLink = router.at("events").of(address).at("delete").toString()
-  const deleted = derived(deriveEvent(event.id), repository.isDeleted)
+  const deleted = deriveIsDeleted(event)
 </script>
 
 <div class="flex flex-grow flex-col gap-2">

src/app/shared/NoteContentKind1.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import {nip19} from 'nostr-tools'
-  import {fromNostrURI} from '@welshman/util'
+  import {fromNostrURI} from "@welshman/util"
   import {
     parse,
     truncate,
@@ -26,7 +25,6 @@
   import NoteContentLink from "src/app/shared/NoteContentLink.svelte"
   import PersonLink from "src/app/shared/PersonLink.svelte"
   import NoteContentQuote from "src/app/shared/NoteContentQuote.svelte"
-  import {router} from 'src/app/util'
 
   export let note
   export let minLength = 500
@@ -93,7 +91,7 @@
         <NoteContentLink value={parsed.value} showMedia={showMedia && isStartAndEnd(i)} />
       {:else if isProfile(parsed)}
         <PersonLink pubkey={parsed.value.pubkey} />
-      {:else if (isEvent(parsed) || isAddress(parsed))}
+      {:else if isEvent(parsed) || isAddress(parsed)}
         {#if isStartOrEnd(i) && depth < 2}
           <NoteContentQuote {depth} {note} value={parsed.value}>
             <div slot="note-content" let:quote>
@@ -106,7 +104,7 @@
             stopPropagation
             class="overflow-hidden text-ellipsis whitespace-nowrap underline"
             href={fromNostrURI(parsed.raw)}>
-            {nip19.neventEncode(parsed.value).slice(0, 16) + "…"}
+            {fromNostrURI(parsed.raw).slice(0, 16) + "…"}
           </Anchor>
         {/if}
       {:else}

src/app/shared/NoteContentKind30402.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import cx from "classnames"
-  import {derived} from "svelte/store"
   import {Tags, Address} from "@welshman/util"
   import {commaFormat} from "hurdak"
   import FlexColumn from "src/partials/FlexColumn.svelte"
@@ -12,7 +11,7 @@
   import NoteContentTopics from "src/app/shared/NoteContentTopics.svelte"
   import NoteContentKind1 from "src/app/shared/NoteContentKind1.svelte"
   import {router} from "src/app/util/router"
-  import {hints, pubkey, repository, deriveEvent} from "src/engine"
+  import {hints, pubkey, deriveIsDeleted} from "src/engine"
 
   export let note
   export let showMedia = false
@@ -25,7 +24,7 @@
   const address = Address.fromEvent(note, hints.Event(note).redundancy(3).getUrls())
   const editLink = router.at("listings").of(address.toString()).at("edit").toString()
   const deleteLink = router.at("listings").of(address.toString()).at("delete").toString()
-  const deleted = derived(deriveEvent(note.id), repository.isDeleted)
+  const deleted = deriveIsDeleted(note)
 
   const sendMessage = () => {
     const naddr = address.toNaddr()

src/app/views/NoteDelete.svelte

@@ -2,7 +2,7 @@
   import Anchor from "src/partials/Anchor.svelte"
   import FlexColumn from "src/partials/FlexColumn.svelte"
   import {router} from "src/app/util/router"
-  import {deleteEvent} from "src/engine"
+  import {publishDeletion} from "src/engine"
 
   export let eid
   export let kind
@@ -10,7 +10,7 @@
   const onCancel = () => router.pop()
 
   const onConfirm = () => {
-    deleteEvent({kind, id: eid})
+    publishDeletion({kind, id: eid})
     router.pop()
   }
 </script>

src/engine/commands.ts

@@ -666,10 +666,10 @@ export const publishDeletion = ({kind, address = null, id = null}) => {
   })
 }
 
-export const deleteEvent = event =>
+export const deleteEvent = (event: TrustedEvent) =>
   publishDeletion({id: event.id, address: getAddress(event), kind: event.kind})
 
-export const deleteEventByAddress = address =>
+export const deleteEventByAddress = (address: string) =>
   publishDeletion({address, kind: Address.from(address).kind})
 
 // Profile

src/engine/repository.ts

@@ -108,3 +108,14 @@ export const deriveEvents = (opts: {filters: Filter[]; includeDeleted?: boolean}
 
 export const deriveEvent = (idOrAddress: string) =>
   derived(deriveEvents({filters: getIdFilters([idOrAddress]), includeDeleted: true}), first)
+
+export const deriveIsDeleted = (event: TrustedEvent) =>
+  custom<boolean>(setter => {
+    setter(repository.isDeleted(event))
+
+    const onUpdate = batch(300, () => setter(repository.isDeleted(event)))
+
+    repository.on("update", onUpdate)
+
+    return () => repository.off("update", onUpdate)
+  })