feat(feed): improving the image viewer, to be more conventional, and also allowing the viewer to download the image on mobile with ... control

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;
   }