From cb577106548f5a7ea00773d2ee2d1ccad831efa4 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Tue, 11 Feb 2025 15:37:50 -0800
Subject: [PATCH] Clean up quotes/depth

---
 .../components/ChannelComposeParent.svelte    |  9 ++++++--
 src/app/components/ChannelMessage.svelte      |  2 +-
 src/app/components/Content.svelte             | 21 +++++++------------
 src/app/components/ContentQuote.svelte        |  7 ++++---
 src/app/components/NoteContent.svelte         |  8 +++++++
 src/app/components/NoteItem.svelte            |  4 ++--
 src/app/components/ProfileInfo.svelte         |  2 +-
 src/app/components/ThreadItem.svelte          |  2 +-
 src/routes/settings/profile/+page.svelte      |  2 +-
 .../spaces/[relay]/calendar/[id]/+page.svelte |  2 +-
 .../spaces/[relay]/threads/[id]/+page.svelte  |  2 +-
 11 files changed, 35 insertions(+), 26 deletions(-)
 create mode 100644 src/app/components/NoteContent.svelte

diff --git a/src/app/components/ChannelComposeParent.svelte b/src/app/components/ChannelComposeParent.svelte
index a18718d..13ea6ab 100644
--- a/src/app/components/ChannelComposeParent.svelte
+++ b/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" />
diff --git a/src/app/components/ChannelMessage.svelte b/src/app/components/ChannelMessage.svelte
index b82507b..ee6d5a6 100644
--- a/src/app/components/ChannelMessage.svelte
+++ b/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}
diff --git a/src/app/components/Content.svelte b/src/app/components/Content.svelte
index 5ad2a75..e41c911 100644
--- a/src/app/components/Content.svelte
+++ b/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}>
-              {#snippet noteContent({event, minimal}: {event: TrustedEvent; minimal: boolean})}
-                <Content {quoteProps} hideMedia={minimal || hideMedia} {event} depth={depth + 1} />
-              {/snippet}
-            </ContentQuote>
+            <ContentQuote {depth} {relays} {hideMediaAtDepth} value={parsed.value} {event} />
           {:else}
             <Link
               external
diff --git a/src/app/components/ContentQuote.svelte b/src/app/components/ContentQuote.svelte
index 822163b..6471481 100644
--- a/src/app/components/ContentQuote.svelte
+++ b/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">
-      {@render noteContent({event: $quote, minimal})}
+    <NoteCard event={$quote} class="bg-alt rounded-box p-4">
+      <NoteContent {hideMediaAtDepth} {relays} event={$quote} depth={depth + 1} />
     </NoteCard>
   {:else}
     <div class="rounded-box p-4">
diff --git a/src/app/components/NoteContent.svelte b/src/app/components/NoteContent.svelte
new file mode 100644
index 0000000..cd83c82
--- /dev/null
+++ b/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} />
diff --git a/src/app/components/NoteItem.svelte b/src/app/components/NoteItem.svelte
index 4bc96c4..c1ef1c7 100644
--- a/src/app/components/NoteItem.svelte
+++ b/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">
diff --git a/src/app/components/ProfileInfo.svelte b/src/app/components/ProfileInfo.svelte
index 393329e..2858f04 100644
--- a/src/app/components/ProfileInfo.svelte
+++ b/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}
diff --git a/src/app/components/ThreadItem.svelte b/src/app/components/ThreadItem.svelte
index 65e01ae..48b0d62 100644
--- a/src/app/components/ThreadItem.svelte
+++ b/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} />
diff --git a/src/routes/settings/profile/+page.svelte b/src/routes/settings/profile/+page.svelte
index d1ac674..67eaa47 100644
--- a/src/routes/settings/profile/+page.svelte
+++ b/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}
diff --git a/src/routes/spaces/[relay]/calendar/[id]/+page.svelte b/src/routes/spaces/[relay]/calendar/[id]/+page.svelte
index a411600..e007285 100644
--- a/src/routes/spaces/[relay]/calendar/[id]/+page.svelte
+++ b/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">
diff --git a/src/routes/spaces/[relay]/threads/[id]/+page.svelte b/src/routes/spaces/[relay]/threads/[id]/+page.svelte
index 9681784..1047bac 100644
--- a/src/routes/spaces/[relay]/threads/[id]/+page.svelte
+++ b/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>