From ba9bb8a26ebf00089ff040447df37c766b5d80ee Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Tue, 29 Apr 2025 20:39:45 -0600
Subject: [PATCH] rework contacts screen to show activity buttons always but
 totals on request

---
 src/views/ContactsView.vue | 211 +++++++++++++++++++------------------
 1 file changed, 106 insertions(+), 105 deletions(-)

diff --git a/src/views/ContactsView.vue b/src/views/ContactsView.vue
index c59e13ee..3ecbd593 100644
--- a/src/views/ContactsView.vue
+++ b/src/views/ContactsView.vue
@@ -92,7 +92,7 @@
 
     <div v-if="contacts.length > 0" class="flex justify-between">
       <div class="w-full text-left">
-        <div v-if="!showGiveNumbers">
+        <div>
           <input
             type="checkbox"
             :checked="contactsSelected.length === contacts.length"
@@ -105,7 +105,6 @@
             "
           />
           <button
-            v-if="!showGiveNumbers"
             href=""
             class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-3 px-3 py-1.5 rounded-md"
             :style="
@@ -127,43 +126,43 @@
         </div>
       </div>
 
-      <div class="w-full text-right">
+      <div v-if="!showGiveNumbers" class="w-full text-right">
         <button
           href=""
           class="text-md 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-3 py-1.5 rounded-md"
           @click="toggleShowContactAmounts()"
         >
-          {{
-            showGiveNumbers ? "Hide Hours, Offer, etc" : "See Hours, Offer, etc"
-          }}
+          See Hours, Offer, etc
         </button>
       </div>
-    </div>
-    <div v-if="showGiveNumbers" class="flex justify-between mt-1">
-      <div class="w-full text-right">
-        In the following, only the most recent hours are included. To see more,
-        click
-        <span
-          class="text-sm 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 py-1 rounded-md"
-        >
-          <font-awesome icon="file-lines" class="fa-fw" />
+      <div v-else class="w-full text-right">
+        <span class="text-sm">
+          Only the most recent From/To hours show in buttons. To see more,
+          click
+          <span
+            class="text-sm 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 py-1 rounded-md"
+          >
+            <font-awesome icon="file-lines" class="fa-fw" />
+          </span>
         </span>
         <br />
-        <button
-          href=""
-          class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 rounded-md mt-1"
-          :class="showGiveAmountsClassNames()"
-          @click="toggleShowGiveTotals()"
-        >
-          {{
-            showGiveTotals
-              ? "Totals"
-              : showGiveConfirmed
-                ? "Confirmed Amounts"
-                : "Unconfirmed Amounts"
-          }}
-          <font-awesome icon="left-right" class="fa-fw" />
-        </button>
+        <span>
+          <button
+            href=""
+            class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 rounded-md mt-1"
+            :class="showGiveAmountsClassNames()"
+            @click="toggleShowGiveTotals()"
+          >
+            {{
+              showGiveTotals
+                ? "Totals"
+                : showGiveConfirmed
+                  ? "Confirmed Amounts"
+                  : "Unconfirmed Amounts"
+            }}
+            <font-awesome icon="left-right" class="fa-fw" />
+          </button>
+        </span>
       </div>
     </div>
 
@@ -179,79 +178,82 @@
         class="border-b border-slate-300 pt-1 pb-1"
         data-testId="contactListItem"
       >
-        <div class="grow overflow-hidden">
-          <div class="flex items-center gap-3">
-            <input
-              v-if="!showGiveNumbers"
-              type="checkbox"
-              :checked="contactsSelected.includes(contact.did)"
-              class="ml-2 h-6 w-6 flex-shrink-0"
-              data-testId="contactCheckOne"
-              @click="
-                contactsSelected.includes(contact.did)
-                  ? contactsSelected.splice(
-                      contactsSelected.indexOf(contact.did),
-                      1,
-                    )
-                  : contactsSelected.push(contact.did)
-              "
-            />
-
-            <EntityIcon
-              :contact="contact"
-              :icon-size="48"
-              class="inline-block align-text-bottom border border-slate-300 rounded cursor-pointer overflow-hidden"
-              @click="showLargeIdenticon = contact"
-            />
-
-            <h2 class="text-base font-semibold w-1/3 truncate flex-shrink-0">
-              {{ contactNameNonBreakingSpace(contact.name) }}
-            </h2>
-
-            <span>
-              <div class="flex gap-2 items-center">
-                <router-link
-                  :to="{
-                    path: '/did/' + encodeURIComponent(contact.did),
-                  }"
-                  title="See more about this person"
-                >
-                  <font-awesome
-                    icon="circle-info"
-                    class="text-xl text-blue-500"
-                  />
-                </router-link>
-
-                <span class="text-sm overflow-hidden">{{
-                  libsUtil.shortDid(contact.did)
-                }}</span>
-              </div>
-              <div class="text-sm">
-                {{ contact.notes }}
-              </div>
+        <div class="flex justify-between items-start">
+          <span class="grow overflow-hidden">
+            <span class="flex items-center gap-3">
+              <input
+                type="checkbox"
+                :checked="contactsSelected.includes(contact.did)"
+                class="ml-2 h-6 w-6 flex-shrink-0"
+                data-testId="contactCheckOne"
+                @click="
+                  contactsSelected.includes(contact.did)
+                    ? contactsSelected.splice(
+                        contactsSelected.indexOf(contact.did),
+                        1,
+                      )
+                    : contactsSelected.push(contact.did)
+                "
+              />
+
+              <EntityIcon
+                :contact="contact"
+                :icon-size="48"
+                class="inline-block align-text-bottom border border-slate-300 rounded cursor-pointer overflow-hidden"
+                @click="showLargeIdenticon = contact"
+              />
+
+              <h2 class="text-base font-semibold w-1/3 truncate flex-shrink-0">
+                {{ contactNameNonBreakingSpace(contact.name) }}
+              </h2>
+
+              <span>
+                <div class="flex gap-2 items-center">
+                  <router-link
+                    :to="{
+                      path: '/did/' + encodeURIComponent(contact.did),
+                    }"
+                    title="See more about this person"
+                  >
+                    <font-awesome
+                      icon="circle-info"
+                      class="text-xl text-blue-500"
+                    />
+                  </router-link>
+
+                  <span class="text-sm overflow-hidden">{{
+                    libsUtil.shortDid(contact.did)
+                  }}</span>
+                </div>
+                <div class="text-sm">
+                  {{ contact.notes }}
+                </div>
+              </span>
             </span>
-          </div>
-          <div
-            v-if="showGiveNumbers && contact.did != activeDid"
-            class="ml-auto flex gap-1.5 mt-2"
+          </span>
+          <span
+            v-if="contact.did != activeDid"
+            class="flex gap-1.5 ml-2"
           >
             <button
               class="text-sm 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-1.5 rounded-l-md"
               :title="givenToMeDescriptions[contact.did] || ''"
               @click="confirmShowGiftedDialog(contact.did, activeDid)"
             >
-              From:
+              From&hellip;
               <br />
-              {{
-                /* eslint-disable prettier/prettier */
-                showGiveTotals
-                  ? ((givenToMeConfirmed[contact.did] || 0)
-                      + (givenToMeUnconfirmed[contact.did] || 0))
-                  : showGiveConfirmed
-                      ? (givenToMeConfirmed[contact.did] || 0)
-                      : (givenToMeUnconfirmed[contact.did] || 0)
-                /* eslint-enable prettier/prettier */
-              }}
+              <span v-if="showGiveNumbers">
+                {{
+                  /* eslint-disable prettier/prettier */
+                  showGiveTotals
+                    ? ((givenToMeConfirmed[contact.did] || 0)
+                        + (givenToMeUnconfirmed[contact.did] || 0))
+                    : showGiveConfirmed
+                        ? (givenToMeConfirmed[contact.did] || 0)
+                        : (givenToMeUnconfirmed[contact.did] || 0)
+                  /* eslint-enable prettier/prettier */
+                }}
+              </span>
             </button>
 
             <button
@@ -259,18 +261,20 @@
               :title="givenByMeDescriptions[contact.did] || ''"
               @click="confirmShowGiftedDialog(activeDid, contact.did)"
             >
-              To:
+              To&hellip;
               <br />
-              {{
-                /* eslint-disable prettier/prettier */
-                showGiveTotals
+              <span v-if="showGiveNumbers">
+                {{
+                  /* eslint-disable prettier/prettier */
+                  showGiveTotals
                   ? ((givenByMeConfirmed[contact.did] || 0)
                     + (givenByMeUnconfirmed[contact.did] || 0))
                   : showGiveConfirmed
                       ? (givenByMeConfirmed[contact.did] || 0)
                       : (givenByMeUnconfirmed[contact.did] || 0)
-                /* eslint-enable prettier/prettier */
-              }}
+                  /* eslint-enable prettier/prettier */
+                }}
+              </span>
             </button>
 
             <button
@@ -291,7 +295,7 @@
             >
               <font-awesome icon="file-lines" class="fa-fw" />
             </router-link>
-          </div>
+          </span>
         </div>
       </li>
     </ul>
@@ -299,7 +303,6 @@
 
     <div v-if="contacts.length > 0" class="mt-2 w-full text-left">
       <input
-        v-if="!showGiveNumbers"
         type="checkbox"
         :checked="contactsSelected.length === contacts.length"
         class="align-middle ml-2 h-6 w-6"
@@ -311,7 +314,6 @@
         "
       />
       <button
-        v-if="!showGiveNumbers"
         href=""
         class="text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-3 px-3 py-1.5 rounded-md"
         :style="
@@ -448,7 +450,6 @@ export default class ContactsView extends Vue {
     await this.processContactJwt();
     await this.processInviteJwt();
 
-    this.showGiveNumbers = !!settings.showContactGivesInline;
     this.hideRegisterPromptOnNewContact =
       !!settings.hideRegisterPromptOnNewContact;