From a7e65b3b4940e9aa142f04a13d272f1c096e0d48 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Thu, 19 Jun 2025 21:16:56 +0800
Subject: [PATCH] Giver-recipient controls

- Dialog now shows separate cards for giver and recipient
- Ability to change giver and/or recipient
- Project giver/recipient is locked in ProjectView (context reinforcement)
---
 src/components/GiftedDialog.vue  | 519 ++++++++++++++++++++++++-------
 src/libs/fontawesome.ts          |   2 +
 src/views/ContactGiftingView.vue |  16 +-
 src/views/HomeView.vue           |  34 +-
 src/views/ProjectViewView.vue    |  41 ++-
 5 files changed, 465 insertions(+), 147 deletions(-)

diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index 04803772..c8c3236a 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -2,19 +2,36 @@
   <div v-if="visible" class="dialog-overlay">
     <div class="dialog">
       <!-- Step 1: Giver -->
-      <div id="sectionGiftedGiver" v-show="currentStep === 1">
+      <div v-show="currentStep === 1" id="sectionGiftedGiver">
         <label class="block font-bold mb-4">
-          {{ showProjects ? 'Choose a project to benefit from:' : 'Choose a person to receive from:' }}
+          {{
+            stepType === "recipient"
+              ? "Choose who received the gift:"
+              : showProjects
+                ? "Choose a project to benefit from:"
+                : "Choose a person to receive from:"
+          }}
         </label>
 
         <!-- Unified Quick-pick grid for People and Projects -->
-        <ul :class="showProjects ? 'grid grid-cols-3 md:grid-cols-4 gap-x-2 gap-y-4 text-center mb-4' : 'grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-2 gap-y-4 text-center mb-4'">
-          <template v-if="showProjects">
+        <ul
+          :class="
+            shouldShowProjects
+              ? 'grid grid-cols-3 md:grid-cols-4 gap-x-2 gap-y-4 text-center mb-4'
+              : 'grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-2 gap-y-4 text-center mb-4'
+          "
+        >
+          <template v-if="shouldShowProjects">
+            <!-- show projects -->
             <li
               v-for="project in projects.slice(0, 7)"
               :key="project.handleId"
-              @click="selectProject(project)"
               class="cursor-pointer"
+              @click="
+                stepType === 'recipient'
+                  ? selectRecipientProject(project)
+                  : selectProject(project)
+              "
             >
               <div class="relative w-fit mx-auto">
                 <ProjectIcon
@@ -24,86 +41,130 @@
                   class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full mb-1"
                 />
               </div>
-              <h3 class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden">
+              <h3
+                class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
+              >
                 {{ project.name }}
               </h3>
               <div class="text-xs text-slate-500 truncate">
                 <font-awesome icon="user" class="fa-fw text-slate-400" />
-                {{ didInfo(project.issuerDid, activeDid, allMyDids, allContacts) }}
+                {{
+                  didInfo(project.issuerDid, activeDid, allMyDids, allContacts)
+                }}
               </div>
             </li>
-            <li v-if="projects.length === 0" class="text-xs text-slate-500 italic col-span-full">
+            <li
+              v-if="projects.length === 0"
+              class="text-xs text-slate-500 italic col-span-full"
+            >
               (No projects found.)
             </li>
             <li v-if="projects.length > 0">
-              <router-link
-                :to="{ name: 'discover' }"
-                class="cursor-pointer"
-              >
-                <font-awesome icon="circle-right" class="text-blue-500 text-5xl mb-1" />
-                <h3 class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden">
+              <router-link :to="{ name: 'discover' }" class="cursor-pointer">
+                <font-awesome
+                  icon="circle-right"
+                  class="text-blue-500 text-5xl mb-1"
+                />
+                <h3
+                  class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
+                >
                   Show All
                 </h3>
               </router-link>
             </li>
           </template>
           <template v-else>
+            <!-- show people (contacts) -->
             <li
-              v-if="isFromProjectView && activeDid"
-              @click="selectGiver({ did: activeDid, name: 'You' })"
+              v-if="
+                stepType === 'recipient' ||
+                (stepType === 'giver' && isFromProjectView)
+              "
               class="cursor-pointer"
+              @click="
+                stepType === 'recipient'
+                  ? selectRecipient({ did: activeDid, name: 'You' })
+                  : selectGiver({ did: activeDid, name: 'You' })
+              "
             >
               <font-awesome icon="hand" class="text-blue-500 text-5xl mb-1" />
-              <h3 class="text-xs text-blue-500 font-medium text-ellipsis whitespace-nowrap overflow-hidden">
+              <h3
+                class="text-xs text-blue-500 font-medium text-ellipsis whitespace-nowrap overflow-hidden"
+              >
                 You
               </h3>
             </li>
             <li
-              @click="selectGiver()"
               class="cursor-pointer"
+              @click="
+                stepType === 'recipient' ? selectRecipient() : selectGiver()
+              "
             >
-              <font-awesome icon="circle-question" class="text-slate-400 text-5xl mb-1" />
-              <h3 class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden">
+              <font-awesome
+                icon="circle-question"
+                class="text-slate-400 text-5xl mb-1"
+              />
+              <h3
+                class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
+              >
                 Unnamed
               </h3>
             </li>
-            <li v-if="allContacts.length === 0" class="text-xs text-slate-500 italic col-span-full">
+            <li
+              v-if="allContacts.length === 0"
+              class="text-xs text-slate-500 italic col-span-full"
+            >
               (Add friends to see more people worthy of recognition.)
             </li>
             <li
               v-for="contact in allContacts.slice(0, 10)"
               :key="contact.did"
-              @click="selectGiver(contact)"
               class="cursor-pointer"
+              @click="
+                stepType === 'recipient'
+                  ? selectRecipient(contact)
+                  : selectGiver(contact)
+              "
             >
               <div class="relative w-fit mx-auto">
                 <EntityIcon
                   :contact="contact"
                   class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full mb-1"
                 />
-                <div class="rounded-full bg-slate-400 absolute bottom-0 right-0 p-1 translate-x-1/3">
-                  <font-awesome icon="clock" class="block text-white text-xs w-[1em]" />
+                <div
+                  class="rounded-full bg-slate-400 absolute bottom-0 right-0 p-1 translate-x-1/3"
+                >
+                  <font-awesome
+                    icon="clock"
+                    class="block text-white text-xs w-[1em]"
+                  />
                 </div>
               </div>
-              <h3 class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden">
+              <h3
+                class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
+              >
                 {{ contact.name || contact.did }}
               </h3>
             </li>
-            <li v-if="allContacts.length > 0">
+            <li v-if="allContacts.length > 0" class="cursor-pointer">
               <router-link
-                :to="{ 
+                :to="{
                   name: 'contact-gift',
                   query: {
                     recipientProjectId: toProjectId,
                     recipientProjectName: giver?.name,
                     recipientProjectImage: giver?.image,
-                    recipientProjectHandleId: giver?.handleId
-                  }
+                    recipientProjectHandleId: giver?.handleId,
+                  },
                 }"
-                class="cursor-pointer"
               >
-                <font-awesome icon="circle-right" class="text-blue-500 text-5xl mb-1" />
-                <h3 class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden">
+                <font-awesome
+                  icon="circle-right"
+                  class="text-blue-500 text-5xl mb-1"
+                />
+                <h3
+                  class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
+                >
                   Show All
                 </h3>
               </router-link>
@@ -120,71 +181,192 @@
       </div>
 
       <!-- Step 2: Gift -->
-      <div id="sectionGiftedGift" v-show="currentStep === 2">
-        <button 
-          v-if="!fromProjectId"
-          class="w-full flex items-center gap-2 bg-slate-100 border border-slate-300 rounded-md p-2 mb-4" 
-          @click="goBackToStep1"
-        >
-          <div>
-            <template v-if="showProjects">
-              <ProjectIcon
-                v-if="giver?.handleId"
-                :entity-id="giver.handleId"
-                :icon-size="32"
-                :image-url="giver.image"
-                class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
-              />
-            </template>
-            <template v-else>
-              <EntityIcon
-                v-if="giver?.did"
-                :contact="giver"
-                class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
-              />
-              <font-awesome
-                v-else
-                icon="circle-question"
-                class="text-slate-400 text-3xl"
-              />
-            </template>
-          </div>
+      <div v-show="currentStep === 2" id="sectionGiftedGift">
+        <div class="grid grid-cols-2 gap-2 mb-4">
+          <!-- Giver Button -->
+          <button
+            v-if="(giverEntityType === 'person' || giverEntityType === 'project') && !(isFromProjectView && giverEntityType === 'project')"
+            class="flex-1 flex items-center gap-2 bg-slate-100 border border-slate-300 rounded-md p-2"
+            @click="goBackToStep1('giver')"
+          >
+            <div>
+              <template v-if="giverEntityType === 'project'">
+                <ProjectIcon
+                  v-if="giver?.handleId"
+                  :entity-id="giver.handleId"
+                  :icon-size="32"
+                  :image-url="giver.image"
+                  class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
+                />
+              </template>
+              <template v-else>
+                <EntityIcon
+                  v-if="giver?.did"
+                  :contact="giver"
+                  class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
+                />
+                <font-awesome
+                  v-else
+                  icon="circle-question"
+                  class="text-slate-400 text-3xl"
+                />
+              </template>
+            </div>
+
+            <div class="text-start min-w-0">
+              <p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">
+                {{
+                  giverEntityType === "project"
+                    ? "Benefited from:"
+                    : "Received from:"
+                }}
+              </p>
+              <h3 class="font-semibold truncate">
+                {{ giver?.name || "Unnamed" }}
+              </h3>
+            </div>
 
-          <div class="text-start min-w-0">
-            <p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">{{ showProjects ? 'Benefitted from:' : 'Received from:' }}</p>
-            <h3 class="font-semibold truncate">{{ giver?.name || 'Unnamed' }}</h3>
-          </div>
+            <p class="ms-auto text-sm text-blue-500 pe-1">
+              <font-awesome icon="pen" title="Change" />
+            </p>
+          </button>
+          <div
+            v-else
+            class="flex-1 flex items-center gap-2 bg-slate-100 border border-slate-300 rounded-md p-2"
+          >
+            <div>
+              <template v-if="giverEntityType === 'project'">
+                <ProjectIcon
+                  v-if="giver?.handleId"
+                  :entity-id="giver.handleId"
+                  :icon-size="32"
+                  :image-url="giver.image"
+                  class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
+                />
+              </template>
+              <template v-else>
+                <EntityIcon
+                  v-if="giver?.did"
+                  :contact="giver"
+                  class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
+                />
+                <font-awesome
+                  v-else
+                  icon="circle-question"
+                  class="text-slate-400 text-3xl"
+                />
+              </template>
+            </div>
+
+            <div class="text-start min-w-0">
+              <p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">
+                {{
+                  giverEntityType === "project"
+                    ? "Benefited from:"
+                    : "Received from:"
+                }}
+              </p>
+              <h3 class="font-semibold truncate">
+                {{ giver?.name || "Unnamed" }}
+              </h3>
+            </div>
 
-          <p class="ms-auto text-sm uppercase font-medium pe-2">Change</p>
-        </button>
-        <div v-else class="w-full flex items-center gap-2 bg-slate-100 border border-slate-300 rounded-md p-2 mb-4">
-          <div>
-            <template v-if="showProjects">
-              <ProjectIcon
-                v-if="giver?.handleId"
-                :entity-id="giver.handleId"
-                :icon-size="32"
-                :image-url="giver.image"
-                class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
-              />
-            </template>
-            <template v-else>
-              <EntityIcon
-                v-if="giver?.did"
-                :contact="giver"
-                class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
-              />
-              <font-awesome
-                v-else
-                icon="circle-question"
-                class="text-slate-400 text-3xl"
-              />
-            </template>
+            <p class="ms-auto text-sm text-slate-400 pe-1">
+              <font-awesome icon="lock" title="Can't be changed" />
+            </p>
           </div>
 
-          <div class="text-start min-w-0">
-            <p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">{{ showProjects ? 'Benefitted from:' : 'Received from:' }}</p>
-            <h3 class="font-semibold truncate">{{ giver?.name || 'Unnamed' }}</h3>
+          <!-- Recipient Button -->
+          <button
+            v-if="recipientEntityType === 'person'"
+            class="flex-1 flex items-center gap-2 bg-slate-100 border border-slate-300 rounded-md p-2"
+            @click="goBackToStep1('recipient')"
+          >
+            <div>
+              <template v-if="recipientEntityType === 'project'">
+                <ProjectIcon
+                  v-if="receiver?.handleId"
+                  :entity-id="receiver.handleId"
+                  :icon-size="32"
+                  :image-url="receiver.image"
+                  class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
+                />
+              </template>
+              <template v-else>
+                <EntityIcon
+                  v-if="receiver?.did"
+                  :contact="receiver"
+                  class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
+                />
+                <font-awesome
+                  v-else
+                  icon="circle-question"
+                  class="text-slate-400 text-3xl"
+                />
+              </template>
+            </div>
+
+            <div class="text-start min-w-0">
+              <p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">
+                {{
+                  recipientEntityType === "project"
+                    ? "Given to project:"
+                    : "Given to:"
+                }}
+              </p>
+              <h3 class="font-semibold truncate">
+                {{ receiver?.name || "Unnamed" }}
+              </h3>
+            </div>
+
+            <p class="ms-auto text-sm text-blue-500 pe-1">
+              <font-awesome icon="pen" title="Change" />
+            </p>
+          </button>
+          <div
+            v-else
+            class="flex-1 flex items-center gap-2 bg-slate-100 border border-slate-300 rounded-md p-2"
+          >
+            <div>
+              <template v-if="recipientEntityType === 'project'">
+                <ProjectIcon
+                  v-if="receiver?.handleId"
+                  :entity-id="receiver.handleId"
+                  :icon-size="32"
+                  :image-url="receiver.image"
+                  class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
+                />
+              </template>
+              <template v-else>
+                <EntityIcon
+                  v-if="receiver?.did"
+                  :contact="receiver"
+                  class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
+                />
+                <font-awesome
+                  v-else
+                  icon="circle-question"
+                  class="text-slate-400 text-3xl"
+                />
+              </template>
+            </div>
+
+            <div class="text-start min-w-0">
+              <p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">
+                {{
+                  recipientEntityType === "project"
+                    ? "Given to project:"
+                    : "Given to:"
+                }}
+              </p>
+              <h3 class="font-semibold truncate">
+                {{ receiver?.name || "Unnamed" }}
+              </h3>
+            </div>
+
+            <p class="ms-auto text-sm text-slate-400 pe-1">
+              <font-awesome icon="lock" title="Can't be changed" />
+            </p>
           </div>
         </div>
         <input
@@ -194,33 +376,36 @@
           :placeholder="prompt || 'What was given?'"
         />
         <div class="flex mb-4">
-					<button
+          <button
             class="rounded-s border border-e-0 border-slate-400 bg-slate-200 px-4 py-2"
             @click="amountInput === '0' ? null : decrement()"
           >
             <font-awesome icon="chevron-left" />
-					</button>
+          </button>
           <input
             id="inputGivenAmount"
             v-model="amountInput"
             type="number"
             class="flex-1 border border-e-0 border-slate-400 px-2 py-2 text-center w-[1px]"
           />
-					<button
+          <button
             class="rounded-e border border-slate-400 bg-slate-200 px-4 py-2"
             @click="increment()"
           >
             <font-awesome icon="chevron-right" />
-					</button>
-
-					<select v-model="unitCode" class="flex-1 rounded border border-slate-400 ms-2 px-3 py-2">
-						<option value="HUR">Hours</option>
-						<option value="USD">US $</option>
-						<option value="BTC">BTC</option>
-						<option value="BX">BX</option>
-						<option value="ETH">ETH</option>
-					</select>
-				</div>
+          </button>
+
+          <select
+            v-model="unitCode"
+            class="flex-1 rounded border border-slate-400 ms-2 px-3 py-2"
+          >
+            <option value="HUR">Hours</option>
+            <option value="USD">US $</option>
+            <option value="BTC">BTC</option>
+            <option value="BX">BX</option>
+            <option value="ETH">ETH</option>
+          </select>
+        </div>
         <router-link
           :to="{
             name: 'gifted-details',
@@ -230,7 +415,10 @@
               giverDid: showProjects ? undefined : giver?.did,
               giverName: giver?.name,
               offerId,
-              fulfillsProjectId: showProjects && isFromProjectView ? giver?.handleId : toProjectId,
+              fulfillsProjectId:
+                showProjects && isFromProjectView
+                  ? giver?.handleId
+                  : toProjectId,
               providerProjectId: showProjects ? giver?.handleId : fromProjectId,
               recipientDid: receiver?.did,
               recipientName: receiver?.name,
@@ -241,11 +429,11 @@
         >
           Photo &amp; more options&hellip;
         </router-link>
-        <p class="text-center mb-4">
+        <p class="text-center text-sm mb-4">
           <b class="font-medium">Sign &amp; Send</b> to publish to the world
           <font-awesome
             icon="circle-info"
-            class="fa-fw text-blue-500 text-lg cursor-pointer"
+            class="fa-fw text-blue-500 text-base cursor-pointer"
             @click="explainData()"
           />
         </p>
@@ -269,7 +457,7 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from "vue-facing-decorator";
+import { Vue, Component, Prop, Watch } from "vue-facing-decorator";
 
 import { NotificationIface, USE_DEXIE_DB } from "../constants/app";
 import {
@@ -303,6 +491,21 @@ export default class GiftedDialog extends Vue {
   @Prop({ default: false }) showProjects = false;
   @Prop() isFromProjectView = false;
 
+  @Watch('showProjects')
+  onShowProjectsChange() {
+    this.updateEntityTypes();
+  }
+
+  @Watch('fromProjectId')
+  onFromProjectIdChange() {
+    this.updateEntityTypes();
+  }
+
+  @Watch('toProjectId')
+  onToProjectIdChange() {
+    this.updateEntityTypes();
+  }
+
   activeDid = "";
   allContacts: Array<Contact> = [];
   allMyDids: Array<string> = [];
@@ -326,6 +529,42 @@ export default class GiftedDialog extends Vue {
 
   didInfo = didInfo;
 
+  // Computed property to help debug template logic
+  get shouldShowProjects() {
+    const result = (this.stepType === 'giver' && this.giverEntityType === 'project') ||
+                   (this.stepType === 'recipient' && this.recipientEntityType === 'project');
+    return result;
+  }
+
+  stepType = "giver";
+  giverEntityType = "person" as "person" | "project";
+  recipientEntityType = "person" as "person" | "project";
+
+  updateEntityTypes() {
+    // Reset and set entity types based on current context
+    this.giverEntityType = "person";
+    this.recipientEntityType = "person";
+    
+    // Determine entity types based on current context
+    if (this.showProjects) {
+      // HomeView "Project" button or ProjectViewView "Given by This"
+      this.giverEntityType = "project";
+      this.recipientEntityType = "person";
+    } else if (this.fromProjectId) {
+      // ProjectViewView "Given by This" button (project is giver)
+      this.giverEntityType = "project";
+      this.recipientEntityType = "person";
+    } else if (this.toProjectId) {
+      // ProjectViewView "Given to This" button (project is recipient)
+      this.giverEntityType = "person";
+      this.recipientEntityType = "project";
+    } else {
+      // HomeView "Person" button
+      this.giverEntityType = "person";
+      this.recipientEntityType = "person";
+    }
+  }
+
   async open(
     giver?: libsUtil.GiverReceiverInputInfo,
     receiver?: libsUtil.GiverReceiverInputInfo,
@@ -342,6 +581,10 @@ export default class GiftedDialog extends Vue {
     this.callbackOnSuccess = callbackOnSuccess;
     this.offerId = offerId || "";
     this.currentStep = giver ? 2 : 1;
+    this.stepType = "giver";
+
+    // Update entity types based on current props
+    this.updateEntityTypes();
 
     try {
       let settings = await databaseUtil.retrieveSettingsForActiveAccount();
@@ -373,8 +616,14 @@ export default class GiftedDialog extends Vue {
         );
       }
 
-      if (this.showProjects) {
+      if (
+        this.giverEntityType === "project" ||
+        this.recipientEntityType === "project"
+      ) {
         await this.loadProjects();
+      } else {
+        // Clear projects array when not needed
+        this.projects = [];
       }
     } catch (err: any) {
       logger.error("Error retrieving settings from database:", err);
@@ -510,12 +759,16 @@ export default class GiftedDialog extends Vue {
         this.axios,
         this.apiServer,
         this.activeDid,
-        this.showProjects ? undefined : giverDid as string,
-        this.showProjects && this.isFromProjectView ? this.giver?.handleId : recipientDid as string,
+        this.showProjects ? undefined : (giverDid as string),
+        this.showProjects && this.isFromProjectView
+          ? this.giver?.handleId
+          : (recipientDid as string),
         description,
         amount,
         unitCode,
-        this.showProjects && this.isFromProjectView ? this.giver?.handleId : this.toProjectId,
+        this.showProjects && this.isFromProjectView
+          ? this.giver?.handleId
+          : this.toProjectId,
         this.offerId,
         false,
         undefined,
@@ -598,18 +851,19 @@ export default class GiftedDialog extends Vue {
     if (contact) {
       this.giver = {
         did: contact.did,
-        name: contact.name || contact.did
+        name: contact.name || contact.did,
       };
     } else {
       this.giver = {
-        did: '',
-        name: 'Unnamed'
+        did: "",
+        name: "Unnamed",
       };
     }
     this.currentStep = 2;
   }
 
-  goBackToStep1() {
+  goBackToStep1(step: string) {
+    this.stepType = step;
     this.currentStep = 1;
   }
 
@@ -647,11 +901,36 @@ export default class GiftedDialog extends Vue {
       did: project.handleId,
       name: project.name,
       image: project.image,
-      handleId: project.handleId
+      handleId: project.handleId,
     };
     this.receiver = {
       did: this.activeDid,
-      name: "You"
+      name: "You",
+    };
+    this.currentStep = 2;
+  }
+
+  selectRecipient(contact?: Contact) {
+    if (contact) {
+      this.receiver = {
+        did: contact.did,
+        name: contact.name || contact.did,
+      };
+    } else {
+      this.receiver = {
+        did: "",
+        name: "Unnamed",
+      };
+    }
+    this.currentStep = 2;
+  }
+
+  selectRecipientProject(project: PlanData) {
+    this.receiver = {
+      did: project.handleId,
+      name: project.name,
+      image: project.image,
+      handleId: project.handleId,
     };
     this.currentStep = 2;
   }
diff --git a/src/libs/fontawesome.ts b/src/libs/fontawesome.ts
index 1abfba79..4fa56f0a 100644
--- a/src/libs/fontawesome.ts
+++ b/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,
diff --git a/src/views/ContactGiftingView.vue b/src/views/ContactGiftingView.vue
index afdf3c47..93a05c22 100644
--- a/src/views/ContactGiftingView.vue
+++ b/src/views/ContactGiftingView.vue
@@ -127,10 +127,14 @@ export default class ContactGiftingView extends Vue {
         );
       }
 
-      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.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;
 
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -156,10 +160,10 @@ export default class ContactGiftingView extends Vue {
           did: this.recipientProjectHandleId,
           name: this.recipientProjectName,
           image: this.recipientProjectImage,
-          handleId: this.recipientProjectHandleId
+          handleId: this.recipientProjectHandleId,
         }
       : { did: this.activeDid, name: "you" };
-    
+
     if (giver === "Unnamed") {
       // Special case: Pass undefined to trigger Step 1, but with "Unnamed" pre-selected
       (this.$refs.customDialog as GiftedDialog).open(
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 1c73c7d6..1a145a1c 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -122,26 +122,29 @@ Raymer * @version 1.0.0 */
               <div class="flex gap-2 items-center mb-2">
                 <h2 class="text-xl font-bold">Record something given by:</h2>
                 <button
-                  @click="openGiftedPrompts()"
                   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"
+                  @click="openGiftedPrompts()"
                 >
-                  <font-awesome icon="lightbulb" class="block text-center w-[1em]" />
+                  <font-awesome
+                    icon="lightbulb"
+                    class="block text-center w-[1em]"
+                  />
                 </button>
               </div>
 
               <div class="grid grid-cols-2 gap-2">
                 <button
                   type="button"
-                  @click="openDialogPerson()"
                   class="text-center text-base 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-2 rounded-lg"
+                  @click="openDialogPerson()"
                 >
                   <font-awesome icon="user" />
                   Person
                 </button>
                 <button
                   type="button"
-                  @click="openProjectDialog()"
                   class="text-center text-base 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-2 rounded-lg"
+                  @click="openProjectDialog()"
                 >
                   <font-awesome icon="folder-open" />
                   Project
@@ -160,22 +163,26 @@ Raymer * @version 1.0.0 */
     <!-- Results List -->
     <div class="mt-4 mb-4">
       <div class="flex gap-2 items-center mb-3">
-        <h2 class="text-xl font-bold">
-          Latest Activity
-        </h2>
+        <h2 class="text-xl font-bold">Latest Activity</h2>
         <button
           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"
           @click="openFeedFilters()"
         >
-          <font-awesome icon="filter" class="block text-center w-[1em] translate-y-[0.05em]" />
+          <font-awesome
+            icon="filter"
+            class="block text-center w-[1em] translate-y-[0.05em]"
+          />
         </button>
         <button
           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"
           @click="openFeedFilters()"
         >
-          <font-awesome icon="filter" class="block text-center w-[1em] translate-y-[0.05em]" />
+          <font-awesome
+            icon="filter"
+            class="block text-center w-[1em] translate-y-[0.05em]"
+          />
         </button>
       </div>
 
@@ -1610,7 +1617,7 @@ export default class HomeView extends Vue {
         undefined,
         {
           did: this.activeDid,
-          name: "you",
+          name: "You",
         } as GiverReceiverInputInfo,
         undefined,
         "Given by Unnamed",
@@ -1623,7 +1630,7 @@ export default class HomeView extends Vue {
         giver,
         {
           did: this.activeDid,
-          name: "you",
+          name: "You",
         } as GiverReceiverInputInfo,
         undefined,
         "Given by " + (giver?.name || "someone not named"),
@@ -1864,7 +1871,10 @@ export default class HomeView extends Vue {
     }
   }
 
-  openDialogPerson(giver?: GiverReceiverInputInfo | "Unnamed", description?: string) {
+  openDialogPerson(
+    giver?: GiverReceiverInputInfo | "Unnamed",
+    description?: string,
+  ) {
     this.showProjectsDialog = false;
     this.openDialog(giver, description);
   }
diff --git a/src/views/ProjectViewView.vue b/src/views/ProjectViewView.vue
index 2015b25d..e86abcd9 100644
--- a/src/views/ProjectViewView.vue
+++ b/src/views/ProjectViewView.vue
@@ -196,7 +196,11 @@
       </div>
     </div>
 
-    <GiftedDialog ref="giveDialogToThis" :to-project-id="projectId" :is-from-project-view="true" />
+    <GiftedDialog
+      ref="giveDialogToThis"
+      :to-project-id="projectId"
+      :is-from-project-view="true"
+    />
 
     <!-- Offers & Gifts to & from this -->
     <div class="grid items-start grid-cols-1 sm:grid-cols-3 gap-4 mt-4">
@@ -462,7 +466,12 @@
             </button>
           </div>
         </div>
-        <GiftedDialog ref="giveDialogFromThis" :from-project-id="projectId" :show-projects="true" />
+        <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
@@ -1173,7 +1182,9 @@ export default class ProjectViewView extends Vue {
     );
   }
 
-  openGiftDialogToProject(contact?: libsUtil.GiverReceiverInputInfo | "Unnamed") {
+  openGiftDialogToProject(
+    contact?: libsUtil.GiverReceiverInputInfo | "Unnamed",
+  ) {
     if (contact === "Unnamed") {
       // Special case: Pass undefined to trigger Step 1, but with "Unnamed" pre-selected
       (this.$refs.giveDialogToThis as GiftedDialog).open(
@@ -1185,10 +1196,18 @@ export default class ProjectViewView extends Vue {
       // Immediately select "Unnamed" and move to Step 2
       (this.$refs.giveDialogToThis as GiftedDialog).selectGiver();
     } else {
-      // Set only the project as recipient, allowing user to select giver in Step 1
+      // Open straight to Step 2 with current user as giver and current project as recipient
       (this.$refs.giveDialogToThis as GiftedDialog).open(
-        undefined,
-        { did: this.issuer, name: this.name, handleId: this.projectId, image: this.imageUrl },
+        {
+          did: this.activeDid,
+          name: "You",
+        },
+        {
+          did: this.issuer,
+          name: this.name,
+          handleId: this.projectId,
+          image: this.imageUrl,
+        },
         undefined,
         `Given to ${this.name}`,
       );
@@ -1198,13 +1217,18 @@ export default class ProjectViewView extends Vue {
   openGiftDialogFromProject() {
     // Set the project as giver and the current user as recipient
     (this.$refs.giveDialogFromThis as GiftedDialog).open(
-      { did: undefined, name: this.name, handleId: this.projectId, image: this.imageUrl },
+      {
+        did: undefined,
+        name: this.name,
+        handleId: this.projectId,
+        image: this.imageUrl,
+      },
       { did: this.activeDid, name: "You" },
       undefined,
       `${this.name} gave to you`,
       undefined,
       undefined,
-      true
+      true,
     );
   }
 
@@ -1479,4 +1503,3 @@ export default class ProjectViewView extends Vue {
   }
 }
 </script>
-