Clean up quotes/depth

src/app/components/ChannelComposeParent.svelte

@@ -4,7 +4,7 @@
   import {slide} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
-  import Content from "@app/components/Content.svelte"
+  import NoteContent from "@app/components/NoteContent.svelte"
 
   const {
     verb,
@@ -22,7 +22,12 @@
   transition:slide>
   <p class="text-primary">{verb} @{displayProfileByPubkey(event.pubkey)}</p>
   {#key event.id}
-    <Content {event} hideMedia minLength={100} maxLength={300} expandMode="disabled" />
+    <NoteContent
+      {event}
+      hideMediaAtDepth={0}
+      minLength={100}
+      maxLength={300}
+      expandMode="disabled" />
   {/key}
   <Button class="absolute right-2 top-2 cursor-pointer" onclick={clear}>
     <Icon icon="close-circle" />

src/app/components/ChannelMessage.svelte

@@ -89,7 +89,7 @@
         </div>
       {/if}
       <div class="text-sm">
-        <Content {event} quoteProps={{minimal: true, relays: [url]}} />
+        <Content {event} relays={[url]} />
         {#if thunk}
           <ThunkStatus {thunk} class="mt-2" />
         {/if}

src/app/components/Content.svelte

@@ -22,7 +22,6 @@
   import Link from "@lib/components/Link.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
-  import Content from "@app/components/Content.svelte"
   import ContentToken from "@app/components/ContentToken.svelte"
   import ContentCode from "@app/components/ContentCode.svelte"
   import ContentLinkInline from "@app/components/ContentLinkInline.svelte"
@@ -38,9 +37,9 @@
     minLength?: number
     maxLength?: number
     showEntire?: boolean
-    hideMedia?: boolean
+    hideMediaAtDepth?: number
     expandMode?: string
-    quoteProps?: Record<string, any>
+    relays?: string[]
     depth?: number
   }
 
@@ -49,9 +48,9 @@
     minLength = 500,
     maxLength = 700,
     showEntire = $bindable(false),
-    hideMedia = false,
+    hideMediaAtDepth = 1,
     expandMode = "block",
-    quoteProps = {},
+    relays = [],
     depth = 0,
   }: Props = $props()
 
@@ -64,13 +63,13 @@
   const isBlock = (i: number) => {
     const parsed = fullContent[i]
 
-    if (!parsed || hideMedia) return false
+    if (!parsed || hideMediaAtDepth <= depth) return false
 
     if (isLink(parsed) && $userSettingValues.show_media && isStartOrEnd(i)) {
       return true
     }
 
-    if ((isEvent(parsed) || isAddress(parsed)) && isStartOrEnd(i) && depth < 1) {
+    if ((isEvent(parsed) || isAddress(parsed)) && isStartOrEnd(i)) {
       return true
     }
 
@@ -108,7 +107,7 @@
       : truncate(fullContent, {
           minLength,
           maxLength,
-          mediaLength: hideMedia ? 20 : 200,
+          mediaLength: hideMediaAtDepth <= depth ? 20 : 200,
         }),
   )
 
@@ -151,11 +150,7 @@
           <ContentMention value={parsed.value} />
         {:else if isEvent(parsed) || isAddress(parsed)}
           {#if isBlock(i)}
-            <ContentQuote {...quoteProps} value={parsed.value} {event}>
+            <ContentQuote {depth} {relays} {hideMediaAtDepth} value={parsed.value} {event} />
-              {#snippet noteContent({event, minimal}: {event: TrustedEvent; minimal: boolean})}
-                <Content {quoteProps} hideMedia={minimal || hideMedia} {event} depth={depth + 1} />
-              {/snippet}
-            </ContentQuote>
           {:else}
             <Link
               external

src/app/components/ContentQuote.svelte

@@ -7,10 +7,11 @@
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import NoteCard from "@app/components/NoteCard.svelte"
+  import NoteContent from "@app/components/NoteContent.svelte"
   import {deriveEvent, entityLink, ROOM} from "@app/state"
   import {makeThreadPath, makeCalendarPath, makeRoomPath} from "@app/routes"
 
-  const {value, event, noteContent, relays = [], minimal = false} = $props()
+  const {value, event, depth, hideMediaAtDepth, relays = []} = $props()
 
   const {id, identifier, kind, pubkey, relays: relayHints = []} = value
   const idOrAddress = id || new Address(kind, pubkey, identifier).toString()
@@ -103,8 +104,8 @@
 
 <Button class="my-2 block max-w-full text-left" {onclick}>
   {#if $quote}
-    <NoteCard {minimal} event={$quote} class="bg-alt rounded-box p-4">
+    <NoteCard event={$quote} class="bg-alt rounded-box p-4">
-      {@render noteContent({event: $quote, minimal})}
+      <NoteContent {hideMediaAtDepth} {relays} event={$quote} depth={depth + 1} />
     </NoteCard>
   {:else}
     <div class="rounded-box p-4">

src/app/components/NoteContent.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import type {ComponentProps} from "svelte"
+  import Content from "@app/components/Content.svelte"
+
+  const props: ComponentProps<typeof Content> = $props()
+</script>
+
+<Content {...props} />

src/app/components/NoteItem.svelte

@@ -4,7 +4,7 @@
   import {pubkey} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import EmojiButton from "@lib/components/EmojiButton.svelte"
-  import Content from "@app/components/Content.svelte"
+  import NoteContent from "@app/components/NoteContent.svelte"
   import NoteCard from "@app/components/NoteCard.svelte"
   import ReactionSummary from "@app/components/ReactionSummary.svelte"
   import {publishDelete, publishReaction} from "@app/commands"
@@ -26,7 +26,7 @@
 </script>
 
 <NoteCard {event} class="card2 bg-alt">
-  <Content {event} expandMode="inline" />
+  <NoteContent {event} expandMode="inline" />
   <div class="flex w-full justify-between gap-2">
     <ReactionSummary {url} {event} {onReactionClick} reactionClass="tooltip-right">
       <EmojiButton {onEmoji} class="btn btn-neutral btn-xs h-[26px] rounded-box">

src/app/components/ProfileInfo.svelte

@@ -8,5 +8,5 @@
 </script>
 
 {#if $profile}
-  <Content event={{content: $profile.about, tags: []}} hideMedia />
+  <Content event={{content: $profile.about, tags: []}} />
 {/if}

src/app/components/ThreadItem.svelte

@@ -32,7 +32,7 @@
       {formatTimestamp(event.created_at)}
     </p>
   {/if}
-  <Content {event} expandMode="inline" quoteProps={{relays: [url]}} />
+  <Content {event} expandMode="inline" relays={[url]} />
   <div class="flex w-full flex-col items-end justify-between gap-2 sm:flex-row">
     <span class="whitespace-nowrap py-1 text-sm opacity-75">
       Posted by <ProfileLink pubkey={event.pubkey} />

src/routes/settings/profile/+page.svelte

@@ -50,7 +50,7 @@
       </Button>
     </div>
     {#key $profile?.about}
-      <Content event={{content: $profile?.about || "", tags: []}} hideMedia />
+      <Content event={{content: $profile?.about || "", tags: []}} hideMediaAtDepth={0} />
     {/key}
   </div>
   {#if $session?.email}

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

@@ -127,7 +127,7 @@
           <div class="flex py-2 opacity-50">
             <div class="h-px flex-grow bg-base-content opacity-25"></div>
           </div>
-          <Content showEntire event={$event} quoteProps={{relays: [url]}} />
+          <Content showEntire event={$event} relays={[url]} />
         </div>
       </div>
       <div class="flex w-full flex-col justify-end sm:flex-row">

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

@@ -79,7 +79,7 @@
     {/if}
     <NoteCard event={$event} class="card2 bg-alt z-feature w-full">
       <div class="col-3 ml-12">
-        <Content showEntire event={$event} quoteProps={{relays: [url]}} />
+        <Content showEntire event={$event} relays={[url]} />
         <ThreadActions event={$event} {url} />
       </div>
     </NoteCard>