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,19 +16,23 @@
   )
 </script>
 
-{#each groupedReactions.entries() as [content, events]}
-  {@const isOwn = events.some(e => e.pubkey === $pubkey)}
-  {@const onClick = () => onReactionClick(content, events)}
-  <button
-    type="button"
-    class="flex-inline btn btn-neutral btn-xs gap-1 rounded-full"
-    class:border={isOwn}
-    class:border-solid={isOwn}
-    class:border-primary={isOwn}
-    on:click|stopPropagation={onClick}>
-    <span>{displayReaction(content)}</span>
-    {#if events.length > 1}
-      <span>{events.length}</span>
-    {/if}
-  </button>
-{/each}
+{#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)}
+      <button
+        type="button"
+        class="flex-inline btn btn-neutral btn-xs gap-1 rounded-full"
+        class:border={isOwn}
+        class:border-solid={isOwn}
+        class:border-primary={isOwn}
+        on:click|stopPropagation={onClick}>
+        <span>{displayReaction(content)}</span>
+        {#if events.length > 1}
+          <span>{events.length}</span>
+        {/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">
+  <ReactionSummary {event} {onReactionClick} />
+  <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()) {