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/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>