In-progress: homeview design refresh

I had to comment out line 544 because it was causing errors (and seemed redundant?)

src/views/HomeView.vue

@@ -186,23 +186,23 @@
     </div>
 
     <!-- Results List -->
-    <div class="bg-slate-100 rounded-md px-4 py-3 mt-4 mb-4">
+    <div class="mt-4 mb-4">
       <div class="flex items-center mb-4">
-        <h2 class="text-xl font-bold">
+        <h2 class="text-xl font-bold flex items-center gap-4">
           Latest Activity
-          <button @click="openFeedFilters()">
+          <button
-            <span class="text-xs text-white">
-              <fa
             v-if="resultsAreFiltered()"
-                icon="filter"
+            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"
-                class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-1 py-1.5 rounded-md"
+            @click="openFeedFilters()"
-              />
+          >
-              <fa
+            <fa icon="filter" class="fa-fw" />
+          </button>
+          <button
             v-else
-                icon="filter"
+            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"
-                class="bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-1 py-1.5 rounded-md"
+            @click="openFeedFilters()"
-              />
+          >
-            </span>
+            <fa icon="filter" class="fa-fw" />
           </button>
         </h2>
       </div>
@@ -249,19 +249,123 @@
       </div>
 
       <InfiniteScroll @reached-bottom="loadMoreGives">
-        <ul id="listLatestActivity" class="border-t border-slate-300">
+        <ul id="listLatestActivity" class="space-y-4">
-          <li
+          <li v-for="record in feedData" :key="record.jwtId">
-            class="border-b border-slate-300 py-2"
-            v-for="record in feedData"
-            :key="record.jwtId"
-          >
             <div
-              class="border-b border-slate-300 text-orange-400 pb-2 mb-2 font-bold text-sm"
+              class="border-b border-dashed border-slate-300 text-orange-400 mt-4 mb-6 font-bold text-sm"
               v-if="record.jwtId == feedLastViewedClaimId"
             >
-              You've already seen all the following
+              <span class="block w-fit mx-auto -mb-2.5 bg-white px-2"
+                >You've already seen all the following</span
+              >
+            </div>
+
+            <div
+              class="bg-slate-100 rounded-t-md border border-slate-300 p-3 sm:p-4"
+            >
+              <div class="relative flex justify-between gap-4 mb-3">
+                <!-- Source -->
+                <a
+                  href=""
+                  class="w-28 sm:w-48 text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
+                >
+                  <div class="relative w-fit mx-auto">
+                    <!-- If source is unknown/anonymous… -->
+                    <fa
+                      icon="circle-question"
+                      class="text-slate-300 text-5xl sm:text-8xl"
+                    />
+                    <!-- Otherwise… -->
+                    <!-- If user, add class="rounded-full". Otherwise, add class="rounded" -->
+                    <span
+                      class="absolute -end-3 -bottom-2 bg-slate-400 rounded-full leading-1.25 p-1 sm:px-1.5 -mt-6 border sm:border-2 border-white text-xs sm:text-base"
+                    >
+                      <fa icon="user" class="fa-fw text-white" />
+                    </span>
+                  </div>
+                  <div class="text-xs mt-2 line-clamp-2">[SOURCE_NAME]</div>
+                </a>
+
+                <!-- Arrow -->
+                <div
+                  class="absolute inset-28 sm:inset-x-48 mx-4 sm:mx-8 top-1/2 flex items-center"
+                >
+                  <hr class="grow border-t-[25px] border-slate-300" />
+                  <div
+                    class="shrink-0 w-0 h-0 border border-slate-300 border-t-[30px] border-t-transparent border-b-[30px] border-b-transparent border-s-[40px] border-e-0"
+                  ></div>
+                </div>
+
+                <!-- Destination -->
+                <a
+                  href=""
+                  class="w-28 sm:w-48 text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
+                >
+                  <div class="relative w-fit mx-auto">
+                    <!-- If user, add class="rounded-full". Otherwise, add class="rounded" -->
+                    <img
+                      src="https://placehold.co/600x400?text=(Project Image)"
+                      class="size-12 sm:size-24 object-cover rounded"
+                    />
+                    <span
+                      class="absolute -end-3 -bottom-2 bg-slate-400 rounded-full leading-1.25 p-1 sm:px-1.5 -mt-6 border sm:border-2 border-white text-xs sm:text-base"
+                    >
+                      <fa icon="hammer" class="fa-fw text-white" />
+                    </span>
+                  </div>
+                  <div class="text-xs mt-2 line-clamp-2">
+                    [DESTINATION_NAME]
+                  </div>
+                </a>
+              </div>
+
+              <!-- Description -->
+              <p class="font-medium">
+                <a
+                  @click="onClickLoadClaim(record.jwtId)"
+                  class="cursor-pointer"
+                >
+                  {{ giveDescription(record) }}
+                </a>
+              </p>
+              <p class="text-sm">[SUB_DESCRIPTION]</p>
+            </div>
+
+            <!-- Record Image -->
+            <div
+              v-if="record.image"
+              class="bg-cover"
+              :style="'background-image: url(' + record.image + ');'"
+            >
+              <a
+                class="block bg-slate-100/50 backdrop-blur-md px-6 py-4 cursor-pointer"
+                @click="openImageViewer(record.image)"
+              >
+                <img
+                  class="w-full h-auto max-w-lg max-h-96 object-contain mx-auto drop-shadow-md"
+                  :src="record.image"
+                  @load="cacheImageData($event, record.image)"
+                />
+              </a>
             </div>
 
+            <div
+              class="flex items-center gap-2 text-lg bg-slate-300 rounded-b-md px-3 sm:px-4 py-1 sm:py-2"
+            >
+              <!-- Claim Details Link -->
+              <a @click="onClickLoadClaim(record.jwtId)" class="cursor-pointer">
+                <fa icon="circle-info" class="fa-fw text-slate-500" />
+              </a>
+
+              <!-- Timestamp -->
+              <span
+                class="ms-auto text-xs text-slate-500 italic"
+                title="8888-88-88 88:88:88"
+                >[TIMESTAMP]</span
+              >
+            </div>
+
+            <!--
             <div class="grid grid-cols-12">
               <span class="pt-1 col-span-1 justify-self-start">
                 <span>
@@ -282,7 +386,6 @@
                 </span>
               </span>
               <span class="col-span-10 justify-self-stretch overflow-hidden">
-                <!-- show giver and/or receiver profiles... which seemed like a good idea but actually adds clutter
                 <span
                   v-if="
                     record.giver.profileImageUrl ||
@@ -314,7 +417,6 @@
                     class="inline-block align-middle border border-slate-300 rounded-md ml-1"
                   />
                 </span>
-                -->
                 <span class="pl-2 block break-words">
                   {{ giveDescription(record) }}
                 </span>
@@ -359,6 +461,7 @@
                 />
               </div>
             </div>
+            -->
           </li>
         </ul>
       </InfiniteScroll>
@@ -436,6 +539,7 @@ import {
   OnboardPage,
   registerSaveAndActivatePasskey,
 } from "../libs/util";
+// import { fa0 } from "@fortawesome/free-solid-svg-icons";
 
 interface GiveRecordWithContactInfo extends GiveSummaryRecord {
   giver: {

src/views/ProjectViewView.vue

@@ -341,23 +341,37 @@
             <div v-else-if="givesTotalsByUnit.length > 0" class="flex-1">
               <span class="font-semibold mr-2 shrink-0">Totals</span>
               <span class="whitespace-nowrap overflow-hidden text-ellipsis">
-                <a @click="totalsExpanded = !totalsExpanded" class="cursor-pointer text-blue-500">
+                <a
+                  @click="totalsExpanded = !totalsExpanded"
+                  class="cursor-pointer text-blue-500"
+                >
                   <!-- just show the hours, or alternatively whatever is first -->
                   <span v-if="givenTotalHours() > 0">
                     {{ givenTotalHours() }} {{ libsUtil.UNIT_SHORT["HUR"] }}
                   </span>
                   <span v-else>
-                    {{ givesTotalsByUnit[0].amount }} {{ libsUtil.UNIT_SHORT[givesTotalsByUnit[0].unit] }}
+                    {{ givesTotalsByUnit[0].amount }}
+                    {{ libsUtil.UNIT_SHORT[givesTotalsByUnit[0].unit] }}
                   </span>
                   <span v-if="givesTotalsByUnit.length > 1">...</span>
                   <span>
-                    <fa :icon="totalsExpanded ? 'chevron-up' : 'chevron-right'" class="fa-fw text-xs ml-1" />
+                    <fa
+                      :icon="totalsExpanded ? 'chevron-up' : 'chevron-right'"
+                      class="fa-fw text-xs ml-1"
+                    />
                   </span>
                 </a>
                 <!-- show the full list when expanded -->
                 <div v-if="totalsExpanded">
-                  <div v-for="(total, index) in givesTotalsByUnit" :key="total.unit" class="ml-2">
+                  <div
-                    <fa :icon="libsUtil.iconForUnitCode(total.unit)" class="fa-fw text-slate-400 mr-1" />
+                    v-for="total in givesTotalsByUnit"
+                    :key="total.unit"
+                    class="ml-2"
+                  >
+                    <fa
+                      :icon="libsUtil.iconForUnitCode(total.unit)"
+                      class="fa-fw text-slate-400 mr-1"
+                    />
                     {{ total.amount }} {{ libsUtil.UNIT_LONG[total.unit] }}
                   </div>
                 </div>
@@ -365,7 +379,9 @@
             </div>
             <div v-else>
               <span class="font-semibold mr-2 shrink-0">
-                {{ givesToThis.length }}{{ givesHitLimit ? "+" : "" }} record{{ givesToThis.length === 1 ? "" : "s" }}
+                {{ givesToThis.length }}{{ givesHitLimit ? "+" : "" }} record{{
+                  givesToThis.length === 1 ? "" : "s"
+                }}
               </span>
             </div>
           </div>
@@ -416,18 +432,27 @@
                   "
                   @click="deepCheckConfirmable(give)"
                 >
-                <fa icon="circle-check" class="text-blue-500 cursor-pointer" />
+                  <fa
+                    icon="circle-check"
+                    class="text-blue-500 cursor-pointer"
+                  />
                 </a>
                 <a v-else-if="checkingConfirmationForJwtId === give.jwtId">
                   <fa icon="spinner" class="fa-spin-pulse" />
                 </a>
                 <a v-else @click="shallowNotifyWhyCannotConfirm(give)">
-                <fa icon="circle-check" class="text-slate-500 cursor-pointer" />
+                  <fa
+                    icon="circle-check"
+                    class="text-slate-500 cursor-pointer"
+                  />
                 </a>
               </div>
               <div v-if="give.fullClaim.image" class="flex justify-center">
                 <a :href="give.fullClaim.image" target="_blank">
-                <img :src="give.fullClaim.image" class="h-24 mt-2 rounded-xl" />
+                  <img
+                    :src="give.fullClaim.image"
+                    class="h-24 mt-2 rounded-xl"
+                  />
                 </a>
               </div>
             </li>
@@ -594,7 +619,7 @@ export default class ProjectViewView extends Vue {
   givesHitLimit = false;
   givesProvidedByThis: Array<GiveSummaryRecord> = [];
   givesProvidedByHitLimit = false;
-  givesTotalsByUnit: Array<{unit: string, amount: number}> = [];
+  givesTotalsByUnit: Array<{ unit: string; amount: number }> = [];
   imageUrl = "";
   isRegistered = false;
   issuer = "";
@@ -1254,14 +1279,17 @@ export default class ProjectViewView extends Vue {
 
   async loadTotals() {
     this.loadingTotals = true;
-    const url = this.apiServer + "/api/v2/report/givesToPlans?planIds=" + encodeURIComponent(JSON.stringify([this.projectId]));
+    const url =
+      this.apiServer +
+      "/api/v2/report/givesToPlans?planIds=" +
+      encodeURIComponent(JSON.stringify([this.projectId]));
     const headers = await serverUtil.getHeaders(this.activeDid);
 
     try {
       const resp = await this.axios.get(url, { headers });
       if (resp.status === 200 && resp.data.data) {
         // Calculate totals by unit
-        const totals: {[key: string]: number} = {};
+        const totals: { [key: string]: number } = {};
         resp.data.data.forEach((give: GiveSummaryRecord) => {
           const amount = give.fullClaim.object?.amountOfThisGood;
           const unit = give.fullClaim.object?.unitCode;
@@ -1271,10 +1299,12 @@ export default class ProjectViewView extends Vue {
         });
 
         // Convert totals object to array format
-        this.givesTotalsByUnit = Object.entries(totals).map(([unit, amount]) => ({
+        this.givesTotalsByUnit = Object.entries(totals).map(
+          ([unit, amount]) => ({
             unit,
-          amount
+            amount,
-        }));
+          }),
+        );
       }
     } catch (error) {
       console.error("Error loading totals:", error);
@@ -1293,7 +1323,9 @@ export default class ProjectViewView extends Vue {
   }
 
   givenTotalHours(): number {
-    return this.givesTotalsByUnit.find(total => total.unit === "HUR")?.amount || 0;
+    return (
+      this.givesTotalsByUnit.find((total) => total.unit === "HUR")?.amount || 0
+    );
   }
 }
 </script>