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

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

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>