show contact's or user's icon in more places

src/views/AccountViewView.vue

@@ -63,36 +63,14 @@
 
     <!-- Identity Details -->
     <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
-      <h2 v-if="givenName" class="text-xl font-semibold mb-2">
-        {{ givenName }}
-        <router-link :to="{ name: 'new-edit-account' }">
-          <fa icon="pen" class="text-xs text-blue-500 mb-1"></fa>
-        </router-link>
-        <div class="flex justify-center mt-4">
-          <span v-if="profileImageUrl" class="flex justify-between">
-            <a
-              :href="profileImageUrl"
-              target="_blank"
-              class="text-blue-500 ml-4"
-            >
-              <img :src="profileImageUrl" class="h-24 rounded-xl" />
-            </a>
-            <fa
-              icon="trash-can"
-              @click="confirmDeleteImage"
-              class="text-red-500 fa-fw ml-8 mt-10"
-            />
-          </span>
-          <span v-else>
-            <fa
-              icon="camera"
-              class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-2 rounded-md"
-              @click="openPhotoDialog"
-            />
-          </span>
-          <GiftedPhotoDialog ref="photoDialog" />
-        </div>
-      </h2>
+      <div v-if="givenName">
+        <h2 class="text-xl font-semibold mb-2">
+          {{ givenName }}
+          <router-link :to="{ name: 'new-edit-account' }">
+            <fa icon="pen" class="text-xs text-blue-500 mb-1"></fa>
+          </router-link>
+        </h2>
+      </div>
       <span v-else>
         <router-link
           :to="{ name: 'new-edit-account' }"
@@ -101,6 +79,61 @@
           Set Your Name
         </router-link>
       </span>
+      <div class="flex justify-center mt-4">
+        <span v-if="profileImageUrl" class="flex justify-between">
+          <EntityIcon
+            :icon-size="96"
+            :profileImageUrl="profileImageUrl"
+            class="inline-block align-text-bottom border border-slate-300 rounded"
+            @click="showLargeIdenticonUrl = profileImageUrl"
+          />
+          <fa
+            icon="trash-can"
+            @click="confirmDeleteImage"
+            class="text-red-500 fa-fw ml-8 mt-8 w-12 h-12"
+          />
+        </span>
+        <span v-else>
+          <fa
+            icon="camera"
+            class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-2 rounded-md"
+            @click="openPhotoDialog"
+          />
+        </span>
+        <GiftedPhotoDialog ref="photoDialog" />
+      </div>
+      <div class="mt-4">
+        <div class="flex justify-center">
+          ... and those without your image see this:
+        </div>
+        <div class="flex justify-center">
+          <EntityIcon
+            :entityId="activeDid"
+            :iconSize="64"
+            class="inline-block align-middle border border-slate-300 rounded-md mr-1"
+            @click="showLargeIdenticonId = activeDid"
+          />
+        </div>
+      </div>
+      <div
+        v-if="showLargeIdenticonId || showLargeIdenticonUrl"
+        class="fixed z-[100] top-0 inset-x-0 w-full"
+      >
+        <div
+          class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
+        >
+          <EntityIcon
+            :entityId="showLargeIdenticonId"
+            :iconSize="512"
+            :profileImageUrl="showLargeIdenticonUrl"
+            class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
+            @click="
+              showLargeIdenticonId = undefined;
+              showLargeIdenticonUrl = undefined;
+            "
+          />
+        </div>
+      </div>
 
       <div class="text-slate-500 text-sm font-bold">ID</div>
       <div class="text-sm text-slate-500 flex justify-start items-center mb-1">
@@ -580,6 +613,8 @@ import {
   ImageRateLimits,
 } from "@/libs/endorserServer";
 import { Buffer } from "buffer/";
+import EntityIcon from "@/components/EntityIcon.vue";
+import {Contact} from "@/db/tables/contacts";
 
 interface IAccount {
   did: string;
@@ -591,7 +626,7 @@ interface IAccount {
 const inputFileNameRef = ref<Blob>();
 
 @Component({
-  components: { GiftedPhotoDialog, QuickNav, TopMessage },
+  components: {EntityIcon, GiftedPhotoDialog, QuickNav, TopMessage },
 })
 export default class AccountViewView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
@@ -614,6 +649,8 @@ export default class AccountViewView extends Vue {
   profileImageUrl?: string;
   publicHex = "";
   publicBase64 = "";
+  showLargeIdenticonId?: string;
+  showLargeIdenticonUrl?: string;
   webPushServer = "";
   webPushServerInput = "";
 
@@ -1290,14 +1327,18 @@ export default class AccountViewView extends Vue {
   }
 
   openPhotoDialog() {
-    (this.$refs.photoDialog as GiftedPhotoDialog).open(async (imgUrl) => {
-      await db.open();
-      db.settings.update(MASTER_SETTINGS_KEY, {
-        profileImageUrl: imgUrl,
-      });
-      this.profileImageUrl = imgUrl;
-      //console.log("Got image URL:", imgUrl);
-    }, true);
+    (this.$refs.photoDialog as GiftedPhotoDialog).open(
+      async (imgUrl) => {
+        await db.open();
+        db.settings.update(MASTER_SETTINGS_KEY, {
+          profileImageUrl: imgUrl,
+        });
+        this.profileImageUrl = imgUrl;
+        //console.log("Got image URL:", imgUrl);
+      },
+      true,
+      "profile",
+    );
   }
 
   confirmDeleteImage() {
@@ -1351,14 +1392,14 @@ export default class AccountViewView extends Vue {
         return;
       }
 
-      this.profileImageUrl = "";
+      this.profileImageUrl = undefined;
     } catch (error) {
       console.error("Error deleting image:", error);
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       if ((error as any).response.status === 404) {
         console.log("The image was already deleted:", error);
 
-        this.profileImageUrl = "";
+        this.profileImageUrl = undefined;
 
         // it already doesn't exist so we won't say anything to the user
       } else {