Fix more stuff, particularly event handlers

src/app/components/ThunkStatus.svelte

@@ -12,9 +12,10 @@
 
   interface Props {
     thunk: Thunk | MergedThunk
+    class?: string
   }
 
-  let {thunk} = $props()
+  let {thunk, ...restProps}: Props = $props()
 
   const {Pending, Failure, Timeout} = PublishStatus
 
@@ -26,16 +27,18 @@
       : publishThunk((thunk as Thunk).request)
   }
 
-  let isPending = Object.values(get(thunk.status)).some(s => s.status == Pending)
+  const status = throttled(300, thunk.status)
+  const ps = $derived(Object.values($status))
+  const canCancel = $derived(ps.length === 0 && $userSettingValues.send_delay > 0)
+  const isFailure = $derived(!canCancel && ps.every(s => [Failure, Timeout].includes(s.status)))
+  const failure = $derived(
+    Object.entries($status).find(([url, s]) => [Failure, Timeout].includes(s.status)),
+  )
 
-  $: status = throttled(300, thunk.status)
-  $: ps = Object.values($status)
-  $: canCancel = ps.length === 0 && $userSettingValues.send_delay > 0
-  $: isFailure = !canCancel && ps.every(s => [Failure, Timeout].includes(s.status))
-  $: failure = Object.entries($status).find(([url, s]) => [Failure, Timeout].includes(s.status))
+  let isPending = $state(Object.values(get(thunk.status)).some(s => s.status == Pending))
 
   // Delay updating isPending so users can see that the message is sent
-  $: {
+  $effect(() => {
     isPending = isPending || ps.some(s => s.status === Pending)
 
     if (!ps.some(s => s.status === Pending)) {
@@ -43,14 +46,14 @@
         isPending = false
       }, 2000)
     }
-  }
+  })
 </script>
 
 {#if isFailure && failure}
   {@const [url, {message, status}] = failure}
-  <div class="flex justify-end px-1 text-xs {$$props.class}">
+  <div class="flex justify-end px-1 text-xs {restProps.class}">
     <Tippy
-      class="flex items-center {$$props.class}"
+      class="flex items-center {restProps.class}"
       component={ThunkStatusDetail}
       props={{url, message, status, retry}}
       params={{interactive: true}}>
@@ -63,12 +66,12 @@
     </Tippy>
   </div>
 {:else if canCancel || isPending}
-  <div class="flex justify-end px-1 text-xs {$$props.class}">
-    <span class="flex items-center gap-1 {$$props.class}">
+  <div class="flex justify-end px-1 text-xs {restProps.class}">
+    <span class="flex items-center gap-1 {restProps.class}">
       <span class="loading loading-spinner mx-1 h-3 w-3 translate-y-px"></span>
       <span class="opacity-50">Sending...</span>
       {#if canCancel}
-        <Button class="link" on:click={abort}>Cancel</Button>
+        <Button class="link" onclick={abort}>Cancel</Button>
       {/if}
     </span>
   </div>