From 3c9b3f23df74890128cdc0b99b04a958b4c7c9bc Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Thu, 18 Sep 2025 13:43:43 -0700
Subject: [PATCH] Upload profile pictures instead of doing base64

---
 android/app/capacitor.build.gradle            |   1 +
 android/capacitor.settings.gradle             |   3 +
 .../components/InputProfilePicture.svelte     |  38 ++++---
 src/app/components/ProfileEditForm.svelte     |   2 +-
 src/app/components/SpaceCreate.svelte         |   2 +-
 src/app/core/commands.ts                      |  84 ++++++++++++++-
 src/app/editor/index.ts                       |  83 ++-------------
 src/lib/components/InputPicture.svelte        | 100 ------------------
 8 files changed, 120 insertions(+), 193 deletions(-)
 rename src/{lib => app}/components/InputProfilePicture.svelte (80%)
 delete mode 100644 src/lib/components/InputPicture.svelte

diff --git a/android/app/capacitor.build.gradle b/android/app/capacitor.build.gradle
index 24d64488..51e17cb8 100644
--- a/android/app/capacitor.build.gradle
+++ b/android/app/capacitor.build.gradle
@@ -14,6 +14,7 @@ dependencies {
     implementation project(':capacitor-keyboard')
     implementation project(':capacitor-preferences')
     implementation project(':capacitor-push-notifications')
+    implementation project(':capawesome-capacitor-android-dark-mode-support')
     implementation project(':capawesome-capacitor-badge')
     implementation project(':nostr-signer-capacitor-plugin')
 
diff --git a/android/capacitor.settings.gradle b/android/capacitor.settings.gradle
index 5b240b76..c86a5c8e 100644
--- a/android/capacitor.settings.gradle
+++ b/android/capacitor.settings.gradle
@@ -17,6 +17,9 @@ project(':capacitor-preferences').projectDir = new File('../node_modules/.pnpm/@
 include ':capacitor-push-notifications'
 project(':capacitor-push-notifications').projectDir = new File('../node_modules/.pnpm/@capacitor+push-notifications@7.0.1_@capacitor+core@7.2.0/node_modules/@capacitor/push-notifications/android')
 
+include ':capawesome-capacitor-android-dark-mode-support'
+project(':capawesome-capacitor-android-dark-mode-support').projectDir = new File('../node_modules/.pnpm/@capawesome+capacitor-android-dark-mode-support@7.0.0_@capacitor+core@7.2.0/node_modules/@capawesome/capacitor-android-dark-mode-support/android')
+
 include ':capawesome-capacitor-badge'
 project(':capawesome-capacitor-badge').projectDir = new File('../node_modules/.pnpm/@capawesome+capacitor-badge@7.0.1_@capacitor+core@7.2.0/node_modules/@capawesome/capacitor-badge/android')
 
diff --git a/src/lib/components/InputProfilePicture.svelte b/src/app/components/InputProfilePicture.svelte
similarity index 80%
rename from src/lib/components/InputProfilePicture.svelte
rename to src/app/components/InputProfilePicture.svelte
index a7a322d9..26252c5a 100644
--- a/src/lib/components/InputProfilePicture.svelte
+++ b/src/app/components/InputProfilePicture.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
-  import {randomId} from "@welshman/lib"
+  import {randomId, call} from "@welshman/lib"
   import {preventDefault, stopPropagation, compressFile} from "@lib/html"
   import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
   import AddCircle from "@assets/icons/add-circle.svg?dataurl"
   import GallerySend from "@assets/icons/gallery-send.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
+  import {uploadFile} from "@app/core/commands"
 
   interface Props {
     file?: File | undefined
@@ -47,20 +48,29 @@
   let initialUrl = $state(url)
 
   $effect(() => {
-    if (file) {
-      const reader = new FileReader()
+    call(async () => {
+      if (file) {
+        const {result} = await uploadFile(file)
 
-      reader.addEventListener(
-        "load",
-        () => {
-          url = reader.result as string
-        },
-        false,
-      )
-      reader.readAsDataURL(file)
-    } else {
-      url = initialUrl
-    }
+        if (result?.url) {
+          url = result.url
+        } else {
+          const reader = new FileReader()
+
+          reader.addEventListener(
+            "load",
+            () => {
+              url = reader.result as string
+            },
+            false,
+          )
+
+          reader.readAsDataURL(file)
+        }
+      } else {
+        url = initialUrl
+      }
+    })
   })
 </script>
 
diff --git a/src/app/components/ProfileEditForm.svelte b/src/app/components/ProfileEditForm.svelte
index aa9b33ec..8caaec01 100644
--- a/src/app/components/ProfileEditForm.svelte
+++ b/src/app/components/ProfileEditForm.svelte
@@ -8,7 +8,7 @@
   import Field from "@lib/components/Field.svelte"
   import FieldInline from "@lib/components/FieldInline.svelte"
   import Button from "@lib/components/Button.svelte"
-  import InputProfilePicture from "@lib/components/InputProfilePicture.svelte"
+  import InputProfilePicture from "@app/components/InputProfilePicture.svelte"
   import InfoHandle from "@app/components/InfoHandle.svelte"
   import {pushModal} from "@app/util/modal"
 
diff --git a/src/app/components/SpaceCreate.svelte b/src/app/components/SpaceCreate.svelte
index 233c5cf9..325381a4 100644
--- a/src/app/components/SpaceCreate.svelte
+++ b/src/app/components/SpaceCreate.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import {preventDefault} from "@lib/html"
-  import InputProfilePicture from "@lib/components/InputProfilePicture.svelte"
   import Button from "@lib/components/Button.svelte"
   import Field from "@lib/components/Field.svelte"
   import FireMinimalistic from "@assets/icons/fire-minimalistic.svg?dataurl"
@@ -11,6 +10,7 @@
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import InfoRelay from "@app/components/InfoRelay.svelte"
+  import InputProfilePicture from "@app/components/InputProfilePicture.svelte"
   import SpaceCreateFinish from "@app/components/SpaceCreateFinish.svelte"
   import {pushModal} from "@app/util/modal"
 
diff --git a/src/app/core/commands.ts b/src/app/core/commands.ts
index bf56e2b6..9a870013 100644
--- a/src/app/core/commands.ts
+++ b/src/app/core/commands.ts
@@ -3,6 +3,7 @@ import * as nip19 from "nostr-tools/nip19"
 import {get} from "svelte/store"
 import type {Override, MakeOptional} from "@welshman/lib"
 import {
+  sha256,
   randomId,
   append,
   remove,
@@ -16,7 +17,8 @@ import {
   fromPairs,
   last,
 } from "@welshman/lib"
-import {decrypt} from "@welshman/signer"
+import {decrypt, Nip01Signer} from "@welshman/signer"
+import type {UploadTask} from "@welshman/editor"
 import type {Feed} from "@welshman/feeds"
 import {makeIntersectionFeed, feedFromFilters, makeRelayFeed} from "@welshman/feeds"
 import type {TrustedEvent, EventContent} from "@welshman/util"
@@ -53,6 +55,10 @@ import {
   RelayMode,
   getAddress,
   getTagValue,
+  getTagValues,
+  uploadBlob,
+  encryptFile,
+  makeBlossomAuthEvent,
 } from "@welshman/util"
 import {Pool, AuthStatus, SocketStatus} from "@welshman/net"
 import {Router} from "@welshman/router"
@@ -75,7 +81,9 @@ import {
   tagEventForQuote,
   waitForThunkError,
   getPubkeyRelays,
+  userBlossomServers,
 } from "@welshman/app"
+import {compressFile} from "@src/lib/html"
 import type {SettingsValues, Alert} from "@app/core/state"
 import {
   SETTINGS,
@@ -649,3 +657,77 @@ export const enableGiftWraps = () => {
     ensureUnwrapped(event)
   }
 }
+
+// File upload
+
+export const getBlossomServer = () => {
+  const userUrls = getTagValues("server", getListTags(userBlossomServers.get()))
+
+  for (const url of userUrls) {
+    return url.replace(/^ws/, "http")
+  }
+
+  return "https://cdn.satellite.earth"
+}
+
+export type UploadFileOptions = {
+  encrypt?: boolean
+}
+
+export type UploadFileResult = {
+  error?: string
+  result?: UploadTask
+}
+
+export const uploadFile = async (file: File, options: UploadFileOptions = {}) => {
+  const {name, type} = file
+
+  if (!type.match("image/(webp|gif)")) {
+    file = await compressFile(file)
+  }
+
+  const tags: string[][] = []
+
+  if (options.encrypt) {
+    const {ciphertext, key, nonce, algorithm} = await encryptFile(file)
+
+    tags.push(
+      ["decryption-key", key],
+      ["decryption-nonce", nonce],
+      ["encryption-algorithm", algorithm],
+    )
+
+    file = new File([new Blob([ciphertext])], name, {
+      type: "application/octet-stream",
+    })
+  }
+
+  const server = getBlossomServer()
+  const hashes = [await sha256(await file.arrayBuffer())]
+  const $signer = signer.get() || Nip01Signer.ephemeral()
+  const authTemplate = makeBlossomAuthEvent({action: "upload", server, hashes})
+  const authEvent = await $signer.sign(authTemplate)
+
+  try {
+    const res = await uploadBlob(server, file, {authEvent})
+    const text = await res.text()
+
+    let {uploaded, url, ...task} = parseJson(text) || {}
+
+    if (!uploaded) {
+      return {error: text}
+    }
+
+    // Always append file extension if missing
+    if (new URL(url).pathname.split(".").length === 1) {
+      url += "." + type.split("/")[1]
+    }
+
+    const result = {...task, tags, url}
+
+    return {result}
+  } catch (e: any) {
+    console.error(e)
+    return {error: e.toString()}
+  }
+}
diff --git a/src/app/editor/index.ts b/src/app/editor/index.ts
index 3780c6d8..f7f140b0 100644
--- a/src/app/editor/index.ts
+++ b/src/app/editor/index.ts
@@ -1,33 +1,14 @@
 import {mount} from "svelte"
 import type {Writable} from "svelte/store"
 import {get} from "svelte/store"
-import {sha256, parseJson} from "@welshman/lib"
-import {
-  getTagValues,
-  encryptFile,
-  uploadBlob,
-  makeBlossomAuthEvent,
-  getListTags,
-} from "@welshman/util"
 import {Router} from "@welshman/router"
-import {Nip01Signer} from "@welshman/signer"
-import {signer, profileSearch, userBlossomServers} from "@welshman/app"
+import {profileSearch} from "@welshman/app"
 import type {FileAttributes} from "@welshman/editor"
 import {Editor, MentionSuggestion, WelshmanExtension} from "@welshman/editor"
-import {makeMentionNodeView} from "./MentionNodeView"
-import ProfileSuggestion from "./ProfileSuggestion.svelte"
+import {makeMentionNodeView} from "@app/editor/MentionNodeView"
+import ProfileSuggestion from "@app/editor/ProfileSuggestion.svelte"
+import {uploadFile} from "@app/core/commands"
 import {pushToast} from "@app/util/toast"
-import {compressFile} from "@src/lib/html"
-
-export const getBlossomServer = () => {
-  const userUrls = getTagValues("server", getListTags(userBlossomServers.get()))
-
-  for (const url of userUrls) {
-    return url.replace(/^ws/, "http")
-  }
-
-  return "https://cdn.satellite.earth"
-}
 
 export const makeEditor = async ({
   aggressive = false,
@@ -70,59 +51,9 @@ export const makeEditor = async ({
           },
           fileUpload: {
             config: {
-              upload: async (attrs: FileAttributes) => {
-                let file: Blob = attrs.file
-
-                if (!file.type.match("image/(webp|gif)")) {
-                  file = await compressFile(file)
-                }
-
-                const {ciphertext, key, nonce, algorithm} = await encryptFile(file)
-                const tags = [
-                  ["decryption-key", key],
-                  ["decryption-nonce", nonce],
-                  ["encryption-algorithm", algorithm],
-                ]
-
-                file = new File([new Blob([ciphertext])], attrs.file.name, {
-                  type: "application/octet-stream",
-                })
-
-                const server = getBlossomServer()
-                const hashes = [await sha256(await file.arrayBuffer())]
-                const $signer = signer.get() || Nip01Signer.ephemeral()
-                const authTemplate = makeBlossomAuthEvent({action: "upload", server, hashes})
-                const authEvent = await $signer.sign(authTemplate)
-
-                try {
-                  const res = await uploadBlob(server, file, {authEvent})
-                  const text = await res.text()
-
-                  let {uploaded, url, ...task} = parseJson(text) || {}
-
-                  if (!uploaded) {
-                    return {error: text}
-                  }
-
-                  // Always append file extension if missing
-                  if (new URL(url).pathname.split(".").length === 1) {
-                    url += "." + attrs.file.type.split("/")[1]
-                  }
-
-                  const result = {...task, tags, url}
-
-                  return {result}
-                } catch (e: any) {
-                  console.error(e)
-                  return {error: e.toString()}
-                }
-              },
-              onDrop() {
-                uploading?.set(true)
-              },
-              onComplete() {
-                uploading?.set(false)
-              },
+              upload: (attrs: FileAttributes) => uploadFile(attrs.file, {encrypt: true}),
+              onDrop: () => uploading?.set(true),
+              onComplete: () => uploading?.set(false),
               onUploadError(currentEditor, task) {
                 currentEditor.commands.removeFailedUploads()
                 pushToast({theme: "error", message: task.error})
diff --git a/src/lib/components/InputPicture.svelte b/src/lib/components/InputPicture.svelte
deleted file mode 100644
index dc3d6132..00000000
--- a/src/lib/components/InputPicture.svelte
+++ /dev/null
@@ -1,100 +0,0 @@
-<script lang="ts">
-  import {randomId} from "@welshman/lib"
-  import {preventDefault, stopPropagation, compressFile} from "@lib/html"
-  import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
-  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
-  import GallerySend from "@assets/icons/gallery-send.svg?dataurl"
-  import Icon from "@lib/components/Icon.svelte"
-
-  interface Props {
-    file?: File | undefined
-    url?: string | undefined
-  }
-
-  let {file = $bindable(undefined), url = $bindable(undefined)}: Props = $props()
-
-  const id = randomId()
-
-  const onDragEnter = () => {
-    active = true
-  }
-
-  const onDragOver = () => {
-    active = true
-  }
-
-  const onDragLeave = () => {
-    active = false
-  }
-
-  const onDrop = async (e: any) => {
-    active = false
-
-    file = await compressFile(e.dataTransfer.files[0])
-  }
-
-  const onChange = async (e: any) => {
-    file = await compressFile(e.target.files[0])
-  }
-
-  const onClear = () => {
-    initialUrl = undefined
-    file = undefined
-    url = undefined
-  }
-
-  let active = $state(false)
-  let initialUrl = $state(url)
-
-  $effect(() => {
-    if (file) {
-      const reader = new FileReader()
-
-      reader.addEventListener(
-        "load",
-        () => {
-          url = reader.result as string
-        },
-        false,
-      )
-
-      reader.readAsDataURL(file)
-    } else {
-      url = initialUrl
-    }
-  })
-</script>
-
-<form>
-  <input {id} type="file" accept="image/*" onchange={onChange} class="hidden" />
-  <label
-    for={id}
-    aria-label="Drag and drop files here."
-    style="background-image: url({url});"
-    class="relative flex h-24 w-24 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 border-dashed border-base-content bg-base-300 bg-cover bg-center transition-all"
-    class:border-primary={active}
-    ondragenter={stopPropagation(preventDefault(onDragEnter))}
-    ondragover={stopPropagation(preventDefault(onDragOver))}
-    ondragleave={stopPropagation(preventDefault(onDragLeave))}
-    ondrop={stopPropagation(preventDefault(onDrop))}>
-    <div
-      class="absolute right-0 top-0 h-5 w-5 overflow-hidden rounded-full bg-primary"
-      class:bg-error={file}
-      class:bg-primary={!file}>
-      {#if file}
-        <span
-          role="button"
-          tabindex="-1"
-          onmousedown={stopPropagation(onClear)}
-          ontouchstart={stopPropagation(onClear)}>
-          <Icon icon={CloseCircle} class="scale-150 !bg-base-300" />
-        </span>
-      {:else}
-        <Icon icon={AddCircle} class="scale-150 !bg-base-300" />
-      {/if}
-    </div>
-    {#if !file}
-      <Icon icon={GallerySend} size={7} />
-    {/if}
-  </label>
-</form>