Display thread title

src/app/components/ChannelCompose.svelte

@@ -17,7 +17,7 @@
 
   const submit = () => {
     onSubmit({
-      content: $editor.getText(),
+      content: $editor.getText({blockSeparator: '\n'}),
       tags: getEditorTags($editor),
     })
 

src/app/components/Content.svelte

@@ -35,7 +35,7 @@
   export let maxLength = 700
   export let showEntire = false
   export let hideMedia = false
-  export let expandable = true
+  export let expandMode = "block"
   export let depth = 0
 
   const fullContent = parse(event)
@@ -80,7 +80,9 @@
         mediaLength: hideMedia ? 20 : 200,
       })
 
-  $: ellipsize = expandable && shortContent.find(isEllipsis)
+  $: hasEllipsis = shortContent.find(isEllipsis)
+  $: expandInline = hasEllipsis && expandMode === "inline"
+  $: expandBlock = hasEllipsis && expandMode === "block"
 </script>
 
 <div class="relative">
@@ -95,10 +97,10 @@
   {:else}
     <div
       class="overflow-hidden text-ellipsis"
-      style={ellipsize ? "mask-image: linear-gradient(0deg, transparent 0px, black 100px)" : ""}>
+      style={expandBlock ? "mask-image: linear-gradient(0deg, transparent 0px, black 100px)" : ""}>
       {#each shortContent as parsed, i}
         {#if isNewline(parsed)}
-          <ContentNewline value={parsed.value.slice(isNextToBlock(i) ? 1 : 0)} />
+          <ContentNewline value={parsed.value.slice(1)} />
         {:else if isTopic(parsed)}
           <ContentTopic value={parsed.value} />
         {:else if isCode(parsed)}
@@ -128,12 +130,17 @@
               {fromNostrURI(parsed.raw).slice(0, 16) + "…"}
             </Link>
           {/if}
+        {:else if isEllipsis(parsed) && expandInline}
+          {@html renderParsed(parsed)}
+          <button type="button" class="underline text-sm">
+            Read more
+          </button>
         {:else}
           {@html renderParsed(parsed)}
         {/if}
       {/each}
     </div>
-    {#if ellipsize}
+    {#if expandBlock}
       <div class="relative z-feature -mt-6 flex justify-center bg-gradient-to-t from-base-100 py-2">
         <button type="button" class="btn" on:click|stopPropagation|preventDefault={expand}>
           See more

src/app/components/EventCreate.svelte

@@ -41,7 +41,7 @@
 
     const kind = isAllDay ? EVENT_DATE : EVENT_TIME
     const event = createEvent(kind, {
-      content: $editor.getText(),
+      content: $editor.getText({blockSeparator: '\n'}),
       tags: [
         ["d", randomId()],
         ["title", title],

src/app/components/ReactionSummary.svelte

@@ -16,6 +16,8 @@
   )
 </script>
 
+{#if $reactions.length > 0}
+  <div class="flex gap-2">
     {#each groupedReactions.entries() as [content, events]}
       {@const isOwn = events.some(e => e.pubkey === $pubkey)}
       {@const onClick = () => onReactionClick(content, events)}
@@ -32,3 +34,5 @@
         {/if}
       </button>
     {/each}
+  </div>
+{/if}

src/app/components/ThreadActions.svelte

@@ -45,10 +45,8 @@
 </script>
 
 <div class="flex flex-wrap items-center justify-between gap-2">
-  <Button class="flex gap-2">
   <ReactionSummary {event} {onReactionClick} />
-  </Button>
-  <div class="flex flex-grow justify-end gap-2">
+  <div class="flex flex-wrap flex-grow justify-end gap-2">
     {#if $deleted}
       <div class="btn btn-error btn-xs rounded-full">Deleted</div>
     {/if}

src/app/components/ThreadCreate.svelte

@@ -34,7 +34,7 @@
       })
     }
 
-    const content = $editor.getText()
+    const content = $editor.getText({blockSeparator: '\n'})
 
     if (!content.trim()) {
       return pushToast({

src/app/components/ThreadItem.svelte

@@ -1,25 +1,35 @@
 <script lang="ts">
+  import {nthEq} from '@welshman/lib'
   import {formatTimestamp} from "@welshman/app"
   import Link from "@lib/components/Link.svelte"
   import Content from "@app/components/Content.svelte"
-  import Profile from "@app/components/Profile.svelte"
+  import ProfileName from "@app/components/ProfileName.svelte"
   import ThreadActions from "@app/components/ThreadActions.svelte"
   import {makeThreadPath} from "@app/routes"
+  import {pubkeyLink} from "@app/state"
 
   export let url
   export let event
   export let hideActions = false
+
+  const title = event.tags.find(nthEq(0, 'title'))?.[1]
 </script>
 
 <Link class="col-2 card2 bg-alt w-full cursor-pointer" href={makeThreadPath(url, event.id)}>
-  <div class="flex w-full justify-between gap-2">
-    <Profile pubkey={event.pubkey} />
+  <div class="flex w-full justify-between items-center gap-2">
+    <p class="text-xl">{title}</p>
     <p class="text-sm opacity-75">
       {formatTimestamp(event.created_at)}
     </p>
   </div>
-  <div class="col-4 w-full pl-12">
-    <Content {event} />
+  <Content {event} expandMode="inline" />
+  <div class="flex gap-2 items-end justify-between w-full">
+    <span class="text-sm opacity-75 whitespace-nowrap py-1">
+      Posted by
+      <Link external href={pubkeyLink(event.pubkey)} class="link-content">
+        @<ProfileName pubkey={event.pubkey} />
+      </Link>
+    </span>
     {#if !hideActions}
       <ThreadActions showActivity {url} {event} />
     {/if}

src/app/components/ThreadReply.svelte

@@ -23,7 +23,7 @@
   const loading = writable(false)
 
   const submit = () => {
-    const content = $editor.getText()
+    const content = $editor.getText({blockSeparator: '\n'})
     const tags = append(tagRoom(GENERAL, url), getEditorTags($editor))
 
     if (!content.trim()) {

src/lib/components/PageBar.svelte

@@ -1,4 +1,4 @@
-<div class="relative z-feature mx-2 rounded-xl pt-4">
+<div class="relative z-feature mx-2 rounded-xl pt-4 {$$props.class}">
   <div
     class="flex min-h-12 items-center justify-between gap-4 rounded-xl bg-base-100 px-4 shadow-xl">
     <div class="flex items-center gap-4">

src/lib/editor/index.ts

@@ -65,7 +65,7 @@ export const getModifiedHardBreakExtension = () =>
         "Shift-Enter": () => this.editor.commands.setHardBreak(),
         "Mod-Enter": () => this.editor.commands.setHardBreak(),
         Enter: () => {
-          if (this.editor.getText().trim()) {
+          if (this.editor.getText({blockSeparator: '\n'}).trim()) {
             uploadFiles(this.editor)
 
             return true

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import {onMount} from "svelte"
-  import {sortBy, sleep} from "@welshman/lib"
+  import {sortBy, nthEq, sleep} from "@welshman/lib"
   import {page} from "$app/stores"
   import {repository, subscribe} from "@welshman/app"
   import {deriveEvents} from "@welshman/store"
@@ -36,6 +36,8 @@
 
   let showReply = false
 
+  $: title = $event?.tags.find(nthEq(0, 'title'))?.[1] || ""
+
   onMount(() => {
     const sub = subscribe({filters, relays: [url]})
 
@@ -44,7 +46,7 @@
 </script>
 
 <div class="relative flex flex-col-reverse gap-3 px-2">
-  <div class="absolute left-[51px] top-20 h-[calc(100%-200px)] w-[2px] bg-neutral" />
+  <div class="absolute left-[51px] top-32 h-[calc(100%-248px)] w-[2px] bg-neutral" />
   {#if $event}
     {#if !showReply}
       <div class="flex justify-end p-2">
@@ -57,14 +59,14 @@
     {#each sortBy(e => -e.created_at, $replies) as reply (reply.id)}
       <NoteCard event={reply} class="card2 bg-alt z-feature w-full">
         <div class="col-3 ml-12">
-          <Content event={reply} />
+          <Content showEntire event={reply} />
           <ThreadActions event={reply} {url} />
         </div>
       </NoteCard>
     {/each}
     <NoteCard event={$event} class="card2 bg-alt z-feature w-full">
       <div class="col-3 ml-12">
-        <Content event={$event} />
+        <Content showEntire event={$event} />
         <ThreadActions event={$event} {url} />
       </div>
     </NoteCard>
@@ -75,13 +77,14 @@
       <p>Failed to load thread.</p>
     {/await}
   {/if}
-  <PageBar>
+  <PageBar class="mx-0">
     <div slot="icon">
       <Button class="btn btn-neutral btn-sm" on:click={back}>
         <Icon icon="alt-arrow-left" />
         Go back
       </Button>
     </div>
+    <h1 slot="title" class="text-xl">{title}</h1>
     <div slot="action">
       <Button on:click={openMenu} class="btn btn-neutral btn-sm md:hidden">
         <Icon icon="menu-dots" />