From 579cecbe6e03bf43c202db1571e76cd3b4673f06 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Mon, 12 May 2025 21:22:05 +0800
Subject: [PATCH 01/26] WIP: gifting UI revamp

Started to transform the gifting dialog into the two-step setup as per previous mockups
---
 src/components/GiftedDialog.vue | 227 ++++++++++++++++++++++----------
 src/lib/fontawesome.ts          |   4 +
 src/main.ts                     |   4 +
 src/views/HomeView.vue          |  81 ++++--------
 4 files changed, 190 insertions(+), 126 deletions(-)

diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index 2c778169..53554192 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -1,87 +1,168 @@
 <template>
   <div v-if="visible" class="dialog-overlay">
     <div class="dialog">
-      <h1 class="text-xl font-bold text-center mb-4">
-        {{ customTitle }}
-      </h1>
-      <input
-        v-model="description"
-        type="text"
-        class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
-        :placeholder="prompt || 'What was given?'"
-      />
-      <div class="flex flex-row justify-center">
-        <span
-          class="rounded-l border border-r-0 border-slate-400 bg-slate-200 text-center text-blue-500 px-2 py-2 w-20"
-          @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>
-        <input
-          id="inputGivenAmount"
-          v-model="amountInput"
-          type="number"
-          class="border border-r-0 border-slate-400 px-2 py-2 text-center w-20"
-        />
-        <div
-          class="rounded-r border border-slate-400 bg-slate-200 px-4 py-2"
-          @click="increment()"
+      <!-- Step 1: Recipient -->
+      <div id="sectionGiftedRecipient">
+        <label class="block font-bold mb-4">Choose a person to receive from:</label>
+
+        <!-- Quick-pick grid -->
+				<ul
+          class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-2 gap-y-4 text-center mb-4"
         >
-          <font-awesome icon="chevron-right" />
-        </div>
-      </div>
-      <div class="mt-4 flex justify-center">
-        <span>
-          <router-link
-            :to="{
-              name: 'gifted-details',
-              query: {
-                amountInput,
-                description,
-                giverDid: giver?.did,
-                giverName: giver?.name,
-                offerId,
-                fulfillsProjectId: toProjectId,
-                providerProjectId: fromProjectId,
-                recipientDid: receiver?.did,
-                recipientName: receiver?.name,
-                unitCode,
-              },
-            }"
-            class="text-blue-500"
+          <li @click="openDialog()">
+            <img
+              src="../assets/blank-square.svg"
+              class="mx-auto border border-blue-500 rounded-md mb-1 cursor-pointer"
+            />
+            <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-sm">
+            (Add friends to see more people worthy of recognition.)
+          </li>
+          <li
+            v-for="contact in allContacts.slice(0, 6)"
+            :key="contact.did"
+            @click="openDialog(contact)"
+            class="cursor-pointer"
           >
-            Photo & more options ...
-          </router-link>
-        </span>
-      </div>
-      <p class="text-center mb-2 mt-6 italic">
-        Sign & Send to publish to the world
-        <font-awesome
-          icon="circle-info"
-          class="pl-2 text-blue-500 cursor-pointer"
-          @click="explainData()"
-        />
-      </p>
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
-        <button
-          class="block w-full text-center text-lg font-bold 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-2 py-3 rounded-md"
-          @click="confirm"
-        >
-          Sign &amp; Send
-        </button>
+            <div class="relative w-fit mx-auto">
+              <EntityIcon
+                :contact="contact"
+                :icon-size="64"
+                class="max-w-12 mx-auto border border-slate-300 rounded-full mb-1"
+              />
+
+              <div
+                class="rounded-full bg-orange-500 absolute bottom-0 right-0 p-0.5 translate-x-1/3"
+              >
+                <font-awesome icon="thumbtack" class="block fa-fw text-white text-xs w-4" />
+              </div>
+            </div>
+            <h3
+              class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
+            >
+              {{ contact.name || contact.did }}
+            </h3>
+          </li>
+          <li>
+            <router-link
+              v-if="allContacts.length >= 6"
+              :to="{ name: 'contact-gift' }"
+              class="flex align-bottom text-xs text-blue-500 mt-12 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>
+        </ul>
+
         <button
-          class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
+          class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-lg"
           @click="cancel"
         >
           Cancel
         </button>
       </div>
+
+      <!-- Step 2: Gift -->
+      <div id="sectionGiftedGift">
+        <button class="w-full flex items-center gap-2 bg-slate-100 border border-slate-300 rounded-md p-2 mb-4">
+					<img src="https://placehold.co/480?text=(Image)" class="size-8 object-cover rounded-full">
+
+					<div class="text-start">
+						<p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">Received from:</p>
+						<h3 class="font-semibold">Matthew Raymer</h3>
+					</div>
+
+					<p class="ms-auto text-sm uppercase font-medium pe-2">Change</p>
+				</button>
+        <input
+          v-model="description"
+          type="text"
+          class="block w-full rounded border border-slate-400 px-3 py-2 placeholder:italic"
+          :placeholder="prompt || 'What was given?'"
+        />
+        <div class="flex mb-4">
+					<button
+            class="rounded-s border border-e-0 border-slate-400 bg-slate-200 px-4 py-2"
+            @click="amountInput === '0' ? null : decrement()"
+          >
+						<i class="fa-solid fa-chevron-left"></i>
+					</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
+            class="rounded-e border border-slate-400 bg-slate-200 px-4 py-2"
+            @click="increment()"
+          >
+						<i class="fa-solid fa-chevron-right"></i>
+					</button>
+
+					<select 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 class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-lg mb-4">Photo &amp; more options&hellip;</button>
+        <router-link
+          :to="{
+            name: 'gifted-details',
+            query: {
+              amountInput,
+              description,
+              giverDid: giver?.did,
+              giverName: giver?.name,
+              offerId,
+              fulfillsProjectId: toProjectId,
+              providerProjectId: fromProjectId,
+              recipientDid: receiver?.did,
+              recipientName: receiver?.name,
+              unitCode,
+            },
+          }"
+          class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-lg mb-4"
+        >
+          Photo &amp; more options&hellip;
+        </router-link>
+        <p class="text-center 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"
+            @click="explainData()"
+          />
+        </p>
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+          <button
+            class="block w-full text-center text-md uppercase font-bold 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-1.5 py-2 rounded-lg"
+            @click="confirm"
+          >
+            Sign &amp; Send
+          </button>
+          <button
+            class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-lg"
+            @click="cancel"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/lib/fontawesome.ts b/src/lib/fontawesome.ts
index 8d7a8a07..fe88b722 100644
--- a/src/lib/fontawesome.ts
+++ b/src/lib/fontawesome.ts
@@ -28,6 +28,7 @@ import {
   faCircleCheck,
   faCircleInfo,
   faCircleQuestion,
+  faCircleRight,
   faCircleUser,
   faClock,
   faCoins,
@@ -77,6 +78,7 @@ import {
   faSquareCaretDown,
   faSquareCaretUp,
   faSquarePlus,
+  faThumbtack,
   faTrashCan,
   faTriangleExclamation,
   faUser,
@@ -108,6 +110,7 @@ library.add(
   faCircleCheck,
   faCircleInfo,
   faCircleQuestion,
+  faCircleRight,
   faCircleUser,
   faClock,
   faCoins,
@@ -157,6 +160,7 @@ library.add(
   faSquareCaretDown,
   faSquareCaretUp,
   faSquarePlus,
+  faThumbtack,
   faTrashCan,
   faTriangleExclamation,
   faUser,
diff --git a/src/main.ts b/src/main.ts
index d4a88c7f..220a6f10 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -32,6 +32,7 @@ import {
   faCircleCheck,
   faCircleInfo,
   faCircleQuestion,
+  faCircleRight,
   faCircleUser,
   faClock,
   faCoins,
@@ -82,6 +83,7 @@ import {
   faSquareCaretDown,
   faSquareCaretUp,
   faSquarePlus,
+  faThumbtack,
   faTrashCan,
   faTriangleExclamation,
   faUser,
@@ -112,6 +114,7 @@ library.add(
   faCircleCheck,
   faCircleInfo,
   faCircleQuestion,
+  faCircleRight,
   faCircleUser,
   faClock,
   faCoins,
@@ -162,6 +165,7 @@ library.add(
   faSquareCaretDown,
   faSquareCaretUp,
   faSquarePlus,
+  faThumbtack,
   faTrashCan,
   faTriangleExclamation,
   faUser,
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index a685b0e1..98b32c84 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -117,62 +117,37 @@ Raymer * @version 1.0.0 */
           </div>
 
           <div v-else id="sectionRecordSomethingGiven">
-            <!-- !isCreatingIdentifier && isRegistered -->
-
-            <!-- show the actions for recognizing a give -->
-            <div class="flex">
-              <h2 class="text-xl font-bold">What have you seen someone do?</h2>
-              <button
-                class="ml-2 block text-xs text-center bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1 rounded-md"
-                @click="openGiftedPrompts()"
-              >
-                <font-awesome icon="lightbulb" class="fa-fw" />
-              </button>
-            </div>
-
-            <ul
-              class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-3 gap-y-5 text-center mt-4"
-            >
-              <li @click="openDialog()">
-                <img
-                  src="../assets/blank-square.svg"
-                  class="mx-auto border border-blue-500 rounded-md mb-1 cursor-pointer"
-                />
-                <h3
-                  class="text-xs text-blue-500 italic font-medium text-ellipsis whitespace-nowrap overflow-hidden cursor-pointer"
+            <!-- Record Quick-Action -->
+            <div class="mb-6">
+              <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"
                 >
-                  Unnamed/Unknown
-                </h3>
-              </li>
-              <li v-if="allContacts.length === 0" class="text-sm">
-                (Add friends to see more people worthy of recognition.)
-              </li>
-              <li
-                v-for="contact in allContacts.slice(0, 6)"
-                :key="contact.did"
-                @click="openDialog(contact)"
-              >
-                <EntityIcon
-                  :contact="contact"
-                  :icon-size="64"
-                  class="mx-auto border border-blue-500 rounded-md mb-1 cursor-pointer"
-                />
-                <h3
-                  class="text-xs text-blue-500 font-medium text-ellipsis whitespace-nowrap overflow-hidden cursor-pointer"
+                  <font-awesome icon="lightbulb" />
+                </button>
+              </div>
+
+              <div class="grid grid-cols-2 gap-2">
+                <button
+                  type="button"
+                  @click="openDialog()"
+                  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"
                 >
-                  {{ contact.name || contact.did }}
-                </h3>
-              </li>
-              <li>
-                <router-link
-                  v-if="allContacts.length >= 6"
-                  :to="{ name: 'contact-gift' }"
-                  class="flex align-bottom text-xs text-blue-500 mt-12 cursor-pointer"
+                  <font-awesome icon="user" />
+                  Person
+                </button>
+                <button
+                  type="button"
+                  @click="openDialog()"
+                  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"
                 >
-                  ... or someone else...
-                </router-link>
-              </li>
-            </ul>
+                  <font-awesome icon="folder-open" />
+                  Project
+                </button>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-- 
2.30.2


From b511f9cd24048232915875c9f6dc0493e0fbafa7 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Tue, 13 May 2025 21:16:39 +0800
Subject: [PATCH 02/26] WIP: adjustments to bring closer to original mockups

---
 src/components/GiftedDialog.vue | 32 +++++++++++-------------
 src/views/HomeView.vue          | 44 +++++++++++++--------------------
 2 files changed, 32 insertions(+), 44 deletions(-)

diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index 53554192..71405f8d 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -10,10 +10,6 @@
           class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-2 gap-y-4 text-center mb-4"
         >
           <li @click="openDialog()">
-            <img
-              src="../assets/blank-square.svg"
-              class="mx-auto border border-blue-500 rounded-md mb-1 cursor-pointer"
-            />
             <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"
@@ -21,11 +17,11 @@
               Unnamed
             </h3>
           </li>
-          <li v-if="allContacts.length === 0" class="text-sm">
+          <li v-if="allContacts.length === 0" class="text-xs text-slate-500 italic">
             (Add friends to see more people worthy of recognition.)
           </li>
           <li
-            v-for="contact in allContacts.slice(0, 6)"
+            v-for="contact in allContacts.slice(0, 10)"
             :key="contact.did"
             @click="openDialog(contact)"
             class="cursor-pointer"
@@ -33,14 +29,13 @@
             <div class="relative w-fit mx-auto">
               <EntityIcon
                 :contact="contact"
-                :icon-size="64"
-                class="max-w-12 mx-auto border border-slate-300 rounded-full mb-1"
+                class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full mb-1"
               />
 
               <div
-                class="rounded-full bg-orange-500 absolute bottom-0 right-0 p-0.5 translate-x-1/3"
+                class="rounded-full bg-slate-400 absolute bottom-0 right-0 p-1 translate-x-1/3"
               >
-                <font-awesome icon="thumbtack" class="block fa-fw text-white text-xs w-4" />
+                <font-awesome icon="clock" class="block text-white text-xs w-[1em]" />
               </div>
             </div>
             <h3
@@ -51,9 +46,8 @@
           </li>
           <li>
             <router-link
-              v-if="allContacts.length >= 6"
               :to="{ name: 'contact-gift' }"
-              class="flex align-bottom text-xs text-blue-500 mt-12 cursor-pointer"
+              class="cursor-pointer"
             >
               <font-awesome icon="circle-right" class="text-blue-500 text-5xl mb-1" />
               <h3
@@ -88,7 +82,7 @@
         <input
           v-model="description"
           type="text"
-          class="block w-full rounded border border-slate-400 px-3 py-2 placeholder:italic"
+          class="block w-full rounded border border-slate-400 px-3 py-2 mb-4 placeholder:italic"
           :placeholder="prompt || 'What was given?'"
         />
         <div class="flex mb-4">
@@ -96,7 +90,7 @@
             class="rounded-s border border-e-0 border-slate-400 bg-slate-200 px-4 py-2"
             @click="amountInput === '0' ? null : decrement()"
           >
-						<i class="fa-solid fa-chevron-left"></i>
+            <font-awesome icon="chevron-left" />
 					</button>
           <input
             id="inputGivenAmount"
@@ -108,7 +102,7 @@
             class="rounded-e border border-slate-400 bg-slate-200 px-4 py-2"
             @click="increment()"
           >
-						<i class="fa-solid fa-chevron-right"></i>
+            <font-awesome icon="chevron-right" />
 					</button>
 
 					<select class="flex-1 rounded border border-slate-400 ms-2 px-3 py-2">
@@ -119,7 +113,6 @@
 						<option value="ETH">ETH</option>
 					</select>
 				</div>
-        <button class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-lg mb-4">Photo &amp; more options&hellip;</button>
         <router-link
           :to="{
             name: 'gifted-details',
@@ -180,8 +173,13 @@ import * as libsUtil from "../libs/util";
 import { db, retrieveSettingsForActiveAccount } from "../db/index";
 import { Contact } from "../db/tables/contacts";
 import { retrieveAccountDids } from "../libs/util";
+import EntityIcon from "../components/EntityIcon.vue";
 
-@Component
+@Component({
+  components: {
+    EntityIcon,
+  },
+})
 export default class GiftedDialog extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 98b32c84..3b303562 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -125,7 +125,7 @@ Raymer * @version 1.0.0 */
                   @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"
                 >
-                  <font-awesome icon="lightbulb" />
+                  <font-awesome icon="lightbulb" class="block text-center w-[1em]" />
                 </button>
               </div>
 
@@ -157,36 +157,26 @@ Raymer * @version 1.0.0 */
     <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">
-        <h2 class="text-xl font-bold flex items-center gap-4">
+      <div class="flex gap-2 items-center mb-3">
+        <h2 class="text-xl font-bold">
           Latest Activity
-          <button
-            v-if="resultsAreFiltered()"
-            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()"
-          >
-            <font-awesome icon="filter" class="fa-fw" />
-          </button>
-          <button
-            v-else
-            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"
-            @click="openFeedFilters()"
-          >
-            <font-awesome icon="filter" class="fa-fw" />
-          </button>
         </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]" />
+        </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]" />
+        </button>
       </div>
 
       <div
-- 
2.30.2


From 4b355a54489ca97d88b3bde8ca91180676a906c5 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Wed, 14 May 2025 21:47:12 +0800
Subject: [PATCH 03/26] WIP: two-step dialog + functionality

- Dialog is now presented as two distinct steps
- Gifting functionality reinstated
- Minor UI tweaks
- IN PROGRESS: ensuring calls to dialog from other parts of the app remain functional
---
 src/components/GiftedDialog.vue | 53 ++++++++++++++++++++++++++-------
 src/views/HomeView.vue          |  2 +-
 2 files changed, 44 insertions(+), 11 deletions(-)

diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index 71405f8d..e832a44c 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -1,15 +1,15 @@
 <template>
   <div v-if="visible" class="dialog-overlay">
     <div class="dialog">
-      <!-- Step 1: Recipient -->
-      <div id="sectionGiftedRecipient">
+      <!-- Step 1: Giver -->
+      <div id="sectionGiftedGiver" v-show="currentStep === 1">
         <label class="block font-bold mb-4">Choose a person to receive from:</label>
 
         <!-- Quick-pick grid -->
 				<ul
           class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-2 gap-y-4 text-center mb-4"
         >
-          <li @click="openDialog()">
+          <li @click="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"
@@ -23,7 +23,7 @@
           <li
             v-for="contact in allContacts.slice(0, 10)"
             :key="contact.did"
-            @click="openDialog(contact)"
+            @click="selectGiver(contact)"
             class="cursor-pointer"
           >
             <div class="relative w-fit mx-auto">
@@ -68,13 +68,24 @@
       </div>
 
       <!-- Step 2: Gift -->
-      <div id="sectionGiftedGift">
-        <button class="w-full flex items-center gap-2 bg-slate-100 border border-slate-300 rounded-md p-2 mb-4">
-					<img src="https://placehold.co/480?text=(Image)" class="size-8 object-cover rounded-full">
+      <div id="sectionGiftedGift" v-show="currentStep === 2">
+        <button class="w-full flex items-center gap-2 bg-slate-100 border border-slate-300 rounded-md p-2 mb-4" @click="goBackToStep1">
+          <div>
+            <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"
+            />
+					</div>
 
-					<div class="text-start">
+					<div class="text-start min-w-0">
 						<p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">Received from:</p>
-						<h3 class="font-semibold">Matthew Raymer</h3>
+						<h3 class="font-semibold truncate">{{ giver?.name || 'Unnamed' }}</h3>
 					</div>
 
 					<p class="ms-auto text-sm uppercase font-medium pe-2">Change</p>
@@ -105,7 +116,7 @@
             <font-awesome icon="chevron-right" />
 					</button>
 
-					<select class="flex-1 rounded border border-slate-400 ms-2 px-3 py-2">
+					<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>
@@ -202,6 +213,7 @@ export default class GiftedDialog extends Vue {
   receiver?: libsUtil.GiverReceiverInputInfo;
   unitCode = "HUR";
   visible = false;
+  currentStep = 1;
 
   libsUtil = libsUtil;
 
@@ -221,6 +233,7 @@ export default class GiftedDialog extends Vue {
     this.amountInput = "0";
     this.callbackOnSuccess = callbackOnSuccess;
     this.offerId = offerId || "";
+    this.currentStep = giver ? 2 : 1;
 
     try {
       const settings = await retrieveSettingsForActiveAccount();
@@ -289,6 +302,7 @@ export default class GiftedDialog extends Vue {
     this.amountInput = "0";
     this.prompt = "";
     this.unitCode = "HUR";
+    this.currentStep = 1;
   }
 
   async confirm() {
@@ -468,6 +482,25 @@ export default class GiftedDialog extends Vue {
       -1,
     );
   }
+
+  selectGiver(contact?: Contact) {
+    if (contact) {
+      this.giver = {
+        did: contact.did,
+        name: contact.name || contact.did
+      };
+    } else {
+      this.giver = {
+        did: '',
+        name: 'Unnamed'
+      };
+    }
+    this.currentStep = 2;
+  }
+
+  goBackToStep1() {
+    this.currentStep = 1;
+  }
 }
 </script>
 
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 3b303562..84ee6e30 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -313,7 +313,7 @@ import {
 import { GiveSummaryRecord } from "../interfaces";
 import * as serverUtil from "../libs/endorserServer";
 import { logger } from "../utils/logger";
-import { GiveRecordWithContactInfo } from "types";
+import { GiveRecordWithContactInfo } from "../types";
 
 /**
  * HomeView Component
-- 
2.30.2


From 988244b7ae6d8fd10ca690bdd4afde9501ea17af Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Fri, 16 May 2025 20:22:09 +0800
Subject: [PATCH 04/26] Added check for "Unnamed" giver

Pass string "Unnamed" to select unnamed giver and skip contact selection step of dialog.
---
 src/components/GiftedDialog.vue  |  5 ++++-
 src/views/ContactGiftingView.vue | 32 +++++++++++++++++++--------
 src/views/HomeView.vue           | 38 +++++++++++++++++++++++---------
 src/views/ProjectViewView.vue    | 26 ++++++++++++++++------
 4 files changed, 73 insertions(+), 28 deletions(-)

diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index e832a44c..5e377ad7 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -9,7 +9,10 @@
 				<ul
           class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-2 gap-y-4 text-center mb-4"
         >
-          <li @click="selectGiver()">
+          <li
+            @click="selectGiver()"
+            class="cursor-pointer"
+          >
             <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"
diff --git a/src/views/ContactGiftingView.vue b/src/views/ContactGiftingView.vue
index aa48f796..c18dc53b 100644
--- a/src/views/ContactGiftingView.vue
+++ b/src/views/ContactGiftingView.vue
@@ -31,7 +31,7 @@
             <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>
@@ -129,17 +129,31 @@ export default class ContactGiftingView extends Vue {
     }
   }
 
-  openDialog(giver?: GiverReceiverInputInfo) {
+  openDialog(giver?: GiverReceiverInputInfo | "Unnamed") {
     const recipient = this.projectId
       ? undefined
       : { did: this.activeDid, name: "you" };
-    (this.$refs.customDialog as GiftedDialog).open(
-      giver,
-      recipient,
-      undefined,
-      "Given by " + (giver?.name || "someone not named"),
-      this.prompt,
-    );
+    
+    if (giver === "Unnamed") {
+      // Special case: Pass undefined to trigger Step 1, but with "Unnamed" pre-selected
+      (this.$refs.customDialog as GiftedDialog).open(
+        undefined,
+        recipient,
+        undefined,
+        "Given by Unnamed",
+        this.prompt,
+      );
+      // Immediately select "Unnamed" and move to Step 2
+      (this.$refs.customDialog as GiftedDialog).selectGiver();
+    } else {
+      (this.$refs.customDialog as GiftedDialog).open(
+        giver,
+        recipient,
+        undefined,
+        "Given by " + (giver?.name || "someone not named"),
+        this.prompt,
+      );
+    }
   }
 }
 </script>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 84ee6e30..7ffadae7 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1412,17 +1412,33 @@ export default class HomeView extends Vue {
    * @param giver Optional contact info for giver
    * @param description Optional gift description
    */
-  openDialog(giver?: GiverReceiverInputInfo, description?: string) {
-    (this.$refs.customDialog as GiftedDialog).open(
-      giver,
-      {
-        did: this.activeDid,
-        name: "you",
-      } as GiverReceiverInputInfo,
-      undefined,
-      "Given by " + (giver?.name || "someone not named"),
-      description,
-    );
+  openDialog(giver?: GiverReceiverInputInfo | "Unnamed", description?: string) {
+    if (giver === "Unnamed") {
+      // Special case: Pass undefined to trigger Step 1, but with "Unnamed" pre-selected
+      (this.$refs.customDialog as GiftedDialog).open(
+        undefined,
+        {
+          did: this.activeDid,
+          name: "you",
+        } as GiverReceiverInputInfo,
+        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,
+      );
+    }
   }
 
   /**
diff --git a/src/views/ProjectViewView.vue b/src/views/ProjectViewView.vue
index 18fd8d35..136c7a15 100644
--- a/src/views/ProjectViewView.vue
+++ b/src/views/ProjectViewView.vue
@@ -1216,13 +1216,25 @@ export default class ProjectViewView extends Vue {
     );
   }
 
-  openGiftDialogToProject(contact?: libsUtil.GiverReceiverInputInfo) {
-    (this.$refs.giveDialogToThis as GiftedDialog).open(
-      contact,
-      undefined,
-      undefined,
-      (contact?.name || "Someone not named") + ` gave to this project`,
-    );
+  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(
+        undefined,
+        undefined,
+        undefined,
+        "Given by Unnamed to this project",
+      );
+      // Immediately select "Unnamed" and move to Step 2
+      (this.$refs.giveDialogToThis as GiftedDialog).selectGiver();
+    } else {
+      (this.$refs.giveDialogToThis as GiftedDialog).open(
+        contact,
+        undefined,
+        undefined,
+        (contact?.name || "Someone not named") + ` gave to this project`,
+      );
+    }
   }
 
   openGiftDialogFromProject() {
-- 
2.30.2


From 7eefee1ea5364bfce7b34373c3bf6b3815e86415 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Thu, 12 Jun 2025 14:34:00 +0800
Subject: [PATCH 05/26] Fix: Conditional show-all link

- Only show "Show All" when user has contacts
---
 src/components/GiftedDialog.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index 14c0678e..dccd7a09 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -47,7 +47,7 @@
               {{ contact.name || contact.did }}
             </h3>
           </li>
-          <li>
+          <li v-if="allContacts.length > 0">
             <router-link
               :to="{ name: 'contact-gift' }"
               class="cursor-pointer"
-- 
2.30.2


From 3daf1c8a5c7493f9275226c4d817aaa808d3470f Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Thu, 12 Jun 2025 20:50:27 +0800
Subject: [PATCH 06/26] Feature: Project Gifting

- Gifting dialog: added ability to pick a project to benefit from
- Project view: modified dialog calls in Project view to toggle between giving to and benefiting from a project
- Project view: removed redundant person selection
- Project view: benefiting from a project locks the project selection in dialog to enforce context.
---
 src/components/GiftedDialog.vue | 291 ++++++++++++++++++++++++--------
 src/libs/util.ts                |   2 +
 src/views/HomeView.vue          |  17 +-
 src/views/ProjectViewView.vue   |  74 ++------
 4 files changed, 244 insertions(+), 140 deletions(-)

diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index dccd7a09..7b3f4af8 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -3,63 +3,104 @@
     <div class="dialog">
       <!-- Step 1: Giver -->
       <div id="sectionGiftedGiver" v-show="currentStep === 1">
-        <label class="block font-bold mb-4">Choose a person to receive from:</label>
-
-        <!-- Quick-pick grid -->
-				<ul
-          class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-2 gap-y-4 text-center mb-4"
-        >
-          <li
-            @click="selectGiver()"
-            class="cursor-pointer"
-          >
-            <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"
+        <label class="block font-bold mb-4">
+          {{ 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">
+            <li
+              v-for="project in projects.slice(0, 7)"
+              :key="project.handleId"
+              @click="selectProject(project)"
+              class="cursor-pointer"
             >
-              Unnamed
-            </h3>
-          </li>
-          <li v-if="allContacts.length === 0" class="text-xs text-slate-500 italic">
-            (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"
-          >
-            <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="relative w-fit mx-auto">
+                <ProjectIcon
+                  :entity-id="project.handleId"
+                  :icon-size="48"
+                  :image-url="project.image"
+                  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">
+                {{ 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) }}
               </div>
-            </div>
-            <h3
-              class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
+            </li>
+            <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">
+                  Show All
+                </h3>
+              </router-link>
+            </li>
+          </template>
+          <template v-else>
+            <li
+              v-if="isFromProjectView && activeDid"
+              @click="selectGiver({ did: activeDid, name: 'You' })"
+              class="cursor-pointer"
             >
-              {{ contact.name || contact.did }}
-            </h3>
-          </li>
-          <li v-if="allContacts.length > 0">
-            <router-link
-              :to="{ name: 'contact-gift' }"
+              <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">
+                You
+              </h3>
+            </li>
+            <li
+              @click="selectGiver()"
               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
+              <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>
-            </router-link>
-          </li>
+            </li>
+            <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"
+            >
+              <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>
+              </div>
+              <h3 class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden">
+                {{ contact.name || contact.did }}
+              </h3>
+            </li>
+            <li v-if="allContacts.length > 0">
+              <router-link
+                :to="{ name: 'contact-gift' }"
+                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>
         </ul>
 
         <button
@@ -72,27 +113,72 @@
 
       <!-- Step 2: Gift -->
       <div id="sectionGiftedGift" v-show="currentStep === 2">
-        <button class="w-full flex items-center gap-2 bg-slate-100 border border-slate-300 rounded-md p-2 mb-4" @click="goBackToStep1">
+        <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>
-            <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"
-            />
-					</div>
-
-					<div class="text-start min-w-0">
-						<p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">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>
+            <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 class="text-start min-w-0">
+            <p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">{{ showProjects ? '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>
+          </div>
+
+          <div class="text-start min-w-0">
+            <p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">{{ showProjects ? 'Benefited from:' : 'Received from:' }}</p>
+            <h3 class="font-semibold truncate">{{ giver?.name || 'Unnamed' }}</h3>
+          </div>
+        </div>
         <input
           v-model="description"
           type="text"
@@ -182,6 +268,7 @@ import {
   createAndSubmitGive,
   didInfo,
   serverMessageForUser,
+  getHeaders,
 } from "../libs/endorserServer";
 import * as libsUtil from "../libs/util";
 import { db, retrieveSettingsForActiveAccount } from "../db/index";
@@ -191,10 +278,13 @@ import { retrieveAccountDids } from "../libs/util";
 import { logger } from "../utils/logger";
 import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
 import EntityIcon from "../components/EntityIcon.vue";
+import ProjectIcon from "../components/ProjectIcon.vue";
+import { PlanData } from "../interfaces/records";
 
 @Component({
   components: {
     EntityIcon,
+    ProjectIcon,
   },
 })
 export default class GiftedDialog extends Vue {
@@ -202,6 +292,8 @@ export default class GiftedDialog extends Vue {
 
   @Prop() fromProjectId = "";
   @Prop() toProjectId = "";
+  @Prop({ default: false }) showProjects = false;
+  @Prop() isFromProjectView = false;
 
   activeDid = "";
   allContacts: Array<Contact> = [];
@@ -222,6 +314,10 @@ export default class GiftedDialog extends Vue {
 
   libsUtil = libsUtil;
 
+  projects: PlanData[] = [];
+
+  didInfo = didInfo;
+
   async open(
     giver?: libsUtil.GiverReceiverInputInfo,
     receiver?: libsUtil.GiverReceiverInputInfo,
@@ -234,7 +330,6 @@ export default class GiftedDialog extends Vue {
     this.giver = giver;
     this.prompt = prompt || "";
     this.receiver = receiver;
-    // if we show "given to user" selection, default checkbox to true
     this.amountInput = "0";
     this.callbackOnSuccess = callbackOnSuccess;
     this.offerId = offerId || "";
@@ -269,7 +364,10 @@ export default class GiftedDialog extends Vue {
           this.allContacts,
         );
       }
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+      if (this.showProjects) {
+        await this.loadProjects();
+      }
     } catch (err: any) {
       logger.error("Error retrieving settings from database:", err);
       this.$notify(
@@ -404,7 +502,7 @@ export default class GiftedDialog extends Vue {
         this.axios,
         this.apiServer,
         this.activeDid,
-        giverDid as string,
+        this.showProjects ? undefined : giverDid as string,
         recipientDid as string,
         description,
         amount,
@@ -413,7 +511,7 @@ export default class GiftedDialog extends Vue {
         this.offerId,
         false,
         undefined,
-        this.fromProjectId,
+        this.showProjects ? this.giver?.handleId : undefined,
       );
 
       if (!result.success) {
@@ -506,6 +604,49 @@ export default class GiftedDialog extends Vue {
   goBackToStep1() {
     this.currentStep = 1;
   }
+
+  async loadProjects() {
+    try {
+      const response = await fetch(this.apiServer + "/api/v2/report/plans", {
+        method: "GET",
+        headers: await getHeaders(this.activeDid),
+      });
+
+      if (response.status !== 200) {
+        throw new Error("Failed to load projects");
+      }
+
+      const results = await response.json();
+      if (results.data) {
+        this.projects = results.data;
+      }
+    } catch (error) {
+      logger.error("Error loading projects:", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "Failed to load projects",
+        },
+        3000,
+      );
+    }
+  }
+
+  selectProject(project: PlanData) {
+    this.giver = {
+      did: project.handleId,
+      name: project.name,
+      image: project.image,
+      handleId: project.handleId
+    };
+    this.receiver = {
+      did: this.activeDid,
+      name: "You"
+    };
+    this.currentStep = 2;
+  }
 }
 </script>
 
diff --git a/src/libs/util.ts b/src/libs/util.ts
index 3bc86866..81d04835 100644
--- a/src/libs/util.ts
+++ b/src/libs/util.ts
@@ -49,6 +49,8 @@ import { insertDidSpecificSettings, parseJsonField } from "../db/databaseUtil";
 export interface GiverReceiverInputInfo {
   did?: string;
   name?: string;
+  image?: string;
+  handleId?: string;
 }
 
 export enum OnboardPage {
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 7f91c957..1c73c7d6 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -132,7 +132,7 @@ Raymer * @version 1.0.0 */
               <div class="grid grid-cols-2 gap-2">
                 <button
                   type="button"
-                  @click="openDialog()"
+                  @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"
                 >
                   <font-awesome icon="user" />
@@ -140,7 +140,7 @@ Raymer * @version 1.0.0 */
                 </button>
                 <button
                   type="button"
-                  @click="openDialog()"
+                  @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"
                 >
                   <font-awesome icon="folder-open" />
@@ -153,7 +153,7 @@ Raymer * @version 1.0.0 */
       </div>
     </div>
 
-    <GiftedDialog ref="customDialog" />
+    <GiftedDialog ref="customDialog" :show-projects="showProjectsDialog" />
     <GiftedPrompts ref="giftedPrompts" />
     <FeedFilters ref="feedFilters" />
 
@@ -439,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
@@ -1862,5 +1863,15 @@ 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>
diff --git a/src/views/ProjectViewView.vue b/src/views/ProjectViewView.vue
index 2dfd0cbc..2015b25d 100644
--- a/src/views/ProjectViewView.vue
+++ b/src/views/ProjectViewView.vue
@@ -196,63 +196,7 @@
       </div>
     </div>
 
-    <div v-if="activeDid && isRegistered">
-      <div class="text-center">
-        <p class="mt-2 mt-4 text-center">Record a contribution from:</p>
-      </div>
-      <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" />
+    <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">
@@ -518,7 +462,7 @@
             </button>
           </div>
         </div>
-        <GiftedDialog ref="giveDialogFromThis" :from-project-id="projectId" />
+        <GiftedDialog ref="giveDialogFromThis" :from-project-id="projectId" :show-projects="true" />
 
         <h3 class="text-lg font-bold mb-3 mt-4">
           Benefitted From This Project
@@ -1241,21 +1185,26 @@ 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
       (this.$refs.giveDialogToThis as GiftedDialog).open(
-        contact,
         undefined,
+        { did: this.issuer, name: this.name, handleId: this.projectId, image: this.imageUrl },
         undefined,
-        (contact?.name || "Someone not named") + ` gave to this project`,
+        `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,
+      true
     );
   }
 
@@ -1530,3 +1479,4 @@ export default class ProjectViewView extends Vue {
   }
 }
 </script>
+
-- 
2.30.2


From df1c1f018647a504500c3091f823ec01459ef701 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Fri, 13 Jun 2025 20:52:26 +0800
Subject: [PATCH 07/26] Fix: pass project info

In GiftingDialog, project information is passed along if:
- Selecting "Show All" to go to ContactGiftingView
- Selecting "Photos and Other Options" to go to GiftedDetailsView
---
 src/components/GiftedDialog.vue  | 16 ++++++++++++----
 src/views/ContactGiftingView.vue | 15 +++++++++++++--
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index 7b3f4af8..269671e5 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -91,7 +91,15 @@
             </li>
             <li v-if="allContacts.length > 0">
               <router-link
-                :to="{ name: 'contact-gift' }"
+                :to="{ 
+                  name: 'contact-gift',
+                  query: {
+                    recipientProjectId: toProjectId,
+                    recipientProjectName: giver?.name,
+                    recipientProjectImage: giver?.image,
+                    recipientProjectHandleId: giver?.handleId
+                  }
+                }"
                 class="cursor-pointer"
               >
                 <font-awesome icon="circle-right" class="text-blue-500 text-5xl mb-1" />
@@ -503,15 +511,15 @@ export default class GiftedDialog extends Vue {
         this.apiServer,
         this.activeDid,
         this.showProjects ? undefined : giverDid as string,
-        recipientDid as string,
+        this.showProjects && this.isFromProjectView ? this.giver?.handleId : recipientDid as string,
         description,
         amount,
         unitCode,
-        this.toProjectId,
+        this.showProjects && this.isFromProjectView ? this.giver?.handleId : this.toProjectId,
         this.offerId,
         false,
         undefined,
-        this.showProjects ? this.giver?.handleId : undefined,
+        this.showProjects && !this.isFromProjectView ? this.giver?.handleId : undefined,
       );
 
       if (!result.success) {
diff --git a/src/views/ContactGiftingView.vue b/src/views/ContactGiftingView.vue
index e43d68ae..afdf3c47 100644
--- a/src/views/ContactGiftingView.vue
+++ b/src/views/ContactGiftingView.vue
@@ -97,6 +97,9 @@ export default class ContactGiftingView extends Vue {
   description = "";
   projectId = "";
   prompt = "";
+  recipientProjectName = "";
+  recipientProjectImage = "";
+  recipientProjectHandleId = "";
 
   async created() {
     try {
@@ -124,7 +127,10 @@ export default class ContactGiftingView extends Vue {
         );
       }
 
-      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;
 
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -146,7 +152,12 @@ export default class ContactGiftingView extends Vue {
 
   openDialog(giver?: GiverReceiverInputInfo | "Unnamed") {
     const recipient = this.projectId
-      ? undefined
+      ? {
+          did: this.recipientProjectHandleId,
+          name: this.recipientProjectName,
+          image: this.recipientProjectImage,
+          handleId: this.recipientProjectHandleId
+        }
       : { did: this.activeDid, name: "you" };
     
     if (giver === "Unnamed") {
-- 
2.30.2


From fa21660fd16c1232212e12856d23ced8429bc0b1 Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Sun, 15 Jun 2025 12:43:22 -0600
Subject: [PATCH 08/26] fix spelling

---
 src/components/GiftedDialog.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index 269671e5..dfb6957a 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -151,7 +151,7 @@
           </div>
 
           <div class="text-start min-w-0">
-            <p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">{{ showProjects ? 'Benefited from:' : 'Received from:' }}</p>
+            <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>
 
@@ -183,7 +183,7 @@
           </div>
 
           <div class="text-start min-w-0">
-            <p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">{{ showProjects ? 'Benefited from:' : 'Received from:' }}</p>
+            <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>
         </div>
-- 
2.30.2


From eb7605991c28b5e0eca1dbb3f869b935e4308393 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Wed, 18 Jun 2025 19:58:10 +0800
Subject: [PATCH 09/26] Fixed more gifting use cases

---
 src/components/GiftedDialog.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index dfb6957a..04803772 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -227,11 +227,11 @@
             query: {
               amountInput,
               description,
-              giverDid: giver?.did,
+              giverDid: showProjects ? undefined : giver?.did,
               giverName: giver?.name,
               offerId,
-              fulfillsProjectId: toProjectId,
-              providerProjectId: fromProjectId,
+              fulfillsProjectId: showProjects && isFromProjectView ? giver?.handleId : toProjectId,
+              providerProjectId: showProjects ? giver?.handleId : fromProjectId,
               recipientDid: receiver?.did,
               recipientName: receiver?.name,
               unitCode,
@@ -519,7 +519,7 @@ export default class GiftedDialog extends Vue {
         this.offerId,
         false,
         undefined,
-        this.showProjects && !this.isFromProjectView ? this.giver?.handleId : undefined,
+        this.showProjects ? this.giver?.handleId : undefined,
       );
 
       if (!result.success) {
-- 
2.30.2


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 10/26] 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>
-
-- 
2.30.2


From 0342c872f4f17b262f23cca3bdc43b58feb28018 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Fri, 20 Jun 2025 15:50:57 +0800
Subject: [PATCH 11/26] Fix: added context for ContactGiftingView

---
 src/components/GiftedDialog.vue  | 117 +++++++++++-------------
 src/views/ContactGiftingView.vue | 148 +++++++++++++++++++++++++++----
 2 files changed, 186 insertions(+), 79 deletions(-)

diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index c8c3236a..076e1f0d 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -151,10 +151,28 @@
                 :to="{
                   name: 'contact-gift',
                   query: {
-                    recipientProjectId: toProjectId,
-                    recipientProjectName: giver?.name,
-                    recipientProjectImage: giver?.image,
-                    recipientProjectHandleId: giver?.handleId,
+                    stepType: stepType,
+                    giverEntityType: giverEntityType,
+                    recipientEntityType: recipientEntityType,
+                    ...(stepType === 'giver'
+                      ? {
+                          recipientProjectId: toProjectId,
+                          recipientProjectName: receiver?.name,
+                          recipientProjectImage: receiver?.image,
+                          recipientProjectHandleId: receiver?.handleId,
+                          recipientDid: receiver?.did,
+                        }
+                      : {
+                          giverProjectId: fromProjectId,
+                          giverProjectName: giver?.name,
+                          giverProjectImage: giver?.image,
+                          giverProjectHandleId: giver?.handleId,
+                          giverDid: giver?.did,
+                        }),
+                    fromProjectId: fromProjectId,
+                    toProjectId: toProjectId,
+                    showProjects: (showProjects || false).toString(),
+                    isFromProjectView: (isFromProjectView || false).toString(),
                   },
                 }"
               >
@@ -185,7 +203,10 @@
         <div class="grid grid-cols-2 gap-2 mb-4">
           <!-- Giver Button -->
           <button
-            v-if="(giverEntityType === 'person' || giverEntityType === 'project') && !(isFromProjectView && giverEntityType === 'project')"
+            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')"
           >
@@ -283,36 +304,21 @@
             @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>
+              <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"
+              />
             </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:"
-                }}
+                Given to:
               </p>
               <h3 class="font-semibold truncate">
                 {{ receiver?.name || "Unnamed" }}
@@ -324,40 +330,22 @@
             </p>
           </button>
           <div
-            v-else
+            v-else-if="recipientEntityType === 'project'"
             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>
+              <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"
+              />
             </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:"
-                }}
+                Given to project:
               </p>
               <h3 class="font-semibold truncate">
                 {{ receiver?.name || "Unnamed" }}
@@ -491,17 +479,17 @@ export default class GiftedDialog extends Vue {
   @Prop({ default: false }) showProjects = false;
   @Prop() isFromProjectView = false;
 
-  @Watch('showProjects')
+  @Watch("showProjects")
   onShowProjectsChange() {
     this.updateEntityTypes();
   }
 
-  @Watch('fromProjectId')
+  @Watch("fromProjectId")
   onFromProjectIdChange() {
     this.updateEntityTypes();
   }
 
-  @Watch('toProjectId')
+  @Watch("toProjectId")
   onToProjectIdChange() {
     this.updateEntityTypes();
   }
@@ -531,8 +519,9 @@ export default class GiftedDialog extends Vue {
 
   // Computed property to help debug template logic
   get shouldShowProjects() {
-    const result = (this.stepType === 'giver' && this.giverEntityType === 'project') ||
-                   (this.stepType === 'recipient' && this.recipientEntityType === 'project');
+    const result =
+      (this.stepType === "giver" && this.giverEntityType === "project") ||
+      (this.stepType === "recipient" && this.recipientEntityType === "project");
     return result;
   }
 
@@ -544,7 +533,7 @@ export default class GiftedDialog extends Vue {
     // 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"
diff --git a/src/views/ContactGiftingView.vue b/src/views/ContactGiftingView.vue
index 93a05c22..03241073 100644
--- a/src/views/ContactGiftingView.vue
+++ b/src/views/ContactGiftingView.vue
@@ -11,7 +11,7 @@
           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>
 
@@ -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>
 
@@ -101,6 +107,21 @@ export default class ContactGiftingView extends Vue {
   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 {
       let settings = await databaseUtil.retrieveSettingsForActiveAccount();
@@ -137,6 +158,31 @@ export default class ContactGiftingView extends Vue {
         (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);
@@ -154,33 +200,105 @@ export default class ContactGiftingView extends Vue {
     }
   }
 
-  openDialog(giver?: GiverReceiverInputInfo | "Unnamed") {
-    const recipient = this.projectId
-      ? {
-          did: this.recipientProjectHandleId,
-          name: this.recipientProjectName,
-          image: this.recipientProjectImage,
-          handleId: this.recipientProjectHandleId,
+  openDialog(contact?: GiverReceiverInputInfo | "Unnamed") {
+    if (contact === "Unnamed") {
+      // Special case: Pass undefined to trigger Step 1, but with "Unnamed" pre-selected
+      let recipient: GiverReceiverInputInfo;
+      let giver: GiverReceiverInputInfo | undefined;
+
+      if (this.stepType === "giver") {
+        // We're selecting a giver, so 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" };
         }
-      : { 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 = {
+            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" };
+        }
+      }
 
-    if (giver === "Unnamed") {
-      // Special case: Pass undefined to trigger Step 1, but with "Unnamed" pre-selected
       (this.$refs.customDialog as GiftedDialog).open(
-        undefined,
+        giver,
         recipient,
         undefined,
-        "Given by Unnamed",
+        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,
-        "Given by " + (giver?.name || "someone not named"),
+        this.stepType === "giver"
+          ? "Given by " + (contact?.name || "someone not named")
+          : "Given to " + (contact?.name || "someone not named"),
         this.prompt,
       );
     }
-- 
2.30.2


From d3b80fbe47bdd94115b27df440e74842b75bdb82 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Fri, 20 Jun 2025 18:38:35 +0800
Subject: [PATCH 12/26] Feature: giver-recipient validation

- Ensures person-to-person gifting won't allow the same entity as giver and recipient
- Disable user item selection if it would create conflict
- Error messaging fallback
---
 src/components/GiftedDialog.vue | 100 ++++++++++++++++++++++++++++----
 1 file changed, 90 insertions(+), 10 deletions(-)

diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index 076e1f0d..af6dee5c 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -80,16 +80,29 @@
                 stepType === 'recipient' ||
                 (stepType === 'giver' && isFromProjectView)
               "
-              class="cursor-pointer"
+              :class="{
+                'cursor-pointer': !wouldCreateConflict(activeDid),
+                'cursor-not-allowed opacity-50': wouldCreateConflict(activeDid)
+              }"
               @click="
-                stepType === 'recipient'
+                !wouldCreateConflict(activeDid) &&
+                (stepType === 'recipient'
                   ? selectRecipient({ did: activeDid, name: 'You' })
-                  : selectGiver({ did: activeDid, name: 'You' })
+                  : selectGiver({ did: activeDid, name: 'You' }))
               "
             >
-              <font-awesome icon="hand" class="text-blue-500 text-5xl mb-1" />
+              <font-awesome 
+                :class="{
+                  'text-blue-500 text-5xl mb-1': !wouldCreateConflict(activeDid),
+                  'text-slate-400 text-5xl mb-1': wouldCreateConflict(activeDid)
+                }" 
+                icon="hand" 
+              />
               <h3
-                class="text-xs text-blue-500 font-medium text-ellipsis whitespace-nowrap overflow-hidden"
+                :class="{
+                  'text-xs text-blue-500 font-medium text-ellipsis whitespace-nowrap overflow-hidden': !wouldCreateConflict(activeDid),
+                  'text-xs text-slate-400 font-medium text-ellipsis whitespace-nowrap overflow-hidden': wouldCreateConflict(activeDid)
+                }"
               >
                 You
               </h3>
@@ -119,11 +132,15 @@
             <li
               v-for="contact in allContacts.slice(0, 10)"
               :key="contact.did"
-              class="cursor-pointer"
+              :class="{
+                'cursor-pointer': !wouldCreateConflict(contact.did),
+                'cursor-not-allowed opacity-50': wouldCreateConflict(contact.did)
+              }"
               @click="
-                stepType === 'recipient'
+                !wouldCreateConflict(contact.did) &&
+                (stepType === 'recipient'
                   ? selectRecipient(contact)
-                  : selectGiver(contact)
+                  : selectGiver(contact))
               "
             >
               <div class="relative w-fit mx-auto">
@@ -141,7 +158,10 @@
                 </div>
               </div>
               <h3
-                class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
+                :class="{
+                  'text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden': !wouldCreateConflict(contact.did),
+                  'text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden text-slate-400': wouldCreateConflict(contact.did)
+                }"
               >
                 {{ contact.name || contact.did }}
               </h3>
@@ -425,9 +445,22 @@
             @click="explainData()"
           />
         </p>
+        
+        <!-- Conflict warning -->
+        <div v-if="hasPersonConflict" class="mb-4 p-3 bg-red-50 border border-red-200 rounded-md">
+          <p class="text-red-700 text-sm text-center">
+            <font-awesome icon="exclamation-triangle" class="fa-fw mr-1" />
+            Cannot record: Same person selected as both giver and recipient
+          </p>
+        </div>
+        
         <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
           <button
-            class="block w-full text-center text-md uppercase font-bold 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-1.5 py-2 rounded-lg"
+            :disabled="hasPersonConflict"
+            :class="{
+              'block w-full text-center text-md uppercase font-bold 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-1.5 py-2 rounded-lg': !hasPersonConflict,
+              'block w-full text-center text-md uppercase font-bold bg-gradient-to-b from-slate-300 to-slate-500 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-slate-400 px-1.5 py-2 rounded-lg cursor-not-allowed': hasPersonConflict
+            }"
             @click="confirm"
           >
             Sign &amp; Send
@@ -525,6 +558,39 @@ export default class GiftedDialog extends Vue {
     return result;
   }
 
+  // Computed property to check if current selection would create a conflict
+  get hasPersonConflict() {
+    // Only check for conflicts when both entities are persons
+    if (this.giverEntityType !== "person" || this.recipientEntityType !== "person") {
+      return false;
+    }
+    
+    // Check if giver and recipient are the same person
+    if (this.giver?.did && this.receiver?.did && this.giver.did === this.receiver.did) {
+      return true;
+    }
+    
+    return false;
+  }
+
+  // Computed property to check if a contact would create a conflict when selected
+  wouldCreateConflict(contactDid: string) {
+    // Only check for conflicts when both entities are persons
+    if (this.giverEntityType !== "person" || this.recipientEntityType !== "person") {
+      return false;
+    }
+    
+    if (this.stepType === "giver") {
+      // If selecting as giver, check if it conflicts with current recipient
+      return this.receiver?.did === contactDid;
+    } else if (this.stepType === "recipient") {
+      // If selecting as recipient, check if it conflicts with current giver
+      return this.giver?.did === contactDid;
+    }
+    
+    return false;
+  }
+
   stepType = "giver";
   giverEntityType = "person" as "person" | "project";
   recipientEntityType = "person" as "person" | "project";
@@ -705,6 +771,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;
+    }
 
     this.close();
     this.$notify(
-- 
2.30.2


From ca22161f12c21fbbb53cc79cda9868bf41cb41b8 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Fri, 20 Jun 2025 20:37:14 +0800
Subject: [PATCH 13/26] Fix: entity-type identifier validation

- Ensure claims contain only correct and necessary giver and recipient identifiers, as per Endorser.ch documentation
---
 src/components/GiftedDialog.vue | 74 +++++++++++++++++++++++----------
 1 file changed, 51 insertions(+), 23 deletions(-)

diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index af6dee5c..fe3b2054 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -417,21 +417,7 @@
         <router-link
           :to="{
             name: 'gifted-details',
-            query: {
-              amountInput,
-              description,
-              giverDid: showProjects ? undefined : giver?.did,
-              giverName: giver?.name,
-              offerId,
-              fulfillsProjectId:
-                showProjects && isFromProjectView
-                  ? giver?.handleId
-                  : toProjectId,
-              providerProjectId: showProjects ? giver?.handleId : fromProjectId,
-              recipientDid: receiver?.did,
-              recipientName: receiver?.name,
-              unitCode,
-            },
+            query: giftedDetailsQuery,
           }"
           class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-lg mb-4"
         >
@@ -824,24 +810,46 @@ export default class GiftedDialog extends Vue {
     unitCode: string = "HUR",
   ) {
     try {
+      // Determine the correct parameters based on entity types
+      let fromDid: string | undefined;
+      let toDid: string | undefined;
+      let fulfillsProjectHandleId: string | undefined;
+      let providerPlanHandleId: string | undefined;
+
+      if (this.giverEntityType === "project" && this.recipientEntityType === "person") {
+        // Project-to-person gift
+        fromDid = undefined; // No person giver
+        toDid = recipientDid as string; // Person recipient
+        fulfillsProjectHandleId = undefined; // No project recipient
+        providerPlanHandleId = this.giver?.handleId; // Project giver
+      } else if (this.giverEntityType === "person" && this.recipientEntityType === "project") {
+        // Person-to-project gift
+        fromDid = giverDid as string; // Person giver
+        toDid = undefined; // No person recipient
+        fulfillsProjectHandleId = this.toProjectId; // Project recipient
+        providerPlanHandleId = undefined; // No project giver
+      } else {
+        // Person-to-person gift
+        fromDid = giverDid as string;
+        toDid = recipientDid as string;
+        fulfillsProjectHandleId = undefined;
+        providerPlanHandleId = undefined;
+      }
+
       const result = await createAndSubmitGive(
         this.axios,
         this.apiServer,
         this.activeDid,
-        this.showProjects ? undefined : (giverDid as string),
-        this.showProjects && this.isFromProjectView
-          ? this.giver?.handleId
-          : (recipientDid as string),
+        fromDid,
+        toDid,
         description,
         amount,
         unitCode,
-        this.showProjects && this.isFromProjectView
-          ? this.giver?.handleId
-          : this.toProjectId,
+        fulfillsProjectHandleId,
         this.offerId,
         false,
         undefined,
-        this.showProjects ? this.giver?.handleId : undefined,
+        providerPlanHandleId,
       );
 
       if (!result.success) {
@@ -1003,6 +1011,26 @@ export default class GiftedDialog extends Vue {
     };
     this.currentStep = 2;
   }
+
+  // Computed property for the query parameters
+  get giftedDetailsQuery() {
+    return {
+      amountInput: this.amountInput,
+      description: this.description,
+      giverDid: this.giverEntityType === "person" ? this.giver?.did : undefined,
+      giverName: this.giver?.name,
+      offerId: this.offerId,
+      fulfillsProjectId: this.giverEntityType === "person" && this.recipientEntityType === "project"
+        ? this.toProjectId
+        : undefined,
+      providerProjectId: this.giverEntityType === "project" && this.recipientEntityType === "person"
+        ? this.giver?.handleId
+        : this.fromProjectId,
+      recipientDid: this.receiver?.did,
+      recipientName: this.receiver?.name,
+      unitCode: this.unitCode,
+    };
+  }
 }
 </script>
 
-- 
2.30.2


From 357822d71385c0cd7fc3c630deef56ae12c382b6 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Tue, 24 Jun 2025 16:18:22 +0800
Subject: [PATCH 14/26] Fix: truncate text blocks

- Avoid did display stretching screen width
---
 src/views/GiftedDetailsView.vue | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/views/GiftedDetailsView.vue b/src/views/GiftedDetailsView.vue
index 70f16e89..211f42ca 100644
--- a/src/views/GiftedDetailsView.vue
+++ b/src/views/GiftedDetailsView.vue
@@ -20,7 +20,7 @@
     <!-- 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">
+    <h1 class="text-xl font-bold text-center mb-4 truncate">
       <span>
         From
         {{
@@ -95,22 +95,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 border border-slate-400 p-2 rounded-md overflow-hidden">
         <div class="flex">
           <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 mt-1 truncate">
             {{
               giverDid
                 ? "This was provided by " + giverName + "."
@@ -130,14 +130,14 @@
             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 mt-1 truncate">
             {{
               providerProjectId
                 ? "This was provided by " + providerProjectName + "."
@@ -153,25 +153,25 @@
         </div>
       </div>
 
-      <div class="flex-shrink flex justify-center items-center">
+      <div class="sm:flex-shrink flex justify-center items-center">
         <font-awesome icon="arrow-right" class="fa-fw h-7" />
       </div>
 
       <!-- Third Column for Recipient -->
-      <div class="flex-grow border border-slate-400 p-2 rounded-md">
+      <div class="sm:flex-grow border border-slate-400 p-2 rounded-md overflow-hidden">
         <div class="flex">
           <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 mt-1 truncate">
             {{
               recipientDid
                 ? "This was given to " + recipientName + "."
@@ -191,14 +191,14 @@
             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 mt-1 truncate">
             {{
               fulfillsProjectId
                 ? "This was given to " + fulfillsProjectName + ". "
-- 
2.30.2


From ce04312baa2806067489266dcf7a18a62d30233c Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Tue, 24 Jun 2025 19:17:30 +0800
Subject: [PATCH 15/26] Updated amount input controls

Now consistent with gifting dialog version
---
 src/views/GiftedDetailsView.vue | 34 +++++++++++++++++++--------------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/views/GiftedDetailsView.vue b/src/views/GiftedDetailsView.vue
index 05f86a9c..d5deff94 100644
--- a/src/views/GiftedDetailsView.vue
+++ b/src/views/GiftedDetailsView.vue
@@ -48,30 +48,36 @@
       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">
-      <span
-        class="rounded-l border border-r-0 border-slate-400 bg-slate-200 text-center text-blue-500 px-2 py-2 w-20"
-        @click="changeUnitCode()"
-      >
-        {{ libsUtil.UNIT_SHORT[unitCode] || unitCode }}
-      </span>
-      <div
-        class="border border-r-0 border-slate-400 bg-slate-200 px-4 py-2"
+    <div class="flex mb-4">
+      <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" />
-      </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
-        class="rounded-r border border-slate-400 bg-slate-200 px-4 py-2"
+      <button
+        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 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>
 
     <div class="flex justify-center mt-4" data-testId="imagery">
-- 
2.30.2


From fe4ae90849f721bebfe692df461a5435cac61ba2 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Tue, 24 Jun 2025 19:19:51 +0800
Subject: [PATCH 16/26] Giver-recipient display fixes

- Truncate very long texts (such as dids)
- Stacked layout in mobile, row layout in wider screens
- Minor design adjustments
---
 src/views/GiftedDetailsView.vue | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/views/GiftedDetailsView.vue b/src/views/GiftedDetailsView.vue
index d5deff94..61f26668 100644
--- a/src/views/GiftedDetailsView.vue
+++ b/src/views/GiftedDetailsView.vue
@@ -103,8 +103,8 @@
 
     <div class="mt-4 sm:flex justify-between gap-2">
       <!-- First Column for Giver -->
-      <div class="sm:flex-grow border border-slate-400 p-2 rounded-md overflow-hidden">
-        <div class="flex">
+      <div class="sm:flex-grow sm:w-1/2 border border-slate-400 p-2 rounded-md overflow-hidden">
+        <div class="flex items-center">
           <input
             v-if="giverDid && !providedByProject"
             v-model="providedByGiver"
@@ -116,7 +116,7 @@
             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 truncate">
+          <label class="text-sm truncate">
             {{
               giverDid
                 ? "This was provided by " + giverName + "."
@@ -126,12 +126,12 @@
           <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"
@@ -143,7 +143,7 @@
             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 truncate">
+          <label class="text-sm truncate">
             {{
               providerProjectId
                 ? "This was provided by " + providerProjectName + "."
@@ -153,19 +153,19 @@
           <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="sm:flex-shrink flex justify-center items-center">
-        <font-awesome icon="arrow-right" class="fa-fw h-7" />
+      <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 rotate-90 sm:rotate-0" />
       </div>
 
       <!-- Third Column for Recipient -->
-      <div class="sm:flex-grow border border-slate-400 p-2 rounded-md overflow-hidden">
-        <div class="flex">
+      <div class="sm:flex-grow sm:w-1/2 border border-slate-400 p-2 rounded-md overflow-hidden">
+        <div class="flex items-center">
           <input
             v-if="recipientDid && !givenToProject"
             v-model="givenToRecipient"
@@ -177,7 +177,7 @@
             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 truncate">
+          <label class="text-sm truncate">
             {{
               recipientDid
                 ? "This was given to " + recipientName + "."
@@ -187,12 +187,12 @@
           <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"
@@ -204,7 +204,7 @@
             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 truncate">
+          <label class="text-sm truncate">
             {{
               fulfillsProjectId
                 ? "This was given to " + fulfillsProjectName + ". "
@@ -214,7 +214,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>
-- 
2.30.2


From c0ddba889877596bf5bb688ed4243d7529b8475d Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Tue, 24 Jun 2025 19:22:09 +0800
Subject: [PATCH 17/26] Various design tweaks

---
 src/views/GiftedDetailsView.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/views/GiftedDetailsView.vue b/src/views/GiftedDetailsView.vue
index 61f26668..23fc94eb 100644
--- a/src/views/GiftedDetailsView.vue
+++ b/src/views/GiftedDetailsView.vue
@@ -81,13 +81,13 @@
     </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 :src="imageUrl" class="h-24 rounded-xl" />
+          <img :src="imageUrl" class="h-36 rounded-lg" />
         </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>
@@ -235,11 +235,11 @@
       </router-link>
     </div>
 
-    <p class="text-center mb-2 mt-6 italic">
-      Sign & Send to publish to the world
+    <p class="text-center text-sm my-4">
+      <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>
-- 
2.30.2


From 447a7cb08938a74099f6e6f7434187459027df63 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Wed, 25 Jun 2025 17:35:01 +0800
Subject: [PATCH 18/26] Style "unnamed" entity

---
 src/components/GiftedDialog.vue | 56 +++++++++++++++++++++++++++------
 1 file changed, 46 insertions(+), 10 deletions(-)

diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index e79f104c..12cdbbe6 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -262,8 +262,17 @@
                     : "Received from:"
                 }}
               </p>
-              <h3 class="font-semibold truncate">
-                {{ giver?.name || "Unnamed" }}
+              <h3 
+                v-if="giver?.name" 
+                class="font-semibold truncate"
+              >
+                {{ giver.name }}
+              </h3>
+              <h3 
+                v-else 
+                class="font-semibold truncate text-slate-400 italic"
+              >
+                Unnamed
               </h3>
             </div>
 
@@ -307,8 +316,17 @@
                     : "Received from:"
                 }}
               </p>
-              <h3 class="font-semibold truncate">
-                {{ giver?.name || "Unnamed" }}
+              <h3 
+                v-if="giver?.name" 
+                class="font-semibold truncate"
+              >
+                {{ giver.name }}
+              </h3>
+              <h3 
+                v-else 
+                class="font-semibold truncate text-slate-400 italic"
+              >
+                Unnamed
               </h3>
             </div>
 
@@ -340,8 +358,17 @@
               <p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">
                 Given to:
               </p>
-              <h3 class="font-semibold truncate">
-                {{ receiver?.name || "Unnamed" }}
+              <h3 
+                v-if="receiver?.name" 
+                class="font-semibold truncate"
+              >
+                {{ receiver.name }}
+              </h3>
+              <h3 
+                v-else 
+                class="font-semibold truncate text-slate-400 italic"
+              >
+                Unnamed
               </h3>
             </div>
 
@@ -367,8 +394,17 @@
               <p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">
                 Given to project:
               </p>
-              <h3 class="font-semibold truncate">
-                {{ receiver?.name || "Unnamed" }}
+              <h3 
+                v-if="receiver?.name" 
+                class="font-semibold truncate"
+              >
+                {{ receiver.name }}
+              </h3>
+              <h3 
+                v-else 
+                class="font-semibold truncate text-slate-400 italic"
+              >
+                Unnamed
               </h3>
             </div>
 
@@ -920,7 +956,7 @@ export default class GiftedDialog extends Vue {
     } else {
       this.giver = {
         did: "",
-        name: "Unnamed",
+        name: "",
       };
     }
     this.currentStep = 2;
@@ -983,7 +1019,7 @@ export default class GiftedDialog extends Vue {
     } else {
       this.receiver = {
         did: "",
-        name: "Unnamed",
+        name: "",
       };
     }
     this.currentStep = 2;
-- 
2.30.2


From ea49173885034647842638e52f268ebcc096b173 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Wed, 25 Jun 2025 17:38:33 +0800
Subject: [PATCH 19/26] Changed currentStep to boolean

---
 src/components/GiftedDialog.vue | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index 12cdbbe6..da6fea48 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -2,7 +2,7 @@
   <div v-if="visible" class="dialog-overlay">
     <div class="dialog">
       <!-- Step 1: Giver -->
-      <div v-show="currentStep === 1" id="sectionGiftedGiver">
+      <div v-show="firstStep" id="sectionGiftedGiver">
         <label class="block font-bold mb-4">
           {{
             stepType === "recipient"
@@ -219,7 +219,7 @@
       </div>
 
       <!-- Step 2: Gift -->
-      <div v-show="currentStep === 2" id="sectionGiftedGift">
+      <div v-show="!firstStep" id="sectionGiftedGift">
         <div class="grid grid-cols-2 gap-2 mb-4">
           <!-- Giver Button -->
           <button
@@ -558,13 +558,13 @@ export default class GiftedDialog extends Vue {
   callbackOnSuccess?: (amount: number) => void = () => {};
   customTitle?: string;
   description = "";
+  firstStep = true;
   giver?: libsUtil.GiverReceiverInputInfo; // undefined means no identified giver agent
   offerId = "";
   prompt = "";
   receiver?: libsUtil.GiverReceiverInputInfo;
   unitCode = "HUR";
   visible = false;
-  currentStep = 1;
 
   libsUtil = libsUtil;
 
@@ -657,7 +657,7 @@ 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
@@ -751,7 +751,7 @@ export default class GiftedDialog extends Vue {
     this.amountInput = "0";
     this.prompt = "";
     this.unitCode = "HUR";
-    this.currentStep = 1;
+    this.firstStep = true;
   }
 
   async confirm() {
@@ -959,12 +959,12 @@ export default class GiftedDialog extends Vue {
         name: "",
       };
     }
-    this.currentStep = 2;
+    this.firstStep = false;
   }
 
   goBackToStep1(step: string) {
     this.stepType = step;
-    this.currentStep = 1;
+    this.firstStep = true;
   }
 
   async loadProjects() {
@@ -1007,7 +1007,7 @@ export default class GiftedDialog extends Vue {
       did: this.activeDid,
       name: "You",
     };
-    this.currentStep = 2;
+    this.firstStep = false;
   }
 
   selectRecipient(contact?: Contact) {
@@ -1022,7 +1022,7 @@ export default class GiftedDialog extends Vue {
         name: "",
       };
     }
-    this.currentStep = 2;
+    this.firstStep = false;
   }
 
   selectRecipientProject(project: PlanData) {
@@ -1032,7 +1032,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
-- 
2.30.2


From 4b539ccc554b3688ca1141419fa2e47a0b69377d Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Wed, 25 Jun 2025 21:15:05 +0800
Subject: [PATCH 20/26] Better handling of No-name and Unnamed entities

---
 src/components/GiftedDialog.vue | 53 ++++++++++++++++++++++-----------
 1 file changed, 36 insertions(+), 17 deletions(-)

diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index da6fea48..b5327bec 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -66,7 +66,7 @@
                   class="text-blue-500 text-5xl mb-1"
                 />
                 <h3
-                  class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
+                  class="text-xs text-slate-400 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
                 >
                   Show All
                 </h3>
@@ -118,9 +118,9 @@
                 class="text-slate-400 text-5xl mb-1"
               />
               <h3
-                class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
+                class="text-xs text-slate-400 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
               >
-                Unnamed
+                (Unnamed)
               </h3>
             </li>
             <li
@@ -159,11 +159,12 @@
               </div>
               <h3
                 :class="{
-                  'text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden': !wouldCreateConflict(contact.did),
-                  'text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden text-slate-400': wouldCreateConflict(contact.did)
+                  'text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden': !wouldCreateConflict(contact.did) && contact.name,
+                  'text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden text-slate-400 italic': !contact.name,
+                  'text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden text-slate-400': wouldCreateConflict(contact.did) && contact.name
                 }"
               >
-                {{ contact.name || contact.did }}
+                {{ contact.name || "(No name)" }}
               </h3>
             </li>
             <li v-if="allContacts.length > 0" class="cursor-pointer">
@@ -201,7 +202,7 @@
                   class="text-blue-500 text-5xl mb-1"
                 />
                 <h3
-                  class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
+                  class="text-xs text-slate-400 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
                 >
                   Show All
                 </h3>
@@ -263,16 +264,22 @@
                 }}
               </p>
               <h3 
-                v-if="giver?.name" 
+                v-if="giver?.name && giver.name !== giver.did" 
                 class="font-semibold truncate"
               >
                 {{ giver.name }}
               </h3>
               <h3 
-                v-else 
+                v-if="giver?.name && giver.name === giver.did" 
+                class="font-semibold truncate text-slate-400 italic"
+              >
+                (No name)
+              </h3>
+              <h3 
+                v-else-if="!giver?.name" 
                 class="font-semibold truncate text-slate-400 italic"
               >
-                Unnamed
+                (Unnamed)
               </h3>
             </div>
 
@@ -317,16 +324,22 @@
                 }}
               </p>
               <h3 
-                v-if="giver?.name" 
+                v-if="giver?.name && giver.name !== giver.did" 
                 class="font-semibold truncate"
               >
                 {{ giver.name }}
               </h3>
               <h3 
-                v-else 
+                v-if="giver?.name && giver.name === giver.did" 
+                class="font-semibold truncate text-slate-400 italic"
+              >
+                (No name)
+              </h3>
+              <h3 
+                v-else-if="!giver?.name" 
                 class="font-semibold truncate text-slate-400 italic"
               >
-                Unnamed
+                (Unnamed)
               </h3>
             </div>
 
@@ -359,16 +372,22 @@
                 Given to:
               </p>
               <h3 
-                v-if="receiver?.name" 
+                v-if="receiver?.name && receiver.name !== receiver.did" 
                 class="font-semibold truncate"
               >
                 {{ receiver.name }}
               </h3>
               <h3 
-                v-else 
+                v-if="receiver?.name && receiver.name === receiver.did" 
+                class="font-semibold truncate text-slate-400 italic"
+              >
+                (No name)
+              </h3>
+              <h3 
+                v-else-if="!receiver?.name" 
                 class="font-semibold truncate text-slate-400 italic"
               >
-                Unnamed
+                (Unnamed)
               </h3>
             </div>
 
@@ -404,7 +423,7 @@
                 v-else 
                 class="font-semibold truncate text-slate-400 italic"
               >
-                Unnamed
+                (Unnamed)
               </h3>
             </div>
 
-- 
2.30.2


From d8e237f8cbb042492a202be1a6f49c9b0f1fcb1a Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Wed, 25 Jun 2025 21:17:11 +0800
Subject: [PATCH 21/26] Describe firstStep variable

---
 src/components/GiftedDialog.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index b5327bec..0ba3532d 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -577,7 +577,7 @@ export default class GiftedDialog extends Vue {
   callbackOnSuccess?: (amount: number) => void = () => {};
   customTitle?: string;
   description = "";
-  firstStep = true;
+  firstStep = true; // true = Step 1 (giver/recipient selection), false = Step 2 (amount/description)
   giver?: libsUtil.GiverReceiverInputInfo; // undefined means no identified giver agent
   offerId = "";
   prompt = "";
-- 
2.30.2


From b6278ca148460815a86b7b7275f6300ab06317d8 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Wed, 25 Jun 2025 21:28:25 +0800
Subject: [PATCH 22/26] Unit codes pulled from util.ts

---
 src/components/GiftedDialog.vue | 17 ++++++++++++-----
 src/views/GiftedDetailsView.vue | 17 ++++++++++++-----
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index 0ba3532d..49337962 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -462,11 +462,13 @@
             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>
+            <option
+              v-for="(displayName, code) in unitOptions"
+              :key="code"
+              :value="code"
+            >
+              {{ displayName }}
+            </option>
           </select>
         </div>
         <router-link
@@ -1073,6 +1075,11 @@ export default class GiftedDialog extends Vue {
       unitCode: this.unitCode,
     };
   }
+
+  // Computed property to get unit options
+  get unitOptions() {
+    return this.libsUtil.UNIT_SHORT;
+  }
 }
 </script>
 
diff --git a/src/views/GiftedDetailsView.vue b/src/views/GiftedDetailsView.vue
index 23fc94eb..fce6c325 100644
--- a/src/views/GiftedDetailsView.vue
+++ b/src/views/GiftedDetailsView.vue
@@ -72,11 +72,13 @@
         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>
+        <option
+          v-for="(displayName, code) in unitOptions"
+          :key="code"
+          :value="code"
+        >
+          {{ displayName }}
+        </option>
       </select>
     </div>
 
@@ -916,5 +918,10 @@ export default class GiftedDetails extends Vue {
       7000,
     );
   }
+
+  // Computed property to get unit options
+  get unitOptions() {
+    return this.libsUtil.UNIT_SHORT;
+  }
 }
 </script>
-- 
2.30.2


From 0e6a9c4f89200df056317d58567b0f95bec2f573 Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Wed, 25 Jun 2025 20:51:57 -0600
Subject: [PATCH 23/26] adjust grammar for recording receipt

---
 src/components/GiftedDialog.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index fe3b2054..4f44bb8d 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -8,8 +8,8 @@
             stepType === "recipient"
               ? "Choose who received the gift:"
               : showProjects
-                ? "Choose a project to benefit from:"
-                : "Choose a person to receive from:"
+                ? "Choose a project benefitted from:"
+                : "Choose a person received from:"
           }}
         </label>
 
-- 
2.30.2


From 08c46a27d31454dbe6ab0fc9644b994a32c4ff37 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Thu, 26 Jun 2025 18:52:52 +0800
Subject: [PATCH 24/26] Add project-to-project case

---
 src/components/GiftedDialog.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index 90dc2927..c1d14e5b 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -885,6 +885,12 @@ export default class GiftedDialog extends Vue {
         toDid = undefined; // No person recipient
         fulfillsProjectHandleId = this.toProjectId; // Project recipient
         providerPlanHandleId = undefined; // No project giver
+      } else if (this.giverEntityType === "project" && this.recipientEntityType === "project") {
+        // Project-to-project gift
+        fromDid = undefined; // No person giver
+        toDid = undefined; // No person recipient
+        fulfillsProjectHandleId = this.toProjectId; // Project recipient
+        providerPlanHandleId = this.giver?.handleId; // Project giver
       } else {
         // Person-to-person gift
         fromDid = giverDid as string;
-- 
2.30.2


From bf9fee7ee9441c1795e2506e964efe2221d4d05d Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Fri, 27 Jun 2025 21:59:19 +0800
Subject: [PATCH 25/26] Various aesthetic improvements and optimizations

---
 src/components/GiftedDialog.vue  |  8 ++--
 src/views/ContactGiftingView.vue | 22 +++++-----
 src/views/GiftedDetailsView.vue  | 71 ++++++++++++++++----------------
 3 files changed, 50 insertions(+), 51 deletions(-)

diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index c1d14e5b..f7748045 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -33,12 +33,12 @@
                   : selectProject(project)
               "
             >
-              <div class="relative w-fit mx-auto">
+              <div class="relative w-fit mx-auto mb-1">
                 <ProjectIcon
                   :entity-id="project.handleId"
                   :icon-size="48"
                   :image-url="project.image"
-                  class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full mb-1"
+                  class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full"
                 />
               </div>
               <h3
@@ -143,10 +143,10 @@
                   : selectGiver(contact))
               "
             >
-              <div class="relative w-fit mx-auto">
+              <div class="relative w-fit mx-auto mb-1">
                 <EntityIcon
                   :contact="contact"
-                  class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full mb-1"
+                  class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full"
                 />
                 <div
                   class="rounded-full bg-slate-400 absolute bottom-0 right-0 p-1 translate-x-1/3"
diff --git a/src/views/ContactGiftingView.vue b/src/views/ContactGiftingView.vue
index 03241073..07372cdb 100644
--- a/src/views/ContactGiftingView.vue
+++ b/src/views/ContactGiftingView.vue
@@ -4,7 +4,7 @@
   <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' }"
@@ -19,13 +19,12 @@
     <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">
-            <img
-              src="../assets/blank-square.svg"
-              width="32"
-              class="inline-block align-middle border border-slate-300 rounded-md mr-1"
+          <span class="grow flex gap-2 items-center font-medium">
+            <font-awesome
+              icon="circle-question"
+              class="text-slate-400 text-4xl"
             />
-            Unnamed/Unknown
+            <span class="italic text-slate-400">(Unnamed/Unknown)</span>
           </span>
           <span class="text-right">
             <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"
-              class="inline-block align-middle border border-slate-300 rounded-md mr-1"
+              :icon-size="34"
+              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
diff --git a/src/views/GiftedDetailsView.vue b/src/views/GiftedDetailsView.vue
index fce6c325..6dbec987 100644
--- a/src/views/GiftedDetailsView.vue
+++ b/src/views/GiftedDetailsView.vue
@@ -4,45 +4,44 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back -->
-    <div
-      v-if="!hideBackButton"
-      class="text-lg text-center font-light relative px-7"
-    >
-      <h1
-        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-        @click="cancelBack()"
-      >
-        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
+    <!-- Breadcrumb -->
+    <div id="ViewBreadcrumb" class="mb-8">
+      <h1 class="text-2xl text-center font-semibold relative px-7 mb-2">
+        <!-- Back -->
+        <div
+          v-if="!hideBackButton"
+          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+          @click="cancelBack()"
+        >
+          <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 truncate">
-      <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"
-- 
2.30.2


From 25512d3db17b6cce0fca50ae2671084969a79342 Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Sun, 29 Jun 2025 18:18:18 -0600
Subject: [PATCH 26/26] some fixes to the gifted-dialog logic

---
 src/components/GiftedDialog.vue  | 3 +--
 src/views/ContactGiftingView.vue | 2 +-
 src/views/ProjectViewView.vue    | 1 -
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index f7748045..51b7e833 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -1025,7 +1025,6 @@ export default class GiftedDialog extends Vue {
 
   selectProject(project: PlanData) {
     this.giver = {
-      did: project.handleId,
       name: project.name,
       image: project.image,
       handleId: project.handleId,
@@ -1054,7 +1053,7 @@ export default class GiftedDialog extends Vue {
 
   selectRecipientProject(project: PlanData) {
     this.receiver = {
-      did: project.handleId,
+      // no did, because it's a project
       name: project.name,
       image: project.image,
       handleId: project.handleId,
diff --git a/src/views/ContactGiftingView.vue b/src/views/ContactGiftingView.vue
index 07372cdb..d351fdcb 100644
--- a/src/views/ContactGiftingView.vue
+++ b/src/views/ContactGiftingView.vue
@@ -226,7 +226,7 @@ export default class ContactGiftingView extends Vue {
         // Preserve the existing giver from the context
         if (this.giverEntityType === "project") {
           giver = {
-            did: this.giverProjectHandleId,
+            // no did, because it's a project
             name: this.giverProjectName,
             image: this.giverProjectImage,
             handleId: this.giverProjectHandleId,
diff --git a/src/views/ProjectViewView.vue b/src/views/ProjectViewView.vue
index ef67d0d3..9690872e 100644
--- a/src/views/ProjectViewView.vue
+++ b/src/views/ProjectViewView.vue
@@ -1269,7 +1269,6 @@ export default class ProjectViewView extends Vue {
       `${this.name} gave to you`,
       undefined,
       undefined,
-      true,
     );
   }
 
-- 
2.30.2