Add minimal style for quotes of chat messages

CHANGELOG.md

@@ -10,6 +10,7 @@
 * Remove room tag from threads/calendars
 * Show pubkey on profile detail
 * Support pasting pubkey into chat start dialog
+* Add minimal style for quoted messages
 
 # 1.0.4
 

src/app/components/ChannelMessage.svelte

@@ -75,7 +75,7 @@
         </div>
       {/if}
       <div class="text-sm">
-        <Content {event} {url} />
+        <Content minimalQuote {event} {url} />
         {#if thunk}
           <ThunkStatus {thunk} class="mt-2" />
         {/if}

src/app/components/Content.svelte

@@ -40,6 +40,7 @@
     showEntire?: boolean
     hideMediaAtDepth?: number
     expandMode?: string
+    minimalQuote?: boolean
     depth?: number
     url?: string
   }
@@ -51,6 +52,7 @@
     showEntire = $bindable(false),
     hideMediaAtDepth = 1,
     expandMode = "block",
+    minimalQuote = false,
     depth = 0,
     url,
   }: Props = $props()
@@ -128,7 +130,7 @@
     </div>
   {:else}
     <div
-      class="overflow-hidden text-ellipsis break-words"
+      class="flex flex-col overflow-hidden text-ellipsis break-words"
       style={expandBlock ? "mask-image: linear-gradient(0deg, transparent 0px, black 100px)" : ""}>
       {#each shortContent as parsed, i}
         {#if isNewline(parsed) && !isBlock(i - 1)}
@@ -153,7 +155,13 @@
           <ContentMention value={parsed.value} {url} />
         {:else if isEvent(parsed) || isAddress(parsed)}
           {#if isBlock(i)}
-            <ContentQuote {depth} {url} {hideMediaAtDepth} value={parsed.value} {event} />
+            <ContentQuote
+              {depth}
+              {url}
+              {hideMediaAtDepth}
+              value={parsed.value}
+              {event}
+              minimal={minimalQuote} />
           {:else}
             <Link
               external

src/app/components/ContentQuote.svelte

@@ -5,14 +5,14 @@
   import {Router} from "@welshman/router"
   import {tracker, repository} from "@welshman/app"
   import type {TrustedEvent} from "@welshman/util"
-  import {Address, DIRECT_MESSAGE, MESSAGE, THREAD, EVENT_TIME} from "@welshman/util"
+  import {Address, getTagValue, DIRECT_MESSAGE, MESSAGE, THREAD, EVENT_TIME} from "@welshman/util"
   import {scrollToEvent} from "@lib/html"
   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"
+  import {makeThreadPath, makeSpacePath, makeCalendarPath, makeRoomPath} from "@app/routes"
 
   type Props = {
     value: any
@@ -20,9 +20,10 @@
     event: TrustedEvent
     depth: number
     url?: string
+    minimal?: boolean
   }
 
-  const {value, event, depth, hideMediaAtDepth, url}: Props = $props()
+  const {value, event, depth, hideMediaAtDepth, url, minimal}: Props = $props()
 
   const {id, identifier, kind, pubkey, relays = []} = value
   const idOrAddress = id || new Address(kind, pubkey, identifier).toString()
@@ -37,11 +38,12 @@
     ? nip19.neventEncode({id, relays: mergedRelays})
     : new Address(kind, pubkey, identifier, mergedRelays).toNaddr()
 
-  const openMessage = (url: string, room: string, id: string) => {
+  const openMessage = (url: string, room: string | undefined, id: string) => {
     const event = repository.getEvent(id)
+    const path = room ? makeRoomPath(url, room) : makeSpacePath(url, "chat")
 
     if (event) {
-      goto(makeRoomPath(url, room))
+      goto(path)
       scrollToEvent(id)
     }
 
@@ -55,9 +57,9 @@
       }
 
       const [url] = tracker.getRelays($quote.id)
-      const room = $quote.tags.find(nthEq(0, ROOM))?.[1]
+      const room = getTagValue(ROOM, $quote.tags)
 
-      if (url && room) {
+      if (url) {
         if ($quote.kind === THREAD) {
           return goto(makeThreadPath(url, $quote.id))
         }
@@ -95,9 +97,17 @@
 
 <Button class="my-2 block max-w-full text-left" {onclick}>
   {#if $quote}
+    {#if minimal && $quote.kind === MESSAGE}
+      <div
+        class="border-l-2 border-solid border-l-primary py-1 pl-2 opacity-90"
+        style="background-color: color-mix(in srgb, var(--primary) 10%, var(--base-300) 90%);">
+        <NoteContent {hideMediaAtDepth} {url} event={$quote} depth={depth + 1} />
+      </div>
+    {:else}
       <NoteCard event={$quote} {url} class="bg-alt rounded-box p-4">
         <NoteContent {hideMediaAtDepth} {url} event={$quote} depth={depth + 1} />
       </NoteCard>
+    {/if}
   {:else}
     <div class="rounded-box p-4">
       <Spinner loading>Loading event...</Spinner>