Merge branch 'gifting-periphery-improvements' into build-improvement

src/components/GiftedDialog.vue

@@ -3,7 +3,7 @@
     <div class="dialog">
       <!-- Step 1: Entity Selection -->
       <EntitySelectionStep
-        v-show="currentStep === 1"
+        v-show="firstStep"
         :step-type="stepType"
         :giver-entity-type="giverEntityType"
         :recipient-entity-type="recipientEntityType"
@@ -24,7 +24,7 @@
 
       <!-- Step 2: Gift Details -->
       <GiftDetailsStep
-        v-show="currentStep === 2"
+        v-show="!firstStep"
         :giver="giver"
         :receiver="receiver"
         :giver-entity-type="giverEntityType"
@@ -52,6 +52,7 @@
 
 <script lang="ts">
 import { Vue, Component, Prop, Watch } from "vue-facing-decorator";
+import { Vue, Component, Prop, Watch } from "vue-facing-decorator";
 
 import { NotificationIface } from "../constants/app";
 import {
@@ -59,6 +60,7 @@ import {
   didInfo,
   serverMessageForUser,
   getHeaders,
+  getHeaders,
 } from "../libs/endorserServer";
 import * as libsUtil from "../libs/util";
 import { db, retrieveSettingsForActiveAccount } from "../db/index";
@@ -99,6 +101,23 @@ export default class GiftedDialog extends Vue {
     this.updateEntityTypes();
   }
 
+  @Watch("toProjectId")
+  onToProjectIdChange() {
+    this.updateEntityTypes();
+  }
+  @Prop({ default: false }) showProjects = false;
+  @Prop() isFromProjectView = false;
+
+  @Watch("showProjects")
+  onShowProjectsChange() {
+    this.updateEntityTypes();
+  }
+
+  @Watch("fromProjectId")
+  onFromProjectIdChange() {
+    this.updateEntityTypes();
+  }
+
   @Watch("toProjectId")
   onToProjectIdChange() {
     this.updateEntityTypes();
@@ -113,14 +132,14 @@ export default class GiftedDialog extends Vue {
   callbackOnSuccess?: (amount: number) => void = () => {};
   customTitle?: string;
   description = "";
+  firstStep = true; // true = Step 1 (giver/recipient selection), false = Step 2 (amount/description)
   giver?: libsUtil.GiverReceiverInputInfo; // undefined means no identified giver agent
   offerId = "";
   prompt = "";
   receiver?: libsUtil.GiverReceiverInputInfo;
   unitCode = "HUR";
   visible = false;
-  currentStep = 1;
+  
-
   libsUtil = libsUtil;
 
   projects: PlanData[] = [];
@@ -222,12 +241,15 @@ export default class GiftedDialog extends Vue {
     this.amountInput = "0";
     this.callbackOnSuccess = callbackOnSuccess;
     this.offerId = offerId || "";
-    this.currentStep = giver ? 2 : 1;
+    this.firstStep = !giver;
     this.stepType = "giver";
 
     // Update entity types based on current props
     this.updateEntityTypes();
 
+    // Update entity types based on current props
+    this.updateEntityTypes();
+
     try {
       let settings = await databaseUtil.retrieveSettingsForActiveAccount();
       this.apiServer = settings.apiServer || "";
@@ -313,7 +335,7 @@ export default class GiftedDialog extends Vue {
     this.amountInput = "0";
     this.prompt = "";
     this.unitCode = "HUR";
-    this.currentStep = 1;
+    this.firstStep = true;
   }
 
   async confirm() {
@@ -355,6 +377,20 @@ export default class GiftedDialog extends Vue {
       );
       return;
     }
+    
+    // Check for person conflict
+    if (this.hasPersonConflict) {
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "You cannot select the same person as both giver and recipient.",
+        },
+        3000,
+      );
+      return;
+    }
 
     // Check for person conflict
     if (this.hasPersonConflict) {
@@ -446,14 +482,18 @@ export default class GiftedDialog extends Vue {
         this.activeDid,
         fromDid,
         toDid,
+        fromDid,
+        toDid,
         description,
         amount,
         unitCode,
         fulfillsProjectHandleId,
+        fulfillsProjectHandleId,
         this.offerId,
         false,
         undefined,
         providerPlanHandleId,
+        providerPlanHandleId,
       );
 
       if (!result.success) {
@@ -540,12 +580,12 @@ export default class GiftedDialog extends Vue {
         name: "Unnamed",
       };
     }
-    this.currentStep = 2;
+    this.firstStep = false;
   }
 
   goBackToStep1(step: string) {
     this.stepType = step;
-    this.currentStep = 1;
+    this.firstStep = true;
   }
 
   async loadProjects() {
@@ -588,7 +628,7 @@ export default class GiftedDialog extends Vue {
       did: this.activeDid,
       name: "You",
     };
-    this.currentStep = 2;
+    this.firstStep = false;
   }
 
   selectRecipient(contact?: Contact) {
@@ -603,7 +643,7 @@ export default class GiftedDialog extends Vue {
         name: "Unnamed",
       };
     }
-    this.currentStep = 2;
+    this.firstStep = false;
   }
 
   selectRecipientProject(project: PlanData) {
@@ -613,7 +653,7 @@ export default class GiftedDialog extends Vue {
       image: project.image,
       handleId: project.handleId,
     };
-    this.currentStep = 2;
+    this.firstStep = false;
   }
 
   // Computed property for the query parameters

src/libs/fontawesome.ts

@@ -61,6 +61,7 @@ import {
   faLightbulb,
   faLink,
   faLocationDot,
+  faLock,
   faLongArrowAltLeft,
   faLongArrowAltRight,
   faMagnifyingGlass,
@@ -145,6 +146,7 @@ library.add(
   faLightbulb,
   faLink,
   faLocationDot,
+  faLock,
   faLongArrowAltLeft,
   faLongArrowAltRight,
   faMagnifyingGlass,

src/libs/util.ts

@@ -39,6 +39,8 @@ import { DEFAULT_ROOT_DERIVATION_PATH } from "./crypto";
 export interface GiverReceiverInputInfo {
   did?: string;
   name?: string;
+  image?: string;
+  handleId?: string;
 }
 
 export enum OnboardPage {

src/views/ContactGiftingView.vue

@@ -4,14 +4,14 @@
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
     <!-- Breadcrumb -->
     <div id="ViewBreadcrumb" class="mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="text-2xl text-center font-semibold relative px-7">
         <!-- Back -->
         <router-link
           :to="{ name: 'home' }"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
           ><font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
         </router-link>
-        Given by...
+        {{ stepType === "giver" ? "Given by..." : "Given to..." }}
       </h1>
     </div>
 
@@ -19,19 +19,18 @@
     <ul class="border-t border-slate-300">
       <li class="border-b border-slate-300 py-3">
         <h2 class="text-base flex gap-4 items-center">
-          <span class="grow">
+          <span class="grow flex gap-2 items-center font-medium">
-            <img
+            <font-awesome
-              src="../assets/blank-square.svg"
+              icon="circle-question"
-              width="32"
+              class="text-slate-400 text-4xl"
-              class="inline-block align-middle border border-slate-300 rounded-md mr-1"
             />
-            Unnamed/Unknown
+            <span class="italic text-slate-400">(Unnamed/Unknown)</span>
           </span>
           <span class="text-right">
             <button
               type="button"
               class="block w-full text-center text-sm uppercase 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-3 py-1.5 rounded-md"
-              @click="openDialog()"
+              @click="openDialog('Unnamed')"
             >
               <font-awesome icon="gift" class="fa-fw"></font-awesome>
             </button>
@@ -44,13 +43,14 @@
         class="border-b border-slate-300 py-3"
       >
         <h2 class="text-base flex gap-4 items-center">
-          <span class="grow font-semibold">
+          <span class="grow flex gap-2 items-center font-medium">
             <EntityIcon
               :contact="contact"
-              :icon-size="32"
+              :icon-size="34"
-              class="inline-block align-middle border border-slate-300 rounded-md mr-1"
+              class="inline-block align-middle border border-slate-300 rounded-full overflow-hidden"
             />
-            {{ contact.name || "(no name)" }}
+            <span v-if="contact.name">{{ contact.name }}</span>
+            <span v-else class="italic text-slate-400">(No name)</span>
           </span>
           <span class="text-right">
             <button
@@ -65,7 +65,13 @@
       </li>
     </ul>
 
-    <GiftedDialog ref="customDialog" :to-project-id="projectId" />
+    <GiftedDialog
+      ref="customDialog"
+      :from-project-id="fromProjectId"
+      :to-project-id="toProjectId"
+      :show-projects="showProjects"
+      :is-from-project-view="isFromProjectView"
+    />
   </section>
 </template>
 
@@ -96,6 +102,24 @@ export default class ContactGiftingView extends Vue {
   description = "";
   projectId = "";
   prompt = "";
+  recipientProjectName = "";
+  recipientProjectImage = "";
+  recipientProjectHandleId = "";
+
+  // New context parameters
+  stepType = "giver";
+  giverEntityType = "person" as "person" | "project";
+  recipientEntityType = "person" as "person" | "project";
+  giverProjectId = "";
+  giverProjectName = "";
+  giverProjectImage = "";
+  giverProjectHandleId = "";
+  giverDid = "";
+  recipientDid = "";
+  fromProjectId = "";
+  toProjectId = "";
+  showProjects = false;
+  isFromProjectView = false;
 
   async created() {
     try {
@@ -111,9 +135,41 @@ export default class ContactGiftingView extends Vue {
         dbAllContacts,
       ) as unknown as Contact[];
 
-      this.projectId = (this.$route.query["projectId"] as string) || "";
+      this.projectId =
+        (this.$route.query["recipientProjectId"] as string) || "";
+      this.recipientProjectName =
+        (this.$route.query["recipientProjectName"] as string) || "";
+      this.recipientProjectImage =
+        (this.$route.query["recipientProjectImage"] as string) || "";
+      this.recipientProjectHandleId =
+        (this.$route.query["recipientProjectHandleId"] as string) || "";
       this.prompt = (this.$route.query["prompt"] as string) ?? this.prompt;
 
+      // Read new context parameters
+      this.stepType = (this.$route.query["stepType"] as string) || "giver";
+      this.giverEntityType =
+        (this.$route.query["giverEntityType"] as "person" | "project") ||
+        "person";
+      this.recipientEntityType =
+        (this.$route.query["recipientEntityType"] as "person" | "project") ||
+        "person";
+      this.giverProjectId =
+        (this.$route.query["giverProjectId"] as string) || "";
+      this.giverProjectName =
+        (this.$route.query["giverProjectName"] as string) || "";
+      this.giverProjectImage =
+        (this.$route.query["giverProjectImage"] as string) || "";
+      this.giverProjectHandleId =
+        (this.$route.query["giverProjectHandleId"] as string) || "";
+      this.giverDid = (this.$route.query["giverDid"] as string) || "";
+      this.recipientDid = (this.$route.query["recipientDid"] as string) || "";
+      this.fromProjectId = (this.$route.query["fromProjectId"] as string) || "";
+      this.toProjectId = (this.$route.query["toProjectId"] as string) || "";
+      this.showProjects =
+        (this.$route.query["showProjects"] as string) === "true";
+      this.isFromProjectView =
+        (this.$route.query["isFromProjectView"] as string) === "true";
+
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
       logger.error("Error retrieving settings & contacts:", err);
@@ -131,17 +187,108 @@ export default class ContactGiftingView extends Vue {
     }
   }
 
-  openDialog(giver?: GiverReceiverInputInfo) {
+  openDialog(contact?: GiverReceiverInputInfo | "Unnamed") {
-    const recipient = this.projectId
+    if (contact === "Unnamed") {
-      ? undefined
+      // Special case: Pass undefined to trigger Step 1, but with "Unnamed" pre-selected
-      : { did: this.activeDid, name: "you" };
+      let recipient: GiverReceiverInputInfo;
-    (this.$refs.customDialog as GiftedDialog).open(
+      let giver: GiverReceiverInputInfo | undefined;
-      giver,
+
-      recipient,
+      if (this.stepType === "giver") {
-      undefined,
+        // We're selecting a giver, so recipient is either a project or the current user
-      "Given by " + (giver?.name || "someone not named"),
+        if (this.recipientEntityType === "project") {
-      this.prompt,
+          recipient = {
-    );
+            did: this.recipientProjectHandleId,
+            name: this.recipientProjectName,
+            image: this.recipientProjectImage,
+            handleId: this.recipientProjectHandleId,
+          };
+        } else {
+          recipient = { did: this.activeDid, name: "You" };
+        }
+        giver = undefined; // Will be set to "Unnamed" in GiftedDialog
+      } else {
+        // We're selecting a recipient, so recipient is "Unnamed" and giver is preserved from context
+        recipient = { did: "", name: "Unnamed" };
+
+        // Preserve the existing giver from the context
+        if (this.giverEntityType === "project") {
+          giver = {
+            // no did, because it's a project
+            name: this.giverProjectName,
+            image: this.giverProjectImage,
+            handleId: this.giverProjectHandleId,
+          };
+        } else if (this.giverDid) {
+          giver = {
+            did: this.giverDid,
+            name: this.giverProjectName || "Someone",
+          };
+        } else {
+          giver = { did: this.activeDid, name: "You" };
+        }
+      }
+
+      (this.$refs.customDialog as GiftedDialog).open(
+        giver,
+        recipient,
+        undefined,
+        this.stepType === "giver" ? "Given by Unnamed" : "Given to Unnamed",
+        this.prompt,
+      );
+      // Immediately select "Unnamed" and move to Step 2
+      (this.$refs.customDialog as GiftedDialog).selectGiver();
+    } else {
+      // Regular case: contact is a GiverReceiverInputInfo
+      let giver: GiverReceiverInputInfo;
+      let recipient: GiverReceiverInputInfo;
+
+      if (this.stepType === "giver") {
+        // We're selecting a giver, so the contact becomes the giver
+        giver = contact as GiverReceiverInputInfo; // Safe because we know contact is not "Unnamed" or undefined
+
+        // Recipient is either a project or the current user
+        if (this.recipientEntityType === "project") {
+          recipient = {
+            did: this.recipientProjectHandleId,
+            name: this.recipientProjectName,
+            image: this.recipientProjectImage,
+            handleId: this.recipientProjectHandleId,
+          };
+        } else {
+          recipient = { did: this.activeDid, name: "You" };
+        }
+      } else {
+        // We're selecting a recipient, so the contact becomes the recipient
+        recipient = contact as GiverReceiverInputInfo; // Safe because we know contact is not "Unnamed" or undefined
+
+        // Preserve the existing giver from the context
+        if (this.giverEntityType === "project") {
+          giver = {
+            did: this.giverProjectHandleId,
+            name: this.giverProjectName,
+            image: this.giverProjectImage,
+            handleId: this.giverProjectHandleId,
+          };
+        } else if (this.giverDid) {
+          giver = {
+            did: this.giverDid,
+            name: this.giverProjectName || "Someone",
+          };
+        } else {
+          giver = { did: this.activeDid, name: "You" };
+        }
+      }
+
+      (this.$refs.customDialog as GiftedDialog).open(
+        giver,
+        recipient,
+        undefined,
+        this.stepType === "giver"
+          ? "Given by " + (contact?.name || "someone not named")
+          : "Given to " + (contact?.name || "someone not named"),
+        this.prompt,
+      );
+    }
   }
 }
 </script>

src/views/GiftedDetailsView.vue

@@ -4,87 +4,91 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back -->
+    <!-- Breadcrumb -->
-    <div
+    <div id="ViewBreadcrumb" class="mb-8">
-      v-if="!hideBackButton"
+      <h1 class="text-2xl text-center font-semibold relative px-7 mb-2">
-      class="text-lg text-center font-light relative px-7"
+        <!-- Back -->
-    >
+        <div
-      <h1
+          v-if="!hideBackButton"
-        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-        @click="cancelBack()"
+          @click="cancelBack()"
-      >
+        >
-        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
+          <font-awesome icon="chevron-left" class="fa-fw" />
+        </div>
+        What Was Given
       </h1>
+
+      <h2 class="text-lg font-normal text-center overflow-hidden">
+        <div class="truncate">
+          From
+          {{
+            providedByProject
+              ? providerProjectName
+              : providedByGiver
+                ? giverName
+                : "someone not named"
+          }}
+        </div>
+        <div class="truncate">
+          to
+          {{
+            givenToProject
+              ? fulfillsProjectName
+              : givenToRecipient
+                ? recipientName
+                : "someone not named"
+          }}
+        </div>
+      </h2>
     </div>
 
-    <!-- Heading -->
-    <h1 class="text-4xl text-center font-light px-4 mb-4">What Was Given</h1>
-
-    <h1 class="text-xl font-bold text-center mb-4">
-      <span>
-        From
-        {{
-          providedByProject
-            ? providerProjectName
-            : providedByGiver
-              ? giverName
-              : "someone not named"
-        }}
-      </span>
-      <br />
-      <span>
-        to
-        {{
-          givenToProject
-            ? fulfillsProjectName
-            : givenToRecipient
-              ? recipientName
-              : "someone not named"
-        }}</span
-      >
-    </h1>
     <textarea
       v-model="description"
       class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
       placeholder="What was received"
     />
-    <div class="flex flex-row justify-center">
+    <div class="flex mb-4">
-      <span
+      <button
-        class="rounded-l border border-r-0 border-slate-400 bg-slate-200 text-center text-blue-500 px-2 py-2 w-20"
+        class="rounded-s border border-e-0 border-slate-400 bg-slate-200 px-4 py-2"
-        @click="changeUnitCode()"
-      >
-        {{ libsUtil.UNIT_SHORT[unitCode] || unitCode }}
-      </span>
-      <div
-        class="border border-r-0 border-slate-400 bg-slate-200 px-4 py-2"
         @click="amountInput === '0' ? null : decrement()"
       >
         <font-awesome icon="chevron-left" />
-      </div>
+      </button>
       <input
+        id="inputGivenAmount"
         v-model="amountInput"
         type="number"
-        class="border border-r-0 border-slate-400 px-2 py-2 text-center w-20"
+        class="flex-1 border border-e-0 border-slate-400 px-2 py-2 text-center w-[1px]"
       />
-      <div
+      <button
-        class="rounded-r border border-slate-400 bg-slate-200 px-4 py-2"
+        class="rounded-e border border-slate-400 bg-slate-200 px-4 py-2"
         @click="increment()"
       >
         <font-awesome icon="chevron-right" />
-      </div>
+      </button>
+
+      <select
+        v-model="unitCode"
+        class="flex-1 rounded border border-slate-400 ms-2 px-3 py-2"
+      >
+        <option
+          v-for="(displayName, code) in unitOptions"
+          :key="code"
+          :value="code"
+        >
+          {{ displayName }}
+        </option>
+      </select>
     </div>
 
     <div class="flex justify-center mt-4" data-testId="imagery">
-      <span v-if="imageUrl" class="flex justify-between">
+      <span v-if="imageUrl" class="flex items-end gap-3">
         <a :href="imageUrl" target="_blank">
-          <img
+          <img :src="imageUrl" class="h-36 rounded-lg" />
-            :src="libsUtil.transformImageUrlForCors(imageUrl)"
-            class="h-24 rounded-xl"
-          />
         </a>
         <font-awesome
           icon="trash-can"
-          class="text-red-500 fa-fw ml-8 mt-10"
+          class="text-red-500 fa-fw cursor-pointer"
           @click="confirmDeleteImage"
         />
       </span>
@@ -98,22 +102,22 @@
     </div>
     <ImageMethodDialog ref="imageDialog" default-camera-mode="environment" />
 
-    <div class="mt-4 flex justify-between gap-2">
+    <div class="mt-4 sm:flex justify-between gap-2">
       <!-- First Column for Giver -->
-      <div class="flex-grow border border-slate-400 p-2 rounded-md">
+      <div class="sm:flex-grow sm:w-1/2 border border-slate-400 p-2 rounded-md overflow-hidden">
-        <div class="flex">
+        <div class="flex items-center">
           <input
             v-if="giverDid && !providedByProject"
             v-model="providedByGiver"
             type="checkbox"
-            class="h-6 w-6 mr-2"
+            class="flex-shrink-0 h-6 w-6 mr-2"
           />
           <font-awesome
             v-else
             icon="square"
             class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
           />
-          <label class="text-sm mt-1">
+          <label class="text-sm truncate">
             {{
               giverDid
                 ? "This was provided by " + giverName + "."
@@ -123,24 +127,24 @@
           <font-awesome
             v-if="!giverDid || providedByProject"
             icon="info-circle"
-            class="-mt-1 bg-white text-slate-500 h-5 w-5 px-0.5 py-0.5 rounded-sm"
+            class="text-base cursor-pointer bg-white text-slate-500 ms-1"
             @click="notifyUserOfGiver()"
           />
         </div>
 
-        <div class="flex">
+        <div class="flex items-center">
           <input
             v-if="providerProjectId && !providedByGiver"
             v-model="providedByProject"
             type="checkbox"
-            class="h-6 w-6 mr-2"
+            class="flex-shrink-0 h-6 w-6 mr-2"
           />
           <font-awesome
             v-else
             icon="square"
             class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
           />
-          <label class="text-sm mt-1">
+          <label class="text-sm truncate">
             {{
               providerProjectId
                 ? "This was provided by " + providerProjectName + "."
@@ -150,31 +154,31 @@
           <font-awesome
             v-if="!providerProjectId || providedByGiver"
             icon="info-circle"
-            class="-mt-1 bg-white text-slate-500 h-5 w-5 px-0.5 py-0.5 rounded-sm"
+            class="text-base cursor-pointer bg-white text-slate-500 ms-1"
             @click="notifyUserOfProvidingProject()"
           />
         </div>
       </div>
 
-      <div class="flex-shrink flex justify-center items-center">
+      <div class="sm:flex-shrink flex justify-center items-center my-1 sm:my-0">
-        <font-awesome icon="arrow-right" class="fa-fw h-7" />
+        <font-awesome icon="arrow-right" class="fa-fw h-7 rotate-90 sm:rotate-0" />
       </div>
 
       <!-- Third Column for Recipient -->
-      <div class="flex-grow border border-slate-400 p-2 rounded-md">
+      <div class="sm:flex-grow sm:w-1/2 border border-slate-400 p-2 rounded-md overflow-hidden">
-        <div class="flex">
+        <div class="flex items-center">
           <input
             v-if="recipientDid && !givenToProject"
             v-model="givenToRecipient"
             type="checkbox"
-            class="h-6 w-6 mr-2"
+            class="flex-shrink-0 h-6 w-6 mr-2"
           />
           <font-awesome
             v-else
             icon="square"
             class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
           />
-          <label class="text-sm mt-1">
+          <label class="text-sm truncate">
             {{
               recipientDid
                 ? "This was given to " + recipientName + "."
@@ -184,24 +188,24 @@
           <font-awesome
             v-if="!recipientDid || givenToProject"
             icon="info-circle"
-            class="-mt-1 bg-white text-slate-500 h-5 w-5 px-0.5 py-0.5 rounded-sm"
+            class="text-base cursor-pointer bg-white text-slate-500 ms-1"
             @click="notifyUserOfRecipient()"
           />
         </div>
 
-        <div class="flex">
+        <div class="flex items-center">
           <input
             v-if="fulfillsProjectId && !givenToRecipient"
             v-model="givenToProject"
             type="checkbox"
-            class="h-6 w-6 mr-2"
+            class="flex-shrink-0 h-6 w-6 mr-2"
           />
           <font-awesome
             v-else
             icon="square"
             class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
           />
-          <label class="text-sm mt-1">
+          <label class="text-sm truncate">
             {{
               fulfillsProjectId
                 ? "This was given to " + fulfillsProjectName + ". "
@@ -211,7 +215,7 @@
           <font-awesome
             v-if="!fulfillsProjectId || givenToRecipient"
             icon="info-circle"
-            class="-mt-1 bg-white text-slate-500 h-5 w-5 px-0.5 py-0.5 rounded-sm"
+            class="text-base cursor-pointer bg-white text-slate-500 ms-1"
             @click="notifyUserFulfillsProject()"
           />
         </div>
@@ -232,11 +236,11 @@
       </router-link>
     </div>
 
-    <p class="text-center mb-2 mt-6 italic">
+    <p class="text-center text-sm my-4">
-      Sign & Send to publish to the world
+      <b class="font-medium">Sign &amp; Send</b> to publish to the world
       <font-awesome
         icon="circle-info"
-        class="pl-2 text-blue-500 cursor-pointer"
+        class="fa-fw text-blue-500 text-base cursor-pointer"
         @click="explainData()"
       />
     </p>
@@ -902,5 +906,10 @@ export default class GiftedDetails extends Vue {
       7000,
     );
   }
+
+  // Computed property to get unit options
+  get unitOptions() {
+    return this.libsUtil.UNIT_SHORT;
+  }
 }
 </script>

src/views/HomeView.vue

@@ -157,40 +157,34 @@ Raymer * @version 1.0.0 */
       </div>
     </div>
 
-    <GiftedDialog ref="customDialog" />
+    <GiftedDialog ref="customDialog" :show-projects="showProjectsDialog" />
     <GiftedPrompts ref="giftedPrompts" />
     <FeedFilters ref="feedFilters" />
 
-    <div class="relative">
-      <button
-        v-if="isRegistered"
-        class="absolute right-6 bottom-0 transform translate-y-1/2 text-center text-4xl leading-none bg-green-600 text-white w-14 py-2.5 rounded-full"
-        @click="openDialog()"
-      >
-        <font-awesome icon="plus" class="fa-fw" />
-      </button>
-    </div>
-
     <!-- Results List -->
     <div class="mt-4 mb-4">
-      <div class="flex items-center mb-4">
+      <div class="flex gap-2 items-center mb-3">
-        <h2 class="text-xl font-bold flex items-center gap-4">
+        <h2 class="text-xl font-bold">Latest Activity</h2>
-          Latest Activity
+        <button
-          <button
+          v-if="resultsAreFiltered()"
-            v-if="resultsAreFiltered()"
+          class="block ms-auto text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-2 rounded-full"
-            class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-3 py-1.5 rounded-md text-xs text-white"
+          @click="openFeedFilters()"
-            @click="openFeedFilters()"
+        >
-          >
+          <font-awesome
-            <font-awesome icon="filter" class="fa-fw" />
+            icon="filter"
-          </button>
+            class="block text-center w-[1em] translate-y-[0.05em]"
-          <button
+          />
-            v-else
+        </button>
-            class="bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-3 py-1.5 rounded-md text-xs text-white"
+        <button
-            @click="openFeedFilters()"
+          v-else
-          >
+          class="block ms-auto text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-2 rounded-full"
-            <font-awesome icon="filter" class="fa-fw" />
+          @click="openFeedFilters()"
-          </button>
+        >
-        </h2>
+          <font-awesome
+            icon="filter"
+            class="block text-center w-[1em] translate-y-[0.05em]"
+          />
+        </button>
       </div>
 
       <div
@@ -445,6 +439,7 @@ export default class HomeView extends Vue {
   selectedImageData: Blob | null = null;
   isImageViewerOpen = false;
   imageCache: Map<string, Blob | null> = new Map();
+  showProjectsDialog = false;
 
   /**
    * Initializes the component on mount
@@ -1604,17 +1599,33 @@ export default class HomeView extends Vue {
    * @param giver Optional contact info for giver
    * @param description Optional gift description
    */
-  openDialog(giver?: GiverReceiverInputInfo, description?: string) {
+  openDialog(giver?: GiverReceiverInputInfo | "Unnamed", description?: string) {
-    (this.$refs.customDialog as GiftedDialog).open(
+    if (giver === "Unnamed") {
-      giver,
+      // Special case: Pass undefined to trigger Step 1, but with "Unnamed" pre-selected
-      {
+      (this.$refs.customDialog as GiftedDialog).open(
-        did: this.activeDid,
+        undefined,
-        name: "you",
+        {
-      } as GiverReceiverInputInfo,
+          did: this.activeDid,
-      undefined,
+          name: "You",
-      "Given by " + (giver?.name || "someone not named"),
+        } as GiverReceiverInputInfo,
-      description,
+        undefined,
-    );
+        "Given by Unnamed",
+        description,
+      );
+      // Immediately select "Unnamed" and move to Step 2
+      (this.$refs.customDialog as GiftedDialog).selectGiver();
+    } else {
+      (this.$refs.customDialog as GiftedDialog).open(
+        giver,
+        {
+          did: this.activeDid,
+          name: "You",
+        } as GiverReceiverInputInfo,
+        undefined,
+        "Given by " + (giver?.name || "someone not named"),
+        description,
+      );
+    }
   }
 
   /**
@@ -1848,5 +1859,18 @@ export default class HomeView extends Vue {
       this.$router.push({ name: "contact-qr" });
     }
   }
+
+  openDialogPerson(
+    giver?: GiverReceiverInputInfo | "Unnamed",
+    description?: string,
+  ) {
+    this.showProjectsDialog = false;
+    this.openDialog(giver, description);
+  }
+
+  openProjectDialog() {
+    this.showProjectsDialog = true;
+    (this.$refs.customDialog as any).open();
+  }
 }
 </script>

src/views/ProjectViewView.vue

@@ -214,63 +214,11 @@
       </div>
     </div>
 
-    <div v-if="activeDid && isRegistered">
+    <GiftedDialog
-      <div class="text-center">
+      ref="giveDialogToThis"
-        <p class="mt-2 mt-4 text-center">Record a contribution from:</p>
+      :to-project-id="projectId"
-      </div>
+      :is-from-project-view="true"
-      <ul
+    />
-        class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-3 gap-y-5 text-center mb-5 mt-2"
-      >
-        <li @click="openGiftDialogToProject({ name: 'you', did: activeDid })">
-          <font-awesome
-            icon="hand"
-            class="fa-fw text-blue-500 text-5xl cursor-pointer"
-          />
-          <h3
-            class="mt-5 text-xs text-blue-500 font-medium text-ellipsis whitespace-nowrap overflow-hidden cursor-pointer"
-          >
-            You
-          </h3>
-        </li>
-        <li @click="openGiftDialogToProject()">
-          <img
-            src="../assets/blank-square.svg"
-            class="mx-auto border border-blue-300 rounded-md mb-1 cursor-pointer"
-          />
-          <h3
-            class="text-xs text-blue-500 italic font-medium text-ellipsis whitespace-nowrap overflow-hidden cursor-pointer"
-          >
-            Unnamed/Unknown
-          </h3>
-        </li>
-        <li
-          v-for="contact in allContacts.slice(0, 5)"
-          :key="contact.did"
-          @click="openGiftDialogToProject(contact)"
-        >
-          <EntityIcon
-            :contact="contact"
-            :icon-size="64"
-            class="mx-auto border border-blue-300 rounded-md mb-1 cursor-pointer"
-          />
-          <h3
-            class="text-xs text-blue-500 font-medium text-ellipsis whitespace-nowrap overflow-hidden cursor-pointer"
-          >
-            {{ contact.name || "(no name)" }}
-          </h3>
-        </li>
-        <li>
-          <span
-            v-if="allContacts.length >= 5"
-            class="flex align-bottom text-xs text-blue-500 mt-12 cursor-pointer"
-            @click="onClickAllContactsGifting()"
-          >
-            ... or someone else...
-          </span>
-        </li>
-      </ul>
-    </div>
-    <GiftedDialog ref="giveDialogToThis" :to-project-id="projectId" />
 
     <!-- Offers & Gifts to & from this -->
     <div class="grid items-start grid-cols-1 sm:grid-cols-3 gap-4 mt-4">
@@ -536,7 +484,12 @@
             </button>
           </div>
         </div>
-        <GiftedDialog ref="giveDialogFromThis" :from-project-id="projectId" />
+        <GiftedDialog
+          ref="giveDialogFromThis"
+          :from-project-id="projectId"
+          :show-projects="true"
+          :is-from-project-view="true"
+        />
 
         <h3 class="text-lg font-bold mb-3 mt-4">
           Benefitted From This Project
@@ -1263,21 +1216,52 @@ export default class ProjectViewView extends Vue {
     );
   }
 
-  openGiftDialogToProject(contact?: libsUtil.GiverReceiverInputInfo) {
+  openGiftDialogToProject(
-    (this.$refs.giveDialogToThis as GiftedDialog).open(
+    contact?: libsUtil.GiverReceiverInputInfo | "Unnamed",
-      contact,
+  ) {
-      undefined,
+    if (contact === "Unnamed") {
-      undefined,
+      // Special case: Pass undefined to trigger Step 1, but with "Unnamed" pre-selected
-      (contact?.name || "Someone not named") + ` gave to this project`,
+      (this.$refs.giveDialogToThis as GiftedDialog).open(
-    );
+        undefined,
+        undefined,
+        undefined,
+        "Given by Unnamed to this project",
+      );
+      // Immediately select "Unnamed" and move to Step 2
+      (this.$refs.giveDialogToThis as GiftedDialog).selectGiver();
+    } else {
+      // Open straight to Step 2 with current user as giver and current project as recipient
+      (this.$refs.giveDialogToThis as GiftedDialog).open(
+        {
+          did: this.activeDid,
+          name: "You",
+        },
+        {
+          did: this.issuer,
+          name: this.name,
+          handleId: this.projectId,
+          image: this.imageUrl,
+        },
+        undefined,
+        `Given to ${this.name}`,
+      );
+    }
   }
 
   openGiftDialogFromProject() {
+    // Set the project as giver and the current user as recipient
     (this.$refs.giveDialogFromThis as GiftedDialog).open(
-      undefined,
+      {
+        did: undefined,
+        name: this.name,
+        handleId: this.projectId,
+        image: this.imageUrl,
+      },
       { did: this.activeDid, name: "You" },
       undefined,
-      `This project gave to you`,
+      `${this.name} gave to you`,
+      undefined,
+      undefined,
     );
   }