Merge branch 'master' into split_build_process

fix: image server references and test configurations

- Update image server references to use test server by default for local dev
- Fix registration status checks in tests
- Remove verbose console logging
- Update environment configurations for consistent image server usage
- Fix alert handling in contact registration tests
- Clean up component lifecycle logging
- Add clarifying comments about shared image server usage
- Update playwright test configurations for better reliability

This commit ensures consistent image server behavior across environments
and improves test reliability by properly handling registration status
checks and alerts.

src/views/HomeView.vue

@@ -281,7 +281,7 @@
                   />
                 </span>
               </span>
-              <span class="col-span-10 justify-self-stretch">
+              <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="
@@ -315,7 +315,7 @@
                   />
                 </span>
                 -->
-                <span class="pl-2">
+                <span class="pl-2 block break-words">
                   {{ giveDescription(record) }}
                 </span>
                 <a @click="onClickLoadClaim(record.jwtId)">
@@ -346,10 +346,18 @@
                 </router-link>
               </span>
             </div>
-            <div v-if="record.image" class="flex justify-center">
-              <a :href="record.image" target="_blank">
-                <img :src="record.image" class="h-48 mt-2 rounded-xl" />
-              </a>
+            <div v-if="record.image" class="w-full">
+              <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"
+                  @load="cacheImageData($event, record.image)"
+                />
+              </div>
             </div>
           </li>
         </ul>
@@ -368,6 +376,12 @@
   </section>
 
   <ChoiceButtonDialog ref="choiceButtonDialog" />
+
+  <ImageViewer
+    :image-url="selectedImage"
+    :image-data="selectedImageData"
+    v-model:is-open="isImageViewerOpen"
+  />
 </template>
 
 <script lang="ts">
@@ -386,6 +400,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,
@@ -450,6 +465,7 @@ interface GiveRecordWithContactInfo extends GiveSummaryRecord {
     QuickNav,
     TopMessage,
     UserNameDialog,
+    ImageViewer,
   },
 })
 export default class HomeView extends Vue {
@@ -485,6 +501,10 @@ 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 {
@@ -966,5 +986,21 @@ export default class HomeView extends Vue {
       },
     });
   }
+
+  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;
+  }
 }
 </script>