Bring back blossom server auth, fix duplicate direct messages

src/app/components/ChatCompose.svelte

@@ -10,11 +10,10 @@
   import {makeEditor} from "@app/editor"
 
   type Props = {
-    url?: string
     onSubmit: (event: EventContent) => void
   }
 
-  const {onSubmit, url}: Props = $props()
+  const {onSubmit}: Props = $props()
 
   const autofocus = !isMobile
 
@@ -39,11 +38,11 @@
   }
 
   const editor = makeEditor({
-    url,
     autofocus,
     submit,
     uploading,
     aggressive: true,
+    encryptFiles: true,
   })
 </script>
 

src/app/components/ContentEmoji.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import type {ParsedEmojiValue} from "@welshman/content"
-  import {imgproxy} from "@app/core/state"
 
   export let value: ParsedEmojiValue
 
@@ -8,10 +7,7 @@
 </script>
 
 {#if value.url}
-  <img
-    {alt}
-    src={imgproxy(value.url, {w: 24, h: 24})}
-    class="-mt-0.5 inline h-[1em] min-w-[1em] align-middle" />
+  <img {alt} src={value.url} class="-mt-0.5 inline h-[1em] min-w-[1em] align-middle" />
 {:else}
   {alt}
 {/if}

src/app/components/ContentLinkBlock.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import {ellipsize, displayUrl, postJson} from "@welshman/lib"
-  import {dufflepud, imgproxy} from "@app/core/state"
+  import {dufflepud} from "@app/core/state"
   import {preventDefault, stopPropagation} from "@lib/html"
   import Link from "@lib/components/Link.svelte"
   import ContentLinkDetail from "@app/components/ContentLinkDetail.svelte"
@@ -51,7 +51,7 @@
             <img
               alt="Link preview"
               onerror={onError}
-              src={imgproxy(preview.image)}
+              src={preview.image}
               class="bg-alt max-h-72 rounded-t-box object-contain object-center" />
           {/if}
           <div class="flex flex-col gap-2 p-4">

src/app/components/ContentLinkBlockImage.svelte

@@ -1,10 +1,17 @@
 <script lang="ts">
   import {onMount, onDestroy} from "svelte"
   import {displayUrl} from "@welshman/lib"
-  import {getTags, decryptFile, getTagValue, tagsFromIMeta} from "@welshman/util"
+  import {
+    getTags,
+    getBlob,
+    decryptFile,
+    getTagValue,
+    tagsFromIMeta,
+    makeBlossomAuthEvent,
+  } from "@welshman/util"
+  import {signer} from "@welshman/app"
   import LinkRound from "@assets/icons/link-round.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
-  import {imgproxy} from "@app/core/state"
 
   const {value, event, ...props} = $props()
 
@@ -14,18 +21,34 @@
       .map(tagsFromIMeta)
       .find(meta => getTagValue("url", meta) === url) || event.tags
 
+  const hash = getTagValue("x", meta)
   const key = getTagValue("decryption-key", meta)
   const nonce = getTagValue("decryption-nonce", meta)
   const algorithm = getTagValue("encryption-algorithm", meta)
 
-  const onError = () => {
-    hasError = true
+  const onError = async () => {
+    // If the image failed to load, try authenticating
+    if (hash && $signer) {
+      const server = new URL(url).origin
+      const template = makeBlossomAuthEvent({action: "get", server, hashes: [hash]})
+      const authEvent = await $signer.sign(template)
+      const res = await getBlob(server, hash, {authEvent})
+
+      if (res.status === 200) {
+        src = URL.createObjectURL(await res.blob())
+      } else {
+        hasError = true
+      }
+    } else {
+      hasError = true
+    }
   }
 
   let hasError = $state(false)
-  let src = $state(imgproxy(url))
+  let src = $state("")
 
   onMount(async () => {
+    // If we have an encryption algorithm, fetch and decrypt
     if (algorithm === "aes-gcm" && key && nonce) {
       const response = await fetch(url)
 
@@ -35,6 +58,8 @@
 
         src = URL.createObjectURL(new Blob([decryptedData]))
       }
+    } else {
+      src = url
     }
   })
 
@@ -48,6 +73,6 @@
     <Icon icon={LinkRound} size={3} class="inline-block" />
     {displayUrl(url)}
   </a>
-{:else}
+{:else if src}
   <img alt="" {src} onerror={onError} {...props} />
 {/if}