Add link previews

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+# 0.2.32
+
+- [x] Add note preview
+
 # 0.2.31
 
 - [x] Add the ability to view and write reviews on relays, with ratings

ROADMAP.md

@@ -18,12 +18,18 @@
 - [ ] Fix unauthenticated experience. Going to an npub just spins
 - [ ] Convert app store to nip 89
 - [ ] Put search icon in header or hover button, open in modal
+- [ ] Hide muted quoted events
+- [ ] Centralize relays
+  - This is ok, relays are the source of decentralization
+  - clients can help with discoverability
+  - Add agent to dufflepud database that scrapes relays and reviews
+  - Serve relays from dufflepud
+  - Or maybe set up a special purpose relay for relay recs?
 
 # Core
 
 - [ ] Deploy ontology.coracle.social
 - [ ] Add threads - replies by self get shown at the top of replies?
-- [ ] Show link previews when posting
 - [ ] Embedded music players for Spotify, youtube, etc
 - [ ] Make mutes private
 - [ ] Add nostrscript nevent1qqsvetmqsk8025jadyn82cpmkgxcesjffqajssd2qaq0k8arw9v79tsppadk7cn2v43hggz0vf4x2cm5t5yt4dnl

src/app/views/NoteCreate.svelte

@@ -14,6 +14,7 @@
   import Modal from "src/partials/Modal.svelte"
   import Heading from "src/partials/Heading.svelte"
   import RelayCard from "src/app/shared/RelayCard.svelte"
+  import NoteContent from "src/app/shared/NoteContent.svelte"
   import RelaySearch from "src/app/shared/RelaySearch.svelte"
   import {getUserWriteRelays, getRelayForPersonHint} from "src/agent/relays"
   import {getPersonWithFallback} from "src/agent/db"
@@ -29,6 +30,7 @@
   let q = ""
   let image = null
   let compose = null
+  let showPreview = false
   let showSettings = false
   let relays = writable(
     (writeTo ? writeTo.map(url => ({url, score: 1})) : getUserWriteRelays()) as Array<{
@@ -94,6 +96,10 @@
     relays.update(reject(propEq("url", relay.url)))
   }
 
+  const togglePreview = () => {
+    showPreview = !showPreview
+  }
+
   onMount(() => {
     if (pubkey && pubkey !== user.getPubkey()) {
       compose.mention(getPersonWithFallback(pubkey))
@@ -113,14 +119,23 @@
     <div class="flex w-full flex-col gap-4">
       <div class="flex flex-col gap-2">
         <strong>What do you want to say?</strong>
-        <div class="border-l-2 border-solid border-gray-6 pl-4">
-          <Compose bind:this={compose} {onSubmit} />
-          <div class="flex justify-end">
-            <small class="text-gray-5">
-              Posting as @{displayPerson(getPersonWithFallback(user.getPubkey()))}
-            </small>
+        <div class="ml-2 mt-4 border-l-2 border-solid border-gray-6 pl-3">
+          {#if showPreview}
+            <NoteContent note={{content: compose.parse(), tags: []}} />
+          {/if}
+          <div class:hidden={showPreview}>
+            <Compose bind:this={compose} {onSubmit} />
           </div>
         </div>
+        <div class="flex items-center justify-end gap-2 text-gray-5">
+          <small>
+            Posting as @{displayPerson(getPersonWithFallback(user.getPubkey()))}
+          </small>
+          <span>•</span>
+          <small on:click={togglePreview} class="cursor-pointer underline">
+            {showPreview ? "Hide" : "Show"} Preview
+          </small>
+        </div>
       </div>
       {#if image}
         <Media

src/partials/ContentEditable.svelte

@@ -88,8 +88,8 @@
 </script>
 
 <div
-  style={$$props.style}
-  class={cx($$props.class, "w-full min-w-0 p-2 text-gray-2 outline-0")}
+  style={$$props.style || "min-height: 6rem"}
+  class={cx($$props.class, "w-full min-w-0 text-gray-2 outline-0")}
   autofocus
   contenteditable
   bind:this={input}

src/partials/Tabs.svelte

@@ -18,7 +18,7 @@
       <button
         class="flex cursor-pointer gap-2 border-solid border-gray-6 px-8 py-4 hover:border-b"
         class:border-b={activeTab === tab}
-        on:click={() => setActiveTab(tab)}>
+        on:click|preventDefault={() => setActiveTab(tab)}>
         <div>{title}</div>
         {#if badge}
           <div class="h-6 rounded-full bg-gray-6 px-2">{badge}</div>