Migrate more stuff

src/app/components/Content.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+  import Content from "./Content.svelte"
+  import {preventDefault, stopPropagation} from "svelte/legacy"
+
   import {fromNostrURI} from "@welshman/util"
   import {nthEq} from "@welshman/lib"
   import {
@@ -30,14 +33,27 @@
   import ContentMention from "@app/components/ContentMention.svelte"
   import {entityLink, userSettingValues} from "@app/state"
 
-  export let event
-  export let minLength = 500
-  export let maxLength = 700
-  export let showEntire = false
-  export let hideMedia = false
-  export let expandMode = "block"
-  export let quoteProps: Record<string, any> = {}
-  export let depth = 0
+  interface Props {
+    event: any
+    minLength?: number
+    maxLength?: number
+    showEntire?: boolean
+    hideMedia?: boolean
+    expandMode?: string
+    quoteProps?: Record<string, any>
+    depth?: number
+  }
+
+  let {
+    event,
+    minLength = 500,
+    maxLength = 700,
+    showEntire = $bindable(false),
+    hideMedia = false,
+    expandMode = "block",
+    quoteProps = {},
+    depth = 0,
+  }: Props = $props()
 
   const fullContent = parse(event)
 
@@ -82,20 +98,23 @@
     warning = null
   }
 
-  let warning =
-    $userSettingValues.hide_sensitive && event.tags.find(nthEq(0, "content-warning"))?.[1]
+  let warning = $state(
+    $userSettingValues.hide_sensitive && event.tags.find(nthEq(0, "content-warning"))?.[1],
+  )
 
-  $: shortContent = showEntire
-    ? fullContent
-    : truncate(fullContent, {
-        minLength,
-        maxLength,
-        mediaLength: hideMedia ? 20 : 200,
-      })
+  let shortContent = $derived(
+    showEntire
+      ? fullContent
+      : truncate(fullContent, {
+          minLength,
+          maxLength,
+          mediaLength: hideMedia ? 20 : 200,
+        }),
+  )
 
-  $: hasEllipsis = shortContent.some(isEllipsis)
-  $: expandInline = hasEllipsis && expandMode === "inline"
-  $: expandBlock = hasEllipsis && expandMode === "block"
+  let hasEllipsis = $derived(shortContent.some(isEllipsis))
+  let expandInline = $derived(hasEllipsis && expandMode === "inline")
+  let expandBlock = $derived(hasEllipsis && expandMode === "block")
 </script>
 
 <div class="relative">
@@ -133,9 +152,9 @@
         {:else if isEvent(parsed) || isAddress(parsed)}
           {#if isBlock(i)}
             <ContentQuote {...quoteProps} value={parsed.value} {depth} {event}>
-              <div slot="note-content" let:event>
-                <svelte:self {quoteProps} {hideMedia} {event} depth={depth + 1} />
-              </div>
+              {#snippet noteContent({event})}
+                <Content {quoteProps} {hideMedia} {event} depth={depth + 1} />
+              {/snippet}
             </ContentQuote>
           {:else}
             <Link
@@ -158,7 +177,7 @@
         <button
           type="button"
           class="btn btn-neutral"
-          on:click|stopPropagation|preventDefault={expand}>
+          onclick={stopPropagation(preventDefault(expand))}>
           See more
         </button>
       </div>