From 53a06be734a757dc08f27df5474023388a5e5533 Mon Sep 17 00:00:00 2001
From: Jason Buchanan <jsnbuchanan@gmail.com>
Date: Fri, 7 Feb 2025 10:04:38 -0700
Subject: [PATCH 1/8] deps: updated `nostr-tools` and import

---
 package.json                     |  2 +-
 src/views/NewEditProjectView.vue | 12 +-----------
 2 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 79af24ef..f5ca83ce 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,7 @@
     "lru-cache": "^10.2.0",
     "luxon": "^3.4.4",
     "merkletreejs": "^0.3.11",
-    "nostr-tools": "^2.7.2",
+    "nostr-tools": "^2.10.4",
     "notiwind": "^2.0.2",
     "papaparse": "^5.4.1",
     "pina": "^0.20.2204228",
diff --git a/src/views/NewEditProjectView.vue b/src/views/NewEditProjectView.vue
index fe2811ed..2a99e914 100644
--- a/src/views/NewEditProjectView.vue
+++ b/src/views/NewEditProjectView.vue
@@ -230,17 +230,7 @@ import "leaflet/dist/leaflet.css";
 import { AxiosError, AxiosRequestHeaders } from "axios";
 import { DateTime } from "luxon";
 import { hexToBytes } from "@noble/hashes/utils";
-// these core imports could also be included as "import type ..."
-import {
-  EventTemplate,
-  UnsignedEvent,
-  VerifiedEvent,
-} from "nostr-tools/lib/types/core";
-import {
-  accountFromExtendedKey,
-  extendedKeysFromSeedWords,
-} from "nostr-tools/nip06";
-import { finalizeEvent, serializeEvent } from "nostr-tools/pure";
+import { finalizeEvent, serializeEvent } from "nostr-tools";
 import { Component, Vue } from "vue-facing-decorator";
 import { LMap, LMarker, LTileLayer } from "@vue-leaflet/vue-leaflet";
 import { RouteLocationNormalizedLoaded, Router } from "vue-router";

From 781afd8954c345573b559b2fe81e1df919532d21 Mon Sep 17 00:00:00 2001
From: Jason Buchanan <jsnbuchanan@gmail.com>
Date: Fri, 14 Feb 2025 09:58:55 -0700
Subject: [PATCH 2/8] feat(feed): better image formatting, to take up the width
 of the feed container

---
 src/views/HomeView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 2db6c187..84d5bfde 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -346,9 +346,9 @@
                 </router-link>
               </span>
             </div>
-            <div v-if="record.image" class="flex justify-center">
+            <div v-if="record.image" class="w-full">
               <a :href="record.image" target="_blank">
-                <img :src="record.image" class="h-48 mt-2 rounded-xl" />
+                <img :src="record.image" class="w-full aspect-[3/2] object-cover rounded-xl mt-2" />
               </a>
             </div>
           </li>

From 77ebd329562fdab18f773014321bc33150a41bfa Mon Sep 17 00:00:00 2001
From: Jason Buchanan <jsnbuchanan@gmail.com>
Date: Fri, 14 Feb 2025 09:59:47 -0700
Subject: [PATCH 3/8] deps: updating the nostr-tools version from 2.7.2 to
 2.10.4 to fix a bug I was seeing locally

---
 package-lock.json | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ea064aef..2c15992a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -54,7 +54,7 @@
         "lru-cache": "^10.2.0",
         "luxon": "^3.4.4",
         "merkletreejs": "^0.3.11",
-        "nostr-tools": "^2.7.2",
+        "nostr-tools": "^2.10.4",
         "notiwind": "^2.0.2",
         "papaparse": "^5.4.1",
         "pina": "^0.20.2204228",
@@ -18905,9 +18905,10 @@
       }
     },
     "node_modules/nostr-tools": {
-      "version": "2.7.2",
-      "resolved": "https://registry.npmjs.org/nostr-tools/-/nostr-tools-2.7.2.tgz",
-      "integrity": "sha512-Bq3Ug0SZFtgtL1+0wCnAe8AJtI7yx/00/a2nUug9SkhfOwlKS92Tef12iCK9FdwXw+oFZWMtRnSwcLayQso+xA==",
+      "version": "2.10.4",
+      "resolved": "https://registry.npmjs.org/nostr-tools/-/nostr-tools-2.10.4.tgz",
+      "integrity": "sha512-biU7sk+jxHgVASfobg2T5ttxOGGSt69wEVBC51sHHOEaKAAdzHBLV/I2l9Rf61UzClhliZwNouYhqIso4a3HYg==",
+      "license": "Unlicense",
       "dependencies": {
         "@noble/ciphers": "^0.5.1",
         "@noble/curves": "1.2.0",
@@ -18917,7 +18918,7 @@
         "@scure/bip39": "1.2.1"
       },
       "optionalDependencies": {
-        "nostr-wasm": "v0.1.0"
+        "nostr-wasm": "0.1.0"
       },
       "peerDependencies": {
         "typescript": ">=5.0.0"

From be1146c7df6e2b2d021008c0c35485e5022e327f Mon Sep 17 00:00:00 2001
From: Jason Buchanan <jsnbuchanan@gmail.com>
Date: Fri, 14 Feb 2025 11:46:17 -0700
Subject: [PATCH 4/8] fix(feed): long words or urls displayed in feed break the
 container layout

---
 src/views/HomeView.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 84d5bfde..245ca591 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -281,8 +281,8 @@
                   />
                 </span>
               </span>
-              <span class="col-span-10 justify-self-stretch">
-                <!-- show giver and/or receiver profiles... which seemed like a good idea but actually adds clutter
+              <span class="col-span-10 justify-self-stretch overflow-hidden">
+                 <!-- show giver and/or receiver profiles... which seemed like a good idea but actually adds clutter
                 <span
                   v-if="
                     record.giver.profileImageUrl ||
@@ -315,7 +315,7 @@
                   />
                 </span>
                 -->
-                <span class="pl-2">
+                <span class="pl-2 block break-words">
                   {{ giveDescription(record) }}
                 </span>
                 <a @click="onClickLoadClaim(record.jwtId)">

From 0511bbc17b33d33ee3599c855b58ad7e78825f28 Mon Sep 17 00:00:00 2001
From: Jason Buchanan <jsnbuchanan@gmail.com>
Date: Fri, 14 Feb 2025 11:52:20 -0700
Subject: [PATCH 5/8] feat(feed): adding image viewer for expanding images
 found in the feed instead of displaying in a new tab and taking the viewer
 away from the application

---
 src/components/ImageViewer.vue | 51 ++++++++++++++++++++++++++++++++++
 src/views/HomeView.vue         | 24 ++++++++++++++--
 2 files changed, 72 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ImageViewer.vue

diff --git a/src/components/ImageViewer.vue b/src/components/ImageViewer.vue
new file mode 100644
index 00000000..f821f0d5
--- /dev/null
+++ b/src/components/ImageViewer.vue
@@ -0,0 +1,51 @@
+<template>
+  <Teleport to="body">
+    <Transition name="fade">
+      <div
+        v-if="isOpen"
+        class="fixed inset-0 z-50 flex items-center justify-center bg-black/90"
+        @click="close"
+      >
+        <button
+          class="absolute top-4 right-4 text-white text-2xl p-2 rounded-full hover:bg-white/10"
+          @click="close"
+        >
+          <fa icon="xmark" />
+        </button>
+
+        <img
+          :src="imageUrl"
+          class="max-h-screen max-w-screen-md w-full object-contain p-4"
+          @click.stop
+          alt="expanded shared content"
+        />
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-facing-decorator";
+
+@Component
+export default class ImageViewer extends Vue {
+  @Prop() imageUrl!: string;
+  @Prop() isOpen!: boolean;
+
+  close() {
+    this.$emit("update:isOpen", false);
+  }
+}
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 245ca591..44023e84 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -347,9 +347,16 @@
               </span>
             </div>
             <div v-if="record.image" class="w-full">
-              <a :href="record.image" target="_blank">
-                <img :src="record.image" class="w-full aspect-[3/2] object-cover rounded-xl mt-2" />
-              </a>
+              <div
+                class="cursor-pointer"
+                @click="openImageViewer(record.image)"
+              >
+                <img
+                  :src="record.image"
+                  class="w-full aspect-[3/2] object-cover rounded-xl mt-2"
+                  alt="shared content"
+                />
+              </div>
             </div>
           </li>
         </ul>
@@ -368,6 +375,8 @@
   </section>
 
   <ChoiceButtonDialog ref="choiceButtonDialog" />
+
+  <ImageViewer :image-url="selectedImage" v-model:is-open="isImageViewerOpen" />
 </template>
 
 <script lang="ts">
@@ -386,6 +395,7 @@ import QuickNav from "@/components/QuickNav.vue";
 import TopMessage from "@/components/TopMessage.vue";
 import UserNameDialog from "@/components/UserNameDialog.vue";
 import ChoiceButtonDialog from "@/components/ChoiceButtonDialog.vue";
+import ImageViewer from "@/components/ImageViewer.vue";
 import {
   AppString,
   NotificationIface,
@@ -455,6 +465,7 @@ interface GiveRecordWithContactInfo extends GiveSummaryRecord {
     QuickNav,
     TopMessage,
     UserNameDialog,
+    ImageViewer,
   },
 })
 export default class HomeView extends Vue {
@@ -489,6 +500,8 @@ export default class HomeView extends Vue {
   }> = [];
   showShortcutBvc = false;
   userAgentInfo = new UAParser(); // see https://docs.uaparser.js.org/v2/api/ua-parser-js/get-os.html
+  selectedImage = "";
+  isImageViewerOpen = false;
 
   async mounted() {
     try {
@@ -970,5 +983,10 @@ export default class HomeView extends Vue {
       },
     });
   }
+
+  openImageViewer(imageUrl: string) {
+    this.selectedImage = imageUrl;
+    this.isImageViewerOpen = true;
+  }
 }
 </script>

From f4c7805266ecb75630db59b8ddff308ec6ddce44 Mon Sep 17 00:00:00 2001
From: Jason Buchanan <jsnbuchanan@gmail.com>
Date: Fri, 14 Feb 2025 13:06:36 -0700
Subject: [PATCH 6/8] feat(feed): improving the image viewer, to be more
 conventional, and also allowing the viewer to download the image on mobile
 with `...` control

---
 src/components/ImageViewer.vue | 78 +++++++++++++++++++++++++++-------
 src/views/HomeView.vue         | 24 +++++++++--
 2 files changed, 83 insertions(+), 19 deletions(-)

diff --git a/src/components/ImageViewer.vue b/src/components/ImageViewer.vue
index f821f0d5..a2bf9f60 100644
--- a/src/components/ImageViewer.vue
+++ b/src/components/ImageViewer.vue
@@ -3,22 +3,38 @@
     <Transition name="fade">
       <div
         v-if="isOpen"
-        class="fixed inset-0 z-50 flex items-center justify-center bg-black/90"
-        @click="close"
+        class="fixed inset-0 z-50 flex flex-col bg-black/90"
       >
-        <button
-          class="absolute top-4 right-4 text-white text-2xl p-2 rounded-full hover:bg-white/10"
-          @click="close"
-        >
-          <fa icon="xmark" />
-        </button>
-
-        <img
-          :src="imageUrl"
-          class="max-h-screen max-w-screen-md w-full object-contain p-4"
-          @click.stop
-          alt="expanded shared content"
-        />
+        <!-- Header bar - fixed height to prevent overlap -->
+        <div class="h-16 flex justify-between items-center px-4 bg-black">
+          <button
+            class="text-white text-2xl p-2 rounded-full hover:bg-white/10"
+            @click="close"
+          >
+            <fa icon="xmark" />
+          </button>
+
+          <!-- Mobile share button -->
+          <button
+            v-if="isMobile"
+            class="text-white text-xl p-2 rounded-full hover:bg-white/10"
+            @click="handleShare"
+          >
+            <fa icon="ellipsis" />
+          </button>
+        </div>
+
+        <!-- Image container - fill remaining space -->
+        <div class="flex-1 flex items-center justify-center p-2">
+          <div class="w-full h-full flex items-center justify-center">
+            <img
+              :src="imageUrl"
+              class="max-h-[calc(100vh-5rem)] w-full h-full object-contain"
+              @click.stop
+              alt="expanded shared content"
+            />
+          </div>
+        </div>
       </div>
     </Transition>
   </Teleport>
@@ -26,15 +42,45 @@
 
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-facing-decorator";
+import { UAParser } from "ua-parser-js";
 
-@Component
+@Component({ emits: ["update:isOpen"] })
 export default class ImageViewer extends Vue {
   @Prop() imageUrl!: string;
+  @Prop() imageData!: Blob | null;
   @Prop() isOpen!: boolean;
 
+  userAgent = new UAParser();
+
+  get isMobile() {
+    const os = this.userAgent.getOS().name;
+    return os === "iOS" || os === "Android";
+  }
+
   close() {
     this.$emit("update:isOpen", false);
   }
+
+  async handleShare() {
+    const os = this.userAgent.getOS().name;
+
+    try {
+      if (os === "iOS" || os === "Android") {
+        if (navigator.share) {
+          // Always share the URL since it's more reliable across platforms
+          await navigator.share({
+            url: this.imageUrl
+          });
+        } else {
+          // Fallback for browsers without share API
+          window.open(this.imageUrl, "_blank");
+        }
+      }
+    } catch (error) {
+      console.warn("Share failed, opening in new tab:", error);
+      window.open(this.imageUrl, "_blank");
+    }
+  }
 }
 </script>
 
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 44023e84..c62d3b43 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -282,7 +282,7 @@
                 </span>
               </span>
               <span class="col-span-10 justify-self-stretch overflow-hidden">
-                 <!-- show giver and/or receiver profiles... which seemed like a good idea but actually adds clutter
+                <!-- show giver and/or receiver profiles... which seemed like a good idea but actually adds clutter
                 <span
                   v-if="
                     record.giver.profileImageUrl ||
@@ -355,6 +355,7 @@
                   :src="record.image"
                   class="w-full aspect-[3/2] object-cover rounded-xl mt-2"
                   alt="shared content"
+                  @load="cacheImageData($event, record.image)"
                 />
               </div>
             </div>
@@ -376,7 +377,11 @@
 
   <ChoiceButtonDialog ref="choiceButtonDialog" />
 
-  <ImageViewer :image-url="selectedImage" v-model:is-open="isImageViewerOpen" />
+  <ImageViewer
+    :image-url="selectedImage"
+    :image-data="selectedImageData"
+    v-model:is-open="isImageViewerOpen"
+  />
 </template>
 
 <script lang="ts">
@@ -501,7 +506,9 @@ export default class HomeView extends Vue {
   showShortcutBvc = false;
   userAgentInfo = new UAParser(); // see https://docs.uaparser.js.org/v2/api/ua-parser-js/get-os.html
   selectedImage = "";
+  selectedImageData: Blob | null = null;
   isImageViewerOpen = false;
+  imageCache: Map<string, Blob | null> = new Map();
 
   async mounted() {
     try {
@@ -984,7 +991,18 @@ export default class HomeView extends Vue {
     });
   }
 
-  openImageViewer(imageUrl: string) {
+  async cacheImageData(event: Event, imageUrl: string) {
+    try {
+      // For images that might fail CORS, just store the URL
+      // The Web Share API will handle sharing the URL appropriately
+      this.imageCache.set(imageUrl, null);
+    } catch (error) {
+      console.warn("Failed to cache image:", error);
+    }
+  }
+
+  async openImageViewer(imageUrl: string) {
+    this.selectedImageData = this.imageCache.get(imageUrl) ?? null;
     this.selectedImage = imageUrl;
     this.isImageViewerOpen = true;
   }

From e86cf3c9f2ad2779e716d309000fa1c9d8c00890 Mon Sep 17 00:00:00 2001
From: Jason Buchanan <jsnbuchanan@gmail.com>
Date: Fri, 14 Feb 2025 13:24:29 -0700
Subject: [PATCH 7/8] deps: fixing issues around nostr-tools deps being removed
 that were necessary

---
 src/views/NewEditProjectView.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/views/NewEditProjectView.vue b/src/views/NewEditProjectView.vue
index 2a99e914..ffdf0c08 100644
--- a/src/views/NewEditProjectView.vue
+++ b/src/views/NewEditProjectView.vue
@@ -230,6 +230,15 @@ import "leaflet/dist/leaflet.css";
 import { AxiosError, AxiosRequestHeaders } from "axios";
 import { DateTime } from "luxon";
 import { hexToBytes } from "@noble/hashes/utils";
+import {
+  EventTemplate,
+  UnsignedEvent,
+  VerifiedEvent,
+} from "nostr-tools/lib/types/core";
+import {
+  accountFromExtendedKey,
+  extendedKeysFromSeedWords,
+} from "nostr-tools/lib/types/nip06";
 import { finalizeEvent, serializeEvent } from "nostr-tools";
 import { Component, Vue } from "vue-facing-decorator";
 import { LMap, LMarker, LTileLayer } from "@vue-leaflet/vue-leaflet";

From 6fc416d7596305cf94905bcad29d5ab2424bd9df Mon Sep 17 00:00:00 2001
From: Jason Buchanan <jsnbuchanan@gmail.com>
Date: Fri, 14 Feb 2025 13:39:07 -0700
Subject: [PATCH 8/8] chore: cleanup in prep for pull request

---
 src/views/NewEditProjectView.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/views/NewEditProjectView.vue b/src/views/NewEditProjectView.vue
index ffdf0c08..543ab0fc 100644
--- a/src/views/NewEditProjectView.vue
+++ b/src/views/NewEditProjectView.vue
@@ -230,6 +230,7 @@ import "leaflet/dist/leaflet.css";
 import { AxiosError, AxiosRequestHeaders } from "axios";
 import { DateTime } from "luxon";
 import { hexToBytes } from "@noble/hashes/utils";
+// these core imports could also be included as "import type ..."
 import {
   EventTemplate,
   UnsignedEvent,