allow file choice for gift, plus other UI fixes

src/views/AccountViewView.vue

@@ -87,22 +87,23 @@
           />
         </span>
         <div v-else class="text-center">
-          <div class>
+          <div class @click="openImageDialog()">
             <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(undefined, undefined)"
+              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-l"
+            />
+            <fa
+              icon="image-portrait"
+              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-r"
+              @click="openImageDialog()"
             />
           </div>
-          <div>
-            <input type="file" @change="uploadPhotoFile" />
-          </div>
         </div>
-        <PhotoDialog ref="photoDialog" />
+        <ImageMethodDialog ref="imageMethodDialog" />
       </div>
       <div class="mt-6">
         <div class="flex justify-center text-center">
-          People without your image see this:
+          People {{ profileImageUrl ? "without your image" : "" }} see this:
           <br />
           (if you've let them see your activity)
         </div>
@@ -620,7 +621,7 @@ import { ref } from "vue";
 import { Component, Vue } from "vue-facing-decorator";
 import { useClipboard } from "@vueuse/core";
 
-import PhotoDialog from "@/components/PhotoDialog.vue";
+import ImageMethodDialog from "@/components/ImageMethodDialog.vue";
 import QuickNav from "@/components/QuickNav.vue";
 import TopMessage from "@/components/TopMessage.vue";
 import {
@@ -652,10 +653,9 @@ interface IAccount {
 }
 
 const inputImportFileNameRef = ref<Blob>();
-const inputPhotoFileNameRef = ref<Blob>();
 
 @Component({
-  components: { EntityIcon, PhotoDialog, QuickNav, TopMessage },
+  components: { EntityIcon, ImageMethodDialog, QuickNav, TopMessage },
 })
 export default class AccountViewView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
@@ -698,13 +698,13 @@ export default class AccountViewView extends Vue {
   warnIfTestServer = false;
 
   /**
-   * Async function executed when the component is created.
+   * Async function executed when the component is mounted.
    * Initializes the component's state with values from the database,
    * handles identity-related tasks, and checks limitations.
    *
    * @throws Will display specific messages to the user based on different errors.
    */
-  async created() {
+  async mounted() {
     try {
       await db.open();
 
@@ -718,18 +718,13 @@ export default class AccountViewView extends Vue {
       if (identity) {
         this.processIdentity(identity);
       }
-    } catch (err: unknown) {
-      this.handleError(err);
-    }
-  }
 
-  async mounted() {
-    try {
       const registration = await navigator.serviceWorker.ready;
       this.subscription = await registration.pushManager.getSubscription();
       this.isSubscribed = !!this.subscription;
     } catch (error) {
       console.error("Mount error:", error);
+      this.handleError(error);
     }
   }
 
@@ -1127,26 +1122,6 @@ export default class AccountViewView extends Vue {
     console.error("Export Error:", error);
   }
 
-  async uploadPhotoFile(event: Event) {
-    inputPhotoFileNameRef.value = event.target.files[0];
-    // https://developer.mozilla.org/en-US/docs/Web/API/File
-    // ... plus it has a `type` property from my testing
-    const file = inputPhotoFileNameRef.value;
-    if (file != null) {
-      const reader = new FileReader();
-      reader.onload = async (e) => {
-        const data = e.target?.result as ArrayBuffer;
-        if (data) {
-          const blob = new Blob([new Uint8Array(data)], {
-            type: file.type,
-          });
-          this.openPhotoDialog(blob, file.name as string);
-        }
-      };
-      reader.readAsArrayBuffer(file as Blob);
-    }
-  }
-
   async uploadImportFile(event: Event) {
     inputImportFileNameRef.value = event.target.files[0];
   }
@@ -1393,8 +1368,8 @@ export default class AccountViewView extends Vue {
     );
   }
 
-  openPhotoDialog(blob?: Blob, fileName?: string) {
-    (this.$refs.photoDialog as PhotoDialog).open(
+  openImageDialog() {
+    (this.$refs.imageMethodDialog as ImageMethodDialog).open(
       async (imgUrl) => {
         await db.open();
         db.settings.update(MASTER_SETTINGS_KEY, {
@@ -1403,10 +1378,8 @@ export default class AccountViewView extends Vue {
         this.profileImageUrl = imgUrl;
         //console.log("Got image URL:", imgUrl);
       },
-      true,
       IMAGE_TYPE_PROFILE,
-      blob,
-      fileName,
+      true,
     );
   }