rework contacts screen to show activity buttons always but totals on request

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,28 +126,27 @@
         </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,
+      <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 />
+        <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"
@@ -164,6 +162,7 @@
             }}
             <font-awesome icon="left-right" class="fa-fw" />
           </button>
+        </span>
       </div>
     </div>
 
@@ -179,10 +178,10 @@
         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">
+        <div class="flex justify-between items-start">
+          <span class="grow overflow-hidden">
+            <span 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"
@@ -230,18 +229,20 @@
                   {{ contact.notes }}
                 </div>
               </span>
-          </div>
-          <div
-            v-if="showGiveNumbers && contact.did != activeDid"
-            class="ml-auto flex gap-1.5 mt-2"
+            </span>
+          </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 />
+              <span v-if="showGiveNumbers">
                 {{
                   /* eslint-disable prettier/prettier */
                   showGiveTotals
@@ -252,6 +253,7 @@
                         : (givenToMeUnconfirmed[contact.did] || 0)
                   /* eslint-enable prettier/prettier */
                 }}
+              </span>
             </button>
 
             <button
@@ -259,8 +261,9 @@
               :title="givenByMeDescriptions[contact.did] || ''"
               @click="confirmShowGiftedDialog(activeDid, contact.did)"
             >
-              To:
+              To&hellip;
               <br />
+              <span v-if="showGiveNumbers">
                 {{
                   /* eslint-disable prettier/prettier */
                   showGiveTotals
@@ -271,6 +274,7 @@
                       : (givenByMeUnconfirmed[contact.did] || 0)
                   /* 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;